marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog: dossier-style article header

Browse Source
This commit is contained in:
kbot
2026-07-06 22:06:46 -05:00
parent 76676ddfed
commit fb1d6bf69a
1 changed files with 33 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,46 +42,40 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
<>
<ScrollToTop />
<ReadingProgress />
<div className="mx-auto max-w-6xl px-6 py-16">
<div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12">
<article className="min-w-0">
<header className="mb-12">
<time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
<h1 className="heading-xl text-ink mt-3 mb-2">
{post.title}
</h1>
<div className="flex items-center gap-4 font-mono text-xs text-ink-soft">
{post.author && <span>by {post.author}</span>}
<span>{post.readingTime} min read</span>
<div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12">
<article className="min-w-0">
<header className="mb-12">
<time className="section-label" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })} · {post.author} · {post.readingTime} min</time>
<h1 className="heading-xl font-display text-ink mt-3 mb-2">
{post.title}
</h1>
{post.coverImage && (
<img
src={post.coverImage}
alt={`Featured image for article: ${post.title}`}
className="my-8 aspect-[16/9] w-full rounded-lg border border-border bg-surface object-cover shadow-card"
loading="eager"
decoding="async"
fetchPriority="high"
/>
)}
{post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mt-4">
{post.tags.map((tag) => (
<Link key={tag} href={`/blog/tags/${tagToSlug(tag)}/`} className="rounded-sm bg-surface px-3 py-1 font-mono text-[11px] uppercase tracking-wider text-ink-soft border border-border transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
{tag}
</Link>
))}
</div>
{post.coverImage && (
<img
src={post.coverImage}
alt={`Featured image for article: ${post.title}`}
className="my-8 aspect-[16/9] w-full rounded-2xl border border-border bg-surface object-cover shadow-card"
loading="eager"
decoding="async"
fetchPriority="high"
/>
)}
{post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mt-4">
{post.tags.map((tag) => (
<Link key={tag} href={`/blog/tags/${tagToSlug(tag)}/`} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
{tag}
</Link>
))}
</div>
)}
</header>
<div className="prose prose-lg article-prose max-w-none min-w-0">
<PostContent />
</div>
</article>
<aside className="hidden lg:block">
<TableOfContents />
</aside>
</div>
)}
</header>
<div className="prose prose-lg article-prose max-w-none min-w-0">
<PostContent />
</div>
</article>
<aside className="hidden lg:block">
<TableOfContents />
</aside>
</div>
</>
)