A keyboard-navigable blog/post list with a canvas-drawn ASCII gutter showing a running index marker and per-post reading-length bars that redraw on selection.
import {
PostListAsciiIndex,
type PostListAsciiItem,
} from "@/components/ui/post-list-ascii-index";
const posts: PostListAsciiItem[] = [
{
id: "rethinking-render-loop",
title: "Rethinking the render loop",
excerpt: "Why we moved every hot path off React state.",
date: "AUG 01",
minutes: 6,
},
{
id: "tokens-all-the-way-down",
title: "Tokens all the way down",
excerpt: "Colors, spacing and motion from one source.",
date: "JUL 24",
minutes: 4,
},
{
id: "the-gate-that-caught-us",
title: "The gate that caught us",
excerpt: "A postmortem on a clipped popover shipping green.",
date: "JUL 18",
minutes: 9,
},
{
id: "reduced-motion-is-not-optional",
title: "Reduced motion is not optional",
excerpt: "A static first frame, every time.",
date: "JUL 09",
minutes: 3,
},
{
id: "canvas-over-css-sometimes",
title: "Canvas over CSS, sometimes",
excerpt: "When a rAF loop earns its keep.",
date: "JUN 30",
minutes: 5,
},
];
export default function PostListAsciiIndexDemo() {
return (
<div className="w-full max-w-xl bg-background text-foreground">
<PostListAsciiIndex posts={posts} />
</div>
);
}