Category Sections Changelog Block for React

Edit GROUPS at the top of the file. Each group has an anchor (the heading's id, which must be unique on the page), an icon, a label and its changes; each change has a title, a summary, a version and a date as an ISO day ("2026-03-24"). The index, its counts and the "9 changes" in the header are all computed from the same list, so a new group or change shows up everywhere at once. Dates are fixed and spelled out by a small helper, so they read the same on the server and in every browser.

From lg it's the catalog Toc: it stays in view beside the sections, marks the section currently on screen with a bar, and each entry is a link to its heading. Below lg the same three links become a row of chips under the title, plain anchors without the moving bar. The sections are short, so on a tall screen they may all be in view at once; the bar then rests on the first.

No. They are Lucide icons on a small plate (a sparkle for Added, a rising line for Improved, a wrench for Fixed), drawn in your theme's colours, so they match your type and read in any theme. The section's name is text in its heading.

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}.

Below lg the columns stack: the title, the chip row, then the sections one under another, each ruled from rail to rail. Each change puts its version and day under the text. Nothing scrolls sideways at 320 pixels; the chip row scrolls if its chips ever outgrow the width. In a right-to-left layout the index, the split divider and the version column swap sides, the arrow on View all releases turns, and the counts and versions stay in reading order.

The header and the sections fade up once on load, and the index's bar slides between sections. With reduced motion both are off and the block simply appears. The block has no state of its own.