diff --git a/app/Projects/[slug]/page.tsx b/app/Projects/[slug]/page.tsx index 82168d3..8bfabda 100644 --- a/app/Projects/[slug]/page.tsx +++ b/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() {
-

- {project.title} -

- {project.title} -

- {project.description} -

- - Go back Home - + className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl"> +
+ + {project.text} + +
+
+ +