feat: implement project fetching and markdown rendering for enhanced project display

app/Projects/[slug]/page.tsx

@@ -1,18 +1,22 @@
+// app/Projects/[slug]/page.tsx
 "use client";
 
 import {useParams, useRouter} from "next/navigation";
 import {useEffect, useState} from "react";
 import Link from "next/link";
-import Image from "next/image";
 import Header from "../../components/Header";
 import Footer from "./Footer";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import matter from "gray-matter";
 
 interface Project {
     id: string;
     title: string;
-    slug: string;
     description: string;
-    link: string;
+    text: string;
+    slug: string;
     image: string;
 }
 
@@ -24,28 +28,34 @@ export default function ProjectDetail() {
 
     useEffect(() => {
         if (slug) {
-            fetch("/data/projects.json")
-                .then((res) => res.json())
-                .then((data: Project[]) => {
-                    const found = data.find((proj) => proj.slug === slug);
-                    if (found) {
-                        setProject(found);
+            fetch(`/projects/${slug}.md`)
+                .then((res) => res.text())
+                .then((content) => {
+                    const {data, content: markdownContent} = matter(content);
+                    setProject({
+                        id: data.id,
+                        title: data.title,
+                        description: data.description,
+                        text: markdownContent,
+                        slug: slug,
+                        image: data.image,
+                    });
 
-                        // Log the project view
-                        fetch("/api/stats", {
-                            method: "POST",
-                            headers: {
-                                "Content-Type": "application/json",
-                            },
-                            body: JSON.stringify({
-                                type: "project_view",
-                                projectId: found.id,
-                            }),
-                        }).catch((err) => console.error("Failed to log project view", err));
-                    } else {
-                        // Redirect to 404 if project not found
-                        router.replace("/not-found");
-                    }
+                    // Log the project view
+                    fetch("/api/stats", {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({
+                            type: "project_view",
+                            projectId: data.id,
+                        }),
+                    }).catch((err) => console.error("Failed to log project view", err));
+                })
+                .catch(() => {
+                    // Redirect to 404 if project not found
+                    router.replace("/not-found");
                 });
         }
     }, [slug, router]);
@@ -59,26 +69,18 @@ export default function ProjectDetail() {
             <Header/>
             <div className="flex-grow p-10 pt-24">
                 <div
-                    className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto">
-                    <h1 className="text-4xl font-bold text-gray-800 dark:text-white">
-                        {project.title}
-                    </h1>
-                    <Image
-                        src={project.image}
-                        alt={project.title}
-                        width={400}
-                        height={400}
-                        className="mt-4 w-full max-w-md rounded shadow-lg"
-                    />
-                    <p className="mt-4 text-gray-600 dark:text-gray-300">
-                        {project.description}
-                    </p>
-                    <Link
-                        href={`/`}
-                        className="mt-4 inline-block text-blue-500 hover:underline"
-                    >
-                        Go back Home
-                    </Link>
+                    className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
+                    <div className="mt-4 text-gray-600 dark:text-gray-300 markdown">
+                        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+                            {project.text}
+                        </ReactMarkdown>
+                    </div>
+                    <div className={"mt-10"}>
+                        <button
+                            className={"md:w-1/6 p-3 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl hover:from-blue-600 hover:to-purple-600 transition"}>
+                            <Link href="/">Back to Projects</Link>
+                        </button>
+                    </div>
                 </div>
             </div>
             <Footer/>