From 802285872a2c57e7a5e130f32a2b45497d7687f1 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 5 Dec 2023 19:11:34 +0100
Subject: refactor(pages): refine Projects page

* add a `contexts` meta key to projects
* replace `technologies` with `contexts` key in projects list
* make getProjectsFilenames async
* add Cypress tests
---
 src/utils/helpers/server/projects.ts | 55 +++++++++++++++---------------------
 1 file changed, 22 insertions(+), 33 deletions(-)

(limited to 'src/utils/helpers/server/projects.ts')

diff --git a/src/utils/helpers/server/projects.ts b/src/utils/helpers/server/projects.ts
index c1a3d10..3f822fe 100644
--- a/src/utils/helpers/server/projects.ts
+++ b/src/utils/helpers/server/projects.ts
@@ -1,15 +1,17 @@
-import { readdirSync } from 'fs';
-import path from 'path';
+import { readdir } from 'fs/promises';
+import { join } from 'path';
+import type { StaticImageData } from 'next/image';
 import type { MDXProjectMeta, Project, ProjectPreview } from '../../../types';
+import { ROUTES } from '../../constants';
 
 /**
  * Retrieve all the projects filename.
  *
- * @returns {string[]} An array of filenames.
+ * @returns {Promise<string[]>} An array of filenames.
  */
-export const getProjectFilenames = (): string[] => {
-  const projectsDirectory = path.join(process.cwd(), 'src/content/projects');
-  const filenames = readdirSync(projectsDirectory);
+export const getProjectFilenames = async (): Promise<string[]> => {
+  const projectsDir = join(process.cwd(), 'src/content/projects');
+  const filenames = await readdir(projectsDir);
 
   return filenames.map((filename) => filename.replace(/\.mdx$/, ''));
 };
@@ -18,7 +20,7 @@ export const getProjectFilenames = (): string[] => {
  * Retrieve the data of a project by filename.
  *
  * @param {string} filename - The project filename.
- * @returns {Promise<ProjectPreview>}
+ * @returns {Promise<ProjectPreview>} A ProjectPreview object.
  */
 export const getProjectData = async (filename: string): Promise<Project> => {
   try {
@@ -28,25 +30,26 @@ export const getProjectData = async (filename: string): Promise<Project> => {
       meta: MDXProjectMeta;
     } = await import(`../../../content/projects/${filename}.mdx`);
 
-    const { dates, intro, title, ...projectMeta } = meta;
-    const { publication, update } = dates;
-    const cover = await import(`../../../../public/projects/${filename}.jpg`);
+    const { intro, title, ...projectMeta } = meta;
+    const cover: StaticImageData = (
+      await import(`../../../../public/projects/${filename}.jpg`)
+    ).default;
 
     return {
       id: filename,
       intro,
       meta: {
         ...projectMeta,
-        dates: { publication, update },
         // Dynamic import source does not work so I use it only to get sizes
         cover: {
-          ...cover.default,
           alt: `${title} image`,
+          height: cover.height,
           src: `/projects/${filename}.jpg`,
+          width: cover.width,
           title,
         },
       },
-      slug: filename,
+      slug: `${ROUTES.PROJECTS}/${filename}`,
       title,
     };
   } catch (err) {
@@ -55,28 +58,14 @@ export const getProjectData = async (filename: string): Promise<Project> => {
   }
 };
 
-/**
- * Retrieve all the projects data using filenames.
- *
- * @param {string[]} filenames - The filenames without extension.
- * @returns {Promise<ProjectPreview[]>} - An array of projects data.
- */
-export const getProjectsData = async (
-  filenames: string[]
-): Promise<ProjectPreview[]> =>
-  Promise.all(filenames.map(async (filename) => getProjectData(filename)));
-
 /**
  * Method to sort an array of projects by publication date.
  *
  * @param {ProjectPreview} a - A single project.
  * @param {ProjectPreview} b - A single project.
- * @returns The result used by Array.sort() method: 1 || -1 || 0.
+ * @returns {number} The result used by Array.sort() method: 1 || -1 || 0.
  */
-const sortProjectsByPublicationDate = (
-  a: ProjectPreview,
-  b: ProjectPreview
-) => {
+const byPublicationDate = (a: ProjectPreview, b: ProjectPreview) => {
   if (a.meta.dates.publication < b.meta.dates.publication) return 1;
   if (a.meta.dates.publication > b.meta.dates.publication) return -1;
   return 0;
@@ -87,9 +76,9 @@ const sortProjectsByPublicationDate = (
  *
  * @returns {Promise<ProjectPreview[]>} An array of projects.
  */
-export const getProjectsCard = async (): Promise<ProjectPreview[]> => {
-  const filenames = getProjectFilenames();
-  const projects = await getProjectsData(filenames);
+export const getAllProjects = async (): Promise<ProjectPreview[]> => {
+  const filenames = await getProjectFilenames();
+  const projects = await Promise.all(filenames.map(getProjectData));
 
-  return [...projects].sort(sortProjectsByPublicationDate);
+  return [...projects].sort(byPublicationDate);
 };
-- 
cgit v1.2.3