fix(hugo): restore animation icons, fix giant GitHub logo, dark-mode label readability (#61)

* fix(hugo): restore animation icons and fix giant GitHub logo on delta-sync

These two "further reading" pages (delta-sync, small-world-networks) and
their animations were built ~18 months ago and had several regressions after
Font Awesome was removed site-wide ("icons replaced with inline SVGs").

Problems fixed:

- Giant GitHub logo on the delta-sync page: the propagation shortcode had an
  unscoped `svg { width: 100% }` rule that leaked to every SVG on the page,
  blowing the footer GitHub logo up to ~968px. Scoped the rule (and the
  `d3.select("svg")` teardown) to `.visualization-wrapper svg`.

- Missing icons / empty buttons on both pages (reported as "missing button
  labels in dark mode"): these 5 shortcodes still used `<i class="fas fa-…">`
  Font Awesome icons, which render as empty boxes now that FA is gone. The
  per-page `head:` front-matter that tried to re-add FA from cdnjs was silently
  ignored by the theme. Completed the inline-SVG migration: added a small
  `.fnicon` CSS mask-icon utility (paths from the vendored FA solid set) that
  inherits `currentColor`, so icons render correctly in light and dark mode.
  This covers the play/pause/reset/next buttons and the 8 animal "data icons"
  in the delta-sync peer visualization.

- Console `SyntaxError: 'AnimationCoordinator' has already been declared`: the
  coordinator is included by two shortcodes, so a page with several animations
  loaded it twice. Made it idempotent via a `window.AnimationCoordinator ||`
  guard.

- Removed the dead cdnjs Font Awesome `head:` front-matter from both pages
  (ignored by the theme; icons are inline SVG now).

- Added aria-labels to the icon-only small-world buttons for screen readers.

Verified with Playwright in light and dark mode: footer logo 20px, all button
and data icons render, play/pause toggles work, zero console errors.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016EeZRA6N55JECxH2zfivBR

* fix(hugo): dark-mode readability for scale chart labels and peer titles

Follow-up from review of the animation pages, addressing dark-mode problems
the user asked to catch:

- small-world scale chart: D3 axis tick text and the "Network Size" /
  "Average Path Length" labels default to a black `fill`, which is invisible
  on the dark canvas in dark mode. Scoped `#scalingChart text { fill:
  currentColor }` so labels inherit the theme text color and stay readable in
  both modes.

- delta-sync peer boxes: `.peer-title` had no explicit color, so in dark mode
  it inherited the light body text color and nearly disappeared against the
  hardcoded-light peer card. Set an explicit dark title color.

- small-world-routing shortcode now loads its own animation-coordinator.js so
  it is self-contained rather than relying on a sibling shortcode; the
  coordinator's redeclaration guard makes the duplicate load safe.

Verified in dark mode via Playwright: scale labels render light-grey and
readable, peer titles dark and readable, zero console errors.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016EeZRA6N55JECxH2zfivBR

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: sanity

hugo-site/content/build/manual/further-reading/delta-sync.md

@@ -6,10 +6,6 @@ title: "Understanding Freenet's Delta-Sync"
 date: 2024-11-30
 draft: false
 tags: ["further-reading"]
-head:
-  - - link
-    - rel: stylesheet
-      href: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
 ---
 
 ### The Challenge of Consistency in Distributed Systems

hugo-site/content/build/manual/further-reading/small-world-networks.md

@@ -6,10 +6,6 @@ title: "Understanding Small World Networks"
 date: 2024-11-25
 draft: false
 tags: ["further-reading"]
-head:
-  - - link
-    - rel: stylesheet
-      href: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
 ---
 
 <div style="float: right; margin-left: 20px; margin-bottom: 10px; max-width: 300px; width: 100%;">

hugo-site/layouts/shortcodes/small-world-comparison.html

@@ -1,13 +1,13 @@
 <div class="visualization-container" style="margin-bottom: 2rem;">
     <div class="buttons has-addons is-centered" style="margin: 1rem;">
-        <button id="comparisonPlayPauseBtn" class="button is-medium is-primary">
+        <button id="comparisonPlayPauseBtn" class="button is-medium is-primary" aria-label="Play or pause the animation">
             <span class="icon">
-                <i class="fas fa-play"></i>
+                <i class="fnicon fnicon-play"></i>
             </span>
         </button>
-        <button id="resetComparisonBtn" class="button is-medium">
+        <button id="resetComparisonBtn" class="button is-medium" aria-label="Reset the animation">
             <span class="icon">
-                <i class="fas fa-undo"></i>
+                <i class="fnicon fnicon-reset"></i>
             </span>
         </button>
     </div>

hugo-site/layouts/shortcodes/small-world-routing.html

@@ -1,18 +1,22 @@
 <div class="visualization-container">
     <div class="buttons has-addons is-centered" style="margin: 0.25rem;">
-        <button id="routingPlayPauseBtn" class="button is-medium is-primary">
+        <button id="routingPlayPauseBtn" class="button is-medium is-primary" aria-label="Play or pause the animation">
             <span class="icon">
-                <i class="fas fa-play"></i>
+                <i class="fnicon fnicon-play"></i>
             </span>
         </button>
-        <button id="resetRoutingBtn" class="button is-medium">
+        <button id="resetRoutingBtn" class="button is-medium" aria-label="Reset the animation">
             <span class="icon">
-                <i class="fas fa-undo"></i>
+                <i class="fnicon fnicon-reset"></i>
             </span>
         </button>
     </div>
     <div style="display: flex; flex-direction: row; justify-content: center;">
         <canvas id="networkCanvas2" width="400" height="400" style="max-width: 70%; height: auto;"></canvas>
     </div>
 </div>
+<!-- routing.js calls AnimationCoordinator; load it here so this shortcode is
+     self-contained. The coordinator guards against duplicate declaration, so
+     it is safe even when sibling animation shortcodes also load it. -->
+<script src="/js/animation-coordinator.js"></script>
 <script src="/js/small-world-routing.js"></script>

hugo-site/layouts/shortcodes/small-world-scale.html

@@ -1,13 +1,19 @@
 <div class="visualization-container">
+    <style>
+        /* D3 axis tick text and axis labels default to a black `fill`, which is
+           invisible on the dark canvas in dark mode. `currentColor` inherits the
+           page text color so the chart labels stay readable in both themes. */
+        #scalingChart text { fill: currentColor; }
+    </style>
     <div class="buttons has-addons is-centered" style="margin: 1rem;">
-        <button id="scalePlayPauseBtn" class="button is-medium is-primary">
+        <button id="scalePlayPauseBtn" class="button is-medium is-primary" aria-label="Play or pause the animation">
             <span class="icon">
-                <i class="fas fa-play"></i>
+                <i class="fnicon fnicon-play"></i>
             </span>
         </button>
-        <button id="resetScaleBtn" class="button is-medium">
+        <button id="resetScaleBtn" class="button is-medium" aria-label="Reset the animation">
             <span class="icon">
-                <i class="fas fa-undo"></i>
+                <i class="fnicon fnicon-reset"></i>
             </span>
         </button>
     </div>

hugo-site/layouts/shortcodes/summary-delta-sync/propagation.html

@@ -14,7 +14,7 @@
     .message {
       r: 5;
     }
-    svg {
+    .visualization-wrapper svg {
       display: block;
       margin: 0 auto;
       width: 100%;
@@ -41,7 +41,7 @@
         min-height: 450px;
         margin: 1rem auto;
       }
-      svg {
+      .visualization-wrapper svg {
         transform: scale(0.85);
         transform-origin: center top;
       }
@@ -52,7 +52,7 @@
     <div class="buttons is-centered" style="margin: 0.25rem;">
       <button id="resetConvergenceBtn" class="button is-medium">
         <span class="icon">
-          <i class="fas fa-undo"></i>
+          <i class="fnicon fnicon-reset"></i>
         </span>
         <span>Reset</span>
       </button>
@@ -210,7 +210,7 @@
     // Initialize visualization
     function initializeVisualization() {
       // Remove existing SVG if it exists
-      d3.select("svg").remove();
+      d3.select(".visualization-wrapper svg").remove();
 
       // Generate new tree data with current parameters
       const { width, height } = getContainerDimensions();

hugo-site/layouts/shortcodes/summary-delta-sync/sync.html

@@ -35,6 +35,10 @@
       text-align: center;
       font-weight: bold;
       margin-bottom: 1rem;
+      /* The peer box is a hardcoded light card in both themes; set an explicit
+         dark title color so it stays readable in dark mode (otherwise it
+         inherits the light body text color and nearly disappears). */
+      color: #363636;
     }
     .peer-icons {
       display: flex;
@@ -139,13 +143,13 @@
     <div class="buttons has-addons is-centered" style="margin-bottom: 0.5rem;">
       <button id="syncNextBtn" class="button is-medium is-primary">
         <span class="icon">
-          <i class="fas fa-step-forward"></i>
+          <i class="fnicon fnicon-next"></i>
         </span>
         <span>Next</span>
       </button>
       <button id="resetSyncBtn" class="button is-medium">
         <span class="icon">
-          <i class="fas fa-undo"></i>
+          <i class="fnicon fnicon-reset"></i>
         </span>
         <span>Reset</span>
       </button>
@@ -186,14 +190,14 @@
   <script>
     // Available FontAwesome icons for the visualization
     const availableIcons = [
-      { name: 'dog', class: 'fas fa-dog' },
-      { name: 'cat', class: 'fas fa-cat' },
-      { name: 'fish', class: 'fas fa-fish' },
-      { name: 'dove', class: 'fas fa-dove' },
-      { name: 'dragon', class: 'fas fa-dragon' },
-      { name: 'spider', class: 'fas fa-spider' },
-      { name: 'horse', class: 'fas fa-horse' },
-      { name: 'hippo', class: 'fas fa-hippo' }
+      { name: 'dog', class: 'fnicon fnicon-dog' },
+      { name: 'cat', class: 'fnicon fnicon-cat' },
+      { name: 'fish', class: 'fnicon fnicon-fish' },
+      { name: 'dove', class: 'fnicon fnicon-dove' },
+      { name: 'dragon', class: 'fnicon fnicon-dragon' },
+      { name: 'spider', class: 'fnicon fnicon-spider' },
+      { name: 'horse', class: 'fnicon fnicon-horse' },
+      { name: 'hippo', class: 'fnicon fnicon-hippo' }
     ];
 
     // State for each peer

hugo-site/static/js/animation-coordinator.js

@@ -2,7 +2,10 @@
  * Global animation coordinator for managing multiple animations on a page.
  * Ensures only one animation is active at a time and handles state transitions.
  */
-const AnimationCoordinator = {
+// Guard against redeclaration: this file is included by more than one shortcode,
+// so a page using several animations loads it multiple times. Defining it once on
+// `window` keeps repeat includes from throwing "already declared" and preserves state.
+window.AnimationCoordinator = window.AnimationCoordinator || {
     /** @type {string|null} Current active animation name */
     activeAnimation: null,
 

hugo-site/static/js/small-world-comparison.js

@@ -406,7 +406,7 @@ waitForD3().then(() => {
             isPlaying = false;
             const btn = document.getElementById('comparisonPlayPauseBtn');
             const icon = btn.querySelector('i');
-            icon.className = 'fas fa-play';
+            icon.className = 'fnicon fnicon-play';
             return;
         }
 
@@ -425,7 +425,7 @@ waitForD3().then(() => {
             const btn = document.getElementById('comparisonPlayPauseBtn');
             if (btn) {
                 const icon = btn.querySelector('i');
-                if (icon) icon.className = 'fas fa-play';
+                if (icon) icon.className = 'fnicon fnicon-play';
             }
             if (animationFrame) cancelAnimationFrame(animationFrame);
         }
@@ -435,7 +435,7 @@ waitForD3().then(() => {
         isPlaying = !isPlaying;
         const btn = document.getElementById('comparisonPlayPauseBtn');
         const icon = btn.querySelector('i');
-        icon.className = isPlaying ? 'fas fa-pause' : 'fas fa-play';
+        icon.className = isPlaying ? 'fnicon fnicon-pause' : 'fnicon fnicon-play';
 
         if (isPlaying) {
             AnimationCoordinator.setActive('comparison');
@@ -451,7 +451,7 @@ waitForD3().then(() => {
         isPlaying = false;
         const btn = document.getElementById('comparisonPlayPauseBtn');
         const icon = btn.querySelector('i');
-        icon.className = 'fas fa-play';
+        icon.className = 'fnicon fnicon-play';
 
         if (animationFrame) {
             cancelAnimationFrame(animationFrame);

hugo-site/static/js/small-world-routing.js

@@ -361,7 +361,7 @@ async function initVisualization() {
         if (playPauseBtn) {
             const icon = playPauseBtn.querySelector('i');
             if (icon) {
-                icon.className = 'fas fa-play';
+                icon.className = 'fnicon fnicon-play';
             }
         }
 
@@ -394,7 +394,7 @@ async function initVisualization() {
             const btn = document.getElementById('routingPlayPauseBtn');
             if (btn) {
                 const icon = btn.querySelector('i');
-                if (icon) icon.className = 'fas fa-play';
+                if (icon) icon.className = 'fnicon fnicon-play';
             }
             if (routeTimeout) clearTimeout(routeTimeout);
         }
@@ -419,10 +419,10 @@ async function initVisualization() {
         }
 
         if (isPlaying) {
-            icon.className = 'fas fa-pause';
+            icon.className = 'fnicon fnicon-pause';
             startNewRoute();
         } else {
-            icon.className = 'fas fa-play';
+            icon.className = 'fnicon fnicon-play';
             clearTimeout(routeTimeout);
         }
     }