Search Grid 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, an href and a cover. A terminal, diff or log cover prints the strings in lines (a diff row starts with -, + or a space; a log row is a time, a level and a message in fixed columns), and a graph cover plots the values as bars. The header's count, the placeholder and the empty state read from the array. Any count of posts works, because each cell draws its own lines.

The title and the dek, ignoring case and accents, matching the typed text anywhere in either, so "regex" finds a post whose dek mentions a regex tokenizer. Matched words are marked in the title and the dek. On a phone the dek is hidden, except when it is the only place a post matches, so every match shows its marked words. To search the category or the author too, add them to matches.

While the block is on the page, / focuses the field, unless you are already typing in a field or an editor. Escape inside the field clears it and keeps focus there. The field announces its shortcut (aria-keyshortcuts), and the key hint is hidden on a phone, where there is no keyboard. Each card is one link, its title, and the count under the field is a polite status ("2 of 6 posts") so a screen reader hears the result of each change.

No. The results and an unseen copy of all six posts share one grid cell, so the cell is as tall as the full list whatever you type, and what follows the block stays put. If nothing matches, the empty state names the typed words and offers a Clear search button that also returns focus to the field. A layout check will report the cards moving as the list narrows; that is the search working.

Each cover is an SVG built from your theme's tokens, so it follows light and dark and any preset, and every stroke stays one pixel at any size. The tool windows are decoration and hidden from assistive technology. To use photos instead, put an img with size-full object-cover in PostCover; the frame keeps its aspect, ring and radius.

The cells 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. Six posts take about two and a half screens. Nothing scrolls sideways at 320 pixels.

Yes. The field, the cells and the count mirror, and dates, reading times and counts are isolated with bdi. The covers are artwork, with code and numbers in them, and never mirror.

Clear and Clear search are plain buttons with an onClick.