Compact Timeline Changelog Block for React

Edit WEEKS at the top of the file: each week has a title ("Week of Mar 23") and its releases, each with a version, a date as an ISO day, a kind and a text. The week labels are plain text you write, so check them against the dates. Dates are fixed and spelled out by a small helper, so they read the same on the server and in every browser.

By the dot's shape, never by colour: the constants NEW, IMPROVED, FIXED and DEPRECATED each carry a shape (the classes that draw it), and the key above the list is built from the same constants. Each row also puts its kind in text a screen reader reads first ("Fixed: Timers started offline sync once you reconnect"), so the shape is never the only signal.

One CSS variable, --rail, sets its distance from the column's start edge; the line, the dots and the week ticks all read it, so moving the rail is one number. The line is a pseudo-element on the list and fades out over its last 3rem.

It's a link (href="#"): point it at your full changelog. It's a ghost button, so the block has no primary action. The button renders the link it's given with render, with nativeButton={false}.

The layout is the same at every width: the rail stays at the start edge and the text wraps beside it, so nothing scrolls sideways at 320 pixels. In a right-to-left layout the rail, the dots and the week ticks move to the start edge, the arrow turns, and the mono versions stay in reading order.

The header, the key and the list fade up once on load. With reduced motion they are off and the block simply appears. The block has no state.