chore(deps): bump the production-dependencies group with 2 updates (#1919 )

Bumps the production-dependencies group with 2 updates: [@clack/prompts](https://github.com/bombshell-dev/clack/tree/HEAD/packages/prompts) and [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node). Updates `@clack/prompts` from 0.10.0 to 0.10.1 - [Release notes](https://github.com/bombshell-dev/clack/releases) - [Changelog](https://github.com/bombshell-dev/clack/blob/@clack/prompts@0.10.1/packages/prompts/CHANGELOG.md) - [Commits](https://github.com/bombshell-dev/clack/commits/@clack/prompts@0.10.1/packages/prompts) Updates `@types/node` from 22.14.0 to 22.14.1 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@clack/prompts" dependency-version: 0.10.1 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: production-dependencies - dependency-name: "@types/node" dependency-version: 22.14.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: production-dependencies ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
feat: reader mode
2025-12-02 18:58:28 +01:00 · 2025-04-17 19:48:08 -07:00 · 2025-04-17 19:45:17 -07:00 · 2025-04-11 08:18:28 -07:00 · 2025-04-10 17:43:35 -07:00 · 2025-04-10 16:46:30 -07:00
20 changed files with 379 additions and 189 deletions
--- a/docs/features/reader
+++ b/docs/features/reader
@@ -0,0 +1,44 @@
+---
+title: Reader Mode
+tags:
+  - component
+---
+
+Reader Mode is a feature that allows users to focus on the content by hiding the sidebars and other UI elements. When enabled, it provides a clean, distraction-free reading experience.
+
+## Configuration
+
+Reader Mode is enabled by default. To disable it, you can remove the component from your layout configuration in `quartz.layout.ts`:
+
+```ts
+// Remove or comment out this line
+Component.ReaderMode(),
+```
+
+## Usage
+
+The Reader Mode toggle appears as a button with a book icon. When clicked:
+
+- Sidebars are hidden
+- Hovering over the content area reveals the sidebars temporarily
+
+Unlike Dark Mode, Reader Mode state is not persisted between page reloads but is maintained during SPA navigation within the site.
+
+## Customization
+
+You can customize the appearance of Reader Mode through CSS variables and styles. The component uses the following classes:
+
+- `.readermode`: The toggle button
+- `.readerIcon`: The book icon
+- `[reader-mode="on"]`: Applied to the root element when Reader Mode is active
+
+Example customization in your custom CSS:
+
+```scss
+.readermode {
+  // Customize the button
+  svg {
+    stroke: var(--custom-color);
+  }
+}
+```
--- a/index.d.ts
+++ b/index.d.ts
@@ -8,6 +8,7 @@ interface CustomEventMap {
  prenav: CustomEvent<{}>
  nav: CustomEvent<{ url: FullSlug }>
  themechange: CustomEvent<{ theme: "light" | "dark" }>
+  readermodechange: CustomEvent<{ mode: "on" | "off" }>
 }

 type ContentIndex = Record<FullSlug, ContentDetails>
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
      "version": "4.5.0",
      "license": "MIT",
      "dependencies": {
-        "@clack/prompts": "^0.10.0",
+        "@clack/prompts": "^0.10.1",
        "@floating-ui/dom": "^1.6.13",
        "@myriaddreamin/rehype-typst": "^0.5.4",
        "@napi-rs/simple-git": "0.1.19",
@@ -37,7 +37,7 @@
        "micromorph": "^0.4.5",
        "minimatch": "^10.0.1",
        "pixi.js": "^8.9.1",
-        "preact": "^10.26.4",
+        "preact": "^10.26.5",
        "preact-render-to-string": "^6.5.13",
        "pretty-bytes": "^6.1.1",
        "pretty-time": "^1.1.0",
@@ -55,13 +55,13 @@
        "remark-gfm": "^4.0.1",
        "remark-math": "^6.0.0",
        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.1.1",
+        "remark-rehype": "^11.1.2",
        "remark-smartypants": "^3.0.2",
        "rfdc": "^1.4.1",
        "rimraf": "^6.0.1",
        "satori": "^0.12.2",
        "serve-handler": "^6.1.6",
-        "sharp": "^0.33.5",
+        "sharp": "^0.34.1",
        "shiki": "^1.26.2",
        "source-map-support": "^0.5.21",
        "to-vfile": "^8.0.0",
@@ -80,15 +80,15 @@
        "@types/d3": "^7.4.3",
        "@types/hast": "^3.0.4",
        "@types/js-yaml": "^4.0.9",
-        "@types/node": "^22.13.14",
+        "@types/node": "^22.14.1",
        "@types/pretty-time": "^1.1.5",
        "@types/source-map-support": "^0.5.10",
-        "@types/ws": "^8.18.0",
+        "@types/ws": "^8.18.1",
        "@types/yargs": "^17.0.33",
        "esbuild": "^0.25.2",
        "prettier": "^3.5.3",
        "tsx": "^4.19.3",
-        "typescript": "^5.8.2"
+        "typescript": "^5.8.3"
      },
      "engines": {
        "node": ">=20",
@@ -178,29 +178,30 @@
      }
    },
    "node_modules/@clack/core": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.1.tgz",
-      "integrity": "sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.2.tgz",
+      "integrity": "sha512-NYQfcEy8MWIxrT5Fj8nIVchfRFA26yYKJcvBS7WlUIlw2OmQOY9DhGGXMovyI5J5PpxrCPGkgUi207EBrjpBvg==",
+      "license": "MIT",
      "dependencies": {
        "picocolors": "^1.0.0",
        "sisteransi": "^1.0.5"
      }
    },
    "node_modules/@clack/prompts": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.10.0.tgz",
