Post List ASCII Index

Component 7

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Post List ASCII Index to your project and fits it to your theme.

Code

How Post List ASCII Index is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}