Blog Layout
A blog front page built entirely from Markdown blocks - copy this file, replace the words.
This page is a template. Everything on it is Markdown and the block layer -
no JSX, no route of its own - so building a blog front page is copying this
file into content/pages/ and replacing the words. The images are Unsplash;
swap the URLs for your own.
Featured
The one about shipping
8 minThe lead paragraph of the featured post, one or two sentences, ending before it gets comfortable.
Notes on typography
5 minWhy the scale is short, and what that buys at every width.
A field guide to tokens
12 minOne palette, two themes, zero literals below the tokens layer.
Watch instead
A post that is really a video says so at the top, in the cardCardTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.@sushindustries/ui · layout variant, sized to sit in the column rather than take it over:
Put a second one in the column and only one of them can ever be playing: each block compares its own id to a store holding whichever video is mounted, so starting one stops the other rather than leaving it running somewhere off the screen.
Everything else
Older post
Mar 2026One line of what it argued.
Another one
Feb 2026One line of what it found.
The archive
AllEvery post, by date.
How this page works
gridGridA responsive grid with no breakpoints in it. One number decides the column count at every width.@sushindustries/ui · layout lays out the columns, cardCardTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.@sushindustries/ui · layout draws each entry - image makes the
image card, icon + tone the category card - and spacerSpacerVertical space on the scale, optionally with a rule and a label. For Markdown, where there is no markup to hang a margin on.@sushindustries/ui · layout holds the
sections apart on the spacing scale. All of it is atomic classes underneath.