chore: add a Projects page

5 files changed, 253 insertions, 14 deletions

diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
new file mode 100644
index 0000000..996af74
--- /dev/null
+++ b/src/pages/projets.tsx
@@ -0,0 +1,150 @@
+import Link from '@components/atoms/links/link';
+import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import CardsList, {
+  CardsListItem,
+} from '@components/organisms/layout/cards-list';
+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 { ProjectCard } from '@ts/types/app';
+import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { getProjectsCard } from '@utils/helpers/projects';
+import useSettings from '@utils/hooks/use-settings';
+import { NestedMDXComponents } from 'mdx/types';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useIntl } from 'react-intl';
+import { Article, Graph, WebPage } from 'schema-dts';
+
+type ProjectsPageProps = {
+  projects: ProjectCard[];
+  translation?: Messages;
+};
+
+/**
+ * Projects page.
+ */
+const ProjectsPage: NextPage<ProjectsPageProps> = ({ projects }) => {
+  const intl = useIntl();
+  const { dates, seo, title } = meta;
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'projects', name: title, url: '/projets' },
+  ];
+
+  const items: CardsListItem[] = projects.map(
+    ({ id, meta: projectMeta, slug, title: projectTitle }) => {
+      const { cover, tagline, ...remainingMeta } = projectMeta;
+      const formattedMeta: CardsListItem['meta'] = remainingMeta.technologies
+        ? [
+            {
+              id: 'technologies',
+              term: 'Technologies',
+              value: remainingMeta.technologies,
+            },
+          ]
+        : undefined;
+
+      return {
+        cover,
+        id: id as string,
+        meta: formattedMeta,
+        tagline,
+        title: projectTitle,
+        url: `/projets/${slug}`,
+      };
+    }
+  );
+
+  const components: NestedMDXComponents = {
+    Links: (props) => <Link {...props} />,
+  };
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageUrl = `${website.url}${asPath}`;
+  const pagePublicationDate = new Date(dates.publication);
+  const pageUpdateDate = new Date(dates.update);
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: seo.title,
+    description: seo.description,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const articleSchema: Article = {
+    '@id': `${website.url}/#projects`,
+    '@type': 'Article',
+    name: meta.title,
+    description: seo.description,
+    author: { '@id': `${website.url}/#branding` },
+    copyrightYear: pagePublicationDate.getFullYear(),
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    headline: meta.title,
+    inLanguage: website.locales.default,
+    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 (
+    <PageLayout
+      title={title}
+      intro={<PageContent components={components} />}
+      breadcrumb={breadcrumb}
+    >
+      <Head>
+        <title>{seo.title}</title>
+        <meta name="description" content={seo.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <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) }}
+      />
+      <CardsList items={items} titleLevel={2} className={styles.list} />
+    </PageLayout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const projects = await getProjectsCard();
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      projects,
+      translation,
+    },
+  };
+};
+
+export default ProjectsPage;
diff --git a/src/styles/pages/Projects.module.scss b/src/styles/pages/Projects.module.scss
deleted file mode 100644
index 3fd74cb..0000000
--- a/src/styles/pages/Projects.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.article {
-  composes: grid from "@styles/layout/_grid.scss";
-  align-items: start;
-
-  > header {
-    grid-column: 1 / -1;
-  }
-}
-
-.body {
-  grid-column: 1 / -1;
-  margin-bottom: var(--spacing-xl);
-}
diff --git a/src/styles/pages/projects.module.scss b/src/styles/pages/projects.module.scss
new file mode 100644
index 0000000..735a683
--- /dev/null
+++ b/src/styles/pages/projects.module.scss
@@ -0,0 +1,9 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.list {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      margin: 0 calc(var(--spacing-3xl) * -1) var(--spacing-md);
+    }
+  }
+}
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index 4d9c71c..87ab042 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -62,6 +62,7 @@ export type Meta<T extends PageKind> = {
   readingTime: number;
   repos?: T extends 'projects' ? Repos : never;
   seo: SEO;
+  tagline?: T extends 'projects' ? string : never;
   technologies?: T extends 'projects' ? string[] : never;
   thematics?: T extends 'article' | 'topic' ? PageLink[] : never;
   topics?: T extends 'article' | 'thematic' ? PageLink[] : never;
@@ -71,7 +72,7 @@ export type Meta<T extends PageKind> = {
 
 export type Page<T extends PageKind> = {
   content: string;
-  id: number;
+  id: number | string;
   intro: string;
   meta?: Meta<T>;
   slug: string;
@@ -88,5 +89,12 @@ export type Article = Page<'article'>;
 export type ArticleCard = Pick<Article, 'id' | 'slug' | 'title'> &
   Pick<Meta<'article'>, 'cover' | 'dates'>;
 export type Project = Page<'project'>;
+export type ProjectCard = Pick<Page<'project'>, 'id' | 'slug' | 'title'> & {
+  meta: Pick<Meta<'project'>, 'cover' | 'dates' | 'tagline' | 'technologies'>;
+};
 export type Thematic = Page<'thematic'>;
 export type Topic = Page<'topic'>;
+
+export type Slug = {
+  slug: string;
+};
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/projects.ts
new file mode 100644
index 0000000..02e0e02
--- /dev/null
+++ b/src/utils/helpers/projects.ts
@@ -0,0 +1,85 @@
+import { ProjectCard } from '@ts/types/app';
+import { MDXProjectMeta } from '@ts/types/mdx';
+import { readdirSync } from 'fs';
+import path from 'path';
+
+/**
+ * Retrieve all the projects filename.
+ *
+ * @returns {string[]} An array of filenames.
+ */
+export const getProjectFilenames = (): string[] => {
+  const projectsDirectory = path.join(process.cwd(), 'src/content/projects');
+  const filenames = readdirSync(projectsDirectory);
+
+  return filenames.map((filename) => filename.replace(/\.mdx$/, ''));
+};
+
+/**
+ * Retrieve project's data by filename.
+ *
+ * @param {string[]} filenames - The filenames without extension.
+ * @returns {Promise<ProjectCard[]>} - The project data.
+ */
+export const getProjectsData = async (
+  filenames: string[]
+): Promise<ProjectCard[]> => {
+  return Promise.all(
+    filenames.map(async (filename) => {
+      try {
+        const {
+          meta,
+        }: {
+          meta: MDXProjectMeta;
+        } = await import(`../../content/projects/${filename}.mdx`);
+
+        const { intro: _intro, title, ...projectMeta } = meta;
+
+        const cover = await import(`../../../public/projects/${filename}.jpg`);
+
+        return {
+          id: filename,
+          meta: {
+            ...projectMeta,
+            // Dynamic import source does not work so I use it only to get sizes
+            cover: {
+              ...cover.default,
+              alt: `${title} image`,
+              src: `/projects/${filename}.jpg`,
+            },
+          },
+          slug: filename,
+          title: title,
+        };
+      } catch (err) {
+        console.error(err);
+        throw err;
+      }
+    })
+  );
+};
+
+/**
+ * Method to sort an array of projects by publication date.
+ *
+ * @param {ProjectCard} a - A single project.
+ * @param {ProjectCard} b - A single project.
+ * @returns The result used by Array.sort() method: 1 || -1 || 0.
+ */
+const sortProjectsByPublicationDate = (a: ProjectCard, b: ProjectCard) => {
+  if (a.meta.dates.publication < b.meta.dates.publication) return 1;
+  if (a.meta.dates.publication > b.meta.dates.publication) return -1;
+  return 0;
+};
+
+/**
+ * Retrieve all projects in content folder sorted by publication date.
+ *
+ * @returns {Promise<ProjectCard[]>} An array of projects.
+ */
+export const getProjectsCard = async (): Promise<ProjectCard[]> => {
+  const filenames = getProjectFilenames();
+  const projects = await getProjectsData(filenames);
+
+  return [...projects].sort(sortProjectsByPublicationDate);
+};