From f5ba1046b13acd239c472e361f345902937662fb Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 20 Jan 2022 11:57:16 +0100
Subject: chore: add a page for projects

---
 src/pages/projets.tsx | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/pages/projets.tsx

(limited to 'src/pages/projets.tsx')

diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
new file mode 100644
index 0000000..0c04024
--- /dev/null
+++ b/src/pages/projets.tsx
@@ -0,0 +1,108 @@
+import { getLayout } from '@components/Layouts/Layout';
+import PostHeader from '@components/PostHeader/PostHeader';
+import ProjectsList from '@components/ProjectsList/ProjectsList';
+import { seo } from '@config/seo';
+import { config } from '@config/website';
+import PageContent, { intro, meta } from '@content/pages/projects.mdx';
+import styles from '@styles/pages/Projects.module.scss';
+import { Project } from '@ts/types/app';
+import { loadTranslation } from '@utils/helpers/i18n';
+import { getSortedProjects } from '@utils/helpers/projects';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { Article, Graph, WebPage } from 'schema-dts';
+
+const Projects = ({ projects }: { projects: Project[] }) => {
+  const dates = {
+    publication: meta.publishedOn,
+    update: meta.updatedOn,
+  };
+  const publicationDate = new Date(dates.publication);
+  const updateDate = new Date(dates.update);
+  const router = useRouter();
+  const pageUrl = `${config.url}${router.asPath}`;
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${config.url}/#breadcrumb` },
+    name: seo.legalNotice.title,
+    description: seo.legalNotice.description,
+    inLanguage: config.locales.defaultLocale,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    reviewedBy: { '@id': `${config.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${config.url}`,
+    },
+  };
+
+  const articleSchema: Article = {
+    '@id': `${config.url}/#projects`,
+    '@type': 'Article',
+    name: meta.title,
+    description: intro,
+    author: { '@id': `${config.url}/#branding` },
+    copyrightYear: publicationDate.getFullYear(),
+    creator: { '@id': `${config.url}/#branding` },
+    dateCreated: publicationDate.toISOString(),
+    dateModified: updateDate.toISOString(),
+    datePublished: publicationDate.toISOString(),
+    editor: { '@id': `${config.url}/#branding` },
+    inLanguage: config.locales.defaultLocale,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, articleSchema],
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{seo.projects.title}</title>
+        <meta name="description" content={seo.projects.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={meta.title} />
+        <meta property="og:description" content={intro} />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+        ></script>
+      </Head>
+      <article id="projects" className={styles.article}>
+        <PostHeader title={meta.title} intro={<PageContent />} />
+        <div className={styles.body}>
+          {projects.length > 0 && <ProjectsList projects={projects} />}
+        </div>
+      </article>
+    </>
+  );
+};
+
+Projects.getLayout = getLayout;
+
+export const getStaticProps: GetStaticProps = async (
+  context: GetStaticPropsContext
+) => {
+  const translation = await loadTranslation(
+    context.locale!,
+    process.env.NODE_ENV === 'production'
+  );
+  const breadcrumbTitle = meta.title;
+  const projects: Project[] = await getSortedProjects();
+
+  return {
+    props: {
+      breadcrumbTitle,
+      projects,
+      translation,
+    },
+  };
+};
+
+export default Projects;
-- 
cgit v1.2.3

