fix(explorer): Prevent html from being scrollable when mobile explorer is open (#1895)

* Fixed html page being scrollable when mobile explorer is open

* Prettier code

* Addressed comment

.github/workflows/preview.yaml

@@ -0,0 +1,46 @@
+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: Publish 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
+          directory: public

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

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-lock.json

@@ -9,11 +9,12 @@
       "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",
         "@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",
@@ -80,7 +81,7 @@
         "@types/d3": "^7.4.3",
         "@types/hast": "^3.0.4",
         "@types/js-yaml": "^4.0.9",
-        "@types/node": "^22.14.0",
+        "@types/node": "^22.14.1",
         "@types/pretty-time": "^1.1.5",
         "@types/source-map-support": "^0.5.10",
         "@types/ws": "^8.18.1",
@@ -178,21 +179,22 @@
       }
     },
     "node_modules/@clack/core": {
-      "version": "0.4.1",
+      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.2.tgz",
-      "integrity": "sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==",
+      "integrity": "sha512-NYQfcEy8MWIxrT5Fj8nIVchfRFA26yYKJcvBS7WlUIlw2OmQOY9DhGGXMovyI5J5PpxrCPGkgUi207EBrjpBvg==",
+      "license": "MIT",
       "dependencies": {
         "picocolors": "^1.0.0",
         "sisteransi": "^1.0.5"
       }
     },
     "node_modules/@clack/prompts": {
-      "version": "0.10.0",
+      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.10.1.tgz",
-      "integrity": "sha512-H3rCl6CwW1NdQt9rE3n373t7o5cthPv7yUoxF2ytZvyvlJv89C5RYMJu83Hed8ODgys5vpBU0GKxIRG83jd8NQ==",
+      "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"
       }
@@ -1940,9 +1942,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.14.0",
+      "version": "22.14.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
-      "integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==",
+      "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2000,9 +2002,9 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/@webgpu/types": {
-      "version": "0.1.44",
+      "version": "0.1.60",
-      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.44.tgz",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz",
-      "integrity": "sha512-JDpYJN5E/asw84LTYhKyvPpxGnD+bAKPtpW9Ilurf7cZpxaTbxkQcGwOd7jgB9BPBrTYQ+32ufo4HiuomTjHNQ==",
+      "integrity": "sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@xmldom/xmldom": {
@@ -5503,7 +5505,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",
@@ -6702,7 +6705,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",

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",
     "@myriaddreamin/rehype-typst": "^0.5.4",
     "@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",
@@ -103,7 +104,7 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.14.0",
+    "@types/node": "^22.14.1",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.18.1",

quartz.config.ts

@@ -86,6 +86,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

@@ -35,6 +35,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,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

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/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,15 @@ type TweenNode = {
   stop: () => void
 }
 
+async function determineGraphicsAPI(): Promise<"webgpu" | "webgl"> {
+  const adapter = await navigator.gpu?.requestAdapter().catch(() => null)
+  if (!adapter) {
+    return "webgl"
+  }
+  // Devices with WebGPU but no float32-blendable feature fail to render the graph
+  return adapter.features.has("float32-blendable") ? "webgpu" : "webgl"
+}
+
 async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
   const slug = simplifySlug(fullSlug)
   const visited = getVisited()
@@ -349,6 +358,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 +367,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

@@ -3,12 +3,13 @@ import { normalizeRelativeURLs } from "../../util/path"
 import { fetchCanonical } from "./util"
 
 const p = new DOMParser()
+let activeAnchor: HTMLAnchorElement | null = null
 
 async function mouseEnterHandler(
   this: HTMLAnchorElement,
   { clientX, clientY }: { clientX: number; clientY: number },
 ) {
-  const link = this
+  const link = (activeAnchor = this)
   if (link.dataset.noPopover === "true") {
     return
   }
@@ -44,10 +45,9 @@ async function mouseEnterHandler(
   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()) {
+  if (!!document.getElementById(popoverId)) {
     showPopover(prevPopoverElement as HTMLElement)
     return
   }
@@ -56,11 +56,6 @@ async function mouseEnterHandler(
     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("/")
@@ -107,11 +102,20 @@ async function mouseEnterHandler(
       elts.forEach((elt) => popoverInner.appendChild(elt))
   }
 
+  if (!!document.getElementById(popoverId)) {
+    return
+  }
+
   document.body.appendChild(popoverElement)
+  if (activeAnchor !== this) {
+    return
+  }
+
   showPopover(popoverElement)
 }
 
 function clearActivePopover() {
+  activeAnchor = null
   const allPopoverElements = document.querySelectorAll(".popover")
   allPopoverElements.forEach((popoverElement) => popoverElement.classList.remove("active-popover"))
 }

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/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,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;
+    }
+  }
+}

quartz/plugins/emitters/favicon.ts

@@ -0,0 +1,16 @@
+import sharp from "sharp"
+import { joinSegments, QUARTZ, FilePath } from "../../util/path"
+import { QuartzEmitterPlugin } from "../types"
+
+export const Favicon: QuartzEmitterPlugin = () => ({
+  name: "Favicon",
+  async *emit({ argv }) {
+    const iconPath = joinSegments(QUARTZ, "static", "icon.png")
+    const dest = joinSegments(argv.output, "favicon.ico") as FilePath
+
+    await sharp(iconPath).resize(48, 48).toFormat("png").toFile(dest)
+
+    yield dest
+  },
+  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>');