base path refactor to better support subpath hosting

quartz/components/scripts/graph.inline.ts

@@ -1,31 +1,32 @@
 import type { ContentDetails } from "../../plugins/emitters/contentIndex"
 import * as d3 from "d3"
 import { registerEscapeHandler, removeAllChildren } from "./util"
-import { CanonicalSlug, getCanonicalSlug, getClientSlug, resolveRelative } from "../../util/path"
+import { FullSlug, SimpleSlug, getFullSlug, resolveRelative, simplifySlug } from "../../util/path"
 
 type NodeData = {
-  id: CanonicalSlug
+  id: SimpleSlug
   text: string
   tags: string[]
 } & d3.SimulationNodeDatum
 
 type LinkData = {
-  source: CanonicalSlug
-  target: CanonicalSlug
+  source: SimpleSlug
+  target: SimpleSlug
 }
 
 const localStorageKey = "graph-visited"
-function getVisited(): Set<CanonicalSlug> {
+function getVisited(): Set<SimpleSlug> {
   return new Set(JSON.parse(localStorage.getItem(localStorageKey) ?? "[]"))
 }
 
-function addToVisited(slug: CanonicalSlug) {
+function addToVisited(slug: SimpleSlug) {
   const visited = getVisited()
   visited.add(slug)
   localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
 }
 
-async function renderGraph(container: string, slug: CanonicalSlug) {
+async function renderGraph(container: string, fullSlug: FullSlug) {
+  const slug = simplifySlug(fullSlug)
   const visited = getVisited()
   const graph = document.getElementById(container)
   if (!graph) return
@@ -47,16 +48,17 @@ async function renderGraph(container: string, slug: CanonicalSlug) {
 
   const links: LinkData[] = []
   for (const [src, details] of Object.entries<ContentDetails>(data)) {
+    const source = simplifySlug(src as FullSlug)
     const outgoing = details.links ?? []
     for (const dest of outgoing) {
-      if (src in data && dest in data) {
-        links.push({ source: src as CanonicalSlug, target: dest })
+      if (dest in data) {
+        links.push({ source, target: dest })
       }
     }
   }
 
-  const neighbourhood = new Set<CanonicalSlug>()
-  const wl: (CanonicalSlug | "__SENTINEL")[] = [slug, "__SENTINEL"]
+  const neighbourhood = new Set<SimpleSlug>()
+  const wl: (SimpleSlug | "__SENTINEL")[] = [slug, "__SENTINEL"]
   if (depth >= 0) {
     while (depth >= 0 && wl.length > 0) {
       // compute neighbours
@@ -72,7 +74,7 @@ async function renderGraph(container: string, slug: CanonicalSlug) {
       }
     }
   } else {
-    Object.keys(data).forEach((id) => neighbourhood.add(id as CanonicalSlug))
+    Object.keys(data).forEach((id) => neighbourhood.add(simplifySlug(id as FullSlug)))
   }
 
   const graphData: { nodes: NodeData[]; links: LinkData[] } = {
@@ -171,11 +173,11 @@ async function renderGraph(container: string, slug: CanonicalSlug) {
     .attr("fill", color)
     .style("cursor", "pointer")
     .on("click", (_, d) => {
-      const targ = resolveRelative(slug, d.id)
-      window.spaNavigate(new URL(targ, getClientSlug(window)))
+      const targ = resolveRelative(fullSlug, d.id)
+      window.spaNavigate(new URL(targ, window.location.toString()))
     })
     .on("mouseover", function (_, d) {
-      const neighbours: CanonicalSlug[] = data[slug].links ?? []
+      const neighbours: SimpleSlug[] = data[slug].links ?? []
       const neighbourNodes = d3
         .selectAll<HTMLElement, NodeData>(".node")
         .filter((d) => neighbours.includes(d.id))
@@ -271,7 +273,7 @@ async function renderGraph(container: string, slug: CanonicalSlug) {
 }
 
 function renderGlobalGraph() {
-  const slug = getCanonicalSlug(window)
+  const slug = getFullSlug(window)
   const container = document.getElementById("global-graph-outer")
   const sidebar = container?.closest(".sidebar") as HTMLElement
   container?.classList.add("active")

quartz/components/scripts/search.inline.ts

@@ -1,11 +1,11 @@
 import { Document } from "flexsearch"
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import { registerEscapeHandler, removeAllChildren } from "./util"
-import { CanonicalSlug, getClientSlug, resolveRelative } from "../../util/path"
+import { FullSlug, getFullSlug, resolveRelative, simplifySlug } from "../../util/path"
 
 interface Item {
   id: number
-  slug: CanonicalSlug
+  slug: FullSlug
   title: string
   content: string
 }
@@ -73,7 +73,7 @@ document.addEventListener("nav", async (e: unknown) => {
   const searchIcon = document.getElementById("search-icon")
   const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
   const results = document.getElementById("results-container")
-  const idDataMap = Object.keys(data) as CanonicalSlug[]
+  const idDataMap = Object.keys(data) as FullSlug[]
 
   function hideSearch() {
     container?.classList.remove("active")
@@ -126,7 +126,7 @@ document.addEventListener("nav", async (e: unknown) => {
     button.innerHTML = `<h3>${title}</h3><p>${content}</p>`
     button.addEventListener("click", () => {
       const targ = resolveRelative(currentSlug, slug)
-      window.spaNavigate(new URL(targ, getClientSlug(window)))
+      window.spaNavigate(new URL(targ, window.location.toString()))
     })
     return button
   }
@@ -192,7 +192,7 @@ document.addEventListener("nav", async (e: unknown) => {
     for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
       await index.addAsync(id, {
         id,
-        slug: slug as CanonicalSlug,
+        slug: slug as FullSlug,
         title: fileData.title,
         content: fileData.content,
       })

quartz/components/scripts/spa.inline.ts

@@ -1,5 +1,5 @@
 import micromorph from "micromorph"
-import { CanonicalSlug, RelativeURL, getCanonicalSlug } from "../../util/path"
+import { FullSlug, RelativeURL, getFullSlug } from "../../util/path"
 
 // adapted from `micromorph`
 // https://github.com/natemoo-re/micromorph
@@ -31,7 +31,7 @@ const getOpts = ({ target }: Event): { url: URL; scroll?: boolean } | undefined
   return { url: new URL(href), scroll: "routerNoscroll" in a.dataset ? false : undefined }
 }
 
-function notifyNav(url: CanonicalSlug) {
+function notifyNav(url: FullSlug) {
   const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } })
   document.dispatchEvent(event)
 }
@@ -81,7 +81,7 @@ async function navigate(url: URL, isBack: boolean = false) {
   const elementsToAdd = html.head.querySelectorAll(":not([spa-preserve])")
   elementsToAdd.forEach((el) => document.head.appendChild(el))
 
-  notifyNav(getCanonicalSlug(window))
+  notifyNav(getFullSlug(window))
   delete announcer.dataset.persist
 }
 
@@ -129,7 +129,7 @@ function createRouter() {
 }
 
 createRouter()
-notifyNav(getCanonicalSlug(window))
+notifyNav(getFullSlug(window))
 
 if (!customElements.get("route-announcer")) {
   const attrs = {