Blog Post Page

A long-form article page with real reading progress and a ToC that tracks scroll.

Proeditorialminimal

Category: Templates
Added: 2026-09-01
Deps: none
Updated: 2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview

Engineering · 6 min read

Instrument less, decide faster

Dana Okonkwo

Why this matters

Most teams reach for a rewrite when what they actually have is a measurement problem.

The cheapest version of this is a week of instrumentation and a single dashboard nobody has to ask for.

How it works

The client batches events in memory and flushes on a timer, on size, and on process exit.

Ordering is preserved per session; across sessions it is explicitly not guaranteed.

What it costs

Roughly four kilobytes on the wire per thousand events, and one long-lived connection.

The part people underestimate is cardinality: every unique property value is a column somewhere.

Where to go next

Start with three events you would actually act on, then resist adding a fourth for a month.

Props

Title

Accent

Table of contents

No runtime dependencies

// 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
  // ---------------------------------------------------------------
}

Notes

About this 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.

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

Changelog Page

templates

A changelog with working tag filters and releases that expand in place.

changelogreleasestimeline

Pro

Documentation Page

templates

A docs shell where the sidebar routes, search filters the tree and the ToC tracks the article.

docsdocumentationsidebar

Pro

Portfolio Page

templates

A personal portfolio with working discipline filters and a pointer-responsive work grid.

portfoliopersonalprojects