feat: implement project fetching and markdown rendering for enhanced project display
This commit is contained in:
@@ -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/>
|
||||
|
||||
26
app/api/projects/route.tsx
Normal file
26
app/api/projects/route.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import {NextResponse} from 'next/server';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import matter from 'gray-matter';
|
||||
|
||||
export async function GET() {
|
||||
const projectsDirectory = path.join(process.cwd(), 'public/projects');
|
||||
const filenames = fs.readdirSync(projectsDirectory);
|
||||
|
||||
console.log('Filenames:', filenames);
|
||||
|
||||
const projects = filenames.map((filename) => {
|
||||
const filePath = path.join(projectsDirectory, filename);
|
||||
const fileContents = fs.readFileSync(filePath, 'utf8');
|
||||
const {data} = matter(fileContents);
|
||||
|
||||
return {
|
||||
id: data.id,
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
slug: filename.replace('.md', ''),
|
||||
};
|
||||
});
|
||||
|
||||
return NextResponse.json(projects);
|
||||
}
|
||||
@@ -8,16 +8,24 @@ interface Project {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export default function Projects() {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/data/projects.json")
|
||||
.then((res) => res.json())
|
||||
.then((data) => setProjects(data));
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/projects');
|
||||
const projectsData = await response.json();
|
||||
setProjects(projectsData);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch projects:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@@ -29,7 +37,7 @@ export default function Projects() {
|
||||
{projects.map((project) => (
|
||||
<Link
|
||||
key={project.id}
|
||||
href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
|
||||
href={`/Projects/${project.slug}`}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<div
|
||||
@@ -44,9 +52,8 @@ export default function Projects() {
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,71 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.markdown ul {
|
||||
list-style-type: disc;
|
||||
margin-left: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.markdown ol {
|
||||
list-style-type: decimal;
|
||||
margin-left: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
border-left: 4px solid #ccc;
|
||||
color: #777;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-style: italic;
|
||||
background-color: #f9f9f9;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bg-radiant-animated {
|
||||
background: radial-gradient(circle at 20% 20%, #ff8185, transparent 25%),
|
||||
radial-gradient(circle at 80% 80%, #ffaa91, transparent 25%),
|
||||
|
||||
Reference in New Issue
Block a user