Fix SPA routing on GitHub Pages for /people and other routes

haojian · claude · haojian · commit d14e5c0167cf · 2026-03-07T00:31:59.000-08:00
Add 404.html redirect and index.html URL restoration script so
direct navigation to client-side routes works on GitHub Pages.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/index.html b/index.html
@@ -18,6 +18,17 @@
   </head>
 
   <body>
+    <!-- GitHub Pages SPA redirect: restores URL from 404.html query string -->
+    <script>
+      (function(l) {
+        if (l.search[1] === '/') {
+          var decoded = l.search.slice(1).split('&').map(function(s) {
+            return s.replace(/~and~/g, '&')
+          }).join('?');
+          window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
+        }
+      }(window.location))
+    </script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>AI Smith Lab</title>
+    <script>
+      // Single Page App redirect for GitHub Pages
+      // Converts the path into a query string so index.html can restore it
+      var pathSegmentsToKeep = 0;
+      var l = window.location;
+      l.replace(
+        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
