Fix SPA routing 404 issues on GitHub Pages

SyntaxSidekick · SyntaxSidekick · commit 15df30ee014b · 2025-10-23T18:41:18.000-04:00
- Add custom 404.html to handle client-side routing
- Implement redirect parameter system for deep links
- Add .nojekyll file to disable Jekyll processing
- Enhance router with beforeEach guard for redirect handling
- Add styled redirect page with loading spinner
- Fix URL refresh/reload 404 errors for all routes
diff --git a/index.html b/index.html
@@ -13,6 +13,17 @@
   </head>
   <body>
     <div id="app"></div>
+    <script>
+      // GitHub Pages SPA redirect handler
+      (function() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const redirect = urlParams.get('redirect');
+        if (redirect) {
+          // Remove the redirect parameter and navigate to the intended path
+          history.replaceState(null, '', redirect);
+        }
+      })();
+    </script>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/router/index.js b/src/router/index.js
@@ -59,4 +59,22 @@ const router = createRouter({
   routes
 })
 
+// Handle GitHub Pages redirect parameter
+router.beforeEach((to, from, next) => {
+  // Check if this is the initial navigation with a redirect parameter
+  if (to.path === '/' || to.path === '/explorer') {
+    const urlParams = new URLSearchParams(window.location.search)
+    const redirect = urlParams.get('redirect')
+    
+    if (redirect) {
+      // Clean up the URL and navigate to the intended route
+      window.history.replaceState({}, '', window.location.pathname)
+      next(redirect)
+      return
+    }
+  }
+  
+  next()
+})
+
 export default router
