migrate to nextjs

app/blog/[slug]/page.tsx

@@ -0,0 +1,215 @@
+import 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';
+
+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="min-h-screen bg-white">
+      <BlogPostClient readingTime={readingTime} title={post.title} />
+
+      <main id="post-content" className="pt-24">
+        <section className="py-12 md:py-16">
+          <div className="max-w-3xl mx-auto px-6">
+            <div className="text-center">
+              <h1 className="text-3xl md:text-5xl font-serif font-bold text-slate-900 mb-6 leading-tight tracking-tight">
+                {post.title}
+              </h1>
+              
+              <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-600 mb-6 font-sans">
+                <time dateTime={post.date} className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
+                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zM4 8h12v8H4V8z"/>
+                  </svg>
+                  {formattedDate}
+                </time>
+                <span className="text-slate-400">•</span>
+                <span className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
+                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd"/>
+                  </svg>
+                  {readingTime} min
+                </span>
+              </div>
+
+              <p className="text-xl md:text-2xl text-slate-600 leading-relaxed font-serif italic mb-8 max-w-2xl mx-auto">
+                {post.description}
+              </p>
+
+              {post.tags && post.tags.length > 0 && (
+                <div className="flex flex-wrap justify-center gap-2 mb-8">
+                  {post.tags.map((tag, index) => (
+                    <Tag key={tag} tag={tag} index={index} className="text-xs" />
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+
+        <section className="max-w-3xl mx-auto px-6 pb-24">
+          <div className="prose prose-slate max-w-none">
+            <p>{post.description}</p>
+            
+            {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>
+  );
+}

app/blog/embed-demo/page.tsx

@@ -0,0 +1,242 @@
+import React from 'react';
+import { Tag } from '../../../src/components/Tag';
+import { H2 } from '../../../src/components/ArticleHeading';
+import { Paragraph, LeadParagraph } from '../../../src/components/ArticleParagraph';
+import { UL, LI } from '../../../src/components/ArticleList';
+import { CodeBlock } from '../../../src/components/ArticleBlockquote';
+import { YouTubeEmbed } from '../../../src/components/YouTubeEmbed';
+import { TwitterEmbed } from '../../../src/components/TwitterEmbed';
+import { GenericEmbed } from '../../../src/components/GenericEmbed';
+import { Mermaid } from '../../../src/components/Mermaid';
+import { BlogPostClient } from '../../../src/components/BlogPostClient';
+
+export default function EmbedDemoPage() {
+  const post = {
+    title: "Rich Content Embedding Demo",
+    description: "Testing our new free embed components for YouTube, Twitter, Mermaid diagrams, and other platforms",
+    date: "2024-02-15",
+    slug: "embed-demo",
+    tags: ["embeds", "components", "tutorial", "mermaid"]
+  };
+
+  const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  });
+
+  const readingTime = 5;
+
+  return (
+    <div className="min-h-screen bg-white">
+      <BlogPostClient readingTime={readingTime} title={post.title} />
+
+      <main id="post-content" className="pt-24">
+        <section className="py-12 md:py-16">
+          <div className="max-w-3xl mx-auto px-6">
+            <div className="text-center">
+              <h1 className="text-3xl md:text-5xl font-serif font-bold text-slate-900 mb-6 leading-tight tracking-tight">
+                {post.title}
+              </h1>
+              
+              <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-600 mb-6 font-sans">
+                <time dateTime={post.date} className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
+                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zM4 8h12v8H4V8z"/>
+                  </svg>
+                  {formattedDate}
+                </time>
+                <span className="text-slate-400">•</span>
+                <span className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
+                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd"/>
+                  </svg>
+                  {readingTime} min
+                </span>
+              </div>
+
+              <p className="text-xl md:text-2xl text-slate-600 leading-relaxed font-serif italic mb-8 max-w-2xl mx-auto">
+                {post.description}
+              </p>
+
+              <div className="flex flex-wrap justify-center gap-2 mb-8">
+                {post.tags.map((tag, index) => (
+                  <Tag key={tag} tag={tag} index={index} className="text-xs" />
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="max-w-3xl mx-auto px-6 pb-24">
+          <div className="prose prose-slate max-w-none">
+            <LeadParagraph>
+              This post demonstrates our new free embed components that give you full styling control over YouTube videos, Twitter tweets, and other rich content - all generated at build time.
+            </LeadParagraph>
+            
+            <H2>YouTube Embed Example</H2>
+            <Paragraph>
+              Here's a YouTube video embedded with full styling control. The component uses build-time generation for optimal performance.
+            </Paragraph>
+            
+            <div className="my-6">
+              <YouTubeEmbed 
+                videoId="dQw4w9WgXcQ"
+                title="Demo Video"
+                style="minimal"
+                className="my-4"
+              />
+            </div>
+            
+            <Paragraph>
+              You can customize the appearance using CSS variables or data attributes:
+            </Paragraph>
+            
+            <CodeBlock
+              language="jsx"
+              showLineNumbers={true}
+            >
+{`<YouTubeEmbed
+  videoId="dQw4w9WgXcQ"
+  style="minimal"        // 'default' | 'minimal' | 'rounded' | 'flat'
+  aspectRatio="56.25%"   // Custom aspect ratio
+  className="my-4"       // Additional classes
+/>`}
+            </CodeBlock>
+            
+            <H2>Twitter/X Embed Example</H2>
+            <Paragraph>
+              Twitter embeds use the official Twitter iframe embed for reliable display.
+            </Paragraph>
+            
+            <div className="my-4">
+              <TwitterEmbed
+                tweetId="20"
+                theme="light"
+                align="center"
+              />
+            </div>
+            
+            <CodeBlock
+              language="jsx"
+              showLineNumbers={true}
+            >
+{`<TwitterEmbed
+  tweetId="20"
+  theme="light"         // 'light' | 'dark'
+  align="center"        // 'left' | 'center' | 'right'
+/>`}
+            </CodeBlock>
+            
+            <H2>Generic Embed Example</H2>
+            <Paragraph>
+              The generic component supports direct embeds for Vimeo, CodePen, GitHub Gists, and other platforms.
+            </Paragraph>
+            
+            <div className="my-6">
+              <GenericEmbed 
+                url="https://vimeo.com/123456789"
+                type="video"
+                maxWidth="800px"
+              />
+            </div>
+            
+            <CodeBlock
+              language="jsx"
+              showLineNumbers={true}
+            >
+{`<GenericEmbed
+  url="https://vimeo.com/123456789"
+  type="video"          // 'video' | 'article' | 'rich'
+  maxWidth="800px"
+/>`}
+            </CodeBlock>
+
+            <H2>Mermaid Diagrams</H2>
+            <Paragraph>
+              We've added support for Mermaid diagrams! You can now create flowcharts, sequence diagrams, and more using a simple text-based syntax.
+            </Paragraph>
+
+            <div className="my-8">
+              <Mermaid 
+                graph={`graph LR
+  A[Client] --> B[Load Balancer]
+  B --> C[App Server 1]
+  B --> D[App Server 2]
+  C --> E[(Database)]
+  D --> E`}
+              />
+            </div>
+
+            <Paragraph>
+              Usage is straightforward:
+            </Paragraph>
+
+            <CodeBlock
+              language="jsx"
+              showLineNumbers={true}
+            >
+{`<Mermaid 
+  graph={\`graph LR
+  A[Client] --> B[Load Balancer]
+  B --> C[App Server 1]
+  B --> D[App Server 2]
+  C --> E[(Database)]
+  D --> E\`}
+/>`}
+            </CodeBlock>
+            
+            <H2>Styling Control</H2>
+            <Paragraph>
+              All components use CSS variables for easy customization:
+            </Paragraph>
+            
+            <CodeBlock
+              language="css"
+              showLineNumbers={true}
+            >
+{`.youtube-embed {
+  --aspect-ratio: 56.25%;
+  --bg-color: #000000;
+  --border-radius: 12px;
+  --shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* Data attribute variations */
+.youtube-embed[data-style="minimal"] {
+  --border-radius: 4px;
+  --shadow: none;
+}`}
+            </CodeBlock>
+            
+            <H2>Benefits</H2>
+            <UL>
+              <LI><strong>Free:</strong> No paid services required</LI>
+              <LI><strong>Fast:</strong> Build-time generation, no runtime API calls</LI>
+              <LI><strong>Flexible:</strong> Full styling control via CSS variables</LI>
+              <LI><strong>Self-hosted:</strong> Complete ownership and privacy</LI>
+              <LI><strong>SEO-friendly:</strong> Static HTML content</LI>
+            </UL>
+            
+            <H2>Integration</H2>
+            <Paragraph>
+              Simply import the components in your blog posts:
+            </Paragraph>
+            
+            <CodeBlock
+              language="jsx"
+              showLineNumbers={true}
+            >
+{`import { YouTubeEmbed } from '../components/YouTubeEmbed';
+import { TwitterEmbed } from '../components/TwitterEmbed';
+import { GenericEmbed } from '../components/GenericEmbed';
+
+<YouTubeEmbed videoId="abc123" style="rounded" />
+<TwitterEmbed tweetId="123456789" theme="dark" />`}
+            </CodeBlock>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}