The replacements pipeline swaps special glyphs or tokens with accessible, styled spans. It runs both at build time and in the browser so entries added later stay in sync.
Replacement Library
| Original | Usage | Styled Output |
|---|---|---|
→ | Directional arrow Functors, callouts, and inline annotations | |
f/ | Aperture mark Photography notation such as 1.4 | |
*SPOT* | Spot focus marker Inline focus/point-of-interest callouts | ** |
[[calendar]] | Calendar date Prepend to published dates | [[calendar]] |
[[refresh]] | Update marker Use for revised timestamps or changelog entries | [[refresh]] |
[[clock]] | Reading time Shortform indicator for duration | [[clock]] |
[[words]] | Word count Marks approximate length of an entry | [[words]] |
[[pin]] | Location pin City, venue, or on-location callouts | [[pin]] |
Usage
- Type the original token inline (for example
[[pin]]or→). No markup necessary. - Tokens inside fenced code blocks (anything wrapped with triple backticks) are ignored so documentation stays literal.
- You can add per-page overrides by populating the
textReplacementsfront-matter array.
[[clock]] 3 min • [[words]] 640 words
[[pin]] Austin, TX — recorded live on [[calendar]] Jul 14, 2025
Need a new glyph? Add it to data/text-replacements.yml with a unique token, drop any required CSS in 03-components/text-replacements.css, and it will appear in the library above automatically.
Template Usage
Layout partials can render the same icons without waiting for client-side upgrades. Call the helper partial with the token you need and, when possible, the current page context so overrides still apply:
{{ partial "replacements/token.html" (dict "token" "[[calendar]]" "page" . "site" site) }}
This keeps the SVG span in the static HTML while the runtime replacer continues to patch tokens inside dynamic components.