chore: stabilize apps/web (lint, build, typecheck fixes)

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

@@ -1,17 +1,19 @@
-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';
-import { Reveal } from '../../../src/components/Reveal';
+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) => ({
@@ -19,7 +21,11 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
   const { slug } = await params;
   const post = blogPosts.find((p) => p.slug === slug);
 
@@ -27,17 +33,23 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
     notFound();
   }
 
-  const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric'
+  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)
+  const showFileExamples = post.tags?.some((tag) =>
+    [
+      "architecture",
+      "design-patterns",
+      "system-design",
+      "docker",
+      "deployment",
+    ].includes(tag),
   );
 
   // Load file examples for the post
@@ -59,10 +71,10 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
     <div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
       <BlogPostClient readingTime={readingTime} title={post.title} />
 
-      <PageHeader 
+      <PageHeader
         title={post.title}
         description={post.description}
-        backLink={{ href: '/blog', label: 'Zurück zum Blog' }}
+        backLink={{ href: "/blog", label: "Zurück zum Blog" }}
         backgroundSymbol="B"
       />
 
@@ -83,14 +95,16 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
               </div>
             )}
 
-            {slug === 'first-note' && (
+            {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.
+                  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.
+                  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>
@@ -101,91 +115,114 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
                 </UL>
               </>
             )}
-            
-            {slug === 'debugging-tips' && (
+
+            {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.
+                  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.
+                  Debuggers are powerful, but they change how your code runs.
+                  Print statements don't.
                 </Paragraph>
                 <CodeBlock language="python" showLineNumbers={true}>
-{`def process_data(data):
+                  {`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.
+                  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' && (
+            {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.
+                  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.
+                  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.
+                  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.
+                  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.
+                  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' && (
+            {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.
+                  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.
+                  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.
+                  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.
+                  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.
+                  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>