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

1 files changed, 22 insertions, 33 deletions

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) {
@@ -56,27 +59,13 @@ 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);
 };