refactor: update navigation and terminal components across documentation

- Replaced checkbox-based navigation toggle with button for improved accessibility and usability in FAQ, Install, Keyboard, and Privacy pages.
- Added JavaScript for mobile navigation toggle functionality.
- Updated terminal command displays to use custom <hfo-terminal> component for consistency and improved readability.
- Included necessary scripts for navigation and terminal functionality in relevant HTML files.

Author: carrilloapps

.github/workflows/release.yml

@@ -1,5 +1,15 @@
 name: Release
 
+# This workflow ONLY fires when a version tag (v*.*.*) is pushed. It does
+# NOT run on pushes to main, PRs, or any other branch activity. The
+# `if: startsWith(github.ref, 'refs/tags/v')` guard on every job makes it
+# impossible to trigger binary uploads from a non-tag ref, even via a
+# manual `workflow_dispatch`.
+#
+# npm publish is NOT automated here — the maintainer runs `npm publish`
+# locally after the tag is pushed. Rationale: publishing is infrequent,
+# requires a human-held token, and the additional CI step added little
+# value over a local run that also verifies the tarball by eye.
 on:
   push:
     tags: ['v*.*.*']
@@ -10,36 +20,13 @@ permissions:
 
 jobs:
   # -----------------------------------------------------------------------
-  # Primary distribution channel. npm publish runs on Linux only; the
-  # published package is cross-OS (pure Node + @pkg of ink).
-  # -----------------------------------------------------------------------
-  npm-publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: pnpm
-          registry-url: https://registry.npmjs.org
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm typecheck
-      - run: pnpm lint
-      - run: pnpm test
-      - run: pnpm build
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-  # -----------------------------------------------------------------------
-  # Secondary distribution: standalone binaries per OS. Uses @yao-pkg/pkg
-  # which has known rough edges with ESM-first deps (ink, execa). The job
-  # is `continue-on-error: true` so a partial failure here never blocks the
-  # npm release — users can always fall back to `npm i -g hfo-cli`.
+  # Standalone binaries per OS. Uses @yao-pkg/pkg which has known rough
+  # edges with ESM-first deps (ink, execa). The job is
+  # `continue-on-error: true` so a partial failure here never blocks the
+  # release — users can always fall back to `npm i -g hfo-cli`.
   # -----------------------------------------------------------------------
   binary:
-    needs: npm-publish
+    if: startsWith(github.ref, 'refs/tags/v')
     continue-on-error: true
     strategy:
       fail-fast: false

docs/404.html

@@ -17,6 +17,7 @@
 <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32" />
 <link rel="icon" href="/assets/logo-mark.svg" type="image/svg+xml" />
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
+<script src="/assets/terminal.js" defer></script>
 
 <style>
   :root {
@@ -136,16 +137,10 @@ <h1>Page not found</h1>
     <a href="https://github.com/carrilloapps/hfo" rel="noreferrer noopener">GitHub<small>Source &amp; releases</small></a>
   </nav>
 
-  <div class="terminal">
-    <div class="terminal-bar">
-      <span class="dot red" aria-hidden="true"></span>
-      <span class="dot yellow" aria-hidden="true"></span>
-      <span class="dot green" aria-hidden="true"></span>
-      <span style="margin-left:auto;margin-right:auto;">bash</span>
-    </div>
-<pre><code><span class="tok-comment"># ...or just install it and carry on:</span>
-<span class="tok-prompt">$</span> <span class="tok-cmd">curl</span> -fsSL https://hfo.carrillo.app/install.sh | <span class="tok-cmd">sh</span></code></pre>
-  </div>
+  <hfo-terminal title="bash">
+<span class="tok-comment"># ...or just install it and carry on:</span>
+<span class="tok-prompt">$</span> <span class="tok-cmd">curl</span> -fsSL https://hfo.carrillo.app/install.sh | <span class="tok-cmd">sh</span>
+</hfo-terminal>
 </main>
 
 </body>

docs/assets/nav.js

@@ -0,0 +1,58 @@
+/*
+ * Minimal nav-toggle + one-shot copy-button handler for hfo sub-pages.
+ * Shared across /install, /cli, /keyboard, /privacy, /faq, /benchmarks.
+ *
+ * Nav toggle
+ *   • Mobile-only (desktop hides .nav-toggle via CSS).
+ *   • Uses a proper <button> so no ghost form controls render on desktop.
+ *   • Flips aria-expanded and toggles .is-open on the <nav>.
+ *   • Closes on outside-click and Escape.
+ *
+ * Copy buttons
+ *   • Any element with [data-copy] inside the page copies its attribute
+ *     to the clipboard on click and flashes "copied" for 1.2 s. Works
+ *     for the legacy .terminal-copy button and the new <hfo-terminal>.
+ */
+
+(function wireNav() {
+  const btn = document.getElementById('nav-toggle');
+  const nav = document.getElementById('site-nav');
+  if (!btn || !nav) return;
+
+  const close = () => {
+    btn.setAttribute('aria-expanded', 'false');
+    nav.classList.remove('is-open');
+  };
+  const open = () => {
+    btn.setAttribute('aria-expanded', 'true');
+    nav.classList.add('is-open');
+  };
+
+  btn.addEventListener('click', () => {
+    const isOpen = btn.getAttribute('aria-expanded') === 'true';
+    isOpen ? close() : open();
+  });
+  document.addEventListener('click', (e) => {
+    if (btn.contains(e.target) || nav.contains(e.target)) return;
+    close();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') close();
+  });
+})();
+
+(function wireCopy() {
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-copy]');
+    if (!btn) return;
+    const text = btn.getAttribute('data-copy');
+    if (!text || !navigator.clipboard) return;
+    navigator.clipboard.writeText(text).then(() => {
+      const prev = btn.textContent;
+      const prevColor = btn.style.color;
+      btn.textContent = 'copied';
+      btn.style.color = 'var(--success)';
+      setTimeout(() => { btn.textContent = prev; btn.style.color = prevColor; }, 1200);
+    });
+  });
+})();

