Merge pull request #102 from 4Furki4/develop

[codex] Improve portfolio project page performance

Author: 4Furki4

app/[locale]/projects/[endpoint]/page.tsx

@@ -1,41 +1,47 @@
 import React from "react";
 import projectsData from "@/db/static/projects";
+import { getProjectImageBlurData } from "@/db/static/projectImageBlurData";
 import ProjectCard from "@/features/Projects/Cards/ProjectCard";
 import { Metadata } from "next";
-import { getBase64 } from "@/lib/getBase64ImageUrl";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 import { notFound } from "next/navigation";
 import { locales } from "@/navigation";
+
+export const dynamic = "force-static";
+export const dynamicParams = false;
+
 export async function generateMetadata({
   params,
 }: {
   params: Promise<{ endpoint: string; locale: string }>;
 }): Promise<Metadata> {
   const { locale, endpoint } = await params;
-  const project = projectsData.filter(
+  const project = projectsData.find(
     (project) => project.endpoint === endpoint
-  )[0];
+  );
+  if (!project) notFound();
+
   return {
-    title: project?.title[locale as "en" | "tr"],
-    description: project?.description[locale as "en" | "tr"],
+    title: project.title[locale as "en" | "tr"],
+    description: project.description[locale as "en" | "tr"],
     openGraph: {
       type: "website",
       locale: locale,
-      url: `/projects/${project?.endpoint}`,
-      title: `${project?.title[locale as "en" | "tr"]} | Furkan Cengiz`,
-      description: project?.description[locale as "en" | "tr"],
+      url: `/projects/${project.endpoint}`,
+      title: `${project.title[locale as "en" | "tr"]} | Furkan Cengiz`,
+      description: project.description[locale as "en" | "tr"],
       images: [
         {
-          url: project?.images[0].src,
-          alt: project?.images[0].alt,
+          url: project.images[0].src,
+          alt: project.images[0].alt,
         },
       ],
     },
     alternates: {
-      canonical: `/projects/${project?.endpoint}`,
+      canonical: `/projects/${project.endpoint}`,
       languages: {
-        en: `/projects/${project?.endpoint}`,
-        tr: `/tr/projeler/${project?.endpoint}`,
+        en: `/projects/${project.endpoint}`,
+        tr: `/tr/projeler/${project.endpoint}`,
       },
     },
   };
@@ -54,18 +60,17 @@ export default async function Project({
 }) {
   const { endpoint, locale } = await params;
   setRequestLocale(locale);
-  const project = projectsData.filter(
+  const project = projectsData.find(
     (project) => project.endpoint === endpoint
-  )[0];
+  );
 
   if (!project) notFound();
   const t = await getTranslations("Project");
-  const blurredImage = await getBase64(project.images[0].src);
   return (
     <section className="relative z-20 mx-auto mb-auto w-full max-w-7xl px-4 py-10 sm:px-6 sm:py-14 lg:px-8">
       <ProjectCard
         project={project}
-        blurredImage={blurredImage}
+        blurredImage={getProjectImageBlurData(project.endpoint)}
         repoLinkText={
           endpoint === "Turkish-Dictionary"
             ? t("repo-link.contribute")

app/[locale]/projects/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import projectsData from "@/db/static/projects";
+import { getProjectImageBlurData } from "@/db/static/projectImageBlurData";
 import ProjectCards from "@/features/Projects/Cards/ProjectsCard";
-import { getBase64 } from "@/lib/getBase64ImageUrl";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 export async function generateMetadata({
   params,
@@ -32,7 +32,6 @@ export async function generateMetadata({
     },
   };
 }
-const images = projectsData.map((project) => project.images[0].src);
 export default async function Projects({
   params,
 }: {
@@ -42,9 +41,6 @@ export default async function Projects({
   setRequestLocale(locale);
   const t = await getTranslations("Projects");
   const statusT = await getTranslations("Project.status");
-  const blurredImage = await Promise.all(
-    images.map((image) => getBase64(image))
-  );
 
   return (
     <section className="relative z-20 mb-auto w-full">
@@ -67,15 +63,15 @@ export default async function Projects({
         </header>
         <div className="grid gap-5">
           {projectsData.map((project, index) => (
-          <ProjectCards
-            project={project}
-            blurredImage={blurredImage[index]}
-            key={index}
-            index={index}
-            locale={locale}
-            statusText={statusT(project.status)}
-          />
-        ))}
+            <ProjectCards
+              project={project}
+              blurredImage={getProjectImageBlurData(project.endpoint)}
+              key={index}
+              index={index}
+              locale={locale}
+              statusText={statusT(project.status)}
+            />
+          ))}
         </div>
       </div>
     </section>

db/static/projectImageBlurData.ts

@@ -0,0 +1,23 @@
+export const projectImageBlurData = {
+  "Turkish-Dictionary":
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAPklEQVR4nAEzAMz/AL62s/8fCgb/GgAA/7uxr/8A7ezt/8LCwv++ubb/5+Xl/wD4+Pj/5uXm/+jp6f//////SxIluim5dtkAAAAASUVORK5CYII=",
+  Learnification:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKElEQVR4nGPg4OT5HxER/n/tlr3/+6bO/c+gqKz6v6629v/0uYvBGAAaYRKKSxGBHQAAAABJRU5ErkJggg==",
+  "Turkish-Dictionary-using-TDK-API":
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVR4nGNQUlL+f+XSlf9vXn/4r69v8J+BmZn5v7GR8X9HB8f/IDYAKB8PmxDPeTkAAAAASUVORK5CYII=",
+  "Meme-Generator":
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAK0lEQVR4nGNwUxP4/+zo0v827nH/GVlE/zOkWQn9///55H+3kJz/DAwC/wETexBD+9k3IgAAAABJRU5ErkJggg==",
+  "Frontend-Mentor-Challenges":
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAALUlEQVR4nAEiAN3/AKKSy/8AAFb/QUlX//b7/f8A/P7//0JHVP86QEn/+P3//1gtFaro6jYOAAAAAElFTkSuQmCC",
+} as const satisfies Record<Project["endpoint"], string>;
+
+export function getProjectImageBlurData(endpoint: Project["endpoint"]) {
+  const blurData =
+    projectImageBlurData[endpoint as keyof typeof projectImageBlurData];
+
+  if (!blurData) {
+    throw new Error(`Missing project image blur data for "${endpoint}"`);
+  }
+
+  return blurData;
+}