-      "integrity": "sha512-H3rCl6CwW1NdQt9rE3n373t7o5cthPv7yUoxF2ytZvyvlJv89C5RYMJu83Hed8ODgys5vpBU0GKxIRG83jd8NQ==",
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.10.1.tgz",
+      "integrity": "sha512-Q0T02vx8ZM9XSv9/Yde0jTmmBQufZhPJfYAg2XrrrxWWaZgq1rr8nU8Hv710BQ1dhoP8rtY7YUdpGej2Qza/cw==",
      "license": "MIT",
      "dependencies": {
-        "@clack/core": "0.4.1",
+        "@clack/core": "0.4.2",
        "picocolors": "^1.0.0",
        "sisteransi": "^1.0.5"
      }
    },
    "node_modules/@emnapi/runtime": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
-      "integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.0.tgz",
+      "integrity": "sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==",
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -630,9 +631,9 @@
      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
    },
    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
-      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.1.tgz",
+      "integrity": "sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A==",
      "cpu": [
        "arm64"
      ],
@@ -648,13 +649,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+        "@img/sharp-libvips-darwin-arm64": "1.1.0"
      }
    },
    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
-      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.1.tgz",
+      "integrity": "sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q==",
      "cpu": [
        "x64"
      ],
@@ -670,13 +671,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.0.4"
+        "@img/sharp-libvips-darwin-x64": "1.1.0"
      }
    },
    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
-      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.1.0.tgz",
+      "integrity": "sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==",
      "cpu": [
        "arm64"
      ],
@@ -690,9 +691,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
-      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.1.0.tgz",
+      "integrity": "sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==",
      "cpu": [
        "x64"
      ],
@@ -706,9 +707,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
-      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.1.0.tgz",
+      "integrity": "sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==",
      "cpu": [
        "arm"
      ],
@@ -722,9 +723,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
-      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.1.0.tgz",
+      "integrity": "sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==",
      "cpu": [
        "arm64"
      ],
@@ -737,10 +738,26 @@
        "url": "https://opencollective.com/libvips"
      }
    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.1.0.tgz",
+      "integrity": "sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
-      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.1.0.tgz",
+      "integrity": "sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==",
      "cpu": [
        "s390x"
      ],
@@ -754,9 +771,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
-      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz",
+      "integrity": "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==",
      "cpu": [
        "x64"
      ],
@@ -770,9 +787,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
-      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.1.0.tgz",
+      "integrity": "sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==",
      "cpu": [
        "arm64"
      ],
@@ -786,9 +803,9 @@
      }
    },
    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
-      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.1.0.tgz",
+      "integrity": "sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==",
      "cpu": [
        "x64"
      ],
@@ -802,9 +819,9 @@
      }
    },
    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
-      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.1.tgz",
+      "integrity": "sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA==",
      "cpu": [
        "arm"
      ],
@@ -820,13 +837,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.0.5"
+        "@img/sharp-libvips-linux-arm": "1.1.0"
      }
    },
    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
-      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.1.tgz",
+      "integrity": "sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ==",
      "cpu": [
        "arm64"
      ],
@@ -842,13 +859,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.0.4"
+        "@img/sharp-libvips-linux-arm64": "1.1.0"
      }
    },
    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
-      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.1.tgz",
+      "integrity": "sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA==",
      "cpu": [
        "s390x"
      ],
