Website overhaul: nav, accessibility, shared components, SEO, Reaper silence detection

Website: - Add persistent top nav across all pages - Add skip-to-content links, focus-visible styles, ARIA on audio player - Fix text contrast for WCAG AA compliance - Add 600px breakpoint, mobile typography scaling - Extract shared footer.js, player.js, episode.js components - Episode pagination (10 + Load More), featured clip dedup - Worker meta injection for social crawler OG tags - Unify Plausible analytics proxy across all pages - Sanitize innerHTML for XSS safety - Custom 404 page, enhanced llms.txt, fix sitemap - Bump cache versions to v=4 Reaper: - Add dual silence threshold: 2.5s for speaker transitions, 6s for same-speaker gaps Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-16 00:56:29 -06:00
parent c70f83d04a
commit d39cb3f3d4
20 changed files with 870 additions and 678 deletions
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Page Not Found — Luke at the Roost</title>
+  <meta name="description" content="The page you're looking for doesn't exist.">
+  <meta name="theme-color" content="#1a1209">
+
+  <link rel="icon" href="favicon.ico" sizes="48x48">
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="icon" type="image/png" sizes="192x192" href="favicon-192.png">
+  <link rel="icon" type="image/png" sizes="48x48" href="favicon-48.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+
+  <link rel="stylesheet" href="css/style.css?v=4">
+  <script defer data-domain="lukeattheroost.com" data-api="/p/event" src="/p/script"></script>
+  <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+</head>
+<body>
+
+  <a href="#main-content" class="skip-link">Skip to content</a>
+
+  <nav class="site-nav">
+    <a href="/" class="site-nav-brand">Luke at the Roost</a>
+    <div class="site-nav-links">
+      <a href="/how-it-works">How It Works</a>
+      <a href="/clips">Clips</a>
+      <a href="/stats">Stats</a>
+    </div>
+  </nav>
+
+  <main id="main-content">
+
+  <section class="page-header">
+    <h1>404 — Page Not Found</h1>
+    <p class="page-subtitle">Looks like this page wandered off into the desert.</p>
+  </section>
+
+  <section class="about-section">
+    <p>The page you're looking for doesn't exist or may have been moved.</p>
+    <p><a href="/">Back to the show</a> &middot; <a href="/clips">Watch clips</a> &middot; <a href="/how-it-works">How it works</a></p>
+  </section>
+
+  </main>
+
+  <footer class="footer"></footer>
+  <script src="js/footer.js"></script>
+</body>
+</html>