fix indexing causing main thread freeze, various polish

quartz/components/scripts/graph.inline.ts

@@ -110,12 +110,12 @@ async function renderGraph(container: string, slug: string) {
     .join("line")
     .attr("class", "link")
     .attr("stroke", "var(--lightgray)")
-    .attr("stroke-width", 2)
+    .attr("stroke-width", 1)
 
   // svg groups
   const graphNode = svg.append("g").selectAll("g").data(graphData.nodes).enter().append("g")
 
-  // calculate radius
+  // calculate color
   const color = (d: NodeData) => {
     const isCurrent = d.id === slug
     if (isCurrent) {
@@ -182,7 +182,12 @@ async function renderGraph(container: string, slug: string) {
       neighbourNodes.transition().duration(200).attr("fill", color)
 
       // highlight links
-      linkNodes.transition().duration(200).attr("stroke", "var(--gray)")
+      linkNodes
+        .transition()
+        .duration(200)
+        .attr("stroke", "var(--gray)")
+        .attr("stroke-width", 1)
+
 
       const bigFont = fontSize * 1.5
 
@@ -220,7 +225,7 @@ async function renderGraph(container: string, slug: string) {
   const labels = graphNode
     .append("text")
     .attr("dx", 0)
-    .attr("dy", (d) => nodeRadius(d) + 8 + "px")
+    .attr("dy", (d) => nodeRadius(d) - 8 + "px")
     .attr("text-anchor", "middle")
     .text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
     .style('opacity', (opacityScale - 1) / 3.75)
@@ -266,12 +271,11 @@ async function renderGraph(container: string, slug: string) {
   })
 }
 
-async function renderGlobalGraph() {
+function renderGlobalGraph() {
   const slug = document.body.dataset["slug"]!
-  await renderGraph("global-graph-container", slug)
   const container = document.getElementById("global-graph-outer")
   container?.classList.add("active")
-
+  renderGraph("global-graph-container", slug)
 
   function hideGlobalGraph() {
     container?.classList.remove("active")

quartz/components/scripts/popover.inline.ts

@@ -19,69 +19,73 @@ export function normalizeRelativeURLs(
   )
 }
 
-document.addEventListener("nav", () => {
-  const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
-  const p = new DOMParser()
-  for (const link of links) {
-    link.addEventListener("mouseenter", async ({ clientX, clientY }) => {
-      async function setPosition(popoverElement: HTMLElement) {
-        const { x, y } = await computePosition(link, popoverElement, {
-          middleware: [
-            inline({ x: clientX, y: clientY }),
-            shift(),
-            flip()
-          ]
-        })
-        Object.assign(popoverElement.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        })
-      }
-
-      if (link.dataset.fetchedPopover === "true") {
-        return setPosition(link.lastChild as HTMLElement)
-      }
-
-      const thisUrl = new URL(document.location.href)
-      thisUrl.hash = ""
-      thisUrl.search = ""
-      const targetUrl = new URL(link.href)
-      const hash = targetUrl.hash
-      targetUrl.hash = ""
-      targetUrl.search = ""
-      // prevent hover of the same page
-      if (thisUrl.toString() === targetUrl.toString()) return
-
-      const contents = await fetch(`${targetUrl}`)
-        .then((res) => res.text())
-        .catch((err) => {
-          console.error(err)
-        })
-
-      if (!contents) return
-      const html = p.parseFromString(contents, "text/html")
-      normalizeRelativeURLs(html, targetUrl)
-      const elts = [...html.getElementsByClassName("popover-hint")]
-      if (elts.length === 0) return
-
-      const popoverElement = document.createElement("div")
-      popoverElement.classList.add("popover")
-      const popoverInner = document.createElement("div")
-      popoverInner.classList.add("popover-inner")
-      popoverElement.appendChild(popoverInner)
-      elts.forEach(elt => popoverInner.appendChild(elt))
-
-      setPosition(popoverElement)
-      link.appendChild(popoverElement)
-      link.dataset.fetchedPopover = "true"
-
-      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' })
-        }
-      }
+const p = new DOMParser()
+async function mouseEnterHandler(this: HTMLLinkElement, { clientX, clientY }: { clientX: number, clientY: number }) {
+  const link = this
+  async function setPosition(popoverElement: HTMLElement) {
+    const { x, y } = await computePosition(link, popoverElement, {
+      middleware: [
+        inline({ x: clientX, y: clientY }),
+        shift(),
+        flip()
+      ]
+    })
+    Object.assign(popoverElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
     })
   }
+
+  // dont refetch if there's already a popover
+  if ([...link.children].some(child => child.classList.contains("popover"))) {
+    return setPosition(link.lastChild as HTMLElement)
+  }
+
+  const thisUrl = new URL(document.location.href)
+  thisUrl.hash = ""
+  thisUrl.search = ""
+  const targetUrl = new URL(link.href)
+  const hash = targetUrl.hash
+  targetUrl.hash = ""
+  targetUrl.search = ""
+  // prevent hover of the same page
+  if (thisUrl.toString() === targetUrl.toString()) return
+
+  const contents = await fetch(`${targetUrl}`)
+    .then((res) => res.text())
+    .catch((err) => {
+      console.error(err)
+    })
+
+  if (!contents) return
+  const html = p.parseFromString(contents, "text/html")
+  normalizeRelativeURLs(html, targetUrl)
+  const elts = [...html.getElementsByClassName("popover-hint")]
+  if (elts.length === 0) return
+
+  const popoverElement = document.createElement("div")
+  popoverElement.classList.add("popover")
+  const popoverInner = document.createElement("div")
+  popoverInner.classList.add("popover-inner")
+  popoverElement.appendChild(popoverInner)
+  elts.forEach(elt => popoverInner.appendChild(elt))
+
+  setPosition(popoverElement)
+  link.appendChild(popoverElement)
+
+  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' })
+    }
+  }
+}
+
+document.addEventListener("nav", () => {
+  const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
+  for (const link of links) {
+    link.removeEventListener("mouseenter", mouseEnterHandler)
+    link.addEventListener("mouseenter", mouseEnterHandler)
+  }
 })

quartz/components/scripts/search.inline.ts

@@ -11,7 +11,8 @@ let index: Document<Item> | undefined = undefined
 
 const contextWindowWords = 30
 function highlight(searchTerm: string, text: string, trim?: boolean) {
-  const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "")
+  // try to highlight longest tokens first
+  const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "").sort((a, b) => b.length - a.length)
   let tokenizedText = text
     .split(/\s+/)
     .filter(t => t !== "")
@@ -42,7 +43,7 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
     // see if this tok is prefixed by any search terms 
     for (const searchTok of tokenizedTerms) {
       if (tok.toLowerCase().includes(searchTok.toLowerCase())) {
-        const regex = new RegExp(searchTok, "gi")
+        const regex = new RegExp(searchTok.toLowerCase(), "gi")
         return tok.replace(regex, `<span class="highlight">$&</span>`)
       }
     }
@@ -81,7 +82,7 @@ document.addEventListener("nav", async (e: unknown) => {
     })
 
     for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
-      index.add({
+      await index.addAsync(slug, {
         slug,
         title: fileData.title,
         content: fileData.content
@@ -169,7 +170,6 @@ document.addEventListener("nav", async (e: unknown) => {
     displayResults(finalResults)
   }
 
-
   document.removeEventListener("keydown", shortcutHandler)
   document.addEventListener("keydown", shortcutHandler)
   searchIcon?.removeEventListener("click", showSearch)