shadcn.io is not affiliated with official shadcn/ui
Series Tracker Blog Block for Svelte
A reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.
Installation
Overview
A series tracker for Svelte with Ark UI, written for Tallowdb Notes, a build-your-own-database series. A start-aligned header says how many of the six parts you have read and how long the rest takes. Under it a split behind a divider holds the parts at the start and the current part at the end. The parts are the catalog's vertical Steps drawn read-only as hairline rows: a tick for each part read, a haloed number for the part you are on, a plain number for the rest, each title one link with its reading time and a word for where you are, so nothing depends on colour. At the end the current part's panel shows a typographic cover that sets "Part 3" over a ruler of six ticks, the title, a one-line dek, the byline, a thin bar with "2 of 6 parts read" and the block's one Shine Button, "Continue to part 3". On a phone the panel comes first and the parts follow. It's built from Steps, Progress, Avatar, Badge, Shine Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a multi-part tutorial, a course written as posts or any run of articles meant to be read in order. The series, the author and where the reader is up to are example data; nothing is saved.
FAQ
How do I change where the reader is up to?
Change AT at the top of the file, a zero-based index into PARTS: parts before it show a tick, that part shows a haloed number and the panel, and the rest show plain numbers. The header sentence, the progress bar, the ruler on the cover and the Shine Button's label are all worked out from it, as is the minutes left. In a real site, set AT from the reader's history, for example the first part they haven't opened.
Are the Steps interactive?
No. They are the catalog's Steps drawn as a read-only list, with role="list" on the list and role="listitem" on each part, the current one marked aria-current="step". What you can use is each part's title: it is a link, and the whole row is its target. A tick, a number and the words "Read", "You are here" or "Not read yet" say the state in three ways.
How is the cover drawn?
It is a typographic cover, sized in container units: the series name and "3 / 6" under a masthead rule, the part's number set very large, and a ruler of six small bars (solid for read, half for the current part, faint for the rest). It uses only your theme's tokens, so it follows light and dark and any preset, and it never mirrors in a right-to-left page, as artwork shouldn't.
How does it fit on a phone?
The panel comes first, so the part you are on and its button are within the first screen, and the six parts follow as rows. From lg the parts sit at the start and the panel at the end behind a divider that meets the top rule with a plus mark. Nothing scrolls sideways at 320 pixels.