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

import * as React from "react";
import { notFound } from "next/navigation";
import { blogPosts } from "../../../src/data/blogPosts";
import { Tag } from "../../../src/components/Tag";
import { CodeBlock } from "../../../src/components/ArticleBlockquote";
import { H2 } from "../../../src/components/ArticleHeading";
import {
  Paragraph,
  LeadParagraph,
} from "../../../src/components/ArticleParagraph";
import { UL, LI } from "../../../src/components/ArticleList";
import { FileExamplesList } from "../../../src/components/FileExamplesList";
import { FileExampleManager } from "../../../src/data/fileExamples";
import { BlogPostClient } from "../../../src/components/BlogPostClient";
import { PageHeader } from "../../../src/components/PageHeader";
import { Section } from "../../../src/components/Section";

export async function generateStaticParams() {
  return blogPosts.map((post) => ({
    slug: post.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("en-US", {
    month: "long",
    day: "numeric",
    year: "numeric",
  });

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

  const showFileExamples = post.tags?.some((tag) =>
    [
      "architecture",
      "design-patterns",
      "system-design",
      "docker",
      "deployment",
    ].includes(tag),
  );

  // Load file examples for the post
  let groups: any[] = [];
  if (showFileExamples) {
    const allGroups = await FileExampleManager.getAllGroups();
    groups = allGroups
      .map((group) => ({
        ...group,
        files: group.files.filter((file) => {
          if (file.postSlug !== slug) return false;
          return true;
        }),
      }))
      .filter((group) => group.files.length > 0);
  }

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

      <PageHeader
        title={post.title}
        description={post.description}
        backLink={{ href: "/blog", label: "Zurück zum Blog" }}
        backgroundSymbol="B"
      />

      <main id="post-content">
        <Section number="01" title="Inhalt">
          <div className="prose prose-slate max-w-none">
            <div className="flex flex-wrap items-center gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em]">
              <time dateTime={post.date}>{formattedDate}</time>
              <span className="text-slate-200">•</span>
              <span>{readingTime} min read</span>
            </div>

            {post.tags && post.tags.length > 0 && (
              <div className="flex flex-wrap gap-2 mb-12">
                {post.tags.map((tag, index) => (
                  <Tag key={tag} tag={tag} index={index} className="text-xs" />
                ))}
              </div>
            )}

            {slug === "first-note" && (
              <>
                <LeadParagraph>
                  This blog is a public notebook. It's where I document things I
                  learn, problems I solve, and tools I test.
                </LeadParagraph>
                <H2>Why write in public?</H2>
                <Paragraph>
                  I forget things. Writing them down helps. Making them public
                  helps me think more clearly and might help someone else.
                </Paragraph>
                <H2>What to expect</H2>
                <UL>
                  <LI>Short entries, usually under 500 words</LI>
                  <LI>Practical solutions to specific problems</LI>
                  <LI>Notes on tools and workflows</LI>
                  <LI>Mistakes and what I learned</LI>
                </UL>
              </>
            )}

            {slug === "debugging-tips" && (
              <>
                <LeadParagraph>
                  Sometimes the simplest debugging tool is the best one. Print
                  statements get a bad reputation, but they're often exactly
                  what you need.
                </LeadParagraph>
                <H2>Why print statements work</H2>
                <Paragraph>
                  Debuggers are powerful, but they change how your code runs.
                  Print statements don't.
                </Paragraph>
                <CodeBlock language="python" showLineNumbers={true}>
                  {`def process_data(data):
    print(f"Processing {len(data)} items")
    result = expensive_operation(data)
    print(f"Operation result: {result}")
    return result`}
                </CodeBlock>

                <H2>Complete examples</H2>
                <Paragraph>
                  Here are some practical file examples you can copy and
                  download. These include proper error handling and logging.
                </Paragraph>

                <div className="my-8">
                  <FileExamplesList groups={groups} />
                </div>
              </>
            )}

            {slug === "architecture-patterns" && (
              <>
                <LeadParagraph>
                  Good software architecture is about making the right decisions
                  early. Here are some patterns I've found useful in production
                  systems.
                </LeadParagraph>
                <H2>Repository Pattern</H2>
                <Paragraph>
                  The repository pattern provides a clean separation between
                  your business logic and data access layer. It makes your code
                  more testable and maintainable.
                </Paragraph>

                <H2>Service Layer</H2>
                <Paragraph>
                  Services orchestrate business logic and coordinate between
                  repositories and domain events. They keep your controllers
                  thin and your business rules organized.
                </Paragraph>

                <H2>Domain Events</H2>
                <Paragraph>
                  Domain events help you decouple components and react to
                  changes in your system. They're essential for building
                  scalable, event-driven architectures.
                </Paragraph>

                <H2>Complete examples</H2>
                <Paragraph>
                  These TypeScript examples demonstrate modern architecture
                  patterns for scalable applications. You can copy them directly
                  into your project.
                </Paragraph>

                <div className="my-8">
                  <FileExamplesList groups={groups} />
                </div>
              </>
            )}

            {slug === "docker-deployment" && (
              <>
                <LeadParagraph>
                  Docker has become the standard for containerizing
                  applications. Here's how to set up production-ready
                  deployments that are secure, efficient, and maintainable.
                </LeadParagraph>
                <H2>Multi-stage builds</H2>
                <Paragraph>
                  Multi-stage builds keep your production images small and
                  secure by separating build and runtime environments. This
                  reduces attack surface and speeds up deployments.
                </Paragraph>

                <H2>Health checks and monitoring</H2>
                <Paragraph>
                  Proper health checks ensure your containers are running
                  correctly. Combined with restart policies, this gives you
                  resilient, self-healing deployments.
                </Paragraph>

                <H2>Orchestration with Docker Compose</H2>
                <Paragraph>
                  Docker Compose makes it easy to manage multi-service
                  applications in development and production. Define services,
                  networks, and volumes in a single file.
                </Paragraph>

                <H2>Complete examples</H2>
                <Paragraph>
                  These Docker configurations are production-ready. Use them as
                  a starting point for your own deployments.
                </Paragraph>

                <div className="my-8">
                  <FileExamplesList groups={groups} />
                </div>
              </>
            )}
          </div>
        </Section>
      </main>
    </div>
  );
}