fix(popover): clear popovers more aggressively, use href as id

Bumps the production-dependencies group with 6 updates:

| Package | From | To |
| --- | --- | --- |
| [preact](https://github.com/preactjs/preact) | `10.26.4` | `10.26.5` |
| [remark-rehype](https://github.com/remarkjs/remark-rehype) | `11.1.1` | `11.1.2` |
| [sharp](https://github.com/lovell/sharp) | `0.33.5` | `0.34.1` |
| [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) | `22.13.14` | `22.14.0` |
| [@types/ws](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ws) | `8.18.0` | `8.18.1` |
| [typescript](https://github.com/microsoft/TypeScript) | `5.8.2` | `5.8.3` |


Updates `preact` from 10.26.4 to 10.26.5
- [Release notes](https://github.com/preactjs/preact/releases)
- [Commits](https://github.com/preactjs/preact/compare/10.26.4...10.26.5)

Updates `remark-rehype` from 11.1.1 to 11.1.2
- [Release notes](https://github.com/remarkjs/remark-rehype/releases)
- [Commits](https://github.com/remarkjs/remark-rehype/compare/11.1.1...11.1.2)

Updates `sharp` from 0.33.5 to 0.34.1
- [Release notes](https://github.com/lovell/sharp/releases)
- [Commits](https://github.com/lovell/sharp/compare/v0.33.5...v0.34.1)

Updates `@types/node` from 22.13.14 to 22.14.0
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

Updates `@types/ws` from 8.18.0 to 8.18.1
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ws)

Updates `typescript` from 5.8.2 to 5.8.3
- [Release notes](https://github.com/microsoft/TypeScript/releases)
- [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release-publish.yml)
- [Commits](https://github.com/microsoft/TypeScript/commits)

---
updated-dependencies:
- dependency-name: preact
  dependency-version: 10.26.5
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: production-dependencies
- dependency-name: remark-rehype
  dependency-version: 11.1.2
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: production-dependencies
- dependency-name: sharp
  dependency-version: 0.34.1
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: production-dependencies
- dependency-name: "@types/node"
  dependency-version: 22.14.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: production-dependencies
- dependency-name: "@types/ws"
  dependency-version: 8.18.1
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: production-dependencies
- dependency-name: typescript
  dependency-version: 5.8.3
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: production-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

docs/features/breadcrumbs.md

@@ -19,7 +19,6 @@ Component.Breadcrumbs({
   spacerSymbol: "❯", // symbol between crumbs
   rootName: "Home", // name of first/root element
   resolveFrontmatterTitle: true, // whether to resolve folder names through frontmatter titles
-  hideOnRoot: true, // whether to hide breadcrumbs on root `index.md` page
   showCurrentPage: true, // whether to display the current page in the breadcrumbs
 })
 ```

docs/features/explorer.md

@@ -131,7 +131,8 @@ Using this example, the display names of all `FileNodes` (folders + files) will
 ```ts title="quartz.layout.ts"
 Component.Explorer({
   mapFn: (node) => {
-    return (node.displayName = node.displayName.toUpperCase())
+    node.displayName = node.displayName.toUpperCase()
+    return node
   },
 })
 ```
@@ -145,8 +146,12 @@ Note that this example filters on the title but you can also do it via slug or a
 Component.Explorer({
   filterFn: (node) => {
     // set containing names of everything you want to filter out
-    const omit = new Set(["authoring content", "tags", "hosting"])
+    const omit = new Set(["authoring content", "tags", "advanced"])
-    return !omit.has(node.data.title.toLowerCase())
+
+    // can also use node.slug or by anything on node.data
+    // note that node.data is only present for files that exist on disk
+    // (e.g. implicit folder nodes that have no associated index.md)
+    return !omit.has(node.displayName.toLowerCase())
   },
 })
 ```
@@ -159,7 +164,7 @@ You can access the tags of a file by `node.data.tags`.
 Component.Explorer({
   filterFn: (node) => {
     // exclude files with the tag "explorerexclude"
-    return node.data.tags.includes("explorerexclude") !== true
+    return node.data.tags?.includes("explorerexclude") !== true
   },
 })
 ```

docs/index.md

@@ -31,7 +31,7 @@ If you prefer instructions in a video format you can try following Nicole van de
 
 ## 🔧 Features
 
-- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]], [[comments]] and [many more](./features/) right out of the box
+- [[Obsidian compatibility]], [[full-text search]], [[graph view]], [[wikilinks|wikilinks, transclusions]], [[backlinks]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]], [[comments]] and [many more](./features/) right out of the box
 - Hot-reload on configuration edits and incremental rebuilds for content edits
 - Simple JSX layouts and [[creating components|page components]]
 - [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes

docs/layout-components.md

@@ -60,3 +60,34 @@ The `DesktopOnly` component is the counterpart to `MobileOnly`. It makes its chi
 ```typescript
 Component.DesktopOnly(Component.TableOfContents())
 ```
+
+## `ConditionalRender` Component
+
+The `ConditionalRender` component is a wrapper that conditionally renders its child component based on a provided condition function. This is useful for creating dynamic layouts where components should only appear under certain conditions.
+
+```typescript
+type ConditionalRenderConfig = {
+  component: QuartzComponent
+  condition: (props: QuartzComponentProps) => boolean
+}
+```
+
+### Example Usage
+
+```typescript
+Component.ConditionalRender({
+  component: Component.Search(),
+  condition: (props) => props.displayClass !== "fullpage",
+})
+```
+
+The example above would only render the Search component when the page is not in fullpage mode.
+
+```typescript
+Component.ConditionalRender({
+  component: Component.Breadcrumbs(),
+  condition: (page) => page.fileData.slug !== "index",
+})
+```
+
+The example above would hide breadcrumbs on the root `index.md` page.

package.json

@@ -56,23 +56,23 @@
     "hast-util-to-string": "^3.0.1",
     "is-absolute-url": "^4.0.1",
     "js-yaml": "^4.1.0",
-    "lightningcss": "^1.29.2",
+    "lightningcss": "^1.29.3",
     "mdast-util-find-and-replace": "^3.0.2",
     "mdast-util-to-hast": "^13.2.0",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
     "minimatch": "^10.0.1",
-    "pixi.js": "^8.8.1",
+    "pixi.js": "^8.9.1",
-    "preact": "^10.26.4",
+    "preact": "^10.26.5",
     "preact-render-to-string": "^6.5.13",
     "pretty-bytes": "^6.1.1",
     "pretty-time": "^1.1.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-citation": "^2.2.2",
+    "rehype-citation": "^2.3.1",
     "rehype-katex": "^7.0.1",
     "rehype-mathjax": "^7.1.0",
-    "rehype-pretty-code": "^0.14.0",
+    "rehype-pretty-code": "^0.14.1",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
@@ -81,13 +81,13 @@
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.1",
+    "remark-rehype": "^11.1.2",
     "remark-smartypants": "^3.0.2",
     "rfdc": "^1.4.1",
     "rimraf": "^6.0.1",
-    "satori": "^0.12.1",
+    "satori": "^0.12.2",
     "serve-handler": "^6.1.6",
-    "sharp": "^0.33.5",
+    "sharp": "^0.34.1",
     "shiki": "^1.26.2",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
@@ -103,14 +103,14 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.13.10",
+    "@types/node": "^22.14.0",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
-    "@types/ws": "^8.18.0",
+    "@types/ws": "^8.18.1",
     "@types/yargs": "^17.0.33",
-    "esbuild": "^0.25.1",
+    "esbuild": "^0.25.2",
     "prettier": "^3.5.3",
     "tsx": "^4.19.3",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.3"
   }
 }

quartz.layout.ts

@@ -17,7 +17,10 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
-    Component.Breadcrumbs(),
+    Component.ConditionalRender({
+      component: Component.Breadcrumbs(),
+      condition: (page) => page.fileData.slug !== "index",
+    }),
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),

quartz/components/Breadcrumbs.tsx

@@ -1,8 +1,8 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
-import { FullSlug, SimpleSlug, joinSegments, resolveRelative } from "../util/path"
+import { FullSlug, SimpleSlug, resolveRelative, simplifySlug } from "../util/path"
-import { QuartzPluginData } from "../plugins/vfile"
 import { classNames } from "../util/lang"
+import { trieFromAllFiles } from "../util/ctx"
 
 type CrumbData = {
   displayName: string
@@ -22,10 +22,6 @@ interface BreadcrumbOptions {
    * Whether to look up frontmatter title for folders (could cause performance problems with big vaults)
    */
   resolveFrontmatterTitle: boolean
-  /**
-   * Whether to display breadcrumbs on root `index.md`
-   */
-  hideOnRoot: boolean
   /**
    * Whether to display the current page in the breadcrumbs.
    */
@@ -36,7 +32,6 @@ const defaultOptions: BreadcrumbOptions = {
   spacerSymbol: "❯",
   rootName: "Home",
   resolveFrontmatterTitle: true,
-  hideOnRoot: true,
   showCurrentPage: true,
 }
 
@@ -48,78 +43,37 @@ function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: Simpl
 }
 
 export default ((opts?: Partial<BreadcrumbOptions>) => {
-  // Merge options with defaults
   const options: BreadcrumbOptions = { ...defaultOptions, ...opts }
-
-  // computed index of folder name to its associated file data
-  let folderIndex: Map<string, QuartzPluginData> | undefined
-
   const Breadcrumbs: QuartzComponent = ({
     fileData,
     allFiles,
     displayClass,
+    ctx,
   }: QuartzComponentProps) => {
-    // Hide crumbs on root if enabled
+    const trie = (ctx.trie ??= trieFromAllFiles(allFiles))
-    if (options.hideOnRoot && fileData.slug === "index") {
+    const slugParts = fileData.slug!.split("/")
-      return <></>
+    const pathNodes = trie.ancestryChain(slugParts)
+
+    if (!pathNodes) {
+      return null
     }
 
-    // Format entry for root element
+    const crumbs: CrumbData[] = pathNodes.map((node, idx) => {
-    const firstEntry = formatCrumb(options.rootName, fileData.slug!, "/" as SimpleSlug)
+      const crumb = formatCrumb(node.displayName, fileData.slug!, simplifySlug(node.slug))
-    const crumbs: CrumbData[] = [firstEntry]
+      if (idx === 0) {
-
+        crumb.displayName = options.rootName
-    if (!folderIndex && options.resolveFrontmatterTitle) {
-      folderIndex = new Map()
-      // construct the index for the first time
-      for (const file of allFiles) {
-        const folderParts = file.slug?.split("/")
-        if (folderParts?.at(-1) === "index") {
-          folderIndex.set(folderParts.slice(0, -1).join("/"), file)
-        }
-      }
-    }
-
-    // Split slug into hierarchy/parts
-    const slugParts = fileData.slug?.split("/")
-    if (slugParts) {
-      // is tag breadcrumb?
-      const isTagPath = slugParts[0] === "tags"
-
-      // full path until current part
-      let currentPath = ""
-
-      for (let i = 0; i < slugParts.length - 1; i++) {
-        let curPathSegment = slugParts[i]
-
-        // Try to resolve frontmatter folder title
-        const currentFile = folderIndex?.get(slugParts.slice(0, i + 1).join("/"))
-        if (currentFile) {
-          const title = currentFile.frontmatter!.title
-          if (title !== "index") {
-            curPathSegment = title
-          }
-        }
-
-        // Add current slug to full path
-        currentPath = joinSegments(currentPath, slugParts[i])
-        const includeTrailingSlash = !isTagPath || i < slugParts.length - 1
-
-        // Format and add current crumb
-        const crumb = formatCrumb(
-          curPathSegment,
-          fileData.slug!,
-          (currentPath + (includeTrailingSlash ? "/" : "")) as SimpleSlug,
-        )
-        crumbs.push(crumb)
       }
 
-      // Add current file to crumb (can directly use frontmatter title)
+      // For last node (current page), set empty path
-      if (options.showCurrentPage && slugParts.at(-1) !== "index") {
+      if (idx === pathNodes.length - 1) {
-        crumbs.push({
+        crumb.path = ""
-          displayName: fileData.frontmatter!.title,
-          path: "",
-        })
       }
+
+      return crumb
+    })
+
+    if (!options.showCurrentPage) {
+      crumbs.pop()
     }
 
     return (

quartz/components/ConditionalRender.tsx

@@ -0,0 +1,22 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+type ConditionalRenderConfig = {
+  component: QuartzComponent
+  condition: (props: QuartzComponentProps) => boolean
+}
+
+export default ((config: ConditionalRenderConfig) => {
+  const ConditionalRender: QuartzComponent = (props: QuartzComponentProps) => {
+    if (config.condition(props)) {
+      return <config.component {...props} />
+    }
+
+    return null
+  }
+
+  ConditionalRender.afterDOMLoaded = config.component.afterDOMLoaded
+  ConditionalRender.beforeDOMLoaded = config.component.beforeDOMLoaded
+  ConditionalRender.css = config.component.css
+
+  return ConditionalRender
+}) satisfies QuartzComponentConstructor<ConditionalRenderConfig>

quartz/components/OverflowList.tsx

@@ -1,5 +1,4 @@
 import { JSX } from "preact"
-import { randomIdNonSecure } from "../util/random"
 
 const OverflowList = ({
   children,
@@ -13,8 +12,9 @@ const OverflowList = ({
   )
 }
 
+let numExplorers = 0
 export default () => {
-  const id = randomIdNonSecure()
+  const id = `list-${numExplorers++}`
 
   return {
     OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => (

quartz/components/PageList.tsx

@@ -7,6 +7,26 @@ import { GlobalConfiguration } from "../cfg"
 export type SortFn = (f1: QuartzPluginData, f2: QuartzPluginData) => number
 
 export function byDateAndAlphabetical(cfg: GlobalConfiguration): SortFn {
+  return (f1, f2) => {
+    // Sort by date/alphabetical
+    if (f1.dates && f2.dates) {
+      // sort descending
+      return getDate(cfg, f2)!.getTime() - getDate(cfg, f1)!.getTime()
+    } else if (f1.dates && !f2.dates) {
+      // prioritize files with dates
+      return -1
+    } else if (!f1.dates && f2.dates) {
+      return 1
+    }
+
+    // otherwise, sort lexographically by title
+    const f1Title = f1.frontmatter?.title.toLowerCase() ?? ""
+    const f2Title = f2.frontmatter?.title.toLowerCase() ?? ""
+    return f1Title.localeCompare(f2Title)
+  }
+}
+
+export function byDateAndAlphabeticalFolderFirst(cfg: GlobalConfiguration): SortFn {
   return (f1, f2) => {
     // Sort folders first
     const f1IsFolder = isFolderPath(f1.slug ?? "")
@@ -38,7 +58,7 @@ type Props = {
 } & QuartzComponentProps
 
 export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort }: Props) => {
-  const sorter = sort ?? byDateAndAlphabetical(cfg)
+  const sorter = sort ?? byDateAndAlphabeticalFolderFirst(cfg)
   let list = allFiles.sort(sorter)
   if (limit) {
     list = list.slice(0, limit)

quartz/components/TableOfContents.tsx

@@ -53,17 +53,15 @@ export default ((opts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
+        <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
-          <OverflowList>
+          {fileData.toc.map((tocEntry) => (
-            {fileData.toc.map((tocEntry) => (
+            <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
-              <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
+              <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
-                <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
+                {tocEntry.text}
-                  {tocEntry.text}
+              </a>
-                </a>
+            </li>
-              </li>
+          ))}
-            ))}
+        </OverflowList>
-          </OverflowList>
-        </div>
       </div>
     )
   }

quartz/components/TagList.tsx

@@ -1,15 +1,14 @@
-import { pathToRoot, slugTag } from "../util/path"
+import { FullSlug, resolveRelative } from "../util/path"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 
 const TagList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
   const tags = fileData.frontmatter?.tags
-  const baseDir = pathToRoot(fileData.slug!)
   if (tags && tags.length > 0) {
     return (
       <ul class={classNames(displayClass, "tags")}>
         {tags.map((tag) => {
-          const linkDest = baseDir + `/tags/${slugTag(tag)}`
+          const linkDest = resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)
           return (
             <li>
               <a href={linkDest} class="internal tag-link">

quartz/components/index.ts

@@ -21,6 +21,7 @@ import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import Flex from "./Flex"
+import ConditionalRender from "./ConditionalRender"
 
 export {
   ArticleTitle,
@@ -46,4 +47,5 @@ export {
   Breadcrumbs,
   Comments,
   Flex,
+  ConditionalRender,
 }

quartz/components/pages/FolderContent.tsx

@@ -8,7 +8,8 @@ import { i18n } from "../../i18n"
 import { QuartzPluginData } from "../../plugins/vfile"
 import { ComponentChildren } from "preact"
 import { concatenateResources } from "../../util/resources"
-import { FileTrieNode } from "../../util/fileTrie"
+import { trieFromAllFiles } from "../../util/ctx"
+
 interface FolderContentOptions {
   /**
    * Whether to display number of folders
@@ -25,31 +26,11 @@ const defaultOptions: FolderContentOptions = {
 
 export default ((opts?: Partial<FolderContentOptions>) => {
   const options: FolderContentOptions = { ...defaultOptions, ...opts }
-  let trie: FileTrieNode<
-    QuartzPluginData & {
-      slug: string
-      title: string
-      filePath: string
-    }
-  >
 
   const FolderContent: QuartzComponent = (props: QuartzComponentProps) => {
     const { tree, fileData, allFiles, cfg } = props
 
-    if (!trie) {
+    const trie = (props.ctx.trie ??= trieFromAllFiles(allFiles))
-      trie = new FileTrieNode([])
-      allFiles.forEach((file) => {
-        if (file.frontmatter) {
-          trie.add({
-            ...file,
-            slug: file.slug!,
-            title: file.frontmatter.title,
-            filePath: file.filePath!,
-          })
-        }
-      })
-    }
-
     const folder = trie.findNode(fileData.slug!.split("/"))
     if (!folder) {
       return null

quartz/components/pages/TagContent.tsx

@@ -1,7 +1,7 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
 import style from "../styles/listPage.scss"
 import { PageList, SortFn } from "../PageList"
-import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
+import { FullSlug, getAllSegmentPrefixes, resolveRelative, simplifySlug } from "../../util/path"
 import { QuartzPluginData } from "../../plugins/vfile"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
@@ -74,10 +74,13 @@ export default ((opts?: Partial<TagContentOptions>) => {
                   ? contentPage?.description
                   : htmlToJsx(contentPage.filePath!, root)
 
+              const tagListingPage = `/tags/${tag}` as FullSlug
+              const href = resolveRelative(fileData.slug!, tagListingPage)
+
               return (
                 <div>
                   <h2>
-                    <a class="internal tag-link" href={`../tags/${tag}`}>
+                    <a class="internal tag-link" href={href}>
                       {tag}
                     </a>
                   </h2>
@@ -112,8 +115,8 @@ export default ((opts?: Partial<TagContentOptions>) => {
       }
 
       return (
-        <div class={classes}>
+        <div class="popover-hint">
-          <article class="popover-hint">{content}</article>
+          <article class={classes}>{content}</article>
           <div class="page-listing">
             <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
             <div>

quartz/components/scripts/popover.inline.ts

@@ -3,6 +3,7 @@ import { normalizeRelativeURLs } from "../../util/path"
 import { fetchCanonical } from "./util"
 
 const p = new DOMParser()
+
 async function mouseEnterHandler(
   this: HTMLAnchorElement,
   { clientX, clientY }: { clientX: number; clientY: number },
@@ -14,29 +15,42 @@ async function mouseEnterHandler(
 
   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, {
-      left: `${x}px`,
+      transform: `translate(${x.toFixed()}px, ${y.toFixed()}px)`,
-      top: `${y}px`,
     })
   }
 
-  const hasAlreadyBeenFetched = () =>
+  function showPopover(popoverElement: HTMLElement) {
-    [...link.children].some((child) => child.classList.contains("popover"))
+    clearActivePopover()
+    popoverElement.classList.add("active-popover")
+    setPosition(popoverElement as HTMLElement)
 
-  // dont refetch if there's already a popover
+    if (hash !== "") {
-  if (hasAlreadyBeenFetched()) {
+      const targetAnchor = `#popover-internal-${hash.slice(1)}`
-    return setPosition(link.lastChild as HTMLElement)
+      const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
+      if (heading) {
+        // leave ~12px of buffer when scrolling to a heading
+        popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })
+      }
+    }
   }
 
-  const thisUrl = new URL(document.location.href)
-  thisUrl.hash = ""
-  thisUrl.search = ""
   const targetUrl = new URL(link.href)
   const hash = decodeURIComponent(targetUrl.hash)
   targetUrl.hash = ""
   targetUrl.search = ""
+  const popoverId = `popover-${link.pathname}`
+  const prevPopoverElement = document.getElementById(popoverId)
+  const hasAlreadyBeenFetched = () => !!document.getElementById(popoverId)
+
+  // dont refetch if there's already a popover
+  if (hasAlreadyBeenFetched()) {
+    showPopover(prevPopoverElement as HTMLElement)
+    return
+  }
 
   const response = await fetchCanonical(targetUrl).catch((err) => {
     console.error(err)
@@ -52,12 +66,12 @@ async function mouseEnterHandler(
   const [contentTypeCategory, typeInfo] = contentType.split("/")
 
   const popoverElement = document.createElement("div")
+  popoverElement.id = popoverId
   popoverElement.classList.add("popover")
   const popoverInner = document.createElement("div")
   popoverInner.classList.add("popover-inner")
-  popoverElement.appendChild(popoverInner)
-
   popoverInner.dataset.contentType = contentType ?? undefined
+  popoverElement.appendChild(popoverInner)
 
   switch (contentTypeCategory) {
     case "image":
@@ -82,30 +96,34 @@ async function mouseEnterHandler(
       const contents = await response.text()
       const html = p.parseFromString(contents, "text/html")
       normalizeRelativeURLs(html, targetUrl)
-      // strip all IDs from elements to prevent duplicates
+      // prepend all IDs inside popovers to prevent duplicates
-      html.querySelectorAll("[id]").forEach((el) => el.removeAttribute("id"))
+      html.querySelectorAll("[id]").forEach((el) => {
+        const targetID = `popover-internal-${el.id}`
+        el.id = targetID
+      })
       const elts = [...html.getElementsByClassName("popover-hint")]
       if (elts.length === 0) return
 
       elts.forEach((elt) => popoverInner.appendChild(elt))
   }
 
-  setPosition(popoverElement)
+  document.body.appendChild(popoverElement)
-  link.appendChild(popoverElement)
+  showPopover(popoverElement)
+}
 
-  if (hash !== "") {
+function clearActivePopover() {
-    const heading = popoverInner.querySelector(hash) as HTMLElement | null
+  const allPopoverElements = document.querySelectorAll(".popover")
-    if (heading) {
+  allPopoverElements.forEach((popoverElement) => popoverElement.classList.remove("active-popover"))
-      // 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 HTMLAnchorElement[]
+  const links = [...document.querySelectorAll("a.internal")] as HTMLAnchorElement[]
   for (const link of links) {
     link.addEventListener("mouseenter", mouseEnterHandler)
-    window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler))
+    link.addEventListener("mouseleave", clearActivePopover)
+    window.addCleanup(() => {
+      link.removeEventListener("mouseenter", mouseEnterHandler)
+      link.removeEventListener("mouseleave", clearActivePopover)
+    })
   }
 })

quartz/components/scripts/search.inline.ts

@@ -147,8 +147,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
   const container = searchElement.querySelector(".search-container") as HTMLElement
   if (!container) return
 
-  const sidebar = container.closest(".sidebar") as HTMLElement
+  const sidebar = container.closest(".sidebar") as HTMLElement | null
-  if (!sidebar) return
 
   const searchButton = searchElement.querySelector(".search-button") as HTMLButtonElement
   if (!searchButton) return
@@ -180,7 +179,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
   function hideSearch() {
     container.classList.remove("active")
     searchBar.value = "" // clear the input when we dismiss the search
-    sidebar.style.zIndex = ""
+    if (sidebar) sidebar.style.zIndex = ""
     removeAllChildren(results)
     if (preview) {
       removeAllChildren(preview)
@@ -192,7 +191,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
 
   function showSearch(searchTypeNew: SearchType) {
     searchType = searchTypeNew
-    sidebar.style.zIndex = "1"
+    if (sidebar) sidebar.style.zIndex = "1"
     container.classList.add("active")
     searchBar.focus()
   }
@@ -301,9 +300,11 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
     itemTile.classList.add("result-card")
     itemTile.id = slug
     itemTile.href = resolveUrl(slug).toString()
-    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${
+    itemTile.innerHTML = `
-      enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
+      <h3 class="card-title">${title}</h3>
-    }`
+      ${htmlTags}
+      <p class="card-description">${content}</p>
+    `
     itemTile.addEventListener("click", (event) => {
       if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
       hideSearch()

quartz/components/scripts/toc.inline.ts

@@ -1,13 +1,13 @@
 const observer = new IntersectionObserver((entries) => {
   for (const entry of entries) {
     const slug = entry.target.id
-    const tocEntryElement = document.querySelector(`a[data-for="${slug}"]`)
+    const tocEntryElements = document.querySelectorAll(`a[data-for="${slug}"]`)
     const windowHeight = entry.rootBounds?.height
-    if (windowHeight && tocEntryElement) {
+    if (windowHeight && tocEntryElements.length > 0) {
       if (entry.boundingClientRect.y < windowHeight) {
-        tocEntryElement.classList.add("in-view")
+        tocEntryElements.forEach((tocEntryElement) => tocEntryElement.classList.add("in-view"))
       } else {
-        tocEntryElement.classList.remove("in-view")
+        tocEntryElements.forEach((tocEntryElement) => tocEntryElement.classList.remove("in-view"))
       }
     }
   }

quartz/components/styles/backlinks.scss

@@ -8,10 +8,12 @@
     margin: 0;
   }
 
-  & > ul {
+  & > ul.overflow {
     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,6 +118,7 @@ button.desktop-explorer {
     list-style: none;
     margin: 0;
     padding: 0;
+    overscroll-behavior: contain;
 
     & li > a {
       color: var(--dark);
@@ -198,6 +199,7 @@ button.desktop-explorer {
   cursor: pointer;
   transition: transform 0.3s ease;
   backface-visibility: visible;
+  flex-shrink: 0;
 }
 
 li:has(> .folder-outer:not(.open)) > .folder-container > svg {

quartz/components/styles/popover.scss

@@ -16,9 +16,12 @@
 
 .popover {
   z-index: 999;
-  position: absolute;
+  position: fixed;
   overflow: visible;
   padding: 1rem;
+  left: 0;
+  top: 0;
+  will-change: transform;
 
   & > .popover-inner {
     position: relative;
@@ -35,7 +38,10 @@
     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;
   }
 
   & > .popover-inner[data-content-type] {
@@ -75,7 +81,7 @@
   }
 }
 
-a:hover .popover,
+.active-popover,
 .popover:hover {
   animation: dropin 0.3s ease;
   animation-fill-mode: forwards;

quartz/components/styles/search.scss

@@ -133,11 +133,13 @@
         }
 
         @media all and ($mobile) {
-          & > #preview-container {
+          flex-direction: column;
+
+          & > .preview-container {
             display: none !important;
           }
 
-          &[data-preview] > #results-container {
+          &[data-preview] > .results-container {
             width: 100%;
             height: auto;
             flex: 0 0 100%;
@@ -204,6 +206,12 @@
               margin: 0;
             }
 
+            @media all and not ($mobile) {
+              & > p.card-description {
+                display: none;
+              }
+            }
+
             & > ul.tags {
               margin-top: 0.45rem;
               margin-bottom: 0;

quartz/components/styles/toc.scss

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

quartz/plugins/emitters/aliases.ts

@@ -1,14 +1,21 @@
-import { resolveRelative, simplifySlug } from "../../util/path"
+import { FullSlug, isRelativeURL, resolveRelative, simplifySlug } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import { write } from "./helpers"
 import { BuildCtx } from "../../util/ctx"
 import { VFile } from "vfile"
+import path from "path"
 
 async function* processFile(ctx: BuildCtx, file: VFile) {
   const ogSlug = simplifySlug(file.data.slug!)
 
-  for (const slug of file.data.aliases ?? []) {
+  for (const aliasTarget of file.data.aliases ?? []) {
-    const redirUrl = resolveRelative(slug, file.data.slug!)
+    const aliasTargetSlug = (
+      isRelativeURL(aliasTarget)
+        ? path.normalize(path.join(ogSlug, "..", aliasTarget))
+        : aliasTarget
+    ) as FullSlug
+
+    const redirUrl = resolveRelative(aliasTargetSlug, ogSlug)
     yield write({
       ctx,
       content: `
@@ -23,7 +30,7 @@ async function* processFile(ctx: BuildCtx, file: VFile) {
         </head>
         </html>
         `,
-      slug,
+      slug: aliasTargetSlug,
       ext: ".html",
     })
   }

quartz/plugins/emitters/ogImage.tsx

@@ -55,8 +55,9 @@ async function generateSocialImage(
     fonts,
     loadAdditionalAsset: async (languageCode: string, segment: string) => {
       if (languageCode === "emoji") {
-        return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}`
+        return await loadEmoji(getIconCode(segment))
       }
+
       return languageCode
     },
   })

quartz/plugins/transformers/ofm.ts

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

quartz/styles/base.scss

@@ -65,6 +65,21 @@ ul,
   }
 }
 
+article {
+  > mjx-container.MathJax,
+  blockquote > div > mjx-container.MathJax {
+    display: flex;
+    > svg {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  blockquote > div > mjx-container.MathJax > svg {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+}
+
 strong {
   font-weight: $semiBoldWeight;
 }
@@ -223,6 +238,7 @@ a {
         padding: 0;
         & > * {
           flex: 1;
+          max-height: 24rem;
         }
         & > .toc {
           display: none;
@@ -546,8 +562,8 @@ video {
 }
 
 div:has(> .overflow) {
-  display: flex;
   max-height: 100%;
+  overflow-y: hidden;
 }
 
 ul.overflow,
@@ -562,7 +578,7 @@ ol.overflow {
   clear: both;
 
   & > li.overflow-end {
-    height: 1rem;
+    height: 0.5rem;
     margin: 0;
   }
 

quartz/util/ctx.ts

@@ -1,4 +1,6 @@
 import { QuartzConfig } from "../cfg"
+import { QuartzPluginData } from "../plugins/vfile"
+import { FileTrieNode } from "./fileTrie"
 import { FilePath, FullSlug } from "./path"
 
 export interface Argv {
@@ -13,13 +15,36 @@ export interface Argv {
   concurrency?: number
 }
 
+export type BuildTimeTrieData = QuartzPluginData & {
+  slug: string
+  title: string
+  filePath: string
+}
+
 export interface BuildCtx {
   buildId: string
   argv: Argv
   cfg: QuartzConfig
   allSlugs: FullSlug[]
   allFiles: FilePath[]
+  trie?: FileTrieNode<BuildTimeTrieData>
   incremental: boolean
 }
 
-export type WorkerSerializableBuildCtx = Omit<BuildCtx, "cfg">
+export function trieFromAllFiles(allFiles: QuartzPluginData[]): FileTrieNode<BuildTimeTrieData> {
+  const trie = new FileTrieNode<BuildTimeTrieData>([])
+  allFiles.forEach((file) => {
+    if (file.frontmatter) {
+      trie.add({
+        ...file,
+        slug: file.slug!,
+        title: file.frontmatter.title,
+        filePath: file.filePath!,
+      })
+    }
+  })
+
+  return trie
+}
+
+export type WorkerSerializableBuildCtx = Omit<BuildCtx, "cfg" | "trie">

quartz/util/emoji.ts

@@ -25,14 +25,23 @@ function toCodePoint(unicodeSurrogates: string) {
   return r.join("-")
 }
 
-const twemoji = (code: string) =>
+type EmojiMap = {
-  `https://cdnjs.cloudflare.com/ajax/libs/twemoji/15.1.0/svg/${code.toLowerCase()}.svg`
+  codePointToName: Record<string, string>
-const emojiCache: Record<string, Promise<any>> = {}
+  nameToBase64: Record<string, string>
-
+}
-export function loadEmoji(code: string) {
+
-  const type = "twemoji"
+let emojimap: EmojiMap | undefined = undefined
-  const key = type + ":" + code
+export async function loadEmoji(code: string) {
-  if (key in emojiCache) return emojiCache[key]
+  if (!emojimap) {
-
+    const data = await import("./emojimap.json")
-  return (emojiCache[key] = fetch(twemoji(code)).then((r) => r.text()))
+    emojimap = data
+  }
+
+  const name = emojimap.codePointToName[`U+${code.toUpperCase()}`]
+  if (!name) throw new Error(`codepoint ${code} not found in map`)
+
+  const b64 = emojimap.nameToBase64[name]
+  if (!b64) throw new Error(`name ${name} not found in map`)
+
+  return b64
 }

quartz/util/fileTrie.test.ts

@@ -330,4 +330,86 @@ describe("FileTrie", () => {
       )
     })
   })
+
+  describe("pathToNode", () => {
+    test("should return root node for empty path", () => {
+      const data = { title: "Root", slug: "index", filePath: "index.md" }
+      trie.add(data)
+      const path = trie.ancestryChain([])
+      assert.deepStrictEqual(path, [trie])
+    })
+
+    test("should return root node for index path", () => {
+      const data = { title: "Root", slug: "index", filePath: "index.md" }
+      trie.add(data)
+      const path = trie.ancestryChain(["index"])
+      assert.deepStrictEqual(path, [trie])
+    })
+
+    test("should return path to first level node", () => {
+      const data = { title: "Test", slug: "test", filePath: "test.md" }
+      trie.add(data)
+      const path = trie.ancestryChain(["test"])
+      assert.deepStrictEqual(path, [trie, trie.children[0]])
+    })
+
+    test("should return path to nested node", () => {
+      const data = {
+        title: "Nested",
+        slug: "folder/subfolder/test",
+        filePath: "folder/subfolder/test.md",
+      }
+      trie.add(data)
+      const path = trie.ancestryChain(["folder", "subfolder", "test"])
+      assert.deepStrictEqual(path, [
+        trie,
+        trie.children[0],
+        trie.children[0].children[0],
+        trie.children[0].children[0].children[0],
+      ])
+    })
+
+    test("should return undefined for non-existent path", () => {
+      const data = { title: "Test", slug: "test", filePath: "test.md" }
+      trie.add(data)
+      const path = trie.ancestryChain(["nonexistent"])
+      assert.strictEqual(path, undefined)
+    })
+
+    test("should return file data for intermediate folders", () => {
+      const data1 = {
+        title: "Root",
+        slug: "index",
+        filePath: "index.md",
+      }
+      const data2 = {
+        title: "Test",
+        slug: "folder/subfolder/test",
+        filePath: "folder/subfolder/test.md",
+      }
+      const data3 = {
+        title: "Folder Index",
+        slug: "folder/index",
+        filePath: "folder/index.md",
+      }
+
+      trie.add(data1)
+      trie.add(data2)
+      trie.add(data3)
+      const path = trie.ancestryChain(["folder", "subfolder"])
+      assert.deepStrictEqual(path, [trie, trie.children[0], trie.children[0].children[0]])
+      assert.strictEqual(path[1].data, data3)
+    })
+
+    test("should return path for partial path", () => {
+      const data = {
+        title: "Nested",
+        slug: "folder/subfolder/test",
+        filePath: "folder/subfolder/test.md",
+      }
+      trie.add(data)
+      const path = trie.ancestryChain(["folder"])
+      assert.deepStrictEqual(path, [trie, trie.children[0]])
+    })
+  })
 })

quartz/util/fileTrie.ts

@@ -97,6 +97,24 @@ export class FileTrieNode<T extends FileTrieData = ContentDetails> {
     return this.children.find((c) => c.slugSegment === path[0])?.findNode(path.slice(1))
   }
 
+  ancestryChain(path: string[]): Array<FileTrieNode<T>> | undefined {
+    if (path.length === 0 || (path.length === 1 && path[0] === "index")) {
+      return [this]
+    }
+
+    const child = this.children.find((c) => c.slugSegment === path[0])
+    if (!child) {
+      return undefined
+    }
+
+    const childPath = child.ancestryChain(path.slice(1))
+    if (!childPath) {
+      return undefined
+    }
+
+    return [this, ...childPath]
+  }
+
   /**
    * Filter trie nodes. Behaves similar to `Array.prototype.filter()`, but modifies tree in place
    */

quartz/util/path.test.ts

@@ -1,7 +1,7 @@
 import test, { describe } from "node:test"
 import * as path from "./path"
 import assert from "node:assert"
-import { FullSlug, TransformOptions } from "./path"
+import { FullSlug, TransformOptions, SimpleSlug } from "./path"
 
 describe("typeguards", () => {
   test("isSimpleSlug", () => {
@@ -314,3 +314,50 @@ describe("link strategies", () => {
     })
   })
 })
+
+describe("resolveRelative", () => {
+  test("from index", () => {
+    assert.strictEqual(path.resolveRelative("index" as FullSlug, "index" as FullSlug), "./")
+    assert.strictEqual(path.resolveRelative("index" as FullSlug, "abc" as FullSlug), "./abc")
+    assert.strictEqual(
+      path.resolveRelative("index" as FullSlug, "abc/def" as FullSlug),
+      "./abc/def",
+    )
+    assert.strictEqual(
+      path.resolveRelative("index" as FullSlug, "abc/def/ghi" as FullSlug),
+      "./abc/def/ghi",
+    )
+  })
+
+  test("from nested page", () => {
+    assert.strictEqual(path.resolveRelative("abc/def" as FullSlug, "index" as FullSlug), "../")
+    assert.strictEqual(path.resolveRelative("abc/def" as FullSlug, "abc" as FullSlug), "../abc")
+    assert.strictEqual(
+      path.resolveRelative("abc/def" as FullSlug, "abc/def" as FullSlug),
+      "../abc/def",
+    )
+    assert.strictEqual(
+      path.resolveRelative("abc/def" as FullSlug, "ghi/jkl" as FullSlug),
+      "../ghi/jkl",
+    )
+  })
+
+  test("with index paths", () => {
+    assert.strictEqual(path.resolveRelative("abc/index" as FullSlug, "index" as FullSlug), "../")
+    assert.strictEqual(
+      path.resolveRelative("abc/def/index" as FullSlug, "index" as FullSlug),
+      "../../",
+    )
+    assert.strictEqual(path.resolveRelative("index" as FullSlug, "abc/index" as FullSlug), "./abc/")
+    assert.strictEqual(
+      path.resolveRelative("abc/def" as FullSlug, "abc/index" as FullSlug),
+      "../abc/",
+    )
+  })
+
+  test("with simple slugs", () => {
+    assert.strictEqual(path.resolveRelative("abc/def" as FullSlug, "" as SimpleSlug), "../")
+    assert.strictEqual(path.resolveRelative("abc/def" as FullSlug, "ghi" as SimpleSlug), "../ghi")
+    assert.strictEqual(path.resolveRelative("abc/def" as FullSlug, "ghi/" as SimpleSlug), "../ghi/")
+  })
+})