@@ -864,13 +881,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.0.4"
+        "@img/sharp-libvips-linux-s390x": "1.1.0"
      }
    },
    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
-      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz",
+      "integrity": "sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==",
      "cpu": [
        "x64"
      ],
@@ -886,13 +903,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.0.4"
+        "@img/sharp-libvips-linux-x64": "1.1.0"
      }
    },
    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
-      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.1.tgz",
+      "integrity": "sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ==",
      "cpu": [
        "arm64"
      ],
@@ -908,13 +925,13 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0"
      }
    },
    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
-      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.1.tgz",
+      "integrity": "sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==",
      "cpu": [
        "x64"
      ],
@@ -930,20 +947,20 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+        "@img/sharp-libvips-linuxmusl-x64": "1.1.0"
      }
    },
    "node_modules/@img/sharp-wasm32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
-      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.1.tgz",
+      "integrity": "sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg==",
      "cpu": [
        "wasm32"
      ],
      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
      "optional": true,
      "dependencies": {
-        "@emnapi/runtime": "^1.2.0"
+        "@emnapi/runtime": "^1.4.0"
      },
      "engines": {
        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -953,9 +970,9 @@
      }
    },
    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
-      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.1.tgz",
+      "integrity": "sha512-WKf/NAZITnonBf3U1LfdjoMgNO5JYRSlhovhRhMxXVdvWYveM4kM3L8m35onYIdh75cOMCo1BexgVQcCDzyoWw==",
      "cpu": [
        "ia32"
      ],
@@ -972,9 +989,9 @@
      }
    },
    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
-      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.1.tgz",
+      "integrity": "sha512-hw1iIAHpNE8q3uMIRCgGOeDoz9KtFNarFLQclLxr/LK1VBkj8nby18RjFvr6aP7USRYAjTZW6yisnBWMX571Tw==",
      "cpu": [
        "x64"
      ],
@@ -1924,13 +1941,13 @@
      }
    },
    "node_modules/@types/node": {
-      "version": "22.13.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.14.tgz",
-      "integrity": "sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==",
+      "version": "22.14.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
+      "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "undici-types": "~6.20.0"
+        "undici-types": "~6.21.0"
      }
    },
    "node_modules/@types/pretty-time": {
@@ -1954,9 +1971,9 @@
      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
    },
    "node_modules/@types/ws": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.0.tgz",
-      "integrity": "sha512-8svvI3hMyvN0kKCJMvTJP/x6Y/EoQbepff882wL+Sn5QsXb3etnamgrJq4isrBxSJj5L2AuXcI0+bgkoAXGUJw==",
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -5487,7 +5504,8 @@
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
    },
    "node_modules/picomatch": {
      "version": "2.3.1",
@@ -5526,9 +5544,9 @@
      "license": "MIT"
    },
    "node_modules/preact": {
-      "version": "10.26.4",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.4.tgz",
-      "integrity": "sha512-KJhO7LBFTjP71d83trW+Ilnjbo+ySsaAgCfXOXUlmGzJ4ygYPWmysm77yg4emwfmoz3b22yvH5IsVFHbhUaH5w==",
+      "version": "10.26.5",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.5.tgz",
+      "integrity": "sha512-fmpDkgfGU6JYux9teDWLhj9mKN55tyepwYbxHgQuIxbWQzgFg5vk7Mrrtfx7xRxq798ynkY4DDDxZr235Kk+4w==",
      "license": "MIT",
      "funding": {
        "type": "opencollective",
@@ -5905,9 +5923,10 @@
      }
    },
    "node_modules/remark-rehype": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.1.tgz",
-      "integrity": "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==",
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
      "dependencies": {
        "@types/hast": "^3.0.0",
        "@types/mdast": "^4.0.0",
@@ -6543,9 +6562,9 @@
      }
    },
    "node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
      "license": "ISC",
      "bin": {
        "semver": "bin/semver.js"
@@ -6589,15 +6608,15 @@
      }
    },
    "node_modules/sharp": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
-      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.1.tgz",
+      "integrity": "sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
        "color": "^4.2.3",
        "detect-libc": "^2.0.3",
