69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { getPostBySlug, getAllPosts } from "@/lib/api"
|
|
import { notFound } from "next/navigation"
|
|
import type { Metadata } from "next"
|
|
import Link from "next/link"
|
|
import { ArrowLeft } from "lucide-react"
|
|
import { Suspense } from "react"
|
|
import { MDXContent } from "@/components/mdx-content"
|
|
|
|
export function generateStaticParams() {
|
|
const posts = getAllPosts()
|
|
return posts.map((post) => ({
|
|
slug: post.slug,
|
|
}))
|
|
}
|
|
|
|
export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
|
|
const post = getPostBySlug(params.slug)
|
|
|
|
if (!post) {
|
|
return {
|
|
title: "Post Not Found",
|
|
}
|
|
}
|
|
|
|
return {
|
|
title: post.metadata.title,
|
|
description: post.metadata.excerpt,
|
|
}
|
|
}
|
|
|
|
export default function Post({ params }: { params: { slug: string } }) {
|
|
const post = getPostBySlug(params.slug)
|
|
|
|
if (!post) {
|
|
notFound()
|
|
}
|
|
|
|
return (
|
|
<article className="prose prose-invert max-w-none">
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center text-muted-foreground hover:text-primary mb-8 no-underline transition-colors"
|
|
>
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Back to all posts
|
|
</Link>
|
|
|
|
<header className="mb-8">
|
|
<h1 className="text-4xl font-bold tracking-tight mb-2 bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
|
|
{post.metadata.title}
|
|
</h1>
|
|
<time dateTime={post.metadata.date} className="text-muted-foreground">
|
|
{new Date(post.metadata.date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</time>
|
|
</header>
|
|
|
|
<div className="post-content">
|
|
<Suspense fallback={<div>Loading content...</div>}>
|
|
<MDXContent content={post.content} />
|
|
</Suspense>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|