VERCEL TEST: Check if thumbnails are loaded on server side

mbeps · Feb 3, 2024 · b78b896 · b78b896
1 parent ca8c720
commit b78b896
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 29 deletions.
diff --git a/actions/file-system/updateProjectImages.ts b/actions/file-system/updateProjectImages.ts
@@ -0,0 +1,26 @@
+import ProjectInterface from "@/interfaces/material/ProjectInterface";
+import hasProjectCover from "../material/projects/hasProjectCover";
+
+/**
+ * Adds the path to the cover images for each project that has a cover image.
+ * The cover image is stored in the public/projects folder.
+ * The project folder must have the same name as the slug.
+ * The name of the cover image must be `cover.png`.
+ * This only works on the server as it requires access to the file system.
+ * Only server components can use this function.
+ * @param projects (Project[]) - Array of project objects.
+ * @returns (Project[]) - Array of project objects with updated imageURL fields.
+ */
+const updateProjectImages = (projects: ProjectInterface[]): ProjectInterface[] => {
+  return projects.map((project) => {
+    if (hasProjectCover(project.slug)) {
+      return {
+        ...project,
+        thumbnailImage: `/projects/${project.slug}/cover.png`,
+      };
+    }
+    return project;
+  });
+};
+
+export default updateProjectImages;
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -1,16 +1,7 @@
 import HeadingOne from "@/components/Text/HeadingOne";
 import PageDescription from "@/components/UI/PageDescription";
 import { PROJECTS } from "@/constants/pages";
-import {
-  backendWebDevProjects,
-  extraWebDevProjects,
-  gameDevProjects,
-  javaAssignments,
-  machineLearningProjects,
-  otherProjects,
-  webdevProjects,
-} from "@/database/projects";
-import ProjectInterface from "@/interfaces/material/ProjectInterface";
+import allProjects from "@/database/projects";
 import type { Metadata } from "next";
 import ProjectsView from "./components/ProjectsView";
 
@@ -38,16 +29,6 @@ export const metadata: Metadata = {
  * @returns (JSX.Element): Projects page
  */
 const ProjectsPage = () => {
-  const allProjects: ProjectInterface[] = [
-    ...webdevProjects,
-    ...extraWebDevProjects,
-    ...backendWebDevProjects,
-    ...machineLearningProjects,
-    ...javaAssignments,
-    ...gameDevProjects,
-    ...otherProjects,
-  ];
-
   return (
     <section id="projects" className="flex flex-col items-start md:items-end">
       <div className="animate-fadeIn animation-delay-2 w-full min-h-[85vh]">

diff --git a/components/ProjectItem/ProjectItem.tsx b/components/ProjectItem/ProjectItem.tsx
@@ -45,12 +45,7 @@ interface ProjectItemProps {
 const ProjectItem: React.FC<ProjectItemProps> = ({ project }) => {
   const basePath = PROJECTS.path;
 
-  if (project.hasImage) {
-    project = {
-      ...project,
-      thumbnailImage: `${basePath}/${project.slug}/cover.png`,
-    };
-  }
+
 
   return (
     <div className="bg-neutral-100 dark:bg-neutral-950 p-4 rounded-xl sm:bg-white sm:dark:bg-neutral-900 sm:p-0 transition-colors duration-700 ">

diff --git a/database/projects.ts b/database/projects.ts
@@ -130,6 +130,7 @@ import {
   gitHub,
   gitLab,
 } from "./skills/technicalHardSkills/technicalHardSkillsVCS";
+import updateProjectImages from "@/actions/file-system/updateProjectImages";
 
 /**
  * Array of web development projects.
@@ -1384,14 +1385,14 @@ export {
 /**
  * Array of all projects.
  */
-const allProjects = addNestedSkillsMaterialList<ProjectInterface>([
+const allProjects = updateProjectImages(addNestedSkillsMaterialList<ProjectInterface>([
   ...webdevProjects,
   ...machineLearningProjects,
   ...extraWebDevProjects,
   ...gameDevProjects,
   ...otherProjects,
   ...javaAssignments,
   ...backendWebDevProjects,
-]);
+]));
 
 export default allProjects;
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "markdown-to-jsx": "^7.2.1",
     "next": "^14.0.2",
     "next-themes": "^0.2.1",
+    "path": "^0.12.7",
     "postcss": "8.4.24",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -57,4 +58,4 @@
   "repository": "https://github.com/mbeps/personal-portfolio.git",
   "author": "Maruf Bepary <[email protected]>",
   "license": "MIT"
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2161,6 +2161,11 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+[email protected]:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
+
 internal-slot@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.6.tgz#37e756098c4911c5e912b8edbf71ed3aa116f930"
@@ -2805,6 +2810,14 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -2914,6 +2927,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+process@^0.11.1:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -3582,6 +3600,13 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"