-        "semver": "^7.6.3"
+        "semver": "^7.7.1"
      },
      "engines": {
        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -6606,25 +6625,26 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.33.5",
-        "@img/sharp-darwin-x64": "0.33.5",
-        "@img/sharp-libvips-darwin-arm64": "1.0.4",
-        "@img/sharp-libvips-darwin-x64": "1.0.4",
-        "@img/sharp-libvips-linux-arm": "1.0.5",
-        "@img/sharp-libvips-linux-arm64": "1.0.4",
-        "@img/sharp-libvips-linux-s390x": "1.0.4",
-        "@img/sharp-libvips-linux-x64": "1.0.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
-        "@img/sharp-linux-arm": "0.33.5",
-        "@img/sharp-linux-arm64": "0.33.5",
-        "@img/sharp-linux-s390x": "0.33.5",
-        "@img/sharp-linux-x64": "0.33.5",
-        "@img/sharp-linuxmusl-arm64": "0.33.5",
-        "@img/sharp-linuxmusl-x64": "0.33.5",
-        "@img/sharp-wasm32": "0.33.5",
-        "@img/sharp-win32-ia32": "0.33.5",
-        "@img/sharp-win32-x64": "0.33.5"
+        "@img/sharp-darwin-arm64": "0.34.1",
+        "@img/sharp-darwin-x64": "0.34.1",
+        "@img/sharp-libvips-darwin-arm64": "1.1.0",
+        "@img/sharp-libvips-darwin-x64": "1.1.0",
+        "@img/sharp-libvips-linux-arm": "1.1.0",
+        "@img/sharp-libvips-linux-arm64": "1.1.0",
+        "@img/sharp-libvips-linux-ppc64": "1.1.0",
+        "@img/sharp-libvips-linux-s390x": "1.1.0",
+        "@img/sharp-libvips-linux-x64": "1.1.0",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
+        "@img/sharp-libvips-linuxmusl-x64": "1.1.0",
+        "@img/sharp-linux-arm": "0.34.1",
+        "@img/sharp-linux-arm64": "0.34.1",
+        "@img/sharp-linux-s390x": "0.34.1",
+        "@img/sharp-linux-x64": "0.34.1",
+        "@img/sharp-linuxmusl-arm64": "0.34.1",
+        "@img/sharp-linuxmusl-x64": "0.34.1",
+        "@img/sharp-wasm32": "0.34.1",
+        "@img/sharp-win32-ia32": "0.34.1",
+        "@img/sharp-win32-x64": "0.34.1"
      }
    },
    "node_modules/shebang-command": {
@@ -6684,7 +6704,8 @@
    "node_modules/sisteransi": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "license": "MIT"
    },
    "node_modules/slash": {
      "version": "5.1.0",
@@ -7007,9 +7028,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
-      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
      "dev": true,
      "license": "Apache-2.0",
      "bin": {
@@ -7021,10 +7042,11 @@
      }
    },
    "node_modules/undici-types": {
-      "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
-      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
-      "dev": true
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
    },
    "node_modules/unicode-trie": {
      "version": "2.0.0",
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
    "quartz": "./quartz/bootstrap-cli.mjs"
  },
  "dependencies": {
-    "@clack/prompts": "^0.10.0",
+    "@clack/prompts": "^0.10.1",
    "@floating-ui/dom": "^1.6.13",
    "@myriaddreamin/rehype-typst": "^0.5.4",
    "@napi-rs/simple-git": "0.1.19",
@@ -63,7 +63,7 @@
    "micromorph": "^0.4.5",
    "minimatch": "^10.0.1",
    "pixi.js": "^8.9.1",
-    "preact": "^10.26.4",
+    "preact": "^10.26.5",
    "preact-render-to-string": "^6.5.13",
    "pretty-bytes": "^6.1.1",
    "pretty-time": "^1.1.0",
@@ -81,13 +81,13 @@
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.1",
+    "remark-rehype": "^11.1.2",
    "remark-smartypants": "^3.0.2",
    "rfdc": "^1.4.1",
    "rimraf": "^6.0.1",
    "satori": "^0.12.2",
    "serve-handler": "^6.1.6",
-    "sharp": "^0.33.5",
+    "sharp": "^0.34.1",
    "shiki": "^1.26.2",
    "source-map-support": "^0.5.21",
    "to-vfile": "^8.0.0",
@@ -103,14 +103,14 @@
    "@types/d3": "^7.4.3",
    "@types/hast": "^3.0.4",
    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.13.14",
+    "@types/node": "^22.14.1",
    "@types/pretty-time": "^1.1.5",
    "@types/source-map-support": "^0.5.10",
-    "@types/ws": "^8.18.0",
+    "@types/ws": "^8.18.1",
    "@types/yargs": "^17.0.33",
    "esbuild": "^0.25.2",
    "prettier": "^3.5.3",
    "tsx": "^4.19.3",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.3"
  }
 }
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -35,6 +35,7 @@ export const defaultContentPageLayout: PageLayout = {
          grow: true,
        },
        { Component: Component.Darkmode() },
