import type { MDXComponents } from 'mdx/types'; import type { GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; import { CardsList, type CardsListItem, getLayout, Link, PageLayout, } from '../../components'; import PageContent, { meta } from '../../content/pages/projects.mdx'; import styles from '../../styles/pages/projects.module.scss'; import type { NextPageWithLayout, ProjectCard } from '../../types'; import { ROUTES } from '../../utils/constants'; import { getSchemaJson, getSinglePageSchema, getWebPageSchema, } from '../../utils/helpers'; import { getProjectsCard, loadTranslation, type Messages, } from '../../utils/helpers/server'; import { useBreadcrumb, useSettings } from '../../utils/hooks'; const components: MDXComponents = { Link, }; type ProjectsPageProps = { projects: ProjectCard[]; translation?: Messages; }; /** * Projects page. */ const ProjectsPage: NextPageWithLayout = ({ projects }) => { const { dates, seo, title } = meta; const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title, url: ROUTES.PROJECTS, }); const items: CardsListItem[] = projects.map( ({ id, meta: projectMeta, slug, title: projectTitle }) => { const { cover, tagline, technologies } = projectMeta; return { cover, id: id as string, meta: { technologies }, tagline, title: projectTitle, url: `${ROUTES.PROJECTS}/${slug}`, }; } ); const { website } = useSettings(); const { asPath } = useRouter(); const webpageSchema = getWebPageSchema({ description: seo.description, locale: website.locales.default, slug: asPath, title: seo.title, updateDate: dates.update, }); const articleSchema = getSinglePageSchema({ dates, description: seo.description, id: 'projects', kind: 'page', locale: website.locales.default, slug: asPath, title, }); const schemaJsonLd = getSchemaJson([webpageSchema, articleSchema]); const page = { title: `${seo.title} - ${website.name}`, url: `${website.url}${asPath}`, }; return ( <> {page.title} {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} {/*eslint-disable-next-line react/jsx-no-literals -- Content allowed */}