rdstudio 0.2.0__py3-none-any.whl

rdstudio/web/js/knowledge.js

@@ -0,0 +1,212 @@
+// Knowledge tab: directory tree, concept and directory pages, frontmatter panel.
+
+import { store, body, learner, record } from "./data.js";
+import { hasRequires, prerequisites, depthLabel } from "./learn.js";
+import { render, wireAnchors } from "./markdown.js";
+import { h, conceptHref, dirHref, trustState, trustBadge, timeEl, titleCase, fmtDateTime } from "./util.js";
+
+const openDirs = new Set(JSON.parse(sessionStorage.getItem("rdstudio.openDirs") || "[]"));
+let filterText = "";
+
+function saveOpenDirs() {
+  try { sessionStorage.setItem("rdstudio.openDirs", JSON.stringify([...openDirs])); } catch { /* private mode */ }
+}
+
+function dirLabel(id) {
+  if (!id) return store.site.title || "Knowledge";
+  const name = id.split("/").pop();
+  return titleCase(name.replace(/[-_]/g, " "));
+}
+
+// ------------------------------------------------------------------ tree
+
+function matches(c) {
+  if (!filterText) return true;
+  const q = filterText.toLowerCase();
+  return [c.title, c.description, c.type, ...(c.tags || [])].join(" ").toLowerCase().includes(q);
+}
+
+function dirHasMatch(id) {
+  const d = store.tree[id];
+  if (!d) return false;
+  return d.concepts.some((cid) => matches(store.concepts.get(cid))) || d.children.some(dirHasMatch);
+}
+
+function treeList(id, current) {
+  const d = store.tree[id];
+  const items = [];
+  for (const child of d.children) {
+    if (filterText && !dirHasMatch(child)) continue;
+    const open = filterText ? true : openDirs.has(child) || (current && (current + "/").startsWith(child + "/"));
+    const details = h("details", { open },
+      h("summary", { class: `dir${current === child ? " current" : ""}` },
+        h("svg:svg", { class: "twisty", width: 12, height: 12, viewBox: "0 0 12 12", "aria-hidden": "true" },
+          h("svg:path", { d: "M4 2l4 4-4 4", fill: "none", stroke: "currentColor", "stroke-width": 1.6 })),
+        h("a", { href: dirHref(child) }, dirLabel(child))),
+      treeList(child, current));
+    details.addEventListener("toggle", () => {
+      if (filterText) return;
+      details.open ? openDirs.add(child) : openDirs.delete(child);
+      saveOpenDirs();
+    });
+    items.push(h("li", {}, details));
+  }
+  for (const cid of d.concepts) {
+    const c = store.concepts.get(cid);
+    if (!c || !matches(c) || (cid === d.overview && !filterText)) continue;
+    items.push(h("li", { class: "item" },
+      h("a", { href: conceptHref(cid), "aria-current": current === "k:" + cid ? "page" : null, title: c.description || c.title },
+        h("span", { class: `dot ${trustState(c)}` }), h("span", {}, c.title))));
+  }
+  return h("ul", {}, items);
+}
+
+function renderTree(aside, current) {
+  const input = h("input", {
+    class: "filter", type: "search", placeholder: "Filter by title, type or tag", value: filterText,
+    "aria-label": "Filter knowledge",
+  });
+  const list = h("div");
+  const draw = () => list.replaceChildren(
+    h("a", { class: "root-link", href: "#/" }, dirLabel("")),
+    treeList("", current));
+  input.addEventListener("input", () => { filterText = input.value.trim(); draw(); });
+  aside.replaceChildren(input, list);
+  draw();
+}
+
+// ------------------------------------------------------------ frontmatter
+
+const HIDDEN_KEYS = new Set(["title", "description"]);
+
+function fmValue(value) {
+  if (value === null || value === undefined) return "";
+  if (Array.isArray(value)) {
+    if (value.every((v) => typeof v !== "object" || v === null)) {
+      return h("span", {}, value.map((v) => h("span", { class: "chip" }, String(v))));
+    }
+    return h("ul", {}, value.map((v) => h("li", {}, fmValue(v))));
+  }
+  if (typeof value === "object") {
+    // Actor events ({by, at}) read best as "who" over "when".
+    if ("by" in value && Object.keys(value).every((k) => k === "by" || k === "at")) {
+      return h("span", {}, String(value.by), value.at ? h("span", { class: "sub" }, fmtDateTime(value.at)) : "");
+    }
+    return h("ul", {}, Object.entries(value).map(([k, v]) => h("li", {}, h("span", { class: "sub" }, k), fmValue(v))));
+  }
+  const s = String(value);
+  if (/^https?:\/\//.test(s)) return h("a", { href: s, target: "_blank", rel: "noopener" }, s);
+  if (/^\d{4}-\d{2}-\d{2}T/.test(s)) return h("span", { title: s }, fmtDateTime(s));
+  return s;
+}
+
+function frontmatterTable(meta) {
+  const rows = Object.entries(meta).filter(([k]) => !HIDDEN_KEYS.has(k));
+  return h("table", { class: "fm" }, h("tbody", {}, rows.map(([k, v]) => h("tr", {}, h("th", { scope: "row" }, k), h("td", {}, fmValue(v))))));
+}
+
+function metaPanel(c) {
+  const narrow = matchMedia("(max-width: 760px)").matches;
+  const outline = c.headings.filter((x) => x.level <= 3);
+  const back = c.backlinks.map((id) => store.concepts.get(id)).filter(Boolean);
+  const out = c.links.filter((l) => l.kind === "concept" && !l.broken).map((l) => store.concepts.get(l.target)).filter(Boolean);
+  const uniq = (list) => [...new Map(list.map((x) => [x.id, x])).values()];
+  return h("aside", { class: "meta", "aria-label": "Details" },
+    h("div", { class: "meta-inner" },
+      h("h2", {}, "Trust"),
+      trustBadge(c),
+      c.verification_stale ? h("p", { class: "section-note" }, "Meaningfully edited after the last human review.") : "",
+      h("details", { class: "fm-wrap", open: !narrow },
+        h("summary", {}, "Frontmatter"),
+        h("h2", {}, "Frontmatter"),
+        frontmatterTable(c.meta)),
+      outline.length > 1 ? [h("h2", {}, "On this page"),
+        h("ul", { class: "outline" }, outline.map((x) => h("li", { class: `l${x.level}` },
+          h("a", { href: "javascript:void(0)", "data-anchor": "h-" + x.slug }, x.text))))] : "",
+      studyPath(c),
+      back.length ? [h("h2", {}, "Linked from"), linkList(uniq(back))] : "",
+      out.length ? [h("h2", {}, "Links to"), linkList(uniq(out))] : ""));
+}
+
+// What to read first: everything this note requires, in reading order.
+function studyPath(c) {
+  if (!hasRequires()) return "";
+  const before = prerequisites(c.id);
+  if (!before.length) return [h("h2", {}, "Study path"), h("p", { class: "section-note" }, "Nothing is marked as required before this note.")];
+  const list = h("ol", { class: "linklist study" }, before.map((p) => h("li", {}, h("a", { href: conceptHref(p.id) }, p.title), depthLabel(p))));
+  return [
+    h("h2", {}, "Study path"),
+    h("p", { class: "section-note" }, `${before.length} ${before.length === 1 ? "note comes" : "notes come"} before this one. `,
+      h("a", { href: "#/path/" + encodeURIComponent(c.id) }, "Show on map")),
+    before.length > 8 ? h("details", {}, h("summary", {}, "In reading order"), list) : list,
+  ];
+}
+
+// Opening a note is recorded once per version per half hour, when the record is on.
+function noteSeen(c) {
+  if (!learner.enabled) return;
+  const recent = learner.events.findLast((e) => e.event === "seen" && e.concept === c.id);
+  if (recent && recent.hash === c.hash && Date.now() - Date.parse(recent.at) < 30 * 60e3) return;
+  record({ event: "seen", concept: c.id });
+}
+
+function linkList(concepts) {
+  return h("ul", { class: "linklist" }, concepts.map((c) => h("li", {}, h("a", { href: conceptHref(c.id) }, c.title))));
+}
+
+// ------------------------------------------------------------------ pages
+
+function layout(current, main, meta) {
+  const aside = h("aside", { class: "tree", "aria-label": "Contents" });
+  renderTree(aside, current);
+  const wrap = h("div", { class: `kn${meta ? "" : " no-meta"}` }, aside, main, meta || "");
+  wireAnchors(wrap);
+  return wrap;
+}
+
+export async function conceptView(id) {
+  const c = store.concepts.get(id);
+  if (!c) return missing(id);
+  const text = await body(id);
+  const article = h("article", { class: "doc" },
+    h("header", { class: "doc-head" },
+      h("p", { class: "doc-kind" },
+        h("span", {}, c.type || "Concept"),
+        c.status !== "stable" ? h("span", { class: "chip" }, c.status) : "",
+        c.generated_at ? h("span", {}, "Updated ", timeEl(c.generated_at)) : ""),
+      h("h1", {}, c.title),
+      c.description ? h("p", { class: "description" }, c.description) : ""),
+    h("div", { class: "prose", html: render(text, { dir: c.directory }) }));
+  document.title = `${c.title} · ${store.site.title}`;
+  noteSeen(c);
+  return layout("k:" + id, article, metaPanel(c));
+}
+
+export async function dirView(id) {
+  const d = store.tree[id];
+  if (!d) return missing(id + "/");
+  const parts = [];
+  const overview = d.overview ? store.concepts.get(d.overview) : null;
+  if (overview) {
+    const text = await body(overview.id);
+    parts.push(h("header", { class: "doc-head" },
+      h("p", { class: "doc-kind" }, h("a", { href: conceptHref(overview.id) }, "Overview"), overview.generated_at ? h("span", {}, "Updated ", timeEl(overview.generated_at)) : ""),
+      h("h1", {}, id ? dirLabel(id) : overview.title),
+      overview.description ? h("p", { class: "description" }, overview.description) : ""));
+    parts.push(h("div", { class: "prose" , html: render(text, { dir: overview.directory }) }));
+    parts.push(h("hr"));
+  } else {
+    parts.push(h("header", { class: "doc-head" }, h("p", { class: "doc-kind" }, "Directory"), h("h1", {}, dirLabel(id))));
+  }
+  // The generated OKF index, minus its frontmatter.
+  const index = d.index.replace(/^---\n[\s\S]*?\n---\n/, "");
+  parts.push(h("div", { class: "prose index", html: render(index, { dir: id }) }));
+  document.title = `${dirLabel(id)} · ${store.site.title}`;
+  return layout(id, h("article", { class: "doc" }, parts), null);
+}
+
+function missing(what) {
+  return layout(null, h("article", { class: "doc" },
+    h("header", { class: "doc-head" }, h("p", { class: "doc-kind" }, "Not found"), h("h1", {}, what)),
+    h("div", { class: "prose" }, h("p", {}, "Nothing is written here yet. The link may point at knowledge that has not been recorded, or the file was moved."))), null);
+}

rdstudio/web/js/layout-worker.js

@@ -0,0 +1,15 @@
+// Works out map layouts off the main thread (see layout.js).
+
+import { layoutPositions } from "./layout.js";
+
+const ready = import("../vendor/d3.min.js"); // sets the global d3 that layout.js uses
+
+self.onmessage = async ({ data }) => {
+  try {
+    await ready;
+    const xyr = layoutPositions(data.model, data.o);
+    self.postMessage({ id: data.id, xyr }, [xyr.buffer]);
+  } catch (err) {
+    self.postMessage({ id: data.id, error: String(err?.message || err) });
+  }
+};

rdstudio/web/js/layout.js

@@ -0,0 +1,226 @@
+// Map layout: where each folder and note sits, in layout units. Runs in a Web
+// Worker (layout-worker.js) so the page stays responsive; the result is cached
+// in this browser by what the map contains and the layout settings, so a
+// reload places everything at once. Uses the global d3.
+
+/* global d3 */
+
+export const SIZE = 1000; // layout units
+// Bump when the algorithm changes, so cached layouts are not reused.
+const VERSION = 2;
+// The settings that change positions (the rest only change drawing).
+export const LAYOUT_KEYS = ["room", "spread", "outward", "spacing", "margin"];
+const CACHE = "rdstudio.layout";
+
+// What the layout needs from the map model, as plain data a worker can receive.
+export function plainModel(model) {
+  const strip = (n) => (n.kind === "dir"
+    ? { kind: "dir", id: n.id, ref: n.ref, children: n.children.map(strip) }
+    : { kind: n.kind, id: n.id, ref: n.ref, weight: n.weight });
+  return { root: strip(model.root), edges: model.edges };
+}
+
+function hierarchy(root) {
+  return d3.hierarchy(root, (d) => (d.kind === "dir" ? d.children : null))
+    .sum((d) => (d.kind === "concept" ? d.weight : d.children.length ? 0 : 1));
+}
+
+// The quick starting arrangement (circle packing), with an index and colour
+// groups: a usable map while the full layout is worked out.
+export function start(modelRoot) {
+  const root = hierarchy(modelRoot);
+  d3.pack().size([SIZE, SIZE]).padding((d) => (d.depth === 0 ? 10 : 6))(root);
+  const byId = new Map();
+  root.each((n) => byId.set(n.data.id, n));
+  const groups = [...new Set((root.children || []).map((c) => c.data.ref))].sort();
+  root.each((n) => {
+    const top = n.ancestors().reverse()[1];
+    n.group = top ? (top.data.kind === "dir" ? groups.indexOf(top.data.ref) : -1) : -1;
+  });
+  return { root, byId };
+}
+
+// Positions as [x, y, r] per node, in the order root.each() visits them.
+export function positions(root) {
+  const out = [];
+  root.each((n) => out.push(n.x, n.y, n.r));
+  return Float64Array.from(out);
+}
+
+export function applyPositions(root, xyr) {
+  let i = 0;
+  root.each((n) => { n.x = xyr[i++]; n.y = xyr[i++]; n.r = xyr[i++]; });
+}
+
+// The full layout, from a plain model. Returns positions.
+export function layoutPositions(model, o) {
+  const { root, byId } = start(model.root);
+  arrange(root, byId, model.edges, o);
+  return positions(root);
+}
+
+// Top down: give each folder's contents room, then spread them out evenly
+// inside its wall, keeping linked items near each other and drawing items
+// towards the side where their links leave the folder.
+function arrange(root, byId, edges, o) {
+  const leafEdges = edges.map(([a, b]) => [byId.get("c:" + a), byId.get("c:" + b)]).filter(([a, b]) => a && b);
+  // A link matters only to the folders that contain one of its ends, so each
+  // folder looks at those links alone (in their original order).
+  const linksIn = new Map();
+  for (const e of leafEdges) {
+    const folders = new Set([...e[0].ancestors().slice(1), ...e[1].ancestors().slice(1)]);
+    for (const f of folders) {
+      if (!linksIn.has(f)) linksIn.set(f, []);
+      linksIn.get(f).push(e);
+    }
+  }
+  const moveTree = (n, dx, dy) => n.each((d) => { d.x += dx; d.y += dy; });
+  const scaleTree = (n, k) => n.each((d) => { d.x = n.x + (d.x - n.x) * k; d.y = n.y + (d.y - n.y) * k; d.r *= k; });
+  const childOf = (folder, n) => n.ancestors().find((a) => a.parent === folder);
+
+  function place(folder) {
+    const kids = folder.children;
+    if (!kids) return;
+    const unit = folder.r / (SIZE / 2); // settings are given for the whole map; scale them to this folder
+    const inner = folder.depth ? folder.r - Math.min(o.margin * unit, folder.r * 0.25) : folder.r;
+    const gap = o.spacing * unit;
+    const area = kids.reduce((s, c) => s + c.r * c.r, 0) || 1;
+    const k = Math.min(1, Math.sqrt((o.room * inner * inner) / area));
+    for (const c of kids) {
+      scaleTree(c, k);
+      moveTree(c, folder.x + (c.x - folder.x) * (inner / folder.r) - c.x, folder.y + (c.y - folder.y) * (inner / folder.r) - c.y);
+    }
+    if (kids.length > 1) {
+      const nodes = kids.map((c) => ({ c, x: c.x - folder.x, y: c.y - folder.y, r: c.r, pull: [0, 0, 0] }));
+      const index = new Map(kids.map((c, i) => [c, i]));
+      const links = [];
+      for (const [u, v] of linksIn.get(folder) || []) {
+        const cu = childOf(folder, u), cv = childOf(folder, v);
+        if (cu && cv && cu !== cv) links.push({ source: index.get(cu), target: index.get(cv) });
+        // A link leaving the folder pulls its end towards that side.
+        for (const [inside, outside, other] of [[cu, cv, v], [cv, cu, u]]) {
+          if (!inside || outside) continue;
+          const dx = other.x - folder.x, dy = other.y - folder.y, d = Math.hypot(dx, dy) || 1;
+          const pull = nodes[index.get(inside)].pull;
+          pull[0] += dx / d; pull[1] += dy / d; pull[2] += 1;
+        }
+      }
+      for (const nd of nodes) {
+        if (nd.pull[2]) {
+          const d = Math.hypot(nd.pull[0], nd.pull[1]) || 1;
+          nd.tx = (nd.pull[0] / d) * inner * 0.7;
+          nd.ty = (nd.pull[1] / d) * inner * 0.7;
+        }
+      }
+      const sim = d3.forceSimulation(nodes).stop()
+        .force("collide", d3.forceCollide((d) => d.r + gap / 2).strength(1).iterations(2))
+        .force("charge", d3.forceManyBody().strength(-o.spread * inner * 0.15))
+        .force("link", d3.forceLink(links).distance((l) => l.source.r + l.target.r + gap * 1.5).strength(0.04))
+        .force("x", d3.forceX((d) => d.tx ?? 0).strength((d) => (d.tx !== undefined ? 0.04 * o.outward : 0.03)))
+        .force("y", d3.forceY((d) => d.ty ?? 0).strength((d) => (d.ty !== undefined ? 0.04 * o.outward : 0.03)));
+      const contain = () => {
+        for (const nd of nodes) { // stay inside the wall
+          const d = Math.hypot(nd.x, nd.y), max = Math.max(0, inner - nd.r - gap / 4);
+          if (d > max) { nd.x *= max / d; nd.y *= max / d; }
+        }
+      };
+      for (let i = 0; i < 240; i++) { sim.tick(); contain(); }
+      // Finish by separating anything still overlapping, without other forces.
+      for (let round = 0; round < 80; round++) {
+        let moved = false;
+        for (let i = 0; i < nodes.length; i++) {
+          for (let j = i + 1; j < nodes.length; j++) {
+            const a = nodes[i], b = nodes[j];
+            const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1e-6, want = a.r + b.r + gap;
+            if (d < want) {
+              const push = (want - d) / 2;
+              a.x -= (dx / d) * push; a.y -= (dy / d) * push;
+              b.x += (dx / d) * push; b.y += (dy / d) * push;
+              moved = true;
+            }
+          }
+        }
+        contain();
+        if (!moved) break;
+      }
+      for (const nd of nodes) moveTree(nd.c, folder.x + nd.x - nd.c.x, folder.y + nd.y - nd.c.y);
+    }
+    kids.forEach(place);
+  }
+  place(root);
+}
+
+// ------------------------------------------------------------ cache
+
+// cyrb53: a fast 53-bit string hash, plenty to tell layouts apart.
+function hash(str) {
+  let h1 = 0xdeadbeef, h2 = 0x41c6ce57;
+  for (let i = 0; i < str.length; i++) {
+    const ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+  return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(36);
+}
+
+export function layoutKey(plain, o) {
+  return hash(JSON.stringify([VERSION, LAYOUT_KEYS.map((k) => o[k]), plain]));
+}
+
+export function cached(key, count) {
+  try {
+    const hit = JSON.parse(localStorage.getItem(CACHE) || "null");
+    return hit?.key === key && hit.xyr.length === count * 3 ? Float64Array.from(hit.xyr) : null;
+  } catch {
+    return null;
+  }
+}
+
+export function remember(key, xyr) {
+  try {
+    localStorage.setItem(CACHE, JSON.stringify({ key, xyr: Array.from(xyr, (v) => Math.round(v * 1000) / 1000) }));
+  } catch { /* storage full or unavailable: lay out again next time */ }
+}
+
+// ------------------------------------------------------------ worker
+
+let worker = null, workerFailed = false, nextId = 0;
+const waiting = new Map();
+
+function getWorker() {
+  if (worker || workerFailed) return worker;
+  try {
+    worker = new Worker(new URL("./layout-worker.js", import.meta.url), { type: "module" });
+    worker.onmessage = ({ data }) => {
+      const w = waiting.get(data.id);
+      waiting.delete(data.id);
+      if (!w) return;
+      if (data.error) w.reject(new Error(data.error));
+      else w.resolve(data.xyr);
+    };
+    worker.onerror = (event) => {
+      event.preventDefault?.();
+      workerFailed = true;
+      worker = null;
+      for (const w of waiting.values()) w.reject(new Error("layout worker failed"));
+      waiting.clear();
+    };
+  } catch {
+    workerFailed = true;
+  }
+  return worker;
+}
+
+// The full layout's positions, worked out off the main thread where possible.
+export function computeLayout(plain, o) {
+  const settings = Object.fromEntries(LAYOUT_KEYS.map((k) => [k, o[k]]));
+  const w = getWorker();
+  if (!w) return Promise.resolve(layoutPositions(plain, settings));
+  const id = ++nextId;
+  return new Promise((resolve, reject) => {
+    waiting.set(id, { resolve, reject });
+    w.postMessage({ id, model: plain, o: settings });
+  }).catch(() => layoutPositions(plain, settings)); // no worker after all: do it here
+}

rdstudio/web/js/learn.js

@@ -0,0 +1,83 @@
+// Learn tab: reading order from `requires` links, and the private learner record.
+
+import { store, learner } from "./data.js";
+import { h, conceptHref, titleCase } from "./util.js";
+
+export function hasRequires() {
+  for (const c of store.concepts.values()) if (c.requires?.length) return true;
+  return false;
+}
+
+// Everything `id` requires, directly or through a chain, in reading order.
+export function prerequisites(id) {
+  const seen = new Set();
+  const todo = [...(store.concepts.get(id)?.requires || [])];
+  while (todo.length) {
+    const v = todo.pop();
+    if (seen.has(v) || !store.concepts.has(v)) continue;
+    seen.add(v);
+    todo.push(...store.concepts.get(v).requires);
+  }
+  seen.delete(id);
+  return [...seen].map((x) => store.concepts.get(x)).sort((a, b) => a.order - b.order);
+}
+
+function folderLabel(dir) {
+  return dir ? dir.split("/").map((p) => titleCase(p.replace(/[-_]/g, " "))).join(" / ") : "Top level";
+}
+
+export function depthLabel(c) {
+  return h("span", { class: "depth", title: "The longest chain of prerequisites below this note" },
+    c.depth ? `level ${c.depth}` : "start");
+}
+
+function readingOrder() {
+  const notes = [...store.concepts.values()].filter((c) => c.type !== "Tour").sort((a, b) => a.order - b.order);
+  const list = h("ol", { class: "reading" });
+  let dir = null;
+  for (const c of notes) {
+    if (c.directory !== dir) {
+      dir = c.directory;
+      list.append(h("li", { class: "folder", "aria-hidden": "true" }, folderLabel(dir)));
+    }
+    list.append(h("li", { class: "step", value: c.order + 1 },
+      h("a", { href: conceptHref(c.id), title: c.description || c.title }, c.title),
+      depthLabel(c),
+      c.depth ? h("a", { class: "path-link", href: "#/path/" + encodeURIComponent(c.id), title: `Study path to ${c.title} on the map` }, "path") : ""));
+  }
+  return list;
+}
+
+function recordSection() {
+  if (store.site.static) {
+    return h("p", { class: "section-note" }, "This is an exported snapshot, so nothing you do here is recorded.");
+  }
+  if (!learner.enabled) {
+    return [
+      h("p", { class: "section-note" },
+        "Off. When it is on, rdstudio keeps a private record of what you study in this project, outside the repository, for the exercises and review to come. To turn it on, add this to ~/.config/rdstudio/config.toml and restart rdstudio serve:"),
+      h("pre", {}, "[learner]\nenabled = true"),
+    ];
+  }
+  return h("p", { class: "section-note" },
+    `On. ${learner.events.length} ${learner.events.length === 1 ? "event" : "events"}, stored privately in `,
+    h("code", {}, learner.dir), ". Only you see it; it is never part of the project or an export.");
+}
+
+export function learnView() {
+  document.title = `Learn · ${store.site.title}`;
+  const page = h("div", { class: "page" }, h("h1", {}, "Learn"));
+  page.append(h("p", { class: "lede" },
+    "A reading order for this knowledge base, from the links rated requires: each note comes after everything it needs."));
+  page.append(h("h2", { class: "section-h" }, "Reading order"));
+  if (hasRequires()) {
+    page.append(h("p", { class: "section-note" },
+      "Notes stay with their folder where they can. The level is the longest chain of prerequisites below a note; path shows that chain on the map."),
+    readingOrder());
+  } else {
+    page.append(h("p", { class: "empty" },
+      "No links are rated requires yet, so there is no order to give. Rate a link by giving it the title \"requires\", as in [Topology](/topology.md \"requires\")."));
+  }
+  page.append(h("h2", { class: "section-h" }, "Your learner record"), recordSection());
+  return page;
+}