mintel.me/apps/web/app/blog/[slug]/page.tsx

import * as React from "react";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { blogPosts } from "../../../src/data/blogPosts";
import { BlogPostHeader } from "../../../src/components/blog/BlogPostHeader";
import { Section } from "../../../src/components/Section";
import { Reveal } from "../../../src/components/Reveal";
import { BlogPostClient } from "../../../src/components/BlogPostClient";
import { PostComponents } from "../../../src/components/blog/posts";
import { TextSelectionShare } from "../../../src/components/TextSelectionShare";
import { BlogPostStickyBar } from "../../../src/components/blog/BlogPostStickyBar";

export async function generateStaticParams() {
  return blogPosts.map((post) => ({
    slug: post.slug,
  }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = blogPosts.find((p) => p.slug === slug);

  if (!post) return {};

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: "article",
      images: [
        {
          url: `/api/og/${slug}`,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.description,
      images: [`/api/og/${slug}`],
    },
  };
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = blogPosts.find((p) => p.slug === slug);

  if (!post) {
    notFound();
  }

  const formattedDate = new Date(post.date).toLocaleDateString("de-DE", {
    month: "long",
    day: "numeric",
    year: "numeric",
  });

  const wordCount = post.description.split(/\s+/).length + 300; // Average post length
  const readingTime = Math.max(1, Math.ceil(wordCount / 200));

  const PostContent = PostComponents[slug];

  return (
    <div className="flex flex-col gap-8 md:gap-12 py-8 md:py-24 overflow-hidden">
      <BlogPostClient readingTime={readingTime} title={post.title} />

      <BlogPostHeader
        title={post.title}
        description={post.description}
        date={formattedDate}
        readingTime={readingTime}
        slug={slug}
      />

      <main id="post-content">
        {/* Sticky Progress Bar */}
        <BlogPostStickyBar
          title={post.title}
          url={`https://mintel.me/blog/${slug}`}
        />

        <Section containerVariant="wide" className="pt-0 md:pt-0">
          <div className="max-w-3xl mx-auto px-5 md:px-0">
            <Reveal delay={0.4} width="100%">
              {post.tags && post.tags.length > 0 && (
                <div className="flex flex-wrap gap-2 mb-10 md:mb-12">
                  {post.tags.map((tag, index) => (
                    <span
                      key={tag}
                      className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
                    >
                      #{tag}
                    </span>
                  ))}
                </div>
              )}

              {PostContent ? (
                <PostContent />
              ) : (
                <div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
                  Inhalt wird bald veröffentlicht...
                </div>
              )}
            </Reveal>
          </div>
        </Section>
      </main>

      <TextSelectionShare />
    </div>
  );
}