From 1920b78e0785fdf0d615ff51c401a4afbcc7671b Mon Sep 17 00:00:00 2001 From: Maruf Bepary Date: Tue, 1 Aug 2023 23:45:06 +0100 Subject: [PATCH] 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 --- app/projects/[slug]/page.tsx | 40 +++++++++- app/projects/page.tsx | 17 +---- components/ProjectItem/ProjectItem.tsx | 1 - types/projects.ts | 102 ------------------------- 4 files changed, 39 insertions(+), 121 deletions(-) diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx index 19998d67..49f08c87 100644 --- 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 = ({ 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 = ({ params }) => { {/* Images Section */} - {gallery && gallery.length > 0 ? ( + {gallery && gallery.length > 1 ? ( ) : project?.imageURL ? (
diff --git a/app/projects/page.tsx b/app/projects/page.tsx index 6955006f..c564baf2 100644 --- 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" /> -
diff --git a/components/ProjectItem/ProjectItem.tsx b/components/ProjectItem/ProjectItem.tsx index 9596fc04..397257b2 100644 --- a/components/ProjectItem/ProjectItem.tsx +++ b/components/ProjectItem/ProjectItem.tsx @@ -43,7 +43,6 @@ const ProjectItem: React.FC = ({ slug, description, imageURL, - imagesList, repoURL, siteURL, articleURL, diff --git a/types/projects.ts b/types/projects.ts index 6b8a24f7..2dce4198 100644 --- 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",