blog/app/posts/[slug]/page.tsx

import Link from "next/link";
import { getPostData, getAllPostIds } from "@/lib/posts";
import type { PostData } from "@/lib/posts";
import Window from "../../../components/window";
import { MDXRemote } from "next-mdx-remote/rsc";
import rehypePrettyCode from "rehype-pretty-code";

interface PageProps {
  params: {
    slug: string;
  };
}

// This function tells Next.js which blog posts exist at build time
export async function generateStaticParams() {
  const paths = getAllPostIds();
  return paths.map((path) => ({ slug: path.params.slug }));
}

// Generates metadata (like the title tag) for each blog post page
export async function generateMetadata({ params }: PageProps) {
  const postData = await getPostData(params.slug);
  return {
    title: `${postData.title} | Gabriel's Kaszewski Blog`,
  };
}

export default async function Post({ params }: PageProps) {
  // Fetch the specific post's content based on the URL slug
  const postData: PostData = await getPostData(params.slug);

  return (
    <div className="mx-auto max-w-4xl">
      <Window title={postData.title}>
        <article>
          <div className="mb-4 text-gray-500 flex flex-col gap-1">
            <span>
              {new Date(postData.date).toLocaleDateString("en-US", {
                year: "numeric",
                month: "long",
                day: "numeric",
              })}
            </span>
            <span className="text-sm text-gray-400">
              {postData.readingTime}
            </span>
          </div>
          <div className="prose lg:prose-xl max-w-none">
            <MDXRemote
              source={postData.content}
              options={{
                mdxOptions: {
                  rehypePlugins: [
                    [
                      rehypePrettyCode,
                      {
                        theme: "github-dark-dimmed",
                        keepBackground: false,
                      },
                    ],
                  ],
                },
              }}
            />
          </div>
        </article>
      </Window>
      <div className="mt-8 text-center">
        <Link
          href="/"
          className="inline-block rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
        >
          ← Back to home
        </Link>
      </div>
    </div>
  );
}