Revert "Fix 404 redirect to always go to demo root page instead of preserving path"

This reverts commit 793bac0.

Author: merfanian

demo/public/404.html

@@ -9,12 +9,15 @@
     <title>Needle Demo</title>
     <script>
         // GitHub Pages SPA redirect
-        // Always redirect to the root demo page
+        // Redirect to the main demo page and let React Router handle the routing
+        var segmentCount = 2; // Number of path segments to keep (/Needle/demo/)
         var l = window.location;
-        var basePath = '/Needle/demo/';
         l.replace(
             l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
-            basePath
+            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>

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 basename="/Needle/demo">
       <div className="App">
+        <RedirectHandler />
         <Layout>
           <Routes>
             <Route path="/" element={<Navigate to="/search" replace />} />