feat: new content

* fix(readermode): Translations and a new icon for ReaderMode

* Formatted

* Replaced icon

.github/workflows/build-preview.yaml

@@ -0,0 +1,43 @@
+name: Build Preview Deployment
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+  workflow_dispatch:
+
+jobs:
+  build-preview:
+    if: ${{ github.repository == 'jackyzha0/quartz' }}
+    runs-on: ubuntu-latest
+    name: Build Preview
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - run: npm ci
+
+      - name: Check types and style
+        run: npm run check
+
+      - name: Build Quartz
+        run: npx quartz build -d docs -v
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: preview-build
+          path: public

.github/workflows/deploy-preview.yaml

@@ -0,0 +1,37 @@
+name: Upload Preview Deployment
+on:
+  workflow_run:
+    workflows: ["Build Preview Deployment"]
+    types:
+      - completed
+
+permissions:
+  actions: read
+  deployments: write
+  contents: read
+  pull-requests: write
+
+jobs:
+  deploy-preview:
+    if: ${{ github.repository == 'jackyzha0/quartz' && github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    name: Deploy Preview to Cloudflare Pages
+    steps:
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        id: preview-build-artifact
+        with:
+          name: preview-build
+          path: build
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+
+      - name: Deploy to Cloudflare Pages
+        uses: AdrianGonz97/refined-cf-pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          projectName: quartz
+          deploymentName: Branch Preview
+          directory: ${{ steps.preview-build-artifact.outputs.download-path }}

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

@@ -37,7 +37,7 @@ jobs:
             network=host
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.8.1
+        uses: sigstore/cosign-installer@v3.8.2
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v3
         if: github.event_name != 'pull_request'

content/Deutsch/Literaturepochen/Klassik.md

@@ -0,0 +1,41 @@
+- auch Weimarer Klassik
+- 1786 - 1832 (erste Italienreise Goethe - Tod Goethe)
+- hohe Ansprüche und Rückbesinnung auf die Antike
+- beeinflusst von Aufklärung
+- Besonders Goethe und Schiller als wichtige Vertreter (zuvor ebenfalls [[Sturm und Drang]])
+- Auswirkungen der Französischen Revolution:
+	- Umbruch in Europa durch Abschaffung der absolutistischen Monarchie
+	- Instabilität
+	- Neuordnung Europas unter Napoleon: Selbstverwaltung der Städte, Bildungsreform
+	- -> Bedürfnis nach Harmonie
+- Motive und Themen
+	- (Johann Joachim Winckelmann war derjenige, der die Antike Kunst wieder aktuell und zum Ideal machte)
+	- Harmonie
+	- "Edle Einfalt" und "stille Größe"
+	- Balance aus Verstand und Gefühl -> Balance zwischen Aufklärung und Sturm und Drang
+	- Kunst + Wissenschaft gemeinsam
+	- Was ist der ideale Mensch?
+	- Nicht nur Abbildung, sondern Erfassung des Wesens
+	- Schönheit, Vollkommenheit und Ideale gelten als Ziel
+	- Selbstbestimmung, Menschlichkeit, Toleranz
+- Lyrik
+	- antiker Stil und strenge formale Regeln
+	- meist Oden und balladen mit feierlicher Sprache
+	- auch Sonette, Hmynen
+- Literatur allgemein
+	- einheitliche, klare Sprache und Symmetrie
+	- inhaltliche und formale Harmonie und Ordnung
+- Drama
+	- beliebteste Gattung, hier aufgrund der Möglichkeit zur Erziehung der Zuschauer / Lesenden
+	- Typisch:
+		- Stichomythie - häufiger Rednerwechsel
+		- allgemeingültige Weisheiten (Sentenzen)
+		- Blankverse
+		- Dramenkonzept Aristoteles: Kausalität, Einheit von Raum, Zeit und Handlung und Katharsis (innere Reinigung)
+- Epik
+	- Hier ausnahmsweise sehr frei
+	- selten genutzt
+	- meist in Bildungsromanen
+
+## Quellen
+https://wortwuchs.net/literaturepochen/klassik/

content/Deutsch/Literaturepochen/Romantik.md

@@ -0,0 +1,64 @@
+- 1795 - 1848 (Literatur)
+- auch in Musik, Kunst und Philosophie (dort auch bis ins späte 19. Jh.)
+- zentrale Motive:
+	- Schauriges
+	- Unterbewusstes
+	- Fantastisches
+	- Leidenschaft
+	- Indivualität
+	- Gefühl
+	- Abenteuerliche
+	- Grenzüberschreitung (auch als Motive z. B. Dämmerung, Mondschein, Blick in die Ferne)
+	- Besinnung auf das Mittelalter (Romantisierung, Verklärung desselben)
+	- Sehnsucht
+- wichtige Autoren
+	- Brüder Grimm
+	- Novalis
+	- Joseph von Eichendorff
+	- E.T.A Hoffmann
+- Abwendung von der Antike (siehe [[Klassik]], hin zu eigener Sprache)
+- populäre Textsorten: Märchen, Sagen, Mythen, Roman
+- Geschichte
+	- Kapitalismus
+	- Industrialisierung
+	- Wissenschaft
+- Der Fortschritt und die Reduzierung des Menschen auf das Gewinnbringende war den Autoren zuwider
+	- Sie konzentrierten sich auf das Mystische und Mythische, auf das Unerklärliche
+		- daher auch Besinnung auf das Mittelalter
+	- Das Mystische und Unergründbare als grenzenlos im Vergleich zur Wirklichkeit, die Grenzen hat
+- Universalpoesie
+	- Verbindung von verschiedenen literarischen Gattungen und Philosophie, Kritik und Rhetorik
+	- Ansprechen aller Sinne
+	- Wechselbezug zwischen Traum und Wirklichkeit
+- romantische Ironie
+	- "im Kunstwerk die Produktionsbedingungen desselben sichtbar machen"
+	- Bezug auf das Werk selbst
+	- Reflektion
+	- Beispiel: "Kein Held stirbt inmitten des zweiten Akts" - Aussage eines Helden in einer ausweglosen Situation
+- Epik
+	- v. a. Roman, der offen ist und so die Möglichkeit zur Vermischung der literarischen Gattungen birgt
+	- nicht wirklich Roman, sondern Zusammenstückelung verschiedener literarischer Formen, z. B. Lieder und Gedichte (wie auch gefordert)
+	- Schauerroman, Unheimliches
+	- Erzählung, Kunstmärchen, Märchen
+- Schwarze Romantik (Unterströmung)
+	- Beschäftigung mit der dunklen Seite des menschlichen Geistes
+	- vorher, v. a. in Aufklärung ignoriert
+	- unheimliche Geschehnisse
+	- Faszination am Bösen
+- Drama
+	- eher unbedeutend
+	- keine Vermischung der Gattungen möglich, da recht strenge Regeln
+	- "Der gestiefelte Kater" von Ludwig Tieck inkorperiert romantische Ironie
+		- Figuren fallen aus der Rolle
+		- Aus dem Publikum kommentieren Schauspieler
+		- Regiegespräch während des Stücks
+		- Bewertung des Stücks im Stück selbst
+		- Dichter spielt selbst mit
+- Lyrik
+	- ebenfalls nicht so frei wie Epik, aber trotzdem wichtig -> Poesiebegriff in der Romantik
+	- nicht erziehend
+	- Teil der idealen Welt
+	- einfache Dichtung
+	- spontane, naive Erlebnislyrik
+		- nicht wirklich, sondern gezielt so wirkend
+	- Heimatlosigkeit

content/Deutsch/Literaturepochen/Sturm und Drang.md

@@ -0,0 +1,34 @@
+- Die Epoche des Sturm und Drang wird auf ca. 1767 - 1785 datiert. 
+- meist junge Autoren von 20 - 30
+- Die Autoren wendeten sich gegen die vorherrschende Aufklärung, die den Verstand an erste Stelle im Leben stellte
+- Hauptmotiv: **Originalgenie**, das nach seinen eigenen Gesetzen lebt - diese kommen nach seinen Gefühlen und nicht nach der Vernunft
+- Antifeudalistisch (wie Aufklärung auch)
+- **Emotionalität**, Individualität, Verstoß gegen Normen
+- Auch im Ausdruck nicht geregelt: Es gibt Kraftausdrücke und volksnahe Sprache sowie Jugendsprache
+- Auch eine strenge Form (v. a. in der Poesie) wird abgelehnt -> Literatur soll ausdrucksstark sein
+- Wichtigste literarische Gattung: **Drama**, denn es ist ausdrucksstark und erlaubt Verbindung mit dem Publikum
+- Epik:
+	- Neue literarische Gattung: Briefroman
+		- Die Leiden des Jungen Werthers von Johann Wolfgang von Goethe (1774)
+		- Protest gegen strenge Formen
+		- Tiefer Einblick in die Gefühlswelt der Charaktere
+- Lyrik
+	- freie Rhythmen
+	- Erlebnislyrik
+		- Erlebnisse werden dem Leser möglichst nahgebracht und möglichst natürlich sein, fast wie in einem Zug verfasst -> glaubhaft
+		- Natur als zentrales Element
+	- Volkslied als wichtige literarische Gattung
+- Drama
+	- am weitesten verbreitete literarische Gattung des Sturm und Drang
+	- Behandlung gesellschaftlicher Probleme
+	- Held: Naturgenie, das mit der Welt um sich herum in Konflikt gerät -> wirkt wie Verbrecher
+	- Am Ende bringt sich der Held meist um, da dies für ihn der einzige Ausweg ist
+- Geschichte
+	- Deutschland besteht zu dieser Zeit noch nicht und es gibt viele kleine Staaten
+	- Je nach Lebensort gehört man unterschiedlichen Konfessionen an
+	- Beginn der Industrialisierung
+	- Erstarkung des Bürgertums, das nun mitbestimmen kann
+
+
+## Quellen
+https://wortwuchs.net/literaturepochen/sturm-und-drang/

docs/features/reader mode.md

@@ -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);
+  }
+}
+```

docs/plugins/Favicon.md

@@ -0,0 +1,19 @@
+---
+title: Favicon
+tags:
+  - plugin/emitter
+---
+
+This plugin emits a `favicon.ico` into the `public` folder. It creates the favicon from `icon.png` located in the `quartz/static` folder.
+The plugin resizes `icon.png` to 48x48px to make it as small as possible.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.Favicon()`.
+- Source: [`quartz/plugins/emitters/favicon.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/favicon.ts).

docs/setting up your GitHub repository.md

@@ -34,6 +34,13 @@ npx quartz sync --no-pull
 > [!warning]- `fatal: --[no-]autostash option is only valid with --rebase`
 > You may have an outdated version of `git`. Updating `git` should fix this issue.
 
+> [!warning]- `fatal: The remote end hung up unexpectedly`
+> It might be due to Git's default buffer size. You can fix it by increasing the buffer with this command:
+>
+> ```bash
+> git config http.postBuffer 524288000
+> ```
+
 In future updates, you can simply run `npx quartz sync` every time you want to push updates to your repository.
 
 > [!hint] Flags and options

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>

package.json

@@ -35,11 +35,12 @@
     "quartz": "./quartz/bootstrap-cli.mjs"
   },
   "dependencies": {
-    "@clack/prompts": "^0.10.0",
+    "@clack/prompts": "^0.10.1",
-    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/dom": "^1.7.0",
-    "@myriaddreamin/rehype-typst": "^0.5.4",
+    "@myriaddreamin/rehype-typst": "^0.6.0",
     "@napi-rs/simple-git": "0.1.19",
     "@tweenjs/tween.js": "^25.0.0",
+    "@webgpu/types": "^0.1.60",
     "ansi-truncate": "^1.2.0",
     "async-mutex": "^0.5.0",
     "chalk": "^5.4.1",
@@ -62,10 +63,10 @@
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
     "minimatch": "^10.0.1",
-    "pixi.js": "^8.9.1",
+    "pixi.js": "^8.9.2",
-    "preact": "^10.26.4",
+    "preact": "^10.26.5",
     "preact-render-to-string": "^6.5.13",
-    "pretty-bytes": "^6.1.1",
+    "pretty-bytes": "^7.0.0",
     "pretty-time": "^1.1.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
@@ -81,13 +82,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",
@@ -96,21 +97,21 @@
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.3",
     "workerpool": "^9.2.0",
-    "ws": "^8.18.1",
+    "ws": "^8.18.2",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.13.14",
+    "@types/node": "^22.15.7",
     "@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",
+    "esbuild": "^0.25.3",
     "prettier": "^3.5.3",
-    "tsx": "^4.19.3",
+    "tsx": "^4.19.4",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.3"
   }
 }

quartz.config.ts

@@ -88,6 +88,7 @@ const config: QuartzConfig = {
       }),
       Plugin.Assets(),
       Plugin.Static(),
+      Plugin.Favicon(),
       Plugin.NotFoundPage(),
       // Comment out CustomOgImages to speed up build time
       Plugin.CustomOgImages(),

quartz.layout.ts

@@ -34,6 +34,7 @@ export const defaultContentPageLayout: PageLayout = {
           grow: true,
         },
         { Component: Component.Darkmode() },
+        { Component: Component.ReaderMode() },
       ],
     }),
     Component.Explorer(),

quartz/cli/handlers.js

@@ -589,7 +589,8 @@ export async function handleSync(argv) {
   await popContentFolder(contentFolder)
   if (argv.push) {
     console.log("Pushing your changes")
-    const res = spawnSync("git", ["push", "-uf", ORIGIN_NAME, QUARTZ_SOURCE_BRANCH], {
+    const currentBranch = execSync("git rev-parse --abbrev-ref HEAD").toString().trim()
+    const res = spawnSync("git", ["push", "-uf", ORIGIN_NAME, currentBranch], {
       stdio: "inherit",
     })
     if (res.status !== 0) {

quartz/components/ReaderMode.tsx

@@ -0,0 +1,38 @@
+// @ts-ignore
+import readerModeScript from "./scripts/readermode.inline"
+import styles from "./styles/readermode.scss"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { i18n } from "../i18n"
+import { classNames } from "../util/lang"
+
+const ReaderMode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+  return (
+    <button class={classNames(displayClass, "readermode")}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        class="readerIcon"
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width="0.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        width="64px"
+        height="64px"
+        viewBox="0 0 24 24"
+        aria-label={i18n(cfg.locale).components.readerMode.title}
+      >
+        <title>{i18n(cfg.locale).components.readerMode.title}</title>
+        <g transform="translate(-1.8, -1.8) scale(1.15, 1.2)">
+          <path d="M8.9891247,2.5 C10.1384702,2.5 11.2209868,2.96705384 12.0049645,3.76669482 C12.7883914,2.96705384 13.8709081,2.5 15.0202536,2.5 L18.7549359,2.5 C19.1691495,2.5 19.5049359,2.83578644 19.5049359,3.25 L19.5046891,4.004 L21.2546891,4.00457396 C21.6343849,4.00457396 21.9481801,4.28672784 21.9978425,4.6528034 L22.0046891,4.75457396 L22.0046891,20.25 C22.0046891,20.6296958 21.7225353,20.943491 21.3564597,20.9931534 L21.2546891,21 L2.75468914,21 C2.37499337,21 2.06119817,20.7178461 2.01153575,20.3517706 L2.00468914,20.25 L2.00468914,4.75457396 C2.00468914,4.37487819 2.28684302,4.061083 2.65291858,4.01142057 L2.75468914,4.00457396 L4.50368914,4.004 L4.50444233,3.25 C4.50444233,2.87030423 4.78659621,2.55650904 5.15267177,2.50684662 L5.25444233,2.5 L8.9891247,2.5 Z M4.50368914,5.504 L3.50468914,5.504 L3.50468914,19.5 L10.9478955,19.4998273 C10.4513189,18.9207296 9.73864328,18.5588115 8.96709342,18.5065584 L8.77307039,18.5 L5.25444233,18.5 C4.87474657,18.5 4.56095137,18.2178461 4.51128895,17.8517706 L4.50444233,17.75 L4.50368914,5.504 Z M19.5049359,17.75 C19.5049359,18.1642136 19.1691495,18.5 18.7549359,18.5 L15.2363079,18.5 C14.3910149,18.5 13.5994408,18.8724714 13.0614828,19.4998273 L20.5046891,19.5 L20.5046891,5.504 L19.5046891,5.504 L19.5049359,17.75 Z M18.0059359,3.999 L15.0202536,4 L14.8259077,4.00692283 C13.9889509,4.06666544 13.2254227,4.50975805 12.7549359,5.212 L12.7549359,17.777 L12.7782651,17.7601316 C13.4923805,17.2719483 14.3447024,17 15.2363079,17 L18.0059359,16.999 L18.0056891,4.798 L18.0033792,4.75457396 L18.0056891,4.71 L18.0059359,3.999 Z M8.9891247,4 L6.00368914,3.999 L6.00599909,4.75457396 L6.00599909,4.75457396 L6.00368914,4.783 L6.00368914,16.999 L8.77307039,17 C9.57551536,17 10.3461406,17.2202781 11.0128313,17.6202194 L11.2536891,17.776 L11.2536891,5.211 C10.8200889,4.56369974 10.1361548,4.13636104 9.37521067,4.02745763 L9.18347055,4.00692283 L8.9891247,4 Z" />
+        </g>
+      </svg>
+    </button>
+  )
+}
+
+ReaderMode.beforeDOMLoaded = readerModeScript
+ReaderMode.css = styles
+
+export default (() => ReaderMode) satisfies QuartzComponentConstructor

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,

quartz/components/pages/TagContent.tsx

@@ -115,8 +115,8 @@ export default ((opts?: Partial<TagContentOptions>) => {
       }
 
       return (
-        <div class={classes}>
+        <div class="popover-hint">
-          <article class="popover-hint">{content}</article>
+          <article class={classes}>{content}</article>
           <div class="page-listing">
             <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
             <div>

quartz/components/renderPage.tsx

@@ -75,7 +75,7 @@ function renderTranscludes(
       const classNames = (node.properties?.className ?? []) as string[]
       if (classNames.includes("transclude")) {
         const inner = node.children[0] as Element
-        const transcludeTarget = inner.properties["data-slug"] as FullSlug
+        const transcludeTarget = (inner.properties["data-slug"] ?? slug) as FullSlug
         const page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
         if (!page) {
           return

quartz/components/scripts/callout.inline.ts

@@ -1,25 +1,10 @@
 function toggleCallout(this: HTMLElement) {
   const outerBlock = this.parentElement!
   outerBlock.classList.toggle("is-collapsed")
+  const content = outerBlock.getElementsByClassName("callout-content")[0] as HTMLElement
+  if (!content) return
   const collapsed = outerBlock.classList.contains("is-collapsed")
-  const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight
+  content.style.gridTemplateRows = collapsed ? "0fr" : "1fr"
-  outerBlock.style.maxHeight = height + "px"
-
-  // walk and adjust height of all parents
-  let current = outerBlock
-  let parent = outerBlock.parentElement
-  while (parent) {
-    if (!parent.classList.contains("callout")) {
-      return
-    }
-
-    const collapsed = parent.classList.contains("is-collapsed")
-    const height = collapsed ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight
-    parent.style.maxHeight = height + "px"
-
-    current = parent
-    parent = parent.parentElement
-  }
 }
 
 function setupCallout() {
@@ -27,15 +12,15 @@ function setupCallout() {
     `callout is-collapsible`,
   ) as HTMLCollectionOf<HTMLElement>
   for (const div of collapsible) {
-    const title = div.firstElementChild
+    const title = div.getElementsByClassName("callout-title")[0] as HTMLElement
-    if (!title) continue
+    const content = div.getElementsByClassName("callout-content")[0] as HTMLElement
+    if (!title || !content) continue
 
     title.addEventListener("click", toggleCallout)
     window.addCleanup(() => title.removeEventListener("click", toggleCallout))
 
     const collapsed = div.classList.contains("is-collapsed")
-    const height = collapsed ? title.scrollHeight : div.scrollHeight
+    content.style.gridTemplateRows = collapsed ? "0fr" : "1fr"
-    div.style.maxHeight = height + "px"
   }
 }
 

quartz/components/scripts/explorer.inline.ts

@@ -23,11 +23,18 @@ let currentExplorerState: Array<FolderState>
 function toggleExplorer(this: HTMLElement) {
   const nearestExplorer = this.closest(".explorer") as HTMLElement
   if (!nearestExplorer) return
-  nearestExplorer.classList.toggle("collapsed")
+  const explorerCollapsed = nearestExplorer.classList.toggle("collapsed")
   nearestExplorer.setAttribute(
     "aria-expanded",
     nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true",
   )
+
+  if (!explorerCollapsed) {
+    // Stop <html> from being scrollable when mobile explorer is open
+    document.documentElement.classList.add("mobile-no-scroll")
+  } else {
+    document.documentElement.classList.remove("mobile-no-scroll")
+  }
 }
 
 function toggleFolder(evt: MouseEvent) {
@@ -270,12 +277,25 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     if (mobileExplorer.checkVisibility()) {
       explorer.classList.add("collapsed")
       explorer.setAttribute("aria-expanded", "false")
+
+      // Allow <html> to be scrollable when mobile explorer is collapsed
+      document.documentElement.classList.remove("mobile-no-scroll")
     }
 
     mobileExplorer.classList.remove("hide-until-loaded")
   }
 })
 
+window.addEventListener("resize", function () {
+  // Desktop explorer opens by default, and it stays open when the window is resized
+  // to mobile screen size. Applies `no-scroll` to <html> in this edge case.
+  const explorer = document.querySelector(".explorer")
+  if (explorer && !explorer.classList.contains("collapsed")) {
+    document.documentElement.classList.add("mobile-no-scroll")
+    return
+  }
+})
+
 function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
   return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
 }

quartz/components/scripts/graph.inline.ts

@@ -68,6 +68,30 @@ type TweenNode = {
   stop: () => void
 }
 
+// workaround for pixijs webgpu issue: https://github.com/pixijs/pixijs/issues/11389
+async function determineGraphicsAPI(): Promise<"webgpu" | "webgl"> {
+  const adapter = await navigator.gpu?.requestAdapter().catch(() => null)
+  const device = adapter && (await adapter.requestDevice().catch(() => null))
+  if (!device) {
+    return "webgl"
+  }
+
+  const canvas = document.createElement("canvas")
+  const gl =
+    (canvas.getContext("webgl2") as WebGL2RenderingContext | null) ??
+    (canvas.getContext("webgl") as WebGLRenderingContext | null)
+
+  // we have to return webgl so pixijs automatically falls back to canvas
+  if (!gl) {
+    return "webgl"
+  }
+
+  const webglMaxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS)
+  const webgpuMaxTextures = device.limits.maxSampledTexturesPerShaderStage
+
+  return webglMaxTextures === webgpuMaxTextures ? "webgpu" : "webgl"
+}
+
 async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
   const slug = simplifySlug(fullSlug)
   const visited = getVisited()
@@ -349,6 +373,7 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
   tweens.forEach((tween) => tween.stop())
   tweens.clear()
 
+  const pixiPreference = await determineGraphicsAPI()
   const app = new Application()
   await app.init({
     width,
@@ -357,7 +382,7 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
     autoStart: false,
     autoDensity: true,
     backgroundAlpha: 0,
-    preference: "webgpu",
+    preference: pixiPreference,
     resolution: window.devicePixelRatio,
     eventMode: "static",
   })

quartz/components/scripts/popover.inline.ts

@@ -1,18 +1,15 @@
 import { computePosition, flip, inline, shift } from "@floating-ui/dom"
 import { normalizeRelativeURLs } from "../../util/path"
 import { fetchCanonical } from "./util"
-import { randomIdNonSecure } from "../../util/random"
 
 const p = new DOMParser()
+let activeAnchor: HTMLAnchorElement | null = null
 
 async function mouseEnterHandler(
   this: HTMLAnchorElement,
   { clientX, clientY }: { clientX: number; clientY: number },
 ) {
-  clearActivePopover()
+  const link = (activeAnchor = this)
-
-  const link = this
-  const id = randomIdNonSecure()
   if (link.dataset.noPopover === "true") {
     return
   }
@@ -27,44 +24,49 @@ async function mouseEnterHandler(
     })
   }
 
-  const prevPopoverElement = document.getElementById(`popover-${id}`)
+  function showPopover(popoverElement: HTMLElement) {
-  const hasAlreadyBeenFetched = () => !!document.getElementById(`popover-${id}`)
+    clearActivePopover()
+    popoverElement.classList.add("active-popover")
+    setPosition(popoverElement as HTMLElement)
 
-  // dont refetch if there's already a popover
+    if (hash !== "") {
-  if (hasAlreadyBeenFetched()) {
+      const targetAnchor = `#popover-internal-${hash.slice(1)}`
-    setPosition(prevPopoverElement as HTMLElement)
+      const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
-    prevPopoverElement?.classList.add("active-popover")
+      if (heading) {
-    return
+        // 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)
+
+  // dont refetch if there's already a popover
+  if (!!document.getElementById(popoverId)) {
+    showPopover(prevPopoverElement as HTMLElement)
+    return
+  }
 
   const response = await fetchCanonical(targetUrl).catch((err) => {
     console.error(err)
   })
 
-  // bailout if another popover exists
-  if (hasAlreadyBeenFetched()) {
-    return
-  }
-
   if (!response) return
   const [contentType] = response.headers.get("Content-Type")!.split(";")
   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":
@@ -100,35 +102,29 @@ async function mouseEnterHandler(
       elts.forEach((elt) => popoverInner.appendChild(elt))
   }
 
-  setPosition(popoverElement)
+  if (!!document.getElementById(popoverId)) {
-  popoverElement.id = `popover-${id}`
+    return
-  popoverElement.classList.add("active-popover")
-  document.body.appendChild(popoverElement)
-
-  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" })
-    }
   }
+
+  document.body.appendChild(popoverElement)
+  if (activeAnchor !== this) {
+    return
+  }
+
+  showPopover(popoverElement)
 }
 
 function clearActivePopover() {
+  activeAnchor = null
   const allPopoverElements = document.querySelectorAll(".popover")
-  if (allPopoverElements) {
+  allPopoverElements.forEach((popoverElement) => popoverElement.classList.remove("active-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("mouseleave", clearActivePopover)
     link.addEventListener("mouseenter", mouseEnterHandler)
+    link.addEventListener("mouseleave", clearActivePopover)
     window.addCleanup(() => {
       link.removeEventListener("mouseenter", mouseEnterHandler)
       link.removeEventListener("mouseleave", clearActivePopover)

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")
+})

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}${
+    itemTile.innerHTML = `
-      enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
+      <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()

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;
 

quartz/components/styles/explorer.scss

@@ -263,22 +263,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   }
 }
 
-.no-scroll {
+.mobile-no-scroll {
-  opacity: 0;
+  @media all and ($mobile) {
-  overflow: hidden;
+    overflow: hidden;
-}
-
-html:has(.no-scroll) {
-  overflow: hidden;
-}
-
-@media all and not ($mobile) {
-  .no-scroll {
-    opacity: 1 !important;
-    overflow: auto !important;
-  }
-
-  html:has(.no-scroll) {
-    overflow: auto !important;
   }
 }

quartz/components/styles/readermode.scss

@@ -0,0 +1,34 @@
+.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);
+    fill: var(--darkgray);
+    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;
+    }
+  }
+}

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;

quartz/i18n/locales/ar-SA.ts

@@ -32,6 +32,9 @@ export default {
     explorer: {
       title: "المستعرض",
     },
+    readerMode: {
+      title: "وضع القارئ",
+    },
     footer: {
       createdWith: "أُنشئ باستخدام",
     },

quartz/i18n/locales/ca-ES.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Mode clar",
       darkMode: "Mode fosc",
     },
+    readerMode: {
+      title: "Mode lector",
+    },
     explorer: {
       title: "Explorador",
     },

quartz/i18n/locales/cs-CZ.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Světlý režim",
       darkMode: "Tmavý režim",
     },
+    readerMode: {
+      title: "Režim čtečky",
+    },
     explorer: {
       title: "Procházet",
     },

quartz/i18n/locales/de-DE.ts

@@ -26,8 +26,11 @@ export default {
       noBacklinksFound: "Keine Backlinks gefunden",
     },
     themeToggle: {
-      lightMode: "Light Mode",
+      lightMode: "Heller Modus",
-      darkMode: "Dark Mode",
+      darkMode: "Dunkler Modus",
+    },
+    readerMode: {
+      title: "Lesemodus",
     },
     explorer: {
       title: "Explorer",

quartz/i18n/locales/definition.ts

@@ -31,6 +31,9 @@ export interface Translation {
       lightMode: string
       darkMode: string
     }
+    readerMode: {
+      title: string
+    }
     explorer: {
       title: string
     }

quartz/i18n/locales/en-GB.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Light mode",
       darkMode: "Dark mode",
     },
+    readerMode: {
+      title: "Reader mode",
+    },
     explorer: {
       title: "Explorer",
     },

quartz/i18n/locales/en-US.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Light mode",
       darkMode: "Dark mode",
     },
+    readerMode: {
+      title: "Reader mode",
+    },
     explorer: {
       title: "Explorer",
     },

quartz/i18n/locales/es-ES.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Modo claro",
       darkMode: "Modo oscuro",
     },
+    readerMode: {
+      title: "Modo lector",
+    },
     explorer: {
       title: "Explorador",
     },

quartz/i18n/locales/fa-IR.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "حالت روشن",
       darkMode: "حالت تاریک",
     },
+    readerMode: {
+      title: "حالت خواندن",
+    },
     explorer: {
       title: "مطالب",
     },

quartz/i18n/locales/fi-FI.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Vaalea tila",
       darkMode: "Tumma tila",
     },
+    readerMode: {
+      title: "Lukijatila",
+    },
     explorer: {
       title: "Selain",
     },

quartz/i18n/locales/fr-FR.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Mode clair",
       darkMode: "Mode sombre",
     },
+    readerMode: {
+      title: "Mode lecture",
+    },
     explorer: {
       title: "Explorateur",
     },

quartz/i18n/locales/hu-HU.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Világos mód",
       darkMode: "Sötét mód",
     },
+    readerMode: {
+      title: "Olvasó mód",
+    },
     explorer: {
       title: "Fájlböngésző",
     },

quartz/i18n/locales/it-IT.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Tema chiaro",
       darkMode: "Tema scuro",
     },
+    readerMode: {
+      title: "Modalità lettura",
+    },
     explorer: {
       title: "Esplora",
     },

quartz/i18n/locales/ja-JP.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "ライトモード",
       darkMode: "ダークモード",
     },
+    readerMode: {
+      title: "リーダーモード",
+    },
     explorer: {
       title: "エクスプローラー",
     },

quartz/i18n/locales/ko-KR.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "라이트 모드",
       darkMode: "다크 모드",
     },
+    readerMode: {
+      title: "리더 모드",
+    },
     explorer: {
       title: "탐색기",
     },

quartz/i18n/locales/lt-LT.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Šviesus Režimas",
       darkMode: "Tamsus Režimas",
     },
+    readerMode: {
+      title: "Modalità lettore",
+    },
     explorer: {
       title: "Naršyklė",
     },

quartz/i18n/locales/nb-NO.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Lys modus",
       darkMode: "Mørk modus",
     },
+    readerMode: {
+      title: "Læsemodus",
+    },
     explorer: {
       title: "Utforsker",
     },

quartz/i18n/locales/nl-NL.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Lichte modus",
       darkMode: "Donkere modus",
     },
+    readerMode: {
+      title: "Leesmodus",
+    },
     explorer: {
       title: "Verkenner",
     },

quartz/i18n/locales/pl-PL.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Trzyb jasny",
       darkMode: "Tryb ciemny",
     },
+    readerMode: {
+      title: "Tryb czytania",
+    },
     explorer: {
       title: "Przeglądaj",
     },

quartz/i18n/locales/pt-BR.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Tema claro",
       darkMode: "Tema escuro",
     },
+    readerMode: {
+      title: "Modo leitor",
+    },
     explorer: {
       title: "Explorador",
     },

quartz/i18n/locales/ro-RO.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Modul luminos",
       darkMode: "Modul întunecat",
     },
+    readerMode: {
+      title: "Modul de citire",
+    },
     explorer: {
       title: "Explorator",
     },

quartz/i18n/locales/ru-RU.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Светлый режим",
       darkMode: "Тёмный режим",
     },
+    readerMode: {
+      title: "Режим чтения",
+    },
     explorer: {
       title: "Проводник",
     },

quartz/i18n/locales/th-TH.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "โหมดสว่าง",
       darkMode: "โหมดมืด",
     },
+    readerMode: {
+      title: "โหมดอ่าน",
+    },
     explorer: {
       title: "รายการหน้า",
     },

quartz/i18n/locales/tr-TR.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Açık mod",
       darkMode: "Koyu mod",
     },
+    readerMode: {
+      title: "Okuma modu",
+    },
     explorer: {
       title: "Gezgin",
     },

quartz/i18n/locales/uk-UA.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Світлий режим",
       darkMode: "Темний режим",
     },
+    readerMode: {
+      title: "Режим читання",
+    },
     explorer: {
       title: "Провідник",
     },

quartz/i18n/locales/vi-VN.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "Sáng",
       darkMode: "Tối",
     },
+    readerMode: {
+      title: "Chế độ đọc",
+    },
     explorer: {
       title: "Trong bài này",
     },

quartz/i18n/locales/zh-CN.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "亮色模式",
       darkMode: "暗色模式",
     },
+    readerMode: {
+      title: "阅读模式",
+    },
     explorer: {
       title: "探索",
     },

quartz/i18n/locales/zh-TW.ts

@@ -29,6 +29,9 @@ export default {
       lightMode: "亮色模式",
       darkMode: "暗色模式",
     },
+    readerMode: {
+      title: "閱讀模式",
+    },
     explorer: {
       title: "探索",
     },

quartz/plugins/emitters/componentResources.ts

@@ -128,14 +128,8 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso
       const umamiScript = document.createElement("script");
       umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js";
       umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}");
-      umamiScript.setAttribute("data-auto-track", "false");
+      umamiScript.setAttribute("data-auto-track", "true");
       umamiScript.defer = true;
-      umamiScript.onload = () => {
-        umami.track();
-        document.addEventListener("nav", () => {
-          umami.track();
-        });
-      };
 
       document.head.appendChild(umamiScript);
     `)

quartz/plugins/emitters/favicon.ts

@@ -0,0 +1,22 @@
+import sharp from "sharp"
+import { joinSegments, QUARTZ, FullSlug } from "../../util/path"
+import { QuartzEmitterPlugin } from "../types"
+import { write } from "./helpers"
+import { BuildCtx } from "../../util/ctx"
+
+export const Favicon: QuartzEmitterPlugin = () => ({
+  name: "Favicon",
+  async *emit({ argv }) {
+    const iconPath = joinSegments(QUARTZ, "static", "icon.png")
+
+    const faviconContent = sharp(iconPath).resize(48, 48).toFormat("png")
+
+    yield write({
+      ctx: { argv } as BuildCtx,
+      slug: "favicon" as FullSlug,
+      ext: ".ico",
+      content: faviconContent,
+    })
+  },
+  async *partialEmit() {},
+})

quartz/plugins/emitters/index.ts

@@ -5,6 +5,7 @@ export { ContentIndex as ContentIndex } from "./contentIndex"
 export { AliasRedirects } from "./aliases"
 export { Assets } from "./assets"
 export { Static } from "./static"
+export { Favicon } from "./favicon"
 export { ComponentResources } from "./componentResources"
 export { NotFoundPage } from "./404"
 export { CNAME } from "./cname"

quartz/plugins/transformers/ofm.ts

@@ -191,7 +191,8 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
           const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture
 
           const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
-          const displayAnchor = anchor ? `#${anchor.trim().replace(/^#+/, "")}` : ""
+          const blockRef = Boolean(rawHeader?.startsWith("#^")) ? "^" : ""
+          const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
           const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
           const embedDisplay = value.startsWith("!") ? "!" : ""
 
@@ -221,7 +222,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                 let [rawFp, rawHeader, rawAlias] = capture
                 const fp = rawFp?.trim() ?? ""
                 const anchor = rawHeader?.trim() ?? ""
-                const alias = rawAlias?.slice(1).trim()
+                const alias: string | undefined = rawAlias?.slice(1).trim()
 
                 // embed cases
                 if (value.startsWith("!")) {
@@ -463,6 +464,30 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                   })
                 }
 
+                // For the rest of the MD callout elements other than the title, wrap them with
+                // two nested HTML <div>s (use some hacked mdhast component to achieve this) of
+                // class `callout-content` and `callout-content-inner` respectively for
+                // grid-based collapsible animation.
+                if (calloutContent.length > 0) {
+                  node.children = [
+                    node.children[0],
+                    {
+                      data: { hProperties: { className: ["callout-content"] }, hName: "div" },
+                      type: "blockquote",
+                      children: [
+                        {
+                          data: {
+                            hProperties: { className: ["callout-content-inner"] },
+                            hName: "div",
+                          },
+                          type: "blockquote",
+                          children: [...calloutContent],
+                        },
+                      ],
+                    },
+                  ]
+                }
+
                 // replace first line of blockquote with title and rest of the paragraph text
                 node.children.splice(0, 1, ...blockquoteContent)
 
@@ -484,21 +509,6 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                     "data-callout-metadata": calloutMetaData,
                   },
                 }
