diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-24 19:35:12 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-24 19:35:12 +0200 |
| commit | c85ab5ad43ccf52881ee224672c41ec30021cf48 (patch) | |
| tree | 8058808d9bfca19383f120c46b34d99ff2f89f63 /src/pages/projets/index.tsx | |
| parent | 52404177c07a2aab7fc894362fb3060dff2431a0 (diff) | |
| parent | 11b9de44a4b2f305a6a484187805e429b2767118 (diff) | |
refactor: use storybook and atomic design (#16)
BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.
Diffstat (limited to 'src/pages/projets/index.tsx')
| -rw-r--r-- | src/pages/projets/index.tsx | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx new file mode 100644 index 0000000..dbca019 --- /dev/null +++ b/src/pages/projets/index.tsx @@ -0,0 +1,123 @@ +import Link from '@components/atoms/links/link'; +import CardsList, { + type CardsListItem, +} from '@components/organisms/layout/cards-list'; +import { getLayout } from '@components/templates/layout/layout'; +import PageLayout from '@components/templates/page/page-layout'; +import PageContent, { meta } from '@content/pages/projects.mdx'; +import styles from '@styles/pages/projects.module.scss'; +import { type NextPageWithLayout, type ProjectCard } from '@ts/types/app'; +import { loadTranslation, type Messages } from '@utils/helpers/i18n'; +import { getProjectsCard } from '@utils/helpers/projects'; +import { + getSchemaJson, + getSinglePageSchema, + getWebPageSchema, +} from '@utils/helpers/schema-org'; +import useBreadcrumb from '@utils/hooks/use-breadcrumb'; +import useSettings from '@utils/hooks/use-settings'; +import { NestedMDXComponents } from 'mdx/types'; +import { GetStaticProps } from 'next'; +import Head from 'next/head'; +import { useRouter } from 'next/router'; +import Script from 'next/script'; + +type ProjectsPageProps = { + projects: ProjectCard[]; + translation?: Messages; +}; + +/** + * Projects page. + */ +const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => { + const { dates, seo, title } = meta; + const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ + title, + url: `/projets`, + }); + + const items: CardsListItem[] = projects.map( + ({ id, meta: projectMeta, slug, title: projectTitle }) => { + const { cover, tagline, technologies } = projectMeta; + + return { + cover, + id: id as string, + meta: { technologies: technologies }, + tagline, + title: projectTitle, + url: `/projets/${slug}`, + }; + } + ); + + const components: NestedMDXComponents = { + Links: (props) => <Link {...props} />, + }; + + 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]); + + return ( + <> + <Head> + <title>{`${seo.title} - ${website.name}`}</title> + <meta name="description" content={seo.description} /> + <meta property="og:url" content={`${website.url}${asPath}`} /> + <meta property="og:type" content="article" /> + <meta property="og:title" content={`${seo.title} - ${website.name}`} /> + <meta property="og:description" content={seo.description} /> + </Head> + <Script + id="schema-projects" + type="application/ld+json" + dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} + /> + <PageLayout + title={title} + intro={<PageContent components={components} />} + breadcrumb={breadcrumbItems} + breadcrumbSchema={breadcrumbSchema} + > + <CardsList items={items} titleLevel={2} className={styles.list} /> + </PageLayout> + </> + ); +}; + +ProjectsPage.getLayout = (page) => + getLayout(page, { useGrid: true, withExtraPadding: true }); + +export const getStaticProps: GetStaticProps<ProjectsPageProps> = async ({ + locale, +}) => { + const projects = await getProjectsCard(); + const translation = await loadTranslation(locale); + + return { + props: { + projects: JSON.parse(JSON.stringify(projects)), + translation, + }, + }; +}; + +export default ProjectsPage; |