Compact List Blog Block for React

Each row is one line of 14 pixel text at a fixed 40 pixel height, with a date column of 6.5rem, so twenty posts fit in about a screen. The title is a heading with a link whose after: box covers the whole row and carries the focus ring, so the dotted leader and the minutes are part of the click target too.

The twelve extra rows live in a wrapper that animates grid-template-rows from 0fr to 1fr. Closed, the wrapper is inert and invisible, so the rows are neither focusable nor read; open, they follow the first eight. The button says Show 12 more or Show fewer (both labels share one cell, so it keeps its width), carries aria-expanded and points at the wrapper with aria-controls. With reduced motion the rows open at once.

An empty, aria-hidden span with a dotted bottom border that stretches between the title and the minutes. On a phone the date goes under the title and the leader is dropped, because there is no free space to lead across.

Edit POSTS: a title, an ISO date, a reading time in minutes and an href. SHOWN sets how many rows start visible. Dates are fixed and formatted in UTC.

Yes. The date moves to the right and the minutes to the left, the dotted leader runs between them, and dates and minutes are isolated with bdi.

It toggles the folded rows. The button takes onClick.