1 files changed, 50 insertions, 46 deletions

diff --git a/docs/index.html b/docs/index.html
index ba9941e..0e7b438 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,50 +5,49 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Lustre</title>
 
-    <script type="module">
-      document.head.appendChild(
-        Object.assign(document.createElement("base"), {
-          href: import.meta.env.BASE_URL,
-        })
-      );
-    </script>
+    <link rel="stylesheet" href="./assets/styles.css" />
 
-    <style>
-      @font-face {
-        font-family: "NTDapper";
-        font-style: normal;
-        font-weight: 400;
-        src: url("/fonts/NTDapper-regular.woff2") format("woff2");
-      }
-      @font-face {
-        font-family: "NTDapper";
-        font-style: normal;
-        font-weight: 500;
-        src: url("/fonts/NTDapper-medium.woff2") format("woff2");
-      }
-      @font-face {
-        font-family: "NTDapper";
-        font-style: normal;
-        font-weight: 700;
-        src: url("/fonts/NTDapper-bold.woff2") format("woff2");
-      }
-      @font-face {
-        font-family: "NTDapper";
-        font-style: normal;
-        font-weight: 900;
-        src: url("/fonts/NTDapper-black.woff2") format("woff2");
+    <!-- Start Single Page Apps for GitHub Pages -->
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      // This script checks to see if a redirect is present in the query string,
+      // converts it back into the correct url and adds it to the
+      // browser's history using window.history.replaceState(...),
+      // which won't cause the browser to attempt to load the new url.
+      // When the single page app is loaded further down in this file,
+      // the correct url will be waiting in the browser's history for
+      // the single page app to route accordingly.
+      if (window.location.search[1] === "/") {
+        const decoded = window.location.search
+          .slice(1)
+          .split("&")
+          .map((s) => s.replace(/~and~/g, "&"))
+          .join("?");
+
+        window.history.replaceState(
+          null,
+          null,
+          window.location.pathname.slice(0, -1) + decoded + window.location.hash
+        );
       }
+    </script>
+    <!-- End Single Page Apps for GitHub Pages -->
 
-      @tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-    </style>
     <script type="module">
-      import { main, OnRouteChange } from "./src/app.gleam";
+      import { main, Route, OnRouteChange } from "./src/app.gleam";
+
+      const strip_base = (path) =>
+        `/${path.slice(import.meta.env.BASE_URL.length)}`;
 
       document.addEventListener("DOMContentLoaded", () => {
         const url = new URL(window.location.href);
-        const dispatch = main({ path: url.pathname, hash: url.hash });
+
+        const dispatch = main({
+          path: strip_base(url.pathname),
+          hash: url.hash,
+        });
 
         // We want to trap click events on anchor elements so we can do our own
         // client side routing.
@@ -59,17 +58,21 @@
             if (target === document.body) return;
             if (target.tagName === "A") {
               const url = new URL(target.href);
-
               if (url.origin !== window.location.origin) return;
-              if (url.pathname !== window.location.pathname) e.preventDefault();
+              const route = new Route(strip_base(url.pathname), url.hash);
+
+              e.preventDefault();
+              window.requestAnimationFrame(() => {
+                window.history.pushState({}, "", url.href);
 
-              window.requestAnimationFrame(() =>
-                window.history.pushState({}, "", url.href)
-              );
+                if (url.pathname === window.location.pathname && url.hash) {
+                  document.querySelector(url.hash)?.scrollIntoView();
+                } else {
+                  window.scrollTo(0, 0);
+                }
+              });
 
-              return void dispatch(
-                new OnRouteChange({ path: url.pathname, hash: url.hash })
-              );
+              return void dispatch(new OnRouteChange(route));
             }
 
             target = target.parentNode;
@@ -80,8 +83,9 @@
         // and trigger our app's routing.
         window.addEventListener("popstate", () => {
           const url = new URL(window.location.href);
+          const route = new Route(strip_base(url.pathname), url.hash);
 
-          dispatch(new OnRouteChange({ path: url.pathname, hash: url.hash }));
+          dispatch(new OnRouteChange(route));
         });
       });
     </script>