+        { Component: Component.ReaderMode() },
      ],
    }),
    Component.Explorer(),
--- a/quartz/components/ReaderMode.tsx
+++ b/quartz/components/ReaderMode.tsx
@@ -0,0 +1,32 @@
+// @ts-ignore
+import readerModeScript from "./scripts/readermode.inline"
+import styles from "./styles/readermode.scss"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+
+const ReaderMode: QuartzComponent = ({ displayClass }: QuartzComponentProps) => {
+  return (
+    <button class={classNames(displayClass, "readermode")}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="readerIcon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <rect x="6" y="4" width="12" height="16" rx="1"></rect>
+        <line x1="9" y1="8" x2="15" y2="8"></line>
+        <line x1="9" y1="12" x2="15" y2="12"></line>
+        <line x1="9" y1="16" x2="13" y2="16"></line>
+      </svg>
+    </button>
+  )
+}
+
+ReaderMode.beforeDOMLoaded = readerModeScript
+ReaderMode.css = styles
+
+export default (() => ReaderMode) satisfies QuartzComponentConstructor
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -4,6 +4,7 @@ import FolderContent from "./pages/FolderContent"
 import NotFound from "./pages/404"
 import ArticleTitle from "./ArticleTitle"
 import Darkmode from "./Darkmode"
+import ReaderMode from "./ReaderMode"
 import Head from "./Head"
 import PageTitle from "./PageTitle"
 import ContentMeta from "./ContentMeta"
