shadcn.io is not affiliated with official shadcn/ui
Milestone Rail Blog Block for Vue
A publication's milestones as a rail of five nodes under a centred header: reached ones solid with a tick and their day, the next one outlined with a progress bar and 38 posts to go; a vertical list on phones.
Installation
Overview
A milestone rail for Vue with Ark UI, written for Fellwick, a hill-walking journal. A centred header ("462 posts and counting") sits over a band that ends the block: a rail of five nodes (First post, 100 posts, 100k reads, 5 years, 500 posts). Reached milestones are solid nodes with a tick and the day they were reached; the next one is outlined and carries a "38 posts to go" badge, a progress bar and "462 of 500 posts". Whether a node is reached, which is next and every figure under them are worked out from the journal's posts and reads per year and its start date, as of one fixed day. A phone turns the rail into a vertical list with the rail at its start. It's built from Guides, Badge and Progress. For journals, newsletters and communities that celebrate how far they've come.
FAQ
How do I use my own milestones?
Edit YEARS (posts and reads by year), STARTED and AS_OF (the one day every figure is counted on), and the MILESTONES list: a label, the metric it watches ("posts", "reads" or "days"), its target, a unit and, for reached ones, reachedOn as an ISO date. A node is reached when its metric has passed its target; the first one that has not is the next, and its remaining count and bar are calculated, so nothing is typed as a total.
Why a fixed date instead of today?
So the page prints the same on the server and in every browser, and never goes stale on a cached page. Set AS_OF to today's date when you generate the page.
How is the progress bar named?
It is decorative: the "38 posts to go" badge and the "462 of 500 posts" line carry the facts in text. The bar is hidden from assistive technology and still labelled, as the library requires.