-
-                // Add callout-content class to callout body if it has one.
-                if (calloutContent.length > 0) {
-                  const contentData: BlockContent | DefinitionContent = {
-                    data: {
-                      hProperties: {
-                        className: "callout-content",
-                      },
-                      hName: "div",
-                    },
-                    type: "blockquote",
-                    children: [...calloutContent],
-                  }
-                  node.children = [node.children[0], contentData]
-                }
               }
             })
           }

quartz/styles/callouts.scss

@@ -7,11 +7,19 @@
   border-radius: 5px;
   padding: 0 1rem;
   overflow-y: hidden;
-  transition: max-height 0.3s ease;
   box-sizing: border-box;
 
-  & > .callout-content > :first-child {
+  & > .callout-content {
-    margin-top: 0;
+    display: grid;
+    transition: grid-template-rows 0.3s ease;
+
+    & > .callout-content-inner {
+      overflow: hidden;
+
+      & > :first-child {
+        margin-top: 0;
+      }
+    }
   }
 
   --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');

quartz/util/theme.ts

@@ -107,6 +107,13 @@ export interface GoogleFontFile {
   extension: string
 }
 
+const fontMimeMap: Record<string, string> = {
+  truetype: "ttf",
+  woff: "woff",
+  woff2: "woff2",
+  opentype: "otf",
+}
+
 export async function processGoogleFonts(
   stylesheet: string,
   baseUrl: string,
@@ -114,14 +121,16 @@ export async function processGoogleFonts(
   processedStylesheet: string
   fontFiles: GoogleFontFile[]
 }> {
-  const fontSourceRegex = /url\((https:\/\/fonts.gstatic.com\/s\/[^)]+\.(woff2|ttf))\)/g
+  const fontSourceRegex =
+    /url\((https:\/\/fonts.gstatic.com\/.+(?:\/|(?:kit=))(.+?)[.&].+?)\)\sformat\('(\w+?)'\);/g
   const fontFiles: GoogleFontFile[] = []
   let processedStylesheet = stylesheet
 
   let match
   while ((match = fontSourceRegex.exec(stylesheet)) !== null) {
     const url = match[1]
-    const [filename, extension] = url.split("/").pop()!.split(".")
+    const filename = match[2]
+    const extension = fontMimeMap[match[3].toLowerCase()]
     const staticUrl = `https://${baseUrl}/static/fonts/${filename}.${extension}`
 
     processedStylesheet = processedStylesheet.replace(url, staticUrl)