@@ -29,6 +30,7 @@ export {
  TagContent,
  FolderContent,
  Darkmode,
+  ReaderMode,
  Head,
  PageTitle,
  ContentMeta,
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@@ -115,8 +115,8 @@ export default ((opts?: Partial<TagContentOptions>) => {
      }

      return (
-        <div class={classes}>
-          <article class="popover-hint">{content}</article>
+        <div class="popover-hint">
+          <article class={classes}>{content}</article>
          <div class="page-listing">
            <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
            <div>
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -3,6 +3,7 @@ import { normalizeRelativeURLs } from "../../util/path"
 import { fetchCanonical } from "./util"

 const p = new DOMParser()
+
 async function mouseEnterHandler(
  this: HTMLAnchorElement,
  { clientX, clientY }: { clientX: number; clientY: number },
@@ -14,29 +15,42 @@ async function mouseEnterHandler(

  async function setPosition(popoverElement: HTMLElement) {
    const { x, y } = await computePosition(link, popoverElement, {
+      strategy: "fixed",
      middleware: [inline({ x: clientX, y: clientY }), shift(), flip()],
    })
    Object.assign(popoverElement.style, {
-      left: `${x}px`,
-      top: `${y}px`,
+      transform: `translate(${x.toFixed()}px, ${y.toFixed()}px)`,
    })
  }

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

-  // dont refetch if there's already a popover
-  if (hasAlreadyBeenFetched()) {
-    return setPosition(link.lastChild as HTMLElement)
+    if (hash !== "") {
+      const targetAnchor = `#popover-internal-${hash.slice(1)}`
+      const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
+      if (heading) {
+        // leave ~12px of buffer when scrolling to a heading
+        popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })
+      }
+    }
  }

-  const thisUrl = new URL(document.location.href)
-  thisUrl.hash = ""
-  thisUrl.search = ""
  const targetUrl = new URL(link.href)
  const hash = decodeURIComponent(targetUrl.hash)
  targetUrl.hash = ""
  targetUrl.search = ""
+  const popoverId = `popover-${link.pathname}`
+  const prevPopoverElement = document.getElementById(popoverId)
+  const hasAlreadyBeenFetched = () => !!document.getElementById(popoverId)
+
+  // dont refetch if there's already a popover
+  if (hasAlreadyBeenFetched()) {
+    showPopover(prevPopoverElement as HTMLElement)
+    return
+  }

  const response = await fetchCanonical(targetUrl).catch((err) => {
    console.error(err)
@@ -52,12 +66,12 @@ async function mouseEnterHandler(
  const [contentTypeCategory, typeInfo] = contentType.split("/")

  const popoverElement = document.createElement("div")
+  popoverElement.id = popoverId
  popoverElement.classList.add("popover")
  const popoverInner = document.createElement("div")
  popoverInner.classList.add("popover-inner")
-  popoverElement.appendChild(popoverInner)
-
  popoverInner.dataset.contentType = contentType ?? undefined
+  popoverElement.appendChild(popoverInner)

  switch (contentTypeCategory) {
    case "image":
@@ -82,30 +96,34 @@ async function mouseEnterHandler(
      const contents = await response.text()
      const html = p.parseFromString(contents, "text/html")
      normalizeRelativeURLs(html, targetUrl)
-      // strip all IDs from elements to prevent duplicates
-      html.querySelectorAll("[id]").forEach((el) => el.removeAttribute("id"))
+      // prepend all IDs inside popovers to prevent duplicates
+      html.querySelectorAll("[id]").forEach((el) => {
+        const targetID = `popover-internal-${el.id}`
+        el.id = targetID
+      })
      const elts = [...html.getElementsByClassName("popover-hint")]
      if (elts.length === 0) return

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

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

-  if (hash !== "") {
-    const heading = popoverInner.querySelector(hash) as HTMLElement | null
-    if (heading) {
-      // leave ~12px of buffer when scrolling to a heading
-      popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })
-    }
-  }
+function clearActivePopover() {
+  const allPopoverElements = document.querySelectorAll(".popover")
+  allPopoverElements.forEach((popoverElement) => popoverElement.classList.remove("active-popover"))
 }

 document.addEventListener("nav", () => {
-  const links = [...document.getElementsByClassName("internal")] as HTMLAnchorElement[]
+  const links = [...document.querySelectorAll("a.internal")] as HTMLAnchorElement[]
  for (const link of links) {
    link.addEventListener("mouseenter", mouseEnterHandler)
-    window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler))
+    link.addEventListener("mouseleave", clearActivePopover)
+    window.addCleanup(() => {
+      link.removeEventListener("mouseenter", mouseEnterHandler)
+      link.removeEventListener("mouseleave", clearActivePopover)
+    })
  }
 })
--- a/quartz/components/scripts/readermode.inline.ts
+++ b/quartz/components/scripts/readermode.inline.ts
@@ -0,0 +1,25 @@
+let isReaderMode = false
+
+const emitReaderModeChangeEvent = (mode: "on" | "off") => {
+  const event: CustomEventMap["readermodechange"] = new CustomEvent("readermodechange", {
+    detail: { mode },
+  })
+  document.dispatchEvent(event)
+}
+
+document.addEventListener("nav", () => {
+  const switchReaderMode = () => {
+    isReaderMode = !isReaderMode
+    const newMode = isReaderMode ? "on" : "off"
+    document.documentElement.setAttribute("reader-mode", newMode)
+    emitReaderModeChangeEvent(newMode)
+  }
+
+  for (const readerModeButton of document.getElementsByClassName("readermode")) {
+    readerModeButton.addEventListener("click", switchReaderMode)
+    window.addCleanup(() => readerModeButton.removeEventListener("click", switchReaderMode))
+  }
+
+  // Set initial state
+  document.documentElement.setAttribute("reader-mode", isReaderMode ? "on" : "off")
+})
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -300,9 +300,11 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
    itemTile.classList.add("result-card")
    itemTile.id = slug
    itemTile.href = resolveUrl(slug).toString()
-    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${
-      enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
-    }`
+    itemTile.innerHTML = `
+      <h3 class="card-title">${title}</h3>
+      ${htmlTags}
+      <p class="card-description">${content}</p>
+    `
    itemTile.addEventListener("click", (event) => {
      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
      hideSearch()
--- a/quartz/components/styles/backlinks.scss
+++ b/quartz/components/styles/backlinks.scss
@@ -8,10 +8,12 @@
    margin: 0;
  }

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

    & > li {
      & > a {
--- a/quartz/components/styles/darkmode.scss
+++ b/quartz/components/styles/darkmode.scss
@@ -6,7 +6,7 @@
  border: none;
  width: 20px;
  height: 20px;
-  margin: 0 10px;
+  margin: 0;
  text-align: inherit;
  flex-shrink: 0;

--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -118,6 +118,7 @@ button.desktop-explorer {
    list-style: none;
    margin: 0;
    padding: 0;
+    overscroll-behavior: contain;

    & li > a {
      color: var(--dark);
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -16,9 +16,12 @@

 .popover {
  z-index: 999;
-  position: absolute;
+  position: fixed;
  overflow: visible;
  padding: 1rem;
+  left: 0;
+  top: 0;
+  will-change: transform;

  & > .popover-inner {
    position: relative;
@@ -35,6 +38,7 @@
    border-radius: 5px;
    box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
    overflow: auto;
+    overscroll-behavior: contain;
    white-space: normal;
    user-select: none;
    cursor: default;
@@ -77,7 +81,7 @@
  }
 }

-a:hover .popover,
+.active-popover,
 .popover:hover {
  animation: dropin 0.3s ease;
  animation-fill-mode: forwards;
--- a/quartz/components/styles/readermode.scss
+++ b/quartz/components/styles/readermode.scss
@@ -0,0 +1,33 @@
+.readermode {
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+  background: none;
+  border: none;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  text-align: inherit;
+  flex-shrink: 0;
+
+  & svg {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: calc(50% - 10px);
+    stroke: var(--darkgray);
+    transition: opacity 0.1s ease;
+  }
+}
+
+:root[reader-mode="on"] {
+  & .sidebar.left,
+  & .sidebar.right {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -133,11 +133,13 @@
        }

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

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

+            @media all and not ($mobile) {
+              & > p.card-description {
+                display: none;
+              }
+            }
+
            & > ul.tags {
              margin-top: 0.45rem;
              margin-bottom: 0;
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -3,18 +3,11 @@
 .toc {
  display: flex;
  flex-direction: column;
-
  overflow-y: hidden;
-  min-height: 1.2rem;
-  flex: 0 1 auto;
+  min-height: 1.4rem;
+  flex: 0 0.5 auto;
  &:has(button.toc-header.collapsed) {
-    flex: 0 1 1.2rem;
-  }
-}
-
-@media all and not ($mobile) {
-  .toc-header {
-    display: flex;
+    flex: 0 1 1.4rem;
  }
 }

@@ -45,13 +38,15 @@ button.toc-header {
  }
 }

-ul.toc-content {
+ul.toc-content.overflow {
  list-style: none;
  position: relative;
  margin: 0.5rem 0;
  padding: 0;
-
+  max-height: calc(100% - 2rem);
+  overscroll-behavior: contain;
  list-style: none;
+
  & > li > a {
    color: var(--dark);
    opacity: 0.35;
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -191,8 +191,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
          const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture

          const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
-          const blockRef = Boolean(rawHeader?.match(/^#?\^/)) ? "^" : ""
-          const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
+          const displayAnchor = anchor ? `#${anchor.trim().replace(/^#+/, "")}` : ""
          const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
          const embedDisplay = value.startsWith("!") ? "!" : ""

--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -238,6 +238,7 @@ a {
        padding: 0;
        & > * {
          flex: 1;
+          max-height: 24rem;
        }
        & > .toc {
          display: none;
@@ -577,7 +578,7 @@ ol.overflow {
  clear: both;

  & > li.overflow-end {
-    height: 1rem;
+    height: 0.5rem;
    margin: 0;
  }
Author	SHA1	Message	Date
dependabot[bot]	c238dd16d9	chore(deps): bump the production-dependencies group with 2 updates (#1919 ) Some checks failed Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped Details Build and Test / publish-tag (push) Has been skipped Details Build and Test / build-and-test (macos-latest) (push) Has been cancelled Details Build and Test / build-and-test (windows-latest) (push) Has been cancelled Details Bumps the production-dependencies group with 2 updates: [@clack/prompts](https://github.com/bombshell-dev/clack/tree/HEAD/packages/prompts) and [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node). Updates `@clack/prompts` from 0.10.0 to 0.10.1 - [Release notes](https://github.com/bombshell-dev/clack/releases) - [Changelog](https://github.com/bombshell-dev/clack/blob/@clack/prompts@0.10.1/packages/prompts/CHANGELOG.md) - [Commits](https://github.com/bombshell-dev/clack/commits/@clack/prompts@0.10.1/packages/prompts) Updates `@types/node` from 22.14.0 to 22.14.1 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@clack/prompts" dependency-version: 0.10.1 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: production-dependencies - dependency-name: "@types/node" dependency-version: 22.14.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: production-dependencies ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-04-17 19:48:08 -07:00
Jacky Zhao	b34d521293	feat: reader mode	2025-04-17 19:45:17 -07:00
Jacky Zhao	bfd72347cf	fix(popover): clear popovers more aggressively, use href as id Some checks failed Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped Details Build and Test / publish-tag (push) Has been skipped Details Build and Test / build-and-test (macos-latest) (push) Has been cancelled Details Build and Test / build-and-test (windows-latest) (push) Has been cancelled Details	2025-04-11 08:18:28 -07:00
Jacky Zhao	091cc1b05e	fix(search): properly show mobile layout Some checks failed Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped Details Build and Test / publish-tag (push) Has been skipped Details Build and Test / build-and-test (macos-latest) (push) Has been cancelled Details Build and Test / build-and-test (windows-latest) (push) Has been cancelled Details	2025-04-10 17:43:35 -07:00
Jacky Zhao	e9b60c7285	fix(popover): popover id calculation + scroll consistency	2025-04-10 16:46:30 -07:00
Jacky Zhao	b1a920e5c0	fix: add proper popover hint to tag content page	2025-04-10 16:28:36 -07:00
dependabot[bot]	61770d3e50	chore(deps): bump the production-dependencies group with 6 updates (#1913 ) Some checks failed Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped Details Build and Test / publish-tag (push) Has been skipped Details Build and Test / build-and-test (macos-latest) (push) Has been cancelled Details Build and Test / build-and-test (windows-latest) (push) Has been cancelled Details Bumps the production-dependencies group with 6 updates: \| Package \| From \| To \| \| --- \| --- \| --- \| \| [preact](https://github.com/preactjs/preact) \| `10.26.4` \| `10.26.5` \| \| [remark-rehype](https://github.com/remarkjs/remark-rehype) \| `11.1.1` \| `11.1.2` \| \| [sharp](https://github.com/lovell/sharp) \| `0.33.5` \| `0.34.1` \| \| [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) \| `22.13.14` \| `22.14.0` \| \| [@types/ws](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ws) \| `8.18.0` \| `8.18.1` \| \| [typescript](https://github.com/microsoft/TypeScript) \| `5.8.2` \| `5.8.3` \| Updates `preact` from 10.26.4 to 10.26.5 - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.26.4...10.26.5) Updates `remark-rehype` from 11.1.1 to 11.1.2 - [Release notes](https://github.com/remarkjs/remark-rehype/releases) - [Commits](https://github.com/remarkjs/remark-rehype/compare/11.1.1...11.1.2) Updates `sharp` from 0.33.5 to 0.34.1 - [Release notes](https://github.com/lovell/sharp/releases) - [Commits](https://github.com/lovell/sharp/compare/v0.33.5...v0.34.1) Updates `@types/node` from 22.13.14 to 22.14.0 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Updates `@types/ws` from 8.18.0 to 8.18.1 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ws) Updates `typescript` from 5.8.2 to 5.8.3 - [Release notes](https://github.com/microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release-publish.yml) - [Commits](https://github.com/microsoft/TypeScript/commits) --- updated-dependencies: - dependency-name: preact dependency-version: 10.26.5 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: production-dependencies - dependency-name: remark-rehype dependency-version: 11.1.2 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: production-dependencies - dependency-name: sharp dependency-version: 0.34.1 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: production-dependencies - dependency-name: "@types/node" dependency-version: 22.14.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: production-dependencies - dependency-name: "@types/ws" dependency-version: 8.18.1 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: production-dependencies - dependency-name: typescript dependency-version: 5.8.3 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: production-dependencies ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-04-10 16:17:15 -07:00
Emile Bangma	9db66d500e	fix(popover): round coords remove blurred popovers (#1911 ) Some checks failed Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped Details Build and Test / publish-tag (push) Has been skipped Details Build and Test / build-and-test (macos-latest) (push) Has been cancelled Details Build and Test / build-and-test (windows-latest) (push) Has been cancelled Details	2025-04-07 00:23:49 +02:00
Jacky Zhao	ee8c1dc968	chore(css): style tweaks for overflow Some checks failed Build and Test / build-and-test (ubuntu-latest) (push) Has been skipped Details Build and Test / publish-tag (push) Has been skipped Details Build and Test / build-and-test (macos-latest) (push) Has been cancelled Details Build and Test / build-and-test (windows-latest) (push) Has been cancelled Details	2025-04-05 11:38:50 -07:00
1 gal Rosemary	bb24cd13c7	fix(css): styles issues with popover, overflow, and scroll overflow (#1907 ) * fix(style): fix toc overflow & scrolling overflow * fix(style): fix explorer scrolling overflow * fix(style): fix backlinks overflow & scrolling overflow * fix(style): resolve popover overflow issue causing incomplete display * chore: rename function to enhance readability * fix(popover): make the backlink's id unique & use translate() instead of translateY()	2025-04-05 10:39:28 -07:00
Emile Bangma	d61fb266c7	fix(popover): automatically position anchored links properly (#1897 ) * fix(popover): automatically position heading links at heading * Impement linking of blockreferences * Popover fixes * id mapping * Remove excess regexes * Updated blockref * Remove linker element * Restore the docs to their former glory * Move the hash out of the loop * Redundant * Redundant * Restore docs * Remove log * Let it const	2025-04-05 10:31:17 -07:00