create-pathfinder 4.2.0 → 4.3.0

package/skills/render-artifact/engine/render/lesson.mjs

@@ -0,0 +1,294 @@
+/**
+ * The `lesson` renderer.
+ *
+ * One path serves both consumers. `learn-feature` supplies one module and
+ * `learn-codebase` supplies many, and nothing below asks which: the module list
+ * is rendered by iteration, the navigation is built from the same list, and
+ * there is no mode flag, no consumer branch, and no count-dependent layout.
+ * When 50.4 brings the multi-module case it proves this rather than adding to
+ * it.
+ *
+ * Every label here is renderer-supplied interface language. The producer names
+ * modules, concepts, steps, and questions; the renderer names the furniture
+ * around them and never touches what they assert.
+ */
+
+import { esc, domId } from "./escape.mjs";
+import { renderShell, renderNav } from "./shell.mjs";
+
+/** Renderer-owned interface language. The producer supplies none of this. */
+const UI = Object.freeze({
+  eyebrow: "Pathfinder lesson",
+  navLabel: "Modules",
+  objectives: "What you should be able to do",
+  evidence: "Evidence",
+  requires: "Builds on",
+  leadsTo: "Leads to",
+  concept: "Concept",
+  walkthrough: "Walkthrough",
+  practice: "Practice",
+  quiz: "Check your understanding",
+  showAnswer: "Show the answer",
+  hints: "Hints",
+  correct: "Correct",
+});
+
+// Note what is *not* in UI: any sentence about the artifact having been
+// checked. That claim describes the engine's own work rather than the lesson's
+// subject, so it belongs to the shell and is gated on an attestation there. A
+// kind renderer has nothing to say about whether it was validated.
+
+/**
+ * @param {object} spec a `lesson` specification
+ * @param {object} [verification] an attestation, passed through to the shell.
+ *        Absent for an ordinary render, which then makes no claim about having
+ *        been checked.
+ * @returns {string} a complete HTML document
+ */
+export function renderLesson(spec, verification) {
+  const modules = spec.lesson.modules;
+  const titleById = new Map(modules.map((module) => [module.id, module.title]));
+
+  const nav = renderNav(
+    modules.map((module) => ({ id: domId("m", module.id), label: module.title })),
+    UI.navLabel,
+  );
+
+  const body = [
+    renderLead(spec),
+    ...modules.map((module, index) => renderModule(module, index, titleById)),
+  ].join("\n");
+
+  return renderShell({
+    lang: spec.artifact.locale ?? "en",
+    title: spec.artifact.title,
+    eyebrow: UI.eyebrow,
+    description: spec.artifact.summary ?? spec.artifact.subtitle,
+    nav,
+    body,
+    source: spec.source,
+    verification,
+  });
+}
+
+function renderLead(spec) {
+  const { artifact, lesson } = spec;
+  const out = ['<div class="pf-lead">', `<h1>${esc(artifact.title)}</h1>`];
+
+  if (artifact.subtitle) {
+    out.push(`<p class="pf-lead-sub">${esc(artifact.subtitle)}</p>`);
+  }
+  if (artifact.summary) {
+    out.push(`<div class="pf-lead-summary"><p>${esc(artifact.summary)}</p></div>`);
+  }
+  if (lesson.objectives) {
+    out.push(
+      '<div class="pf-objectives">',
+      `<div class="pf-kicker">${esc(UI.objectives)}</div>`,
+      "<ul>",
+      ...lesson.objectives.map((objective) => `<li>${esc(objective)}</li>`),
+      "</ul>",
+      "</div>",
+    );
+  }
+  out.push("</div>");
+  return out.join("\n");
+}
+
+function renderModule(module, index, titleById) {
+  const id = domId("m", module.id);
+  const out = [
+    `<section class="pf-module" id="${esc(id)}" aria-labelledby="${esc(domId(id, "h"))}">`,
+    '<div class="pf-module-head">',
+    `<div class="pf-module-index">Module ${index + 1}</div>`,
+    `<h2 class="pf-module-title" id="${esc(domId(id, "h"))}">${esc(module.title)}</h2>`,
+  ];
+
+  if (module.summary) {
+    out.push(`<p class="pf-module-summary">${esc(module.summary)}</p>`);
+  }
+  if ((module.requires ?? []).length > 0) {
+    const links = module.requires.map((required) =>
+      `<a href="#${esc(domId("m", required))}">${esc(titleById.get(required))}</a>`);
+    out.push(`<p class="pf-requires">${esc(UI.requires)}: ${links.join(", ")}</p>`);
+  }
+  out.push("</div>");
+
+  for (const section of module.sections) out.push(renderSection(section));
+  out.push("</section>");
+  return out.join("\n");
+}
+
+function renderSection(section) {
+  switch (section.type) {
+    case "prose": return renderProse(section);
+    case "concept": return renderConcept(section);
+    case "code": return renderCode(section);
+    case "flow": return renderFlow(section);
+    case "quiz": return renderQuiz(section);
+    case "exercise": return renderExercise(section);
+    // Unreachable: the structural layer rejects any other type before a
+    // specification reaches the renderer. Thrown rather than rendered as a
+    // fallback, because the one thing a renderer must never do with an
+    // unsupported shape is improvise something.
+    default: throw new Error(`no renderer for section type ${JSON.stringify(section.type)}`);
+  }
+}
+
+/** The section wrapper every type shares: id, optional heading, one card. */
+function wrap(section, kicker, inner, extraClass = "") {
+  const id = domId("s", section.id);
+  const out = [`<section class="pf-section" id="${esc(id)}">`];
+  if (section.title) {
+    out.push(`<h3 class="pf-section-title" id="${esc(domId(id, "h"))}">${esc(section.title)}</h3>`);
+  }
+  out.push(`<div class="pf-card${extraClass}">`);
+  if (kicker) out.push(`<span class="pf-kicker">${esc(kicker)}</span>`);
+  out.push(inner, "</div>", "</section>");
+  return out.join("\n");
+}
+
+function paragraphs(body) {
+  return body.map((text) => `<p>${esc(text)}</p>`).join("\n");
+}
+
+function renderProse(section) {
+  return wrap(section, null, paragraphs(section.body));
+}
+
+function renderConcept(section) {
+  return wrap(
+    section,
+    UI.concept,
+    [paragraphs(section.body), renderEvidence(section.evidence)].filter(Boolean).join("\n"),
+    " pf-card--concept",
+  );
+}
+
+/**
+ * A code excerpt, emitted verbatim and escaped. The `language` names the
+ * language for the reader; it selects no highlighter, because highlighting is
+ * either a dependency or a hand-rolled tokeniser, and both are ways for the
+ * renderer to start asserting things about content it was given literally.
+ */
+function renderCode(section) {
+  const first = section.first_line ?? 1;
+  const inner = [
+    `<span class="pf-code-lang">${esc(section.language)}</span>`,
+    "<pre><code>",
+    ...section.lines.map((line, index) =>
+      `<span class="pf-code-line"><span class="pf-code-no">${first + index}</span>` +
+      `${esc(line)}</span>`),
+    "</code></pre>",
+  ].join("\n");
+
+  const out = [`<section class="pf-section" id="${esc(domId("s", section.id))}">`];
+  if (section.title) out.push(`<h3 class="pf-section-title">${esc(section.title)}</h3>`);
+  out.push('<figure class="pf-code">');
+  if (section.caption) out.push(`<figcaption>${esc(section.caption)}</figcaption>`);
+  out.push(`<div class="pf-code-frame">${inner}</div>`);
+  const evidence = renderEvidence(section.evidence);
+  if (evidence) out.push(`<div class="pf-card">${evidence}</div>`);
+  out.push("</figure>", "</section>");
+  return out.join("\n");
+}
+
+function renderFlow(section) {
+  const titleById = new Map(section.steps.map((step) => [step.id, step.title]));
+  const steps = section.steps.map((step) => {
+    const out = ["<li>", `<div class="pf-step-title">${esc(step.title)}</div>`];
+    if (step.detail) out.push(`<p class="pf-step-detail">${esc(step.detail)}</p>`);
+    if ((step.next ?? []).length > 0) {
+      const names = step.next.map((id) => esc(titleById.get(id) ?? id)).join(", ");
+      out.push(`<p class="pf-step-next">${esc(UI.leadsTo)}: ${names}</p>`);
+    }
+    const evidence = renderEvidence(step.evidence);
+    if (evidence) out.push(evidence);
+    out.push("</li>");
+    return out.join("\n");
+  });
+  return wrap(section, UI.walkthrough, `<ol class="pf-flow">\n${steps.join("\n")}\n</ol>`);
+}
+
+function renderQuiz(section) {
+  const questions = section.questions.map((question) => {
+    const name = domId("q", section.id, question.id);
+    const options = question.options.map((option, index) => {
+      const optionId = domId(name, String(index));
+      const correct = index === question.answer;
+      return [
+        `<label class="pf-option" for="${esc(optionId)}">`,
+        `<input type="radio" id="${esc(optionId)}" name="${esc(name)}" ` +
+        `value="${index}" data-pf-answer="${correct ? "correct" : "other"}">`,
+        `<span>${esc(option)}</span>`,
+        '<span class="pf-verdict" aria-live="polite"></span>',
+        "</label>",
+      ].join("");
+    });
+
+    const reveal = [
+      '<details class="pf-reveal">',
+      `<summary>${esc(UI.showAnswer)}</summary>`,
+      `<p><strong>${esc(UI.correct)}:</strong> ${esc(question.options[question.answer])}</p>`,
+      question.explanation ? `<p>${esc(question.explanation)}</p>` : null,
+      renderEvidence(question.evidence),
+      "</details>",
+    ].filter(Boolean).join("\n");
+
+    return [
+      `<fieldset class="pf-question" data-pf-question="${esc(name)}">`,
+      `<legend>${esc(question.prompt)}</legend>`,
+      `<div class="pf-options">${options.join("")}</div>`,
+      reveal,
+      "</fieldset>",
+    ].join("\n");
+  });
+
+  return wrap(section, UI.quiz, `<div class="pf-quiz">\n${questions.join("\n")}\n</div>`);
+}
+
+function renderExercise(section) {
+  const out = [paragraphs(section.body)];
+  if (section.hints) {
+    out.push([
+      '<details class="pf-reveal">',
+      `<summary>${esc(UI.hints)}</summary>`,
+      "<ol>",
+      ...section.hints.map((hint) => `<li>${esc(hint)}</li>`),
+      "</ol>",
+      "</details>",
+    ].join("\n"));
+  }
+  const evidence = renderEvidence(section.evidence);
+  if (evidence) out.push(evidence);
+  return wrap(section, UI.practice, out.join("\n"));
+}
+
+/**
+ * Citations, in one presentation used everywhere evidence appears.
+ *
+ * The shape is the same in a concept, a flow step, and a quiz answer, and it
+ * will be the same in whatever kind comes next. A reader who learns to read one
+ * of these has learnt to read all of them.
+ */
+function renderEvidence(evidence) {
+  if (!evidence || evidence.length === 0) return "";
+  return [
+    '<div class="pf-evidence">',
+    `<div class="pf-evidence-label">${esc(UI.evidence)}</div>`,
+    "<ul>",
+    ...evidence.map((citation) => {
+      const parts = [`<span class="pf-cite-path">${esc(citation.path)}</span>`];
+      if (citation.lines) {
+        parts.push(`<span class="pf-cite-lines">lines ${citation.lines[0]}` +
+          `–${citation.lines[1]}</span>`);
+      }
+      if (citation.commit) {
+        parts.push(`<span class="pf-cite-commit">@ ${esc(citation.commit)}</span>`);
+      }
+      return `<li>${parts.join("")}</li>`;
+    }),
+    "</ul>",
+    "</div>",
+  ].join("\n");
+}

