feat(explorer): Add active class to current folder in explorer

.github/workflows/build-preview.yaml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     name: Build Preview
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
         with:
           fetch-depth: 0
 
@@ -21,7 +21,7 @@ jobs:
           node-version: 22
 
       - name: Cache dependencies
-        uses: actions/cache@v5
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -37,7 +37,7 @@ jobs:
         run: npx quartz build -d docs -v
 
       - name: Upload build artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v5
         with:
           name: preview-build
           path: public

.github/workflows/ci.yaml

@@ -19,7 +19,7 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
         with:
           fetch-depth: 0
 
@@ -29,7 +29,7 @@ jobs:
           node-version: 22
 
       - name: Cache dependencies
-        uses: actions/cache@v5
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -53,7 +53,7 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
         with:
           fetch-depth: 0
       - name: Setup Node

.github/workflows/deploy-preview.yaml

@@ -18,7 +18,7 @@ jobs:
     name: Deploy Preview to Cloudflare Pages
     steps:
       - name: Download build artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v6
         id: preview-build-artifact
         with:
           name: preview-build

.github/workflows/docker-build-push.yaml

@@ -21,11 +21,11 @@ jobs:
           echo "OWNER_LOWERCASE=${OWNER,,}" >> ${GITHUB_ENV}
         env:
           OWNER: "${{ github.repository_owner }}"
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
         with:
           fetch-depth: 1
       - name: Inject slug/short variables
-        uses: rlespinasse/github-slug-action@v5.4.0
+        uses: rlespinasse/github-slug-action@v5.3.0
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx

README.md

