61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import { MDXRemote } from "next-mdx-remote/rsc";
|
|
import { TRPCError } from "@trpc/server";
|
|
import matter from "gray-matter";
|
|
import { servTrpc } from "~/app/_trpc/ServerClient";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { mdxComponents } from "~/components/mdx-components";
|
|
|
|
type Props = {
|
|
params: Promise<{ slug: string }>;
|
|
};
|
|
|
|
export default async function BlogPostPage({ params }: Props) {
|
|
const { slug } = await params;
|
|
|
|
let post: Awaited<ReturnType<typeof servTrpc.blog.metadataBySlug>>;
|
|
try {
|
|
post = await servTrpc.blog.metadataBySlug(slug);
|
|
} catch (e) {
|
|
if (e instanceof TRPCError && e.code === "NOT_FOUND") notFound();
|
|
throw e;
|
|
}
|
|
|
|
const response = await fetch(post.fileUrl, { next: { revalidate: 3600 } });
|
|
if (!response.ok) notFound();
|
|
|
|
const parsed = matter(await response.text());
|
|
const tags = Array.isArray(parsed.data.tags)
|
|
? parsed.data.tags.map((tag) => String(tag).trim()).filter(Boolean)
|
|
: post.tags;
|
|
const title = typeof parsed.data.title === "string" ? parsed.data.title : post.title;
|
|
const date = typeof parsed.data.date === "string" ? parsed.data.date : post.date;
|
|
|
|
return (
|
|
<main className="mx-auto h-full max-w-2xl overflow-y-auto px-4 py-12">
|
|
<header className="mb-8">
|
|
<h1 className="text-3xl font-bold">{title}</h1>
|
|
{date && (
|
|
<time className="text-muted-foreground text-sm">
|
|
{new Date(date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</time>
|
|
)}
|
|
{tags.length > 0 && (
|
|
<div className="mt-3 flex flex-wrap gap-1.5">
|
|
{tags.map((tag) => (
|
|
<Badge key={tag} variant="outline">{tag}</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</header>
|
|
<article className="prose dark:prose-invert max-w-none">
|
|
<MDXRemote source={parsed.content} components={mdxComponents} />
|
|
</article>
|
|
</main>
|
|
);
|
|
}
|