Series Index With Standing State

Blog67: Series Index With Standing State

An index of writing that was planned as runs rather than posts, pairing each series and how far along it is with its numbered parts in the column beside it.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/blog67?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/blog67?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/blog67.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

The installed file exports blog67Demo alongside the block: the exact props behind the preview above. Spread it to get a working series index in one line.

import { Blog67, blog67Demo } from "@/components/beste/block/blog67";

export default function SeriesPage() {
  return <Blog67 {...blog67Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Blog67 } from "@/components/beste/block/blog67";

export default function SeriesPage() {
  return (
    <Blog67
      eyebrow="Written in order"
      heading="The series, and where each one stands"
      description="Some pieces only make sense next to the ones around them."
      partLabel="Part"
      series={[
        {
          name: "Pricing the work",
          status: "Finished, six parts",
          summary: "From the first email to the invoice.",
          parts: [
            { title: "The day we stopped billing hours", href: "/essays/hours" },
            { title: "What a flat price has to cover", href: "/essays/flat-price" },
          ],
        },
      ]}
    />
  );
}

Props

type Series = {
  name: string;
  status: string;
  summary: string;
  parts: SeriesPart[];
};

type SeriesPart = {
  title: string;
  href: string;
};

Behavior notes

• Part numbers come from the array index, so reordering parts renumbers them. The list is an ol, which keeps that order meaningful to a screen reader as well as on screen.
• status is free text rather than a computed count, so a series can say "three of five published" or "ongoing, no end planned" without the block inventing progress.
• Each series is a two column row from md up, the name and its state on the left and the parts on the right. Below that the parts fall under their series.
• Only the part titles are links. The series name is a heading, so nothing competes with the chapter you are meant to click.
• Rows are separated by hairlines with no trailing rule at the end of the list.