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

import { MDXContent } from "@content-collections/mdx/react";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { allPosts } from "content-collections";
import type { Post } from "content-collections";
import Image from "next/image";
import AuthorChip from "@/components/author-chip";

export interface PageParams {
  slug?: string[];
}

const getPost = (slug: string[]): Post | null => {
  const pageSlug = slug.join("/");
  for (const post of allPosts) {
    if (post._meta.path == pageSlug) {
      return post;
    }
  }

  return null;
};

export default async function Page({ params }: { params: PageParams }) {
  const page = getPost(params.slug!);

  if (!page) notFound();

  return (
    <>
      <div className="bg-gray-100 min-h-screen">
        <article className="">
          <header className="bg-white shadow">
            <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
              <h1 className="text-3xl font-bold text-gray-900">{page.title}</h1>
            </div>
          </header>

          <div className="text-muted-foreground pb-8 mt-4 text-sm max-w-[80ch] mx-auto">
            <AuthorChip {...page.author!} />
            {page.summary}
          </div>

          {page.image !== undefined && (
            <Image
              alt={page.imageDesc!}
              src={page.imageURL!}
              width={1280}
              height={720}
              className="mx-auto max-w-2xl"
            />
          )}

          <div className="mx-auto max-w-[80ch] py-6 sm:px-6 lg:px-8">
            <div className="prose">
              <MDXContent code={page.mdx} components={{}} />
            </div>
          </div>
        </article>
      </div>
    </>
  );
}

export async function generateStaticParams() {
  return allPosts.map((page) => ({
    slug: page._meta.path.split("/"),
  }));
}

export function generateMetadata({ params }: { params: PageParams }) {
  const page = getPost(params.slug!);

  if (!page) notFound();

  return {
    title: page.title,
    description: page.summary,
    authors: [
      {
        name: page.author?.displayName,
      },
    ],
    openGraph: {
      //@ts-ignore
      images: page.image !== null ? [page.imageURL] : [],
    },
  } satisfies Metadata;
}