Components

Components are reusable template fragments you can drop into any Markdown page. (Before Zola 0.23 these were called shortcodes.) The lab theme defines them in site/themes/lab/templates/components/.

Components that wrap a body use a block tag, {% <name> %} ... {% </name> %}; components without a body use a self-closing tag, {{ <name /> }}. String arguments are written key="value"; anything else (numbers, booleans) goes in braces, like p={22} or nolink={true}.

Because Zola now runs every Markdown page through the template engine, any literal {{, {% or {# in content has to be wrapped in a Tera raw block, as the examples in this page's source are.

Callouts

Four components render styled callout boxes. Use them to draw attention to important information.

info — general informational aside.

{% <info> %}
You need a UB VPN connection to access the server.
{% </info> %}

note — a secondary note or aside.

{% <note> %}
Prior versions of this assignment had a different format.
{% </note> %}

warning — something the reader should be careful about.

{% <warning> %}
Do not push large binary files to the repository.
{% </warning> %}

alert — a prominent alert.

{% <alert> %}
This page is a draft and may change before the start of the semester.
{% </alert> %}

Citations

These components link to entries in the lab's publications database. The key parameter is the publication's directory name under site/content/publications/ (e.g. sandoval_2014_conjecture).

cite — inline citation, used without a body. Defaults to narrative form ("Sandoval (2014)"); par={true} gives parenthetical form ("(Sandoval, 2014)"); p={N} adds a page number; pos={true} gives the possessive narrative form ("Sandoval's (2014)").

{{ <cite key="sandoval_2014_conjecture" par={true} p={22} /> }}

blockquote — block quotation with a citation footer. key and optional p work the same as cite.

{% <blockquote key="sandoval_2014_conjecture" p={22}> %}
Conjecture mapping is a means of unpacking the theoretical commitments of a design...
{% </blockquote> %}

ref — full APA 7 reference entry linked to the publication page, used without a body. Pass nolink={true} to suppress the hyperlink.

{{ <ref key="sandoval_2014_conjecture" /> }}

Media

video — embed a video, used without a body. Videos should be uploaded to video.computationalliteracies.net using uv run inv video.upload --compress filename, which also uploads the .vtt captions the player picks up automatically. src is the video URL; type (the MIME type) is inferred from the file extension if omitted.

{{ <video src="https://video.computationalliteracies.net/example.mp4" /> }}

calendar — embed a Google Calendar iframe, used without a body. html is the embed URL (required); ics is the subscription URL (optional); title names the calendar; height defaults to "800px".

Conjectures

conjectures — renders a conjecture map as a left-to-right flowchart with columns for Embodiment, Mediating processes, and Learning outcomes. The title parameter labels the diagram. The body contains mermaid node and edge definitions.

{% <conjectures title="Project Conjectures"> %}
ds[Declarative stories]
genre[New interactive story genres]
ai[AI incorporated into existing practices]
Generate --> ds --> genre
Continue --> ds --> ai
{% </conjectures> %}

Nodes become boxes; --> draws arrows between them. Nodes on the left side of arrows appear in the Embodiment column; middle nodes in Mediating processes; rightmost nodes in Learning outcomes. See the Mermaid flowchart docs for the full node and edge syntax.