incremental all the things

checkpoint
2025-12-01 02:07:55 +01:00 · 2025-03-15 22:00:37 -07:00 · 2025-03-14 09:18:21 -07:00
51 changed files with 661 additions and 4399 deletions
--- a/.github/workflows/docker-build-push.yaml
+++ b/.github/workflows/docker-build-push.yaml
@@ -25,7 +25,7 @@ jobs:
        with:
          fetch-depth: 1
      - name: Inject slug/short variables
-        uses: rlespinasse/github-slug-action@v5.1.0
+        uses: rlespinasse/github-slug-action@v5.0.0
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3
      - name: Set up Docker Buildx
--- a/docs/advanced/making
+++ b/docs/advanced/making
@@ -221,26 +221,12 @@ export type QuartzEmitterPlugin<Options extends OptionType = undefined> = (

 export type QuartzEmitterPluginInstance = {
  name: string
-  emit(
-    ctx: BuildCtx,
-    content: ProcessedContent[],
-    resources: StaticResources,
-  ): Promise<FilePath[]> | AsyncGenerator<FilePath>
-  partialEmit?(
-    ctx: BuildCtx,
-    content: ProcessedContent[],
-    resources: StaticResources,
-    changeEvents: ChangeEvent[],
-  ): Promise<FilePath[]> | AsyncGenerator<FilePath> | null
+  emit(ctx: BuildCtx, content: ProcessedContent[], resources: StaticResources): Promise<FilePath[]>
  getQuartzComponents(ctx: BuildCtx): QuartzComponent[]
 }
 ```

-An emitter plugin must define a `name` field, an `emit` function, and a `getQuartzComponents` function. It can optionally implement a `partialEmit` function for incremental builds.
-
- `emit` is responsible for looking at all the parsed and filtered content and then appropriately creating files and returning a list of paths to files the plugin created.
- `partialEmit` is an optional function that enables incremental builds. It receives information about which files have changed (`changeEvents`) and can selectively rebuild only the necessary files. This is useful for optimizing build times in development mode. If `partialEmit` is undefined, it will default to the `emit` function.
- `getQuartzComponents` declares which Quartz components the emitter uses to construct its pages.
+An emitter plugin must define a `name` field, an `emit` function, and a `getQuartzComponents` function. `emit` is responsible for looking at all the parsed and filtered content and then appropriately creating files and returning a list of paths to files the plugin created.

 Creating new files can be done via regular Node [fs module](https://nodejs.org/api/fs.html) (i.e. `fs.cp` or `fs.writeFile`) or via the `write` function in `quartz/plugins/emitters/helpers.ts` if you are creating files that contain text. `write` has the following signature:

--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -41,12 +41,11 @@ This part of the configuration concerns anything that can affect the whole site.
 - `ignorePatterns`: a list of [glob](<https://en.wikipedia.org/wiki/Glob_(programming)>) patterns that Quartz should ignore and not search through when looking for files inside the `content` folder. See [[private pages]] for more details.
 - `defaultDateType`: whether to use created, modified, or published as the default date to display on pages and page listings.
 - `theme`: configure how the site looks.
-  - `cdnCaching`: if `true` (default), use Google CDN to cache the fonts. This will generally be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
+  - `cdnCaching`: If `true` (default), use Google CDN to cache the fonts. This will generally will be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
  - `typography`: what fonts to use. Any font available on [Google Fonts](https://fonts.google.com/) works here.
-    - `title`: font for the title of the site (optional, same as `header` by default)
-    - `header`: font to use for headers
-    - `code`: font for inline and block quotes
-    - `body`: font for everything
+    - `header`: Font to use for headers
+    - `code`: Font for inline and block quotes.
+    - `body`: Font for everything
  - `colors`: controls the theming of the site.
    - `light`: page background
    - `lightgray`: borders
--- a/docs/features/breadcrumbs.md
+++ b/docs/features/breadcrumbs.md
@@ -19,6 +19,7 @@ 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
 })
 ```
--- a/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -131,8 +131,7 @@ Using this example, the display names of all `FileNodes` (folders + files) will
 ```ts title="quartz.layout.ts"
 Component.Explorer({
  mapFn: (node) => {
-    node.displayName = node.displayName.toUpperCase()
-    return node
+    return (node.displayName = node.displayName.toUpperCase())
  },
 })
 ```
@@ -146,12 +145,8 @@ 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", "advanced"])
-
-    // 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())
+    const omit = new Set(["authoring content", "tags", "hosting"])
+    return !omit.has(node.data.title.toLowerCase())
  },
 })
 ```
@@ -164,7 +159,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
  },
 })
 ```
--- a/docs/index.md
+++ b/docs/index.md
@@ -31,8 +31,8 @@ If you prefer instructions in a video format you can try following Nicole van de

 ## 🔧 Features

