From 7bde99b4e2d49e30dad1e0d58ccc34c2e7482005 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 14 Aug 2023 00:47:18 +0000
Subject: [PATCH] fix: add trailing slash to local serving

---
 quartz/components/scripts/spa.inline.ts |   73 ++++++++++++++++++++----------------
 1 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index 057aa3d..4d31b5e 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -1,11 +1,13 @@
 import micromorph from "micromorph"
+import { CanonicalSlug, RelativeURL, getCanonicalSlug } from "../../path"
 
 // adapted from `micromorph`
 // https://github.com/natemoo-re/micromorph
 
 const NODE_TYPE_ELEMENT = 1
-let announcer = document.createElement('route-announcer')
-const isElement = (target: EventTarget | null): target is Element => (target as Node)?.nodeType === NODE_TYPE_ELEMENT
+let announcer = document.createElement("route-announcer")
+const isElement = (target: EventTarget | null): target is Element =>
+  (target as Node)?.nodeType === NODE_TYPE_ELEMENT
 const isLocalUrl = (href: string) => {
   try {
     const url = new URL(href)
@@ -15,21 +17,21 @@
       }
       return true
     }
-  } catch (e) { }
+  } catch (e) {}
   return false
 }
 
-const getOpts = ({ target }: Event): { url: URL, scroll?: boolean } | undefined => {
+const getOpts = ({ target }: Event): { url: URL; scroll?: boolean } | undefined => {
   if (!isElement(target)) return
   const a = target.closest("a")
   if (!a) return
-  if ('routerIgnore' in a.dataset) return
+  if ("routerIgnore" in a.dataset) return
   const { href } = a
   if (!isLocalUrl(href)) return
-  return { url: new URL(href), scroll: 'routerNoscroll' in a.dataset ? false : undefined }
+  return { url: new URL(href), scroll: "routerNoscroll" in a.dataset ? false : undefined }
 }
 
-function notifyNav(url: string) {
+function notifyNav(url: CanonicalSlug) {
   const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } })
   document.dispatchEvent(event)
 }
@@ -42,7 +44,8 @@
     .catch(() => {
       window.location.assign(url)
     })
-  if (!contents) return;
+
+  if (!contents) return
   if (!isBack) {
     history.pushState({}, "", url)
     window.scrollTo({ top: 0 })
@@ -52,24 +55,24 @@
   if (title) {
     document.title = title
   } else {
-    const h1 = document.querySelector('h1')
+    const h1 = document.querySelector("h1")
     title = h1?.innerText ?? h1?.textContent ?? url.pathname
   }
   if (announcer.textContent !== title) {
     announcer.textContent = title
   }
-  announcer.dataset.persist = ''
+  announcer.dataset.persist = ""
   html.body.appendChild(announcer)
 
   micromorph(document.body, html.body)
 
-  // now, patch head 
-  const elementsToRemove = document.head.querySelectorAll(':not([spa-preserve])')
-  elementsToRemove.forEach(el => el.remove())
-  const elementsToAdd = html.head.querySelectorAll(':not([spa-preserve])')
-  elementsToAdd.forEach(el => document.head.appendChild(el))
+  // now, patch head
+  const elementsToRemove = document.head.querySelectorAll(":not([spa-preserve])")
+  elementsToRemove.forEach((el) => el.remove())
+  const elementsToAdd = html.head.querySelectorAll(":not([spa-preserve])")
+  elementsToAdd.forEach((el) => document.head.appendChild(el))
 
-  notifyNav(document.body.dataset.slug!)
+  notifyNav(getCanonicalSlug(window))
   delete announcer.dataset.persist
 }
 
@@ -99,8 +102,8 @@
     })
   }
 
-  return new class Router {
-    go(pathname: string) {
+  return new (class Router {
+    go(pathname: RelativeURL) {
       const url = new URL(pathname, window.location.toString())
       return navigate(url, false)
     }
@@ -112,26 +115,30 @@
     forward() {
       return window.history.forward()
     }
-  }
+  })()
 }
 
 createRouter()
-notifyNav(document.body.dataset.slug!)
+notifyNav(getCanonicalSlug(window))
 
-if (!customElements.get('route-announcer')) {
+if (!customElements.get("route-announcer")) {
   const attrs = {
-    'aria-live': 'assertive',
-    'aria-atomic': 'true',
-    'style': 'position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px'
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    style:
+      "position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px",
   }
-  customElements.define('route-announcer', class RouteAnnouncer extends HTMLElement {
-    constructor() {
-      super()
-    }
-    connectedCallback() {
-      for (const [key, value] of Object.entries(attrs)) {
-        this.setAttribute(key, value)
+  customElements.define(
+    "route-announcer",
+    class RouteAnnouncer extends HTMLElement {
+      constructor() {
+        super()
       }
-    }
-  })
+      connectedCallback() {
+        for (const [key, value] of Object.entries(attrs)) {
+          this.setAttribute(key, value)
+        }
+      }
+    },
+  )
 }

--
Gitblit v1.10.0