+
+ {slug === 'first-note' && (
+ <>
+
+ This blog is a public notebook. It's where I document things I learn, problems I solve, and tools I test.
+
+
Why write in public?
+
+ I forget things. Writing them down helps. Making them public helps me think more clearly and might help someone else.
+
+
What to expect
+
+
Short entries, usually under 500 words
+
Practical solutions to specific problems
+
Notes on tools and workflows
+
Mistakes and what I learned
+
+
+ )}
+
+ {slug === 'debugging-tips' && (
+ <>
+
+ Sometimes the simplest debugging tool is the best one. Print statements get a bad reputation, but they're often exactly what you need.
+
+
Why print statements work
+
+ Debuggers are powerful, but they change how your code runs. Print statements don't.
+
+
+{`def process_data(data):
+ print(f"Processing {len(data)} items")
+ result = expensive_operation(data)
+ print(f"Operation result: {result}")
+ return result`}
+
+
+
Complete examples
+
+ Here are some practical file examples you can copy and download. These include proper error handling and logging.
+
+
+
+
+
+
+ )}
+
+ {slug === 'architecture-patterns' && (
+ <>
+
+ Good software architecture is about making the right decisions early. Here are some patterns I've found useful in production systems.
+
+
Repository Pattern
+
+ The repository pattern provides a clean separation between your business logic and data access layer. It makes your code more testable and maintainable.
+
+
+
Service Layer
+
+ Services orchestrate business logic and coordinate between repositories and domain events. They keep your controllers thin and your business rules organized.
+
+
+
Domain Events
+
+ Domain events help you decouple components and react to changes in your system. They're essential for building scalable, event-driven architectures.
+
+
+
Complete examples
+
+ These TypeScript examples demonstrate modern architecture patterns for scalable applications. You can copy them directly into your project.
+
+
+
+
+
+
+ )}
+
+ {slug === 'docker-deployment' && (
+ <>
+
+ Docker has become the standard for containerizing applications. Here's how to set up production-ready deployments that are secure, efficient, and maintainable.
+
+
Multi-stage builds
+
+ Multi-stage builds keep your production images small and secure by separating build and runtime environments. This reduces attack surface and speeds up deployments.
+
+
+
Health checks and monitoring
+
+ Proper health checks ensure your containers are running correctly. Combined with restart policies, this gives you resilient, self-healing deployments.
+
+
+
Orchestration with Docker Compose
+
+ Docker Compose makes it easy to manage multi-service applications in development and production. Define services, networks, and volumes in a single file.
+
+
+
Complete examples
+
+ These Docker configurations are production-ready. Use them as a starting point for your own deployments.
+
+
+
+
+
+
+ )}
+
+
+
+
+ );
+}
diff --git a/app/blog/embed-demo/page.tsx b/app/blog/embed-demo/page.tsx
new file mode 100644
index 0000000..7a4ea6d
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ {post.title}
+
+
+
+
+ •
+
+
+ {readingTime} min
+
+
+
+
+ {post.description}
+
+
+
+ {post.tags.map((tag, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ 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.
+
+
+
YouTube Embed Example
+
+ Here's a YouTube video embedded with full styling control. The component uses build-time generation for optimal performance.
+
+
+
+
+
+
+
+ You can customize the appearance using CSS variables or data attributes:
+
+
+
+{``}
+
+
+
Twitter/X Embed Example
+
+ Twitter embeds use the official Twitter iframe embed for reliable display.
+
+
+
+
+
+
+
+{``}
+
+
+
Generic Embed Example
+
+ The generic component supports direct embeds for Vimeo, CodePen, GitHub Gists, and other platforms.
+
+
+
+
+
+
+
+{``}
+
+
+
Mermaid Diagrams
+
+ We've added support for Mermaid diagrams! You can now create flowcharts, sequence diagrams, and more using a simple text-based syntax.
+
+
+
+ B[Load Balancer]
+ B --> C[App Server 1]
+ B --> D[App Server 2]
+ C --> E[(Database)]
+ D --> E`}
+ />
+
+
+
+ Usage is straightforward:
+
+
+
+{` B[Load Balancer]
+ B --> C[App Server 1]
+ B --> D[App Server 2]
+ C --> E[(Database)]
+ D --> E\`}
+/>`}
+
+
+