shadcn.io is not affiliated with official shadcn/ui
Rail Timeline Blog Block for Svelte
A local-history society's notebook as a vertical rail: a band per year, the year sticky at the rail's start, and dated entries hung off the rail on dots.
Installation
Overview
A post timeline for Svelte with Ark UI, written for Chronicle Lane, a local-history society. A start-aligned header sits over one band per year, each opened by a rule that meets a hairline rail at a + mark. At the rail's start the year stands in large numerals with its post count, and it stays in view while that year's entries pass. At the rail's end each entry hangs on a dot with its date, the title as its one link and a one-line dek. Years and counts are worked out from the typed entries, newest first. There are no controls and no covers, only the rail. On a phone the rail moves to the start and each year stacks over its entries. It's built from Guides and CSS only, so it needs no JavaScript. For history pages, journals and any blog whose age is part of the story.
FAQ
How do I add entries?
Add an object to ENTRIES at the top of the file with a date as an ISO string, a title, a dek and an href. Keep the list newest first. The year bands, their order and the "3 posts" counts are derived from the dates, so the first entry of a new year opens a new band.
How is the rail drawn?
One CSS variable, --rail, holds the rail's distance from the band's start edge. The line, the + mark where it meets each year's rule and the dots all read it, so they cannot drift apart. It is one value on phones and another from lg, where the year takes its own column. Every band draws its own rule with Guides, so the marks land on the rail.
Does the year really stay in view?
From lg the year label is sticky inside its band, so it stays near the top while its entries scroll and hands over to the next year when the next band arrives. On a phone each year simply stacks above its entries; nothing sticks.
How does it work with a keyboard and a screen reader?
It is an ordered list of years, each with an h3 and an ordered list of entries, each an article with an h4 link. There is nothing to operate except the links, so Tab moves from title to title. The dots and the rail are decoration and hidden from assistive technology.