fix: parsing wikilinks that have codeblock anchors, scroll to anchor

quartz/components/Backlinks.tsx

@@ -1,6 +1,7 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { relativeToRoot } from "../path"
+import { stripIndex } from "./scripts/util"
 
 function Backlinks({ fileData, allFiles }: QuartzComponentProps) {
   const slug = fileData.slug!
@@ -9,7 +10,7 @@ function Backlinks({ fileData, allFiles }: QuartzComponentProps) {
     <h3>Backlinks</h3>
     <ul>
       {backlinkFiles.length > 0 ?
-        backlinkFiles.map(f => <li><a href={relativeToRoot(slug, f.slug!)} class="internal">{f.frontmatter?.title}</a></li>)
+        backlinkFiles.map(f => <li><a href={stripIndex(relativeToRoot(slug, f.slug!))} class="internal">{f.frontmatter?.title}</a></li>)
         : <li>No backlinks found</li>}
     </ul>
   </div> 

quartz/components/scripts/graph.inline.ts

@@ -1,6 +1,6 @@
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import * as d3 from 'd3'
-import { registerEscapeHandler } from "./handler"
+import { registerEscapeHandler, relative, removeAllChildren } from "./util"
 
 type NodeData = {
   id: string,
@@ -13,18 +13,6 @@ type LinkData = {
   target: string
 }
 
-function relative(from: string, to: string) {
-  const pieces = [location.protocol, '//', location.host, location.pathname]
-  const url = pieces.join('').slice(0, -from.length) + to
-  return url
-}
-
-function removeAllChildren(node: HTMLElement) {
-  while (node.firstChild) {
-    node.removeChild(node.firstChild)
-  }
-}
-
 async function renderGraph(container: string, slug: string) {
   const graph = document.getElementById(container)
   if (!graph) return
@@ -117,7 +105,6 @@ async function renderGraph(container: string, slug: string) {
 
   // calculate radius
   const color = (d: NodeData) => {
-    // TODO: does this handle the index page
     const isCurrent = d.id === slug
     return isCurrent ? "var(--secondary)" : "var(--gray)"
   }

quartz/components/scripts/popover.inline.ts

@@ -7,10 +7,11 @@ document.addEventListener("nav", () => {
     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()]
+          middleware: [
+            inline({ x: clientX, y: clientY }),
+            shift(),
+            flip()
+          ]
         })
         Object.assign(popoverElement.style, {
           left: `${x}px`,
@@ -22,11 +23,17 @@ document.addEventListener("nav", () => {
         return setPosition(link.lastChild as HTMLElement)
       }
 
-      const url = link.href
-      const anchor = new URL(url).hash
-      if (anchor.startsWith("#")) return
+      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(`${url}`)
+      const contents = await fetch(`${targetUrl}`)
         .then((res) => res.text())
         .catch((err) => {
           console.error(err)
@@ -39,7 +46,6 @@ document.addEventListener("nav", () => {
 
       const popoverElement = document.createElement("div")
       popoverElement.classList.add("popover")
-      // TODO: scroll this element if we specify a header/anchor to jump to
       const popoverInner = document.createElement("div")
       popoverInner.classList.add("popover-inner")
       popoverElement.appendChild(popoverInner)
@@ -48,6 +54,12 @@ 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' })
+      }
     })
   }
 })

quartz/components/scripts/search.inline.ts

@@ -1,6 +1,6 @@
 import { Document } from "flexsearch"
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
-import { registerEscapeHandler } from "./handler"
+import { registerEscapeHandler, relative, removeAllChildren } from "./util"
 
 interface Item {
   slug: string,
@@ -9,16 +9,6 @@ interface Item {
 }
 let index: Document<Item> | undefined = undefined
 
-function relative(from: string, to: string) {
-  const pieces = [location.protocol, '//', location.host, location.pathname]
-  const url = pieces.join('').slice(0, -from.length) + to
-  return url
-}
-
-function removeAllChildren(node: HTMLElement) {
-  node.innerHTML = ``
-}
-
 const contextWindowWords = 30
 function highlight(searchTerm: string, text: string, trim?: boolean) {
   const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "")

quartz/components/scripts/util.ts

@@ -17,3 +17,22 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb:
   document.removeEventListener("keydown", esc)
   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)
+  }
+}

quartz/components/styles/popover.scss

@@ -19,6 +19,7 @@
   padding: 1rem;
 
   & > .popover-inner {
+    position: relative;
     width: 30rem;
     height: 20rem;
     padding: 0 1rem 1rem 1rem;