@@ -3,6 +3,7 @@
 > “[One] who works with the door open gets all kinds of interruptions, but [they] also occasionally gets clues as to what the world is and what might be important.” — Richard Hamming
 
 Quartz is a set of tools that helps you publish your [digital garden](https://jzhao.xyz/posts/networked-thought) and notes as a website for free.
+Quartz v4 features a from-the-ground rewrite focusing on end-user extensibility and ease-of-use.
 
 🔗 Read the documentation and get started: https://quartz.jzhao.xyz/
 

docs/configuration.md

@@ -36,7 +36,6 @@ This part of the configuration concerns anything that can affect the whole site.
   - `{provider: 'clarity', projectId: '<your-clarity-id-code' }`: use [Microsoft clarity](https://clarity.microsoft.com/). The project id can be found on top of the overview page.
   - `{ provider: 'matomo', siteId: '<your-matomo-id-code', host: 'matomo.example.com' }`: use [Matomo](https://matomo.org/), without protocol.
   - `{ provider: 'vercel' }`: use [Vercel Web Analytics](https://vercel.com/docs/concepts/analytics).
-  - `{ provider: 'rybbit', siteId: 'my-rybbit-id' }` (managed) or `{ provider: 'rybbit', siteId: 'my-rybbit-id', host: 'my-rybbit-domain.com' }` (self-hosted) use [Rybbit](https://rybbit.com);
 - `locale`: used for [[i18n]] and date formatting
 - `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
   - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`.

docs/features/Docker Support.md

@@ -5,7 +5,3 @@ You can run the below one-liner to run Quartz in Docker.
 ```sh
 docker run --rm -itp 8080:8080 -p 3001:3001 -v ./content:/usr/src/app/content $(docker build -q .)
 ```
-
-> [!warning] Not to be used for production
-> Serve mode is intended for local previews only.
-> For production workloads, see the page on [[hosting]].

docs/features/explorer.md

@@ -162,7 +162,7 @@ You can access the tags of a file by `node.data.tags`.
 Component.Explorer({
   filterFn: (node) => {
     // exclude files with the tag "explorerexclude"
-    return node.data?.tags?.includes("explorerexclude") !== true
+    return node.data.tags?.includes("explorerexclude") !== true
   },
 })
 ```

docs/features/popover previews.md

@@ -8,7 +8,7 @@ By default, Quartz only fetches previews for pages inside your vault due to [COR
 
 When [[creating components|creating your own components]], you can include this `popover-hint` class to also include it in the popover.
 
-Similar to Obsidian, [[quartz-layout-desktop.png|images referenced using wikilinks]] can also be viewed as popups.
+Similar to Obsidian, [[quartz layout.png|images referenced using wikilinks]] can also be viewed as popups.
 
 ## Configuration
 

package.json

@@ -42,28 +42,28 @@
     "@tweenjs/tween.js": "^25.0.0",
     "ansi-truncate": "^1.4.0",
     "async-mutex": "^0.5.0",
-    "chokidar": "^5.0.0",
+    "chokidar": "^4.0.3",
     "cli-spinner": "^0.2.10",
     "d3": "^7.9.0",
-    "esbuild-sass-plugin": "^3.6.0",
+    "esbuild-sass-plugin": "^3.3.1",
     "flexsearch": "^0.8.205",
     "github-slugger": "^2.0.0",
-    "globby": "^16.1.0",
+    "globby": "^15.0.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "^9.0.5",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "^3.0.1",
     "is-absolute-url": "^5.0.0",
-    "js-yaml": "^4.1.1",
-    "lightningcss": "^1.31.1",
+    "js-yaml": "^4.1.0",
+    "lightningcss": "^1.30.2",
     "mdast-util-find-and-replace": "^3.0.2",
-    "mdast-util-to-hast": "^13.2.1",
+    "mdast-util-to-hast": "^13.2.0",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
     "minimatch": "^10.1.1",
-    "pixi.js": "^8.15.0",
-    "preact": "^10.28.2",
-    "preact-render-to-string": "^6.6.5",
+    "pixi.js": "^8.14.0",
+    "preact": "^10.27.2",
+    "preact-render-to-string": "^6.6.3",
     "pretty-bytes": "^7.1.0",
     "pretty-time": "^1.1.0",
     "reading-time": "^1.5.0",
@@ -83,32 +83,32 @@
     "remark-rehype": "^11.1.2",
     "remark-smartypants": "^3.0.2",
     "rfdc": "^1.4.1",
-    "satori": "^0.19.1",
+    "satori": "^0.18.3",
     "serve-handler": "^6.1.6",
-    "sharp": "^0.34.5",
+    "sharp": "^0.34.4",
     "shiki": "^1.26.2",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.1.0",
+    "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.3",
-    "workerpool": "^10.0.1",
-    "ws": "^8.19.0",
+    "workerpool": "^10.0.0",
+    "ws": "^8.18.3",
     "yargs": "^18.0.0"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^25.0.10",
+    "@types/node": "^24.10.0",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.18.1",
-    "@types/yargs": "^17.0.35",
-    "esbuild": "^0.27.2",
-    "prettier": "^3.8.1",
-    "tsx": "^4.21.0",
+    "@types/yargs": "^17.0.34",
+    "esbuild": "^0.25.12",
+    "prettier": "^3.6.2",
+    "tsx": "^4.20.6",
     "typescript": "^5.9.3"
   }
 }

quartz/build.ts

@@ -143,7 +143,6 @@ async function startWatching(
   }
 
   const watcher = chokidar.watch(".", {
-    awaitWriteFinish: { stabilityThreshold: 250 },
     persistent: true,
     cwd: argv.directory,
     ignoreInitial: true,

quartz/cfg.ts

@@ -50,11 +50,6 @@ export type Analytics =
   | {
       provider: "vercel"
     }
-  | {
-      provider: "rybbit"
-      siteId: string
-      host?: string
-    }
 
 export interface GlobalConfiguration {
   pageTitle: string

quartz/cli/helpers.js

@@ -7,8 +7,8 @@ import fs from "fs"
 export function escapePath(fp) {
   return fp
     .replace(/\\ /g, " ") // unescape spaces
-    .replace(/^"(.*)"$/, "$1")
-    .replace(/^'(.*)'$/, "$1")
+    .replace(/^".*"$/, "$1")
+    .replace(/^'.*"$/, "$1")
     .trim()
 }
 

quartz/components/renderPage.tsx

@@ -294,7 +294,7 @@ export function renderPage(
       </body>
       {pageResources.js
         .filter((resource) => resource.loadTime === "afterDOMReady")
-        .map((res) => JSResourceToScriptElement(res, true))}
+        .map((res) => JSResourceToScriptElement(res))}
     </html>
   )
 

quartz/components/scripts/mermaid.inline.ts

@@ -29,31 +29,17 @@ class DiagramPanZoom {
     const mouseDownHandler = this.onMouseDown.bind(this)
     const mouseMoveHandler = this.onMouseMove.bind(this)
     const mouseUpHandler = this.onMouseUp.bind(this)
-
-    // Touch drag events
-    const touchStartHandler = this.onTouchStart.bind(this)
-    const touchMoveHandler = this.onTouchMove.bind(this)
-    const touchEndHandler = this.onTouchEnd.bind(this)
-
     const resizeHandler = this.resetTransform.bind(this)
 
     this.container.addEventListener("mousedown", mouseDownHandler)
     document.addEventListener("mousemove", mouseMoveHandler)
     document.addEventListener("mouseup", mouseUpHandler)
-
-    this.container.addEventListener("touchstart", touchStartHandler, { passive: false })
-    document.addEventListener("touchmove", touchMoveHandler, { passive: false })
-    document.addEventListener("touchend", touchEndHandler)
-
     window.addEventListener("resize", resizeHandler)
 
     this.cleanups.push(
       () => this.container.removeEventListener("mousedown", mouseDownHandler),
       () => document.removeEventListener("mousemove", mouseMoveHandler),
       () => document.removeEventListener("mouseup", mouseUpHandler),
-      () => this.container.removeEventListener("touchstart", touchStartHandler),
-      () => document.removeEventListener("touchmove", touchMoveHandler),
-      () => document.removeEventListener("touchend", touchEndHandler),
       () => window.removeEventListener("resize", resizeHandler),
     )
   }
@@ -113,30 +99,6 @@ class DiagramPanZoom {
     this.container.style.cursor = "grab"
   }
 
-  private onTouchStart(e: TouchEvent) {
-    if (e.touches.length !== 1) return
-    this.isDragging = true
-    const touch = e.touches[0]
-    this.startPan = { x: touch.clientX - this.currentPan.x, y: touch.clientY - this.currentPan.y }
-  }
-
-  private onTouchMove(e: TouchEvent) {
-    if (!this.isDragging || e.touches.length !== 1) return
-    e.preventDefault() // Prevent scrolling
-
-    const touch = e.touches[0]
-    this.currentPan = {
-      x: touch.clientX - this.startPan.x,
-      y: touch.clientY - this.startPan.y,
-    }
-
-    this.updateTransform()
-  }
-
-  private onTouchEnd() {
-    this.isDragging = false
-  }
-
   private zoom(delta: number) {
     const newScale = Math.min(Math.max(this.scale + delta, this.MIN_SCALE), this.MAX_SCALE)
 
@@ -158,15 +120,11 @@ class DiagramPanZoom {
   }
 
   private resetTransform() {
-    const svg = this.content.querySelector("svg")!
-    const rect = svg.getBoundingClientRect()
-    const width = rect.width / this.scale
-    const height = rect.height / this.scale
-
     this.scale = 1
+    const svg = this.content.querySelector("svg")!
     this.currentPan = {
-      x: (this.container.clientWidth - width) / 2,
-      y: (this.container.clientHeight - height) / 2,
+      x: svg.getBoundingClientRect().width / 2,
+      y: svg.getBoundingClientRect().height / 2,
     }
     this.updateTransform()
   }

quartz/components/scripts/search.inline.ts

@@ -16,49 +16,11 @@ interface Item {
 type SearchType = "basic" | "tags"
 let searchType: SearchType = "basic"
 let currentSearchTerm: string = ""
-const encoder = (str: string): string[] => {
-  const tokens: string[] = []
-  let bufferStart = -1
-  let bufferEnd = -1
-  const lower = str.toLowerCase()
-
-  let i = 0
-  for (const char of lower) {
-    const code = char.codePointAt(0)!
-
-    const isCJK =
-      (code >= 0x3040 && code <= 0x309f) ||
-      (code >= 0x30a0 && code <= 0x30ff) ||
-      (code >= 0x4e00 && code <= 0x9fff) ||
-      (code >= 0xac00 && code <= 0xd7af) ||
-      (code >= 0x20000 && code <= 0x2a6df)
-
-    const isWhitespace = code === 32 || code === 9 || code === 10 || code === 13
-
-    if (isCJK) {
-      if (bufferStart !== -1) {
-        tokens.push(lower.slice(bufferStart, bufferEnd))
-        bufferStart = -1
-      }
-      tokens.push(char)
-    } else if (isWhitespace) {
-      if (bufferStart !== -1) {
-        tokens.push(lower.slice(bufferStart, bufferEnd))
-        bufferStart = -1
-      }
-    } else {
-      if (bufferStart === -1) bufferStart = i
-      bufferEnd = i + char.length
-    }
-
-    i += char.length
-  }
-
-  if (bufferStart !== -1) {
-    tokens.push(lower.slice(bufferStart))
-  }
-
-  return tokens
+const encoder = (str: string) => {
+  return str
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((token) => token.length > 0)
 }
 
 let index = new FlexSearch.Document<Item>({

quartz/components/scripts/search.test.ts

@@ -1,163 +0,0 @@
-import test, { describe } from "node:test"
-import assert from "node:assert"
-
-// Inline the encoder function from search.inline.ts for testing
-const encoder = (str: string): string[] => {
-  const tokens: string[] = []
-  let bufferStart = -1
-  let bufferEnd = -1
-  const lower = str.toLowerCase()
-
-  let i = 0
-  for (const char of lower) {
-    const code = char.codePointAt(0)!
-
-    const isCJK =
-      (code >= 0x3040 && code <= 0x309f) ||
-      (code >= 0x30a0 && code <= 0x30ff) ||
-      (code >= 0x4e00 && code <= 0x9fff) ||
-      (code >= 0xac00 && code <= 0xd7af) ||
-      (code >= 0x20000 && code <= 0x2a6df)
-
-    const isWhitespace = code === 32 || code === 9 || code === 10 || code === 13
-
-    if (isCJK) {
-      if (bufferStart !== -1) {
-        tokens.push(lower.slice(bufferStart, bufferEnd))
-        bufferStart = -1
-      }
-      tokens.push(char)
-    } else if (isWhitespace) {
-      if (bufferStart !== -1) {
-        tokens.push(lower.slice(bufferStart, bufferEnd))
-        bufferStart = -1
-      }
-    } else {
-      if (bufferStart === -1) bufferStart = i
-      bufferEnd = i + char.length
-    }
-
-    i += char.length
-  }
-
-  if (bufferStart !== -1) {
-    tokens.push(lower.slice(bufferStart))
-  }
-
-  return tokens
-}
-
-describe("search encoder", () => {
-  describe("English text", () => {
-    test("should tokenize simple English words", () => {
-      const result = encoder("hello world")
-      assert.deepStrictEqual(result, ["hello", "world"])
-    })
-
-    test("should handle multiple spaces", () => {
-      const result = encoder("hello   world")
-      assert.deepStrictEqual(result, ["hello", "world"])
-    })
-
-    test("should handle tabs and newlines", () => {
-      const result = encoder("hello\tworld\ntest")
-      assert.deepStrictEqual(result, ["hello", "world", "test"])
-    })
-
-    test("should lowercase all text", () => {
-      const result = encoder("Hello WORLD Test")
-      assert.deepStrictEqual(result, ["hello", "world", "test"])
-    })
-  })
-
-  describe("CJK text", () => {
-    test("should tokenize Japanese Hiragana character by character", () => {
-      const result = encoder("こんにちは")
-      assert.deepStrictEqual(result, ["こ", "ん", "に", "ち", "は"])
-    })
-
-    test("should tokenize Japanese Katakana character by character", () => {
-      const result = encoder("コントロール")
-      assert.deepStrictEqual(result, ["コ", "ン", "ト", "ロ", "ー", "ル"])
-    })
-
-    test("should tokenize Japanese Kanji character by character", () => {
-      const result = encoder("日本語")
-      assert.deepStrictEqual(result, ["日", "本", "語"])
-    })
-
-    test("should tokenize Korean Hangul character by character", () => {
-      const result = encoder("안녕하세요")
-      assert.deepStrictEqual(result, ["안", "녕", "하", "세", "요"])
-    })
-
-    test("should tokenize Chinese characters character by character", () => {
-      const result = encoder("你好世界")
-      assert.deepStrictEqual(result, ["你", "好", "世", "界"])
-    })
-
-    test("should handle mixed Hiragana/Katakana/Kanji", () => {
-      const result = encoder("て以来")
-      assert.deepStrictEqual(result, ["て", "以", "来"])
-    })
-  })
-
-  describe("Mixed CJK and English", () => {
-    test("should handle Japanese with English words", () => {
-      const result = encoder("hello 世界")
-      assert.deepStrictEqual(result, ["hello", "世", "界"])
-    })
-
-    test("should handle English with Japanese words", () => {
-      const result = encoder("世界 hello world")
-      assert.deepStrictEqual(result, ["世", "界", "hello", "world"])
-    })
-
-    test("should handle complex mixed content", () => {
-      const result = encoder("これはtest文章です")
-      assert.deepStrictEqual(result, ["こ", "れ", "は", "test", "文", "章", "で", "す"])
-    })
-
-    test("should handle mixed Korean and English", () => {
-      const result = encoder("hello 안녕 world")
-      assert.deepStrictEqual(result, ["hello", "안", "녕", "world"])
-    })
-
-    test("should handle mixed Chinese and English", () => {
-      const result = encoder("你好 world")
-      assert.deepStrictEqual(result, ["你", "好", "world"])
-    })
-  })
-
-  describe("Edge cases", () => {
-    test("should handle empty string", () => {
-      const result = encoder("")
-      assert.deepStrictEqual(result, [])
-    })
-
-    test("should handle only whitespace", () => {
-      const result = encoder("   \t\n  ")
-      assert.deepStrictEqual(result, [])
-    })
-
-    test("should handle single character", () => {
-      const result = encoder("a")
-      assert.deepStrictEqual(result, ["a"])
-    })
-
-    test("should handle single CJK character", () => {
-      const result = encoder("あ")
-      assert.deepStrictEqual(result, ["あ"])
-    })
-
-    test("should handle CJK with trailing whitespace", () => {
-      const result = encoder("日本語  ")
-      assert.deepStrictEqual(result, ["日", "本", "語"])
-    })
-
-    test("should handle English with trailing whitespace", () => {
-      const result = encoder("hello  ")
-      assert.deepStrictEqual(result, ["hello"])
-    })
-  })
-})

quartz/components/scripts/spa.inline.ts

@@ -115,9 +115,9 @@ async function _navigate(url: URL, isBack: boolean = false) {
   }
 
   // now, patch head, re-executing scripts
-  const elementsToRemove = document.head.querySelectorAll(":not([data-persist])")
+  const elementsToRemove = document.head.querySelectorAll(":not([spa-preserve])")
   elementsToRemove.forEach((el) => el.remove())
-  const elementsToAdd = html.head.querySelectorAll(":not([data-persist])")
+  const elementsToAdd = html.head.querySelectorAll(":not([spa-preserve])")
   elementsToAdd.forEach((el) => document.head.appendChild(el))
 
   // delay setting the url until now

quartz/components/styles/darkmode.scss

@@ -5,7 +5,7 @@
   background: none;
   border: none;
   width: 20px;
-  height: 32px;
+  height: 20px;
   margin: 0;
   text-align: inherit;
   flex-shrink: 0;

quartz/components/styles/explorer.scss

@@ -6,7 +6,6 @@
     & > :not(.sidebar.left:has(.explorer)) {
       transition: transform 300ms ease-in-out;
     }
-
     &.lock-scroll > :not(.sidebar.left:has(.explorer)) {
       transform: translateX(100dvw);
       transition: transform 300ms ease-in-out;
@@ -34,10 +33,8 @@
 
   min-height: 1.2rem;
   flex: 0 1 auto;
-
   &.collapsed {
     flex: 0 1 1.2rem;
-
     & .fold {
       transform: rotateZ(-90deg);
     }
@@ -121,10 +118,7 @@ button.desktop-explorer {
     list-style: none;
     margin: 0;
     padding: 0;
-
-    &.explorer-ul {
     overscroll-behavior: contain;
-    }
 
     & li > a {
       color: var(--dark);
@@ -275,8 +269,6 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
 
 .mobile-no-scroll {
   @media all and ($mobile) {
-    .explorer-content > .explorer-ul {
-      overscroll-behavior: contain;
-    }
+    overscroll-behavior: none;
   }
 }

quartz/components/styles/mermaid.inline.scss

@@ -65,6 +65,7 @@ pre {
     overflow: hidden;
 
     & > .mermaid-content {
+      padding: 2rem;
       position: relative;
       transform-origin: 0 0;
       transition: transform 0.1s ease;

quartz/components/styles/readermode.scss

@@ -5,7 +5,7 @@
   background: none;
   border: none;
   width: 20px;
-  height: 32px;
+  height: 20px;
   margin: 0;
   text-align: inherit;
   flex-shrink: 0;

quartz/i18n/locales/vi-VN.ts

@@ -3,83 +3,85 @@ import { Translation } from "./definition"
 export default {
   propertyDefaults: {
     title: "Không có tiêu đề",
-    description: "Không có mô tả",
+    description: "Không có mô tả được cung cấp",
   },
   components: {
     callout: {
-      note: "Ghi chú",
-      abstract: "Tổng quan",
+      note: "Ghi Chú",
+      abstract: "Tóm Tắt",
       info: "Thông tin",
-      todo: "Cần phải làm",
-      tip: "Gợi ý",
-      success: "Thành công",
-      question: "Câu hỏi",
-      warning: "Cảnh báo",
-      failure: "Thất bại",
-      danger: "Nguy hiểm",
+      todo: "Cần Làm",
+      tip: "Gợi Ý",
+      success: "Thành Công",
+      question: "Nghi Vấn",
+      warning: "Cảnh Báo",
+      failure: "Thất Bại",
+      danger: "Nguy Hiểm",
       bug: "Lỗi",
-      example: "Ví dụ",
-      quote: "Trích dẫn",
+      example: "Ví Dụ",
+      quote: "Trích Dẫn",
     },
     backlinks: {
-      title: "Liên kết ngược",
-      noBacklinksFound: "Không có liên kết ngược nào",
+      title: "Liên Kết Ngược",
+      noBacklinksFound: "Không có liên kết ngược được tìm thấy",
     },
     themeToggle: {
-      lightMode: "Chế độ sáng",
-      darkMode: "Chế độ tối",
+      lightMode: "Sáng",
+      darkMode: "Tối",
     },
     readerMode: {
       title: "Chế độ đọc",
     },
     explorer: {
-      title: "Nội dung",
+      title: "Trong bài này",
     },
     footer: {
-      createdWith: "Được tạo bằng",
+      createdWith: "Được tạo bởi",
     },
     graph: {
-      title: "Sơ đồ",
+      title: "Biểu Đồ",
     },
     recentNotes: {
-      title: "Ghi chú gần đây",
-      seeRemainingMore: ({ remaining }) => `Xem thêm ${remaining} ghi chú →`,
+      title: "Bài viết gần đây",
+      seeRemainingMore: ({ remaining }) => `Xem ${remaining} thêm →`,
     },
     transcludes: {
-      transcludeOf: ({ targetSlug }) => `Trích dẫn toàn bộ từ ${targetSlug}`,
-      linkToOriginal: "Xem trang gốc",
+      transcludeOf: ({ targetSlug }) => `Bao gồm ${targetSlug}`,
+      linkToOriginal: "Liên Kết Gốc",
     },
     search: {
-      title: "Tìm",
+      title: "Tìm Kiếm",
       searchBarPlaceholder: "Tìm kiếm thông tin",
     },
     tableOfContents: {
-      title: "Mục lục",
+      title: "Bảng Nội Dung",
     },
     contentMeta: {
-      readingTime: ({ minutes }) => `${minutes} phút đọc`,
+      readingTime: ({ minutes }) => `đọc ${minutes} phút`,
     },
   },
   pages: {
     rss: {
-      recentNotes: "Ghi chú gần đây",
-      lastFewNotes: ({ count }) => `${count} Trang gần đây`,
+      recentNotes: "Những bài gần đây",
+      lastFewNotes: ({ count }) => `${count} Bài gần đây`,
     },
     error: {
-      title: "Không tìm thấy",
-      notFound: "Trang này riêng tư hoặc không tồn tại.",
-      home: "Về trang chủ",
+      title: "Không Tìm Thấy",
+      notFound: "Trang này được bảo mật hoặc không tồn tại.",
+      home: "Trở về trang chủ",
     },
     folderContent: {
-      folder: "Thư mục",
-      itemsUnderFolder: ({ count }) => `Có ${count} trang trong thư mục này.`,
+      folder: "Thư Mục",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 mục trong thư mục này." : `${count} mục trong thư mục này.`,
     },
     tagContent: {
       tag: "Thẻ",
-      tagIndex: "Danh sách thẻ",
-      itemsUnderTag: ({ count }) => `Có ${count} trang gắn thẻ này.`,
-      showingFirst: ({ count }) => `Đang hiển thị ${count} trang đầu tiên.`,
-      totalTags: ({ count }) => `Có tổng cộng ${count} thẻ.`,
+      tagIndex: "Thẻ Mục Lục",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 mục gắn thẻ này." : `${count} mục gắn thẻ này.`,
+      showingFirst: ({ count }) => `Hiển thị trước ${count} thẻ.`,
+      totalTags: ({ count }) => `Tìm thấy ${count} thẻ tổng cộng.`,
     },
   },
 } as const satisfies Translation

quartz/plugins/emitters/componentResources.ts

@@ -241,16 +241,6 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso
       vercelInsightsScript.defer = true
       document.head.appendChild(vercelInsightsScript)
     `)
-  } else if (cfg.analytics?.provider === "rybbit") {
-    componentResources.afterDOMLoaded.push(`
-      const rybbitScript = document.createElement("script");
-      rybbitScript.src = "${cfg.analytics.host ?? "https://app.rybbit.io"}/api/script.js";
-      rybbitScript.setAttribute("data-site-id", "${cfg.analytics.siteId}");
-      rybbitScript.async = true;
-      rybbitScript.defer = true;
-
-      document.head.appendChild(rybbitScript);
-    `)
   }
 
   if (cfg.enableSPA) {

quartz/plugins/transformers/citations.ts

@@ -23,16 +23,7 @@ export const Citations: QuartzTransformerPlugin<Partial<Options>> = (userOpts) =
     name: "Citations",
     htmlPlugins(ctx) {
       const plugins: PluggableList = []
-      // per default, rehype-citations only supports en-US
-      // see: https://github.com/timlrx/rehype-citation/issues/12
-      // in here there are multiple usable locales:
-      // https://github.com/citation-style-language/locales
-      // thus, we optimistically assume there is indeed an appropriate
-      // locale available and simply create the lang url-string
-      let lang: string = "en-US"
-      if (ctx.cfg.configuration.locale !== "en-US") {
-        lang = `https://raw.githubusercontent.com/citation-stylelanguage/locales/refs/heads/master/locales-${ctx.cfg.configuration.locale}.xml`
-      }
+
       // Add rehype-citation to the list of plugins
       plugins.push([
         rehypeCitation,
@@ -41,7 +32,7 @@ export const Citations: QuartzTransformerPlugin<Partial<Options>> = (userOpts) =
           suppressBibliography: opts.suppressBibliography,
           linkCitations: opts.linkCitations,
           csl: opts.csl,
-          lang,
+          lang: ctx.cfg.configuration.locale ?? "en-US",
         },
       ])
 

quartz/plugins/transformers/latex.ts

@@ -17,10 +17,8 @@ interface Options {
   typstOptions: TypstOptions
 }
 
-// mathjax macros
-export type Args = boolean | number | string | null
 interface MacroType {
-  [key: string]: string | Args[]
+  [key: string]: string
 }
 
 export const Latex: QuartzTransformerPlugin<Partial<Options>> = (opts) => {
@@ -39,20 +37,11 @@ export const Latex: QuartzTransformerPlugin<Partial<Options>> = (opts) => {
         case "typst": {
           return [[rehypeTypst, opts?.typstOptions ?? {}]]
         }
-        default:
         case "mathjax": {
-          return [
-            [
-              rehypeMathjax,
-              {
-                ...(opts?.mathJaxOptions ?? {}),
-                tex: {
-                  ...(opts?.mathJaxOptions?.tex ?? {}),
-                  macros,
-                },
-              },
-            ],
-          ]
+          return [[rehypeMathjax, { macros, ...(opts?.mathJaxOptions ?? {}) }]]
+        }
+        default: {
+          return [[rehypeMathjax, { macros, ...(opts?.mathJaxOptions ?? {}) }]]
         }
       }
     },

quartz/styles/base.scss

@@ -9,10 +9,6 @@ html {
   text-size-adjust: none;
   overflow-x: hidden;
   width: 100vw;
-
-  @media all and ($mobile) {
-    scroll-padding-top: 4rem;
-  }
 }
 
 body {
@@ -45,17 +41,13 @@ ul,
 .katex,
 .math,
 .typst-doc,
-g[class~="typst-text"] {
+.typst-doc * {
   color: var(--darkgray);
   fill: var(--darkgray);
   overflow-wrap: break-word;
   text-wrap: pretty;
 }
 
-path[class~="typst-shape"] {
-  stroke: var(--darkgray);
-}
-
 .math {
   &.math-display {
     text-align: center;

quartz/util/resources.tsx

@@ -26,10 +26,9 @@ export type CSSResource = {
 export function JSResourceToScriptElement(resource: JSResource, preserve?: boolean): JSX.Element {
   const scriptType = resource.moduleType ?? "application/javascript"
   const spaPreserve = preserve ?? resource.spaPreserve
-
   if (resource.contentType === "external") {
     return (
-      <script key={resource.src} src={resource.src} type={scriptType} data-persist={spaPreserve} />
+      <script key={resource.src} src={resource.src} type={scriptType} spa-preserve={spaPreserve} />
     )
   } else {
     const content = resource.script
@@ -37,7 +36,7 @@ export function JSResourceToScriptElement(resource: JSResource, preserve?: boole
       <script
         key={randomUUID()}
         type={scriptType}
-        data-persist={spaPreserve}
+        spa-preserve={spaPreserve}
         dangerouslySetInnerHTML={{ __html: content }}
       ></script>
     )
@@ -55,7 +54,7 @@ export function CSSResourceToStyleElement(resource: CSSResource, preserve?: bool
         href={resource.content}
         rel="stylesheet"
         type="text/css"
-        data-persist={spaPreserve}
+        spa-preserve={spaPreserve}
       />
     )
   }