Fix 5 bugs and add Playwright cache to CI

Bugs fixed:
- aria-expanded now returns string "true"/"false" instead of boolean
- touchend handler guards against empty changedTouches
- HTML escaping now covers >, " (XSS prevention in event titles)
- FundingStatus listeners only bind once (prevents memory leak on re-render)
- showLastSync interval pauses when tab is hidden, resumes on focus

CI improvement:
- Cache Playwright browsers and npm deps in deploy workflow
- Skip browser download on cache hit (only install system deps)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bmmmm

.github/workflows/deploy.yml

@@ -21,6 +21,7 @@ jobs:
       - uses: actions/setup-node@v6
         with:
           node-version: "22"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
@@ -33,9 +34,21 @@ jobs:
             exit 1
           )
 
+      - name: Cache Playwright browsers
+        id: pw-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ hashFiles('package-lock.json') }}
+
       - name: Install Playwright browsers
+        if: steps.pw-cache.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps chromium
 
+      - name: Install Playwright system deps (cache hit)
+        if: steps.pw-cache.outputs.cache-hit == 'true'
+        run: npx playwright install-deps chromium
+
       - name: Run sync-events unit tests
         run: node --test tests/sync-events.spec.mjs
 

events.js

@@ -512,7 +512,18 @@
     }
 
     render();
-    setInterval(render, 30000);
+    var intervalId = setInterval(render, 30000);
+
+    // Clean up when navigating away
+    document.addEventListener("visibilitychange", function () {
+      if (document.hidden) {
+        clearInterval(intervalId);
+        intervalId = null;
+      } else if (!intervalId) {
+        render();
+        intervalId = setInterval(render, 30000);
+      }
+    });
   }
 
   // ── Init ──────────────────────────────────────────────────────────────────

main.js

@@ -43,7 +43,7 @@
 
       utils.addEventListenerSafe(menuToggle, "click", () => {
         const expanded = mainNav.classList.toggle("active");
-        menuToggle.setAttribute("aria-expanded", expanded);
+        menuToggle.setAttribute("aria-expanded", String(expanded));
       });
     },
   };
@@ -146,6 +146,7 @@
       });
 
       utils.addEventListenerSafe(carousel, "touchend", (e) => {
+        if (!e.changedTouches.length) return;
         const endX = e.changedTouches[0].clientX;
         const deltaX = this.state.startX - endX;
 
@@ -351,6 +352,7 @@
       now.setHours(0, 0, 0, 0);
       const DAYS = ["SO", "MO", "DI", "MI", "DO", "FR", "SA"];
       const pad = (n) => (n < 10 ? "0" + n : "" + n);
+      const escHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 
       const upcoming = events
         .filter((e) => new Date(e.date + "T23:59:59") >= now)
@@ -370,10 +372,10 @@
         html += '<span class="event-preview__date">' + date + "</span>";
         html +=
           '<span class="event-preview__title">' +
-          e.title.replace(/&/g, "&amp;").replace(/</g, "&lt;");
+          escHtml(e.title);
         if (e.source && e.source !== "bitcircus101") {
           html += ' <span class="event-preview__source">' +
-            e.source.replace(/&/g, "&amp;") + "</span>";
+            escHtml(e.source) + "</span>";
         }
         html += "</span>";
         if (e.time)
@@ -449,18 +451,20 @@
         '<a href="donations.html">$ unterst\u00fctzen \u2192</a>' +
         "</div>";
 
-      // Click to toggle info panel
-      el.addEventListener("click", function (e) {
-        e.stopPropagation();
-        var info = el.querySelector(".footer__funding-info");
-        if (info) info.classList.toggle("active");
-      });
+      // Click to toggle info panel (only bind once)
+      if (!el._fundingBound) {
+        el.addEventListener("click", function (e) {
+          e.stopPropagation();
+          var info = el.querySelector(".footer__funding-info");
+          if (info) info.classList.toggle("active");
+        });
 
-      // Close on click outside
-      document.addEventListener("click", function () {
-        var info = el.querySelector(".footer__funding-info");
-        if (info) info.classList.remove("active");
-      });
+        document.addEventListener("click", function () {
+          var info = el.querySelector(".footer__funding-info");
+          if (info) info.classList.remove("active");
+        });
+        el._fundingBound = true;
+      }
     },
   };