Add SPA routing support for GitHub Pages - handle refresh on client-side routes

merfanian · merfanian · commit 9f07ea0deaed · 2025-10-21T10:14:59.000-07:00
diff --git a/.github/workflows/deploy-books.yaml b/.github/workflows/deploy-books.yaml
@@ -61,6 +61,8 @@ jobs:
           # Copy demo build to docs/book/demo for serving
           mkdir -p docs/book/demo
           cp -r demo/build/* docs/book/demo/
+          # Copy 404.html for SPA routing support
+          cp demo/public/404.html docs/book/demo/404.html
           # Verify the structure
           echo "Documentation files:"
           ls -la docs/book/
diff --git a/demo/public/404.html b/demo/public/404.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="./favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Needle Demo - Image Search System" />
+    <title>Needle Demo</title>
+    <script>
+        // GitHub Pages SPA redirect
+        // Redirect to the main demo page and let React Router handle the routing
+        var segmentCount = 1; // Number of path segments to keep (/demo/)
+        var l = window.location;
+        l.replace(
+            l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+            l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=' +
+            encodeURIComponent(l.pathname.slice(1).split('/').slice(segmentCount).join('/')) +
+            (l.search ? '&' + l.search.slice(1) : '') +
+            l.hash
+        );
+    </script>
+</head>
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+</body>
+</html>
diff --git a/demo/src/App.js b/demo/src/App.js
@@ -1,18 +1,43 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import Layout from './components/Layout';
 import SearchPage from './pages/SearchPage';
 import DirectoryPage from './pages/DirectoryPage';
 import GeneratorPage from './pages/GeneratorPage';
 import StatusPage from './pages/StatusPage';
 import './styles/index.css';
 
+// Component to handle GitHub Pages SPA redirect
+function RedirectHandler() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    // Check for redirect parameter from 404.html
+    const urlParams = new URLSearchParams(location.search);
+    const redirectPath = urlParams.get('p');
+    
+    if (redirectPath) {
+      // Clean up the URL by removing the redirect parameter
+      const newUrl = new URL(window.location);
+      newUrl.searchParams.delete('p');
+      window.history.replaceState({}, '', newUrl.pathname + newUrl.search + newUrl.hash);
+      
+      // Navigate to the intended path
+      navigate(redirectPath, { replace: true });
+    }
+  }, [navigate, location.search]);
+
+  return null;
+}
+
 function App() {
   console.log('Needle Demo App loading...');
   
   return (
     <Router>
       <div className="App">
+        <RedirectHandler />
         <Layout>
           <Routes>
             <Route path="/" element={<Navigate to="/search" replace />} />
