Framed Cards Blog Block for Vue

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 ("2026-09-10"), a reading time in minutes and an href. Dates are fixed, never computed from today, and are formatted in UTC so the server and the browser print the same day. Six posts fill three rows of two; any even number keeps the frame's last row full, and an odd one leaves one panel on its own at the end.

It is the catalog's Frame: a muted shell with a small inset, and each FramePanel is a raised, bordered panel inside it, so the panels read as cards sitting in a tray. The block draws no hairlines inside the frame; the structure is the shell and the gaps. The frame follows your theme, so in a dark theme the panels are the dark surface and the shell a step lighter.

One link per card keeps the page short to tab through and gives a screen reader one clear name per post. The link's after: box stretches over the whole panel, so a click anywhere opens the post, and the keyboard focus ring is drawn on that box. Category, author and date are plain text. To add a second link, such as the author's page, give it relative z-10 so it sits above the stretched link.

Below sm the panels stack in one column, each with its full dek, so all six fit in about three screens and nothing scrolls sideways at 320 pixels. The byline wraps onto a second line when the author's name is long.

Yes. The two columns and each panel mirror, and the arrow in the corner turns. The date and the reading time are isolated with bdi, so "6 min read" keeps its order.

It's a link (href="#"): point it at your journal's index. The button takes asChild with the link inside, so it can be your router's link.