mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): complete blog experience overhaul
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m4s
Details
Build & Deploy / 🏗️ Build (push) Failing after 3m51s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source 
- Implemented minimalist vertical teaser list (MediumCard)
- Consolidated and refined 20 engineering-focused blog posts
- Rebuilt blog overview with narrow, centered layout (max-w-3xl)
- Introduced BlogCommandBar for integrated search and tag filtering
- Consolidated tags to 6-8 core technical categories
- Redesigned blog detail pages with industrial 'Technical Frame' layout
- Added SectionHeader component for consistent industrial titling
- Optimized vertical space by removing redundant PageHeaders
This commit is contained in:
Marc Mintel
2026-02-15 18:52:48 +01:00
parent c1295546a6
commit 386a07aa53
36 changed files with 4141 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
apps/web/app/blog/[slug]/page.tsx
View File

@@ -1,19 +1,11 @@
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 { BlogPostClient } from "../../../src/components/BlogPostClient";
import { PostComponents } from "../../../src/components/blog/posts";
import { Card } from "../../../src/components/Layout";
export async function generateStaticParams() {
return blogPosts.map((post) => ({
@@ -33,201 +25,78 @@ export default async function BlogPostPage({
notFound();
}
const formattedDate = new Date(post.date).toLocaleDateString("en-US", {
const formattedDate = new Date(post.date).toLocaleDateString("de-DE", {
month: "long",
day: "numeric",
year: "numeric",
});
const wordCount = post.description.split(/\s+/).length + 100;
const wordCount = post.description.split(/\s+/).length + 300; // Average post length
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);
}
const PostContent = PostComponents[slug];
return (
<div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
<div className="flex flex-col gap-12 py-12 md:py-24 overflow-hidden">
<BlogPostClient readingTime={readingTime} title={post.title} />
<PageHeader
variant="blog"
title={post.title}
description={post.description}
backLink={{ href: "/blog", label: "Zurück zum Blog" }}
backgroundSymbol="B"
backgroundSymbol={slug.charAt(0).toUpperCase()}
/>
<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>
<Section containerVariant="wide" className="pt-0 md:pt-0">
<div className="max-w-5xl mx-auto">
<Card
variant="glass"
techBorder
className="relative overflow-hidden"
>
{/* Decorative background grid inside the card */}
<div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
{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 className="relative z-10 px-6 py-12 md:px-16 md:py-20">
<div className="flex flex-wrap items-center justify-between gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
<div className="flex items-center gap-3">
<span className="w-2 h-2 rounded-full bg-slate-300" />
<time dateTime={post.date}>{formattedDate}</time>
</div>
<div className="flex items-center gap-4">
<span>{readingTime} min Lesezeit</span>
<span className="text-slate-200">|</span>
<span>
{slug.substring(0, 4).toUpperCase()}-
{Math.floor(Math.random() * 999)}
</span>
</div>
</div>
{post.tags && post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mb-12">
{post.tags.map((tag, index) => (
<span
key={tag}
className="px-3 py-1 bg-slate-50 border border-slate-100 rounded text-[10px] font-mono text-slate-500 uppercase tracking-widest"
>
#{tag}
</span>
))}
</div>
)}
{PostContent ? (
<PostContent />
) : (
<div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
Inhalt wird bald veröffentlicht...
</div>
)}
</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>
</>
)}
</Card>
</div>
</Section>
</main>

242
apps/web/app/blog/embed-demo/page.tsx
View File

@@ -1,242 +0,0 @@
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>
);
}

205
apps/web/app/blog/page.tsx
View File

@@ -3,19 +3,19 @@
import * as React from "react";
import { useState, useEffect } from "react";
import { MediumCard } from "../../src/components/MediumCard";
import { SearchBar } from "../../src/components/SearchBar";
import { Tag } from "../../src/components/Tag";
import { BlogCommandBar } from "../../src/components/blog/BlogCommandBar";
import { blogPosts } from "../../src/data/blogPosts";
import { PageHeader } from "../../src/components/PageHeader";
import { SectionHeader } from "../../src/components/SectionHeader";
import { Reveal } from "../../src/components/Reveal";
import { Section } from "../../src/components/Section";
import { AbstractCircuit, GradientMesh } from "../../src/components/Effects";
import { Label } from "../../src/components/Typography";
export default function BlogPage() {
const [searchQuery, setSearchQuery] = useState("");
const [activeTags, setActiveTags] = useState<string[]>([]);
// Memoize allPosts to prevent infinite re-render loop
// Memoize allPosts
const allPosts = React.useMemo(
() =>
[...blogPosts].sort(
@@ -32,110 +32,123 @@ export default function BlogPage() {
[allPosts],
);
useEffect(() => {
const query = searchQuery.toLowerCase().trim();
if (query.startsWith("#")) {
const tag = query.slice(1);
setFilteredPosts(
allPosts.filter((post) =>
post.tags?.some((t) => t.toLowerCase() === tag.toLowerCase()),
),
);
} else {
setFilteredPosts(
allPosts.filter((post) => {
const title = post.title.toLowerCase();
const description = post.description.toLowerCase();
const tags = (post.tags || []).join(" ").toLowerCase();
return (
title.includes(query) ||
description.includes(query) ||
tags.includes(query)
);
}),
);
}
}, [searchQuery, allPosts]);
const [visibleCount, setVisibleCount] = useState(8);
const filterByTag = (tag: string) => {
setSearchQuery(`#${tag}`);
const handleTagToggle = (tag: string) => {
setActiveTags((prev) =>
prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
);
setVisibleCount(8); // Reset pagination on filter change
};
useEffect(() => {
const query = searchQuery.toLowerCase().trim();
let filtered = allPosts;
if (query) {
filtered = filtered.filter((post) => {
const title = post.title.toLowerCase();
const description = post.description.toLowerCase();
const pTagString = (post.tags || []).join(" ").toLowerCase();
return (
title.includes(query) ||
description.includes(query) ||
pTagString.includes(query)
);
});
}
if (activeTags.length > 0) {
filtered = filtered.filter((post) =>
post.tags?.some((tag) => activeTags.includes(tag)),
);
}
setFilteredPosts(filtered);
}, [searchQuery, activeTags, allPosts]);
const loadMore = () => {
setVisibleCount((prev) => prev + 6);
};
const hasMore = visibleCount < filteredPosts.length;
const postsToShow = filteredPosts.slice(0, visibleCount);
return (
<div className="flex flex-col bg-white overflow-hidden relative min-h-screen">
<div className="flex flex-col bg-slate-50/30 overflow-hidden relative min-h-screen">
<AbstractCircuit />
<PageHeader
title={
<>
Blog <br />
<span className="text-slate-400">& Notes.</span>
</>
}
description="Ein technisches Notizbuch über Lösungen, Fehler und Werkzeuge."
backLink={{ href: "/", label: "Zurück" }}
backgroundSymbol="B"
/>
<Section
number="01"
title="Journal"
borderTop
effects={<GradientMesh variant="metallic" className="opacity-50" />}
effects={<GradientMesh variant="metallic" className="opacity-40" />}
className="pb-32 pt-12 md:pt-20"
containerVariant="wide"
>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
{/* Sidebar / Filter area */}
<div className="lg:col-span-4 lg:order-2">
<div className="sticky top-32 space-y-16">
<Reveal>
<div className="space-y-6">
<Label className="text-slate-400 uppercase tracking-[0.3em]">
Suchen
</Label>
<SearchBar value={searchQuery} onChange={setSearchQuery} />
</div>
</Reveal>
{allTags.length > 0 && (
<Reveal delay={0.2}>
<div className="space-y-8">
<Label className="text-slate-400 uppercase tracking-[0.3em]">
Themen
</Label>
<div className="flex flex-wrap gap-2">
{allTags.map((tag, index) => (
<button
key={tag}
onClick={() => filterByTag(tag)}
className="text-left group"
>
<Tag tag={tag} index={index} />
</button>
))}
</div>
</div>
</Reveal>
)}
</div>
<div className="max-w-[calc(100vw-2rem)] md:max-w-7xl mx-auto space-y-12">
{/* Section Header & Filters - Centered & Compact */}
<div className="relative z-20 space-y-12 flex flex-col items-center text-center">
<SectionHeader
title="Alle Artikel"
subtitle="Index"
align="center"
className="py-0 md:py-0"
/>
<Reveal width="100%" className="max-w-2xl mx-auto">
<BlogCommandBar
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
tags={allTags}
activeTags={activeTags}
onTagToggle={handleTagToggle}
/>
</Reveal>
</div>
{/* Posts area */}
<div className="lg:col-span-8 lg:order-1">
<div id="posts-container" className="flex flex-col gap-12">
{filteredPosts.length === 0 ? (
<div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl">
<p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
Keine Beiträge gefunden.
</p>
</div>
) : (
filteredPosts.map((post, i) => (
<Reveal key={post.slug} delay={0.1 * i} width="100%">
{/* Posts List (Vertical & Minimal) */}
<div id="posts-container" className="space-y-12">
{postsToShow.length === 0 ? (
<div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl bg-white/50">
<p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
Keine Beiträge gefunden.
</p>
<button
onClick={() => {
setSearchQuery("");
setActiveTags([]);
}}
className="mt-4 text-xs font-bold text-slate-900 underline underline-offset-4 hover:text-slate-600"
>
Filter zurücksetzen
</button>
</div>
) : (
<div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto w-full">
{postsToShow.map((post, i) => (
<Reveal key={post.slug} delay={0.05 * (i % 6)} width="100%">
<MediumCard post={post} />
</Reveal>
))
)}
</div>
))}
</div>
)}
{/* Pagination */}
{hasMore && (
<div className="flex justify-center pt-8">
<Reveal delay={0.1}>
<button
onClick={loadMore}
className="group relative px-8 py-4 bg-white border border-slate-200 text-slate-600 rounded-full overflow-hidden transition-all hover:border-slate-400 hover:text-slate-900 hover:shadow-lg"
>
<span className="relative z-10 font-mono text-xs uppercase tracking-widest flex items-center gap-3">
Mehr laden
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors" />
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors delay-75" />
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors delay-150" />
</span>
</button>
</Reveal>
</div>
)}
</div>
</div>
</Section>