Merge remote-tracking branch 'upstream/v4' into open-graph

2025-12-28 15:24:06 -06:00 · 2024-02-02 19:09:21 +01:00 · 2024-02-02 19:09:21 +01:00 · 7f1bb2bea4
commit 7f1bb2bea4
parent 84fde4397b bece8fcab6
52 changed files with 1105 additions and 718 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -8,4 +8,4 @@ updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
-      interval: "daily"
+      interval: "weekly"
--- a/docs/advanced/creating
+++ b/docs/advanced/creating
@ -156,12 +156,13 @@ document.addEventListener("nav", () => {
  // do page specific logic here
  // e.g. attach event listeners
  const toggleSwitch = document.querySelector("#switch") as HTMLInputElement
-  toggleSwitch.removeEventListener("change", switchTheme)
  toggleSwitch.addEventListener("change", switchTheme)
+  window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
 })
 ```

-It is best practice to also unmount any existing event handlers to prevent memory leaks.
+It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks.
+This will get called on page navigation.

 #### Importing Code

--- a/docs/features/callouts.md
+++ b/docs/features/callouts.md
@ -24,14 +24,32 @@ See [documentation on supported types and syntax here](https://help.obsidian.md
 ## Customization

 - Disable callouts: simply pass `callouts: false` to the plugin: `Plugin.ObsidianFlavoredMarkdown({ callouts: false })`
- Editing icons: `quartz/plugins/transformers/ofm.ts`
+- Editing icons: `quartz/styles/callouts.scss`
+
+### Add custom callouts
+
+By default, custom callouts are handled by applying the `note` style. To make fancy ones, you have to add these lines to `custom.scss`.
+
+```scss title="quartz/styles/custom.scss"
+.callout {
+  &[data-callout="custom"] {
+    --color: #customcolor;
+    --border: #custombordercolor;
+    --bg: #custombg;
+    --callout-icon: url("data:image/svg+xml; utf8, <custom formatted svg>"); //SVG icon code
+  }
+}
+```
+
+> [!warning]
+> Don't forget to ensure that the SVG is URL encoded before putting it in the CSS. You can use tools like [this one](https://yoksel.github.io/url-encoder/) to help you do that.

 ## Showcase

 > [!info]
 > Default title

-> [!question]+ Can callouts be nested?
+> [!question]+ Can callouts be _nested_?
 >
 > > [!todo]- Yes!, they can. And collapsed!
 > >
--- a/docs/features/recent
+++ b/docs/features/recent
@ -3,7 +3,7 @@ title: Recent Notes
 tags: component
 ---

-Quartz can generate a list of recent notes for based on some filtering and sorting criteria. Though this component isn't included in any [[layout]] by default, you can add it by using `Component.RecentNotes`.
+Quartz can generate a list of recent notes based on some filtering and sorting criteria. Though this component isn't included in any [[layout]] by default, you can add it by using `Component.RecentNotes` in `quartz.layout.ts`.

 ## Customization

--- a/globals.d.ts
+++ b/globals.d.ts
@ -4,9 +4,10 @@ export declare global {
      type: K,
      listener: (this: Document, ev: CustomEventMap[K]) => void,
    ): void
-    dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void
+    dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K] | UIEvent): void
  }
  interface Window {
    spaNavigate(url: URL, isBack: boolean = false)
+    addCleanup(fn: (...args: any[]) => void)
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,18 +1,18 @@
 {
  "name": "@jackyzha0/quartz",
-  "version": "4.1.5",
+  "version": "4.2.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@jackyzha0/quartz",
-      "version": "4.1.5",
+      "version": "4.2.1",
      "license": "MIT",
      "dependencies": {
        "@clack/prompts": "^0.7.0",
-        "@floating-ui/dom": "^1.5.3",
-        "@napi-rs/simple-git": "0.1.11",
-        "async-mutex": "^0.4.0",
+        "@floating-ui/dom": "^1.6.1",
+        "@napi-rs/simple-git": "0.1.14",
+        "async-mutex": "^0.4.1",
        "chalk": "^5.3.0",
        "chokidar": "^3.5.3",
        "cli-spinner": "^0.2.10",
@ -27,9 +27,9 @@
        "hast-util-to-string": "^3.0.0",
        "is-absolute-url": "^4.0.1",
        "js-yaml": "^4.1.0",
-        "lightningcss": "^1.22.1",
+        "lightningcss": "^1.23.0",
        "mdast-util-find-and-replace": "^3.0.1",
-        "mdast-util-to-hast": "^13.0.2",
+        "mdast-util-to-hast": "^13.1.0",
        "mdast-util-to-string": "^4.0.0",
        "micromorph": "^0.4.5",
        "preact": "^10.19.3",
@ -49,9 +49,9 @@
        "remark-gfm": "^4.0.0",
        "remark-math": "^6.0.0",
        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.0.0",
+        "remark-rehype": "^11.1.0",
        "remark-smartypants": "^2.0.0",
-        "rfdc": "^1.3.0",
+        "rfdc": "^1.3.1",
        "rimraf": "^5.0.5",
        "satori": "^0.10.6",
        "serve-handler": "^6.1.5",
@ -63,7 +63,7 @@
        "unified": "^11.0.4",
        "unist-util-visit": "^5.0.0",
        "vfile": "^6.0.1",
-        "workerpool": "^8.0.0",
+        "workerpool": "^9.1.0",
        "ws": "^8.15.1",
        "yargs": "^17.7.2"
      },
@ -73,16 +73,15 @@
      "devDependencies": {
        "@types/cli-spinner": "^0.2.3",
        "@types/d3": "^7.4.3",
-        "@types/hast": "^3.0.3",
+        "@types/hast": "^3.0.4",
        "@types/js-yaml": "^4.0.9",
-        "@types/node": "^20.1.2",
+        "@types/node": "^20.11.14",
        "@types/pretty-time": "^1.1.5",
        "@types/source-map-support": "^0.5.10",
-        "@types/workerpool": "^6.4.7",
        "@types/ws": "^8.5.10",
        "@types/yargs": "^17.0.32",
        "esbuild": "^0.19.9",
-        "prettier": "^3.1.1",
+        "prettier": "^3.2.4",
        "tsx": "^4.7.0",
        "typescript": "^5.3.3"
      },
@ -481,26 +480,26 @@
      }
    },
    "node_modules/@floating-ui/core": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
-      "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
      "dependencies": {
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/utils": "^0.2.1"
      }
    },
    "node_modules/@floating-ui/dom": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
-      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
+      "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
      "dependencies": {
-        "@floating-ui/core": "^1.4.2",
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.1"
      }
    },
    "node_modules/@floating-ui/utils": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
-      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
    },
    "node_modules/@isaacs/cliui": {
      "version": "8.0.2",
@ -519,30 +518,30 @@
      }
    },
    "node_modules/@napi-rs/simple-git": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git/-/simple-git-0.1.11.tgz",
-      "integrity": "sha512-z14cPCBrtDKKVJ3q4GS5gmXEithGUAt+U8sICgA9i3UFdxJKD4H5rCnO7BVC3htdE9g6OR2w2IcHAL56AjpFbg==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git/-/simple-git-0.1.14.tgz",
+      "integrity": "sha512-2cDnsT0nKpQ7yg5u/Zf8/ibp9YFIKhpcfMAGATYuqdJoHuBo6P6UArZ0RDOOtfFC5b9FXuYcGw2ApbM4eWdnbQ==",
      "engines": {
        "node": ">= 10"
      },
      "optionalDependencies": {
-        "@napi-rs/simple-git-android-arm-eabi": "0.1.11",
-        "@napi-rs/simple-git-android-arm64": "0.1.11",
-        "@napi-rs/simple-git-darwin-arm64": "0.1.11",
-        "@napi-rs/simple-git-darwin-x64": "0.1.11",
-        "@napi-rs/simple-git-linux-arm-gnueabihf": "0.1.11",
-        "@napi-rs/simple-git-linux-arm64-gnu": "0.1.11",
-        "@napi-rs/simple-git-linux-arm64-musl": "0.1.11",
-        "@napi-rs/simple-git-linux-x64-gnu": "0.1.11",
-        "@napi-rs/simple-git-linux-x64-musl": "0.1.11",
-        "@napi-rs/simple-git-win32-arm64-msvc": "0.1.11",
-        "@napi-rs/simple-git-win32-x64-msvc": "0.1.11"
+        "@napi-rs/simple-git-android-arm-eabi": "0.1.14",
+        "@napi-rs/simple-git-android-arm64": "0.1.14",
+        "@napi-rs/simple-git-darwin-arm64": "0.1.14",
+        "@napi-rs/simple-git-darwin-x64": "0.1.14",
+        "@napi-rs/simple-git-linux-arm-gnueabihf": "0.1.14",
+        "@napi-rs/simple-git-linux-arm64-gnu": "0.1.14",
+        "@napi-rs/simple-git-linux-arm64-musl": "0.1.14",
+        "@napi-rs/simple-git-linux-x64-gnu": "0.1.14",
+        "@napi-rs/simple-git-linux-x64-musl": "0.1.14",
+        "@napi-rs/simple-git-win32-arm64-msvc": "0.1.14",
+        "@napi-rs/simple-git-win32-x64-msvc": "0.1.14"
      }
    },
    "node_modules/@napi-rs/simple-git-android-arm-eabi": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm-eabi/-/simple-git-android-arm-eabi-0.1.11.tgz",
-      "integrity": "sha512-wt4Wu9MxvKzEqT4iwodFs7Nrc31K73gR5hM7VnlO6iLELmUQZ5JVJkYoFWgzLQWtzIC48W2+zFMbBgY6+F2rZg==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm-eabi/-/simple-git-android-arm-eabi-0.1.14.tgz",
+      "integrity": "sha512-fAJ/Hxc9DhtSHOcB3dPCRW1YcVsqAnbNoOOnHir4aDCtqTP64HrFa7A/675v3vQZpI0u3fXHRcYqW8NF0O/zcg==",
      "cpu": [
        "arm"
      ],
@ -555,9 +554,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-android-arm64": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm64/-/simple-git-android-arm64-0.1.11.tgz",
-      "integrity": "sha512-5/Aj6N44CxwhV3TZWRZ4vGqFj4wb2/a2gwvUZJo9Dwik9Spls7As8LaLe7pOptiGPH0GRP3H5kTT7I6twHNgqw==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm64/-/simple-git-android-arm64-0.1.14.tgz",
+      "integrity": "sha512-dav730MRAR142DoyNDafuwKXcUCYwlbxxxxOarDph7bbN0mZZnKHOQohvRCD/Uz4aJLaj6khCavXSjLDWArEUg==",
      "cpu": [
        "arm64"
      ],
@ -570,9 +569,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-darwin-arm64": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-arm64/-/simple-git-darwin-arm64-0.1.11.tgz",
-      "integrity": "sha512-vdVsJUNcRsGVu0hBmLZdxxgwIbJA/Ias8NKWze8MZkZ3VyBwhg0uAzFgESEL3/USAgeCCHjF3uwVki8E+iPq1w==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-arm64/-/simple-git-darwin-arm64-0.1.14.tgz",
+      "integrity": "sha512-f6+DqRnI+vFvnsAyw66mWhwl0vw1TOieHV07hvKbg4PU5j+RBI+lVqwY2L+IEAxDFlPirTWKKvGY1Lr7M/yi/A==",
      "cpu": [
        "arm64"
      ],
@ -585,9 +584,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-darwin-x64": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-x64/-/simple-git-darwin-x64-0.1.11.tgz",
-      "integrity": "sha512-ufVuZxyJ3LpApk3V101X9qYNX91fnQ4isulz9lWjg90U7Xz0Cav4J3yyFZy6B/cJpYxuiy49R8wV1xDtTeGThA==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-x64/-/simple-git-darwin-x64-0.1.14.tgz",
+      "integrity": "sha512-x/EnwJdDWJAFay8TQt09byJoBlVZhPEaTAPmRR0fUPzWTjrr28bOy8UW1ysszd9ylBxlyIhuWjOHMHu9CBigTQ==",
      "cpu": [
        "x64"
      ],
@ -600,9 +599,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-linux-arm-gnueabihf": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm-gnueabihf/-/simple-git-linux-arm-gnueabihf-0.1.11.tgz",
-      "integrity": "sha512-rFafW0Qc/j5we2ghUecB7mFzGcNDtJ5lTiB4I7kffNeL8pEi6Yi7kST8hylswcCowia65d45xsyeNp1mFlFwcg==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm-gnueabihf/-/simple-git-linux-arm-gnueabihf-0.1.14.tgz",
+      "integrity": "sha512-k0JZaXBl031gP5VOnoMa1I3lCHlBG7QvtunX5rxnRjx2kZ+JgUyT12s/qle/4xkJ0MnmfKTeiD7hs4Cc4Z3Tzw==",
      "cpu": [
        "arm"
      ],
@ -615,9 +614,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-linux-arm64-gnu": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-gnu/-/simple-git-linux-arm64-gnu-0.1.11.tgz",
-      "integrity": "sha512-HZ4yaqpj/FQ3V9qNQrTGhtXb7pLAARXeRJrwoaGfz3eZ069y2bHReFcNR//5bsVhZ18JaS9EV47F8WjDxtpI5g==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-gnu/-/simple-git-linux-arm64-gnu-0.1.14.tgz",
+      "integrity": "sha512-CsmKP6tSIxau10ZKxV1Q1kem2QcJ/Qlov7pxp1Q7kMErcouW0H6vliVniewicaXRVDYV9wK18iD2t5GoJttwlA==",
      "cpu": [
        "arm64"
      ],
@ -630,9 +629,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-linux-arm64-musl": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-musl/-/simple-git-linux-arm64-musl-0.1.11.tgz",
-      "integrity": "sha512-b39lJiC3n2+Y6Exjx6qwHoBF++D3k2hN4mZZkvQCFSdLXJ2xtalCatSRWW3pt+mHOHMOgbGektL5v5BYq52hxw==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-musl/-/simple-git-linux-arm64-musl-0.1.14.tgz",
+      "integrity": "sha512-krfEckZQ3myoHwmGmqY0aHBnqAzzV66+jFNLQEKaVMSGsXA2P+UcGo0coGzmB13rFRWC2eZpZRNB3MrfrStHkw==",
      "cpu": [
        "arm64"
      ],
@ -645,9 +644,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-linux-x64-gnu": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-gnu/-/simple-git-linux-x64-gnu-0.1.11.tgz",
-      "integrity": "sha512-9EPFvY7PZg+oqWi6Jft5WgSsQtvy9Ey1g4NG+LG8y1RbvaNKthxKbR5zgx196pnFVdcLtsuIdOv/OaQlbcTXkw==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-gnu/-/simple-git-linux-x64-gnu-0.1.14.tgz",
+      "integrity": "sha512-4T2Q2QdO6t3OawkwdVmdqLz2EH8lfAw2cMT/zdjfTMfhNKjJgSg3kTgRnu/tf8TLCb+wu80fFvafwE0laB2VTQ==",
      "cpu": [
        "x64"
      ],
@ -660,9 +659,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-linux-x64-musl": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-musl/-/simple-git-linux-x64-musl-0.1.11.tgz",
-      "integrity": "sha512-doIt1lPYIGL3UthlEQjdM9s1Wv0v8bz8LVAgbzJMS+UpVZzArwLWkanAJCy1HjgMTUMiE3AVJqACKIF3EfW/TQ==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-musl/-/simple-git-linux-x64-musl-0.1.14.tgz",
+      "integrity": "sha512-RaTGW8u+RXJbfRF4QN2Dcr5r5DrFh4wLjOvFeOy7sGX3Q9m3IKuw5AjRxTJqIw6xD/AAPKKNzOvPjrIF7728Lw==",
      "cpu": [
        "x64"
      ],
@ -675,9 +674,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-win32-arm64-msvc": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-arm64-msvc/-/simple-git-win32-arm64-msvc-0.1.11.tgz",
-      "integrity": "sha512-TK3Uvj3Q72ebxfxDT/eLFt8sxCNHo20QMvqJ5BHt4zP1Y9Fl1DXSPRUKLBIhJd0nPcI45ZOMRiZyoT8joxAC9g==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-arm64-msvc/-/simple-git-win32-arm64-msvc-0.1.14.tgz",
+      "integrity": "sha512-kb9bKG9t79HJMuRMqbUJFLfWRf952O2Ea4VFwoRA2d/Uwtowm85Ol3JV9E6oeurguRLqdMLrUKyduCW6Hc9Jsg==",
      "cpu": [
        "arm64"
      ],
@ -690,9 +689,9 @@
      }
    },
    "node_modules/@napi-rs/simple-git-win32-x64-msvc": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-x64-msvc/-/simple-git-win32-x64-msvc-0.1.11.tgz",
-      "integrity": "sha512-XOgP6kFDXGmB2KCXFQEsCq70n/Do2h7W9o7qZu8APAD+Sc8JGKz4hKG7PKY2ot924v9nIoKSYbHnupnhXSoXkg==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-x64-msvc/-/simple-git-win32-x64-msvc-0.1.14.tgz",
+      "integrity": "sha512-3835xy0e2gOaZ3SPt1pINBFSBBL3dOx3cChyAzQU0TnMU4Ye/YOh1qa5pO7BOJlCSnOh7iWt782blxCT0HH61w==",
      "cpu": [
        "x64"
      ],
@ -1061,9 +1060,9 @@
      "dev": true
    },
    "node_modules/@types/hast": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz",
-      "integrity": "sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
      "dependencies": {
        "@types/unist": "*"
      }
@ -1106,10 +1105,13 @@
      }
    },
    "node_modules/@types/node": {
-      "version": "20.3.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.3.tgz",
-      "integrity": "sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw==",
-      "dev": true
+      "version": "20.11.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.14.tgz",
+      "integrity": "sha512-w3yWCcwULefjP9DmDDsgUskrMoOy5Z8MiwKHr1FvqGPtx7CvJzQvxD7eKpxNtklQxLruxSXWddyeRtyud0RcXQ==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
    },
    "node_modules/@types/pretty-time": {
      "version": "1.1.5",
@ -1131,15 +1133,6 @@
      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
    },
-    "node_modules/@types/workerpool": {
-      "version": "6.4.7",
-      "resolved": "https://registry.npmjs.org/@types/workerpool/-/workerpool-6.4.7.tgz",
-      "integrity": "sha512-DI2U4obcMzFViyNjLw0xXspim++qkAJ4BWRdYPVMMFtOpTvMr6PAk3UTZEoSqnZnvgUkJ3ck97Ybk+iIfuJHMg==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
    "node_modules/@types/ws": {
      "version": "8.5.10",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@ -1232,9 +1225,9 @@
      }
    },
    "node_modules/async-mutex": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.4.0.tgz",
-      "integrity": "sha512-eJFZ1YhRR8UN8eBLoNzcDPcy/jqjsg6I1AP+KvWQX80BqOSW1oJPJXDylPUEeMr2ZQvHgnQ//Lp6f3RQ1zI7HA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.4.1.tgz",
+      "integrity": "sha512-WfoBo4E/TbCX1G95XTjbWTE3X2XLG0m1Xbv2cwOtuPdyH9CZvnaA5nCt1ucjaKEgW2A5IF71hxrRhr83Je5xjA==",
      "dependencies": {
        "tslib": "^2.4.0"
      }
@ -3289,9 +3282,9 @@
      }
    },
    "node_modules/lightningcss": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.22.1.tgz",
-      "integrity": "sha512-Fy45PhibiNXkm0cK5FJCbfO8Y6jUpD/YcHf/BtuI+jvYYqSXKF4muk61jjE8YxCR9y+hDYIWSzHTc+bwhDE6rQ==",
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.23.0.tgz",
+      "integrity": "sha512-SEArWKMHhqn/0QzOtclIwH5pXIYQOUEkF8DgICd/105O+GCgd7jxjNod/QPnBCSWvpRHQBGVz5fQ9uScby03zA==",
      "dependencies": {
        "detect-libc": "^1.0.3"
      },
@ -3303,21 +3296,21 @@
        "url": "https://opencollective.com/parcel"
      },
      "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.22.1",
-        "lightningcss-darwin-x64": "1.22.1",
-        "lightningcss-freebsd-x64": "1.22.1",
-        "lightningcss-linux-arm-gnueabihf": "1.22.1",
-        "lightningcss-linux-arm64-gnu": "1.22.1",
-        "lightningcss-linux-arm64-musl": "1.22.1",
-        "lightningcss-linux-x64-gnu": "1.22.1",
-        "lightningcss-linux-x64-musl": "1.22.1",
-        "lightningcss-win32-x64-msvc": "1.22.1"
+        "lightningcss-darwin-arm64": "1.23.0",
+        "lightningcss-darwin-x64": "1.23.0",
+        "lightningcss-freebsd-x64": "1.23.0",
+        "lightningcss-linux-arm-gnueabihf": "1.23.0",
+        "lightningcss-linux-arm64-gnu": "1.23.0",
+        "lightningcss-linux-arm64-musl": "1.23.0",
+        "lightningcss-linux-x64-gnu": "1.23.0",
+        "lightningcss-linux-x64-musl": "1.23.0",
+        "lightningcss-win32-x64-msvc": "1.23.0"
      }
    },
    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.22.1.tgz",
-      "integrity": "sha512-ldvElu+R0QimNTjsKpaZkUv3zf+uefzLy/R1R19jtgOfSRM+zjUCUgDhfEDRmVqJtMwYsdhMI2aJtJChPC6Osg==",
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.23.0.tgz",
+      "integrity": "sha512-kl4Pk3Q2lnE6AJ7Qaij47KNEfY2/UXRZBT/zqGA24B8qwkgllr/j7rclKOf1axcslNXvvUdztjo4Xqh39Yq1aA==",
      "cpu": [
        "arm64"
      ],
@ -3333,13 +3326,156 @@
        "url": "https://opencollective.com/parcel"
      }
    },
-    "node_modules/linebreak": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
-      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
-      "dependencies": {
-        "base64-js": "0.0.8",
-        "unicode-trie": "^2.0.0"
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.23.0.tgz",
+      "integrity": "sha512-KeRFCNoYfDdcolcFXvokVw+PXCapd2yHS1Diko1z1BhRz/nQuD5XyZmxjWdhmhN/zj5sH8YvWsp0/lPLVzqKpg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.23.0.tgz",
+      "integrity": "sha512-xhnhf0bWPuZxcqknvMDRFFo2TInrmQRWZGB0f6YoAsZX8Y+epfjHeeOIGCfAmgF0DgZxHwYc8mIR5tQU9/+ROA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.23.0.tgz",
+      "integrity": "sha512-fBamf/bULvmWft9uuX+bZske236pUZEoUlaHNBjnueaCTJ/xd8eXgb0cEc7S5o0Nn6kxlauMBnqJpF70Bgq3zg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.23.0.tgz",
+      "integrity": "sha512-RS7sY77yVLOmZD6xW2uEHByYHhQi5JYWmgVumYY85BfNoVI3DupXSlzbw+b45A9NnVKq45+oXkiN6ouMMtTwfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.23.0.tgz",
+      "integrity": "sha512-cU00LGb6GUXCwof6ACgSMKo3q7XYbsyTj0WsKHLi1nw7pV0NCq8nFTn6ZRBYLoKiV8t+jWl0Hv8KkgymmK5L5g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.23.0.tgz",
+      "integrity": "sha512-q4jdx5+5NfB0/qMbXbOmuC6oo7caPnFghJbIAV90cXZqgV8Am3miZhC4p+sQVdacqxfd+3nrle4C8icR3p1AYw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.23.0.tgz",
+      "integrity": "sha512-G9Ri3qpmF4qef2CV/80dADHKXRAQeQXpQTLx7AiQrBYQHqBjB75oxqj06FCIe5g4hNCqLPnM9fsO4CyiT1sFSQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.23.0.tgz",
+      "integrity": "sha512-1rcBDJLU+obPPJM6qR5fgBUiCdZwZLafZM5f9kwjFLkb/UBNIzmae39uCSmh71nzPCTXZqHbvwu23OWnWEz+eg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
      }
    },
    "node_modules/longest-streak": {
@ -3726,9 +3862,9 @@
      }
    },
    "node_modules/mdast-util-to-hast": {
-      "version": "13.0.2",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.0.2.tgz",
-      "integrity": "sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==",
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
+      "integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
      "dependencies": {
        "@types/hast": "^3.0.0",
        "@types/mdast": "^4.0.0",
@ -3737,7 +3873,8 @@
        "micromark-util-sanitize-uri": "^2.0.0",
        "trim-lines": "^3.0.0",
        "unist-util-position": "^5.0.0",
-        "unist-util-visit": "^5.0.0"
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
      },
      "funding": {
        "type": "opencollective",
@ -4720,9 +4857,9 @@
      }
    },
    "node_modules/prettier": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
-      "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
+      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
      "dev": true,
      "bin": {
        "prettier": "bin/prettier.cjs"
@ -5135,9 +5272,9 @@
      }
    },
    "node_modules/remark-rehype": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.0.0.tgz",
-      "integrity": "sha512-vx8x2MDMcxuE4lBmQ46zYUDfcFMmvg80WYX+UNLeG6ixjdCCLcw1lrgAukwBTuOFsS78eoAedHGn9sNM0w7TPw==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
+      "integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
      "dependencies": {
        "@types/hast": "^3.0.0",
        "@types/mdast": "^4.0.0",
@ -5452,9 +5589,9 @@
      }
    },
    "node_modules/rfdc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
-      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
+      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg=="
    },
    "node_modules/rimraf": {
      "version": "5.0.5",
@ -6181,6 +6318,12 @@
        "node": ">=14.17"
      }
    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
    "node_modules/unherit": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/unherit/-/unherit-3.0.1.tgz",
@ -6580,9 +6723,9 @@
      "integrity": "sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw=="
    },
    "node_modules/workerpool": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-8.0.0.tgz",
-      "integrity": "sha512-aoLtwqMXoYVA1JV+t8uCLo7sXkF4Q1Ijrn7954X2IVyysk2bv2Il7C9sVJH8xk9xJAL0FNgR+hPOhmvnMk/P5Q=="
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.1.0.tgz",
+      "integrity": "sha512-+wRWfm9yyJghvXLSHMQj3WXDxHbibHAQmRrWbqKBfy0RjftZNeQaW+Std5bSYc83ydkrxoPTPOWVlXUR9RWJdQ=="
    },
    "node_modules/wrap-ansi": {
      "version": "8.1.0",
--- a/package.json
+++ b/package.json
@ -2,7 +2,7 @@
  "name": "@jackyzha0/quartz",
  "description": "🌱 publish your digital garden and notes as a website",
  "private": true,
-  "version": "4.1.5",
+  "version": "4.2.1",
  "type": "module",
  "author": "jackyzha0 <j.zhao2k19@gmail.com>",
  "license": "MIT",
@ -35,9 +35,9 @@
  },
  "dependencies": {
    "@clack/prompts": "^0.7.0",
-    "@floating-ui/dom": "^1.5.3",
-    "@napi-rs/simple-git": "0.1.11",
-    "async-mutex": "^0.4.0",
+    "@floating-ui/dom": "^1.6.1",
+    "@napi-rs/simple-git": "0.1.14",
+    "async-mutex": "^0.4.1",
    "chalk": "^5.3.0",
    "chokidar": "^3.5.3",
    "cli-spinner": "^0.2.10",
@ -52,9 +52,9 @@
    "hast-util-to-string": "^3.0.0",
    "is-absolute-url": "^4.0.1",
    "js-yaml": "^4.1.0",
-    "lightningcss": "^1.22.1",
+    "lightningcss": "^1.23.0",
    "mdast-util-find-and-replace": "^3.0.1",
-    "mdast-util-to-hast": "^13.0.2",
+    "mdast-util-to-hast": "^13.1.0",
    "mdast-util-to-string": "^4.0.0",
    "micromorph": "^0.4.5",
    "preact": "^10.19.3",
@ -74,9 +74,9 @@
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.0.0",
+    "remark-rehype": "^11.1.0",
    "remark-smartypants": "^2.0.0",
-    "rfdc": "^1.3.0",
+    "rfdc": "^1.3.1",
    "rimraf": "^5.0.5",
    "satori": "^0.10.6",
    "serve-handler": "^6.1.5",
@ -88,23 +88,22 @@
    "unified": "^11.0.4",
    "unist-util-visit": "^5.0.0",
    "vfile": "^6.0.1",
-    "workerpool": "^8.0.0",
+    "workerpool": "^9.1.0",
    "ws": "^8.15.1",
    "yargs": "^17.7.2"
  },
  "devDependencies": {
    "@types/cli-spinner": "^0.2.3",
    "@types/d3": "^7.4.3",
-    "@types/hast": "^3.0.3",
+    "@types/hast": "^3.0.4",
    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.11.14",
    "@types/pretty-time": "^1.1.5",
    "@types/source-map-support": "^0.5.10",
-    "@types/workerpool": "^6.4.7",
    "@types/ws": "^8.5.10",
    "@types/yargs": "^17.0.32",
    "esbuild": "^0.19.9",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
    "tsx": "^4.7.0",
    "typescript": "^5.3.3"
  }
--- a/quartz/build.ts
+++ b/quartz/build.ts
@ -126,17 +126,8 @@ async function rebuildFromEntrypoint(
  clientRefresh: () => void,
  buildData: BuildData, // note: this function mutates buildData
 ) {
-  const {
-    ctx,
-    ignored,
-    mut,
-    initialSlugs,
-    contentMap,
-    toRebuild,
-    toRemove,
-    trackedAssets,
-    lastBuildMs,
-  } = buildData
+  const { ctx, ignored, mut, initialSlugs, contentMap, toRebuild, toRemove, trackedAssets } =
+    buildData

  const { argv } = ctx

@ -164,12 +155,12 @@ async function rebuildFromEntrypoint(
    toRemove.add(filePath)
  }

-  // debounce rebuilds every 250ms
-
  const buildStart = new Date().getTime()
  buildData.lastBuildMs = buildStart
  const release = await mut.acquire()
-  if (lastBuildMs > buildStart) {
+
+  // there's another build after us, release and let them do it
+  if (buildData.lastBuildMs > buildStart) {
    release()
    return
  }
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@ -17,6 +17,7 @@ export type Analytics =
  | {
      provider: "umami"
      websiteId: string
+      host?: string
    }

 export interface GlobalConfiguration {
@ -40,6 +41,12 @@ export interface GlobalConfiguration {
   */
  generateSocialImages: boolean | Partial<SocialImageOptions>
  theme: Theme
+  /**
+   * The locale to use for date formatting. Default to "en-US"
+   * Allow to translate the date in the language of your choice.
+   * Need to be formated following the IETF language tag format (https://en.wikipedia.org/wiki/IETF_language_tag)
+   */
+  locale?: string
 }

 export interface QuartzConfig {
--- a/quartz/cli/handlers.js
+++ b/quartz/cli/handlers.js
@ -347,7 +347,7 @@ export async function handleBuild(argv) {
          directoryListing: false,
          headers: [
            {
-              source: "**/*.html",
+              source: "**/*.*",
              headers: [{ key: "Content-Disposition", value: "inline" }],
            },
            {
--- a/quartz/components/ArticleTitle.tsx
+++ b/quartz/components/ArticleTitle.tsx
@ -1,9 +1,10 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"

 function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
  const title = fileData.frontmatter?.title
  if (title) {
-    return <h1 class={`article-title ${displayClass ?? ""}`}>{title}</h1>
+    return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
  } else {
    return null
  }
--- a/quartz/components/Backlinks.tsx
+++ b/quartz/components/Backlinks.tsx
@ -1,12 +1,13 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
+import { classNames } from "../util/lang"

 function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
  const slug = simplifySlug(fileData.slug!)
  const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
  return (
-    <div class={`backlinks ${displayClass ?? ""}`}>
+    <div class={classNames(displayClass, "backlinks")}>
      <h3>Backlinks</h3>
      <ul class="overflow">
        {backlinkFiles.length > 0 ? (
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@ -2,6 +2,7 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
 import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
+import { classNames } from "../util/lang"

 type CrumbData = {
  displayName: string
@ -113,7 +114,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
    }

    return (
-      <nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs">
+      <nav class={classNames(displayClass, "breadcrumb-container")} aria-label="breadcrumbs">
        {crumbs.map((crumb, index) => (
          <div class="breadcrumb-element">
            <a href={crumb.path}>{crumb.displayName}</a>
--- a/quartz/components/ContentMeta.tsx
+++ b/quartz/components/ContentMeta.tsx
@ -1,6 +1,7 @@
 import { formatDate, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
+import { classNames } from "../util/lang"

 interface ContentMetaOptions {
  /**
@ -24,7 +25,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
      const segments: string[] = []

      if (fileData.dates) {
-        segments.push(formatDate(getDate(cfg, fileData)!))
+        segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
      }

      // Display reading time if enabled
@ -33,7 +34,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
        segments.push(timeTaken)
      }

-      return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p>
+      return <p class={classNames(displayClass, "content-meta")}>{segments.join(", ")}</p>
    } else {
      return null
    }
--- a/quartz/components/Darkmode.tsx
+++ b/quartz/components/Darkmode.tsx
@ -4,10 +4,11 @@
 import darkmodeScript from "./scripts/darkmode.inline"
 import styles from "./styles/darkmode.scss"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"

 function Darkmode({ displayClass }: QuartzComponentProps) {
  return (
-    <div class={`darkmode ${displayClass ?? ""}`}>
+    <div class={classNames(displayClass, "darkmode")}>
      <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
      <label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}>
        <svg
--- a/quartz/components/Date.tsx
+++ b/quartz/components/Date.tsx
@ -3,6 +3,7 @@ import { QuartzPluginData } from "../plugins/vfile"

 interface Props {
  date: Date
+  locale?: string
 }

 export type ValidDateType = keyof Required<QuartzPluginData>["dates"]
@ -16,14 +17,14 @@ export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date
  return data.dates?.[cfg.defaultDateType]
 }

-export function formatDate(d: Date): string {
-  return d.toLocaleDateString("en-US", {
+export function formatDate(d: Date, locale = "en-US"): string {
+  return d.toLocaleDateString(locale, {
    year: "numeric",
    month: "short",
    day: "2-digit",
  })
 }

-export function Date({ date }: Props) {
-  return <>{formatDate(date)}</>
+export function Date({ date, locale }: Props) {
+  return <>{formatDate(date, locale)}</>
 }
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@ -5,6 +5,7 @@ import explorerStyle from "./styles/explorer.scss"
 import script from "./scripts/explorer.inline"
 import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
 import { QuartzPluginData } from "../plugins/vfile"
+import { classNames } from "../util/lang"

 // Options interface defined in `ExplorerNode` to avoid circular dependency
 const defaultOptions = {
@ -69,16 +70,15 @@ export default ((userOpts?: Partial<Options>) => {
    }

    // Get all folders of tree. Initialize with collapsed state
-    const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
-
    // Stringify to pass json tree as data attribute ([data-tree])
+    const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
    jsonTree = JSON.stringify(folders)
  }

  function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
    constructFileTree(allFiles)
    return (
-      <div class={`explorer ${displayClass ?? ""}`}>
+      <div class={classNames(displayClass, "explorer")}>
        <button
          type="button"
          id="explorer"
--- a/quartz/components/Graph.tsx
+++ b/quartz/components/Graph.tsx
@ -2,6 +2,7 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 // @ts-ignore
 import script from "./scripts/graph.inline"
 import style from "./styles/graph.scss"
+import { classNames } from "../util/lang"

 export interface D3Config {
  drag: boolean
@ -56,7 +57,7 @@ export default ((opts?: GraphOptions) => {
    const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
    const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
    return (
-      <div class={`graph ${displayClass ?? ""}`}>
+      <div class={classNames(displayClass, "graph")}>
        <h3>Graph View</h3>
        <div class="graph-outer">
          <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
--- a/quartz/components/PageList.tsx
+++ b/quartz/components/PageList.tsx
@ -46,7 +46,7 @@ export function PageList({ cfg, fileData, allFiles, limit }: Props) {
            <div class="section">
              {page.dates && (
                <p class="meta">
-                  <Date date={getDate(cfg, page)!} />
+                  <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                </p>
              )}
              <div class="desc">
--- a/quartz/components/PageTitle.tsx
+++ b/quartz/components/PageTitle.tsx
@ -1,11 +1,12 @@
 import { pathToRoot } from "../util/path"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"

 function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
  const title = cfg?.pageTitle ?? "Untitled Quartz"
  const baseDir = pathToRoot(fileData.slug!)
  return (
-    <h1 class={`page-title ${displayClass ?? ""}`}>
+    <h1 class={classNames(displayClass, "page-title")}>
      <a href={baseDir}>{title}</a>
    </h1>
  )
--- a/quartz/components/RecentNotes.tsx
+++ b/quartz/components/RecentNotes.tsx
@ -5,6 +5,7 @@ import { byDateAndAlphabetical } from "./PageList"
 import style from "./styles/recentNotes.scss"
 import { Date, getDate } from "./Date"
 import { GlobalConfiguration } from "../cfg"
+import { classNames } from "../util/lang"

 interface Options {
  title: string
@ -28,7 +29,7 @@ export default ((userOpts?: Partial<Options>) => {
    const pages = allFiles.filter(opts.filter).sort(opts.sort)
    const remaining = Math.max(0, pages.length - opts.limit)
    return (
-      <div class={`recent-notes ${displayClass ?? ""}`}>
+      <div class={classNames(displayClass, "recent-notes")}>
        <h3>{opts.title}</h3>
        <ul class="recent-ul">
          {pages.slice(0, opts.limit).map((page) => {
@ -47,7 +48,7 @@ export default ((userOpts?: Partial<Options>) => {
                  </div>
                  {page.dates && (
                    <p class="meta">
-                      <Date date={getDate(cfg, page)!} />
+                      <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                    </p>
                  )}
                  <ul class="tags">
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@ -2,11 +2,22 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
+import { classNames } from "../util/lang"

-export default (() => {
+export interface SearchOptions {
+  enablePreview: boolean
+}
+
+const defaultOptions: SearchOptions = {
+  enablePreview: true,
+}
+
+export default ((userOpts?: Partial<SearchOptions>) => {
  function Search({ displayClass }: QuartzComponentProps) {
+    const opts = { ...defaultOptions, ...userOpts }
+
    return (
-      <div class={`search ${displayClass ?? ""}`}>
+      <div class={classNames(displayClass, "search")}>
        <div id="search-icon">
          <p>Search</p>
          <div></div>
@ -35,7 +46,7 @@ export default (() => {
              aria-label="Search for something"
              placeholder="Search for something"
            />
-            <div id="results-container"></div>
+            <div id="search-layout" data-preview={opts.enablePreview}></div>
          </div>
        </div>
      </div>
--- a/quartz/components/Spacer.tsx
+++ b/quartz/components/Spacer.tsx
@ -1,7 +1,8 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"

 function Spacer({ displayClass }: QuartzComponentProps) {
-  return <div class={`spacer ${displayClass ?? ""}`}></div>
+  return <div class={classNames(displayClass, "spacer")}></div>
 }

 export default (() => Spacer) satisfies QuartzComponentConstructor
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@ -1,6 +1,7 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import legacyStyle from "./styles/legacyToc.scss"
 import modernStyle from "./styles/toc.scss"
+import { classNames } from "../util/lang"

 // @ts-ignore
 import script from "./scripts/toc.inline"
@ -19,7 +20,7 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
  }

  return (
-    <div class={`toc ${displayClass ?? ""}`}>
+    <div class={classNames(displayClass, "toc")}>
      <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
        <h3>Table of Contents</h3>
        <svg
--- a/quartz/components/TagList.tsx
+++ b/quartz/components/TagList.tsx
@ -1,12 +1,13 @@
 import { pathToRoot, slugTag } from "../util/path"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"

 function TagList({ fileData, displayClass }: QuartzComponentProps) {
  const tags = fileData.frontmatter?.tags
  const baseDir = pathToRoot(fileData.slug!)
  if (tags && tags.length > 0) {
    return (
-      <ul class={`tags ${displayClass ?? ""}`}>
+      <ul class={classNames(displayClass, "tags")}>
        {tags.map((tag) => {
          const display = `#${tag}`
          const linkDest = baseDir + `/tags/${slugTag(tag)}`