docs/assets/page.css

@@ -86,7 +86,9 @@ pre {
 }
 pre code { background: none; border: 0; padding: 0; font-size: inherit; }
 
-.container { max-width: 980px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 36px); }
+/* Container width matches the landing's 1120px cap so every page feels
+   part of the same product. Padding clamps identically. */
+.container { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 36px); }
 .skip-link {
   position: absolute; top: -40px; left: 12px;
   background: var(--primary); color: var(--bg);
@@ -117,19 +119,21 @@ pre code { background: none; border: 0; padding: 0; font-size: inherit; }
 .brand:hover { text-decoration: none; color: var(--primary); }
 .brand svg { width: 28px; height: 28px; }
 
-.nav-toggle-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
-@media (min-width: 821px) { .nav-toggle-cb { display: none; } }
+/* Nav toggle — real <button>, not a hidden-checkbox hack. Hidden on
+   desktop (display: none) so nothing leaks into the layout. JS in
+   /assets/nav.js flips aria-expanded + toggles .is-open on .site-nav. */
 .nav-toggle {
   display: none; cursor: pointer; padding: 8px;
   border-radius: var(--radius-sm);
   color: var(--fg); background: transparent;
   border: 1px solid var(--border);
   align-items: center; justify-content: center;
-  transition: border-color .15s ease, background .15s ease;
+  transition: border-color .15s ease, background .15s ease, color .15s ease;
   margin-left: auto;
 }
 .nav-toggle svg { width: 22px; height: 22px; display: block; }
 .nav-toggle:hover { border-color: var(--border-strong); background: var(--bg-alt); }
+.nav-toggle[aria-expanded="true"] { border-color: var(--border-strong); background: var(--bg-alt); color: var(--primary); }
 
 .site-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
 .site-nav a {
@@ -156,11 +160,7 @@ pre code { background: none; border: 0; padding: 0; font-size: inherit; }
     border-radius: var(--radius-md);
     padding: 8px; box-shadow: var(--shadow); z-index: 20;
   }
-  .nav-toggle-cb:checked ~ .site-nav { display: flex; }
-  .nav-toggle-cb:checked ~ .nav-toggle {
-    border-color: var(--border-strong);
-    background: var(--bg-alt); color: var(--primary);
-  }
+  .site-nav.is-open { display: flex; }
   .site-nav a { padding: 10px 12px; font-size: 15px; }
   .nav-icon-link { justify-content: flex-start; }
 }

docs/assets/terminal.js

