feat: implement GitHub Pages 404 redirect handling in ApplyQueryParams component

mois-ilya · mois-ilya · commit d458ed546f3c · 2025-10-24T04:10:42.000+04:00
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Redirecting</title>
+  <script type="text/javascript">
+    // Single Page Apps for GitHub Pages
+    // Redirect to index.html with path preserved
+    var pathSegmentsToKeep = 0;
+    var l = window.location;
+    l.replace(
+      l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+      '/index.html?p=/' + l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+      (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+      l.hash
+    );
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/src/processes/ApplyQueryParams.tsx b/src/processes/ApplyQueryParams.tsx
@@ -1,12 +1,24 @@
 import { FunctionComponent, PropsWithChildren, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { projectsStore } from 'src/shared/stores';
 import { observer } from 'mobx-react-lite';
 
 const ApplyQueryParams: FunctionComponent<PropsWithChildren> = ({ children }) => {
     const [searchParams, setSearchParams] = useSearchParams();
+    const navigate = useNavigate();
 
     useEffect(() => {
+        // Handle GitHub Pages 404 redirect for SPA routing
+        const pathParam = searchParams.get('p');
+        if (pathParam !== null) {
+            // Decode the saved path and navigate to it
+            const decodedPath = pathParam.replace(/~and~/g, '&');
+            searchParams.delete('p');
+            setSearchParams(searchParams);
+            navigate(decodedPath);
+            return;
+        }
+
         const projectId = searchParams.get('project_id');
         if (projectId !== null) {
             searchParams.delete('project_id');