--- a/quartz/components/pages/FolderContent.tsx
+++ b/quartz/components/pages/FolderContent.tsx
@ -33,7 +33,8 @@ export default ((opts?: Partial<FolderContentOptions>) => {
      const isDirectChild = fileParts.length === folderParts.length + 1
      return prefixed && isDirectChild
    })
-
+    const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
+    const classes = ["popover-hint", ...cssClasses].join(" ")
    const listProps = {
      ...props,
      allFiles: allPagesInFolder,
@ -45,15 +46,17 @@ export default ((opts?: Partial<FolderContentOptions>) => {
        : htmlToJsx(fileData.filePath!, tree)

    return (
-      <div class="popover-hint">
+      <div class={classes}>
        <article>
          <p>{content}</p>
        </article>
-        {options.showFolderCount && (
-          <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
-        )}
-        <div>
-          <PageList {...listProps} />
+        <div class="page-listing">
+          {options.showFolderCount && (
+            <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+          )}
+          <div>
+            <PageList {...listProps} />
+          </div>
        </div>
      </div>
    )
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@ -26,7 +26,8 @@ function TagContent(props: QuartzComponentProps) {
    (tree as Root).children.length === 0
      ? fileData.description
      : htmlToJsx(fileData.filePath!, tree)
-
+  const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
+  const classes = ["popover-hint", ...cssClasses].join(" ")
  if (tag === "/") {
    const tags = [
      ...new Set(
@ -37,9 +38,8 @@ function TagContent(props: QuartzComponentProps) {
    for (const tag of tags) {
      tagItemMap.set(tag, allPagesWithTag(tag))
    }
-
    return (
-      <div class="popover-hint">
+      <div class={classes}>
        <article>
          <p>{content}</p>
        </article>
@ -62,11 +62,13 @@ function TagContent(props: QuartzComponentProps) {
                  </a>
                </h2>
                {content && <p>{content}</p>}
-                <p>
-                  {pluralize(pages.length, "item")} with this tag.{" "}
-                  {pages.length > numPages && `Showing first ${numPages}.`}
-                </p>
-                <PageList limit={numPages} {...listProps} />
+                <div class="page-listing">
+                  <p>
+                    {pluralize(pages.length, "item")} with this tag.{" "}
+                    {pages.length > numPages && `Showing first ${numPages}.`}
+                  </p>
+                  <PageList limit={numPages} {...listProps} />
+                </div>
              </div>
            )
          })}
@ -81,11 +83,13 @@ function TagContent(props: QuartzComponentProps) {
    }

    return (
-      <div class="popover-hint">
+      <div class={classes}>
        <article>{content}</article>
-        <p>{pluralize(pages.length, "item")} with this tag.</p>
-        <div>
-          <PageList {...listProps} />
+        <div class="page-listing">
+          <p>{pluralize(pages.length, "item")} with this tag.</p>
+          <div>
+            <PageList {...listProps} />
+          </div>
        </div>
      </div>
    )
--- a/quartz/components/scripts/callout.inline.ts
+++ b/quartz/components/scripts/callout.inline.ts
@ -1,21 +1,21 @@
 function toggleCallout(this: HTMLElement) {
  const outerBlock = this.parentElement!
-  outerBlock.classList.toggle(`is-collapsed`)
-  const collapsed = outerBlock.classList.contains(`is-collapsed`)
+  outerBlock.classList.toggle("is-collapsed")
+  const collapsed = outerBlock.classList.contains("is-collapsed")
  const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight
-  outerBlock.style.maxHeight = height + `px`
+  outerBlock.style.maxHeight = height + "px"

  // walk and adjust height of all parents
  let current = outerBlock
  let parent = outerBlock.parentElement
  while (parent) {
-    if (!parent.classList.contains(`callout`)) {
+    if (!parent.classList.contains("callout")) {
      return
    }

-    const collapsed = parent.classList.contains(`is-collapsed`)
+    const collapsed = parent.classList.contains("is-collapsed")
    const height = collapsed ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight
-    parent.style.maxHeight = height + `px`
+    parent.style.maxHeight = height + "px"

    current = parent
    parent = parent.parentElement
@ -30,15 +30,15 @@ function setupCallout() {
    const title = div.firstElementChild

    if (title) {
-      title.removeEventListener(`click`, toggleCallout)
-      title.addEventListener(`click`, toggleCallout)
+      title.addEventListener("click", toggleCallout)
+      window.addCleanup(() => title.removeEventListener("click", toggleCallout))

-      const collapsed = div.classList.contains(`is-collapsed`)
+      const collapsed = div.classList.contains("is-collapsed")
      const height = collapsed ? title.scrollHeight : div.scrollHeight
-      div.style.maxHeight = height + `px`
+      div.style.maxHeight = height + "px"
    }
  }
 }

-document.addEventListener(`nav`, setupCallout)
-window.addEventListener(`resize`, setupCallout)
+document.addEventListener("nav", setupCallout)
+window.addEventListener("resize", setupCallout)
--- a/quartz/components/scripts/clipboard.inline.ts
+++ b/quartz/components/scripts/clipboard.inline.ts
@ -14,7 +14,7 @@ document.addEventListener("nav", () => {
      button.type = "button"
      button.innerHTML = svgCopy
      button.ariaLabel = "Copy source"
-      button.addEventListener("click", () => {
+      function onClick() {
        navigator.clipboard.writeText(source).then(
          () => {
            button.blur()
@ -26,7 +26,9 @@ document.addEventListener("nav", () => {
          },
          (error) => console.error(error),
        )
-      })
+      }
+      button.addEventListener("click", onClick)
+      window.addCleanup(() => button.removeEventListener("click", onClick))
      els[i].prepend(button)
    }
  }
--- a/quartz/components/scripts/darkmode.inline.ts
+++ b/quartz/components/scripts/darkmode.inline.ts
@ -10,28 +10,31 @@ const emitThemeChangeEvent = (theme: "light" | "dark") => {
 }

 document.addEventListener("nav", () => {
-  const switchTheme = (e: any) => {
-    const newTheme = e.target.checked ? "dark" : "light"
+  const switchTheme = (e: Event) => {
+    const newTheme = (e.target as HTMLInputElement)?.checked ? "dark" : "light"
    document.documentElement.setAttribute("saved-theme", newTheme)
    localStorage.setItem("theme", newTheme)
    emitThemeChangeEvent(newTheme)
  }

+  const themeChange = (e: MediaQueryListEvent) => {
+    const newTheme = e.matches ? "dark" : "light"
+    document.documentElement.setAttribute("saved-theme", newTheme)
+    localStorage.setItem("theme", newTheme)
+    toggleSwitch.checked = e.matches
+    emitThemeChangeEvent(newTheme)
+  }
+
  // Darkmode toggle
  const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement
-  toggleSwitch.removeEventListener("change", switchTheme)
  toggleSwitch.addEventListener("change", switchTheme)
+  window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
  if (currentTheme === "dark") {
    toggleSwitch.checked = true
  }

  // Listen for changes in prefers-color-scheme
  const colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-  colorSchemeMediaQuery.addEventListener("change", (e) => {
-    const newTheme = e.matches ? "dark" : "light"
-    document.documentElement.setAttribute("saved-theme", newTheme)
-    localStorage.setItem("theme", newTheme)
-    toggleSwitch.checked = e.matches
-    emitThemeChangeEvent(newTheme)
-  })
+  colorSchemeMediaQuery.addEventListener("change", themeChange)
+  window.addCleanup(() => colorSchemeMediaQuery.removeEventListener("change", themeChange))
 })
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@ -1,132 +1,106 @@
 import { FolderState } from "../ExplorerNode"

-// Current state of folders
-let explorerState: FolderState[]
-
+type MaybeHTMLElement = HTMLElement | undefined
+let currentExplorerState: FolderState[]
 const observer = new IntersectionObserver((entries) => {
  // If last element is observed, remove gradient of "overflow" class so element is visible
-  const explorer = document.getElementById("explorer-ul")
+  const explorerUl = document.getElementById("explorer-ul")
+  if (!explorerUl) return
  for (const entry of entries) {
    if (entry.isIntersecting) {
-      explorer?.classList.add("no-background")
+      explorerUl.classList.add("no-background")
    } else {
-      explorer?.classList.remove("no-background")
+      explorerUl.classList.remove("no-background")
    }
  }
 })

 function toggleExplorer(this: HTMLElement) {
-  // Toggle collapsed state of entire explorer
  this.classList.toggle("collapsed")
-  const content = this.nextElementSibling as HTMLElement
+  const content = this.nextElementSibling as MaybeHTMLElement
+  if (!content) return
+
  content.classList.toggle("collapsed")
  content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
 }

 function toggleFolder(evt: MouseEvent) {
  evt.stopPropagation()
+  const target = evt.target as MaybeHTMLElement
+  if (!target) return

-  // Element that was clicked
-  const target = evt.target as HTMLElement
-
-  // Check if target was svg icon or button
  const isSvg = target.nodeName === "svg"
+  const childFolderContainer = (
+    isSvg
+      ? target.parentElement?.nextSibling
+      : target.parentElement?.parentElement?.nextElementSibling
+  ) as MaybeHTMLElement
+  const currentFolderParent = (
+    isSvg ? target.nextElementSibling : target.parentElement
+  ) as MaybeHTMLElement
+  if (!(childFolderContainer && currentFolderParent)) return

-  // corresponding <ul> element relative to clicked button/folder
-  let childFolderContainer: HTMLElement
-
-  // <li> element of folder (stores folder-path dataset)
-  let currentFolderParent: HTMLElement
-
-  // Get correct relative container and toggle collapsed class
-  if (isSvg) {
-    childFolderContainer = target.parentElement?.nextSibling as HTMLElement
-    currentFolderParent = target.nextElementSibling as HTMLElement
-
-    childFolderContainer.classList.toggle("open")
-  } else {
-    childFolderContainer = target.parentElement?.parentElement?.nextElementSibling as HTMLElement
-    currentFolderParent = target.parentElement as HTMLElement
-
-    childFolderContainer.classList.toggle("open")
-  }
-  if (!childFolderContainer) return
-
-  // Collapse folder container
+  childFolderContainer.classList.toggle("open")
  const isCollapsed = childFolderContainer.classList.contains("open")
  setFolderState(childFolderContainer, !isCollapsed)
-
-  // Save folder state to localStorage
-  const clickFolderPath = currentFolderParent.dataset.folderpath as string
-
-  const fullFolderPath = clickFolderPath
-  toggleCollapsedByPath(explorerState, fullFolderPath)
-
-  const stringifiedFileTree = JSON.stringify(explorerState)
+  const fullFolderPath = currentFolderParent.dataset.folderpath as string
+  toggleCollapsedByPath(currentExplorerState, fullFolderPath)
+  const stringifiedFileTree = JSON.stringify(currentExplorerState)
  localStorage.setItem("fileTree", stringifiedFileTree)
 }

 function setupExplorer() {
-  // Set click handler for collapsing entire explorer
  const explorer = document.getElementById("explorer")
+  if (!explorer) return
+
+  if (explorer.dataset.behavior === "collapse") {
+    for (const item of document.getElementsByClassName(
+      "folder-button",
+    ) as HTMLCollectionOf<HTMLElement>) {
+      item.addEventListener("click", toggleFolder)
+      window.addCleanup(() => item.removeEventListener("click", toggleFolder))
+    }
+  }
+
+  explorer.addEventListener("click", toggleExplorer)
+  window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
+
+  // Set up click handlers for each folder (click handler on folder "icon")
+  for (const item of document.getElementsByClassName(
+    "folder-icon",
+  ) as HTMLCollectionOf<HTMLElement>) {
+    item.addEventListener("click", toggleFolder)
+    window.addCleanup(() => item.removeEventListener("click", toggleFolder))
+  }

  // Get folder state from local storage
  const storageTree = localStorage.getItem("fileTree")
-
-  // Convert to bool
  const useSavedFolderState = explorer?.dataset.savestate === "true"
+  const oldExplorerState: FolderState[] =
+    storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
+  const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
+  const newExplorerState: FolderState[] = explorer.dataset.tree
+    ? JSON.parse(explorer.dataset.tree)
+    : []
+  currentExplorerState = []
+  for (const { path, collapsed } of newExplorerState) {
+    currentExplorerState.push({ path, collapsed: oldIndex.get(path) ?? collapsed })
+  }

-  if (explorer) {
-    // Get config
-    const collapseBehavior = explorer.dataset.behavior
-
-    // Add click handlers for all folders (click handler on folder "label")
-    if (collapseBehavior === "collapse") {
-      Array.prototype.forEach.call(
-        document.getElementsByClassName("folder-button"),
-        function (item) {
-          item.removeEventListener("click", toggleFolder)
-          item.addEventListener("click", toggleFolder)
-        },
-      )
+  currentExplorerState.map((folderState) => {
+    const folderLi = document.querySelector(
+      `[data-folderpath='${folderState.path}']`,
+    ) as MaybeHTMLElement
+    const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
+    if (folderUl) {
+      setFolderState(folderUl, folderState.collapsed)
    }
-
-    // Add click handler to main explorer
-    explorer.removeEventListener("click", toggleExplorer)
-    explorer.addEventListener("click", toggleExplorer)
-  }
-
-  // Set up click handlers for each folder (click handler on folder "icon")
-  Array.prototype.forEach.call(document.getElementsByClassName("folder-icon"), function (item) {
-    item.removeEventListener("click", toggleFolder)
-    item.addEventListener("click", toggleFolder)
  })
-
-  if (storageTree && useSavedFolderState) {
-    // Get state from localStorage and set folder state
-    explorerState = JSON.parse(storageTree)
-    explorerState.map((folderUl) => {
-      // grab <li> element for matching folder path
-      const folderLi = document.querySelector(`[data-folderpath='${folderUl.path}']`) as HTMLElement
-
-      // Get corresponding content <ul> tag and set state
-      if (folderLi) {
-        const folderUL = folderLi.parentElement?.nextElementSibling
-        if (folderUL) {
-          setFolderState(folderUL as HTMLElement, folderUl.collapsed)
-        }
-      }
-    })
-  } else if (explorer?.dataset.tree) {
-    // If tree is not in localStorage or config is disabled, use tree passed from Explorer as dataset
-    explorerState = JSON.parse(explorer.dataset.tree)
-  }
 }

 window.addEventListener("resize", setupExplorer)
 document.addEventListener("nav", () => {
  setupExplorer()
-
  observer.disconnect()

  // select pseudo element at end of list
@ -142,11 +116,7 @@ document.addEventListener("nav", () => {
 * @param collapsed if folder should be set to collapsed or not
 */
 function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
-  if (collapsed) {
-    folderElement?.classList.remove("open")
-  } else {
-    folderElement?.classList.add("open")
-  }
+  return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
 }

 /**
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@ -319,12 +319,12 @@ function renderGlobalGraph() {
  registerEscapeHandler(container, hideGlobalGraph)
 }

-document.addEventListener("nav", async (e: unknown) => {
-  const slug = (e as CustomEventMap["nav"]).detail.url
+document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
+  const slug = e.detail.url
  addToVisited(slug)
  await renderGraph("graph-container", slug)

  const containerIcon = document.getElementById("global-graph-icon")
-  containerIcon?.removeEventListener("click", renderGlobalGraph)
  containerIcon?.addEventListener("click", renderGlobalGraph)
+  window.addCleanup(() => containerIcon?.removeEventListener("click", renderGlobalGraph))
 })
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@ -76,7 +76,7 @@ async function mouseEnterHandler(
 document.addEventListener("nav", () => {
  const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
  for (const link of links) {
-    link.removeEventListener("mouseenter", mouseEnterHandler)
    link.addEventListener("mouseenter", mouseEnterHandler)
+    window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler))
  }
 })
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@ -1,7 +1,7 @@
 import FlexSearch from "flexsearch"
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import { registerEscapeHandler, removeAllChildren } from "./util"
-import { FullSlug, resolveRelative } from "../../util/path"
+import { FullSlug, normalizeRelativeURLs, resolveRelative } from "../../util/path"

 interface Item {
  id: number
@ -11,23 +11,53 @@ interface Item {
  tags: string[]
 }

-let index: FlexSearch.Document<Item> | undefined = undefined
-
 // Can be expanded with things like "term" in the future
 type SearchType = "basic" | "tags"
-
-// Current searchType
 let searchType: SearchType = "basic"
+let currentSearchTerm: string = ""
+const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
+let index = new FlexSearch.Document<Item>({
+  charset: "latin:extra",
+  encode: encoder,
+  document: {
+    id: "id",
+    index: [
+      {
+        field: "title",
+        tokenize: "forward",
+      },
+      {
+        field: "content",
+        tokenize: "forward",
+      },
+      {
+        field: "tags",
+        tokenize: "forward",
+      },
+    ],
+  },
+})

+const p = new DOMParser()
+const fetchContentCache: Map<FullSlug, Element[]> = new Map()
 const contextWindowWords = 30
-const numSearchResults = 5
-const numTagResults = 3
+const numSearchResults = 8
+const numTagResults = 5
+
+const tokenizeTerm = (term: string) => {
+  const tokens = term.split(/\s+/).filter((t) => t.trim() !== "")
+  const tokenLen = tokens.length
+  if (tokenLen > 1) {
+    for (let i = 1; i < tokenLen; i++) {
+      tokens.push(tokens.slice(0, i + 1).join(" "))
+    }
+  }
+
+  return tokens.sort((a, b) => b.length - a.length) // always highlight longest terms first
+}
+
 function highlight(searchTerm: string, text: string, trim?: boolean) {
-  // try to highlight longest tokens first
-  const tokenizedTerms = searchTerm
-    .split(/\s+/)
-    .filter((t) => t !== "")
-    .sort((a, b) => b.length - a.length)
+  const tokenizedTerms = tokenizeTerm(searchTerm)
  let tokenizedText = text.split(/\s+/).filter((t) => t !== "")

  let startIndex = 0
@ -71,20 +101,78 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
  }`
 }

-const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
-let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined
-document.addEventListener("nav", async (e: unknown) => {
-  const currentSlug = (e as CustomEventMap["nav"]).detail.url
+function highlightHTML(searchTerm: string, el: HTMLElement) {
+  const p = new DOMParser()
+  const tokenizedTerms = tokenizeTerm(searchTerm)
+  const html = p.parseFromString(el.innerHTML, "text/html")

+  const createHighlightSpan = (text: string) => {
+    const span = document.createElement("span")
+    span.className = "highlight"
+    span.textContent = text
+    return span
+  }
+
+  const highlightTextNodes = (node: Node, term: string) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const nodeText = node.nodeValue ?? ""
+      const regex = new RegExp(term.toLowerCase(), "gi")
+      const matches = nodeText.match(regex)
+      if (!matches || matches.length === 0) return
+      const spanContainer = document.createElement("span")
+      let lastIndex = 0
+      for (const match of matches) {
+        const matchIndex = nodeText.indexOf(match, lastIndex)
+        spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex, matchIndex)))
+        spanContainer.appendChild(createHighlightSpan(match))
+        lastIndex = matchIndex + match.length
+      }
+      spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex)))
+      node.parentNode?.replaceChild(spanContainer, node)
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      if ((node as HTMLElement).classList.contains("highlight")) return
+      Array.from(node.childNodes).forEach((child) => highlightTextNodes(child, term))
+    }
+  }
+
+  for (const term of tokenizedTerms) {
+    highlightTextNodes(html.body, term)
+  }
+
+  return html.body
+}
+
+document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
+  const currentSlug = e.detail.url
  const data = await fetchData
  const container = document.getElementById("search-container")
  const sidebar = container?.closest(".sidebar") as HTMLElement
  const searchIcon = document.getElementById("search-icon")
  const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
-  const results = document.getElementById("results-container")
-  const resultCards = document.getElementsByClassName("result-card")
+  const searchLayout = document.getElementById("search-layout")
  const idDataMap = Object.keys(data) as FullSlug[]

+  const appendLayout = (el: HTMLElement) => {
+    if (searchLayout?.querySelector(`#${el.id}`) === null) {
+      searchLayout?.appendChild(el)
+    }
+  }
+
+  const enablePreview = searchLayout?.dataset?.preview === "true"
+  let preview: HTMLDivElement | undefined = undefined
+  let previewInner: HTMLDivElement | undefined = undefined
+  const results = document.createElement("div")
+  results.id = "results-container"
+  results.style.flexBasis = enablePreview ? "min(30%, 450px)" : "100%"
+  appendLayout(results)
+
+  if (enablePreview) {
+    preview = document.createElement("div")
+    preview.id = "preview-container"
+    preview.style.flexBasis = "100%"
+    appendLayout(preview)
+  }
+
  function hideSearch() {
    container?.classList.remove("active")
    if (searchBar) {
@ -96,6 +184,12 @@ document.addEventListener("nav", async (e: unknown) => {
    if (results) {
      removeAllChildren(results)
    }
+    if (preview) {
+      removeAllChildren(preview)
+    }
+    if (searchLayout) {
+      searchLayout.classList.remove("display-results")
+    }

    searchType = "basic" // reset search type after closing
  }
@ -109,11 +203,14 @@ document.addEventListener("nav", async (e: unknown) => {
    searchBar?.focus()
  }

-  function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
+  let currentHover: HTMLInputElement | null = null
+
+  async function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
    if (e.key === "k" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
      e.preventDefault()
      const searchBarOpen = container?.classList.contains("active")
      searchBarOpen ? hideSearch() : showSearch("basic")
+      return
    } else if (e.shiftKey && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
      // Hotkey to open tag search
      e.preventDefault()
@ -122,159 +219,227 @@ document.addEventListener("nav", async (e: unknown) => {

      // add "#" prefix for tag search
      if (searchBar) searchBar.value = "#"
+      return
    }

+    if (currentHover) {
+      currentHover.classList.remove("focus")
+      currentHover.blur()
+    }
+
+    // If search is active, then we will render the first result and display accordingly
    if (!container?.classList.contains("active")) return
    else if (e.key === "Enter") {
      // If result has focus, navigate to that one, otherwise pick first result
      if (results?.contains(document.activeElement)) {
        const active = document.activeElement as HTMLInputElement
+        if (active.classList.contains("no-match")) return
+        await displayPreview(active)
        active.click()
      } else {
        const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
-        anchor?.click()
+        if (!anchor || anchor?.classList.contains("no-match")) return
+        await displayPreview(anchor)
+        anchor.click()
      }
    } else if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) {
      e.preventDefault()
      if (results?.contains(document.activeElement)) {
        // If an element in results-container already has focus, focus previous one
-        const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null
+        const currentResult = currentHover
+          ? currentHover
+          : (document.activeElement as HTMLInputElement | null)
+        const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
+        currentResult?.classList.remove("focus")
        prevResult?.focus()
+        currentHover = prevResult
+        await displayPreview(prevResult)
      }
    } else if (e.key === "ArrowDown" || e.key === "Tab") {
      e.preventDefault()
-      // When first pressing ArrowDown, results wont contain the active element, so focus first element
-      if (!results?.contains(document.activeElement)) {
-        const firstResult = resultCards[0] as HTMLInputElement | null
-        firstResult?.focus()
+      // The results should already been focused, so we need to find the next one.
+      // The activeElement is the search bar, so we need to find the first result and focus it.
+      if (document.activeElement === searchBar || currentHover !== null) {
+        const firstResult = currentHover
+          ? currentHover
+          : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
+        const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
+        firstResult?.classList.remove("focus")
+        secondResult?.focus()
+        currentHover = secondResult
+        await displayPreview(secondResult)
      } else {
        // If an element in results-container already has focus, focus next one
-        const nextResult = document.activeElement?.nextElementSibling as HTMLInputElement | null
+        const active = currentHover
+          ? currentHover
+          : (document.activeElement as HTMLInputElement | null)
+        active?.classList.remove("focus")
+        const nextResult = active?.nextElementSibling as HTMLInputElement | null
        nextResult?.focus()
+        currentHover = nextResult
+        await displayPreview(nextResult)
      }
    }
  }

-  function trimContent(content: string) {
-    // works without escaping html like in `description.ts`
-    const sentences = content.replace(/\s+/g, " ").split(".")
-    let finalDesc = ""
-    let sentenceIdx = 0
-
-    // Roughly estimate characters by (words * 5). Matches description length in `description.ts`.
-    const len = contextWindowWords * 5
-    while (finalDesc.length < len) {
-      const sentence = sentences[sentenceIdx]
-      if (!sentence) break
-      finalDesc += sentence + "."
-      sentenceIdx++
-    }
-
-    // If more content would be available, indicate it by finishing with "..."
-    if (finalDesc.length < content.length) {
-      finalDesc += ".."
-    }
-
-    return finalDesc
-  }
-
  const formatForDisplay = (term: string, id: number) => {
    const slug = idDataMap[id]
    return {
      id,
      slug,
      title: searchType === "tags" ? data[slug].title : highlight(term, data[slug].title ?? ""),
-      // if searchType is tag, display context from start of file and trim, otherwise use regular highlight
-      content:
-        searchType === "tags"
-          ? trimContent(data[slug].content)
-          : highlight(term, data[slug].content ?? "", true),
-      tags: highlightTags(term, data[slug].tags),
+      content: highlight(term, data[slug].content ?? "", true),
+      tags: highlightTags(term.substring(1), data[slug].tags),
    }
  }

  function highlightTags(term: string, tags: string[]) {
-    if (tags && searchType === "tags") {
-      // Find matching tags
-      const termLower = term.toLowerCase()
-      let matching = tags.filter((str) => str.includes(termLower))
-
-      // Subtract matching from original tags, then push difference
-      if (matching.length > 0) {
-        let difference = tags.filter((x) => !matching.includes(x))
-
-        // Convert to html (cant be done later as matches/term dont get passed to `resultToHTML`)
-        matching = matching.map((tag) => `<li><p class="match-tag">#${tag}</p></li>`)
-        difference = difference.map((tag) => `<li><p>#${tag}</p></li>`)
-        matching.push(...difference)
-      }
-
-      // Only allow max of `numTagResults` in preview
-      if (tags.length > numTagResults) {
-        matching.splice(numTagResults)
-      }
-
-      return matching
-    } else {
+    if (!tags || searchType !== "tags") {
      return []
    }
+
+    return tags
+      .map((tag) => {
+        if (tag.toLowerCase().includes(term.toLowerCase())) {
+          return `<li><p class="match-tag">#${tag}</p></li>`
+        } else {
+          return `<li><p>#${tag}</p></li>`
+        }
+      })
+      .slice(0, numTagResults)
+  }
+
+  function resolveUrl(slug: FullSlug): URL {
+    return new URL(resolveRelative(currentSlug, slug), location.toString())
  }

  const resultToHTML = ({ slug, title, content, tags }: Item) => {
-    const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : ``
+    const htmlTags = tags.length > 0 ? `<ul class="tags">${tags.join("")}</ul>` : ``
    const itemTile = document.createElement("a")
    itemTile.classList.add("result-card")
    itemTile.id = slug
-    itemTile.href = new URL(resolveRelative(currentSlug, slug), location.toString()).toString()
-    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p>${content}</p>`
-    itemTile.addEventListener("click", (event) => {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
-      hideSearch()
+    itemTile.href = resolveUrl(slug).toString()
+    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
+
+    async function onMouseEnter(ev: MouseEvent) {
+      if (!ev.target) return
+      currentHover?.classList.remove("focus")
+      currentHover?.blur()
+      const target = ev.target as HTMLInputElement
+      currentHover = target
+      currentHover.classList.add("focus")
+      await displayPreview(target)
+    }
+
+    async function onMouseLeave(ev: MouseEvent) {
+      if (!ev.target) return
+      const target = ev.target as HTMLElement
+      target.classList.remove("focus")
+    }
+
+    const events = [
+      ["mouseenter", onMouseEnter],
+      ["mouseleave", onMouseLeave],
+      [
+        "click",
+        (event: MouseEvent) => {
+          if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+          hideSearch()
+        },
+      ],
+    ] as const
+
+    events.forEach(([event, handler]) => {
+      itemTile.addEventListener(event, handler)
+      window.addCleanup(() => itemTile.removeEventListener(event, handler))
    })
+
    return itemTile
  }

-  function displayResults(finalResults: Item[]) {
+  async function displayResults(finalResults: Item[]) {
    if (!results) return

    removeAllChildren(results)
    if (finalResults.length === 0) {
-      results.innerHTML = `<a class="result-card">
-                    <h3>No results.</h3>
-                    <p>Try another search term?</p>
-                </a>`
+      results.innerHTML = `<a class="result-card no-match">
+          <h3>No results.</h3>
+          <p>Try another search term?</p>
+      </a>`
    } else {
      results.append(...finalResults.map(resultToHTML))
    }
+
+    if (finalResults.length === 0 && preview) {
+      // no results, clear previous preview
+      removeAllChildren(preview)
+    } else {
+      // focus on first result, then also dispatch preview immediately
+      const firstChild = results.firstElementChild as HTMLElement
+      firstChild.classList.add("focus")
+      currentHover = firstChild as HTMLInputElement
+      await displayPreview(firstChild)
+    }
+  }
+
+  async function fetchContent(slug: FullSlug): Promise<Element[]> {
+    if (fetchContentCache.has(slug)) {
+      return fetchContentCache.get(slug) as Element[]
+    }
+
+    const targetUrl = resolveUrl(slug).toString()
+    const contents = await fetch(targetUrl)
+      .then((res) => res.text())
+      .then((contents) => {
+        if (contents === undefined) {
+          throw new Error(`Could not fetch ${targetUrl}`)
+        }
+        const html = p.parseFromString(contents ?? "", "text/html")
+        normalizeRelativeURLs(html, targetUrl)
+        return [...html.getElementsByClassName("popover-hint")]
+      })
+
+    fetchContentCache.set(slug, contents)
+    return contents
+  }
+
+  async function displayPreview(el: HTMLElement | null) {
+    if (!searchLayout || !enablePreview || !el || !preview) return
+    const slug = el.id as FullSlug
+    const innerDiv = await fetchContent(slug).then((contents) =>
+      contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
+    )
+    previewInner = document.createElement("div")
+    previewInner.classList.add("preview-inner")
+    previewInner.append(...innerDiv)
+    preview.replaceChildren(previewInner)
+
+    // scroll to longest
+    const highlights = [...preview.querySelectorAll(".highlight")].sort(
+      (a, b) => b.innerHTML.length - a.innerHTML.length,
+    )
+    highlights[0]?.scrollIntoView({ block: "start" })
  }

  async function onType(e: HTMLElementEventMap["input"]) {
-    let term = (e.target as HTMLInputElement).value
+    if (!searchLayout || !index) return
+    currentSearchTerm = (e.target as HTMLInputElement).value
+    searchLayout.classList.toggle("display-results", currentSearchTerm !== "")
+    searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"
+
    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
-
-    if (term.toLowerCase().startsWith("#")) {
-      searchType = "tags"
-    } else {
-      searchType = "basic"
-    }
-
-    switch (searchType) {
-      case "tags": {
-        term = term.substring(1)
-        searchResults =
-          (await index?.searchAsync({ query: term, limit: numSearchResults, index: ["tags"] })) ??
-          []
-        break
-      }
-      case "basic":
-      default: {
-        searchResults =
-          (await index?.searchAsync({
-            query: term,
-            limit: numSearchResults,
-            index: ["title", "content"],
-          })) ?? []
-      }
+    if (searchType === "tags") {
+      searchResults = await index.searchAsync({
+        query: currentSearchTerm.substring(1),
+        limit: numSearchResults,
+        index: ["tags"],
+      })
+    } else if (searchType === "basic") {
+      searchResults = await index.searchAsync({
+        query: currentSearchTerm,
+        limit: numSearchResults,
+        index: ["title", "content"],
+      })
    }

    const getByField = (field: string): number[] => {
@ -288,50 +453,19 @@ document.addEventListener("nav", async (e: unknown) => {
      ...getByField("content"),
      ...getByField("tags"),
    ])
-    const finalResults = [...allIds].map((id) => formatForDisplay(term, id))
-    displayResults(finalResults)
-  }
-
-  if (prevShortcutHandler) {
-    document.removeEventListener("keydown", prevShortcutHandler)
+    const finalResults = [...allIds].map((id) => formatForDisplay(currentSearchTerm, id))
+    await displayResults(finalResults)
  }

  document.addEventListener("keydown", shortcutHandler)
-  prevShortcutHandler = shortcutHandler
-  searchIcon?.removeEventListener("click", () => showSearch("basic"))
+  window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
  searchIcon?.addEventListener("click", () => showSearch("basic"))
-  searchBar?.removeEventListener("input", onType)
+  window.addCleanup(() => searchIcon?.removeEventListener("click", () => showSearch("basic")))
  searchBar?.addEventListener("input", onType)
+  window.addCleanup(() => searchBar?.removeEventListener("input", onType))

-  // setup index if it hasn't been already
-  if (!index) {
-    index = new FlexSearch.Document({
-      charset: "latin:extra",
-      encode: encoder,
-      document: {
-        id: "id",
-        index: [
-          {
-            field: "title",
-            tokenize: "forward",
-          },
-          {
-            field: "content",
-            tokenize: "forward",
-          },
-          {
-            field: "tags",
-            tokenize: "forward",
-          },
-        ],
-      },
-    })
-
-    fillDocument(index, data)
-  }
-
-  // register handlers
  registerEscapeHandler(container, hideSearch)
+  await fillDocument(data)
 })

 /**
@ -339,16 +473,20 @@ document.addEventListener("nav", async (e: unknown) => {
 * @param index index to fill
 * @param data data to fill index with
 */
-async function fillDocument(index: FlexSearch.Document<Item, false>, data: any) {
+async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
  let id = 0
+  const promises: Array<Promise<unknown>> = []
  for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
-    await index.addAsync(id, {
-      id,
-      slug: slug as FullSlug,
-      title: fileData.title,
-      content: fileData.content,
-      tags: fileData.tags,
-    })
-    id++
+    promises.push(
+      index.addAsync(id++, {
+        id,
+        slug: slug as FullSlug,
+        title: fileData.title,
+        content: fileData.content,
+        tags: fileData.tags,
+      }),
+    )
  }
+
+  return await Promise.all(promises)
 }
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@ -39,6 +39,9 @@ function notifyNav(url: FullSlug) {
  document.dispatchEvent(event)
 }

+const cleanupFns: Set<(...args: any[]) => void> = new Set()
+window.addCleanup = (fn) => cleanupFns.add(fn)
+
 let p: DOMParser
 async function navigate(url: URL, isBack: boolean = false) {
  p = p || new DOMParser()
@ -57,6 +60,10 @@ async function navigate(url: URL, isBack: boolean = false) {

  if (!contents) return

+  // cleanup old
+  cleanupFns.forEach((fn) => fn())
+  cleanupFns.clear()
+
  const html = p.parseFromString(contents, "text/html")
  normalizeRelativeURLs(html, url)

--- a/quartz/components/scripts/toc.inline.ts
+++ b/quartz/components/scripts/toc.inline.ts
@ -16,7 +16,8 @@ const observer = new IntersectionObserver((entries) => {

 function toggleToc(this: HTMLElement) {
  this.classList.toggle("collapsed")
-  const content = this.nextElementSibling as HTMLElement
+  const content = this.nextElementSibling as HTMLElement | undefined
+  if (!content) return
  content.classList.toggle("collapsed")
  content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
 }
@ -25,10 +26,11 @@ function setupToc() {
  const toc = document.getElementById("toc")
  if (toc) {
    const collapsed = toc.classList.contains("collapsed")
-    const content = toc.nextElementSibling as HTMLElement
+    const content = toc.nextElementSibling as HTMLElement | undefined
+    if (!content) return
    content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
-    toc.removeEventListener("click", toggleToc)
    toc.addEventListener("click", toggleToc)
+    window.addCleanup(() => toc.removeEventListener("click", toggleToc))
  }
 }

--- a/quartz/components/scripts/util.ts
+++ b/quartz/components/scripts/util.ts
@ -12,10 +12,10 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb:
    cb()
  }

-  outsideContainer?.removeEventListener("click", click)
  outsideContainer?.addEventListener("click", click)
-  document.removeEventListener("keydown", esc)
+  window.addCleanup(() => outsideContainer?.removeEventListener("click", click))
  document.addEventListener("keydown", esc)
+  window.addCleanup(() => document.removeEventListener("keydown", esc))
 }

 export function removeAllChildren(node: HTMLElement) {
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 button#explorer {
  all: unset;
  background-color: transparent;
@ -85,7 +87,7 @@ svg {
    color: var(--secondary);
    font-family: var(--headerFont);
    font-size: 0.95rem;
-    font-weight: 600;
+    font-weight: $boldWeight;
    line-height: 1.5rem;
    display: inline-block;
  }
@ -110,7 +112,7 @@ svg {
      font-size: 0.95rem;
      display: inline-block;
      color: var(--secondary);
-      font-weight: 600;
+      font-weight: $boldWeight;
      margin: 0;
      line-height: 1.5rem;
      pointer-events: none;
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@ -54,15 +54,11 @@
    }

    & > #search-space {
-      width: 50%;
-      margin-top: 15vh;
+      width: 65%;
+      margin-top: 12vh;
      margin-left: auto;
      margin-right: auto;

-      @media all and (max-width: $fullPageWidth) {
-        width: 90%;
-      }
-
      & > * {
        width: 100%;
        border-radius: 5px;
@ -86,93 +82,134 @@
        }
      }

-      & > #results-container {
-        & .result-card {
-          padding: 1em;
-          cursor: pointer;
-          transition: background 0.2s ease;
-          border: 1px solid var(--lightgray);
-          border-bottom: none;
-          width: 100%;
+      & > #search-layout {
+        display: none;
+        flex-direction: row;
+        border: 1px solid var(--lightgray);
+
+        &.display-results {
+          display: flex;
+        }
+
+        @media all and (min-width: $tabletBreakpoint) {
+          &[data-preview] {
+            & .result-card > p.preview {
+              display: none;
+            }
+          }
+        }
+
+        & > div {
+          // vh - #search-space.margin-top
+          height: calc(75vh - 12vh);
+          background: none;
+
+          &:first-child {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+            border-right: 1px solid var(--lightgray);
+          }
+
+          &:last-child {
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+          }
+        }
+
+        @media all and (max-width: $tabletBreakpoint) {
+          display: block !important;
+
+          & > *:not(#results-container) {
+            display: none !important;
+          }
+
+          & > #results-container {
+            width: 100%;
+            height: auto;
+          }
+        }
+
+        & .highlight {
+          background: color-mix(in srgb, var(--tertiary) 60%, transparent);
+          border-radius: 5px;
+          scroll-margin-top: 2rem;
+        }
+
+        & > #preview-container {
          display: block;
          box-sizing: border-box;
-
-          // normalize card props
+          overflow: hidden;
+          box-sizing: border-box;
          font-family: inherit;
-          font-size: 100%;
-          line-height: 1.15;
-          margin: 0;
-          text-transform: none;
-          text-align: left;
+          color: var(--dark);
+          line-height: 1.5em;
+          font-weight: $normalWeight;
          background: var(--light);
-          outline: none;
-          font-weight: inherit;
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+          overflow-y: auto;
+          padding: 1rem;

-          & .highlight {
-            color: var(--secondary);
-            font-weight: 700;
+          & .preview-inner {
+            margin: 0 auto;
+            width: min($pageWidth, 100%);
          }
+        }

-          &:hover,
-          &:focus {
-            background: var(--lightgray);
-          }
+        & > #results-container {
+          overflow-y: auto;

-          &:first-of-type {
-            border-top-left-radius: 5px;
-            border-top-right-radius: 5px;
-          }
-
-          &:last-of-type {
-            border-bottom-left-radius: 5px;
-            border-bottom-right-radius: 5px;
+          & .result-card {
+            padding: 1em;
+            cursor: pointer;
+            transition: background 0.2s ease;
            border-bottom: 1px solid var(--lightgray);
-          }
+            width: 100%;
+            display: block;
+            box-sizing: border-box;

-          & > h3 {
+            // normalize card props
+            font-family: inherit;
+            font-size: 100%;
+            line-height: 1.15;
            margin: 0;
-          }
+            text-transform: none;
+            text-align: left;
+            background: var(--light);
+            outline: none;
+            font-weight: inherit;

-          & > ul > li {
-            margin: 0;
-            display: inline-block;
-            white-space: nowrap;
-            margin: 0;
-            overflow-wrap: normal;
-          }
+            &:focus,
+            &.focus {
+              background: var(--lightgray);
+            }

-          & > ul {
-            list-style: none;
-            display: flex;
-            padding-left: 0;
-            gap: 0.4rem;
-            margin: 0;
-            margin-top: 0.45rem;
-            // Offset border radius
-            margin-left: -2px;
-            overflow: hidden;
-            background-clip: border-box;
-          }
+            & > h3 {
+              margin: 0;
+            }

-          & > ul > li > p {
-            border-radius: 8px;
-            background-color: var(--highlight);
-            overflow: hidden;
-            background-clip: border-box;
-            padding: 0.03rem 0.4rem;
-            margin: 0;
-            color: var(--secondary);
-            opacity: 0.85;
-          }
+            & > ul.tags {
+              margin-top: 0.45rem;
+              margin-bottom: 0;
+            }

-          & > ul > li > .match-tag {
-            color: var(--tertiary);
-            font-weight: bold;
-            opacity: 1;
-          }
+            & > ul > li > p {
+              border-radius: 8px;
+              background-color: var(--highlight);
+              padding: 0.2rem 0.4rem;
+              margin: 0 0.1rem;
+              line-height: 1.4rem;
+              font-weight: $boldWeight;
+              color: var(--secondary);

-          & > p {
-            margin-bottom: 0;
+              &.match-tag {
+                color: var(--tertiary);
+              }
+            }
+
+            & > p {
+              margin-bottom: 0;
+            }
          }
        }
      }
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@ -119,7 +119,7 @@ function addGlobalPageResources(
  } else if (cfg.analytics?.provider === "umami") {
    componentResources.afterDOMLoaded.push(`
      const umamiScript = document.createElement("script")
-      umamiScript.src = "https://analytics.umami.is/script.js"
+      umamiScript.src = cfg.analytics.host ?? "https://analytics.umami.is/script.js"
      umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
      umamiScript.async = true

@ -131,9 +131,11 @@ function addGlobalPageResources(
    componentResources.afterDOMLoaded.push(spaRouterScript)
  } else {
    componentResources.afterDOMLoaded.push(`
-        window.spaNavigate = (url, _) => window.location.assign(url)
-        const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug } })
-        document.dispatchEvent(event)`)
+      window.spaNavigate = (url, _) => window.location.assign(url)
+      window.addCleanup = () => {}
+      const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug } })
+      document.dispatchEvent(event)
+    `)
  }

  let wsUrl = `ws://localhost:${ctx.argv.wsPort}`
@ -147,9 +149,9 @@ function addGlobalPageResources(
      loadTime: "afterDOMReady",
      contentType: "inline",
      script: `
-          const socket = new WebSocket('${wsUrl}')
-          socket.addEventListener('message', () => document.location.reload())
-        `,
+        const socket = new WebSocket('${wsUrl}')
+        socket.addEventListener('message', () => document.location.reload())
+      `,
    })
  }
 }
--- a/quartz/plugins/emitters/contentIndex.ts
+++ b/quartz/plugins/emitters/contentIndex.ts
@ -5,7 +5,6 @@ import { escapeHTML } from "../../util/escape"
 import { FilePath, FullSlug, SimpleSlug, joinSegments, simplifySlug } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import { toHtml } from "hast-util-to-html"
-import path from "path"
 import { write } from "./helpers"

 export type ContentIndex = Map<FullSlug, ContentDetails>
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@ -5,7 +5,6 @@ import yaml from "js-yaml"
 import toml from "toml"
 import { slugTag } from "../../util/path"
 import { QuartzPluginData } from "../vfile"
-import chalk from "chalk"

 export interface Options {
  delims: string | string[]
@ -17,23 +16,6 @@ const defaultOptions: Options = {
  language: "yaml",
 }

-function coerceDate(fp: string, d: unknown): Date | undefined {
-  if (d === undefined || d === null) return undefined
-  const dt = new Date(d as string | number)
-  const invalidDate = isNaN(dt.getTime()) || dt.getTime() === 0
-  if (invalidDate) {
-    console.log(
-      chalk.yellow(
-        `\nWarning: found invalid date "${d}" in \`${fp}\`. Supported formats: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format`,
-      ),
-    )
-
-    return undefined
-  }
-
-  return dt
-}
-
 function coalesceAliases(data: { [key: string]: any }, aliases: string[]) {
  for (const alias of aliases) {
    if (data[alias] !== undefined && data[alias] !== null) return data[alias]
@ -66,7 +48,6 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
        [remarkFrontmatter, ["yaml", "toml"]],
        () => {
          return (_, file) => {
-            const fp = file.data.filePath!
            const { data } = matter(Buffer.from(file.value), {
              ...opts,
              engines: {
@ -88,16 +69,6 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
            if (aliases) data.aliases = aliases
            const cssclasses = coerceToArray(coalesceAliases(data, ["cssclasses", "cssclass"]))
            if (cssclasses) data.cssclasses = cssclasses
-            const created = coerceDate(fp, coalesceAliases(data, ["created", "date"]))
-
-            if (created) data.created = created
-            const modified = coerceDate(
-              fp,
-              coalesceAliases(data, ["modified", "lastmod", "updated", "last-modified"]),
-            )
-            if (modified) data.modified = modified
-            const published = coerceDate(fp, coalesceAliases(data, ["published", "publishDate"]))
-            if (published) data.published = published

            // fill in frontmatter
            file.data.frontmatter = data as QuartzPluginData["frontmatter"]
@ -120,9 +91,6 @@ declare module "vfile" {
        draft: boolean
        enableToc: string
        cssclasses: string[]
-        created: Date
-        modified: Date
-        published: Date
      }>
  }
 }
--- a/quartz/plugins/transformers/gfm.ts
+++ b/quartz/plugins/transformers/gfm.ts
@ -37,8 +37,36 @@ export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> |
                "data-no-popover": true,
              },
              content: {
-                type: "text",
-                value: " §",
+                type: "element",
+                tagName: "svg",
+                properties: {
+                  width: 18,
+                  height: 18,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                },
+                children: [
+                  {
+                    type: "element",
+                    tagName: "path",
+                    properties: {
+                      d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+                    },
+                    children: [],
+                  },
+                  {
+                    type: "element",
+                    tagName: "path",
+                    properties: {
+                      d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+                    },
+                    children: [],
+                  },
+                ],
              },
            },
          ],
--- a/quartz/plugins/transformers/lastmod.ts
+++ b/quartz/plugins/transformers/lastmod.ts
@ -12,6 +12,21 @@ const defaultOptions: Options = {
  priority: ["frontmatter", "git", "filesystem"],
 }

+function coerceDate(fp: string, d: any): Date {
+  const dt = new Date(d)
+  const invalidDate = isNaN(dt.getTime()) || dt.getTime() === 0
+  if (invalidDate && d !== undefined) {
+    console.log(
+      chalk.yellow(
+        `\nWarning: found invalid date "${d}" in \`${fp}\`. Supported formats: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format`,
+      ),
+    )
+  }
+
+  return invalidDate ? new Date() : dt
+}
+
+type MaybeDate = undefined | string | number
 export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | undefined> = (
  userOpts,
 ) => {
@ -23,21 +38,23 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
        () => {
          let repo: Repository | undefined = undefined
          return async (_tree, file) => {
-            let created: Date | undefined = undefined
-            let modified: Date | undefined = undefined
-            let published: Date | undefined = undefined
+            let created: MaybeDate = undefined
+            let modified: MaybeDate = undefined
+            let published: MaybeDate = undefined

            const fp = file.data.filePath!
-            const fullFp = path.posix.join(file.cwd, fp)
+            const fullFp = path.isAbsolute(fp) ? fp : path.posix.join(file.cwd, fp)
            for (const source of opts.priority) {
              if (source === "filesystem") {
                const st = await fs.promises.stat(fullFp)
-                created ||= new Date(st.birthtimeMs)
-                modified ||= new Date(st.mtimeMs)
+                created ||= st.birthtimeMs
+                modified ||= st.mtimeMs
              } else if (source === "frontmatter" && file.data.frontmatter) {
-                created ||= file.data.frontmatter.created
-                modified ||= file.data.frontmatter.modified
-                published ||= file.data.frontmatter.published
+                created ||= file.data.frontmatter.date as MaybeDate
+                modified ||= file.data.frontmatter.lastmod as MaybeDate
+                modified ||= file.data.frontmatter.updated as MaybeDate
+                modified ||= file.data.frontmatter["last-modified"] as MaybeDate
+                published ||= file.data.frontmatter.publishDate as MaybeDate
              } else if (source === "git") {
                if (!repo) {
                  // Get a reference to the main git repo.
@ -47,9 +64,7 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
                }

                try {
-                  modified ||= new Date(
-                    await repo.getFileLatestModifiedDateAsync(file.data.filePath!),
-                  )
+                  modified ||= await repo.getFileLatestModifiedDateAsync(file.data.filePath!)
                } catch {
                  console.log(
                    chalk.yellow(
@ -61,13 +76,10 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
              }
            }

-            created ||= new Date()
-            modified ||= new Date()
-            published ||= new Date()
            file.data.dates = {
-              created,
-              modified,
-              published,
+              created: coerceDate(fp, created),
+              modified: coerceDate(fp, modified),
+              published: coerceDate(fp, published),
            }
          }
        },
--- a/quartz/plugins/transformers/latex.ts
+++ b/quartz/plugins/transformers/latex.ts
@ -26,12 +26,12 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
        return {
          css: [
            // base css
-            "https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css",
+            "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css",
          ],
          js: [
            {
              // fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
-              src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
+              src: "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/copy-tex.min.js",
              loadTime: "afterDOMReady",
              contentType: "external",
            },
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@ -44,39 +44,7 @@ const defaultOptions: Options = {
  enableVideoEmbed: true,
 }

-const icons = {
-  infoIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`,
-  pencilIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>`,
-  clipboardListIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>`,
-  checkCircleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>`,
-  flameIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>`,
-  checkIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
-  helpCircleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
-  alertTriangleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
-  xIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
-  zapIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`,
-  bugIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>`,
-  listIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>`,
-  quoteIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>`,
-}
-
-const callouts = {
-  note: icons.pencilIcon,
-  abstract: icons.clipboardListIcon,
-  info: icons.infoIcon,
-  todo: icons.checkCircleIcon,
-  tip: icons.flameIcon,
-  success: icons.checkIcon,
-  question: icons.helpCircleIcon,
-  warning: icons.alertTriangleIcon,
-  failure: icons.xIcon,
-  danger: icons.zapIcon,
-  bug: icons.bugIcon,
-  example: icons.listIcon,
-  quote: icons.quoteIcon,
-}
-
-const calloutMapping: Record<string, keyof typeof callouts> = {
+const calloutMapping = {
  note: "note",
  abstract: "abstract",
  summary: "abstract",
@ -104,12 +72,12 @@ const calloutMapping: Record<string, keyof typeof callouts> = {
  example: "example",
  quote: "quote",
  cite: "quote",
-}
+} as const

-function canonicalizeCallout(calloutName: string): keyof typeof callouts {
-  let callout = calloutName.toLowerCase() as keyof typeof calloutMapping
+function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
+  const normalizedCallout = calloutName.toLowerCase() as keyof typeof calloutMapping
  // if callout is not recognized, make it a custom one
-  return calloutMapping[callout] ?? calloutName
+  return calloutMapping[normalizedCallout] ?? calloutName
 }

 export const externalLinkRegex = /^https?:\/\//i
@ -138,6 +106,9 @@ const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\p{Emoji}\d])+(?:\/[-_\p{L}\p{E
 const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/, "g")
 const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
 const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/)
+const wikilinkImageEmbedRegex = new RegExp(
+  /^(?<alt>(?!^\d*x?\d*$).*?)?(\|?\s*?(?<width>\d+)(x(?<height>\d+))?)?$/,
+)

 export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
  userOpts,
@ -222,18 +193,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                  const ext: string = path.extname(fp).toLowerCase()
                  const url = slugifyFilePath(fp as FilePath)
                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
-                    // either |alt|dims or |dims
-                    let [alt, dims] = (alias ?? "").split("|")
-
-                    // |dims case, treat first alt slot as dims
-                    if (dims === undefined) {
-                      dims = alt
-                      alt = ""
-                    }
-
-                    let [width, height] = dims.split("x", 2)
-                    width ||= "auto"
-                    height ||= "auto"
+                    const match = wikilinkImageEmbedRegex.exec(alias ?? "")
+                    const alt = match?.groups?.alt ?? ""
+                    const width = match?.groups?.width ?? "auto"
+                    const height = match?.groups?.height ?? "auto"
                    return {
                      type: "image",
                      url,
@ -327,8 +290,9 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                }

                tag = slugTag(tag)
-                if (file.data.frontmatter?.tags?.includes(tag)) {
-                  file.data.frontmatter.tags.push(tag)
+                if (file.data.frontmatter) {
+                  const noteTags = file.data.frontmatter.tags ?? []
+                  file.data.frontmatter.tags = [...new Set([...noteTags, tag])]
                }

                return {
@ -416,32 +380,31 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
              const match = firstLine.match(calloutRegex)
              if (match && match.input) {
                const [calloutDirective, typeString, collapseChar] = match
-                const calloutType = canonicalizeCallout(
-                  typeString.toLowerCase() as keyof typeof calloutMapping,
-                )
+                const calloutType = canonicalizeCallout(typeString.toLowerCase())
                const collapse = collapseChar === "+" || collapseChar === "-"
                const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
-                const titleContent =
-                  match.input.slice(calloutDirective.length).trim() || capitalize(calloutType)
+                const titleContent = match.input.slice(calloutDirective.length).trim()
+                const useDefaultTitle = titleContent === "" && restOfTitle.length === 0
                const titleNode: Paragraph = {
                  type: "paragraph",
-                  children:
-                    restOfTitle.length === 0
-                      ? [{ type: "text", value: titleContent + " " }]
-                      : restOfTitle,
+                  children: [
+                    {
+                      type: "text",
+                      value: useDefaultTitle ? capitalize(calloutType) : titleContent + " ",
+                    },
+                    ...restOfTitle,
+                  ],
                }
                const title = mdastToHtml(titleNode)

-                const toggleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold">
-                  <polyline points="6 9 12 15 18 9"></polyline>
-                </svg>`
+                const toggleIcon = `<div class="fold-callout-icon"></div>`

                const titleHtml: Html = {
                  type: "html",
                  value: `<div
                  class="callout-title"
                >
-                  <div class="callout-icon">${callouts[calloutType] ?? callouts.note}</div>
+                  <div class="callout-icon"></div>
                  <div class="callout-title-inner">${title}</div>
                  ${collapse ? toggleIcon : ""}
                </div>`,
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@ -26,7 +26,7 @@ section {
 }

 ::selection {
-  background: color-mix(in srgb, var(--tertiary) 75%, transparent);
+  background: color-mix(in srgb, var(--tertiary) 60%, transparent);
  color: var(--darkgray);
 }

@ -54,7 +54,7 @@ ul,
 }

 a {
-  font-weight: 600;
+  font-weight: $boldWeight;
  text-decoration: none;
  transition: color 0.2s ease;
  color: var(--secondary);
@ -171,9 +171,11 @@ a {

    & .sidebar.right {
      right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      flex-wrap: wrap;
      & > * {
        @media all and (max-width: $fullPageWidth) {
          flex: 1;
+          min-width: 140px;
        }
      }
    }
@ -276,7 +278,6 @@ h6 {
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translateY(-0.1rem);
-    display: inline-block;
    font-family: var(--codeFont);
    user-select: none;
  }
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@ -1,3 +1,4 @@
+@use "./variables.scss" as *;
@use "sass:color";

 .callout {
@ -13,16 +14,33 @@
    margin-top: 0;
  }

+  --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
+  --callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>');
+  --callout-icon-info: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
+  --callout-icon-todo: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>');
+  --callout-icon-tip: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg> ');
+  --callout-icon-success: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> ');
+  --callout-icon-question: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg> ');
+  --callout-icon-warning: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
+  --callout-icon-failure: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> ');
+  --callout-icon-danger: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> ');
+  --callout-icon-bug: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>');
+  --callout-icon-example: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg> ');
+  --callout-icon-quote: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>');
+  --callout-icon-fold: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E');
+
  &[data-callout] {
    --color: #448aff;
    --border: #448aff44;
    --bg: #448aff10;
+    --callout-icon: var(--callout-icon-note);
  }

  &[data-callout="abstract"] {
    --color: #00b0ff;
    --border: #00b0ff44;
    --bg: #00b0ff10;
+    --callout-icon: var(--callout-icon-abstract);
  }

  &[data-callout="info"],
@ -30,30 +48,39 @@
    --color: #00b8d4;
    --border: #00b8d444;
    --bg: #00b8d410;
+    --callout-icon: var(--callout-icon-info);
+  }
+
+  &[data-callout="todo"] {
+    --callout-icon: var(--callout-icon-todo);
  }

  &[data-callout="tip"] {
    --color: #00bfa5;
    --border: #00bfa544;
    --bg: #00bfa510;
+    --callout-icon: var(--callout-icon-tip);
  }

  &[data-callout="success"] {
    --color: #09ad7a;
    --border: #09ad7144;
    --bg: #09ad7110;
+    --callout-icon: var(--callout-icon-success);
  }

  &[data-callout="question"] {
    --color: #dba642;
    --border: #dba64244;
    --bg: #dba64210;
+    --callout-icon: var(--callout-icon-question);
  }

  &[data-callout="warning"] {
    --color: #db8942;
    --border: #db894244;
    --bg: #db894210;
+    --callout-icon: var(--callout-icon-warning);
  }

  &[data-callout="failure"],
@ -62,50 +89,74 @@
    --color: #db4242;
    --border: #db424244;
    --bg: #db424210;
+    --callout-icon: var(--callout-icon-failure);
+  }
+
+  &[data-callout="bug"] {
+    --callout-icon: var(--callout-icon-bug);
+  }
+
+  &[data-callout="danger"] {
+    --callout-icon: var(--callout-icon-danger);
  }

  &[data-callout="example"] {
    --color: #7a43b5;
    --border: #7a43b544;
    --bg: #7a43b510;
+    --callout-icon: var(--callout-icon-example);
  }

  &[data-callout="quote"] {
    --color: var(--secondary);
    --border: var(--lightgray);
+    --callout-icon: var(--callout-icon-quote);
  }

-  &.is-collapsed > .callout-title > .fold {
+  &.is-collapsed > .callout-title > .fold-callout-icon {
    transform: rotateZ(-90deg);
  }
 }

 .callout-title {
  display: flex;
+  align-items: center;
  gap: 5px;
  padding: 1rem 0;
  color: var(--color);

-  & .fold {
-    margin-left: 0.5rem;
-    transition: transform 0.3s ease;
+  --icon-size: 18px;
+
+  & .fold-callout-icon {
+    transition: transform 0.15s ease;
    opacity: 0.8;
    cursor: pointer;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    --callout-icon: var(--callout-icon-fold);
  }

  & > .callout-title-inner > p {
    color: var(--color);
    margin: 0;
  }
-}

-.callout-icon {
-  width: 18px;
-  height: 18px;
-  flex: 0 0 18px;
-  padding-top: 4px;
-}
+  .callout-icon,
+  & .fold-callout-icon {
+    width: var(--icon-size);
+    height: var(--icon-size);

-.callout-title-inner {
-  font-weight: 700;
+    // icon support
+    background-size: var(--icon-size) var(--icon-size);
+    background-position: center;
+    background-color: var(--color);
+    mask-image: var(--callout-icon);
+    mask-size: var(--icon-size) var(--icon-size);
+    mask-position: center;
+    mask-repeat: no-repeat;
+  }
+
+  .callout-title-inner {
+    font-weight: $boldWeight;
+  }
 }
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@ -1,6 +1,8 @@
 $pageWidth: 750px;
 $mobileBreakpoint: 600px;
-$tabletBreakpoint: 1200px;
+$tabletBreakpoint: 1000px;
 $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
+$boldWeight: 700;
+$normalWeight: 400;
--- a/quartz/util/lang.ts
+++ b/quartz/util/lang.ts
@ -9,3 +9,13 @@ export function pluralize(count: number, s: string): string {
 export function capitalize(s: string): string {
  return s.substring(0, 1).toUpperCase() + s.substring(1)
 }
+
+export function classNames(
+  displayClass?: "mobile-only" | "desktop-only",
+  ...classes: string[]
+): string {
+  if (displayClass) {
+    classes.push(displayClass)
+  }
+  return classes.join(" ")
+}
--- a/quartz/util/path.ts
+++ b/quartz/util/path.ts
@ -52,7 +52,7 @@ function sluggify(s: string): string {
    .split("/")
    .map((segment) =>
      segment.replace(/\s/g, "-").replace(/%/g, "-percent").replace(/\?/g, "-q").replace(/#/g, ""),
-    ) // slugify all segments
+    )
    .join("/") // always use / as sep
    .replace(/\/$/, "")
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,8 +13,8 @@
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
+    "jsxImportSource": "preact",
  },
  "include": ["**/*.ts", "**/*.tsx", "./package.json"],
-  "exclude": ["build/**/*.d.ts"]
+  "exclude": ["build/**/*.d.ts"],
 }