Code blocks and Code Groups
Add filenames, exact Copy behavior, wrapping, collapse, and shareable groups to Hugo code examples.
Components
Every component available for writing, ordered by how often you reach for it.
Categories:
OINK’s components fall into two groups: the writing primitives you use every day, and the larger components you need for specific situations. Complete multi-page publishing workflows live under Scenario components.
They all follow one contract: semantic HTML, no JavaScript for the non-interactive ones, a defined presentation in print and Markdown output, and a failed build rather than silent degradation when a parameter is invalid.
Everyday writing
| Component | Purpose | Needs JS |
|---|---|---|
| Code blocks and groups | Filenames, copy, collapse, synchronized tabs | On pages with code |
| Badge | Status labels such as Beta or Deprecated | No |
| Kbd | Keyboard shortcuts | No |
| Fields | Configuration, parameter, and response descriptions | No |
| FileTree | Directory structures | No |
Media
| Component | Purpose | Needs JS |
|---|---|---|
| Gallery | A grid of related images | Reuses the zoom runtime |
| Image zoom | Enlarging screenshots and diagrams | Per page when enabled |
Layout and structure
| Component | Purpose |
|---|---|
| Tabs, cards, steps, and more | Tabbed panes, cards, steps, disclosures, carousels |
Diagrams and visualization
| Component | Purpose | Runtime |
|---|---|---|
| Diagrams and formulae | Mermaid, KaTeX, Markmap, PlantUML | Per page |
| ECharts | Interactive data charts | Per page |
| Infographic | Process and information graphics | Per page |
Scenario workflows
| Scenario | Coordinated capabilities |
|---|---|
| Sequential reading | Pager order, head relations, local mathematics |
| Releases and downloads | Facts, checksums, rolling and pinned channels |
| Landing pages | Full-width shell, local data, 21 reusable sections |
| Book publishing | Numbered media, xrefs, indexes, whole-Book print |
These scenarios compose several primitives with navigation, data, and output rules. Their pages are the authoritative adoption guides; do not infer a scenario contract from one shortcode example alone.
Shared contract
- Standard shortcode notation
{{< … >}}. - Nested names (
filetree/folder,gallery/image,field) are valid only inside their parent. - An invalid parameter fails the build with its source position; strict failure beats silent degradation.
- Only Fields descriptions accept Markdown; every other public string parameter is plain text.
- A page that does not use a component never receives its runtime.
Badge
Add compact, semantic status labels without custom colors or JavaScript.
Kbd
Write keyboard shortcuts as accessible, static key sequences.
Fields and Field
Describe configuration, parameters, properties, and response fields with responsive semantic HTML.
FileTree
Present repository and directory structures as semantic, progressively disclosed lists.
Gallery
Arrange related images in a responsive static grid that can reuse Image Zoom.
Image Zoom
Let readers inspect meaningful standalone images with an optional native dialog.
Shortcodes
Use OINK’s local-first content components safely and accessibly.
Diagrams and formulae
Add local diagrams, mind maps, and scientific formulae to a page.
Apache ECharts
Build responsive, local-first charts from structured JSON or YAML.
Infographics with AntV
Turn concise declarative data into local SVG infographics.