package/skills/render-artifact/engine/render/shell.mjs

@@ -0,0 +1,275 @@
+/**
+ * The shared shell every artifact kind renders into.
+ *
+ * A kind supplies a lead, a navigation list, and a body. Everything else on the
+ * page — the document head, the header, the mark, the theme control, the skip
+ * link, the provenance block, and every word of interface language in them — is
+ * the renderer's, defined once here. That is what "adding a kind must not
+ * require restating the identity" means in practice: a second kind imports this
+ * function and passes strings to it.
+ *
+ * Every string the renderer emits about the artifact's *subject* comes from the
+ * specification. Every string it emits about the *interface* is written here.
+ * The renderer asserts no domain content: it never summarises, rewords, or
+ * invents a producer's claim.
+ */
+
+import { RENDERER_VERSION } from "../version.mjs";
+import { isAttestation } from "../verification.mjs";
+import { esc } from "./escape.mjs";
+import { THEME_CSS } from "./theme.mjs";
+import { BEHAVIOR_JS } from "./behavior.mjs";
+
+/**
+ * The Pathfinder mark: the blaze stack from `assets/logo.svg`, drawn in
+ * `currentColor` so it takes the accent in both themes. Inlined rather than
+ * linked — an artifact that opens from `file://` cannot fetch a logo, and a
+ * broken image in the header is worse than no header.
+ */
+const MARK = '<svg class="pf-mark" width="26" height="26" viewBox="0 0 32 32" ' +
+  'aria-hidden="true" focusable="false"><g fill="currentColor">' +
+  '<rect x="4" y="23" width="24" height="6.4" rx="3.2" transform="rotate(-3 16 26.2)"/>' +
+  '<rect x="7" y="14.6" width="18" height="6" rx="3" transform="rotate(4 16 17.6)"/>' +
+  '<rect x="9.6" y="7" width="12.8" height="5.4" rx="2.7" transform="rotate(-6 16 9.7)"/>' +
+  '<rect x="12.4" y="1" width="7.2" height="4.4" rx="2.2" transform="rotate(5 16 3.2)"/>' +
+  '</g></svg>';
+
+/** The same mark as a favicon, percent-encoded inline. No network request. */
+const FAVICON = "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20" +
+  "viewBox='0%200%2032%2032'%3E%3Cg%20fill='%23E0611F'%3E" +
+  "%3Crect%20x='4'%20y='23'%20width='24'%20height='6.4'%20rx='3.2'%20transform='rotate(-3%2016%2026.2)'/%3E" +
+  "%3Crect%20x='7'%20y='14.6'%20width='18'%20height='6'%20rx='3'%20transform='rotate(4%2016%2017.6)'/%3E" +
+  "%3Crect%20x='9.6'%20y='7'%20width='12.8'%20height='5.4'%20rx='2.7'%20transform='rotate(-6%2016%209.7)'/%3E" +
+  "%3Crect%20x='12.4'%20y='1'%20width='7.2'%20height='4.4'%20rx='2.2'%20transform='rotate(5%2016%203.2)'/%3E" +
+  "%3C/g%3E%3C/svg%3E";
+
+/**
+ * The verification sentence below is deliberately here rather than in a kind
+ * renderer: it describes what the *engine* did, not what a lesson is about, so
+ * every kind that renders into this shell says it the same way or not at all.
+ *
+ * @param {object} parts
+ * @param {string} parts.lang        BCP 47 tag from the specification, or "en"
+ * @param {string} parts.title       artifact title
+ * @param {string} parts.eyebrow     what kind of artifact this is
+ * @param {string} [parts.description] meta description
+ * @param {string} [parts.style]     a kind's own stylesheet, appended to the
+ *        shared theme inside the one `<style>` element. Absent for a kind that
+ *        needs none, and then not one byte of the document changes.
+ * @param {string} [parts.behavior]  a kind's own inline script, appended to the
+ *        shared behaviour inside the one `<script>` element, on the same terms
+ *        and for the same reason: a lesson has no graph to traverse, and
+ *        shipping it traversal code would put script in an artifact that can
+ *        never run it. Absent for a kind that needs none, and then not one
+ *        byte of the document changes.
+ * @param {string} parts.nav         rendered navigation HTML
+ * @param {string} parts.body        rendered lead and content HTML
+ * @param {object} [parts.source]    the specification's source identity, when
+ *        it declares one. A kind describing a system with no repository behind
+ *        it has none, and then no provenance row is invented for it.
+ * @param {"derived"|"proposed"} [parts.provenance] what kind of claim the
+ *        artifact makes, for the kinds that distinguish. Absent for `lesson`.
+ * @param {object} [parts.verification] an attestation, when — and only when —
+ *        this engine validated the specification and the validation passed
+ * @returns {string} a complete HTML document
+ */
+export function renderShell(parts) {
+  const lines = [
+    "<!doctype html>",
+    `<html lang="${esc(parts.lang)}" data-pf-theme="auto">`,
+    "<head>",
+    '<meta charset="utf-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1">',
+    `<title>${esc(parts.title)}</title>`,
+    parts.description
+      ? `<meta name="description" content="${esc(parts.description)}">`
+      : null,
+    `<meta name="generator" content="Pathfinder render-artifact ${esc(RENDERER_VERSION)}">`,
+    `<link rel="icon" href="${FAVICON}">`,
+    `<style>${THEME_CSS}${parts.style ? `\n${parts.style}\n` : ""}</style>`,
+    "</head>",
+    "<body>",
+    '<a class="pf-skip" href="#pf-content">Skip to content</a>',
+    '<header class="pf-header">',
+    MARK,
+    '<div class="pf-identity">',
+    `<div class="pf-eyebrow">${esc(parts.eyebrow)}</div>`,
+    `<div class="pf-title">${esc(parts.title)}</div>`,
+    "</div>",
+    // Hidden until the script un-hides it: a control that cannot work should
+    // not be offered. Without scripting the theme still follows the system.
+    '<button type="button" class="pf-theme-toggle" id="pf-theme-toggle" hidden>Theme: auto</button>',
+    "</header>",
+    '<div class="pf-layout">',
+    parts.nav,
+    '<main class="pf-main" id="pf-content">',
+    parts.body,
+    "</main>",
+    "</div>",
+    renderProvenance(parts.source, parts.verification, parts.provenance),
+    `<script>${BEHAVIOR_JS}${parts.behavior ? `\n${parts.behavior}` : ""}</script>`,
+    "</body>",
+    "</html>",
+    "",
+  ];
+  return lines.filter((line) => line !== null).join("\n");
+}
+
+/**
+ * What this artifact claims about itself, and when it is entitled to.
+ *
+ * The provenance rows are facts copied out of the specification, and only the
+ * ones it actually carries. The verification sentence is a claim about work the
+ * engine performed, so it appears only against a real attestation — which only
+ * `verification.attest()` can mint, and only from a validation that passed.
+ *
+ * Rendering without one emits no verification language whatsoever. Not a
+ * hedge, not "unverified", not a placeholder: an artifact that cannot vouch for
+ * itself says nothing on the subject, and the absence of the sentence is the
+ * signal. Saying "unverified" would still be the renderer making a claim about
+ * a process it did not observe.
+ *
+ * Even with the attestation, note what the sentences are careful not to say.
+ * Each scopes itself to what was checked deterministically and hands the
+ * question of whether the page reads well back to a person, because
+ * deterministic validation never establishes that and must never be reported as
+ * if it did. None of them says the system drawn is correct, and the `derived`
+ * one in particular does not: what was verified is that the cited material is
+ * there at the cited commit. Provenance, not truth.
+ *
+ * **Three states, three sentences, and none of them selectable.** There is no
+ * field in any specification that chooses between these, softens one, or asks
+ * for one it has not earned. The words belong to the renderer for the same
+ * reason the claim does — a producer vouching for its own work is precisely
+ * what this design exists to make impossible — and they live in the shared
+ * shell rather than in a kind renderer because they describe what the *engine*
+ * did, which is the same whatever kind rendered into it.
+ */
+
+/**
+ * `lesson`, and any kind that draws no provenance distinction. Unchanged from
+ * the wording that shipped, deliberately: the lesson artifact's language is not
+ * what this contract set out to alter.
+ */
+const CHECKED =
+  "This artifact was checked deterministically: its specification satisfied " +
+  "the schema, its references and graphs resolved, and every citation above " +
+  "was verified against the commit named here. That is what was checked. It " +
+  "is not a judgement that the page reads well or looks right — a person has " +
+  "to open it to know that.";
+
+/**
+ * `derived`: the strongest sentence the engine can write, and still not a
+ * statement that the architecture is right. Every node, edge and claim carried
+ * a citation, and each resolved — which establishes that the cited material is
+ * in the repository at that commit, not that the reading of it is correct.
+ */
+const CHECKED_DERIVED =
+  "This diagram was checked deterministically against the commit named here: " +
+  "its specification satisfied the schema, its identifiers, references and " +
+  "graphs resolved, and every component, relationship and claim in it carried " +
+  "a citation that was verified at that commit. What that establishes is that " +
+  "the cited material is there to be read. It is not a finding that the " +
+  "architecture drawn here is correct, complete, or the best reading of that " +
+  "material, and it is not a judgement that the page reads well — a person " +
+  "has to open it to know either.";
+
+/**
+ * `proposed`, with a source and at least one citation that resolved. The
+ * citations were checked; the design was not. The second half of this sentence
+ * is the load-bearing half, and it is why this state cannot borrow the wording
+ * above: a reader who met "verified against the commit" on a proposed
+ * architecture would reasonably conclude the architecture was the thing found
+ * in the repository.
+ */
+const CHECKED_PROPOSED =
+  "This diagram describes a proposed design. Its specification satisfied the " +
+  "schema, its identifiers, references and graphs resolved, and the citations " +
+  "it supplied were verified against the commit named here. Those citations " +
+  "establish that the material they name exists at that commit — they do not " +
+  "establish that the system drawn here exists. Nothing was checked about " +
+  "whether it does, and nothing here should be read as saying it does.";
+
+/**
+ * `proposed`, with no source at all. Not a verification sentence: there is
+ * nothing to verify and the artifact says so in place of claiming anything.
+ * Shown whether or not an attestation exists, because it is a fact about the
+ * specification's own shape rather than a report of work the engine did.
+ */
+const NO_SOURCE =
+  "This diagram describes an intended system. It names no repository and no " +
+  "commit, so it carries no citations and none were checked — there is " +
+  "nothing here that was verified against a source. It is a proposal, and it " +
+  "makes no claim about what currently exists.";
+
+function renderProvenance(source, verification, provenance) {
+  // Built from what is present rather than from a fixed shape. A specification
+  // with no source gets no repository row, no commit row and no timestamp —
+  // none of them invented from the working directory, the environment, or a
+  // clock, because there is no honest value for them and a plausible one would
+  // be worse than none.
+  const rows = [];
+  if (source?.repo) rows.push(["Repository", source.repo]);
+  if (source?.commit) rows.push(["Commit", source.commit]);
+  if (source?.generated_at) rows.push(["Specification generated", source.generated_at]);
+  rows.push(["Renderer", `Pathfinder render-artifact ${RENDERER_VERSION}`]);
+
+  return [
+    '<footer class="pf-provenance">',
+    "<dl>",
+    ...rows.flatMap(([term, value]) =>
+      [`<dt>${esc(term)}</dt>`, `<dd>${esc(value)}</dd>`]),
+    "</dl>",
+    provenanceNote(source, verification, provenance),
+    "</footer>",
+  ].filter((line) => line !== null).join("\n");
+}
+
+/**
+ * The one sentence this artifact is entitled to, or none.
+ *
+ * Two conditions gate every verification claim, and both are necessary. The
+ * attestation proves this engine validated the specification and that the
+ * validation passed. The resolved-citation count proves there was something to
+ * check: a specification carrying no citations passes the evidence layer by
+ * having nothing to fail, and a claim resting on that would be a stronger
+ * statement than anybody made. Vacuous success earns no sentence.
+ */
+function provenanceNote(source, verification, provenance) {
+  const caveat = (text) => `<p class="pf-caveat">${esc(text)}</p>`;
+
+  // A proposal with no repository behind it. Said plainly, and said whatever
+  // else is true, because it is a fact about the specification rather than a
+  // report of anything the engine did.
+  if (provenance === "proposed" && !source) return caveat(NO_SOURCE);
+
+  if (!isAttestation(verification)) return null;
+  if (!(verification.resolvedCitations >= 1)) return null;
+
+  if (provenance === "derived") return caveat(CHECKED_DERIVED);
+  if (provenance === "proposed") return caveat(CHECKED_PROPOSED);
+  return caveat(CHECKED);
+}
+
+/**
+ * The navigation list. One markup shape whatever the module count: a single
+ * module renders the same list a sixty-module portal does, so nothing branches
+ * on the number of entries and a later kind inherits the behaviour for free.
+ */
+export function renderNav(entries, label) {
+  if (entries.length === 0) return "";
+  return [
+    `<nav class="pf-nav" aria-label="${esc(label)}">`,
+    `<div class="pf-nav-label">${esc(label)}</div>`,
+    '<ul class="pf-nav-list">',
+    ...entries.map((entry, index) => [
+      "<li>",
+      `<a class="pf-nav-link" href="#${esc(entry.id)}" data-pf-nav="${esc(entry.id)}">`,
+      `<span class="pf-nav-index">${index + 1}</span>${esc(entry.label)}`,
+      "</a>",
+      "</li>",
+    ].join("")),
+    "</ul>",
+    "</nav>",
+  ].join("\n");
+}