Blog Post Page
A long-form article page with real reading progress and a ToC that tracks scroll.
DOM + CSS0 deps1 file · 5 KB TSX
Props
// Full, shippable page — real size at normal type scale. The registry
// preview above is a scaled-down miniature of this same composition, not
// a different component.
import type { ReactNode } from "react";
function Nav() {
return (
<header className="flex items-center justify-between border-b border-white/10 px-6 py-4">
<span className="font-sans font-bold">Nova</span>
<nav className="flex gap-6 text-sm text-neutral-400">
<a href="#">Blog</a>
<a href="#">Docs</a>
</nav>
</header>
);
}
function PostHeader({
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
The reading column deliberately narrows to max-w-2xl for the article body while the header and cover image stretch wider — a body column that wide starts running 90+ characters per line, which measurably hurts reading speed, so the composition trades width for readability the instant the actual prose begins. The centered post header (category, title, byline) reads as a magazine masthead rather than a typical left-aligned blog header, which is the deliberate editorial choice signaled by the vibe tags. The non-obvious detail is the pull-quote: it isn't decorative filler, it's a visual rest stop that breaks a long column of gray body text and gives skimmers something to land on. Caveat: there's no author bio block or related-posts footer — this template stops at the article's last paragraph, which is the right scope for a template but not a complete blog, so plan a second pass for post-article content before shipping a real blog.