@@ -0,0 +1,67 @@
+/*
+ * <hfo-terminal> — a single shared Web Component that renders the
+ * terminal-styled code block used across every page on hfo.carrillo.app
+ * (except the hero, which has its own one-of-a-kind markup).
+ *
+ * Author writes:
+ *   <hfo-terminal title="bash" copy="npm i -g hfo-cli">
+ *   <span class="tok-prompt">$</span> <span class="tok-cmd">npm</span> i -g hfo-cli
+ *   </hfo-terminal>
+ *
+ * The element upgrades on connect to the full .terminal structure:
+ *   <div class="terminal">
+ *     <div class="terminal-bar">…red/yellow/green dots, title, optional copy…</div>
+ *     <pre><code>…content…</code></pre>
+ *   </div>
+ *
+ * Rules:
+ *   • `title` is plain text, HTML-escaped before insertion.
+ *   • `copy` (optional) adds a copy button with data-copy; the copy
+ *     handler lives in nav.js so both legacy `.terminal-copy` buttons
+ *     and the ones inside this component share one listener.
+ *   • The inner HTML is preserved verbatim (including tok-* spans).
+ *   • Leading/trailing newlines inside the element are trimmed so the
+ *     rendered <pre> doesn't start with a blank line.
+ *   • Double-connection is guarded via [data-hydrated].
+ */
+
+class HfoTerminal extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.hydrated === 'true') return;
+    this.dataset.hydrated = 'true';
+
+    const title = this.getAttribute('title') || '';
+    const copy  = this.getAttribute('copy');
+
+    const content = this.innerHTML
+      .replace(/^[ \t]*\r?\n+/, '')   // drop leading newlines + their indent
+      .replace(/\r?\n[ \t]*$/, '');   // drop trailing newlines + their indent
+
+    const copyBtn = copy
+      ? `<button type="button" class="terminal-copy" data-copy="${escapeAttr(copy)}" aria-label="Copy command">copy</button>`
+      : '';
+
+    this.innerHTML =
+      '<div class="terminal">' +
+        '<div class="terminal-bar">' +
+          '<span class="terminal-dot red"    aria-hidden="true"></span>' +
+          '<span class="terminal-dot yellow" aria-hidden="true"></span>' +
+          '<span class="terminal-dot green"  aria-hidden="true"></span>' +
+          '<span class="terminal-title">' + escapeText(title) + '</span>' +
+          copyBtn +
+        '</div>' +
+        '<pre><code>' + content + '</code></pre>' +
+      '</div>';
+  }
+}
+
+function escapeText(s) {
+  return String(s).replace(/[&<>"]/g, (c) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;',
+  }[c]));
+}
+function escapeAttr(s) {
+  return String(s).replace(/"/g, '&quot;').replace(/&/g, '&amp;');
+}
+
+customElements.define('hfo-terminal', HfoTerminal);

docs/benchmarks/index.html

@@ -40,6 +40,8 @@
 </script>
 
 <link rel="stylesheet" href="/assets/page.css" />
+<script src="/assets/nav.js" defer></script>
+<script src="/assets/terminal.js" defer></script>
 </head>
 <body>
 
@@ -58,11 +60,10 @@
       </svg>
       <span>hfo</span>
     </a>
-    <input type="checkbox" id="nav-open" class="nav-toggle-cb" aria-label="Toggle navigation menu" />
-    <label for="nav-open" class="nav-toggle" aria-hidden="true">
+    <button type="button" class="nav-toggle" id="nav-toggle" aria-label="Open navigation" aria-expanded="false" aria-controls="site-nav">
       <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></svg>
-    </label>
-    <nav class="site-nav" aria-label="Primary">
+    </button>
+    <nav class="site-nav" id="site-nav" aria-label="Primary">
       <a href="/install/">Install</a>
       <a href="/cli/">CLI</a>
       <a href="/keyboard/">Keyboard</a>
@@ -94,20 +95,13 @@ <h1>Benchmarks</h1>
       </header>
 
       <h2>Run it</h2>
-      <div class="terminal">
-        <div class="terminal-bar">
-          <span class="terminal-dot red" aria-hidden="true"></span>
-          <span class="terminal-dot yellow" aria-hidden="true"></span>
-          <span class="terminal-dot green" aria-hidden="true"></span>
-          <span class="terminal-title">bash</span>
-          <button type="button" class="terminal-copy" data-copy="hfo --bench llama3.1:8b --out bench.json">copy</button>
-        </div>
-<pre><code><span class="tok-comment"># Quick run — prints per-prompt + aggregate tok/s and TTFT, nothing saved</span>
+      <hfo-terminal title="bash" copy="hfo --bench llama3.1:8b --out bench.json">
+<span class="tok-comment"># Quick run — prints per-prompt + aggregate tok/s and TTFT, nothing saved</span>
 <span class="tok-prompt">$</span> <span class="tok-cmd">hfo</span> <span class="tok-flag">--bench</span> llama3.1:8b
 
 <span class="tok-comment"># Full submission — writes a JSON file you can share</span>
-<span class="tok-prompt">$</span> <span class="tok-cmd">hfo</span> <span class="tok-flag">--bench</span> llama3.1:8b <span class="tok-flag">--out</span> <span class="tok-path">bench.json</span></code></pre>
-      </div>
+<span class="tok-prompt">$</span> <span class="tok-cmd">hfo</span> <span class="tok-flag">--bench</span> llama3.1:8b <span class="tok-flag">--out</span> <span class="tok-path">bench.json</span>
+</hfo-terminal>
 
       <div class="callout callout-info">
         <p><strong>Expected runtime</strong>: 15–60 seconds on consumer GPU, 1–3 minutes on CPU-only. The warmup prompt is excluded from the aggregate so cold-start latency doesn't skew the numbers.</p>
@@ -137,14 +131,8 @@ <h2>What the bench measures</h2>
       </ul>
 
       <h2>Sample output</h2>
-      <div class="terminal">
-        <div class="terminal-bar">
-          <span class="terminal-dot red" aria-hidden="true"></span>
-          <span class="terminal-dot yellow" aria-hidden="true"></span>
-          <span class="terminal-dot green" aria-hidden="true"></span>
-          <span class="terminal-title">bash</span>
-        </div>
-<pre><code>── Benchmarking qwen2.5-coder:7b-q5_k_m ────────────────────────────────────
+      <hfo-terminal title="bash">
+── Benchmarking qwen2.5-coder:7b-q5_k_m ────────────────────────────────────
 Model      qwen2.5-coder:7b-q5_k_m
 GPU        NVIDIA GeForce RTX 4090
 VRAM       24 GB
@@ -160,20 +148,14 @@ <h2>Sample output</h2>
 ── Aggregate ───────────────────────────────────────────────────────────────
   80.1 tok/s avg
   120 ms TTFT avg
-  460 total output tokens in 5.7 s</code></pre>
-      </div>
+  460 total output tokens in 5.7 s
+</hfo-terminal>
 
       <h2>Submission format</h2>
       <p>When you pass <code>--out &lt;file&gt;</code>, hfo writes a JSON document that follows the <code>hfo-bench-v1</code> schema:</p>
 
-      <div class="terminal">
-        <div class="terminal-bar">
-          <span class="terminal-dot red" aria-hidden="true"></span>
-          <span class="terminal-dot yellow" aria-hidden="true"></span>
-          <span class="terminal-dot green" aria-hidden="true"></span>
-          <span class="terminal-title">bench.json</span>
-        </div>
-<pre><code>{
+      <hfo-terminal title="bench.json">
+{
   "tag": "qwen2.5-coder:7b-q5_k_m",
   "ollamaVersion": "0.21.3",
   "hfoVersion": "0.1.0",
@@ -205,8 +187,8 @@ <h2>Submission format</h2>
   },
   "submittedAt": "2026-04-23T20:14:32.114Z",
   "schema": "hfo-bench-v1"
-}</code></pre>
-      </div>
+}
+</hfo-terminal>
 
       <h2>Contribute a submission</h2>
       <p>The leaderboard is PR-based — no server, no telemetry, no account required. To contribute:</p>
@@ -259,20 +241,5 @@ <h2>What the benchmarks don't tell you</h2>
   </div>
 </footer>
 
-<script>
-  document.addEventListener('click', (e) => {
-    const btn = e.target.closest('.terminal-copy');
-    if (!btn) return;
-    const text = btn.getAttribute('data-copy');
-    if (!text || !navigator.clipboard) return;
-    navigator.clipboard.writeText(text).then(() => {
-      const prev = btn.textContent;
-      btn.textContent = 'copied';
-      btn.style.color = 'var(--success)';
-      setTimeout(() => { btn.textContent = prev; btn.style.color = ''; }, 1200);
-    });
-  });
-</script>
-
 </body>
 </html>