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

> Oink 0.7.0 gives a section its own accent through the shell's grounds, hands the site control of all seven typography roles, and turns a Mermaid fence into a figure that is centred, redrawn in place on a colour-scheme change, and openable at its own size.

---

LLMS index: [llms.txt](/llms.txt)

---

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.

**v0\.7\.0 · 2026-08-25**
- [View release](https://github.com/pgsty/oink/releases/tag/v0.7.0)
- [Source · tar\.gz](https://github.com/pgsty/oink/archive/refs/tags/v0.7.0.tar.gz)
- [Source · zip](https://github.com/pgsty/oink/archive/refs/tags/v0.7.0.zip)
- [pgsty\/oink](https://github.com/pgsty/oink)

## At a glance {#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 {#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.

```yaml {title="hugo.yaml"}
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 {#typography}

`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 {#mermaid}

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 {#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 {#build}

- 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 {#upgrading}

```bash
hugo mod get github.com/pgsty/oink@v0.7.0
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](https://github.com/pgsty/oink/blob/main/CHANGELOG.md).