Site: the user guide (phase 2): the basics, one page per App, Settings and Updates

Eleven pages under /guide/, written from the README, the milestone documents
and the Apps' own source: the keys, the Launcher, the Status Bar and the first
start; the LoRa Scanner, GNSS, Gemini, IRC, Wi-Fi tools, Notes, Storage and
System; Settings (with Wi-Fi) and Updates. Real screenshots where the site has
them, a Guide link in the navigation, and the home page points to it.

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

site/templates/base.html

@@ -29,6 +29,7 @@
   <nav aria-label="Main">
     <a href="/#apps">Apps</a>
     <a href="/install/">Install</a>
+    <a href="/guide/">Guide</a>
     <a href="/downloads/">Downloads</a>
     <a href="{{ config.extra.blog }}">Blog</a>
     <button class="link-btn js-only" id="theme-toggle" type="button">Light</button>

site/templates/guide-index.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% block title %}{{ section.title }}: roro9stack{% endblock %}
+{% block description %}{{ section.description }}{% endblock %}
+{% block main %}
+<div class="wrap page">
+  <header>
+    <span class="eyebrow">User guide</span>
+    <h1>{{ section.title }}</h1>
+    <p class="lead">{{ section.description }}</p>
+  </header>
+
+  <div class="prose">{{ section.content | safe }}</div>
+
+  <div class="cards">
+    {% for p in section.pages %}
+    <article class="card n-lg">
+      <div class="card-top"><span class="tag">{{ p.extra.tag }}</span><span class="num">{% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span></div>
+      <h2><a href="{{ p.permalink }}">{{ p.title }}</a></h2>
+      <p>{{ p.description }}</p>
+    </article>
+    {% endfor %}
+  </div>
+</div>
+{% endblock main %}

site/templates/guide-page.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% block title %}{{ page.title }}: roro9stack user guide{% endblock %}
+{% block description %}{{ page.description }}{% endblock %}
+{% block main %}
+{% set screens = load_data(path="data/screens.toml", format="toml") %}
+<div class="wrap page">
+  <header>
+    <span class="eyebrow"><a href="/guide/">User guide</a>{% if page.extra.tag %} · {{ page.extra.tag }}{% endif %}</span>
+    <h1>{{ page.title }}</h1>
+    <p class="lead">{{ page.description }}</p>
+  </header>
+
+  {% if page.extra.screens %}
+  <div class="shots">
+    {% for s in screens.screen %}{% if s.file in page.extra.screens %}
+    <figure class="shot n-md">
+      <img src="/screens/{{ s.file }}" width="480" height="270" alt="{{ s.alt }}" loading="lazy">
+      <figcaption>{{ s.caption }}</figcaption>
+    </figure>
+    {% endif %}{% endfor %}
+  </div>
+  {% endif %}
+
+  <div class="prose">{{ page.content | safe }}</div>
+
+  <nav class="pager" aria-label="User guide">
+    {% 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/index.html

@@ -68,7 +68,7 @@
     </article>
     {% endfor %}
   </div>
-  <p class="cards-note">Plus Settings, with its Wi-Fi and Firmware pages.</p>
+  <p class="cards-note">Plus Settings, with its Wi-Fi and Firmware pages. Every App has a page in the <a class="accent-link" href="/guide/">user guide</a>.</p>
 </section>
 
 <section class="wrap" id="screens" aria-labelledby="screens-title">