Filter Chips Blog Block for React

Edit POSTS at the top of the file: a title, a one-line dek, an author, a category, a date as an ISO string, minutes of reading and an href. The chips, their counts and the status line are all derived from the array. To add a category, add its name to the Category type and to CATEGORIES, and give it a pattern in PATTERNS. Eight posts fill two rows of four; any count works, because each cell draws its own hairlines.

The wall is drawn twice in one grid cell. The visible copy holds the posts that match; an unseen copy of all eight (hidden from assistive technology and the keyboard) sets the height, so the cell is always as tall as the full wall. Choosing a chip only removes cards from the visible copy. The cards left show from the first cell, and the polite status line, the only text that moves, says "Showing 3 of 8 posts" so a screen reader hears what changed. A layout check will report the cards moving; that is the filter working.

Each cover is the line pattern its post's category owns, built from path strings at the top of the file in two weights of the foreground colour, so every Roasting post has the same diagonal stripes and the filter means something. All colours are your theme's tokens. To use photos, put an img with size-full object-cover in PostCover; the frame keeps its aspect, ring and radius, and a phone shows it as a thumbnail.

The chips are one single-choice group named "Filter posts by category": Tab reaches the group once, the arrow keys move between chips, Space or Enter chooses the one in focus, and the pressed chip is the one filtered. Each card is one link, its title, whose focus ring is drawn around the whole card. The status line is a polite live region.

The chips sit in a row that scrolls sideways, with the next chip peeking so the row reads as scrollable, and the status line goes under it. The cards become rows: the category and title at the start with the cover as a small thumbnail at the end, then the byline across the full width; the dek is left out on a phone to keep eight posts within about two and a half screens. Nothing scrolls the page sideways at 320 pixels.

Yes. The chips, the cards and the status line mirror, and counts, dates and reading times are isolated with bdi, so "3 of 8" and "12 min read" keep their order. The covers are artwork and never mirror, as a photo wouldn't.