Site: how-tos and the FAQ (phase 3)

Eight how-to recipes and a FAQ page with a list of its questions, from the
README, the milestone documents and the Apps' source. The guide templates
become generic (the parent section gives the eyebrow, title and pager).

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

site/templates/guide-page.html

@@ -1,11 +1,13 @@
 {% extends "base.html" %}
-{% block title %}{{ page.title }}: roro9stack user guide{% endblock %}
+{% block title %}{% set parent_path = page.ancestors | last %}{% set parent = get_section(path=parent_path) %}{{ page.title }}: roro9stack {% if parent_path == "_index.md" %}FAQ{% else %}{{ parent.title | lower }}{% endif %}{% endblock %}
 {% block description %}{{ page.description }}{% endblock %}
 {% block main %}
+{% set parent_path = page.ancestors | last %}
+{% set parent = get_section(path=parent_path) %}
 {% 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>
+    <span class="eyebrow">{% if parent_path != "_index.md" %}<a href="{{ parent.permalink }}">{{ parent.title }}</a>{% else %}FAQ{% endif %}{% if page.extra.tag %} · {{ page.extra.tag }}{% endif %}</span>
     <h1>{{ page.title }}</h1>
     <p class="lead">{{ page.description }}</p>
   </header>
@@ -21,11 +23,19 @@
   </div>
   {% endif %}
 
+  {% if page.extra.toc %}
+  <nav class="prose toc" aria-label="Questions">
+    <ul>{% for h in page.toc %}<li><a class="accent-link" href="{{ h.permalink }}">{{ h.title }}</a></li>{% endfor %}</ul>
+  </nav>
+  {% endif %}
+
   <div class="prose">{{ page.content | safe }}</div>
 
-  <nav class="pager" aria-label="User guide">
+  {% if page.lower or page.higher %}
+  <nav class="pager" aria-label="{{ parent.title }}">
     {% 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>
+  {% endif %}
 </div>
 {% endblock main %}