various polish

quartz/components/scripts/darkmode.inline.ts

@@ -2,7 +2,7 @@ const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'l
 const currentTheme = localStorage.getItem('theme') ?? userPref
 document.documentElement.setAttribute('saved-theme', currentTheme)
 
-window.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("nav", () => {
   const switchTheme = (e: any) => {
     if (e.target.checked) {
       document.documentElement.setAttribute('saved-theme', 'dark')
@@ -16,7 +16,8 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // Darkmode toggle
   const toggleSwitch = document.querySelector('#darkmode-toggle') as HTMLInputElement
-  toggleSwitch.addEventListener('change', switchTheme, false)
+  toggleSwitch.removeEventListener('change', switchTheme)
+  toggleSwitch.addEventListener('change', switchTheme)
   if (currentTheme === 'dark') {
     toggleSwitch.checked = true
   }

quartz/components/scripts/graph.inline.ts

@@ -266,9 +266,9 @@ async function renderGraph(container: string, slug: string) {
   })
 }
 
-function renderGlobalGraph() {
+async function renderGlobalGraph() {
   const slug = document.body.dataset["slug"]!
-  renderGraph("global-graph-container", slug)
+  await renderGraph("global-graph-container", slug)
   const container = document.getElementById("global-graph-outer")
   container?.classList.add("active")
 
@@ -293,7 +293,14 @@ document.addEventListener("nav", async (e: unknown) => {
   containerIcon?.addEventListener("click", renderGlobalGraph)
 })
 
-window.addEventListener('resize', async () => {
-  const slug = document.body.dataset["slug"]!
-  await renderGraph("graph-container", slug)
+let resizeEventDebounce: number | undefined = undefined
+window.addEventListener('resize', () => {
+  if (resizeEventDebounce) {
+    clearTimeout(resizeEventDebounce)
+  }
+
+  resizeEventDebounce = window.setTimeout(async () => {
+    const slug = document.body.dataset["slug"]!
+    await renderGraph("graph-container", slug)
+  }, 50)
 })

quartz/components/scripts/plausible.inline.ts

@@ -0,0 +1,3 @@
+import Plausible from 'plausible-tracker'
+const { trackPageview } = Plausible()
+document.addEventListener("nav", () => trackPageview())

quartz/components/scripts/popover.inline.ts

@@ -1,5 +1,24 @@
 import { computePosition, flip, inline, shift } from "@floating-ui/dom"
 
+// from micromorph/src/utils.ts
+// https://github.com/natemoo-re/micromorph/blob/main/src/utils.ts#L5
+export function normalizeRelativeURLs(
+  el: Element | Document,
+  base: string | URL
+) {
+  const update = (el: Element, attr: string, base: string | URL) => {
+    el.setAttribute(attr, new URL(el.getAttribute(attr)!, base).pathname)
+  }
+
+  el.querySelectorAll('[href^="./"], [href^="../"]').forEach((item) =>
+    update(item, 'href', base)
+  )
+
+  el.querySelectorAll('[src^="./"], [src^="../"]').forEach((item) =>
+    update(item, 'src', base)
+  )
+}
+
 document.addEventListener("nav", () => {
   const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
   const p = new DOMParser()
@@ -41,6 +60,7 @@ document.addEventListener("nav", () => {
 
       if (!contents) return
       const html = p.parseFromString(contents, "text/html")
+      normalizeRelativeURLs(html, targetUrl)
       const elts = [...html.getElementsByClassName("popover-hint")]
       if (elts.length === 0) return
 
@@ -54,11 +74,13 @@ document.addEventListener("nav", () => {
       setPosition(popoverElement)
       link.appendChild(popoverElement)
       link.dataset.fetchedPopover = "true"
-      
-      const heading = popoverInner.querySelector(hash) as HTMLElement | null
-      if (heading) {
-        // leave ~12px of buffer when scrolling to a heading
-        popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' })
+
+      if (hash !== "") {
+        const heading = popoverInner.querySelector(hash) as HTMLElement | null
+        if (heading) {
+          // leave ~12px of buffer when scrolling to a heading
+          popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' })
+        }
       }
     })
   }