Fix single page app routing with spa-github-pages

https://github.com/rafgraph/spa-github-pages/ So it turns out GitHub Pages doesn't actually do dynamic routing: if we try to access https://dgmstuart.github.io/bingo-frontend/numbers, then github looks for an html document matching that name, and doesn't find one so returns a 404. This was confusing for a while because it seemed like those pages were working on desktop and not mobile, but actually it seems like it was just caching which allowed them to be displayed? This approach is to define a specific 404 page which routes back to the index which then handles the route.
dgmstuart · Apr 22, 2024 · 13ef748 · 13ef748
1 parent 92ddad1
commit 13ef748
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Single Page Apps for GitHub Pages</title>
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      var pathSegmentsToKeep = 1;
+
+      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>
diff --git a/index.html b/index.html
@@ -17,6 +17,22 @@
     <link href="https://fonts.googleapis.com/css2?family=Jost:wght@900&display=swap" rel="stylesheet">
 
     <title>Team Lindy Bingo</title>
+
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      (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>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>