Refactor project slug handling and improve project retrieval logic

app/projects/[projectName]/page.tsx

@@ -1,5 +1,4 @@
-import { projects } from "@/lib/data";
-import { Project } from "@/lib/types";
+import { getProjectBySlug, projects, projectSlug } from "@/lib/data";
 import Chip from "@/components/chip";
 import MarkdownContent from "@/components/markdown-content";
 import { Metadata } from "next";
@@ -7,16 +6,9 @@ import Image from "next/image";
 import { Github, Eye, CloudDownload } from "lucide-react";
 import { notFound } from "next/navigation";
 
-function getProjectByName(name: string): Project | undefined {
-  const decodedName = decodeURIComponent(name.replace(/\+/g, " "));
-  return projects.find(
-    (p) => p.name.toLowerCase() === decodedName.toLowerCase()
-  );
-}
-
 export async function generateStaticParams() {
   return projects.map((project) => ({
-    projectName: encodeURIComponent(project.name.replace(/\s/g, "+")),
+    projectName: projectSlug(project),
   }));
 }
 
@@ -26,13 +18,13 @@ export async function generateMetadata({
   params: Promise<{ projectName: string }>;
 }): Promise<Metadata> {
   const { projectName } = await params;
-  const project = getProjectByName(projectName);
+  const project = getProjectBySlug(projectName);
 
   if (!project) {
     return { title: "Project Not Found" };
   }
 
-  const slug = encodeURIComponent(project.name.replace(/\s/g, "+"));
+  const slug = projectSlug(project);
 
   return {
     title: `${project.name} | Gabriel Kaszewski`,
@@ -70,7 +62,7 @@ export default async function ProjectDetailPage({
   params: Promise<{ projectName: string }>;
 }) {
   const { projectName } = await params;
-  const project = getProjectByName(projectName);
+  const project = getProjectBySlug(projectName);
 
   if (!project) {
     notFound();