Nested Accordion Archive Blog Block for React

Edit POSTS at the top of the file, newest first, as { author, date, href, minutes, title } with date as an ISO string. The years, the months, their order and every count are derived from the dates, so adding a post in a new month adds that month, and in a new year adds the year.

It opens every year and every month at once. Its label never changes, so it doesn't shift under your pointer; its icon turns into the fold icon and aria-expanded becomes true while everything is open, and pressing it again folds everything back. Opening or closing a single row by hand still works at any time.

Every year and month is a button inside a heading, so Tab moves through the open rows and Enter or Space opens and closes one. Each post title is a link. This accordion does not move between triggers with the arrow keys; use Tab.

Closed panels are hidden until found, so the browser's find-in-page can open them.

An archive is for scanning. The row is the date, the title and the byline; a cover would double the height of every row. For a version with covers, see the cards and pagination blogs.

Yes. The rows and the chevrons mirror, and the counts, the days and the reading times are isolated with bdi, so "18 posts in 3 years" keeps its order.