216 lines
9.2 KiB
TypeScript
216 lines
9.2 KiB
TypeScript
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>
|
|
);
|
|
}
|