// 🤖 Shared script for the planet-scale operations guide. // // This file is the single source of truth for the guide's structure. It: // 1. renders the sidebar navigation on every page (from the PAGES list below), // 2. renders the previous / next links at the bottom of every page, // 3. renders the "you are here" system map at the top of every page, // 4. adds a small anchor link to every heading that has an id. // // To add a page: create the HTML file (copy an existing page as a template), // then add one entry to PAGES below, in reading order. Nothing else to update — // every page's sidebar and pager follow this list automatically. // // All markup injected here is built from static, in-code strings only (the // repo rule: never innerHTML untrusted content). "use strict"; const PAGES = [ { file: "index.html", num: "01", short: "Overview", title: "Overview and orientation" }, { file: "router.html", num: "02", short: "The router", title: "The router: the front door of every box" }, { file: "processes.html", num: "03", short: "Processes on a box", title: "Everything that runs on a box" }, { file: "deploys.html", num: "04", short: "Deploys and updates", title: "Installing and updating the software" }, { file: "spaces.html", num: "05", short: "Creating spaces", title: "Creating and removing chat spaces" }, { file: "hibernation.html", num: "06", short: "Hibernation", title: "Hibernation: how idle spaces sleep in object storage" }, { file: "mesh.html", num: "07", short: "The mesh", title: "The mesh: running more than one box" }, { file: "operations.html", num: "08", short: "Day-to-day operations", title: "Day-to-day operations and checks" }, { file: "dev.html", num: "09", short: "The proving ground", title: "The proving ground: the dev mesh" }, { file: "reference.html", num: "10", short: "Reference", title: "Complete reference: commands, files, variables" }, ]; function currentPage() { const explicit = document.body.dataset.page; if (explicit) return explicit; const leaf = location.pathname.split("/").pop(); return leaf === "" ? "index.html" : leaf; } // ---- sidebar ---- function renderSidebar() { const nav = document.querySelector("nav.side"); if (!nav) return; const here = currentPage(); const items = PAGES.map(p => { const current = p.file === here ? ' aria-current="page"' : ""; return `

${p.num}${p.short}

`; }).join(""); nav.innerHTML = `

Running the fleet

` + `

An operator’s guide to the planet-scale system

` + `

${items}`; nav.setAttribute("aria-label", "Guide contents"); } // ---- previous / next pager + colophon ---- function renderPager() { const wrap = document.querySelector("main.content .wrap"); if (!wrap) return; const here = currentPage(); const idx = PAGES.findIndex(p => p.file === here); if (idx === -1) return; const prev = PAGES[idx - 1]; const next = PAGES[idx + 1]; const pager = document.createElement("footer"); pager.className = "pager"; let html = ""; if (prev) html += `Previous${prev.num} · ${prev.short}`; if (next) html += `Next${next.num} · ${next.short}`; pager.innerHTML = html; wrap.appendChild(pager); const colophon = document.createElement("footer"); colophon.className = "colophon"; colophon.innerHTML = `\u{1F916} This guide was written by an LLM from the code and design documents in this repository. ` + `The code is the source of truth; if the guide and the code disagree, trust the code and please fix the guide. ` + `How to update it: maintaining this guide. ` + `Deeper design rationale: docs/planet-scale.md and docs/instance-router.md.`; wrap.appendChild(colophon); } // ---- heading anchors ---- function renderHeadingAnchors() { document.querySelectorAll("h2[id], h3[id]").forEach(h => { const a = document.createElement("a"); a.className = "hlink"; a.href = "#" + h.id; a.textContent = "#"; a.setAttribute("aria-label", "Link to this section"); h.appendChild(a); }); } // ---- the system map (the "you are here" diagram) ---- // // One SVG, drawn identically on every page; the page highlights its own // component(s) via

. // Node keys: members, router, instances, services, control, updater, // bucket, backup, peer. function sysmapSVG(highlights) { const hl = key => highlights.includes(key) ? ' class="here"' : ""; return ` `; } function renderSysmap() { const holder = document.querySelector(".sysmap"); if (!holder) return; const highlights = (holder.dataset.highlight || "").split(/\s+/).filter(Boolean); holder.innerHTML = sysmapSVG(highlights); } document.addEventListener("DOMContentLoaded", () => { renderSidebar(); renderSysmap(); renderHeadingAnchors(); renderPager(); });