nav: home emoji (text-variation), "Parts:" label, SW skip on localhost

Three related changes after testing the TOC flow locally.

1. Home pill: plain-text "TOC" / "Index" / "All parts" all read as
   visual noise. Swap to 🏠 with a trailing U+FE0E text-variation
   selector so browsers render the outlined monochrome house glyph
   instead of the full-color emoji. Tooltip + aria-label carry the
   semantic name ("Back to the walkthrough index") for keyboard + SR
   users. Drop the `::before { content: '«' }` — the emoji itself is
   the affordance.

2. Part pill labels: meander emits eight "Part N" pills, which reads
   as repetitive "Part 1 Part 2 Part 3…". walkthrough-drag.js now
   rewrites pill text to just "1", "2", …, "8" and prepends a
   shared "Parts:" label. The label is a <span>, styled as a muted
   uppercase column header, not a pill. Same-order read: 🏠 | Parts: | 1 2 3 4 5 6 7 8.

3. SW on localhost: installing the SW locally made rapid iteration
   painful — the first load cached HTML/CSS, then every subsequent
   edit served stale bytes until DevTools → Unregister + Clear site
   data. Skip SW registration on localhost / 127.0.0.1 and proactively
   unregister any prior SW so the next fetch goes to the network.
   Production (GH Pages) registers normally — cache-first pays off
   for real users.

Author: jdalton

scripts/walkthrough.mts

@@ -495,12 +495,22 @@ async function generate(
   // work. `updateViaCache:'none'` forces the browser to fetch the SW
   // file itself via HTTP cache (not its own SW cache), so a new
   // deploy's SW is picked up on the next reload.
+  // Skip SW registration on localhost / 127.0.0.1 so rapid iteration
+  // doesn't get stuck on stale cached HTML/assets served by a prior
+  // SW install. If an SW is already registered from a previous load,
+  // unregister it so the very next fetch goes to the network. Prod
+  // (GH Pages) registers normally — cache-first pays off there.
   const swRegisterTag = [
     '<script>',
     "  if ('serviceWorker' in navigator) {",
-    "    addEventListener('load', () => {",
-    "      navigator.serviceWorker.register('/walkthrough-sw.js', { updateViaCache: 'none' }).catch(() => {})",
-    '    })',
+    '    var isLocal = /^(localhost|127\\.0\\.0\\.1)$/.test(location.hostname)',
+    '    if (isLocal) {',
+    '      navigator.serviceWorker.getRegistrations().then(rs => rs.forEach(r => r.unregister())).catch(() => {})',
+    '    } else {',
+    "      addEventListener('load', () => {",
+    "        navigator.serviceWorker.register('/walkthrough-sw.js', { updateViaCache: 'none' }).catch(() => {})",
+    '      })',
+    '    }',
     '  }',
     '</script>',
   ].join('\n  ')
@@ -592,7 +602,7 @@ async function generate(
     ) {
       html = html.replace(
         '<div class="part-nav">',
-        '<div class="part-nav"><a class="wt-home-link" href="/" aria-label="Back to the walkthrough table of contents">TOC</a>',
+        '<div class="part-nav"><a class="wt-home-link" href="/" aria-label="Back to the walkthrough index" title="Back to index">🏠︎</a>',
       )
     }
 

walkthrough-drag.js

@@ -388,9 +388,39 @@
       }, 1500)
     })
 
+  // Compact the meander-emitted Part pill labels from "Part 1", "Part 2",
+  // … down to just the number, and prepend a shared "Parts:" label.
+  // Eight "Part N" pills read as repetitive noise; one label + eight
+  // numerals communicate the same grouping with less visual weight.
+  // The home (🏠) pill we inject in the post-processor keeps its emoji
+  // — it's not a numbered part, so the `Part ` prefix isn't there
+  // to strip.
+  const installPartNavLabels = () => {
+    const nav = document.querySelector('.topbar .part-nav')
+    if (!nav || nav.querySelector('.wt-parts-label')) {
+      return
+    }
+    const pills = nav.querySelectorAll('a:not(.wt-home-link)')
+    for (const a of pills) {
+      const m = a.textContent?.match(/^Part\s+(\d+)/)
+      if (m) {
+        a.textContent = m[1]
+      }
+    }
+    if (pills.length > 0) {
+      const label = document.createElement('span')
+      label.className = 'wt-parts-label'
+      label.textContent = 'Parts:'
+      // Insert label right before the first numbered pill — after the
+      // home link if present, otherwise at the nav's start.
+      pills[0].before(label)
+    }
+  }
+
   const ready = async () => {
     installAll()
     installThemeToggle()
+    installPartNavLabels()
     await waitForHljs()
     // Fallback reveal for pages with no comment shim (documents, or
     // walkthroughs with no commentBackend). When the shim IS present,

walkthrough-overrides.css

@@ -695,18 +695,29 @@ body.wt-ready .topbar-actions {
 .ok {
   color: var(--muted-lavender) !important;
 }
-/* "All parts" home link on every part page. Leading chevron makes it
- * unambiguous it's a back-nav, not another Part pill. Slight right
- * margin + brighter border separate it from the numbered pills so it
- * reads as a distinct category ("root" vs "children"). */
+/* Emoji-only home link on every part page — 🏠 reads as "go back
+ * to the index" without needing a word label. Slight right margin +
+ * brighter border separate it from the numbered Part pills so it
+ * reads as a distinct category ("root" vs "children"). Tooltip
+ * (title attribute on the anchor) carries the label for keyboard /
+ * screen-reader users; visual users read the glyph. */
 .topbar .part-nav a.wt-home-link {
   border-color: rgba(255, 255, 255, 0.55) !important;
   margin-right: 8px;
 }
-.topbar .part-nav a.wt-home-link::before {
-  content: '« ';
-  margin-right: 2px;
-  opacity: 0.8;
+/* "Parts:" label prepended by walkthrough-drag.js once the topbar has
+ * mounted. Eight numbered pills read as repetitive "Part 1 Part 2 Part
+ * 3…"; this turns it into "Parts: 1 2 3 4 5 6 7 8". The label itself
+ * is a <span>, not a pill — same translucent-white as the pill text
+ * so it reads as the column header. */
+.topbar .part-nav .wt-parts-label {
+  color: rgba(255, 255, 255, 0.72);
+  margin-right: 4px;
+  align-self: center;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
 }
 /* Dark theme keeps the same purple band — docs.socket.dev uses the
  * same header in both modes, deepened slightly against the near-black