Tera components

Zola 0.23.4 renders page and section bodies as Tera 2 templates before Markdown. DevLab exposes its content building blocks as global devlab.* components: they need no import and cannot collide with generic names from your site.

Component syntax

Self-closing components render inline:

{{<devlab.icon name="github" />}}

Components that accept Markdown use an opening and closing tag:

{% <devlab.callout type="info" title="Good to know"> %}
The body supports **Markdown**.
{% </devlab.callout> %}

Arguments written as strings use quotes. Pass variables and non-string literals as Tera expressions in braces, for example item={page} or enabled={true}.

Code blocks

Markdown fenced code blocks are styled automatically. Their toolbar identifies the language and includes a Copy button when the Clipboard API is available. The button shows a visible success or failure state while a polite live region announces the same result to assistive technology.

```toml
theme = "devlab-theme"
compile_sass = true
```

theme = "devlab-theme"
compile_sass = true

Add linenos for line numbers and hl_lines for individual lines or ranges:

```rust,linenos,hl_lines=2
fn main() {
    println!("this line is highlighted");
    println!("this one is not");
}
```

1fn main() {
2    println!("this line is highlighted");
3    println!("this one is not");
4}

These annotations are native Zola highlighting features. DevLab styles them and strips line numbers when copying.

Tabs

Tabs group related Markdown or code examples while keeping every panel readable when JavaScript is unavailable. These two groups share sync="local-shell": selecting a platform in either group updates the other and remembers the choice across pages.

zola serve

zola.exe serve

zola check

zola.exe check

{% <devlab.tabs sync="local-shell" label="Development server command"> %}
{% <devlab.tab name="Unix" value="unix" selected={true}> %}
```bash
zola serve
```
{% </devlab.tab> %}
{% <devlab.tab name="Windows" value="windows"> %}
```powershell
zola.exe serve
```
{% </devlab.tab> %}
{% </devlab.tabs> %}

devlab.tabs parameters:

devlab.tab parameters:

Use at least two devlab.tab children directly inside devlab.tabs. An empty sync value keeps the group independent and does not write a preference. A non-empty key stores only the selected value in localStorage. Explicit values are recommended when labels are translated or may change.

The enhanced control follows the horizontal tabs keyboard pattern: Left and Right move and select, while Home and End jump to the first or last tab. Arrow direction mirrors in RTL layouts.

Diagrams

Diagrams turn a compact Mermaid-compatible source into a responsive SVG. The renderer is bundled with the theme, loaded only on pages that use devlab.diagram, and follows DevLab's live color tokens without a remote font or CDN request.

{% <devlab.diagram id="distribution-architecture" label="Distribution architecture" description="How repositories become desktop editions."> %}
flowchart TD
  upstream["Arch Linux repositories"]
  lycoris["Lycoris repository"]
  packages["Arch packages"]
  system["Lycoris system"]
  plasma["Plasma edition"]
  lxqt["LXQt edition"]

  upstream --> lycoris
  upstream --> packages
  lycoris --> system
  packages --> system
  system --> plasma
  system --> lxqt
{% </devlab.diagram> %}

The current renderer supports flowcharts, state, sequence, class, ER and XY diagrams. Treat diagram source like the rest of the site's authored content: it is rendered from files in the repository, not from visitor input. Keep the description meaningful because it remains available when the visual cannot be rendered.

The self-contained renderer is about 1.6 MB minified (495 KB gzip). This cost is isolated: neither the component loader nor the renderer is requested on pages without a diagram.

File tree

File trees explain a project layout without depending on hand-drawn connector characters. Folders use the browser's native disclosure control, so they remain collapsible without JavaScript.

{% <devlab.file_tree label="Theme structure"> %}
{% <devlab.folder name="devlab-theme" open={true}> %}
{{<devlab.file name="theme.toml" note="Theme metadata" />}}
{% <devlab.folder name="templates" open={true}> %}
{{<devlab.file name="base.html" />}}
{{<devlab.file name="components.html" note="Public components" />}}
{% </devlab.folder> %}
{% <devlab.folder name="sass" open={false}> %}
{{<devlab.file name="main.scss" />}}
{% </devlab.folder> %}
{{<devlab.file name="zola.toml" note="Demo configuration" />}}
{% </devlab.folder> %}
{% </devlab.file_tree> %}

Component parameters:

Place devlab.folder and devlab.file directly inside a tree or another folder. Folder and file names use dir="auto", so localized names remain readable inside both LTR and RTL pages.

Badges

Badges add compact status text without turning the surrounding sentence into a callout.

Release Stable API Beta Migration Required Version Unsupported Label Metadata

Release {{<devlab.badge text="Stable" tone="success" />}}

Tone communicates supporting status, but the visible text must carry the meaning on its own. Do not rely on color to distinguish states.

Cards

Cards can link to another resource or present standalone information.

{% <devlab.card title="Fast setup" href="@/docs/getting-started/_index.md" content_lang={lang}> %}
Start building your documentation site with Zola.
{% </devlab.card> %}

Omit href for a static card:

Callouts

Callouts support info, warning, error, and tip variants.

{% <devlab.callout type="tip" title="Fast feedback"> %}
Use `zola serve` while writing.
{% </devlab.callout> %}

Details

Details hide supplementary Markdown behind the browser's native, no-JavaScript disclosure widget.

{% <devlab.details summary="What Zola version do I need?"> %}
DevLab Theme requires Zola `0.23.4`.
{% </devlab.details> %}

The required summary argument is the always-visible label.

Steps

Steps turn a Markdown ordered list into a connected walkthrough.

{% <devlab.steps> %}
1. Install Zola.
2. Add the theme.
3. Run `zola serve`.
{% </devlab.steps> %}

devlab.steps takes no arguments. Each top-level list item becomes one step; nested Markdown remains available inside it.

Icons

DevLab ships a small SVG library and exposes it through devlab.icon.

GitHub Codeberg Matrix

GitHub {{<devlab.icon name="github" />}}

Icons are decorative by default. Add label when an icon communicates meaning without adjacent text.

Available names:

• Theme: sun, moon
• Social and brand: github, gitlab, codeberg, matrix, zulip, telegram, discord, rss, email, link
• Interface: search, chevron-right, external-link, copy, check, info, warning, menu, x, arrow-left, arrow-right, folder, file

Use an icon from a template

The lower-level SVG component is also global:

<a href="https://github.com/you" aria-label="GitHub">
  {{<devlab.svg_icon name="github" />}}
</a>

To extend the set, add an SVG fragment under templates/components/icons/ and a matching branch in templates/components.html. Keep filenames lowercase and add an accessible label at the wrapper level when the icon is not decorative.

Literal Tera in Markdown

Zola 0.23.4 templates all Markdown content, including fenced code blocks. Wrap examples that must be displayed rather than executed in a Tera raw block:

{% raw %}
```jinja
{{<project.example value="literal" />}}
```
{% endraw %}

For files that should never execute Tera, add their paths to skip_content_templating in zola.toml. Do not disable templating on pages that use DevLab components.