Last Sync: 2026-05-04 05:29 (Mobile)

Co-authored-by: Luiz Claudio Silveira Duarte <lcduarte@lcduarte.com>

README.md

@@ -3,7 +3,6 @@
 > “[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/
 

content/index.md

@@ -0,0 +1 @@
+hello world

docs/authoring content.md

@@ -2,7 +2,7 @@
 title: Authoring Content
 ---
 
-All of the content in your Quartz should go in the `/content` folder. The content for the home page of your Quartz lives in `content/index.md`. If you've [[index#🪴 Get Started|setup Quartz]] already, this folder should already be initialized. Any Markdown in this folder will get processed by Quartz.
+All of the content in your Quartz should go in the `/content` folder. The content for the home page of your Quartz lives in `content/index.md`. If you've [[egf/docs/index#🪴 Get Started|setup Quartz]] already, this folder should already be initialized. Any Markdown in this folder will get processed by Quartz.
 
 It is recommended that you use [Obsidian](https://obsidian.md/) as a way to edit and maintain your Quartz. It comes with a nice editor and graphical interface to preview, edit, and link your local files and attachments.
 

docs/build.md

@@ -2,7 +2,7 @@
 title: "Building your Quartz"
 ---
 
-Once you've [[index#🪴 Get Started|initialized]] Quartz, let's see what it looks like locally:
+Once you've [[egf/docs/index#🪴 Get Started|initialized]] Quartz, let's see what it looks like locally:
 
 ```bash
 npx quartz build --serve

docs/features/Docker Support.md

@@ -5,3 +5,7 @@ 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/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.png|images referenced using wikilinks]] can also be viewed as popups.
+Similar to Obsidian, [[quartz-layout-desktop.png|images referenced using wikilinks]] can also be viewed as popups.
 
 ## Configuration
 

docs/setting up your GitHub repository.md

@@ -2,7 +2,7 @@
 title: Setting up your GitHub repository
 ---
 
-First, make sure you have Quartz [[index#🪴 Get Started|cloned and setup locally]].
+First, make sure you have Quartz [[egf/docs/index#🪴 Get Started|cloned and setup locally]].
 
 Then, create a new repository on GitHub.com. Do **not** initialize the new repository with `README`, license, or `gitignore` files.
 

package.json

@@ -45,7 +45,7 @@
     "chokidar": "^5.0.0",
     "cli-spinner": "^0.2.10",
     "d3": "^7.9.0",
-    "esbuild-sass-plugin": "^3.3.1",
+    "esbuild-sass-plugin": "^3.6.0",
     "flexsearch": "^0.8.205",
     "github-slugger": "^2.0.0",
     "globby": "^16.1.0",
@@ -55,14 +55,14 @@
     "hast-util-to-string": "^3.0.1",
     "is-absolute-url": "^5.0.0",
     "js-yaml": "^4.1.1",
-    "lightningcss": "^1.30.2",
+    "lightningcss": "^1.31.1",
     "mdast-util-find-and-replace": "^3.0.2",
     "mdast-util-to-hast": "^13.2.1",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
     "minimatch": "^10.1.1",
     "pixi.js": "^8.15.0",
-    "preact": "^10.28.1",
+    "preact": "^10.28.2",
     "preact-render-to-string": "^6.6.5",
     "pretty-bytes": "^7.1.0",
     "pretty-time": "^1.1.0",
@@ -83,7 +83,7 @@
     "remark-rehype": "^11.1.2",
     "remark-smartypants": "^3.0.2",
     "rfdc": "^1.4.1",
-    "satori": "^0.18.3",
+    "satori": "^0.19.1",
     "serve-handler": "^6.1.6",
     "sharp": "^0.34.5",
     "shiki": "^1.26.2",
@@ -91,7 +91,7 @@
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0",
+    "unist-util-visit": "^5.1.0",
     "vfile": "^6.0.3",
     "workerpool": "^10.0.1",
     "ws": "^8.19.0",
@@ -101,13 +101,13 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.10",
     "@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.7.4",
+    "prettier": "^3.8.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   }

quartz/cli/handlers.js

@@ -318,7 +318,7 @@ export async function handleBuild(argv) {
 
     const result = await ctx.rebuild().catch((err) => {
       console.error(`${styleText("red", "Couldn't parse Quartz configuration:")} ${fp}`)
-      console.log(`Reason: ${styleText("grey", err)}`)
+      console.log(`Reason: ${styleText("gray", err)}`)
       process.exit(1)
     })
     release()
@@ -395,7 +395,7 @@ export async function handleBuild(argv) {
           status >= 200 && status < 300
             ? styleText("green", `[${status}]`)
             : styleText("red", `[${status}]`)
-        console.log(statusString + styleText("grey", ` ${argv.baseDir}${req.url}`))
+        console.log(statusString + styleText("gray", ` ${argv.baseDir}${req.url}`))
         release()
       }
 
@@ -406,7 +406,7 @@ export async function handleBuild(argv) {
         })
         console.log(
           styleText("yellow", "[302]") +
-            styleText("grey", ` ${argv.baseDir}${req.url} -> ${newFp}`),
+            styleText("gray", ` ${argv.baseDir}${req.url} -> ${newFp}`),
         )
         res.end()
       }
@@ -482,7 +482,7 @@ export async function handleBuild(argv) {
       .on("change", () => build(clientRefresh))
       .on("unlink", () => build(clientRefresh))
 
-    console.log(styleText("grey", "hint: exit with ctrl+c"))
+    console.log(styleText("gray", "hint: exit with ctrl+c"))
   }
 }
 

quartz/components/scripts/explorer.inline.ts

@@ -111,6 +111,10 @@ function createFolderNode(
   const folderPath = node.slug
   folderContainer.dataset.folderpath = folderPath
 
+  if (currentSlug === folderPath) {
+    folderContainer.classList.add("active")
+  }
+
   if (opts.folderClickBehavior === "link") {
     // Replace button with link for link behavior
     const button = titleContainer.querySelector(".folder-button") as HTMLElement

quartz/components/scripts/spa.inline.ts

@@ -102,7 +102,7 @@ async function _navigate(url: URL, isBack: boolean = false) {
   html.body.appendChild(announcer)
 
   // morph body
-  micromorph(document.body, html.body)
+  await micromorph(document.body, html.body)
 
   // scroll into place and add history
   if (!isBack) {

quartz/components/styles/explorer.scss

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

quartz/plugins/transformers/citations.ts

@@ -23,7 +23,16 @@ 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-style-language/locales/refs/heads/master/locales-${ctx.cfg.configuration.locale}.xml`
+      }
       // Add rehype-citation to the list of plugins
       plugins.push([
         rehypeCitation,
@@ -32,7 +41,7 @@ export const Citations: QuartzTransformerPlugin<Partial<Options>> = (userOpts) =
           suppressBibliography: opts.suppressBibliography,
           linkCitations: opts.linkCitations,
           csl: opts.csl,
-          lang: ctx.cfg.configuration.locale ?? "en-US",
+          lang,
         },
       ])
 

quartz/styles/base.scss

@@ -9,6 +9,10 @@ html {
   text-size-adjust: none;
   overflow-x: hidden;
   width: 100vw;
+
+  @media all and ($mobile) {
+    scroll-padding-top: 4rem;
+  }
 }
 
 body {