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/base.html

@@ -31,7 +31,7 @@
     <a href="/install/">Install</a>
     <a href="/guide/">Guide</a>
     <a href="/downloads/">Downloads</a>
-    <a href="{{ config.extra.blog }}">Blog</a>
+    <a href="/devlog/">Devlog</a>
     <button class="link-btn js-only" id="theme-toggle" type="button">Light</button>
     <a class="btn btn-primary n-md" href="{{ config.extra.repo }}">Source</a>
   </nav>
@@ -50,7 +50,7 @@
         <a href="{{ config.extra.repo }}/releases">Releases</a>
         <a href="{{ config.extra.repo }}/src/branch/main/docs">Docs in the repository</a>
         <a href="{{ config.extra.repo }}/issues">Issues</a>
-        <a href="{{ config.extra.blog }}">Blog</a>
+        <a href="/devlog/">Devlog</a>
         <a href="mailto:{{ config.extra.contact }}">Contact</a>
       </nav>
     </div>

site/templates/devlog-index.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% block title %}{{ section.title }}: roro9stack{% endblock %}
+{% block description %}{{ section.description }}{% endblock %}
+{% block head %}
+<link rel="stylesheet" href="/css/devlog.css">
+<link rel="alternate" type="application/atom+xml" title="roro9stack devlog" href="{{ get_url(path="devlog/atom.xml") }}">
+{% endblock %}
+{% block main %}
+<div class="wrap page devlog">
+  <header>
+    <span class="eyebrow">Devlog</span>
+    <h1>{{ section.title }}</h1>
+    <p class="lead">{{ section.description }}</p>
+  </header>
+
+  <div class="prose">{{ section.content | safe }}</div>
+
+  <ol class="entries">
+    {% for p in section.pages %}
+    <li>
+      <article class="card n-lg">
+        <div class="card-top"><span class="tag">{{ p.date | date(format="%d %B %Y") }}</span><span class="num">{{ p.extra.topics }}</span></div>
+        <h2><a href="{{ p.permalink }}">{% if p.extra.title_html is defined %}{{ p.extra.title_html | safe }}{% else %}{{ p.title }}{% endif %}</a></h2>
+        <p>{{ p.description }}</p>
+        <span class="fact">{{ p.extra.read_label | default(value="Read it →") }}</span>
+      </article>
+    </li>
+    {% endfor %}
+  </ol>
+</div>
+{% endblock main %}

site/templates/devlog-post.html

@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+{% block title %}{{ page.title }}: roro9stack devlog{% endblock %}
+{% block description %}{{ page.description }}{% endblock %}
+{% block head %}
+<link rel="stylesheet" href="/css/devlog.css">
+<link rel="stylesheet" href="/css/devlog-diagrams.css">
+<link rel="alternate" type="application/atom+xml" title="roro9stack devlog" href="{{ get_url(path="devlog/atom.xml") }}">
+{% endblock %}
+{% block main %}
+<div class="wrap page devlog">
+  <header class="masthead">
+    <span class="eyebrow"><a href="/devlog/">Devlog</a>{% if page.extra.topics %} · {{ page.extra.topics }}{% endif %}</span>
+    {%- if page.extra.sign is defined %}
+    <div class="sign n-lg{% if page.extra.sign.tone %} {{ page.extra.sign.tone }}{% endif %}" role="img" aria-label="{{ page.extra.sign.label }}: {{ page.extra.sign.count }}">
+      <div class="label">{{ page.extra.sign.label }}<small>{{ page.extra.sign.note }}</small></div>
+      <div class="count">{{ page.extra.sign.count }}</div>
+    </div>
+    {%- endif %}
+    {%- if page.extra.uid is defined %}
+    <p class="uid">{{ page.extra.uid | safe }}</p>
+    {%- endif %}
+    <h1>{% if page.extra.title_html is defined %}{{ page.extra.title_html | safe }}{% else %}{{ page.title }}{% endif %}</h1>
+    <p class="dek">{{ page.extra.dek | markdown(inline=true) | safe }}</p>
+    <p class="byline"><span>{{ config.extra.author }}</span><span>{{ page.date | date(format="%d %B %Y") }}</span>{% if page.extra.byline is defined %}<span>{{ page.extra.byline }}</span>{% endif %}</p>
+    {%- if page.extra.status is defined %}
+    <p class="status">{{ page.extra.status }}</p>
+    {%- endif %}
+  </header>
+
+  <article class="prose post">
+{{ page.content | safe }}
+  </article>
+
+  <nav class="pager" aria-label="Devlog">
+    {% if page.lower %}<a class="accent-link" href="{{ page.lower.permalink }}">← {{ page.lower.title }}</a>{% else %}<span></span>{% endif %}
+    {% if page.higher %}<a class="accent-link" href="{{ page.higher.permalink }}">{{ page.higher.title }} →</a>{% endif %}
+  </nav>
+</div>
+{% endblock main %}

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>