Website: a Performance section from the README's table, hidden without one

The site half of #286 (feat/perf-comparison), rebased onto main: build.mjs
reads the README's `## Performance` table and the paragraphs around it into
a captioned <table> section after Parity, with a nav entry, hidden while the
README has no such table. The old numbers (2026-10-15, a loaded Mac mini) are
left out; the fresh run for #1073 adds the README section and its reports.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

website/README.md

@@ -6,7 +6,8 @@ A landing page and a documentation section in Horizon's design language (`docs/d
 `crates/horizon-theme` (generated into `src/tokens.css` by `cargo run -p xtask -- tokens`):
 Geist and Geist Mono, cool neutrals in a light and a dark appearance (the system's, or the
 toggle's) and one violet accent, numbered index lists with one-pixel rules, and short, eased
-motion. A headline and the download, then a scroll through what it is, the screenshots, the parity grid, the launcher, the patch
+motion. A headline and the download, then a scroll through what it is, the screenshots, the parity grid, the
+performance comparison, the launcher, the patch
 notes, the community links and the contributors. Plain HTML, CSS and JavaScript; no framework and
 no runtime dependencies.
 
@@ -38,7 +39,9 @@ shots/             (gitignored) full-page screenshots at 360–1920 px, a 1250×
 ## What comes from where
 
 - **Built in** (`build.mjs`): the parity table, its score, harness count and audit date,
-  all from `README.md`; the documentation pages (`/docs`) from `website/docs/`; the Discord and Sponsor links from
+  all from `README.md`; the Performance section from the README's `## Performance` table and the
+  paragraphs around it (hidden when the README has none); the documentation pages (`/docs`) from
+  `website/docs/`; the Discord and Sponsor links from
   `launcher/links.json`; the latest releases and the contributors (`/repos/ludovic111/horizon/contributors`,
   bots left out, the owner first), when GitHub answers; without an answer the build still succeeds and
   the Contributors block and its menu entries stay hidden until the page loads them. Locally these come from

website/build.mjs

@@ -110,6 +110,29 @@ const parityCells = body
 const matching = body.filter(([, score]) => Number(score) === 1).length;
 const parityHeadline = matching === body.length ? "Every subsystem matches vanilla." : `${matching} of ${body.length} subsystems match vanilla.`;
 
+// --- The performance table (optional: without one the section stays hidden) -------------
+const perf = section(readme, "Performance") ?? "";
+const perfCells = (l) => l.replace(/^\|/, "").replace(/\|\s*$/, "").split("|").map((c) => c.trim());
+const [perfHead, ...perfRows] = perf
+  .split("\n")
+  .filter((l) => /^\|/.test(l) && !/^\|\s*-/.test(l))
+  .map(perfCells);
+const [perfIntro = "", ...perfNotes] = perf
+  .split("\n")
+  .filter((l) => !/^\|/.test(l))
+  .join("\n")
+  .split(/\n\s*\n/)
+  .filter((p) => p.trim());
+const perfTable = perfHead
+  ? `<div class="perf-scroll reveal"><table class="perf-table">
+            <caption>${inline(perfHead[0])}</caption>
+            <thead><tr><td></td>${perfHead.slice(1).map((h) => `<th scope="col">${inline(h)}</th>`).join("")}</tr></thead>
+            <tbody>
+${perfRows.map(([name, ...values]) => `              <tr><th scope="row">${inline(name)}</th>${values.map((v) => `<td>${inline(v)}</td>`).join("")}</tr>`).join("\n")}
+            </tbody>
+          </table></div>`
+  : "";
+
 // --- The latest notes -------------------------------------------------
 
 // Stable releases only: betas become stable 6 hours later (docs/release-flow.md, "Channels"). Newest first by
@@ -195,6 +218,10 @@ const values = {
   PARITY_CELLS: parityCells,
   PARITY_HEADLINE: parityHeadline,
   SUBSYSTEMS: String(body.length),
+  PERF_INTRO: markdown(perfIntro),
+  PERF_TABLE: perfTable,
+  PERF_NOTES: markdown(perfNotes.join("\n\n")),
+  PERF_HIDDEN: perfTable ? "" : " hidden",
   NOTES: notesHtml,
   LAUNCHER_META: `${launcher ? `Launcher ${escape(launcherVersion(launcher.tag_name))} for` : "For"} Linux x86-64, macOS on Apple Silicon and Windows x64.`,
   DISCORD: escape(links.discord || DEFAULT_LINKS.discord),

website/src/index.html

@@ -41,6 +41,7 @@
           <a href="#about">About</a>
           <a href="#screenshots">In game</a>
           <a href="#parity">Parity</a>
+          <a href="#performance"{{PERF_HIDDEN}}>Performance</a>
           <a href="#launcher">Launcher</a>
           <a href="#patch-notes">Notes</a>
           <a href="#community">Community</a>
@@ -61,6 +62,7 @@
         <a href="#about">About</a>
         <a href="#screenshots">In game</a>
         <a href="#parity">Parity</a>
+        <a href="#performance"{{PERF_HIDDEN}}>Performance</a>
         <a href="#launcher">Launcher</a>
         <a href="#patch-notes">Patch notes</a>
         <a href="#community">Community</a>
@@ -156,10 +158,20 @@
         </div>
       </section>
 
+      <section id="performance" class="section performance" aria-labelledby="performance-title"{{PERF_HIDDEN}}>
+        <div class="container">
+          <p class="kicker reveal"><span>04</span>Performance</p>
+          <h2 id="performance-title" class="title reveal">Measured against vanilla, on the same machine.</h2>
+          <div class="prose reveal">{{PERF_INTRO}}</div>
+          {{PERF_TABLE}}
+          <div class="prose perf-notes reveal">{{PERF_NOTES}}</div>
+        </div>
+      </section>
+
       <section id="launcher" class="section launcher" aria-labelledby="launcher-title">
         <div class="container launcher-grid">
           <div class="launcher-copy">
-            <p class="kicker reveal"><span>04</span>The launcher</p>
+            <p class="kicker reveal"><span>05</span>The launcher</p>
             <h2 id="launcher-title" class="title reveal">One small app, then play</h2>
             <p class="lede reveal">The launcher installs Horizon, prepares it from your copy of the game and keeps both up to date.</p>
             <ul class="features index">
@@ -198,7 +210,7 @@
       <section id="patch-notes" class="section notes" aria-labelledby="notes-title">
         <div class="container">
           <div class="section-head">
-            <p class="kicker reveal"><span>05</span>Patch notes</p>
+            <p class="kicker reveal"><span>06</span>Patch notes</p>
             <h2 id="notes-title" class="title reveal">What changed</h2>
           </div>
           <div class="releases reveal" id="releases" aria-live="polite">
@@ -209,7 +221,7 @@
 
       <section id="community" class="section community" aria-labelledby="community-title">
         <div class="container">
-          <p class="kicker reveal"><span>06</span>Community</p>
+          <p class="kicker reveal"><span>07</span>Community</p>
           <h2 id="community-title" class="title reveal">Built in the open</h2>
           <div class="cards index">
             <a class="card row reveal" data-card data-link="discord" href="{{DISCORD}}"><span class="row-index" aria-hidden="true">01</span><span class="card-title">Discord</span><span class="card-text">Questions, bug reports and screenshots.</span><span class="card-arrow" aria-hidden="true">→</span></a>

website/src/style.css

@@ -250,6 +250,18 @@ code {
 figcaption { display: flex; gap: 12px; margin-top: 10px; font-size: var(--text-caption); color: var(--muted); }
 figcaption span { font-family: var(--mono); font-size: var(--text-micro); letter-spacing: var(--text-micro-tracking); padding-top: 1px; }
 
+/* Performance: the README's comparison table, one row per measure. */
+.performance .title { margin-bottom: 16px; }
+.perf-scroll { overflow-x: auto; margin-top: 40px; border-top: 1px solid var(--rule); }
+.perf-table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); line-height: var(--text-caption-line); }
+.perf-table caption { caption-side: top; text-align: left; padding: 14px 0; font: var(--text-micro) / var(--text-micro-line) var(--mono); letter-spacing: var(--text-micro-tracking); color: var(--muted); }
+.perf-table th, .perf-table td { padding: 14px 24px 14px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
+.perf-table thead th { font-weight: 500; color: var(--muted); white-space: nowrap; }
+.perf-table tbody th { font-weight: 400; color: var(--ink-soft); min-width: 22ch; }
+.perf-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
+.perf-table td:first-of-type { color: var(--ink); }
+.perf-notes { margin-top: 24px; font-size: var(--text-caption); color: var(--muted); }
+
 /* Parity: the count, then every subsystem as an index row. */
 .parity-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 64px; }
 .count { font-size: clamp(96px, 16vw, 220px); line-height: 0.85; letter-spacing: -0.05em; font-weight: 500; }