import type { MDXComponents } from 'mdx/types'; import type { GetStaticProps } from 'next'; import Head from 'next/head'; import NextImage from 'next/image'; import Script from 'next/script'; import type { FC } from 'react'; import { useIntl } from 'react-intl'; import { Card, CardCover, CardFooter, CardHeader, CardMeta, CardTitle, getLayout, Grid, Time, MetaItem, Page, } from '../components'; import { mdxComponents } from '../components/mdx'; import HomePageContent, { meta } from '../content/pages/homepage.mdx'; import { convertRecentPostToRecentArticle, fetchRecentPosts, } from '../services/graphql'; import type { NextPageWithLayout, RecentArticle } from '../types'; import { CONFIG } from '../utils/config'; import { ROUTES } from '../utils/constants'; import { getSchemaJson, getWebPageSchema } from '../utils/helpers'; import { loadTranslation, type Messages } from '../utils/helpers/server'; import { useBreadcrumb } from '../utils/hooks'; type RecentPostsProps = { posts: RecentArticle[]; }; /** * Get a cards list of recent posts. * * @returns {JSX.Element} - The cards list. */ const RecentPosts: FC = ({ posts }): JSX.Element => { const intl = useIntl(); const publicationDate = intl.formatMessage({ defaultMessage: 'Published on:', description: 'HomePage: publication date label', id: 'pT5nHk', }); return ( {posts.map((post) => { const postUrl = `${ROUTES.ARTICLE}/${post.slug}`; const cardLabel = intl.formatMessage( { defaultMessage: 'View {pageTitle}', description: 'RecentPosts: card accessible name', id: 'mWZU4R', }, { pageTitle: post.title, } ); const coverLabel = intl.formatMessage( { defaultMessage: 'Cover of {pageTitle}', description: 'RecentPosts: card cover accessible name', id: 'kq+fzI', }, { pageTitle: post.title, } ); return ( ) : undefined } key={post.id} meta={ } /> } isCentered linkTo={postUrl} > {post.title} ); })} ); }; const getComponents = (recentPosts: RecentArticle[]): MDXComponents => { return { ...mdxComponents, RecentPosts: () => , }; }; type HomeProps = { recentPosts: RecentArticle[]; translation?: Messages; }; /** * Home page. */ const HomePage: NextPageWithLayout = ({ recentPosts }) => { const { schema: breadcrumbSchema } = useBreadcrumb({ title: '', url: ROUTES.HOME, }); const webpageSchema = getWebPageSchema({ description: meta.seo.description, locale: CONFIG.locales.defaultLocale, slug: ROUTES.HOME, title: meta.seo.title, }); const schemaJsonLd = getSchemaJson([webpageSchema]); return ( {meta.seo.title} {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */}