base path refactor, more docs

quartz/components/scripts/graph.inline.ts

@@ -1,24 +1,25 @@
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import * as d3 from 'd3'
-import { registerEscapeHandler, relative, removeAllChildren } from "./util"
+import { registerEscapeHandler, clientSideRelativePath, removeAllChildren } from "./util"
+import { CanonicalSlug } from "../../path"
 
 type NodeData = {
-  id: string,
+  id: CanonicalSlug,
   text: string,
   tags: string[]
 } & d3.SimulationNodeDatum
 
 type LinkData = {
-  source: string,
-  target: string
+  source: CanonicalSlug,
+  target: CanonicalSlug
 }
 
 const localStorageKey = "graph-visited"
-function getVisited(): Set<string> {
+function getVisited(): Set<CanonicalSlug> {
   return new Set(JSON.parse(localStorage.getItem(localStorageKey) ?? "[]"))
 }
 
-function addToVisited(slug: string) {
+function addToVisited(slug: CanonicalSlug) {
   const visited = getVisited()
   visited.add(slug)
   localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
@@ -167,7 +168,7 @@ async function renderGraph(container: string, slug: string) {
     .attr("fill", color)
     .style("cursor", "pointer")
     .on("click", (_, d) => {
-      const targ = relative(slug, d.id)
+      const targ = clientSideRelativePath(slug, d.id)
       window.spaNavigate(new URL(targ))
     })
     .on("mouseover", function(_, d) {

quartz/components/scripts/search.inline.ts

@@ -1,9 +1,10 @@
 import { Document } from "flexsearch"
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
-import { registerEscapeHandler, relative, removeAllChildren } from "./util"
+import { registerEscapeHandler, clientSideRelativePath, removeAllChildren } from "./util"
+import { CanonicalSlug } from "../../path"
 
 interface Item {
-  slug: string,
+  slug: CanonicalSlug,
   title: string,
   content: string,
 }
@@ -100,7 +101,7 @@ document.addEventListener("nav", async (e: unknown) => {
     }
   }
 
-  const formatForDisplay = (term: string, slug: string) => ({
+  const formatForDisplay = (term: string, slug: CanonicalSlug) => ({
     slug,
     title: highlight(term, data[slug].title ?? ""),
     content: highlight(term, data[slug].content ?? "", true),
@@ -112,7 +113,7 @@ document.addEventListener("nav", async (e: unknown) => {
     button.id = slug
     button.innerHTML = `<h3>${title}</h3><p>${content}</p>`
     button.addEventListener('click', () => {
-      const targ = relative(currentSlug, slug)
+      const targ = clientSideRelativePath(currentSlug, slug)
       window.spaNavigate(new URL(targ))
     })
     return button
@@ -142,7 +143,7 @@ document.addEventListener("nav", async (e: unknown) => {
     }
 
     // order titles ahead of content
-    const allIds: Set<string> = new Set([...getByField("title"), ...getByField("content")])
+    const allIds: Set<CanonicalSlug> = new Set([...getByField("title"), ...getByField("content")])
     const finalResults = [...allIds].map(id => formatForDisplay(term, id))
     displayResults(finalResults)
   }
@@ -178,7 +179,7 @@ document.addEventListener("nav", async (e: unknown) => {
 
     for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
       await index.addAsync(slug, {
-        slug,
+        slug: slug as CanonicalSlug,
         title: fileData.title,
         content: fileData.content
       })

quartz/components/scripts/spa.inline.ts

@@ -1,4 +1,5 @@
 import micromorph from "micromorph"
+import { CanonicalSlug, RelativeURL } from "../../path"
 
 // adapted from `micromorph`
 // https://github.com/natemoo-re/micromorph
@@ -29,7 +30,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: string) {
+function notifyNav(url: CanonicalSlug) {
   const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } })
   document.dispatchEvent(event)
 }
@@ -100,7 +101,7 @@ function createRouter() {
   }
 
   return new class Router {
-    go(pathname: string) {
+    go(pathname: RelativeURL) {
       const url = new URL(pathname, window.location.toString())
       return navigate(url, false)
     }

quartz/components/scripts/util.ts

@@ -18,19 +18,6 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb:
   document.addEventListener('keydown', esc)
 }
 
-export function stripIndex(s: string): string {
-  return s.endsWith("index") ? s.slice(0, -"index".length) : s
-}
-
-export function relative(from: string, to: string) {
-  from = encodeURI(stripIndex(from))
-  to = encodeURI(stripIndex(to))
-  const start = [location.protocol, '//', location.host, location.pathname].join('')
-  const trimEnd = from.length === 0 ? start.length : -from.length
-  const url = start.slice(0, trimEnd) + to
-  return url
-}
-
 export function removeAllChildren(node: HTMLElement) {
   while (node.firstChild) {
     node.removeChild(node.firstChild)