Page templates

The hub builds its pages from four types. A book page is a hub route inside the viewer shell, a docs page is the layout you are reading, an article is a post on the production mirror's blog, and the error page is the mirror's 404 page. Each plate frames a live page of one type. Anatomy outlines every part, draws its spacing as a hatched band, and labels the part with its spacing token and the value the page computes at the frame's width.

Book pageCopy Anchor Link

Every hub page with a book head has one structure, set by DESIGN.md section 4 and held by pnpm lint:heads. Page picks a route built on it, and the labels change with Width because the tokens step down under 900 pixels.

Under 880 pixels of head width the panel stacks under the lead, and under 900 pixels the gutter note moves above the section title, so the plate leaves the panel's gap and the gutter out of the phone frame. The sidebar folds into an overlay at the phone width.

Docs pageCopy Anchor Link

The docs site runs fumadocs' notebook layout, the one generaltranslation.com runs at /docs, and docs.css puts its parts on the hub's type steps. Page picks a page with prose and one from the handbook.

Under 1280 pixels the contents move into a bar over the page, and under 768 pixels the sidebar moves into the header's menu. Tables, code and plates keep the full column, and only running text holds to the measure.

ArticleCopy Anchor Link

A post on the production mirror's blog renders the shipped article page section for section: the nav, the header with its back rail, its copy and its cover, the contents and share rail beside the prose, and the footer. Page picks a post or a release, whose rail also carries its tags.

The mirror ports the shipped article's stylesheet rule for rule into blog-article.css, and that sheet writes its spacing as pixel values and clamp() ranges, so the table gives the declaration. The footer sits under the body, so scroll the frame to bring it into view. Under 981 pixels the contents and share rail becomes a bar pinned under the nav. At 390 pixels the rail fills the width, so the plate labels the rail, the back rail and the sidebar at 1440 only.

Error pageCopy Anchor Link

An address the production mirror does not hold renders the shipped 404 page and answers with HTTP status 404: the nav, one band with the horizon, the apology inside its hole, the two exits, the code in the corner, and the site footer.

The horizon computes the hole's center and radius from the band's width and height in NotFoundHorizon.tsx and sets them as --pnf-hole-x, --pnf-hole-y and --pnf-hole-radius, and the copy is placed on that center. The overlay reads the same three properties and draws the hole as a circle. The footer fills the width at 390 pixels, so the plate labels it at 1440 only.

FramesCopy Anchor Link

Each plate keeps one live page, created when the plate comes within 180 pixels of the viewport and removed when it leaves, as the page gallery does. The overlay reads the framed document directly, because the frame is same-origin. It measures the parts on load, on every scroll inside the page and on every resize, and it never takes a pointer, so the page under it stays live.