Oink 0.7.0 — A theme color, one typographic voice, and diagrams you can read

OINKThe project itself signs release notes and official announcements.

Oink 0.7.0 changes no component API. It works on the two surfaces a reader actually spends time in — the shell around the page and the type on it — and finishes a fence that had never been designed, only inherited.

At a glance

• params.ui.theme_color gives a section its own accent, applied to the shell’s grounds rather than to the prose.
• params.ui.fonts reaches all seven typography roles; a Book no longer carries a face of its own.
• A mermaid fence is a figure: centred, unframed, redrawn in place when the colour scheme changes, and openable at full size in a pan/zoom dialog.
• Inline code is crimson ink on a hairline wash instead of a grey pill.
• First-party browser behaviour publishes as stable capability chunks under js/chunks/, so a page selects scripts instead of minting its own bundle.
• Configuration schemas are generated from the resolvers, not maintained by hand.

A theme color

params.ui.theme_color takes a #rgb or #rrggbb hex and tints the shell’s accent grounds: the selected sidebar row and the ground its neighbours take under the pointer, hover washes, the outline pill with its travelling rail and dot, tag and chip hovers, a card’s hovered edge, a share button’s hover fill, text selection, and focus rings.

params:
  ui:
    theme_color: "#2f6f4f"

A section can set its own, and a page opts out of an inherited one with theme_color: false. What it deliberately leaves alone is the reading surface — prose links, external URLs and inline code keep the brand palette in every section — so a colored section is a quiet signal of place rather than a recolor of the page.

One typographic voice

params.ui.fonts reaches the theme’s seven typography roles from configuration, so a site can change its voice without shipping a stylesheet.

A Book no longer carries typography of its own. Its numbers and captions used to render in a bundled monospace with a Latin subset only, which split a Chinese caption across two faces mid-sentence — the digits in one face and the characters in whatever fallback the reader happened to have. They now inherit the surrounding face, with tabular-nums holding the sidebar column aligned.

Diagrams you can actually read

A mermaid fence used to be five lines of passthrough: it handed Mermaid the <pre> of a code block and let startOnLoad decide the rest. Three defects followed from that one decision, and all three needed the same fix — keeping the source readable after Mermaid has run.

The fence now emits a figure holding an empty stage and its source as JSON, the shape echarts and infographic already use, and a runtime owns when each diagram is drawn.

Centred, and unframed. Mermaid emits width="100%" with a max-width at the diagram’s own size, so anything narrower than the column sat against the start edge with up to 300px of empty bordered box beside it — the border being the code block’s. There is deliberately no alignment attribute: a diagram is a figure, and no reader wanted one flush right.

Openable at its own size. Mermaid does not overflow a narrow column, it shrinks to fit one, so overflow-x never offered a way back: on a 390px phone the sequence diagram on this site’s own Mermaid page rendered at 35% of its natural width, turning 14px labels into five. Hovering a diagram — or reaching it with the keyboard — now reveals a control in its corner that renders the diagram a second time into a dialog at full size. Drag to pan, zoom with the wheel, a two-finger pinch or +/-, reset with 0, close with Esc. A diagram that would have to shrink past half size to fit opens at 1:1 at its starting corner instead of as a thumbnail, and zooming back out always reaches the whole diagram however large it is.

No more page reload on a colour-scheme change. The old runtime reloaded the whole page on every theme change on any page holding a diagram, citing a Mermaid limitation from the 8.x era. Mermaid 11 re-initializes cleanly, so the diagrams are redrawn in place, and each stage holds its height across the swap so nothing moves under the reader.

A diagram inside a tab that is not the open one now renders at its proper size. Inside display: none every text measurement returns zero, and Mermaid wrote the resulting max-width: 16px into the SVG for good; revealing the tab never recovered it.

Markdown, RSS and Print carry the fence source. Print had been carrying a <pre class="mermaid"> that no runtime ever reached, at font-size: 0, so a printed diagram was a blank gap.

The reading surface

Inline code is crimson ink on a hairline wash rather than a grey pill. The old tint made every token a lozenge; the much fainter wash now marks token boundaries while the monospace face, weight and hue do the identifying, which keeps a token-dense paragraph readable instead of turning it into a field of grey controls.

The series strip is a panel the width of the bar rather than a stack of links, taxonomy chips are quiet at rest and light up under the pointer, the navbar’s dropdown panels breathe in and out instead of popping, and link hover leaves the muted navy for a vivid azure.

Build and infrastructure

• First-party browser behaviour publishes as stable capability chunks under js/chunks/. A page selects script tags by capability instead of minting a bundle of its own, so the chunks cache across pages.
• bin/generate-config-schema.py projects the schemas from the resolvers, and CI fails when a new params key lands without one.
• An opt-in BookManifest output records the Book sequence with stable ids.
• One media-result contract sits behind every resolved image.
• Google Analytics is limited to interactive HTML output; Print and machine outputs no longer carry it.
• The Book publication job renders its PDF. It never had: chrome-headless-shell needs unprivileged user namespaces, which Ubuntu 24.04 restricts through AppArmor, and the job had failed on every run it ever had.

Upgrading

hugo mod get github.com/pgsty/[email protected]
hugo mod tidy

Nothing in the component API changed, so no content edits are required. Two things are worth knowing:

• A mermaid fence no longer renders <pre class="mermaid">. Site CSS targeting that selector matches nothing now; the diagram is a figure.td-diagram holding .td-diagram__stage.
• If a site pins the theme version in a check of its own, that assertion moves with the pin.

The complete list is in CHANGELOG.md.