Rectangular Cards Blog Block for React

Edit POSTS at the top of the file. Each post has a title, a one-line dek, an author, a category, a date as an ISO string, a reading time in minutes, an href and a cover. The row's number comes from its place in the list, and the zig-zag follows the same order, so adding a post keeps the alternation. Dates are fixed and formatted in UTC.

Each row's li is a named group, and the card's classes use group-even/row from md: even rows swap the two grid tracks and move the cover to the second column. The DOM is the same for every row (cover, then text), so the reading order never changes and no row is duplicated.

cover picks one of four SVG drawings (poster, spread, card, marks), each built from rectangles, lines and a few paths in a 320 by 240 box, with every stroke a hairline at any size. To use photos, replace the drawings with an img with object-cover and size-full inside PostCover: the frame keeps its 4:3 shape, ring and radius.

Each row becomes a thumbnail at the start (6.5rem wide) beside the number, the category and the title, with the dek and the byline under them. Nothing mirrors on a phone. The four rows take about two screens, and nothing scrolls sideways at 320 pixels.

Yes. Odd rows put the cover at the start (the right side) and even rows at the end, the arrows turn, and the date and the reading time are isolated with bdi. The covers are artwork and never mirror, 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}.