Site: the devlog, the blog's roro9stack posts in the site's style; Devlog replaces Blog in the navigation

Seven posts imported into site/content/devlog/ with their text unchanged,
links between them pointing to /devlog/, and shortcodes (sign, cast, steps,
asides, folded sections, diagrams, captions) restyled in the site's palette.
The 17 inline SVG diagrams carried <style> blocks and style attributes the
site's Content-Security-Policy refuses: their rules moved to
devlog-diagrams.css, and a diagram's minimum width is a class. An Atom feed
at /devlog/atom.xml.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EhqxQ49eCju4CzKYNjZzwT

site/templates/shortcodes/aside.html

@@ -0,0 +1,2 @@
+{#- A side remark, set off with an orange rule -#}
+<p class="aside">{{ body | markdown(inline=true) | safe }}</p>

site/templates/shortcodes/cast.html

@@ -0,0 +1,9 @@
+{#- The post's cast of components, from [[extra.cast]] entries (name, role, text) in its front matter -#}
+<dl class="cast">
+  {%- for c in page.extra.cast %}
+  <div>
+    <dt>{{ c.name }}<span>{{ c.role }}</span></dt>
+    <dd>{{ c.text | markdown(inline=true) | safe }}</dd>
+  </div>
+  {%- endfor %}
+</dl>

site/templates/shortcodes/code.html

@@ -0,0 +1,7 @@
+{#- A fenced code block with a caption under it: {% code(caption="...") %} ```lang ... ``` {% end %} -#}
+<figure class="code">
+{{ body | markdown | safe }}
+  {%- if caption %}
+  <figcaption>{{ caption | markdown(inline=true) | safe }}</figcaption>
+  {%- endif %}
+</figure>

site/templates/shortcodes/details.html

@@ -0,0 +1,8 @@
+{#- A section that starts folded: {% details(summary="…") %} Markdown {% end %}
+    Other shortcodes don't work inside it: use plain fenced code blocks and tables -#}
+<details class="more">
+  <summary>{{ summary | markdown(inline=true) | safe }}</summary>
+  <div class="more-body">
+{{ body | markdown | safe }}
+  </div>
+</details>

site/templates/shortcodes/diagram.html

@@ -0,0 +1,13 @@
+{#- An SVG diagram from a file next to the post, inlined so it follows the page's colours and dark mode:
+    {{ diagram(src="architecture.svg", caption="…", min_width=580) }}
+    min_width: narrower than this, the diagram scrolls sideways instead of shrinking. It is a class (mw-580,
+    in devlog.css), because the site's Content-Security-Policy refuses style attributes. The SVGs carry no
+    <style> block either: their rules are in devlog-diagrams.css. -#}
+<figure class="arch">
+  <div class="canvas{% if min_width %} mw-{{ min_width }}{% endif %}">
+{{ load_data(path=page.colocated_path ~ src, format="plain") | safe }}
+  </div>
+  {%- if caption %}
+  <figcaption>{{ caption | markdown(inline=true) | safe }}</figcaption>
+  {%- endif %}
+</figure>

site/templates/shortcodes/figure.html

@@ -0,0 +1,10 @@
+{#- A screenshot or photo with a caption. landscape=true lets it fill the column width; full=true
+    makes it a link to the image itself, for a screenshot too detailed for the column -#}
+<figure class="media{% if landscape %} landscape{% endif %}">
+  {%- if full %}<a class="full" href="{{ src }}" title="Open full size">{% endif %}
+  <img src="{{ src }}" alt="{{ alt }}"{% if width %} width="{{ width }}"{% endif %}{% if height %} height="{{ height }}"{% endif %} loading="lazy">
+  {%- if full %}</a>{% endif %}
+  {%- if caption %}
+  <figcaption>{{ caption | markdown(inline=true) | safe }}{% if full %} <a href="{{ src }}">Full size</a>.{% endif %}</figcaption>
+  {%- endif %}
+</figure>

site/templates/shortcodes/sign.html

@@ -0,0 +1,5 @@
+{#- A big "days since…" sign: {{ sign(label="…", note="…", count="0", tone="red") }}. The same markup as the post header's -#}
+<div class="sign{% if tone %} {{ tone }}{% endif %}" role="img" aria-label="{{ label }}: {{ count }}">
+  <div class="label">{{ label }}<small>{{ note }}</small></div>
+  <div class="count">{{ count }}</div>
+</div>

site/templates/shortcodes/signoff.html

@@ -0,0 +1,2 @@
+{#- The closing line of a post -#}
+<p class="signoff">{{ body | markdown(inline=true) | safe }}</p>

site/templates/shortcodes/steps.html

@@ -0,0 +1,4 @@
+{#- Numbered steps: a Markdown numbered list, with a blank line between items -#}
+<div class="devsteps">
+{{ body | markdown | safe }}
+</div>

site/templates/shortcodes/table.html

@@ -0,0 +1,4 @@
+{#- A Markdown table that scrolls sideways on narrow screens instead of squeezing -#}
+<div class="tablewrap">
+{{ body | markdown | safe }}
+</div>