--- /** * Timeline — a vertical timeline for changelogs and history pages. Each * entry pairs a sticky heading (dot marker + title) on the left with * free-form content on the right; a thin track runs down the left edge * and a gradient beam fills it top to bottom as the page scrolls past. * * Sticky headings are plain CSS (`position: sticky`) — no JavaScript. * A custom element tracks scroll progress against the viewport via the * shared `scroll-progress` util (anchors `[0, 0.1] -> [1, 0.5]`, matching * the original's useScroll(["start 10%", "end 50%"])), then writes the * beam's fill percentage and opacity as CSS custom properties consumed * below. No animation library. */ interface Props { /** * Entry headings, top to bottom. Content for entry `i` goes in the * `content-i` named slot (static blocks on the consumer side, never * generated from a loop). */ items: string[]; /** Heading shown above the timeline. */ heading?: string; /** Supporting copy shown under the heading. */ description?: string; /** Additional classes for the root element. */ class?: string; } const { items, heading = 'Timeline', description, class: className, } = Astro.props; ---

{heading}

{description &&

{description}

}

{ items.map((title, index) => (

{title}

)) }

Installation

Install dependencies

Add these files

Configuration

Use it