GitHub Pages single-page apps HOTFIX

404.html: make into copy of index.html index.html: remove the redirect code github actions (cp dist/index.html dist/404.html)
sfcta · Jul 27, 2023 · d3416a9 · d3416a9
1 parent 8553860
commit d3416a9
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 39 deletions.
diff --git a/.github/workflows/simwrapper.yaml b/.github/workflows/simwrapper.yaml
@@ -34,6 +34,9 @@ jobs:
       uses: actions/configure-pages@v3
     - name: Build SimWrapper
       run: npm run build
+    - name: Copy ./dist/index.html to ./dist/404.html
+      # HOTFIX to deploy single-page apps on GitHub
+      run: cp ./dist/index.html ./dist/404.html
     - name: Upload artifact
       uses: actions/upload-pages-artifact@v1
       with:

diff --git a/index.html b/index.html
@@ -33,31 +33,6 @@
       name="twitter:image"
     /> -->
 
-    <!-- github pages hack: allows single-page-app to handle arbitrary URLs -->
-    <script>
-      function getQueryVariableForRedirect(variable) {
-        var query = window.location.search.substring(1)
-        var vars = query.split('&')
-        for (var i = 0; i < vars.length; i++) {
-          var pair = vars[i].split('=')
-          if (pair[0] == variable) {
-            return pair[1]
-          }
-        }
-        return false
-      }
-
-      ;(function () {
-        let numRedirect = getQueryVariableForRedirect('redirect404')
-        var redirect = localStorage[`redirect${numRedirect}`]
-        delete localStorage[`redirect${numRedirect}`]
-
-        if (redirect && redirect != location.href) {
-          history.replaceState(null, null, redirect)
-        }
-      })()
-    </script>
-
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

diff --git a/public/404.html b/public/404.html
@@ -1,22 +1,57 @@
 <!DOCTYPE html>
-<!-- this custom 404 page instructs Github Pages to direct missing SPA links
-     back to the Vue Router -->
+<!--
+  HOTFIX for single-page applications (SPA) on GitHub Pages:
+  keep 404.html as an exact copy of index.html
+-->
 <html lang="en">
   <head>
-    <script>
-      // baseURL below MUST reflect base folder of built site;
-      // example: '/simwrapper/' for https://vsp.berlin/simwrapper/
-      const baseURL = '/simwrapper/'
+    <meta charset="utf-8" />
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <meta content="text/html; charset=utf-8" />
+    <meta
+      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
+      name="viewport"
+    />
 
-      const numRedirects = Number.parseInt(localStorage?.numRedirects || '0') + 1
-      localStorage.numRedirects = numRedirects
-      localStorage[`redirect${numRedirects}`] = location.href
+    <link rel="icon" href="/images/SW_favicon.png" />
 
-      let meta = document.createElement('meta')
-      meta.httpEquiv = 'refresh'
-      meta.content = `0;URL='${baseURL}?redirect404=${numRedirects}'`
+    <link href="/css/font-awesome-5.7.1.css" rel="stylesheet" />
+    <link href="/images/SW_favicon.png" rel="icon" type="image/png" />
 
-      document.head.appendChild(meta)
-    </script>
+    <!-- descriptive things -->
+    <title>SimWrapper</title>
+    <meta content="SimWrapper" name="twitter:title" />
+    <meta content="SimWrapper" name="og:title" />
+    <meta content="From the VSP team at TU-Berlin" name="twitter:description" />
+    <meta content="From the VSP team at TU-Berlin" name="og:description" />
+    <meta content="https://vsp.berlin/simwrapper" name="og:url" />
+    <!-- <meta
+      content="https://github.com/matsim-vsp/covid-sim/raw/master/src/assets/images/v1-thumb.png"
+      name="og:image"
+    /> -->
+    <meta content="summary_large_image" name="twitter:card" />
+    <meta content="@billyinberlin" name="twitter:site" />
+    <meta content="@billyinberlin" name="twitter:creator" />
+    <!-- <meta
+      content="https://github.com/matsim-vsp/covid-sim/raw/master/src/assets/images/v1-thumb.png"
+      name="twitter:image"
+    /> -->
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Slab:ital,wght@0,400;0,700;1,300&display=swap"
+      rel="stylesheet"
+    />
   </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <noscript>
+      <strong>
+        This advanced browser-based application requires JavaScript to function. Please enable it to
+        continue.
+      </strong>
+    </noscript>
+  </body>
 </html>