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

blog design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 21:13:54 +01:00
parent ec0a055c13
commit eafb740b1d
14 changed files with 291 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/blog/[slug]/page.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import { notFound } from 'next/navigation';
import { blogPosts } from '../../../src/data/blogPosts';
import { Tag } from '../../../src/components/Tag';
@@ -9,6 +9,9 @@ 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';
export async function generateStaticParams() {
return blogPosts.map((post) => ({
@@ -53,52 +56,33 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
}
return (
<div className="min-h-screen bg-white">
<div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
<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>
<PageHeader
title={post.title}
description={post.description}
backLink={{ href: '/blog', label: 'Zurück zum Blog' }}
backgroundSymbol="B"
/>
<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">
<main id="post-content">
<Section number="01" title="Inhalt">
<div className="prose prose-slate max-w-none">
<p>{post.description}</p>
<div className="flex flex-wrap items-center gap-4 text-sm text-slate-400 mb-12 font-mono uppercase tracking-widest">
<time dateTime={post.date}>{formattedDate}</time>
<span>•</span>
<span>{readingTime} min read</span>
</div>
{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>
)}
{slug === 'first-note' && (
<>
<LeadParagraph>
@@ -208,7 +192,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
</>
)}
</div>
</section>
</Section>
</main>
</div>
);