From 0c199975f2d469ecdfd7efcf2ddd16ffa1dc492b Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 17 Aug 2023 07:55:28 +0000
Subject: [PATCH] various path fixes for links to extensions, fix relative paths in links

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

diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index a129dc4..c28da28 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 "../../util/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)
@@ -19,18 +21,18 @@
   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(slug: string) {
-  const event = new CustomEvent("nav", { detail: { slug } })
+function notifyNav(url: CanonicalSlug) {
+  const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } })
   document.dispatchEvent(event)
 }
 
@@ -42,37 +44,41 @@
     .catch(() => {
       window.location.assign(url)
     })
-  if (!contents) return;
+
+  if (!contents) return
   if (!isBack) {
     history.pushState({}, "", url)
     window.scrollTo({ top: 0 })
   }
+
   const html = p.parseFromString(contents, "text/html")
   let title = html.querySelector("title")?.textContent
   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
 }
 
+window.spaNavigate = navigate
+
 function createRouter() {
   if (typeof window !== "undefined") {
     window.addEventListener("click", async (event) => {
@@ -97,8 +103,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)
     }
@@ -110,26 +116,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