Featured Post Blog Block for React

Edit LEAD and MORE at the top of the file. A post has a title, an author, a category, a date as an ISO string ("2026-09-12"), a reading time in minutes and an href; the lead also has a one-line dek. Dates are fixed, never computed from today, and are formatted in UTC so the server and the browser print the same day. Any number of cells works: each one draws its own hairlines, and the grid is three across from sm.

BedCover is one SVG at module scope: graph paper, the bed's boards, four sections with five plants each (path strings built from a few numbers), a dimension line and a caption. Every colour is a theme token, so it follows light and dark and any preset, and every stroke stays a hairline at any size. To use a photo instead, put an img with object-cover and size-full inside PostCover: the frame keeps its 4:3 shape, ring and radius.

One link per card gives a screen reader one clear name per post and keeps the page short to tab through. The title's after: box stretches over the whole card, so a click anywhere opens the post, and the focus ring is drawn on that box. Read story is the lead's visual cue, not a second link: it is hidden from assistive technology and underlines when the card is hovered. To add a real second link, give it relative z-10 so it sits above the stretched one.

The cover comes first and the copy follows under a drawn rule, then the three posts become rows, so the whole block is about two screens. From lg the lead is a split with the cover at the end behind a divider whose + mark meets the top rule. The cells stay stacked below sm and sit three across from sm. Nothing scrolls sideways at 320 pixels.

Yes. The split, the divider and the cells mirror, and the arrows turn. The date and the reading time are isolated with bdi, so "11 min read" keeps its order. The cover is artwork and never mirrors, as a photo wouldn't.

It's a link (href="#"): point it at your blog's index. The button renders the link it's given with render, with nativeButton={false}.