- [[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
+- [[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
+- Hot-reload for both configuration and content
 - Simple JSX layouts and [[creating components|page components]]
 - [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes
 - Fully-customizable parsing, filtering, and page generation through [[making plugins|plugins]]
--- a/docs/layout-components.md
+++ b/docs/layout-components.md
@@ -60,34 +60,3 @@ 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.
--- a/docs/plugins/CustomOgImages.md
+++ b/docs/plugins/CustomOgImages.md
@@ -62,7 +62,7 @@ The following properties can be used to customize your link previews:
 | `socialDescription` | `description`    | Description to be used for preview. |
 | `socialImage`       | `image`, `cover` | Link to preview image.              |

-The `socialImage` property should contain a link to an image either relative to `quartz/static`, or a full URL. If you have a folder for all your images in `quartz/static/my-images`, an example for `socialImage` could be `"my-images/cover.png"`. Alternatively, you can use a fully qualified URL like `"https://example.com/cover.png"`.
+The `socialImage` property should contain a link to an image relative to `quartz/static`. If you have a folder for all your images in `quartz/static/my-images`, an example for `socialImage` could be `"my-images/cover.png"`.

 > [!info] Info
 >
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -56,23 +56,22 @@
    "hast-util-to-string": "^3.0.1",
    "is-absolute-url": "^4.0.1",
    "js-yaml": "^4.1.0",
-    "lightningcss": "^1.29.3",
+    "lightningcss": "^1.29.2",
    "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.9.1",
-    "preact": "^10.26.5",
+    "pixi.js": "^8.8.1",
+    "preact": "^10.26.4",
    "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.3.1",
+    "rehype-citation": "^2.2.2",
    "rehype-katex": "^7.0.1",
    "rehype-mathjax": "^7.1.0",
-    "rehype-pretty-code": "^0.14.1",
+    "rehype-pretty-code": "^0.14.0",
    "rehype-raw": "^7.0.0",
    "rehype-slug": "^6.0.0",
    "remark": "^15.0.1",
@@ -81,13 +80,13 @@
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.2",
+    "remark-rehype": "^11.1.1",
    "remark-smartypants": "^3.0.2",
    "rfdc": "^1.4.1",
    "rimraf": "^6.0.1",
-    "satori": "^0.12.2",
+    "satori": "^0.12.1",
    "serve-handler": "^6.1.6",
-    "sharp": "^0.34.1",
+    "sharp": "^0.33.5",
    "shiki": "^1.26.2",
    "source-map-support": "^0.5.21",
    "to-vfile": "^8.0.0",
@@ -103,14 +102,14 @@
    "@types/d3": "^7.4.3",
    "@types/hast": "^3.0.4",
    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.14.0",
+    "@types/node": "^22.13.10",
    "@types/pretty-time": "^1.1.5",
    "@types/source-map-support": "^0.5.10",
-    "@types/ws": "^8.18.1",
+    "@types/ws": "^8.18.0",
    "@types/yargs": "^17.0.33",
-    "esbuild": "^0.25.2",
+    "esbuild": "^0.25.1",
    "prettier": "^3.5.3",
    "tsx": "^4.19.3",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.2"
  }
 }
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -18,7 +18,7 @@ const config: QuartzConfig = {
    locale: "en-US",
    baseUrl: "quartz.jzhao.xyz",
    ignorePatterns: ["private", "templates", ".obsidian"],
-    defaultDateType: "modified",
+    defaultDateType: "created",
    theme: {
      fontOrigin: "googleFonts",
      cdnCaching: true,
@@ -57,7 +57,7 @@ const config: QuartzConfig = {
    transformers: [
      Plugin.FrontMatter(),
      Plugin.CreatedModifiedDate({
-        priority: ["frontmatter", "git", "filesystem"],
+        priority: ["git", "frontmatter", "filesystem"],
      }),
      Plugin.SyntaxHighlighting({
        theme: {
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -17,10 +17,7 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
  beforeBody: [
-    Component.ConditionalRender({
-      component: Component.Breadcrumbs(),
-      condition: (page) => page.fileData.slug !== "index",
-    }),
+    Component.Breadcrumbs(),
    Component.ArticleTitle(),
    Component.ContentMeta(),
    Component.TagList(),
--- a/quartz/build.ts
+++ b/quartz/build.ts
@@ -20,7 +20,6 @@ import { Mutex } from "async-mutex"
 import { getStaticResourcesFromPlugins } from "./plugins"
 import { randomIdNonSecure } from "./util/random"
 import { ChangeEvent } from "./plugins/types"
-import { minimatch } from "minimatch"

 type ContentMap = Map<
  FilePath,
@@ -118,23 +117,11 @@ async function startWatching(
    })
  }

-  const gitIgnoredMatcher = await isGitIgnored()
  const buildData: BuildData = {
    ctx,
    mut,
    contentMap,
-    ignored: (path) => {
-      if (gitIgnoredMatcher(path)) return true
-      const pathStr = path.toString()
-      for (const pattern of cfg.configuration.ignorePatterns) {
-        if (minimatch(pathStr, pattern)) {
-          return true
-        }
-      }
-
-      return false
-    },
-
+    ignored: await isGitIgnored(),
    changesSinceLastBuild: {},
    lastBuildMs: 0,
  }
@@ -150,17 +137,17 @@ async function startWatching(
    .on("add", (fp) => {
      if (buildData.ignored(fp)) return
      changes.push({ path: fp as FilePath, type: "add" })
-      void rebuild(changes, clientRefresh, buildData)
+      rebuild(changes, clientRefresh, buildData)
    })
    .on("change", (fp) => {
      if (buildData.ignored(fp)) return
      changes.push({ path: fp as FilePath, type: "change" })
-      void rebuild(changes, clientRefresh, buildData)
+      rebuild(changes, clientRefresh, buildData)
    })
    .on("unlink", (fp) => {
      if (buildData.ignored(fp)) return
      changes.push({ path: fp as FilePath, type: "delete" })
-      void rebuild(changes, clientRefresh, buildData)
+      rebuild(changes, clientRefresh, buildData)
    })

  return async () => {
@@ -175,7 +162,6 @@ async function rebuild(changes: ChangeEvent[], clientRefresh: () => void, buildD
  const buildId = randomIdNonSecure()
  ctx.buildId = buildId
  buildData.lastBuildMs = new Date().getTime()
-  const numChangesInBuild = changes.length
  const release = await mut.acquire()

  // if there's another build after us, release and let them do it
@@ -194,19 +180,16 @@ async function rebuild(changes: ChangeEvent[], clientRefresh: () => void, buildD
  }

  const staticResources = getStaticResourcesFromPlugins(ctx)
-  const pathsToParse: FilePath[] = []
  for (const [fp, type] of Object.entries(changesSinceLastBuild)) {
    if (type === "delete" || path.extname(fp) !== ".md") continue
    const fullPath = joinSegments(argv.directory, toPosixPath(fp)) as FilePath
-    pathsToParse.push(fullPath)
-  }
-
-  const parsed = await parseMarkdown(ctx, pathsToParse)
-  for (const content of parsed) {
-    contentMap.set(content[1].data.relativePath!, {
-      type: "markdown",
-      content,
-    })
+    const parsed = await parseMarkdown(ctx, [fullPath])
+    for (const content of parsed) {
+      contentMap.set(content[1].data.relativePath!, {
+        type: "markdown",
+        content,
+      })
+    }
  }

  // update state using changesSinceLastBuild
@@ -282,7 +265,7 @@ async function rebuild(changes: ChangeEvent[], clientRefresh: () => void, buildD

  console.log(`Emitted ${emittedFiles} files to \`${argv.output}\` in ${perf.timeSince("rebuild")}`)
  console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
-  changes.splice(0, numChangesInBuild)
+  changes.length = 0
  clientRefresh()
  release()
 }
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -1,8 +1,8 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
-import { FullSlug, SimpleSlug, resolveRelative, simplifySlug } from "../util/path"
+import { FullSlug, SimpleSlug, joinSegments, resolveRelative } from "../util/path"
+import { QuartzPluginData } from "../plugins/vfile"
 import { classNames } from "../util/lang"
-import { trieFromAllFiles } from "../util/ctx"

 type CrumbData = {
  displayName: string
@@ -22,6 +22,10 @@ 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.
   */
@@ -32,6 +36,7 @@ const defaultOptions: BreadcrumbOptions = {
  spacerSymbol: "❯",
  rootName: "Home",
  resolveFrontmatterTitle: true,
+  hideOnRoot: true,
  showCurrentPage: true,
 }

@@ -43,37 +48,78 @@ 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) => {
-    const trie = (ctx.trie ??= trieFromAllFiles(allFiles))
-    const slugParts = fileData.slug!.split("/")
-    const pathNodes = trie.ancestryChain(slugParts)
-
-    if (!pathNodes) {
-      return null
+    // Hide crumbs on root if enabled
+    if (options.hideOnRoot && fileData.slug === "index") {
+      return <></>
    }

-    const crumbs: CrumbData[] = pathNodes.map((node, idx) => {
-      const crumb = formatCrumb(node.displayName, fileData.slug!, simplifySlug(node.slug))
-      if (idx === 0) {
-        crumb.displayName = options.rootName
+    // Format entry for root element
+    const firstEntry = formatCrumb(options.rootName, fileData.slug!, "/" as SimpleSlug)
+    const crumbs: CrumbData[] = [firstEntry]
+
+    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)
      }

-      // For last node (current page), set empty path
-      if (idx === pathNodes.length - 1) {
-        crumb.path = ""
+      // Add current file to crumb (can directly use frontmatter title)
+      if (options.showCurrentPage && slugParts.at(-1) !== "index") {
+        crumbs.push({
+          displayName: fileData.frontmatter!.title,
+          path: "",
+        })
      }
-
-      return crumb
-    })
-
-    if (!options.showCurrentPage) {
-      crumbs.pop()
    }

    return (
--- a/quartz/components/ConditionalRender.tsx
+++ b/quartz/components/ConditionalRender.tsx
@@ -1,22 +0,0 @@
-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>
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,7 +1,7 @@
 import { i18n } from "../i18n"
 import { FullSlug, getFileExtension, joinSegments, pathToRoot } from "../util/path"
 import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
-import { googleFontHref, googleFontSubsetHref } from "../util/theme"
+import { googleFontHref } from "../util/theme"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { unescapeHTML } from "../util/escape"
 import { CustomOgImagesEmitterName } from "../plugins/emitters/ogImage"
@@ -45,9 +45,6 @@ export default (() => {
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" />
            <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
-            {cfg.theme.typography.title && (
-              <link rel="stylesheet" href={googleFontSubsetHref(cfg.theme, cfg.pageTitle)} />
-            )}
          </>
        )}
        <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />
--- a/quartz/components/OverflowList.tsx
+++ b/quartz/components/OverflowList.tsx
@@ -1,4 +1,5 @@
 import { JSX } from "preact"
+import { randomIdNonSecure } from "../util/random"

 const OverflowList = ({
  children,
@@ -12,9 +13,8 @@ const OverflowList = ({
  )
 }

-let numExplorers = 0
 export default () => {
-  const id = `list-${numExplorers++}`
+  const id = randomIdNonSecure()

  return {
    OverflowList: (props: JSX.HTMLAttributes<HTMLUListElement>) => (
--- a/quartz/components/PageList.tsx
+++ b/quartz/components/PageList.tsx
@@ -1,4 +1,4 @@
-import { FullSlug, isFolderPath, resolveRelative } from "../util/path"
+import { FullSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { Date, getDate } from "./Date"
 import { QuartzComponent, QuartzComponentProps } from "./types"
@@ -8,33 +8,6 @@ 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 ?? "")
-    const f2IsFolder = isFolderPath(f2.slug ?? "")
-    if (f1IsFolder && !f2IsFolder) return -1
-    if (!f1IsFolder && f2IsFolder) return 1
-
-    // If both are folders or both are files, sort by date/alphabetical
    if (f1.dates && f2.dates) {
      // sort descending
      return getDate(cfg, f2)!.getTime() - getDate(cfg, f1)!.getTime()
@@ -58,7 +31,7 @@ type Props = {
 } & QuartzComponentProps

 export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort }: Props) => {
-  const sorter = sort ?? byDateAndAlphabeticalFolderFirst(cfg)
+  const sorter = sort ?? byDateAndAlphabetical(cfg)
  let list = allFiles.sort(sorter)
  if (limit) {
    list = list.slice(0, limit)
--- a/quartz/components/PageTitle.tsx
+++ b/quartz/components/PageTitle.tsx
@@ -17,7 +17,6 @@ PageTitle.css = `
 .page-title {
  font-size: 1.75rem;
  margin: 0;
-  font-family: var(--titleFont);
 }
 `

--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -53,15 +53,17 @@ export default ((opts?: Partial<Options>) => {
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
-        <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
-          {fileData.toc.map((tocEntry) => (
-            <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
-              <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
-                {tocEntry.text}
-              </a>
-            </li>
-          ))}
-        </OverflowList>
+        <div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
+          <OverflowList>
+            {fileData.toc.map((tocEntry) => (
+              <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
+                <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
+                  {tocEntry.text}
+                </a>
+              </li>
+            ))}
+          </OverflowList>
+        </div>
      </div>
    )
  }
--- a/quartz/components/TagList.tsx
+++ b/quartz/components/TagList.tsx
@@ -1,14 +1,15 @@
-import { FullSlug, resolveRelative } from "../util/path"
+import { pathToRoot, slugTag } 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 = resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)
+          const linkDest = baseDir + `/tags/${slugTag(tag)}`
          return (
            <li>
              <a href={linkDest} class="internal tag-link">
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -21,7 +21,6 @@ import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import Flex from "./Flex"
-import ConditionalRender from "./ConditionalRender"

 export {
  ArticleTitle,
@@ -47,5 +46,4 @@ export {
  Breadcrumbs,
  Comments,
  Flex,
-  ConditionalRender,
 }
--- a/quartz/components/pages/FolderContent.tsx
+++ b/quartz/components/pages/FolderContent.tsx
@@ -1,14 +1,15 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import path from "path"

 import style from "../styles/listPage.scss"
-import { PageList, SortFn } from "../PageList"
+import { byDateAndAlphabetical, PageList, SortFn } from "../PageList"
+import { stripSlashes, simplifySlug, joinSegments, FullSlug } from "../../util/path"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
 import { i18n } from "../../i18n"
 import { QuartzPluginData } from "../../plugins/vfile"
 import { ComponentChildren } from "preact"
 import { concatenateResources } from "../../util/resources"
-import { trieFromAllFiles } from "../../util/ctx"

 interface FolderContentOptions {
  /**
@@ -29,65 +30,48 @@ export default ((opts?: Partial<FolderContentOptions>) => {

  const FolderContent: QuartzComponent = (props: QuartzComponentProps) => {
    const { tree, fileData, allFiles, cfg } = props
+    const folderSlug = stripSlashes(simplifySlug(fileData.slug!))
+    const folderParts = folderSlug.split(path.posix.sep)

-    const trie = (props.ctx.trie ??= trieFromAllFiles(allFiles))
-    const folder = trie.findNode(fileData.slug!.split("/"))
-    if (!folder) {
-      return null
-    }
+    const allPagesInFolder: QuartzPluginData[] = []
+    const allPagesInSubfolders: Map<FullSlug, QuartzPluginData[]> = new Map()

-    const allPagesInFolder: QuartzPluginData[] =
-      folder.children
-        .map((node) => {
-          // regular file, proceed
-          if (node.data) {
-            return node.data
-          }
+    allFiles.forEach((file) => {
+      const fileSlug = stripSlashes(simplifySlug(file.slug!))
+      const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
+      const fileParts = fileSlug.split(path.posix.sep)
+      const isDirectChild = fileParts.length === folderParts.length + 1

-          if (node.isFolder && options.showSubfolders) {
-            // folders that dont have data need synthetic files
-            const getMostRecentDates = (): QuartzPluginData["dates"] => {
-              let maybeDates: QuartzPluginData["dates"] | undefined = undefined
-              for (const child of node.children) {
-                if (child.data?.dates) {
-                  // compare all dates and assign to maybeDates if its more recent or its not set
-                  if (!maybeDates) {
-                    maybeDates = { ...child.data.dates }
-                  } else {
-                    if (child.data.dates.created > maybeDates.created) {
-                      maybeDates.created = child.data.dates.created
-                    }
+      if (!prefixed) {
+        return
+      }

-                    if (child.data.dates.modified > maybeDates.modified) {
-                      maybeDates.modified = child.data.dates.modified
-                    }
+      if (isDirectChild) {
+        allPagesInFolder.push(file)
+      } else if (options.showSubfolders) {
+        const subfolderSlug = joinSegments(
+          ...fileParts.slice(0, folderParts.length + 1),
+        ) as FullSlug
+        const pagesInFolder = allPagesInSubfolders.get(subfolderSlug) || []
+        allPagesInSubfolders.set(subfolderSlug, [...pagesInFolder, file])
+      }
+    })

-                    if (child.data.dates.published > maybeDates.published) {
-                      maybeDates.published = child.data.dates.published
-                    }
-                  }
-                }
-              }
-              return (
-                maybeDates ?? {
-                  created: new Date(),
-                  modified: new Date(),
-                  published: new Date(),
-                }
-              )
-            }
-
-            return {
-              slug: node.slug,
-              dates: getMostRecentDates(),
-              frontmatter: {
-                title: node.displayName,
-                tags: [],
-              },
-            }
-          }
+    allPagesInSubfolders.forEach((files, subfolderSlug) => {
+      const hasIndex = allPagesInFolder.some(
+        (file) => subfolderSlug === stripSlashes(simplifySlug(file.slug!)),
+      )
+      if (!hasIndex) {
+        const subfolderDates = files.sort(byDateAndAlphabetical(cfg))[0].dates
+        const subfolderTitle = subfolderSlug.split(path.posix.sep).at(-1)!
+        allPagesInFolder.push({
+          slug: subfolderSlug,
+          dates: subfolderDates,
+          frontmatter: { title: subfolderTitle, tags: ["folder"] },
        })
-        .filter((page) => page !== undefined) ?? []
+      }
+    })
+
    const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
    const classes = cssClasses.join(" ")
    const listProps = {
--- a/quartz/components/pages/TagContent.tsx
+++ b/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, resolveRelative, simplifySlug } from "../../util/path"
+import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
 import { QuartzPluginData } from "../../plugins/vfile"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
@@ -74,13 +74,10 @@ 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={href}>
+                    <a class="internal tag-link" href={`../tags/${tag}`}>
                      {tag}
                    </a>
                  </h2>
@@ -115,8 +112,8 @@ export default ((opts?: Partial<TagContentOptions>) => {
      }

      return (
-        <div class="popover-hint">
-          <article class={classes}>{content}</article>
+        <div class={classes}>
+          <article class="popover-hint">{content}</article>
          <div class="page-listing">
            <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
            <div>
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -134,9 +134,9 @@ function createFolderNode(
  }

  for (const child of node.children) {
-    const childNode = child.isFolder
-      ? createFolderNode(currentSlug, child, opts)
-      : createFileNode(currentSlug, child)
+    const childNode = child.data
+      ? createFileNode(currentSlug, child)
+      : createFolderNode(currentSlug, child, opts)
    ul.appendChild(childNode)
  }

--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -3,7 +3,6 @@ import { normalizeRelativeURLs } from "../../util/path"
 import { fetchCanonical } from "./util"

 const p = new DOMParser()
-
 async function mouseEnterHandler(
  this: HTMLAnchorElement,
  { clientX, clientY }: { clientX: number; clientY: number },
@@ -15,42 +14,29 @@ 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, {
-      transform: `translate(${x.toFixed()}px, ${y.toFixed()}px)`,
+      left: `${x}px`,
+      top: `${y}px`,
    })
  }

-  function showPopover(popoverElement: HTMLElement) {
-    clearActivePopover()
-    popoverElement.classList.add("active-popover")
-    setPosition(popoverElement as HTMLElement)
+  const hasAlreadyBeenFetched = () =>
+    [...link.children].some((child) => child.classList.contains("popover"))

-    if (hash !== "") {
-      const targetAnchor = `#popover-internal-${hash.slice(1)}`
-      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" })
-      }
-    }
+  // dont refetch if there's already a popover
+  if (hasAlreadyBeenFetched()) {
+    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 = 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)
@@ -66,13 +52,13 @@ 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")
-  popoverInner.dataset.contentType = contentType ?? undefined
  popoverElement.appendChild(popoverInner)

+  popoverInner.dataset.contentType = contentType ?? undefined
+
  switch (contentTypeCategory) {
    case "image":
      const img = document.createElement("img")
@@ -96,34 +82,30 @@ 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

      elts.forEach((elt) => popoverInner.appendChild(elt))
  }

-  document.body.appendChild(popoverElement)
-  showPopover(popoverElement)
-}
+  setPosition(popoverElement)
+  link.appendChild(popoverElement)

-function clearActivePopover() {
-  const allPopoverElements = document.querySelectorAll(".popover")
-  allPopoverElements.forEach((popoverElement) => popoverElement.classList.remove("active-popover"))
+  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.querySelectorAll("a.internal")] as HTMLAnchorElement[]
+  const links = [...document.getElementsByClassName("internal")] as HTMLAnchorElement[]
  for (const link of links) {
    link.addEventListener("mouseenter", mouseEnterHandler)
-    link.addEventListener("mouseleave", clearActivePopover)
-    window.addCleanup(() => {
-      link.removeEventListener("mouseenter", mouseEnterHandler)
-      link.removeEventListener("mouseleave", clearActivePopover)
-    })
+    window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler))
  }
 })
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -147,7 +147,8 @@ 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 | null
+  const sidebar = container.closest(".sidebar") as HTMLElement
+  if (!sidebar) return

  const searchButton = searchElement.querySelector(".search-button") as HTMLButtonElement
  if (!searchButton) return
@@ -179,7 +180,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
-    if (sidebar) sidebar.style.zIndex = ""
+    sidebar.style.zIndex = ""
    removeAllChildren(results)
    if (preview) {
      removeAllChildren(preview)
@@ -191,7 +192,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:

  function showSearch(searchTypeNew: SearchType) {
    searchType = searchTypeNew
-    if (sidebar) sidebar.style.zIndex = "1"
+    sidebar.style.zIndex = "1"
    container.classList.add("active")
    searchBar.focus()
  }
@@ -300,11 +301,9 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
    itemTile.classList.add("result-card")
    itemTile.id = slug
    itemTile.href = resolveUrl(slug).toString()
-    itemTile.innerHTML = `
-      <h3 class="card-title">${title}</h3>
-      ${htmlTags}
-      <p class="card-description">${content}</p>
-    `
+    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${
+      enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
+    }`
    itemTile.addEventListener("click", (event) => {
      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
      hideSearch()
--- a/quartz/components/scripts/toc.inline.ts
+++ b/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 tocEntryElements = document.querySelectorAll(`a[data-for="${slug}"]`)
+    const tocEntryElement = document.querySelector(`a[data-for="${slug}"]`)
    const windowHeight = entry.rootBounds?.height
-    if (windowHeight && tocEntryElements.length > 0) {
+    if (windowHeight && tocEntryElement) {
      if (entry.boundingClientRect.y < windowHeight) {
-        tocEntryElements.forEach((tocEntryElement) => tocEntryElement.classList.add("in-view"))
+        tocEntryElement.classList.add("in-view")
      } else {
-        tocEntryElements.forEach((tocEntryElement) => tocEntryElement.classList.remove("in-view"))
+        tocEntryElement.classList.remove("in-view")
      }
    }
  }
--- a/quartz/components/styles/backlinks.scss
+++ b/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 {
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -52,8 +52,6 @@
    overflow: hidden;
    flex-shrink: 0;
    align-self: flex-start;
-    margin-top: auto;
-    margin-bottom: auto;
  }

  button.mobile-explorer {
@@ -118,7 +116,6 @@ button.desktop-explorer {
    list-style: none;
    margin: 0;
    padding: 0;
-    overscroll-behavior: contain;

    & li > a {
      color: var(--dark);
@@ -199,7 +196,6 @@ 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 {
--- a/quartz/components/styles/popover.scss
+++ b/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,10 +35,7 @@
    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] {
@@ -81,7 +75,7 @@
  }
 }

-.active-popover,
+a:hover .popover,
 .popover:hover {
  animation: dropin 0.3s ease;
  animation-fill-mode: forwards;
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -133,13 +133,11 @@
        }

        @media all and ($mobile) {
-          flex-direction: column;
-
-          & > .preview-container {
+          & > #preview-container {
            display: none !important;
          }

-          &[data-preview] > .results-container {
+          &[data-preview] > #results-container {
            width: 100%;
            height: auto;
            flex: 0 0 100%;
@@ -206,12 +204,6 @@
              margin: 0;
            }

-            @media all and not ($mobile) {
-              & > p.card-description {
-                display: none;
-              }
-            }
-
            & > ul.tags {
              margin-top: 0.45rem;
              margin-bottom: 0;
--- a/quartz/components/styles/toc.scss
+++ b/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: 4rem;
+  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,23 +45,23 @@ button.toc-header {
  }
 }

-ul.toc-content.overflow {
+.toc-content {
  list-style: none;
  position: relative;
-  margin: 0.5rem 0;
-  padding: 0;
-  max-height: calc(100% - 2rem);
-  overscroll-behavior: contain;
-  list-style: none;

-  & > li > a {
-    color: var(--dark);
-    opacity: 0.35;
-    transition:
-      0.5s ease opacity,
-      0.3s ease color;
-    &.in-view {
-      opacity: 0.75;
+  & ul {
+    list-style: none;
+    margin: 0.5rem 0;
+    padding: 0;
+    & > li > a {
+      color: var(--dark);
+      opacity: 0.35;
+      transition:
+        0.5s ease opacity,
+        0.3s ease color;
+      &.in-view {
+        opacity: 0.75;
+      }
    }
  }

--- a/quartz/plugins/emitters/aliases.ts
+++ b/quartz/plugins/emitters/aliases.ts
@@ -1,21 +1,14 @@
-import { FullSlug, isRelativeURL, resolveRelative, simplifySlug } from "../../util/path"
+import { 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 aliasTarget of file.data.aliases ?? []) {
-    const aliasTargetSlug = (
-      isRelativeURL(aliasTarget)
-        ? path.normalize(path.join(ogSlug, "..", aliasTarget))
-        : aliasTarget
-    ) as FullSlug
-
-    const redirUrl = resolveRelative(aliasTargetSlug, ogSlug)
+  for (const slug of file.data.aliases ?? []) {
+    const redirUrl = resolveRelative(slug, file.data.slug!)
    yield write({
      ctx,
      content: `
@@ -30,7 +23,7 @@ async function* processFile(ctx: BuildCtx, file: VFile) {
        </head>
        </html>
        `,
-      slug: aliasTargetSlug,
+      slug,
      ext: ".html",
    })
  }
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -9,12 +9,7 @@ import styles from "../../styles/custom.scss"
 import popoverStyle from "../../components/styles/popover.scss"
 import { BuildCtx } from "../../util/ctx"
 import { QuartzComponent } from "../../components/types"
-import {
-  googleFontHref,
-  googleFontSubsetHref,
-  joinStyles,
-  processGoogleFonts,
-} from "../../util/theme"
+import { googleFontHref, joinStyles, processGoogleFonts } from "../../util/theme"
 import { Features, transform } from "lightningcss"
 import { transform as transpile } from "esbuild"
 import { write } from "./helpers"
@@ -88,108 +83,89 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso
  if (cfg.analytics?.provider === "google") {
    const tagId = cfg.analytics.tagId
    componentResources.afterDOMLoaded.push(`
-      const gtagScript = document.createElement('script');
-      gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=${tagId}';
-      gtagScript.defer = true;
-      gtagScript.onload = () => {
-        window.dataLayer = window.dataLayer || [];
-        function gtag() {
-          dataLayer.push(arguments);
-        }
-        gtag('js', new Date());
-        gtag('config', '${tagId}', { send_page_view: false });
-        gtag('event', 'page_view', { page_title: document.title, page_location: location.href });
-        document.addEventListener('nav', () => {
-          gtag('event', 'page_view', { page_title: document.title, page_location: location.href });
+      const gtagScript = document.createElement("script")
+      gtagScript.src = "https://www.googletagmanager.com/gtag/js?id=${tagId}"
+      gtagScript.defer = true
+      document.head.appendChild(gtagScript)
+
+      window.dataLayer = window.dataLayer || [];
+      function gtag() { dataLayer.push(arguments); }
+      gtag("js", new Date());
+      gtag("config", "${tagId}", { send_page_view: false });
+
+      document.addEventListener("nav", () => {
+        gtag("event", "page_view", {
+          page_title: document.title,
+          page_location: location.href,
        });
-      };
-      
-      document.head.appendChild(gtagScript);
-    `)
+      });`)
  } else if (cfg.analytics?.provider === "plausible") {
    const plausibleHost = cfg.analytics.host ?? "https://plausible.io"
    componentResources.afterDOMLoaded.push(`
-      const plausibleScript = document.createElement('script');
-      plausibleScript.src = '${plausibleHost}/js/script.manual.js';
-      plausibleScript.setAttribute('data-domain', location.hostname);
-      plausibleScript.defer = true;
-      plausibleScript.onload = () => {
-        window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); };
-        plausible('pageview');
-        document.addEventListener('nav', () => {
-          plausible('pageview');
-        });
-      };
+      const plausibleScript = document.createElement("script")
+      plausibleScript.src = "${plausibleHost}/js/script.manual.js"
+      plausibleScript.setAttribute("data-domain", location.hostname)
+      plausibleScript.defer = true
+      document.head.appendChild(plausibleScript)

-      document.head.appendChild(plausibleScript);
+      window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
+
+      document.addEventListener("nav", () => {
+        plausible("pageview")
+      })
    `)
  } else if (cfg.analytics?.provider === "umami") {
    componentResources.afterDOMLoaded.push(`
-      const umamiScript = document.createElement("script");
-      umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js";
-      umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}");
-      umamiScript.setAttribute("data-auto-track", "false");
-      umamiScript.defer = true;
-      umamiScript.onload = () => {
-        umami.track();
-        document.addEventListener("nav", () => {
-          umami.track();
-        });
-      };
+      const umamiScript = document.createElement("script")
+      umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js"
+      umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
+      umamiScript.setAttribute("data-auto-track", "false")
+      umamiScript.defer = true
+      document.head.appendChild(umamiScript)

-      document.head.appendChild(umamiScript);
+      document.addEventListener("nav", () => {
+        umami.track();
+      })
    `)
  } else if (cfg.analytics?.provider === "goatcounter") {
    componentResources.afterDOMLoaded.push(`
-      const goatcounterScript = document.createElement('script');
-      goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}";
-      goatcounterScript.defer = true;
-      goatcounterScript.setAttribute(
-        'data-goatcounter',
-        "https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count"
-      );
-      goatcounterScript.onload = () => {
-        window.goatcounter = { no_onload: true };
-        goatcounter.count({ path: location.pathname });
-        document.addEventListener('nav', () => {
-          goatcounter.count({ path: location.pathname });
-        });
-      };
+      const goatcounterScript = document.createElement("script")
+      goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}"
+      goatcounterScript.defer = true
+      goatcounterScript.setAttribute("data-goatcounter",
+        "https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count")
+      document.head.appendChild(goatcounterScript)

-      document.head.appendChild(goatcounterScript);
+      window.goatcounter = { no_onload: true }
+      document.addEventListener("nav", () => {
+        goatcounter.count({ path: location.pathname })
+      })
    `)
  } else if (cfg.analytics?.provider === "posthog") {
    componentResources.afterDOMLoaded.push(`
-      const posthogScript = document.createElement("script");
+      const posthogScript = document.createElement("script")
      posthogScript.innerHTML= \`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
      posthog.init('${cfg.analytics.apiKey}', {
        api_host: '${cfg.analytics.host ?? "https://app.posthog.com"}',
        capture_pageview: false,
      })\`
-      posthogScript.onload = () => {
-        posthog.capture('$pageview', { path: location.pathname });
-      
-        document.addEventListener('nav', () => {
-          posthog.capture('$pageview', { path: location.pathname });
-        });
-      };
+      document.head.appendChild(posthogScript)

-      document.head.appendChild(posthogScript);
+      document.addEventListener("nav", () => {
+        posthog.capture('$pageview', { path: location.pathname })
+      })
    `)
  } else if (cfg.analytics?.provider === "tinylytics") {
    const siteId = cfg.analytics.siteId
    componentResources.afterDOMLoaded.push(`
-      const tinylyticsScript = document.createElement('script');
-      tinylyticsScript.src = 'https://tinylytics.app/embed/${siteId}.js?spa';
-      tinylyticsScript.defer = true;
-      tinylyticsScript.onload = () => {
-        window.tinylytics.triggerUpdate();
-        document.addEventListener('nav', () => {
-          window.tinylytics.triggerUpdate();
-        });
-      };
-      
-      document.head.appendChild(tinylyticsScript);
+      const tinylyticsScript = document.createElement("script")
+      tinylyticsScript.src = "https://tinylytics.app/embed/${siteId}.js?spa"
+      tinylyticsScript.defer = true
+      document.head.appendChild(tinylyticsScript)
+
+      document.addEventListener("nav", () => {
+        window.tinylytics.triggerUpdate()
+      })
    `)
  } else if (cfg.analytics?.provider === "cabin") {
    componentResources.afterDOMLoaded.push(`
@@ -235,16 +211,9 @@ export const ComponentResources: QuartzEmitterPlugin = () => {
        // let the user do it themselves in css
      } else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) {
        // when cdnCaching is true, we link to google fonts in Head.tsx
-        const theme = ctx.cfg.configuration.theme
-        const response = await fetch(googleFontHref(theme))
+        const response = await fetch(googleFontHref(ctx.cfg.configuration.theme))
        googleFontsStyleSheet = await response.text()

-        if (theme.typography.title) {
-          const title = ctx.cfg.configuration.pageTitle
-          const response = await fetch(googleFontSubsetHref(theme, title))
-          googleFontsStyleSheet += `\n${await response.text()}`
-        }
-
        if (!cfg.baseUrl) {
          throw new Error(
            "baseUrl must be defined when using Google Fonts without cfg.theme.cdnCaching",
--- a/quartz/plugins/emitters/ogImage.tsx
+++ b/quartz/plugins/emitters/ogImage.tsx
@@ -1,7 +1,7 @@
 import { QuartzEmitterPlugin } from "../types"
 import { i18n } from "../../i18n"
 import { unescapeHTML } from "../../util/escape"
-import { FullSlug, getFileExtension, isAbsoluteURL, joinSegments, QUARTZ } from "../../util/path"
+import { FullSlug, getFileExtension } from "../../util/path"
 import { ImageOptions, SocialImageOptions, defaultImage, getSatoriFonts } from "../../util/og"
 import sharp from "sharp"
 import satori, { SatoriOptions } from "satori"
@@ -10,8 +10,6 @@ import { Readable } from "stream"
 import { write } from "./helpers"
 import { BuildCtx } from "../../util/ctx"
 import { QuartzPluginData } from "../vfile"
-import fs from "node:fs/promises"
-import chalk from "chalk"

 const defaultOptions: SocialImageOptions = {
  colorScheme: "lightMode",
@@ -30,34 +28,15 @@ async function generateSocialImage(
  userOpts: SocialImageOptions,
 ): Promise<Readable> {
  const { width, height } = userOpts
-  const iconPath = joinSegments(QUARTZ, "static", "icon.png")
-  let iconBase64: string | undefined = undefined
-  try {
-    const iconData = await fs.readFile(iconPath)
-    iconBase64 = `data:image/png;base64,${iconData.toString("base64")}`
-  } catch (err) {
-    console.warn(chalk.yellow(`Warning: Could not find icon at ${iconPath}`))
-  }
-
-  const imageComponent = userOpts.imageStructure({
-    cfg,
-    userOpts,
-    title,
-    description,
-    fonts,
-    fileData,
-    iconBase64,
-  })
-
+  const imageComponent = userOpts.imageStructure(cfg, userOpts, title, description, fonts, fileData)
  const svg = await satori(imageComponent, {
    width,
    height,
    fonts,
    loadAdditionalAsset: async (languageCode: string, segment: string) => {
      if (languageCode === "emoji") {
-        return await loadEmoji(getIconCode(segment))
+        return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}`
      }
-
      return languageCode
    },
  })
@@ -145,19 +124,13 @@ export const CustomOgImages: QuartzEmitterPlugin<Partial<SocialImageOptions>> =
        additionalHead: [
          (pageData) => {
            const isRealFile = pageData.filePath !== undefined
-            let userDefinedOgImagePath = pageData.frontmatter?.socialImage
-
-            if (userDefinedOgImagePath) {
-              userDefinedOgImagePath = isAbsoluteURL(userDefinedOgImagePath)
-                ? userDefinedOgImagePath
-                : `https://${baseUrl}/static/${userDefinedOgImagePath}`
-            }
-
+            const userDefinedOgImagePath = pageData.frontmatter?.socialImage
            const generatedOgImagePath = isRealFile
              ? `https://${baseUrl}/${pageData.slug!}-og-image.webp`
              : undefined
            const defaultOgImagePath = `https://${baseUrl}/static/og-image.png`
            const ogImagePath = userDefinedOgImagePath ?? generatedOgImagePath ?? defaultOgImagePath
+
            const ogImageMimeType = `image/${getFileExtension(ogImagePath) ?? "png"}`
            return (
              <>
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@@ -114,10 +114,6 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options>> = (userOpts)

            if (socialImage) data.socialImage = socialImage

-            // Remove duplicate slugs
-            const uniqueSlugs = [...new Set(allSlugs)]
-            allSlugs.splice(0, allSlugs.length, ...uniqueSlugs)
-
            // fill in frontmatter
            file.data.frontmatter = data as QuartzPluginData["frontmatter"]
          }
--- a/quartz/plugins/transformers/lastmod.ts
+++ b/quartz/plugins/transformers/lastmod.ts
@@ -1,8 +1,8 @@
 import fs from "fs"
+import path from "path"
 import { Repository } from "@napi-rs/simple-git"
 import { QuartzTransformerPlugin } from "../types"
 import chalk from "chalk"
-import path from "path"

 export interface Options {
  priority: ("frontmatter" | "git" | "filesystem")[]
@@ -35,25 +35,13 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options>> = (u
      return [
        () => {
          let repo: Repository | undefined = undefined
-          let repositoryWorkdir: string
-          if (opts.priority.includes("git")) {
-            try {
-              repo = Repository.discover(ctx.argv.directory)
-              repositoryWorkdir = repo.workdir() ?? ctx.argv.directory
-            } catch (e) {
-              console.log(
-                chalk.yellow(`\nWarning: couldn't find git repository for ${ctx.argv.directory}`),
-              )
-            }
-          }
-
          return async (_tree, file) => {
            let created: MaybeDate = undefined
            let modified: MaybeDate = undefined
            let published: MaybeDate = undefined

            const fp = file.data.relativePath!
-            const fullFp = file.data.filePath!
+            const fullFp = path.posix.join(ctx.argv.directory, fp)
            for (const source of opts.priority) {
              if (source === "filesystem") {
                const st = await fs.promises.stat(fullFp)
@@ -63,14 +51,21 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options>> = (u
                created ||= file.data.frontmatter.created as MaybeDate
                modified ||= file.data.frontmatter.modified as MaybeDate
                published ||= file.data.frontmatter.published as MaybeDate
-              } else if (source === "git" && repo) {
+              } else if (source === "git") {
+                if (!repo) {
+                  // Get a reference to the main git repo.
+                  // It's either the same as the workdir,
+                  // or 1+ level higher in case of a submodule/subtree setup
+                  repo = Repository.discover(ctx.argv.directory)
+                }
+
                try {
-                  const relativePath = path.relative(repositoryWorkdir, fullFp)
-                  modified ||= await repo.getFileLatestModifiedDateAsync(relativePath)
+                  modified ||= await repo.getFileLatestModifiedDateAsync(fullFp)
                } catch {
                  console.log(
                    chalk.yellow(
-                      `\nWarning: ${file.data.filePath!} isn't yet tracked by git, dates will be inaccurate`,
+                      `\nWarning: ${file.data
+                        .filePath!} isn't yet tracked by git, last modification date is not available for this file`,
                    ),
                  )
                }
--- a/quartz/plugins/transformers/ofm.ts
+++ b/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("!") ? "!" : ""

--- a/quartz/processors/parse.ts
+++ b/quartz/processors/parse.ts
@@ -172,7 +172,7 @@ export async function parseMarkdown(ctx: BuildCtx, fps: FilePath[]): Promise<Pro
      workerType: "thread",
    })
    const errorHandler = (err: any) => {
-      console.error(err)
+      console.error(`${err}`.replace(/^error:\s*/i, ""))
      process.exit(1)
    }

@@ -201,7 +201,7 @@ export async function parseMarkdown(ctx: BuildCtx, fps: FilePath[]): Promise<Pro

    const markdownToHtmlPromises: WorkerPromise<ProcessedContent[]>[] = []
    processedFiles = 0
-    for (const mdChunk of mdResults) {
+    for (const [mdChunk, _] of mdResults) {
      markdownToHtmlPromises.push(pool.exec("processHtml", [serializableCtx, mdChunk]))
    }
    const results: ProcessedContent[][] = await Promise.all(
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -65,21 +65,6 @@ 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;
 }
@@ -238,7 +223,6 @@ a {
        padding: 0;
        & > * {
          flex: 1;
-          max-height: 24rem;
        }
        & > .toc {
          display: none;
@@ -562,8 +546,8 @@ video {
 }

 div:has(> .overflow) {
+  display: flex;
  max-height: 100%;
-  overflow-y: hidden;
 }

 ul.overflow,
@@ -578,7 +562,7 @@ ol.overflow {
  clear: both;

  & > li.overflow-end {
-    height: 0.5rem;
+    height: 1rem;
    margin: 0;
  }

--- a/quartz/util/ctx.ts
+++ b/quartz/util/ctx.ts
@@ -1,6 +1,4 @@
 import { QuartzConfig } from "../cfg"
-import { QuartzPluginData } from "../plugins/vfile"
-import { FileTrieNode } from "./fileTrie"
 import { FilePath, FullSlug } from "./path"

 export interface Argv {
@@ -15,36 +13,13 @@ 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 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">
+export type WorkerSerializableBuildCtx = Omit<BuildCtx, "cfg">
--- a/quartz/util/emoji.ts
+++ b/quartz/util/emoji.ts
@@ -25,23 +25,14 @@ function toCodePoint(unicodeSurrogates: string) {
  return r.join("-")
 }

-type EmojiMap = {
-  codePointToName: Record<string, string>
-  nameToBase64: Record<string, string>
-}
-
-let emojimap: EmojiMap | undefined = undefined
-export async function loadEmoji(code: string) {
-  if (!emojimap) {
-    const data = await import("./emojimap.json")
-    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
+const twemoji = (code: string) =>
+  `https://cdnjs.cloudflare.com/ajax/libs/twemoji/15.1.0/svg/${code.toLowerCase()}.svg`
+const emojiCache: Record<string, Promise<any>> = {}
+
+export function loadEmoji(code: string) {
+  const type = "twemoji"
+  const key = type + ":" + code
+  if (key in emojiCache) return emojiCache[key]
+
+  return (emojiCache[key] = fetch(twemoji(code)).then((r) => r.text()))
 }
--- a/quartz/util/emojimap.json
+++ b/quartz/util/emojimap.json
--- a/quartz/util/fileTrie.test.ts
+++ b/quartz/util/fileTrie.test.ts
@@ -1,7 +1,6 @@
 import test, { describe, beforeEach } from "node:test"
 import assert from "node:assert"
 import { FileTrieNode } from "./fileTrie"
-import { FullSlug } from "./path"

 interface TestData {
  title: string
@@ -193,94 +192,6 @@ describe("FileTrie", () => {
    })
  })

-  describe("fromEntries", () => {
-    test("nested", () => {
-      const trie = FileTrieNode.fromEntries([
-        ["index" as FullSlug, { title: "Root", slug: "index", filePath: "index.md" }],
-        [
-          "folder/file1" as FullSlug,
-          { title: "File 1", slug: "folder/file1", filePath: "folder/file1.md" },
-        ],
-        [
-          "folder/index" as FullSlug,
-          { title: "Folder Index", slug: "folder/index", filePath: "folder/index.md" },
-        ],
-        [
-          "folder/file2" as FullSlug,
-          { title: "File 2", slug: "folder/file2", filePath: "folder/file2.md" },
-        ],
-        [
-          "folder/folder2/index" as FullSlug,
-          {
-            title: "Subfolder Index",
-            slug: "folder/folder2/index",
-            filePath: "folder/folder2/index.md",
-          },
-        ],
-      ])
-
-      assert.strictEqual(trie.children.length, 1)
-      assert.strictEqual(trie.children[0].slug, "folder/index")
-      assert.strictEqual(trie.children[0].children.length, 3)
-      assert.strictEqual(trie.children[0].children[0].slug, "folder/file1")
-      assert.strictEqual(trie.children[0].children[1].slug, "folder/file2")
-      assert.strictEqual(trie.children[0].children[2].slug, "folder/folder2/index")
-      assert.strictEqual(trie.children[0].children[2].children.length, 0)
-    })
-  })
-
-  describe("findNode", () => {
-    test("should find root node with empty path", () => {
-      const data = { title: "Root", slug: "index", filePath: "index.md" }
-      trie.add(data)
-      const found = trie.findNode([])
-      assert.strictEqual(found, trie)
-    })
-
-    test("should find node at first level", () => {
-      const data = { title: "Test", slug: "test", filePath: "test.md" }
-      trie.add(data)
-      const found = trie.findNode(["test"])
-      assert.strictEqual(found?.data, data)
-    })
-
-    test("should find nested node", () => {
-      const data = {
-        title: "Nested",
-        slug: "folder/subfolder/test",
-        filePath: "folder/subfolder/test.md",
-      }
-      trie.add(data)
-      const found = trie.findNode(["folder", "subfolder", "test"])
-      assert.strictEqual(found?.data, data)
-
-      // should find the folder and subfolder indexes too
-      assert.strictEqual(
-        trie.findNode(["folder", "subfolder", "index"]),
-        trie.children[0].children[0],
-      )
-      assert.strictEqual(trie.findNode(["folder", "index"]), trie.children[0])
-    })
-
-    test("should return undefined for non-existent path", () => {
-      const data = { title: "Test", slug: "test", filePath: "test.md" }
-      trie.add(data)
-      const found = trie.findNode(["nonexistent"])
-      assert.strictEqual(found, undefined)
-    })
-
-    test("should return undefined for partial path", () => {
-      const data = {
-        title: "Nested",
-        slug: "folder/subfolder/test",
-        filePath: "folder/subfolder/test.md",
-      }
-      trie.add(data)
-      const found = trie.findNode(["folder"])
-      assert.strictEqual(found?.data, null)
-    })
-  })
-
  describe("getFolderPaths", () => {
    test("should return all folder paths", () => {
      const data1 = {
@@ -330,86 +241,4 @@ 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]])
-    })
-  })
 })
--- a/quartz/util/fileTrie.ts
+++ b/quartz/util/fileTrie.ts
@@ -89,32 +89,6 @@ export class FileTrieNode<T extends FileTrieData = ContentDetails> {
    this.insert(file.slug.split("/"), file)
  }

-  findNode(path: string[]): FileTrieNode<T> | undefined {
-    if (path.length === 0 || (path.length === 1 && path[0] === "index")) {
-      return this
-    }
-
-    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
   */
--- a/quartz/util/log.ts
+++ b/quartz/util/log.ts
@@ -10,9 +10,7 @@ export class QuartzLogger {
  private readonly spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]

  constructor(verbose: boolean) {
-    const isInteractiveTerminal =
-      process.stdout.isTTY && process.env.TERM !== "dumb" && !process.env.CI
-    this.verbose = verbose || !isInteractiveTerminal
+    this.verbose = verbose
  }

  start(text: string) {
@@ -35,7 +33,7 @@ export class QuartzLogger {
        const truncated = truncate(output, columns)
        process.stdout.write(truncated)
        this.spinnerIndex = (this.spinnerIndex + 1) % this.spinnerChars.length
-      }, 50)
+      }, 20)
    }
  }

--- a/quartz/util/og.tsx
+++ b/quartz/util/og.tsx
@@ -13,7 +13,6 @@ import chalk from "chalk"

 const defaultHeaderWeight = [700]
 const defaultBodyWeight = [400]
-
 export async function getSatoriFonts(headerFont: FontSpecification, bodyFont: FontSpecification) {
  // Get all weights for header and body fonts
  const headerWeights: FontWeight[] = (
@@ -135,12 +134,21 @@ export type SocialImageOptions = {
  excludeRoot: boolean
  /**
   * JSX to use for generating image. See satori docs for more info (https://github.com/vercel/satori)
+   * @param cfg global quartz config
+   * @param userOpts options that can be set by user
+   * @param title title of current page
+   * @param description description of current page
+   * @param fonts global font that can be used for styling
+   * @param fileData full fileData of current page
+   * @returns prepared jsx to be used for generating image
   */
  imageStructure: (
-    options: ImageOptions & {
-      userOpts: UserOpts
-      iconBase64?: string
-    },
+    cfg: GlobalConfiguration,
+    userOpts: UserOpts,
+    title: string,
+    description: string,
+    fonts: SatoriOptions["fonts"],
+    fileData: QuartzPluginData,
  ) => JSXInternal.Element
 }

@@ -170,17 +178,17 @@ export type ImageOptions = {
 }

 // This is the default template for generated social image.
-export const defaultImage: SocialImageOptions["imageStructure"] = ({
-  cfg,
-  userOpts,
-  title,
-  description,
-  fileData,
-  iconBase64,
-}) => {
-  const { colorScheme } = userOpts
+export const defaultImage: SocialImageOptions["imageStructure"] = (
+  cfg: GlobalConfiguration,
+  { colorScheme }: UserOpts,
+  title: string,
+  description: string,
+  _fonts: SatoriOptions["fonts"],
+  fileData: QuartzPluginData,
+) => {
  const fontBreakPoint = 32
  const useSmallerFont = title.length > fontBreakPoint
+  const iconPath = `https://${cfg.baseUrl}/static/icon.png`

  // Format date if available
  const rawDate = getDate(cfg, fileData)
@@ -218,16 +226,14 @@ export const defaultImage: SocialImageOptions["imageStructure"] = ({
          marginBottom: "0.5rem",
        }}
      >
-        {iconBase64 && (
-          <img
-            src={iconBase64}
-            width={56}
-            height={56}
-            style={{
-              borderRadius: "50%",
-            }}
-          />
-        )}
+        <img
+          src={iconPath}
+          width={56}
+          height={56}
+          style={{
+            borderRadius: "50%",
+          }}
+        />
        <div
          style={{
            display: "flex",
--- a/quartz/util/path.test.ts
+++ b/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, SimpleSlug } from "./path"
+import { FullSlug, TransformOptions } from "./path"

 describe("typeguards", () => {
  test("isSimpleSlug", () => {
@@ -38,17 +38,6 @@ describe("typeguards", () => {
    assert(!path.isRelativeURL("./abc/def.md"))
  })

-  test("isAbsoluteURL", () => {
-    assert(path.isAbsoluteURL("https://example.com"))
-    assert(path.isAbsoluteURL("http://example.com"))
-    assert(path.isAbsoluteURL("ftp://example.com/a/b/c"))
-    assert(path.isAbsoluteURL("http://host/%25"))
-    assert(path.isAbsoluteURL("file://host/twoslashes?more//slashes"))
-
-    assert(!path.isAbsoluteURL("example.com/abc/def"))
-    assert(!path.isAbsoluteURL("abc"))
-  })
-
  test("isFullSlug", () => {
    assert(path.isFullSlug("index"))
    assert(path.isFullSlug("abc/def"))
@@ -314,50 +303,3 @@ 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/")
-  })
-})
--- a/quartz/util/path.ts
+++ b/quartz/util/path.ts
@@ -1,7 +1,6 @@
 import { slug as slugAnchor } from "github-slugger"
 import type { Element as HastElement } from "hast"
 import { clone } from "./clone"
-
 // this file must be isomorphic so it can't use node libs (e.g. path)

 export const QUARTZ = "quartz"
@@ -40,15 +39,6 @@ export function isRelativeURL(s: string): s is RelativeURL {
  return validStart && validEnding && ![".md", ".html"].includes(getFileExtension(s) ?? "")
 }

-export function isAbsoluteURL(s: string): boolean {
-  try {
-    new URL(s)
-  } catch {
-    return false
-  }
-  return true
-}
-
 export function getFullSlug(window: Window): FullSlug {
  const res = window.document.body.dataset.slug! as FullSlug
  return res
@@ -257,7 +247,7 @@ export function transformLink(src: FullSlug, target: string, opts: TransformOpti
 }

 // path helpers
-export function isFolderPath(fplike: string): boolean {
+function isFolderPath(fplike: string): boolean {
  return (
    fplike.endsWith("/") ||
    endsWith(fplike, "index") ||
--- a/quartz/util/theme.ts
+++ b/quartz/util/theme.ts
@@ -25,7 +25,6 @@ export type FontSpecification =

 export interface Theme {
  typography: {
-    title?: FontSpecification
    header: FontSpecification
    body: FontSpecification
    code: FontSpecification
@@ -49,10 +48,7 @@ export function getFontSpecificationName(spec: FontSpecification): string {
  return spec.name
 }

-function formatFontSpecification(
-  type: "title" | "header" | "body" | "code",
-  spec: FontSpecification,
-) {
+function formatFontSpecification(type: "header" | "body" | "code", spec: FontSpecification) {
  if (typeof spec === "string") {
    spec = { name: spec }
  }
@@ -86,19 +82,12 @@ function formatFontSpecification(
 }

 export function googleFontHref(theme: Theme) {
-  const { header, body, code } = theme.typography
+  const { code, header, body } = theme.typography
  const headerFont = formatFontSpecification("header", header)
  const bodyFont = formatFontSpecification("body", body)
  const codeFont = formatFontSpecification("code", code)

-  return `https://fonts.googleapis.com/css2?family=${headerFont}&family=${bodyFont}&family=${codeFont}&display=swap`
-}
-
-export function googleFontSubsetHref(theme: Theme, text: string) {
-  const title = theme.typography.title || theme.typography.header
-  const titleFont = formatFontSpecification("title", title)
-
-  return `https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`
+  return `https://fonts.googleapis.com/css2?family=${bodyFont}&family=${headerFont}&family=${codeFont}&display=swap`
 }

 export interface GoogleFontFile {
@@ -146,7 +135,6 @@ ${stylesheet.join("\n\n")}
  --highlight: ${theme.colors.lightMode.highlight};
  --textHighlight: ${theme.colors.lightMode.textHighlight};

-  --titleFont: "${getFontSpecificationName(theme.typography.title || theme.typography.header)}", ${DEFAULT_SANS_SERIF};
  --headerFont: "${getFontSpecificationName(theme.typography.header)}", ${DEFAULT_SANS_SERIF};
  --bodyFont: "${getFontSpecificationName(theme.typography.body)}", ${DEFAULT_SANS_SERIF};
  --codeFont: "${getFontSpecificationName(theme.typography.code)}", ${DEFAULT_MONO};
Author	SHA1	Message	Date
Jacky Zhao	7681a86815	incremental all the things	2025-03-15 22:00:37 -07:00
Jacky Zhao	f528d6139e	checkpoint	2025-03-14 09:18:21 -07:00