Masonry Wall Blog Block for React

Edit DRAFTS at the top of the file. Each post has a title, an author, a category, a date as an ISO string, a reading time in minutes and a shape ("poster", "square" or "wide"); the cover is built from the category and the shape, so it fits any cover size. Dates are fixed and formatted in UTC. The browser balances the columns by height, so any number of posts works, but the stagger reads best with a mix of shapes.

Each category owns one pattern, written as SVG path data at the top of the file (stitches, hatching, dotRamp, arcs), in two weights: light marks at 20% and a few strong ones at 60% of the foreground colour. A pattern is built for its cover's own box, so a poster and a wide cover show the same pattern at the right proportions. To use photos instead, put an img with size-full object-cover inside the cover's frame; the frame keeps its aspect, ring and radius.

CSS columns fill the first column top to bottom, then the next, so the reading order of the list is the DOM order, down each column in turn. That keeps tabbing and screen-reader order the same as the order in DRAFTS. A masonry built with absolutely placed cards or order would break that, which is why this one uses plain columns.

Below md the posts after the sixth are hidden with CSS and the button, which is only shown there, reveals them. The button keeps one label and sets aria-expanded and aria-controls for the list; the hidden posts stay in the page, so nothing is added or removed when it opens. From md the button is gone and all eight posts show.

Yes. The columns fill from the end of the line, the cell lines are the same on both sides, and the date and reading time are isolated with bdi. The covers are artwork and never mirror, as a photo wouldn't.