50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import { MDXRemote } from "next-mdx-remote/rsc";
|
|
import { TRPCError } from "@trpc/server";
|
|
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.bySlug>>;
|
|
try {
|
|
post = await servTrpc.blog.bySlug(slug);
|
|
} catch (e) {
|
|
if (e instanceof TRPCError && e.code === "NOT_FOUND") notFound();
|
|
throw e;
|
|
}
|
|
|
|
return (
|
|
<main className="mx-auto max-w-2xl px-4 py-12">
|
|
<header className="mb-8">
|
|
<h1 className="text-3xl font-bold">{post.title}</h1>
|
|
{post.date && (
|
|
<time className="text-muted-foreground text-sm">
|
|
{new Date(post.date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</time>
|
|
)}
|
|
{post.tags.length > 0 && (
|
|
<div className="mt-3 flex flex-wrap gap-1.5">
|
|
{post.tags.map((tag) => (
|
|
<Badge key={tag} variant="outline">{tag}</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</header>
|
|
<article className="prose dark:prose-invert max-w-none">
|
|
<MDXRemote source={post.content} components={mdxComponents} />
|
|
</article>
|
|
</main>
|
|
);
|
|
}
|