codetrail-cli 1.4.1__py3-none-any.whl

codetrail/web/templates/layout/icons.html

@@ -0,0 +1,27 @@
+{# Small inline icons drawn for Codetrail (design section 16.2). Decorative: hidden from assistive technology. #}
+{% macro icon(name) -%}
+<svg class="icon{% if name == "arrow" %} icon-flip{% endif %}" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+{%- if name == "search" %}<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
+{%- elif name == "ask" %}<path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z"/>
+{%- elif name == "home" %}<path d="M4 11 12 4l8 7"/><path d="M6 10v10h12V10"/>
+{%- elif name == "progress" %}<path d="M4 20V10"/><path d="M10 20V4"/><path d="M16 20v-7"/><path d="M22 20H2"/>
+{%- elif name == "answer" %}<path d="M6 4h12v16l-6-4-6 4Z"/>
+{%- elif name == "digest" %}<path d="M5 4h14v16H5z"/><path d="M9 9h6M9 13h6"/>
+{%- elif name == "decision" %}<path d="M12 3v18"/><path d="M5 7h14l-2 4H5z"/>
+{%- elif name == "system" %}<rect x="3" y="4" width="7" height="6" rx="1.5"/><rect x="14" y="4" width="7" height="6" rx="1.5"/><rect x="8.5" y="15" width="7" height="6" rx="1.5"/><path d="M10 7h4M17.5 10l-3 5M6.5 10l3 5"/>
+{%- elif name == "metrics" %}<path d="M4 20h16"/><path d="M4 16l5-5 4 3 7-7"/><path d="M16 7h4v4"/>
+{%- elif name == "repository" %}<path d="M4 20V8"/><path d="M9 20V4"/><path d="M14 20v-9"/><path d="M19 20v-5"/><circle cx="19" cy="9" r="2"/>
+{%- elif name == "check" %}<path d="m5 12 4.5 4.5L19 7"/>
+{%- elif name == "sun" %}<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
+{%- elif name == "menu" %}<path d="M4 7h16M4 12h16M4 17h16"/>
+{%- elif name == "close" %}<path d="M6 6l12 12M18 6 6 18"/>
+{%- elif name == "sidebar" %}<rect x="3" y="4" width="18" height="16" rx="3"/><path d="M9 4v16"/>
+{%- elif name == "pin" %}<path d="M9 4h6l-1 6 3 3H7l3-3-1-6Z"/><path d="M12 13v7"/>
+{%- elif name == "chevron" %}<path d="m9 6 6 6-6 6"/>
+{%- elif name == "keyboard" %}<rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10"/>
+{%- elif name == "arrow" %}<path d="M5 12h14M13 6l6 6-6 6"/>
+{%- elif name == "expand" %}<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
+{%- elif name == "folder" %}<path d="M3 6h7l2 2h9v11H3z"/>
+{%- endif -%}
+</svg>
+{%- endmacro %}

codetrail/web/templates/layout/outline.html

@@ -0,0 +1,4 @@
+<aside class="outline" aria-labelledby="outline-title" data-outline hidden>
+  <p class="outline-title" id="outline-title">{{ _("On this page") }}</p>
+  <ol></ol>
+</aside>

codetrail/web/templates/layout/palette.html

@@ -0,0 +1,27 @@
+{% from "layout/icons.html" import icon %}
+{% from "macros.html" import kind_name %}
+<dialog class="palette" data-palette aria-label="{{ _('Search or ask') }}"
+        {% for kind in ["area", "concept", "path", "digest", "answer", "decision", "fact"] %}data-kind-{{ kind }}="{{ kind_name(kind) }}" {% endfor %}
+        data-group-pages="{{ _('Pages') }}" data-group-answers="{{ _('Saved answers') }}"
+        data-group-decisions="{{ _('Decisions') }}" data-group-facts="{{ _('Facts') }}"
+        data-group-actions="{{ _('Actions') }}"
+        data-action-ask="{{ _('Ask about: “{query}”') }}" data-action-all="{{ _('See every result for “{query}”') }}"
+        data-action-update="{{ _('Update the guide…') }}" data-action-progress="{{ _('Go to progress') }}"
+        data-action-theme="{{ _('Switch theme') }}"
+        data-label-searching="{{ _('Searching…') }}" data-label-empty="{{ _('Nothing in the guide matches “{query}”.') }}"
+        data-label-unavailable="{{ _('Search isn’t available right now.') }}">
+  <div class="palette-field">
+    {{ icon("search") }}
+    <input type="text" data-palette-input role="combobox" aria-expanded="false" aria-controls="palette-list"
+           aria-autocomplete="list" aria-label="{{ _('Search the guide, or ask a question') }}"
+           placeholder="{{ _('Search the guide, or ask a question…') }}" autocomplete="off" spellcheck="false" maxlength="1000">
+    <kbd>Esc</kbd>
+  </div>
+  <ul class="palette-list" id="palette-list" role="listbox" data-palette-list aria-label="{{ _('Results') }}"></ul>
+  <p class="palette-status" data-palette-status aria-live="polite"></p>
+  <div class="palette-footer" aria-hidden="true">
+    <span><kbd>↑</kbd> <kbd>↓</kbd> {{ _("to move") }}</span>
+    <span><kbd>Enter</kbd> {{ _("to open") }}</span>
+    <span><kbd>Esc</kbd> {{ _("to close") }}</span>
+  </div>
+</dialog>

codetrail/web/templates/layout/shortcuts.html

@@ -0,0 +1,27 @@
+<dialog class="shortcuts-dialog" data-shortcuts aria-labelledby="shortcuts-title">
+  <div class="dialog-body">
+    <h2 id="shortcuts-title">{{ _("Keyboard shortcuts") }}</h2>
+    <table>
+      <tbody>
+        <tr><td><kbd>⌘</kbd> <kbd>K</kbd> · <kbd>/</kbd></td><td>{{ _("Search, or ask a question") }}</td></tr>
+        <tr><td><kbd>A</kbd></td><td>{{ _("Ask about this page") }}</td></tr>
+        <tr><td><kbd>G</kbd> <kbd>H</kbd></td><td>{{ _("Go home") }}</td></tr>
+        <tr><td><kbd>G</kbd> <kbd>P</kbd></td><td>{{ _("Go to your progress") }}</td></tr>
+        <tr><td><kbd>G</kbd> <kbd>Y</kbd></td><td>{{ _("Go to your system") }}</td></tr>
+        <tr><td><kbd>G</kbd> <kbd>S</kbd></td><td>{{ _("Go to saved answers") }}</td></tr>
+        <tr><td><kbd>G</kbd> <kbd>D</kbd></td><td>{{ _("Go to digests") }}</td></tr>
+        <tr><td><kbd>G</kbd> <kbd>R</kbd></td><td>{{ _("Go to decisions") }}</td></tr>
+        <tr><td><kbd>G</kbd> <kbd>O</kbd></td><td>{{ _("Go to documentation") }}</td></tr>
+        <tr><td><kbd>G</kbd> <kbd>T</kbd></td><td>{{ _("Go to the repository") }}</td></tr>
+        <tr><td><kbd>[</kbd> · <kbd>]</kbd></td><td>{{ _("Previous or next page in the path") }}</td></tr>
+        <tr><td><kbd>\</kbd></td><td>{{ _("Hide or show the sidebar") }}</td></tr>
+        <tr><td><kbd>M</kbd></td><td>{{ _("Mark this page read, or unread") }}</td></tr>
+        <tr><td><kbd>U</kbd></td><td>{{ _("Update the guide (shows the estimate first)") }}</td></tr>
+        <tr><td><kbd>?</kbd></td><td>{{ _("Show these shortcuts") }}</td></tr>
+        <tr><td><kbd>Esc</kbd></td><td>{{ _("Close the palette, the panel, the sidebar's peek or a dialog") }}</td></tr>
+      </tbody>
+    </table>
+    <p class="faint">{{ _("No shortcut spends anything: questions are sent by their Send button, and updates start only when you choose Go ahead.") }}</p>
+  </div>
+  <div class="dialog-actions"><button type="button" class="button" data-shortcuts-close>{{ _("Close") }}</button></div>
+</dialog>

codetrail/web/templates/layout/sidebar.html

@@ -0,0 +1,79 @@
+{% from "layout/icons.html" import icon %}
+{# The sidebar (design section 22): pinned tiles, then the guide's lists in folding sections. Folding, hiding and
+   pinning are run by sidebar.js; without it every section is open and the tiles still link. #}
+{% set pinned_ids = nav.pins|map(attribute="id")|list %}
+{% set full = pinned_ids|length >= max_pins %}
+{% macro fold(name, heading, count=none) -%}
+<h2 class="nav-heading"><button type="button" class="nav-fold" data-fold="{{ name }}" aria-expanded="true" aria-controls="nav-{{ name }}">{{ icon("chevron") }}<span class="nav-fold-label">{{ heading }}</span>{% if count is not none %}<span class="count">{{ count }}</span>{% endif %}</button></h2>
+{%- endmacro %}
+{% macro pin(page) -%}
+<button type="button" class="nav-pin" data-pin="{{ page.id }}" data-kind="{{ page.kind }}" data-initials="{{ page.title|initials }}" aria-pressed="{{ 'true' if page.id in pinned_ids else 'false' }}" aria-label="{{ _('Pin %(title)s', title=page.title) }}"{% if full and page.id not in pinned_ids %} disabled title="{{ _('Unpin a page first') }}"{% endif %} hidden>{{ icon("pin") }}</button>
+{%- endmacro %}
+<nav class="sidebar" id="sidebar" aria-label="{{ _('Guide') }}" data-max-pins="{{ max_pins }}"
+     data-label-unpin="{{ _('Unpin %(title)s', title='{title}') }}" data-label-full="{{ _('Unpin a page first') }}">
+  <ul class="pins" data-pins aria-label="{{ _('Pinned pages') }}"{% if not nav.pins %} hidden{% endif %}>
+    {% for page in nav.pins %}<li class="pin-item"><a class="pin" href="/pages/{{ page.id }}" {% if active == page.id %}aria-current="page" {% endif %}title="{{ page.title }}" aria-label="{{ page.title }}" {% if page.kind == "answer" %}dir="auto"{% else %}lang="en" dir="ltr"{% endif %}>{{ page.title|initials }}</a><button type="button" class="pin-remove" data-unpin="{{ page.id }}" aria-label="{{ _('Unpin %(title)s', title=page.title) }}" hidden>{{ icon("close") }}</button></li>{% endfor %}
+  </ul>
+  <template data-pin-template><li class="pin-item"><a class="pin"></a><button type="button" class="pin-remove">{{ icon("close") }}</button></li></template>
+
+  <ul class="nav-list">
+    <li><a class="nav-link" href="/" {% if active == "home" %}aria-current="page"{% endif %}>{{ icon("home") }}<span class="label">{{ _("Home") }}</span></a></li>
+    <li><a class="nav-link" href="/progress" {% if active == "progress" %}aria-current="page"{% endif %}>{{ icon("progress") }}<span class="label">{{ _("Progress") }}</span></a></li>
+    {% if has_system %}<li><a class="nav-link" href="/system" {% if active == "system" %}aria-current="page"{% endif %}>{{ icon("system") }}<span class="label">{{ _("System") }}</span></a></li>{% endif %}
+  </ul>
+
+  {% if nav.paths %}
+  <div class="nav-section" data-section="paths">
+  {{ fold("paths", _("Paths"), nav.paths|length) }}
+  <ul class="nav-list" id="nav-paths" lang="en" dir="ltr">
+    {% for path, learned, total in nav.paths %}
+    <li class="nav-row"><a class="nav-link nav-path" href="/pages/{{ path.id }}" {% if active == path.id %}aria-current="page"{% endif %}>
+      <span class="label">{{ path.title }}<progress class="bar" max="{{ total or 1 }}" value="{{ learned }}" aria-hidden="true"></progress></span>
+      <span class="count">{{ learned }}/{{ total }}</span></a>{{ pin(path) }}</li>
+    {% endfor %}
+  </ul>
+  </div>
+  {% endif %}
+
+  {% for name, heading, pages in [("areas", _("Areas"), nav.areas), ("concepts", _("Concepts"), nav.concepts)] %}
+  {% if pages %}
+  <div class="nav-section" data-section="{{ name }}">
+  {{ fold(name, heading, pages|length) }}
+  <ul class="nav-list" id="nav-{{ name }}" lang="en" dir="ltr">
+    {% for page in pages %}
+    <li class="nav-row"><a class="nav-link" href="/pages/{{ page.id }}" {% if active == page.id %}aria-current="page"{% endif %}><span class="label">{{ page.title }}</span>{% if nav.statuses.get(page.id) == "learned" %}<span class="check" title="{{ _('Learned') }}">{{ icon("check") }}</span>{% elif nav.statuses.get(page.id) == "stale" %}<span class="dot" title="{{ _('Changed since you learned it') }}"></span>{% endif %}</a>{{ pin(page) }}</li>
+    {% endfor %}
+  </ul>
+  </div>
+  {% endif %}
+  {% endfor %}
+
+  <div class="nav-section" data-section="answers">
+  {{ fold("answers", _("Saved answers"), nav.answer_count) }}
+  <ul class="nav-list" id="nav-answers" data-nav-answers>
+    {% for answer in nav.answers %}
+    <li class="nav-row"><a class="nav-link" href="/pages/{{ answer.id }}" {% if active == answer.id %}aria-current="page"{% endif %}><span class="label" dir="auto">{{ answer.title }}</span></a>{{ pin(answer) }}</li>
+    {% else %}
+    <li class="nav-empty" data-nav-empty>{{ _("Answers you save appear here.") }}</li>
+    {% endfor %}
+    {% if nav.answer_count %}
+    <li><a class="nav-link" href="/answers" {% if active == "answers" %}aria-current="page"{% endif %}><span class="label">{{ _("All saved answers") }}</span><span class="count">{{ nav.answer_count }}</span></a></li>
+    {% endif %}
+  </ul>
+  </div>
+
+  <div class="nav-section" data-section="more">
+  {{ fold("more", _("More")) }}
+  <ul class="nav-list" id="nav-more">
+    <li><a class="nav-link" href="/digests" {% if active == "digests" %}aria-current="page"{% endif %}>{{ icon("digest") }}<span class="label">{{ _("Digests") }}</span>{% if nav.unread_digests %}<span class="dot" title="{{ _('Unread') }}"></span>{% endif %}</a></li>
+    <li><a class="nav-link" href="/decisions" {% if active == "decisions" %}aria-current="page"{% endif %}>{{ icon("decision") }}<span class="label">{{ _("Decisions") }}</span></a></li>
+    <li><a class="nav-link" href="/documentation" {% if active == "documentation" %}aria-current="page"{% endif %}>{{ icon("metrics") }}<span class="label">{{ _("Documentation") }}</span></a></li>
+    <li><a class="nav-link" href="/repository" {% if active == "repository" %}aria-current="page"{% endif %}>{{ icon("repository") }}<span class="label">{{ _("Repository") }}</span></a></li>
+  </ul>
+  </div>
+</nav>
+<div class="resize-handle resize-sidebar" data-resize="sidebar" role="separator" aria-orientation="vertical"
+     aria-controls="sidebar" aria-label="{{ _('Resize the sidebar') }}" title="{{ _('Drag to resize; double-click to reset') }}"
+     tabindex="0"></div>
+<button type="button" class="sidebar-edge" data-sidebar-edge aria-controls="sidebar" aria-expanded="false"
+        aria-label="{{ _('Show the sidebar for a moment') }}"></button>

codetrail/web/templates/layout/update_dialog.html

@@ -0,0 +1,18 @@
+<dialog class="estimate-dialog" data-estimate-dialog aria-labelledby="estimate-title">
+  <div class="dialog-body" data-estimate-body></div>
+  <div class="dialog-actions">
+    <button type="button" class="button" data-estimate-cancel>{{ _("Cancel") }}</button>
+    <button type="button" class="button primary" data-estimate-go>{{ _("Go ahead") }}</button>
+  </div>
+</dialog>
+{% from "layout/icons.html" import icon %}
+<aside class="update-panel" data-update-panel aria-labelledby="update-title" hidden
+       data-label-running="{{ _('Updating…') }}" data-label-done="{{ _('Updated.') }}"
+       data-label-failed="{{ _('The update failed:') }}">
+  <div class="ask-head">
+    <h2 id="update-title">{{ _("Updating the guide") }}</h2>
+    <button type="button" class="icon-button" data-update-close aria-label="{{ _('Close') }}">{{ icon("close") }}</button>
+  </div>
+  <ol class="update-log" data-update-log aria-live="polite"></ol>
+  <p class="update-state" role="status" data-update-state></p>
+</aside>

codetrail/web/templates/macros.html

@@ -0,0 +1,13 @@
+{# A call's estimate on its button (design section 15.4): tokens, and its cost at API prices when known. #}
+{% macro cost(estimate) -%}
+{%- if estimate -%}
+<span class="cost" dir="ltr" title="{{ _('An estimate. On a subscription this counts against your plan’s usage limits; with an API key it is billed at these prices.') }}">~{{ estimate.tokens|tokens }} {{ _("tokens") }}{% if estimate.cost_usd is none %}{% elif estimate.cost_usd == 0 %} · {{ _("free") }}{% else %} · ~{{ estimate.cost_usd|dollars }}{% endif %}</span>
+{%- endif -%}
+{%- endmacro %}
+
+{# A search result's kind, in the reader's language (design section 7.2). #}
+{% macro kind_name(kind) -%}
+{%- set names = {"area": _("Area"), "concept": _("Concept"), "path": _("Path"), "digest": _("Digest"),
+                 "answer": _("Saved answer"), "decision": _("Decision"), "fact": _("Fact")} -%}
+{{ names.get(kind, kind) }}
+{%- endmacro %}

codetrail/web/templates/page.html

@@ -0,0 +1,93 @@
+{% extends "base.html" %}
+{% from "layout/icons.html" import icon %}
+{% from "macros.html" import cost with context %}
+{% block title %}{{ page.title }}{% endblock %}
+{% block content %}
+<div class="reading">
+<nav aria-label="{{ _('Breadcrumbs') }}">
+  <ol class="breadcrumbs">
+    <li><a href="/">{{ _("Home") }}</a></li>
+    {% if in_path %}<li><a href="/pages/{{ in_path.id }}" lang="en" dir="ltr">{{ in_path.title }}</a></li>{% endif %}
+    <li>{% if page.kind == "area" %}{{ _("Area") }}{% elif page.kind == "concept" %}{{ _("Concept") }}{% elif page.kind == "path" %}{{ _("Path") }}{% elif page.kind == "digest" %}{{ _("Digest") }}{% elif page.kind == "answer" %}<a href="/answers">{{ _("Saved answers") }}</a>{% endif %}</li>
+  </ol>
+</nav>
+<article class="guide-page" lang="en" dir="ltr">
+  <h1 {% if page.kind == "answer" %}dir="auto"{% endif %}>{{ page.title }}</h1>
+  {% if page.kind == "digest" %}
+  <p class="faint">{% if page.meta.from_commit %}{{ page.meta.from_commit[:12] }} → {% endif %}{{ page.meta.to_commit[:12] }}</p>
+  {% elif page.kind == "answer" %}
+  <p class="faint" lang="{{ language.code }}" dir="{{ language.direction }}">{% trans when=(page.meta.get("asked_at") or "")[:10], commit=(page.meta.get("built_at") or "")[:12] %}Saved answer, asked {{ when }} at commit {{ commit }}.{% endtrans %}</p>
+  {% endif %}
+  <div class="page-status" lang="{{ language.code }}" dir="{{ language.direction }}">
+    {% if page.kind not in ("digest", "answer", "path") %}
+    <span class="pill pill-{{ status }}" data-status="{{ status }}">{% if status == "learned" %}{{ icon("check") }} {{ _("Learned") }}{% elif status == "stale" %}{{ _("Learned, but changed since") }}{% elif status == "read" %}{{ _("Read") }}{% else %}{{ _("Not read yet") }}{% endif %}</span>
+    {% if status == "unread" %}<button type="button" class="button small" data-mark-read="{{ page.id }}">{{ _("Mark read") }} <kbd>M</kbd></button>
+    {% elif status == "read" %}<button type="button" class="button small" data-mark-unread="{{ page.id }}">{{ _("Mark unread") }} <kbd>M</kbd></button>{% endif %}
+    {% else %}
+    <span class="pill" data-status="{{ status }}">{% if status == "read" %}{{ _("Read") }}{% else %}{{ _("Not read yet") }}{% endif %}</span>
+    {% if status == "unread" and page.kind == "digest" %}<button type="button" class="button small" data-mark-read="{{ page.id }}">{{ _("Mark read") }} <kbd>M</kbd></button>{% endif %}
+    {% endif %}
+    <button type="button" class="button small" data-ask-open>{{ icon("ask") }} {{ _("Ask about this page") }} <kbd>A</kbd></button>
+  </div>
+  {% if changes %}
+  <details class="changes" open lang="{{ language.code }}" dir="{{ language.direction }}">
+    <summary>{{ _("What changed since you learned this page") }}</summary>
+    <pre lang="en" dir="ltr">{% for line in changes.splitlines() %}<span class="{% if line.startswith('+') %}added{% elif line.startswith('-') %}removed{% endif %}">{{ line }}</span>
+{% endfor %}</pre>
+  </details>
+  {% endif %}
+  {% if sources_changed %}
+  <p class="notice" lang="{{ language.code }}" dir="{{ language.direction }}">{% if page.kind == "answer" %}{{ _("Files this answer was written from have changed since. Saved answers aren't rewritten; ask again for a fresh one.") }}{% else %}{{ _("Files this page was written from have changed since. It will be checked again at the next update.") }}{% endif %}</p>
+  {% endif %}
+  <div class="prose">
+  {% for segment in segments %}
+    {% if segment.kind == "html" %}
+      {{ segment.html }}
+    {% elif segment.kind == "rationale" %}
+      <aside class="rationale {{ segment.label }}">
+        <p class="rationale-label">
+          {% if segment.label == "documented" %}Documented{% if segment.citation %} · {% if segment.link %}<a href="{{ segment.link }}">{{ segment.citation }}</a>{% else %}{{ segment.citation }}{% endif %}{% endif %}
+          {% else %}Inferred · the assistant's reading of the code{% endif %}
+        </p>
+        {{ segment.html }}
+      </aside>
+    {% elif segment.kind == "diagram" %}
+      {% with diagram=segment.diagram %}{% include "diagram.html" %}{% endwith %}
+    {% endif %}
+  {% endfor %}
+  </div>
+  {% if steps %}
+  <h2 lang="{{ language.code }}" dir="{{ language.direction }}">{{ _("Steps") }}</h2>
+  <ol class="list" lang="en" dir="ltr">
+    {% for step in steps %}
+    <li><a class="grow" href="/pages/{{ step }}?path={{ page.id }}">{{ titles.get(step, step) }}</a>{% if nav.statuses.get(step) == "learned" %}<span class="pill pill-learned">{{ icon("check") }}</span>{% endif %}</li>
+    {% endfor %}
+  </ol>
+  {% endif %}
+</article>
+{% if checks %}
+<section class="checks" lang="{{ language.code }}" dir="{{ language.direction }}"
+         data-label-pass="{{ _('Passed') }}" data-label-partial="{{ _('Partly there') }}"
+         data-label-fail="{{ _('Not yet') }}" data-label-ungraded="{{ _('The answer couldn’t be graded.') }}">
+  <h2>{{ _("Check your understanding") }}</h2>
+  {% for check in checks %}
+  <form class="check" data-check="{{ check.id }}" data-page="{{ page.id }}">
+    <p class="check-question" lang="en" dir="ltr"><span>{{ check.question }}</span>{% if check.passed %}<span class="pill pill-learned">{{ icon("check") }} {{ _("Passed") }}</span>{% endif %}</p>
+    <label class="visually-hidden" for="answer-{{ check.id }}">{{ _("Your answer") }}</label>
+    <textarea id="answer-{{ check.id }}" name="answer" rows="3" maxlength="4000" required></textarea>
+    <div class="check-row">
+      <button type="submit" class="button">{{ _("Check my answer") }} {{ cost(estimates.get("grade")) }}</button>
+      <p class="feedback" data-feedback dir="auto" aria-live="polite"></p>
+    </div>
+  </form>
+  {% endfor %}
+</section>
+{% endif %}
+{% if previous or following %}
+<nav class="pager" aria-label="{{ _('In this path') }}">
+  {% if previous %}<a class="previous" href="/pages/{{ previous.id }}?path={{ in_path.id }}" data-pager-previous><small>{{ _("Previous") }} <kbd>[</kbd></small><span lang="en" dir="ltr">{{ previous.title }}</span></a>{% endif %}
+  {% if following %}<a class="next" href="/pages/{{ following.id }}?path={{ in_path.id }}" data-pager-next><small>{{ _("Next") }} <kbd>]</kbd></small><span lang="en" dir="ltr">{{ following.title }}</span></a>{% endif %}
+</nav>
+{% endif %}
+</div>
+{% endblock %}

codetrail/web/templates/progress.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% from "layout/icons.html" import icon %}
+{% block title %}{{ _("Progress") }}{% endblock %}
+{% block content %}
+<div class="wide">
+<header class="page-head">
+  <h1>{{ _("Your progress") }}</h1>
+  <p class="muted">{{ _("A page is learned when you pass its checks. When an update changes a page you learned, it shows here until you learn it again.") }}</p>
+</header>
+{% if not paths_steps and not unpathed %}
+<section class="empty">
+  <h2>{{ _("Nothing to learn yet") }}</h2>
+  <p>{{ _("Update the guide and its guided paths appear here, with what you've learned on each.") }}</p>
+  <button type="button" class="button primary" data-update-button>{{ _("Update the guide") }}</button>
+</section>
+{% endif %}
+{% for path, learned, total, steps in paths_steps %}
+<section aria-labelledby="path-{{ loop.index }}">
+  <div class="section-head">
+    <h2 id="path-{{ loop.index }}" lang="en" dir="ltr"><a href="/pages/{{ path.id }}">{{ path.title }}</a></h2>
+    <span class="faint">{% trans learned=learned, total=total %}{{ learned }} of {{ total }} learned{% endtrans %}</span>
+  </div>
+  <progress class="bar" max="{{ total or 1 }}" value="{{ learned }}" aria-labelledby="path-{{ loop.index }}"></progress>
+  <ol class="list spaced" lang="en" dir="ltr">
+    {% for step in steps %}
+    {% set state = nav.statuses.get(step.id, "unread") %}
+    <li><a class="grow" href="/pages/{{ step.id }}?path={{ path.id }}">{{ step.title }}</a>
+      <span class="pill pill-{{ state }}" lang="{{ language.code }}" dir="{{ language.direction }}">{% if state == "learned" %}{{ icon("check") }} {{ _("Learned") }}{% elif state == "stale" %}{{ _("Changed since you learned it") }}{% elif state == "read" %}{{ _("Read") }}{% else %}{{ _("Not read yet") }}{% endif %}</span></li>
+    {% endfor %}
+  </ol>
+</section>
+{% endfor %}
+{% if unpathed %}
+<section>
+  <h2>{{ _("Outside the paths") }}</h2>
+  <ul class="list" lang="en" dir="ltr">
+    {% for page in unpathed %}
+    {% set state = nav.statuses.get(page.id, "unread") %}
+    <li><a class="grow" href="/pages/{{ page.id }}">{{ page.title }}</a>
+      <span class="pill pill-{{ state }}" lang="{{ language.code }}" dir="{{ language.direction }}">{% if state == "learned" %}{{ icon("check") }} {{ _("Learned") }}{% elif state == "stale" %}{{ _("Changed since you learned it") }}{% elif state == "read" %}{{ _("Read") }}{% else %}{{ _("Not read yet") }}{% endif %}</span></li>
+    {% endfor %}
+  </ul>
+</section>
+{% endif %}
+</div>
+{% endblock %}