Computational Literacies Lab

Shortcodes

Zola shortcodes are reusable template fragments you can drop into any Markdown page. The lab theme provides the following shortcodes.

Callouts

Four shortcodes 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.
{% end %}

note — a secondary note or aside.

{% note() %}
Prior versions of this assignment had a different format.
{% end %}

warning — something the reader should be careful about.

{% warning() %}
Do not push large binary files to the repository.
{% end %}

alert — a prominent alert.

{% alert() %}
This page is a draft and may change before the start of the semester.
{% end %}

Citations

These shortcodes 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.

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...
{% end %}

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

Media

video — embed a video, used without a body. Videos should be uploaded to video.computationalliteracies.net using uv run inv upload-video --compress filename. src is the video URL; type defaults to "video/webm".

calendar — embed a Google Calendar iframe, used without a body. html is the embed URL (required); ics is the subscription URL (optional); 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
{% end %}

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.