Callouts and Nesting

This experiment demonstrates how Obsidian-style blockquotes become typed callouts, including custom titles, initially collapsed or expanded bodies, and three nested levels. The sandbox source uses a warning with -, a tip with +, and an outer tip containing an example containing a quote. These are content examples in the isolated sandbox, not instructions to alter the engine shared by 51 wikis.

The active transformer configuration is copied verbatim from /home/loca/dev/quartz-sandbox/sandbox/engine/quartz.config.yaml, lines 78–94:

  - source: "@quartz-community/obsidian-flavored-markdown"
    enabled: true
    options:
      comments: true
      highlight: true
      wikilinks: true
      callouts: true
      mermaid: true
      parseTags: true
      parseBlockReferences: true
      enableInHtmlEmbed: false
      enableYouTubeEmbed: true
      enableTweetEmbed: true
      enableVideoEmbed: true
      enableCheckbox: true
      enableObsidianUri: true
    order: 30

The following contiguous excerpt is the actual rendered-example content from /home/loca/dev/quartz-sandbox/sandbox/vault/experiments/callouts-and-nesting.md, lines 54–76. It is fenced here to show the syntax rather than create another demonstration in this wiki.

> [!note] A note with a custom title
> 
> The title after the type is arbitrary text. The type still lands in the DOM as
> `data-callout="note"`, so styling and scraping stay type-driven.
 
> [!warning]- Collapsed by default
> 
> This body is present in the HTML but starts collapsed, because the type was written with a
> trailing `-`. Nothing is lazily fetched — the text is in the emitted page, just not
> expanded.
 
> [!tip]+ Explicitly expanded
> 
> A trailing `+` marks the callout collapsible but open on load.
 
Nesting, three levels deep, each level a distinct type:
 
> [!tip] Outer tip
> 
> The outer body renders normally.
>
> > [!example] Nested example
> > A callout inside a callout.
> >
> > > [!quote] Nested quote
> > > And one inside that. Each level gets its own `data-callout` value, so the nesting is
> > > structural rather than cosmetic.

What the rendered output proves

Live sandbox page: https://quartz.loca.zone/experiments/callouts-and-nesting.html

The prior capture recorded in /home/loca/dev/quartz-sandbox/evidence/2026-09-15-quartz-migration-f1fd35c3/sandbox-experiments.json classifies Callouts and nesting with these literal proof_markers:

{"callout_class":16,"callout_fold":2}

Its rendered_proof.routes entry records 48,055 DOM bytes and also reports katex_class: 1, clipboard_button: 3, and syntax_figures: 3. The receipt captured the built release dist-1789511778 through the temporary loopback origin http://127.0.0.1:51963; these values are prior-capture observations.

These values are receipt marker counters, not counts of actual DOM elements: broad string matches can include quoted source examples. In particular, callout_class: 16 must not be read as sixteen rendered callout elements. The markers record callout and fold-control strings in the captured output; they do not establish that fold controls were clicked, operated by keyboard, or checked with assistive technology. Likewise, clipboard-button DOM is not evidence that copying succeeded. The counters alone are not an assertion about every nested parent-child relationship or visual style.

The documentation author’s independent live check on 2026-09-16 fetched https://quartz.loca.zone/experiments/callouts-and-nesting with HTTP 200. Fresh-profile Chrome using --virtual-time-budget=15000 exited 0 with title Callouts and Nesting — Quartz Sandbox. Counting actual class tokens in that DOM found .callout: 14, .is-collapsible: 2, .is-collapsed: 1, .katex: 1 and .clipboard-button: 3. One reading-statistics badge had data-words="346" and data-minutes="2". The DOM contained 48,055 bytes, SHA-256 d9bd164e58f6227ba710645eb8003571180e69676f8a693f374d8fb2995c0875. This independently confirms rendered callouts and the initial fold-state classes while preserving the different historical marker-count definition; it is not a fold-interaction test.

Safe for the shared engine?

Recorded assessment: safe_for_shared_engine: true.

Receipt reason, verbatim:

Callouts are opt-in per paragraph, already the transformer’s default, and add no extra global asset beyond its stylesheet.

A true verdict does not authorize a shared-engine change. Any requirement to modify /home/loca/dev/quartz/quartz must be reported as a BLOCKER, not performed as an action. This classification describes the experiment’s assessed compatibility, not deployment authority.

Try it in the sandbox

After editing only authorized sandbox content or configuration, use the isolated rebuild wrapper:

cd /home/loca/dev/quartz-sandbox/sandbox && ./build.sh

The wrapper /home/loca/dev/quartz-sandbox/sandbox/build.sh pins the isolated engine to commit 3dff48b5df6d84c9544a5ae19c8f2cbb01dc44e5 and takes a nonblocking .build.lock; a competing build is rejected instead of overlapping. It runs install-plugins before bootstrap-cli.mjs build, with --directory pointing to /home/loca/dev/quartz-sandbox/sandbox/vault and --output pointing to a new timestamped /home/loca/dev/quartz-sandbox/sandbox/dist-<timestamp> directory. It checks for index.html before atomically replacing current. The origin sees the new release on the next request without a restart.

Recorded runtime invocation from sandbox-runtime.json, reference only:

PATH=/usr/bin:/bin PORT=51947 SANDBOX_ROOT=/home/loca/dev/quartz-sandbox/sandbox/current NODE_ENV=production /usr/bin/node /home/loca/dev/quartz-sandbox/sandbox/serve.mjs

The production service already owns port 51947. Do not start a second process or restart the service. The runtime receipt describes an earlier supervised process and release-swap proof; this invocation is not a second launch instruction. No sandbox rebuild or service change was performed to author this documentation.

index