finish path refactoring, add sourcemap + better trace support

quartz/components/scripts/graph.inline.ts

@@ -1,7 +1,7 @@
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import * as d3 from 'd3'
-import { registerEscapeHandler, clientSideRelativePath, removeAllChildren } from "./util"
-import { CanonicalSlug } from "../../path"
+import { registerEscapeHandler, removeAllChildren } from "./util"
+import { CanonicalSlug, getCanonicalSlug, getClientSlug, resolveRelative } from "../../path"
 
 type NodeData = {
   id: CanonicalSlug,
@@ -25,7 +25,7 @@ function addToVisited(slug: CanonicalSlug) {
   localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
 }
 
-async function renderGraph(container: string, slug: string) {
+async function renderGraph(container: string, slug: CanonicalSlug) {
   const visited = getVisited()
   const graph = document.getElementById(container)
   if (!graph) return
@@ -50,18 +50,17 @@ async function renderGraph(container: string, slug: string) {
     const outgoing = details.links ?? []
     for (const dest of outgoing) {
       if (src in data && dest in data) {
-        links.push({ source: src, target: dest })
+        links.push({ source: src as CanonicalSlug, target: dest })
       }
     }
   }
 
-  const neighbourhood = new Set()
-
-  const wl = [slug, "__SENTINEL"]
+  const neighbourhood = new Set<CanonicalSlug>()
+  const wl: (CanonicalSlug | "__SENTINEL")[] = [slug, "__SENTINEL"]
   if (depth >= 0) {
     while (depth >= 0 && wl.length > 0) {
       // compute neighbours
-      const cur = wl.shift()
+      const cur = wl.shift()!
       if (cur === "__SENTINEL") {
         depth--
         wl.push("__SENTINEL")
@@ -73,11 +72,11 @@ async function renderGraph(container: string, slug: string) {
       }
     }
   } else {
-    Object.keys(data).forEach(id => neighbourhood.add(id))
+    Object.keys(data).forEach(id => neighbourhood.add(id as CanonicalSlug))
   }
 
   const graphData: { nodes: NodeData[], links: LinkData[] } = {
-    nodes: Object.keys(data).filter(id => neighbourhood.has(id)).map(url => ({ id: url, text: data[url]?.title ?? url, tags: data[url]?.tags ?? [] })),
+    nodes: [...neighbourhood].map(url => ({ id: url, text: data[url]?.title ?? url, tags: data[url]?.tags ?? [] })),
     links: links.filter((l) => neighbourhood.has(l.source) && neighbourhood.has(l.target))
   }
 
@@ -168,12 +167,13 @@ async function renderGraph(container: string, slug: string) {
     .attr("fill", color)
     .style("cursor", "pointer")
     .on("click", (_, d) => {
-      const targ = clientSideRelativePath(slug, d.id)
-      window.spaNavigate(new URL(targ))
+      const targ = resolveRelative(slug, d.id)
+      window.spaNavigate(new URL(targ, getClientSlug(window)))
     })
     .on("mouseover", function(_, d) {
-      const neighbours: string[] = data[slug].links ?? []
+      const neighbours: CanonicalSlug[] = data[slug].links ?? []
       const neighbourNodes = d3.selectAll<HTMLElement, NodeData>(".node").filter((d) => neighbours.includes(d.id))
+      console.log(neighbourNodes)
       const currentId = d.id
       const linkNodes = d3
         .selectAll(".link")
@@ -273,7 +273,7 @@ async function renderGraph(container: string, slug: string) {
 }
 
 function renderGlobalGraph() {
-  const slug = document.body.dataset["slug"]!
+  const slug = getCanonicalSlug(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,13 +1,14 @@
 import { Document } from "flexsearch"
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
-import { registerEscapeHandler, clientSideRelativePath, removeAllChildren } from "./util"
-import { CanonicalSlug } from "../../path"
+import { registerEscapeHandler, removeAllChildren } from "./util"
+import { CanonicalSlug, getClientSlug, resolveRelative } from "../../path"
 
 interface Item {
   slug: CanonicalSlug,
   title: string,
   content: string,
 }
+
 let index: Document<Item> | undefined = undefined
 
 const contextWindowWords = 30
@@ -113,8 +114,8 @@ document.addEventListener("nav", async (e: unknown) => {
     button.id = slug
     button.innerHTML = `<h3>${title}</h3><p>${content}</p>`
     button.addEventListener('click', () => {
-      const targ = clientSideRelativePath(currentSlug, slug)
-      window.spaNavigate(new URL(targ))
+      const targ = resolveRelative(currentSlug, slug)
+      window.spaNavigate(new URL(targ, getClientSlug(window)))
     })
     return button
   }
@@ -137,9 +138,9 @@ document.addEventListener("nav", async (e: unknown) => {
   function onType(e: HTMLElementEventMap["input"]) {
     const term = (e.target as HTMLInputElement).value
     const searchResults = index?.search(term, numSearchResults) ?? []
-    const getByField = (field: string): string[] => {
+    const getByField = (field: string): CanonicalSlug[] => {
       const results = searchResults.filter((x) => x.field === field)
-      return results.length === 0 ? [] : [...results[0].result] as string[]
+      return results.length === 0 ? [] : [...results[0].result] as CanonicalSlug[]
     }
 
     // order titles ahead of content

quartz/components/scripts/spa.inline.ts

@@ -1,5 +1,5 @@
 import micromorph from "micromorph"
-import { CanonicalSlug, RelativeURL } from "../../path"
+import { CanonicalSlug, RelativeURL, getCanonicalSlug } from "../../path"
 
 // adapted from `micromorph`
 // https://github.com/natemoo-re/micromorph
@@ -43,6 +43,7 @@ async function navigate(url: URL, isBack: boolean = false) {
     .catch(() => {
       window.location.assign(url)
     })
+
   if (!contents) return;
   if (!isBack) {
     history.pushState({}, "", url)
@@ -70,7 +71,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(document.body.dataset.slug!)
+  notifyNav(getCanonicalSlug(window))
   delete announcer.dataset.persist
 }
 
@@ -117,7 +118,7 @@ function createRouter() {
 }
 
 createRouter()
-notifyNav(document.body.dataset.slug!)
+notifyNav(getCanonicalSlug(window))
 
 if (!customElements.get('route-announcer')) {
   const attrs = {