quartz/components/scripts/popover.inline.ts

@@ -1,40 +1,33 @@
 import { computePosition, flip, inline, shift } from "@floating-ui/dom"
 import { normalizeRelativeURLs } from "../../util/path"
 import { fetchCanonical } from "./util"
-import { randomIdNonSecure } from "../../util/random"
 
 const p = new DOMParser()
-
 async function mouseEnterHandler(
   this: HTMLAnchorElement,
   { clientX, clientY }: { clientX: number; clientY: number },
 ) {
-  clearActivePopover()
-
   const link = this
-  const id = randomIdNonSecure()
   if (link.dataset.noPopover === "true") {
     return
   }
 
   async function setPosition(popoverElement: HTMLElement) {
     const { x, y } = await computePosition(link, popoverElement, {
-      strategy: "fixed",
       middleware: [inline({ x: clientX, y: clientY }), shift(), flip()],
     })
     Object.assign(popoverElement.style, {
-      transform: `translate(${x}px, ${y}px)`,
+      left: `${x}px`,
+      top: `${y}px`,
     })
   }
 
-  const prevPopoverElement = document.getElementById(`popover-${id}`)
-  const hasAlreadyBeenFetched = () => !!document.getElementById(`popover-${id}`)
+  const hasAlreadyBeenFetched = () =>
+    [...link.children].some((child) => child.classList.contains("popover"))
 
   // dont refetch if there's already a popover
   if (hasAlreadyBeenFetched()) {
-    setPosition(prevPopoverElement as HTMLElement)
-    prevPopoverElement?.classList.add("active-popover")
-    return
+    return setPosition(link.lastChild as HTMLElement)
   }
 
   const thisUrl = new URL(document.location.href)
@@ -89,11 +82,8 @@ async function mouseEnterHandler(
       const contents = await response.text()
       const html = p.parseFromString(contents, "text/html")
       normalizeRelativeURLs(html, targetUrl)
-      // prepend all IDs inside popovers to prevent duplicates
-      html.querySelectorAll("[id]").forEach((el) => {
-        const targetID = `popover-internal-${el.id}`
-        el.id = targetID
-      })
+      // strip all IDs from elements to prevent duplicates
+      html.querySelectorAll("[id]").forEach((el) => el.removeAttribute("id"))
       const elts = [...html.getElementsByClassName("popover-hint")]
       if (elts.length === 0) return
 
@@ -101,13 +91,10 @@ async function mouseEnterHandler(
   }
 
   setPosition(popoverElement)
-  popoverElement.id = `popover-${id}`
-  popoverElement.classList.add("active-popover")
-  document.body.appendChild(popoverElement)
+  link.appendChild(popoverElement)
 
   if (hash !== "") {
-    const targetAnchor = `#popover-internal-${hash.slice(1)}`
-    const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
+    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" })
@@ -115,23 +102,10 @@ async function mouseEnterHandler(
   }
 }
 
-function clearActivePopover() {
-  const allPopoverElements = document.querySelectorAll(".popover")
-  if (allPopoverElements) {
-    allPopoverElements.forEach((popoverElement) =>
-      popoverElement.classList.remove("active-popover"),
-    )
-  }
-}
-
 document.addEventListener("nav", () => {
   const links = [...document.getElementsByClassName("internal")] as HTMLAnchorElement[]
   for (const link of links) {
-    link.addEventListener("mouseleave", clearActivePopover)
     link.addEventListener("mouseenter", mouseEnterHandler)
-    window.addCleanup(() => {
-      link.removeEventListener("mouseenter", mouseEnterHandler)
-      link.removeEventListener("mouseleave", clearActivePopover)
-    })
+    window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler))
   }
 })

quartz/components/styles/backlinks.scss

@@ -8,12 +8,10 @@
     margin: 0;
   }
 
-  & > ul.overflow {
+  & > ul {
     list-style: none;
     padding: 0;
     margin: 0.5rem 0;
-    max-height: calc(100% - 2rem);
-    overscroll-behavior: contain;
 
     & > li {
       & > a {

quartz/components/styles/explorer.scss

@@ -118,7 +118,6 @@ button.desktop-explorer {
     list-style: none;
     margin: 0;
     padding: 0;
-    overscroll-behavior: contain;
 
     & li > a {
       color: var(--dark);

quartz/components/styles/popover.scss

@@ -16,12 +16,9 @@
 
 .popover {
   z-index: 999;
-  position: fixed;
+  position: absolute;
   overflow: visible;
   padding: 1rem;
-  left: 0;
-  top: 0;
-  will-change: transform;
 
   & > .popover-inner {
     position: relative;
@@ -38,7 +35,6 @@
     border-radius: 5px;
     box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
     overflow: auto;
-    overscroll-behavior: contain;
     white-space: normal;
     user-select: none;
     cursor: default;
@@ -81,7 +77,7 @@
   }
 }
 
-.active-popover,
+a:hover .popover,
 .popover:hover {
   animation: dropin 0.3s ease;
   animation-fill-mode: forwards;

quartz/components/styles/toc.scss

@@ -3,11 +3,18 @@
 .toc {
   display: flex;
   flex-direction: column;
+
   overflow-y: hidden;
-  min-height: 1.4rem;
-  flex: 0 0.5 auto;
+  min-height: 1.2rem;
+  flex: 0 1 auto;
   &:has(button.toc-header.collapsed) {
-    flex: 0 1 1.4rem;
+    flex: 0 1 1.2rem;
+  }
+}
+
+@media all and not ($mobile) {
+  .toc-header {
+    display: flex;
   }
 }
 
@@ -38,15 +45,13 @@ button.toc-header {
   }
 }
 
-ul.toc-content.overflow {
+ul.toc-content {
   list-style: none;
   position: relative;
   margin: 0.5rem 0;
   padding: 0;
-  max-height: calc(100% - 2rem);
-  overscroll-behavior: contain;
-  list-style: none;
 
+  list-style: none;
   & > li > a {
     color: var(--dark);
     opacity: 0.35;

quartz/plugins/transformers/ofm.ts

@@ -191,7 +191,8 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
           const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture
 
           const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
-          const displayAnchor = anchor ? `#${anchor.trim().replace(/^#+/, "")}` : ""
+          const blockRef = Boolean(rawHeader?.match(/^#?\^/)) ? "^" : ""
+          const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
           const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
           const embedDisplay = value.startsWith("!") ? "!" : ""
 

quartz/styles/base.scss

@@ -238,7 +238,6 @@ a {
         padding: 0;
         & > * {
           flex: 1;
-          max-height: 24rem;
         }
         & > .toc {
           display: none;
@@ -578,7 +577,7 @@ ol.overflow {
   clear: both;
 
   & > li.overflow-end {
-    height: 0.5rem;
+    height: 1rem;
     margin: 0;
   }