Images for gallery are read from the file system

- This removes the need to manually enter names in the projects constant - Automatically adds new images to gallery as soon as they are added to the project public folder - Removed field from project object - Removed filter option as images property does not exist anymore
mbeps · Aug 1, 2023 · 1920b78 · 1920b78
1 parent 31603f6
commit 1920b78
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 121 deletions.
diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
@@ -1,3 +1,4 @@
+import fs from "fs";
 import getProjectBySlug from "@/actions/getProjectBySlug";
 import Tag from "@/components/Atoms/Tag";
 import HeadingThree from "@/components/Text/HeadingThree";
@@ -18,6 +19,31 @@ import React from "react";
 import { BsArrowUpRightSquare, BsGithub } from "react-icons/bs";
 import { IoReaderOutline } from "react-icons/io5";
 
+/**
+ * Gets the images for a project from the file system.
+ * These are stored so that they can be displayed on the website.
+ * @param slug (string): the slug of the project
+ * @returns (string[]): the images for the project
+ */
+const getProjectImages = (slug: string): string[] => {
+  const folder = `public/projects/${slug}/`;
+  try {
+    const files = fs.readdirSync(folder);
+    return files.filter(
+      (file) => file.endsWith(".jpg") || file.endsWith(".png")
+    );
+  } catch (error) {
+    console.log(`Error reading directory ${folder}:`, error);
+    return [];
+  }
+};
+
+/**
+ * Generates the static paths for the projects.
+ * These are then used to pre-render the projects pages.
+ * This Incremental Static Regeneration allows the projects to be displayed without a server.
+ * This improves the performance of the website.
+ */
 export const generateStaticParams = async () => {
   const projects: Project[] = [
     ...webdevProjects,
@@ -69,7 +95,17 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ params }) => {
   const projectLanguage = project?.programmingLanguage;
   const projectDescription = project?.description;
 
-  let gallery = project?.imagesList;
+  let gallery = getProjectImages(slug);
+
+  // Exclude the 'cover' image and include only jpg and png images
+  gallery = gallery
+    .filter(
+      (image) =>
+        !image.startsWith("cover") &&
+        (image.endsWith(".jpg") || image.endsWith(".png"))
+    )
+    .sort(); // Sort the remaining images
+
   // Adds full path to images
   if (gallery) {
     gallery = gallery.map((image) => `/projects/${slug}/${image}`);
@@ -85,7 +121,7 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ params }) => {
       <HeadingTwo title={projectName!} />
 
       {/* Images Section */}
-      {gallery && gallery.length > 0 ? (
+      {gallery && gallery.length > 1 ? (
         <Gallery images={gallery} />
       ) : project?.imageURL ? (
         <div className="w-full flex items-center justify-center relative z-0">

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -147,8 +147,7 @@ const ProjectsPage = () => {
       (selectedLanguage === "All" ||
         project.programmingLanguage === selectedLanguage) &&
       (!hasArticle || project.articleURL) &&
-      (!hasSite || project.siteURL) &&
-      (!hasImages || (project.imagesList && project.imagesList.length > 0))
+      (!hasSite || project.siteURL)
   );
 
   /**
@@ -190,14 +189,6 @@ const ProjectsPage = () => {
     setHasSite(!hasSite);
   };
 
-  /**
-   * Toggles the filter for projects with images.
-   * If checked, only projects with images are displayed.
-   */
-  const toggleHasImages = () => {
-    setHasImages(!hasImages);
-  };
-
   /**
    * Resets all the filters.
    * This is used when the user clicks on the 'Reset' button.
@@ -282,12 +273,6 @@ const ProjectsPage = () => {
                     onChange={toggleHasSite}
                     label="Deployed projects"
                   />
-                  <Checkbox
-                    id="hasImages"
-                    checked={hasImages}
-                    onChange={toggleHasImages}
-                    label="Projects with galleries"
-                  />
                 </div>
               </div>
             </Popover>

diff --git a/components/ProjectItem/ProjectItem.tsx b/components/ProjectItem/ProjectItem.tsx
@@ -43,7 +43,6 @@ const ProjectItem: React.FC<Project> = ({
   slug,
   description,
   imageURL,
-  imagesList,
   repoURL,
   siteURL,
   articleURL,

diff --git a/types/projects.ts b/types/projects.ts
@@ -6,7 +6,6 @@ export default interface Project {
   slug: string;
   description: string;
   imageURL?: string;
-  imagesList?: string[];
   repoURL?: string;
   siteURL?: string;
   articleURL?: string;
@@ -36,41 +35,6 @@ const webdevProjects: Project[] = [
       start discussions, and comment on them, connecting with like-minded individuals.
       `,
     imageURL: `/projects/circus-discussions/cover.png`,
-    imagesList: [
-      "1.png",
-      "3.png",
-      "4.png",
-      "5.png",
-      "6.png",
-      "7.png",
-      "8.png",
-      "9.png",
-      "10.png",
-      "11.png",
-      "12.png",
-      "14.png",
-      "15.png",
-      "16.png",
-      "17.png",
-      "18.png",
-      "19.png",
-      "20.png",
-      "21.png",
-      "22.png",
-      "23.png",
-      "24.png",
-      "25.png",
-      "26.png",
-      "27.png",
-      "28.png",
-      "30.png",
-      "31.png",
-      "32.png",
-      "33.png",
-      "34.png",
-      "35.png",
-      "36.png",
-    ],
     repoURL: `https://github.com/mbeps/next_discussion_platform`,
     siteURL: `https://circus-discussion.vercel.app/`,
     articleURL: `/blogs/project-circus-discussion`,
@@ -93,28 +57,6 @@ const webdevProjects: Project[] = [
       Users can chat one-on-one, participate in group chats, send text messages, share images, view active users, and personalize their profiles. 
       `,
     imageURL: `/projects/ringmaster-messaging/cover.png`,
-    imagesList: [
-      "login-desktop.png",
-      "login-mobile.png",
-      "contacts-desktop.png",
-      "contacts-mobile.png",
-      "messages-desktop.png",
-      "messages-mobile.png",
-      "single-conversation-desktop.png",
-      "single-conversation-mobile.png",
-      "single-conversation-modal-desktop.png",
-      "single-conversation-modal-mobile.png",
-      "group-conversation-desktop.png",
-      "group-conversation-mobile.png",
-      "group-conversation-modal-desktop.png",
-      "group-conversation-modal-mobile.png",
-      "create-groupchat-desktop.png",
-      "create-groupchat-mobile.png",
-      "send-image-desktop.png",
-      "send-image-mobile.png",
-      "profile-settings-desktop.png",
-      "profile-settings-mobile.png",
-    ],
     repoURL: `https://github.com/mbeps/ringmaster-messaging`,
     siteURL: `https://ringmaster-messaging.vercel.app/`,
     articleURL: `/blogs/project-ringmaster-messaging`,
@@ -142,19 +84,6 @@ const webdevProjects: Project[] = [
       Users can upload songs, search and listen to music, as well as like the songs they enjoy.
       `,
     imageURL: `/projects/drumroll-music/cover.png`,
-    imagesList: [
-      "home-desktop.png",
-      "home-mobile.png",
-      "search-desktop.png",
-      "search-mobile.png",
-      "search-song-desktop.png",
-      "search-song-mobile.png",
-      "search-not-found-desktop.png",
-      "search-not-found-mobile.png",
-      "player-desktop.png",
-      "player-mobile.png",
-      "upload-desktop.png",
-    ],
     repoURL: `https://github.com/mbeps/drumroll-music`,
     articleURL: `/blogs/project-drumroll-music`,
     programmingLanguage: `TypeScript`,
@@ -179,37 +108,6 @@ const webdevProjects: Project[] = [
     repoURL: `https://github.com/mbeps/magician-ai`,
     programmingLanguage: `TypeScript`,
     siteURL: "https://magician-ai.vercel.app/",
-    imagesList: [
-      "1.png",
-      "2.png",
-      "3.png",
-      "4.png",
-      "5.png",
-      "6.png",
-      "7.png",
-      "8.png",
-      "9.png",
-      "10.png",
-      "11.png",
-      "12.png",
-      "13.png",
-      "14.png",
-      "15.png",
-      "16.png",
-      "17.png",
-      "18.png",
-      "19.png",
-      "20.png",
-      "21.png",
-      "22.png",
-      "23.png",
-      "24.png",
-      "25.png",
-      "26.png",
-      "27.png",
-      "28.png",
-      "29.png",
-    ],
     technologies: [
       `Next.JS`,
       "React",