Merge branch 'v4' of https://github.com/jackyzha0/quartz

2026-03-24 23:15:46 -05:00 · 2024-02-19 17:20:47 -06:00 · 2024-02-19 17:20:47 -06:00 · b9d96ca644
commit b9d96ca644
parent 598b9a1c33 b6cf3df84f
47 changed files with 695 additions and 157 deletions
--- a/docs/advanced/making
+++ b/docs/advanced/making
@ -84,10 +84,10 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
    externalResources() {
      if (engine === "katex") {
        return {
-          css: ["https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"],
+          css: ["https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css"],
          js: [
            {
-              src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
+              src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/copy-tex.min.js",
              loadTime: "afterDOMReady",
              contentType: "external",
            },
--- a/docs/features/popover
+++ b/docs/features/popover
@ -8,6 +8,8 @@ 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.
+
 ## Configuration

 - Remove popovers: set the `enablePopovers` field in `quartz.config.ts` to be `false`.
--- a/docs/hosting.md
+++ b/docs/hosting.md
@ -30,7 +30,7 @@ Press "Save and deploy" and Cloudflare should have a deployed version of your si
 To add a custom domain, check out [Cloudflare's documentation](https://developers.cloudflare.com/pages/platform/custom-domains/).

 > [!warning]
-> Cloudflare Pages only allows shallow `git` clones so if you rely on `git` for timestamps, it is recommended you either add dates to your frontmatter (see [[authoring content#Syntax]]) or use another hosting provider.
+> Cloudflare Pages performs a shallow clone by default, so if you rely on `git` for timestamps, it is recommended that you add `git fetch --unshallow &&` to the beginning of the build command (e.g., `git fetch --unshallow && npx quartz build`).

 ## GitHub Pages

@ -228,3 +228,25 @@ pages:
 When `.gitlab-ci.yaml` is committed, GitLab will build and deploy the website as a GitLab Page. You can find the url under `Deploy > Pages` in the sidebar.

 By default, the page is private and only visible when logged in to a GitLab account with access to the repository but can be opened in the settings under `Deploy` -> `Pages`.
+
+## Self-Hosting
+
+Copy the `public` directory to your web server and configure it to serve the files. You can use any web server to host your site. Since Quartz generates links that do not include the `.html` extension, you need to let your web server know how to deal with it.
+
+### Using Nginx
+
+Here's an example of how to do this with Nginx:
+
+```nginx title="nginx.conf"
+server {
+    listen 80;
+    server_name example.com;
+    root /path/to/quartz/public;
+    index index.html;
+    error_page 404 /404.html;
+
+    location / {
+        try_files $uri $uri.html $uri/ =404;
+    }
+}
+```
--- a/package-lock.json
+++ b/package-lock.json
@ -10,7 +10,7 @@
      "license": "MIT",
      "dependencies": {
        "@clack/prompts": "^0.7.0",
-        "@floating-ui/dom": "^1.6.1",
+        "@floating-ui/dom": "^1.6.3",
        "@napi-rs/simple-git": "0.1.16",
        "async-mutex": "^0.4.1",
        "chalk": "^5.3.0",
@ -20,7 +20,7 @@
        "esbuild-sass-plugin": "^2.16.1",
        "flexsearch": "0.7.43",
        "github-slugger": "^2.0.0",
-        "globby": "^14.0.0",
+        "globby": "^14.0.1",
        "gray-matter": "^4.0.3",
        "hast-util-to-html": "^9.0.0",
        "hast-util-to-jsx-runtime": "^2.3.0",
@ -32,7 +32,7 @@
        "mdast-util-to-hast": "^13.1.0",
        "mdast-util-to-string": "^4.0.0",
        "micromorph": "^0.4.5",
-        "preact": "^10.19.3",
+        "preact": "^10.19.5",
        "preact-render-to-string": "^6.3.1",
        "pretty-bytes": "^6.1.1",
        "pretty-time": "^1.1.0",
@ -73,14 +73,14 @@
        "@types/d3": "^7.4.3",
        "@types/hast": "^3.0.4",
        "@types/js-yaml": "^4.0.9",
-        "@types/node": "^20.11.16",
+        "@types/node": "^20.11.19",
        "@types/pretty-time": "^1.1.5",
        "@types/source-map-support": "^0.5.10",
        "@types/ws": "^8.5.10",
        "@types/yargs": "^17.0.32",
        "esbuild": "^0.19.9",
        "prettier": "^3.2.4",
-        "tsx": "^4.7.0",
+        "tsx": "^4.7.1",
        "typescript": "^5.3.3"
      },
      "engines": {
@ -486,12 +486,12 @@
      }
    },
    "node_modules/@floating-ui/dom": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
-      "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
      "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.1"
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
      }
    },
    "node_modules/@floating-ui/utils": {
@ -743,9 +743,9 @@
      }
    },
    "node_modules/@sindresorhus/merge-streams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-1.0.0.tgz",
-      "integrity": "sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
      "engines": {
        "node": ">=18"
      },
@ -1088,9 +1088,9 @@
      }
    },
    "node_modules/@types/node": {
-      "version": "20.11.16",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.16.tgz",
-      "integrity": "sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==",
+      "version": "20.11.19",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.19.tgz",
+      "integrity": "sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==",
      "dev": true,
      "dependencies": {
        "undici-types": "~5.26.4"
@ -2301,11 +2301,11 @@
      }
    },
    "node_modules/globby": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.0.tgz",
-      "integrity": "sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.1.tgz",
+      "integrity": "sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==",
      "dependencies": {
-        "@sindresorhus/merge-streams": "^1.0.0",
+        "@sindresorhus/merge-streams": "^2.1.0",
        "fast-glob": "^3.3.2",
        "ignore": "^5.2.4",
        "path-type": "^5.0.0",
@ -4454,9 +4454,9 @@
      }
    },
    "node_modules/preact": {
-      "version": "10.19.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
-      "integrity": "sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==",
+      "version": "10.19.5",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.5.tgz",
+      "integrity": "sha512-OPELkDmSVbKjbFqF9tgvOowiiQ9TmsJljIzXRyNE8nGiis94pwv1siF78rQkAP1Q1738Ce6pellRg/Ns/CtHqQ==",
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/preact"
@ -5647,9 +5647,9 @@
      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
    },
    "node_modules/tsx": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.7.0.tgz",
-      "integrity": "sha512-I+t79RYPlEYlHn9a+KzwrvEwhJg35h/1zHsLC2JXvhC2mdynMv6Zxzvhv5EMV6VF5qJlLlkSnMVvdZV3PSIGcg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.7.1.tgz",
+      "integrity": "sha512-8d6VuibXHtlN5E3zFkgY8u4DX7Y3Z27zvvPKVmLon/D4AjuKzarkUBTLDBgj9iTQ0hg5xM7c/mYiRVM+HETf0g==",
      "dev": true,
      "dependencies": {
        "esbuild": "~0.19.10",
--- a/package.json
+++ b/package.json
@ -40,7 +40,7 @@
  },
  "dependencies": {
    "@clack/prompts": "^0.7.0",
-    "@floating-ui/dom": "^1.6.1",
+    "@floating-ui/dom": "^1.6.3",
    "@napi-rs/simple-git": "0.1.16",
    "async-mutex": "^0.4.1",
    "chalk": "^5.3.0",
@ -50,7 +50,7 @@
    "esbuild-sass-plugin": "^2.16.1",
    "flexsearch": "0.7.43",
    "github-slugger": "^2.0.0",
-    "globby": "^14.0.0",
+    "globby": "^14.0.1",
    "gray-matter": "^4.0.3",
    "hast-util-to-html": "^9.0.0",
    "hast-util-to-jsx-runtime": "^2.3.0",
--- a/quartz/build.ts
+++ b/quartz/build.ts
@ -60,7 +60,7 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {

  const release = await mut.acquire()
  perf.addEvent("clean")
-  await rimraf(output)
+  await rimraf(path.join(output, "*"), { glob: true })
  console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`)

  perf.addEvent("glob")
@ -375,7 +375,7 @@ async function rebuildFromEntrypoint(

    // TODO: we can probably traverse the link graph to figure out what's safe to delete here
    // instead of just deleting everything
-    await rimraf(argv.output)
+    await rimraf(path.join(argv.output, ".*"), { glob: true })
    await emitContent(ctx, filteredContent)
    console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
  } catch (err) {
--- a/quartz/components/ArticleTitle.tsx
+++ b/quartz/components/ArticleTitle.tsx
@ -1,7 +1,7 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"

-function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
+const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
  const title = fileData.frontmatter?.title
  if (title) {
    return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
--- a/quartz/components/Backlinks.tsx
+++ b/quartz/components/Backlinks.tsx
@ -1,10 +1,15 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"

-function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentProps) {
+const Backlinks: QuartzComponent = ({
+  fileData,
+  allFiles,
+  displayClass,
+  cfg,
+}: QuartzComponentProps) => {
  const slug = simplifySlug(fileData.slug!)
  const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
  return (
--- a/quartz/components/Body.tsx
+++ b/quartz/components/Body.tsx
@ -1,9 +1,9 @@
 // @ts-ignore
 import clipboardScript from "./scripts/clipboard.inline"
 import clipboardStyle from "./styles/clipboard.scss"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"

-function Body({ children }: QuartzComponentProps) {
+const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
  return <div id="quartz-body">{children}</div>
 }

--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@ -1,6 +1,6 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
-import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
+import { FullSlug, SimpleSlug, joinSegments, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { classNames } from "../util/lang"

@ -54,7 +54,11 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
  // computed index of folder name to its associated file data
  let folderIndex: Map<string, QuartzPluginData> | undefined

-  function Breadcrumbs({ fileData, allFiles, displayClass }: QuartzComponentProps) {
+  const Breadcrumbs: QuartzComponent = ({
+    fileData,
+    allFiles,
+    displayClass,
+  }: QuartzComponentProps) => {
    // Hide crumbs on root if enabled
    if (options.hideOnRoot && fileData.slug === "index") {
      return <></>
@ -78,8 +82,12 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
    // Split slug into hierarchy/parts
    const slugParts = fileData.slug?.split("/")
    if (slugParts) {
+      // is tag breadcrumb?
+      const isTagPath = slugParts[0] === "tags"
+
      // full path until current part
      let currentPath = ""
+
      for (let i = 0; i < slugParts.length - 1; i++) {
        let curPathSegment = slugParts[i]

@ -93,10 +101,15 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
        }

        // Add current slug to full path
-        currentPath += slugParts[i] + "/"
+        currentPath = joinSegments(currentPath, slugParts[i])
+        const includeTrailingSlash = !isTagPath || i < 1

        // Format and add current crumb
-        const crumb = formatCrumb(curPathSegment, fileData.slug!, currentPath as SimpleSlug)
+        const crumb = formatCrumb(
+          curPathSegment,
+          fileData.slug!,
+          (currentPath + (includeTrailingSlash ? "/" : "")) as SimpleSlug,
+        )
        crumbs.push(crumb)
      }

@ -121,5 +134,6 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
    )
  }
  Breadcrumbs.css = breadcrumbsStyle
+
  return Breadcrumbs
 }) satisfies QuartzComponentConstructor
--- a/quartz/components/Darkmode.tsx
+++ b/quartz/components/Darkmode.tsx
@ -3,11 +3,11 @@
 // see: https://v8.dev/features/modules#defer
 import darkmodeScript from "./scripts/darkmode.inline"
 import styles from "./styles/darkmode.scss"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"

-function Darkmode({ displayClass, cfg }: QuartzComponentProps) {
+const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
  return (
    <div class={classNames(displayClass, "darkmode")}>
      <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
--- a/quartz/components/DesktopOnly.tsx
+++ b/quartz/components/DesktopOnly.tsx
@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 export default ((component?: QuartzComponent) => {
  if (component) {
    const Component = component
-    function DesktopOnly(props: QuartzComponentProps) {
+    const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => {
      return <Component displayClass="desktop-only" {...props} />
    }

--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import explorerStyle from "./styles/explorer.scss"

 // @ts-ignore
@ -75,7 +75,12 @@ export default ((userOpts?: Partial<Options>) => {
    jsonTree = JSON.stringify(folders)
  }

-  function Explorer({ cfg, allFiles, displayClass, fileData }: QuartzComponentProps) {
+  const Explorer: QuartzComponent = ({
+    cfg,
+    allFiles,
+    displayClass,
+    fileData,
+  }: QuartzComponentProps) => {
    constructFileTree(allFiles)
    return (
      <div class={classNames(displayClass, "explorer")}>
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
 import { i18n } from "../i18n"
@ -8,7 +8,7 @@ interface Options {
 }

 export default ((opts?: Options) => {
-  function Footer({ displayClass, cfg }: QuartzComponentProps) {
+  const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
    const year = new Date().getFullYear()
    const links = opts?.links ?? []
    return (
--- a/quartz/components/Graph.tsx
+++ b/quartz/components/Graph.tsx
@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 // @ts-ignore
 import script from "./scripts/graph.inline"
 import style from "./styles/graph.scss"
@ -54,7 +54,7 @@ const defaultOptions: GraphOptions = {
 }

 export default ((opts?: GraphOptions) => {
-  function Graph({ displayClass, cfg }: QuartzComponentProps) {
+  const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
    const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
    const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
    return (
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@ -1,10 +1,10 @@
 import { i18n } from "../i18n"
 import { FullSlug, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"

 export default (() => {
-  function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
+  const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
    const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
    const description =
      fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
@ -21,6 +21,12 @@ export default (() => {
      <head>
        <title>{title}</title>
        <meta charSet="utf-8" />
+        {cfg.theme.cdnCaching && (
+          <>
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" />
+          </>
+        )}
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
@ -30,12 +36,6 @@ export default (() => {
        <link rel="icon" href={iconPath} />
        <meta name="description" content={description} />
        <meta name="generator" content="Quartz" />
-        {cfg.theme.cdnCaching && (
-          <>
-            <link rel="preconnect" href="https://fonts.googleapis.com" />
-            <link rel="preconnect" href="https://fonts.gstatic.com" />
-          </>
-        )}
        {css.map((href) => (
          <link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />
        ))}
--- a/quartz/components/Header.tsx
+++ b/quartz/components/Header.tsx
@ -1,6 +1,6 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"

-function Header({ children }: QuartzComponentProps) {
+const Header: QuartzComponent = ({ children }: QuartzComponentProps) => {
  return children.length > 0 ? <header>{children}</header> : null
 }

--- a/quartz/components/MobileOnly.tsx
+++ b/quartz/components/MobileOnly.tsx
@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 export default ((component?: QuartzComponent) => {
  if (component) {
    const Component = component
-    function MobileOnly(props: QuartzComponentProps) {
+    const MobileOnly: QuartzComponent = (props: QuartzComponentProps) => {
      return <Component displayClass="mobile-only" {...props} />
    }

--- a/quartz/components/PageList.tsx
+++ b/quartz/components/PageList.tsx
@ -1,7 +1,7 @@
 import { FullSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { Date, getDate } from "./Date"
-import { QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentProps } from "./types"
 import { GlobalConfiguration } from "../cfg"

 export function byDateAndAlphabetical(
@ -29,7 +29,7 @@ type Props = {
  limit?: number
 } & QuartzComponentProps

-export function PageList({ cfg, fileData, allFiles, limit }: Props) {
+export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Props) => {
  let list = allFiles.sort(byDateAndAlphabetical(cfg))
  if (limit) {
    list = list.slice(0, limit)
--- a/quartz/components/PageTitle.tsx
+++ b/quartz/components/PageTitle.tsx
@ -1,9 +1,9 @@
 import { pathToRoot } from "../util/path"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 import { i18n } from "../i18n"

-function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
+const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
  const baseDir = pathToRoot(fileData.slug!)
  return (
--- a/quartz/components/RecentNotes.tsx
+++ b/quartz/components/RecentNotes.tsx
@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { byDateAndAlphabetical } from "./PageList"
@ -24,7 +24,12 @@ const defaultOptions = (cfg: GlobalConfiguration): Options => ({
 })

 export default ((userOpts?: Partial<Options>) => {
-  function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) {
+  const RecentNotes: QuartzComponent = ({
+    allFiles,
+    fileData,
+    displayClass,
+    cfg,
+  }: QuartzComponentProps) => {
    const opts = { ...defaultOptions(cfg), ...userOpts }
    const pages = allFiles.filter(opts.filter).sort(opts.sort)
    const remaining = Math.max(0, pages.length - opts.limit)
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
@ -14,7 +14,7 @@ const defaultOptions: SearchOptions = {
 }

 export default ((userOpts?: Partial<SearchOptions>) => {
-  function Search({ displayClass, cfg }: QuartzComponentProps) {
+  const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
    const opts = { ...defaultOptions, ...userOpts }
    const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
    return (
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import legacyStyle from "./styles/legacyToc.scss"
 import modernStyle from "./styles/toc.scss"
 import { classNames } from "../util/lang"
@ -15,7 +15,11 @@ const defaultOptions: Options = {
  layout: "modern",
 }

-function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps) {
+const TableOfContents: QuartzComponent = ({
+  fileData,
+  displayClass,
+  cfg,
+}: QuartzComponentProps) => {
  if (!fileData.toc) {
    return null
  }
@ -56,7 +60,7 @@ function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps)
 TableOfContents.css = modernStyle
 TableOfContents.afterDOMLoaded = script

-function LegacyTableOfContents({ fileData, cfg }: QuartzComponentProps) {
+const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => {
  if (!fileData.toc) {
    return null
  }
--- a/quartz/components/TagList.tsx
+++ b/quartz/components/TagList.tsx
@ -1,8 +1,8 @@
 import { pathToRoot, slugTag } from "../util/path"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"

-function TagList({ fileData, displayClass }: QuartzComponentProps) {
+const TagList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
  const tags = fileData.frontmatter?.tags
  const baseDir = pathToRoot(fileData.slug!)
  if (tags && tags.length > 0) {
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@ -3,10 +3,9 @@ import { QuartzComponent, QuartzComponentProps } from "./types"
 import HeaderConstructor from "./Header"
 import BodyConstructor from "./Body"
 import { JSResourceToScriptElement, StaticResources } from "../util/resources"
-import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
+import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
 import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
-import { QuartzPluginData } from "../plugins/vfile"
 import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"

@ -52,18 +51,6 @@ export function pageResources(
  }
 }

-let pageIndex: Map<FullSlug, QuartzPluginData> | undefined = undefined
-function getOrComputeFileIndex(allFiles: QuartzPluginData[]): Map<FullSlug, QuartzPluginData> {
-  if (!pageIndex) {
-    pageIndex = new Map()
-    for (const file of allFiles) {
-      pageIndex.set(file.slug!, file)
-    }
-  }
-
-  return pageIndex
-}
-
 export function renderPage(
  cfg: GlobalConfiguration,
  slug: FullSlug,
@ -71,14 +58,18 @@ export function renderPage(
  components: RenderComponents,
  pageResources: StaticResources,
 ): string {
+  // make a deep copy of the tree so we don't remove the transclusion references
+  // for the file cached in contentMap in build.ts
+  const root = clone(componentData.tree) as Root
+
  // process transcludes in componentData
-  visit(componentData.tree as Root, "element", (node, _index, _parent) => {
+  visit(root, "element", (node, _index, _parent) => {
    if (node.tagName === "blockquote") {
      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 page = getOrComputeFileIndex(componentData.allFiles).get(transcludeTarget)
+        const page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
        if (!page) {
          return
        }
@ -103,7 +94,7 @@ export function renderPage(
              {
                type: "element",
                tagName: "a",
-                properties: { href: inner.properties?.href, class: ["internal"] },
+                properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
                children: [
                  { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
                ],
@ -140,7 +131,7 @@ export function renderPage(
            {
              type: "element",
              tagName: "a",
-              properties: { href: inner.properties?.href, class: ["internal"] },
+              properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
              children: [
                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
              ],
@ -170,7 +161,7 @@ export function renderPage(
            {
              type: "element",
              tagName: "a",
-              properties: { href: inner.properties?.href, class: ["internal"] },
+              properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
              children: [
                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
              ],
@ -181,6 +172,9 @@ export function renderPage(
    }
  })

+  // set componentData.tree to the edited html that has transclusions rendered
+  componentData.tree = root
+
  const {
    head: Head,
    header,
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@ -37,29 +37,47 @@ async function mouseEnterHandler(
  targetUrl.hash = ""
  targetUrl.search = ""

-  const contents = await fetch(`${targetUrl}`)
-    .then((res) => res.text())
-    .catch((err) => {
-      console.error(err)
-    })
+  const response = await fetch(`${targetUrl}`).catch((err) => {
+    console.error(err)
+  })

  // bailout if another popover exists
  if (hasAlreadyBeenFetched()) {
    return
  }

-  if (!contents) return
-  const html = p.parseFromString(contents, "text/html")
-  normalizeRelativeURLs(html, targetUrl)
-  const elts = [...html.getElementsByClassName("popover-hint")]
-  if (elts.length === 0) return
+  if (!response) return
+  const contentType = response.headers.get("Content-Type")
+  const contentTypeCategory = contentType?.split("/")[0] ?? "text"

  const popoverElement = document.createElement("div")
  popoverElement.classList.add("popover")
  const popoverInner = document.createElement("div")
  popoverInner.classList.add("popover-inner")
  popoverElement.appendChild(popoverInner)
-  elts.forEach((elt) => popoverInner.appendChild(elt))
+
+  popoverInner.dataset.contentType = contentTypeCategory
+
+  switch (contentTypeCategory) {
+    case "image":
+      const img = document.createElement("img")
+
+      response.blob().then((blob) => {
+        img.src = URL.createObjectURL(blob)
+      })
+      img.alt = targetUrl.pathname
+
+      popoverInner.appendChild(img)
+      break
+    default:
+      const contents = await response.text()
+      const html = p.parseFromString(contents, "text/html")
+      normalizeRelativeURLs(html, targetUrl)
+      const elts = [...html.getElementsByClassName("popover-hint")]
+      if (elts.length === 0) return
+
+      elts.forEach((elt) => popoverInner.appendChild(elt))
+  }

  setPosition(popoverElement)
  link.appendChild(popoverElement)
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@ -87,7 +87,7 @@ svg {
    color: var(--secondary);
    font-family: var(--headerFont);
    font-size: 0.95rem;
-    font-weight: $boldWeight;
+    font-weight: $semiBoldWeight;
    line-height: 1.5rem;
    display: inline-block;
  }
@ -112,7 +112,7 @@ svg {
      font-size: 0.95rem;
      display: inline-block;
      color: var(--secondary);
-      font-weight: $boldWeight;
+      font-weight: $semiBoldWeight;
      margin: 0;
      line-height: 1.5rem;
      pointer-events: none;
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@ -38,6 +38,17 @@
    white-space: normal;
  }

+  & > .popover-inner[data-content-type="image"] {
+    padding: 0;
+    max-height: 100%;
+
+    img {
+      margin: 0;
+      border-radius: 0;
+      display: block;
+    }
+  }
+
  h1 {
    font-size: 1.5rem;
  }
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@ -1,6 +1,7 @@
 import { Translation, CalloutTranslation } from "./locales/definition"
 import en from "./locales/en-US"
 import fr from "./locales/fr-FR"
+import it from "./locales/it-IT"
 import ja from "./locales/ja-JP"
 import de from "./locales/de-DE"
 import nl from "./locales/nl-NL"
@ -8,13 +9,18 @@ import ro from "./locales/ro-RO"
 import es from "./locales/es-ES"
 import ar from "./locales/ar-SA"
 import uk from "./locales/uk-UA"
+import ru from "./locales/ru-RU"
+import ko from "./locales/ko-KR"
+import zh from "./locales/zh-CN"

 export const TRANSLATIONS = {
  "en-US": en,
  "fr-FR": fr,
+  "it-IT": it,
  "ja-JP": ja,
  "de-DE": de,
  "nl-NL": nl,
+  "nl-BE": nl,
  "ro-RO": ro,
  "ro-MD": ro,
  "es-ES": es,
@ -39,6 +45,9 @@ export const TRANSLATIONS = {
  "ar-DZ": ar,
  "ar-MR": ar,
  "uk-UA": uk,
+  "ru-RU": ru,
+  "ko-KR": ko,
+  "zh-CN": zh,
 } as const

 export const defaultTranslation = "en-US"
--- a/quartz/i18n/locales/it-IT.ts
+++ b/quartz/i18n/locales/it-IT.ts
@ -0,0 +1,83 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Senza titolo",
+    description: "Nessuna descrizione",
+  },
+  components: {
+    callout: {
+      note: "Nota",
+      abstract: "Astratto",
+      info: "Info",
+      todo: "Da fare",
+      tip: "Consiglio",
+      success: "Completato",
+      question: "Domanda",
+      warning: "Attenzione",
+      failure: "Errore",
+      danger: "Pericolo",
+      bug: "Bug",
+      example: "Esempio",
+      quote: "Citazione",
+    },
+    backlinks: {
+      title: "Link entranti",
+      noBacklinksFound: "Nessun link entrante",
+    },
+    themeToggle: {
+      lightMode: "Tema chiaro",
+      darkMode: "Tema scuro",
+    },
+    explorer: {
+      title: "Esplora",
+    },
+    footer: {
+      createdWith: "Creato con",
+    },
+    graph: {
+      title: "Vista grafico",
+    },
+    recentNotes: {
+      title: "Note recenti",
+      seeRemainingMore: ({ remaining }) => `Vedi ${remaining} altro →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transclusione di ${targetSlug}`,
+      linkToOriginal: "Link all'originale",
+    },
+    search: {
+      title: "Cerca",
+      searchBarPlaceholder: "Cerca qualcosa",
+    },
+    tableOfContents: {
+      title: "Tabella dei contenuti",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} minuti`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Note recenti",
+      lastFewNotes: ({ count }) => `Ultime ${count} note`,
+    },
+    error: {
+      title: "Non trovato",
+      notFound: "Questa pagina è privata o non esiste.",
+    },
+    folderContent: {
+      folder: "Cartella",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 oggetto in questa cartella" : `${count} oggetti in questa cartella.`,
+    },
+    tagContent: {
+      tag: "Etichetta",
+      tagIndex: "Indice etichette",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 oggetto con questa etichetta" : `${count} oggetti con questa etichetta.`,
+      showingFirst: ({ count }) => `Prime ${count} etichette.`,
+      totalTags: ({ count }) => `Trovate ${count} etichette totali.`,
+    },
+  },
+} as const satisfies Translation
--- a/quartz/i18n/locales/ko-KR.ts
+++ b/quartz/i18n/locales/ko-KR.ts
@ -0,0 +1,81 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "제목 없음",
+    description: "설명 없음",
+  },
+  components: {
+    callout: {
+      note: "노트",
+      abstract: "개요",
+      info: "정보",
+      todo: "할일",
+      tip: "팁",
+      success: "성공",
+      question: "질문",
+      warning: "주의",
+      failure: "실패",
+      danger: "위험",
+      bug: "버그",
+      example: "예시",
+      quote: "인용",
+    },
+    backlinks: {
+      title: "백링크",
+      noBacklinksFound: "백링크가 없습니다.",
+    },
+    themeToggle: {
+      lightMode: "라이트 모드",
+      darkMode: "다크 모드",
+    },
+    explorer: {
+      title: "탐색기",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "그래프 뷰",
+    },
+    recentNotes: {
+      title: "최근 게시글",
+      seeRemainingMore: ({ remaining }) => `${remaining}건 더보기 →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `${targetSlug}의 포함`,
+      linkToOriginal: "원본 링크",
+    },
+    search: {
+      title: "검색",
+      searchBarPlaceholder: "검색어를 입력하세요",
+    },
+    tableOfContents: {
+      title: "목차",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "최근 게시글",
+      lastFewNotes: ({ count }) => `최근 ${count} 건`,
+    },
+    error: {
+      title: "Not Found",
+      notFound: "페이지가 존재하지 않거나 비공개 설정이 되어 있습니다.",
+    },
+    folderContent: {
+      folder: "폴더",
+      itemsUnderFolder: ({ count }) => `${count}건의 페이지`,
+    },
+    tagContent: {
+      tag: "태그",
+      tagIndex: "태그 목록",
+      itemsUnderTag: ({ count }) => `${count}건의 페이지`,
+      showingFirst: ({ count }) => `처음 ${count}개의 태그`,
+      totalTags: ({ count }) => `총 ${count}개의 태그를 찾았습니다.`,
+    },
+  },
+} as const satisfies Translation
--- a/quartz/i18n/locales/nl-NL.ts
+++ b/quartz/i18n/locales/nl-NL.ts
@ -54,7 +54,8 @@ export default {
      title: "Inhoudsopgave",
    },
    contentMeta: {
-      readingTime: ({ minutes }) => `${minutes} min read`,
+      readingTime: ({ minutes }) =>
+        minutes === 1 ? "1 minuut leestijd" : `${minutes} minuten leestijd`,
    },
  },
  pages: {
--- a/quartz/i18n/locales/ru-RU.ts
+++ b/quartz/i18n/locales/ru-RU.ts
@ -0,0 +1,95 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Без названия",
+    description: "Описание отсутствует",
+  },
+  components: {
+    callout: {
+      note: "Заметка",
+      abstract: "Резюме",
+      info: "Инфо",
+      todo: "Сделать",
+      tip: "Подсказка",
+      success: "Успех",
+      question: "Вопрос",
+      warning: "Предупреждение",
+      failure: "Неудача",
+      danger: "Опасность",
+      bug: "Баг",
+      example: "Пример",
+      quote: "Цитата",
+    },
+    backlinks: {
+      title: "Обратные ссылки",
+      noBacklinksFound: "Обратные ссылки отсутствуют",
+    },
+    themeToggle: {
+      lightMode: "Светлый режим",
+      darkMode: "Тёмный режим",
+    },
+    explorer: {
+      title: "Проводник",
+    },
+    footer: {
+      createdWith: "Создано с помощью",
+    },
+    graph: {
+      title: "Вид графа",
+    },
+    recentNotes: {
+      title: "Недавние заметки",
+      seeRemainingMore: ({ remaining }) =>
+        `Посмотреть оставш${getForm(remaining, "уюся", "иеся", "иеся")} ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Переход из ${targetSlug}`,
+      linkToOriginal: "Ссылка на оригинал",
+    },
+    search: {
+      title: "Поиск",
+      searchBarPlaceholder: "Найти что-нибудь",
+    },
+    tableOfContents: {
+      title: "Оглавление",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `время чтения ~${minutes} мин.`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Недавние заметки",
+      lastFewNotes: ({ count }) =>
+        `Последн${getForm(count, "яя", "ие", "ие")} ${count} замет${getForm(count, "ка", "ки", "ок")}`,
+    },
+    error: {
+      title: "Страница не найдена",
+      notFound: "Эта страница приватная или не существует",
+    },
+    folderContent: {
+      folder: "Папка",
+      itemsUnderFolder: ({ count }) =>
+        `в этой папке ${count} элемент${getForm(count, "", "а", "ов")}`,
+    },
+    tagContent: {
+      tag: "Тег",
+      tagIndex: "Индекс тегов",
+      itemsUnderTag: ({ count }) => `с этим тегом ${count} элемент${getForm(count, "", "а", "ов")}`,
+      showingFirst: ({ count }) =>
+        `Показыва${getForm(count, "ется", "ются", "ются")} ${count} тег${getForm(count, "", "а", "ов")}`,
+      totalTags: ({ count }) => `Всего ${count} тег${getForm(count, "", "а", "ов")}`,
+    },
+  },
+} as const satisfies Translation
+
+function getForm(number: number, form1: string, form2: string, form5: string): string {
+  const remainder100 = number % 100
+  const remainder10 = remainder100 % 10
+
+  if (remainder100 >= 10 && remainder100 <= 20) return form5
+  if (remainder10 > 1 && remainder10 < 5) return form2
+  if (remainder10 == 1) return form1
+  return form5
+}
--- a/quartz/i18n/locales/zh-CN.ts
+++ b/quartz/i18n/locales/zh-CN.ts
@ -0,0 +1,81 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "无题",
+    description: "无描述",
+  },
+  components: {
+    callout: {
+      note: "笔记",
+      abstract: "摘要",
+      info: "提示",
+      todo: "待办",
+      tip: "提示",
+      success: "成功",
+      question: "问题",
+      warning: "警告",
+      failure: "失败",
+      danger: "危险",
+      bug: "错误",
+      example: "示例",
+      quote: "引用",
+    },
+    backlinks: {
+      title: "反向链接",
+      noBacklinksFound: "无法找到反向链接",
+    },
+    themeToggle: {
+      lightMode: "亮色模式",
+      darkMode: "暗色模式",
+    },
+    explorer: {
+      title: "探索",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "关系图谱",
+    },
+    recentNotes: {
+      title: "最近的笔记",
+      seeRemainingMore: ({ remaining }) => `查看更多${remaining}篇笔记 →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `包含${targetSlug}`,
+      linkToOriginal: "指向原始笔记的链接",
+    },
+    search: {
+      title: "搜索",
+      searchBarPlaceholder: "搜索些什么",
+    },
+    tableOfContents: {
+      title: "目录",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes}分钟阅读`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "最近的笔记",
+      lastFewNotes: ({ count }) => `最近的${count}条笔记`,
+    },
+    error: {
+      title: "无法找到",
+      notFound: "私有笔记或笔记不存在。",
+    },
+    folderContent: {
+      folder: "文件夹",
+      itemsUnderFolder: ({ count }) => `此文件夹下有${count}条笔记。`,
+    },
+    tagContent: {
+      tag: "标签",
+      tagIndex: "标签索引",
+      itemsUnderTag: ({ count }) => `此标签下有${count}条笔记。`,
+      showingFirst: ({ count }) => `显示前${count}个标签。`,
+      totalTags: ({ count }) => `总共有${count}个标签。`,
+    },
+  },
+} as const satisfies Translation
--- a/quartz/plugins/emitters/aliases.ts
+++ b/quartz/plugins/emitters/aliases.ts
@ -9,9 +9,30 @@ export const AliasRedirects: QuartzEmitterPlugin = () => ({
  getQuartzComponents() {
    return []
  },
-  async getDependencyGraph(_ctx, _content, _resources) {
-    // TODO implement
-    return new DepGraph<FilePath>()
+  async getDependencyGraph(ctx, content, _resources) {
+    const graph = new DepGraph<FilePath>()
+
+    const { argv } = ctx
+    for (const [_tree, file] of content) {
+      const dir = path.posix.relative(argv.directory, path.dirname(file.data.filePath!))
+      const aliases = file.data.frontmatter?.aliases ?? []
+      const slugs = aliases.map((alias) => path.posix.join(dir, alias) as FullSlug)
+      const permalink = file.data.frontmatter?.permalink
+      if (typeof permalink === "string") {
+        slugs.push(permalink as FullSlug)
+      }
+
+      for (let slug of slugs) {
+        // fix any slugs that have trailing slash
+        if (slug.endsWith("/")) {
+          slug = joinSegments(slug, "index") as FullSlug
+        }
+
+        graph.addEdge(file.data.filePath!, joinSegments(argv.output, slug + ".html") as FilePath)
+      }
+    }
+
+    return graph
  },
  async emit(ctx, content, _resources): Promise<FilePath[]> {
    const { argv } = ctx
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@ -120,7 +120,7 @@ function addGlobalPageResources(
  } else if (cfg.analytics?.provider === "umami") {
    componentResources.afterDOMLoaded.push(`
      const umamiScript = document.createElement("script")
-      umamiScript.src = ${cfg.analytics.host} ?? "https://analytics.umami.is/script.js"
+      umamiScript.src = "${cfg.analytics.host}" ?? "https://analytics.umami.is/script.js"
      umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
      umamiScript.async = true

@ -196,10 +196,6 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
      const cfg = ctx.cfg.configuration
      // component specific scripts and styles
      const componentResources = getComponentResources(ctx)
-      // important that this goes *after* component scripts
-      // as the "nav" event gets triggered here and we should make sure
-      // that everyone else had the chance to register a listener for it
-
      let googleFontsStyleSheet = ""
      if (fontOrigin === "local") {
        // let the user do it themselves in css
@ -247,12 +243,15 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
        }
      }

+      // important that this goes *after* component scripts
+      // as the "nav" event gets triggered here and we should make sure
+      // that everyone else had the chance to register a listener for it
      addGlobalPageResources(ctx, resources, componentResources)

      const stylesheet = joinStyles(
        ctx.cfg.configuration.theme,
-        ...componentResources.css,
        googleFontsStyleSheet,
+        ...componentResources.css,
        styles,
      )
      const [prescript, postscript] = await Promise.all([
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@ -1,16 +1,56 @@
+import path from "path"
+import { visit } from "unist-util-visit"
+import { Root } from "hast"
+import { VFile } from "vfile"
 import { QuartzEmitterPlugin } from "../types"
 import { QuartzComponentProps } from "../../components/types"
 import HeaderConstructor from "../../components/Header"
 import BodyConstructor from "../../components/Body"
 import { pageResources, renderPage } from "../../components/renderPage"
 import { FullPageLayout } from "../../cfg"
-import { FilePath, joinSegments, pathToRoot } from "../../util/path"
+import { Argv } from "../../util/ctx"
+import { FilePath, isRelativeURL, joinSegments, pathToRoot } from "../../util/path"
 import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { Content } from "../../components"
 import chalk from "chalk"
 import { write } from "./helpers"
 import DepGraph from "../../depgraph"

+// get all the dependencies for the markdown file
+// eg. images, scripts, stylesheets, transclusions
+const parseDependencies = (argv: Argv, hast: Root, file: VFile): string[] => {
+  const dependencies: string[] = []
+
+  visit(hast, "element", (elem): void => {
+    let ref: string | null = null
+
+    if (
+      ["script", "img", "audio", "video", "source", "iframe"].includes(elem.tagName) &&
+      elem?.properties?.src
+    ) {
+      ref = elem.properties.src.toString()
+    } else if (["a", "link"].includes(elem.tagName) && elem?.properties?.href) {
+      // transclusions will create a tags with relative hrefs
+      ref = elem.properties.href.toString()
+    }
+
+    // if it is a relative url, its a local file and we need to add
+    // it to the dependency graph. otherwise, ignore
+    if (ref === null || !isRelativeURL(ref)) {
+      return
+    }
+
+    let fp = path.join(file.data.filePath!, path.relative(argv.directory, ref)).replace(/\\/g, "/")
+    // markdown files have the .md extension stripped in hrefs, add it back here
+    if (!fp.split("/").pop()?.includes(".")) {
+      fp += ".md"
+    }
+    dependencies.push(fp)
+  })
+
+  return dependencies
+}
+
 export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
  const opts: FullPageLayout = {
    ...sharedPageComponents,
@ -29,13 +69,16 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
    },
    async getDependencyGraph(ctx, content, _resources) {
-      // TODO handle transclusions
      const graph = new DepGraph<FilePath>()

-      for (const [_tree, file] of content) {
+      for (const [tree, file] of content) {
        const sourcePath = file.data.filePath!
        const slug = file.data.slug!
        graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath)
+
+        parseDependencies(ctx.argv, tree as Root, file).forEach((dep) => {
+          graph.addEdge(dep as FilePath, sourcePath)
+        })
      }

      return graph
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/quartz/plugins/emitters/folderPage.tsx
@ -38,12 +38,21 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
    getQuartzComponents() {
      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
    },
-    async getDependencyGraph(_ctx, _content, _resources) {
+    async getDependencyGraph(_ctx, content, _resources) {
      // Example graph:
-      // nested/file.md --> nested/file.html
-      //          \-------> nested/index.html
-      // TODO implement
-      return new DepGraph<FilePath>()
+      // nested/file.md --> nested/index.html
+      // nested/file2.md ------^
+      const graph = new DepGraph<FilePath>()
+
+      content.map(([_tree, vfile]) => {
+        const slug = vfile.data.slug
+        const folderName = path.dirname(slug ?? "") as SimpleSlug
+        if (slug && folderName !== "." && folderName !== "tags") {
+          graph.addEdge(vfile.data.filePath!, joinSegments(folderName, "index.html") as FilePath)
+        }
+      })
+
+      return graph
    },
    async emit(ctx, content, resources): Promise<FilePath[]> {
      const fps: FilePath[] = []
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/quartz/plugins/emitters/tagPage.tsx
@ -35,9 +35,26 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
    getQuartzComponents() {
      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
    },
-    async getDependencyGraph(ctx, _content, _resources) {
-      // TODO implement
-      return new DepGraph<FilePath>()
+    async getDependencyGraph(ctx, content, _resources) {
+      const graph = new DepGraph<FilePath>()
+
+      for (const [_tree, file] of content) {
+        const sourcePath = file.data.filePath!
+        const tags = (file.data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes)
+        // if the file has at least one tag, it is used in the tag index page
+        if (tags.length > 0) {
+          tags.push("index")
+        }
+
+        for (const tag of tags) {
+          graph.addEdge(
+            sourcePath,
+            joinSegments(ctx.argv.output, "tags", tag + ".html") as FilePath,
+          )
+        }
+      }
+
+      return graph
    },
    async emit(ctx, content, resources): Promise<FilePath[]> {
      const fps: FilePath[] = []
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@ -8,12 +8,12 @@ import { QuartzPluginData } from "../vfile"
 import { i18n } from "../../i18n"

 export interface Options {
-  delims: string | string[]
+  delimiters: string | [string, string]
  language: "yaml" | "toml"
 }

 const defaultOptions: Options = {
-  delims: "---",
+  delimiters: "---",
  language: "yaml",
 }

@ -57,9 +57,9 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
              },
            })

-            if (data.title) {
+            if (data.title != null && data.title.toString() !== "") {
              data.title = data.title.toString()
-            } else if (data.title === null || data.title === undefined) {
+            } else {
              data.title = file.stem ?? i18n(cfg.configuration.locale).propertyDefaults.title
            }

--- a/quartz/plugins/transformers/latex.ts
+++ b/quartz/plugins/transformers/latex.ts
@ -26,12 +26,12 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
        return {
          css: [
            // base css
-            "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css",
+            "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css",
          ],
          js: [
            {
              // fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
-              src: "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/copy-tex.min.js",
+              src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js",
              loadTime: "afterDOMReady",
              contentType: "external",
            },
--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@ -8,6 +8,7 @@ import {
  simplifySlug,
  splitAnchor,
  transformLink,
+  joinSegments,
 } from "../../util/path"
 import path from "path"
 import { visit } from "unist-util-visit"
@ -107,7 +108,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =

                  // url.resolve is considered legacy
                  // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to
-                  const url = new URL(dest, `https://base.com/${curSlug}`)
+                  const url = new URL(dest, "https://base.com/" + stripSlashes(curSlug, true))
                  const canonicalDest = url.pathname
                  let [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
                  if (destCanonical.endsWith("/")) {
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@ -619,7 +619,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
          let mermaidImport = undefined
          document.addEventListener('nav', async () => {
            if (document.querySelector("code.mermaid")) {
-              mermaidImport ||= await import('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs')
+              mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs')
              const mermaid = mermaidImport.default
              const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
              mermaid.initialize({
--- a/quartz/plugins/transformers/syntax.ts
+++ b/quartz/plugins/transformers/syntax.ts
@ -1,20 +1,33 @@
 import { QuartzTransformerPlugin } from "../types"
-import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code"
+import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code"

-export const SyntaxHighlighting: QuartzTransformerPlugin = () => ({
-  name: "SyntaxHighlighting",
-  htmlPlugins() {
-    return [
-      [
-        rehypePrettyCode,
-        {
-          keepBackground: false,
-          theme: {
-            dark: "github-dark",
-            light: "github-light",
-          },
-        } satisfies Partial<CodeOptions>,
-      ],
-    ]
+interface Theme extends Record<string, CodeTheme> {
+  light: CodeTheme
+  dark: CodeTheme
+}
+
+interface Options {
+  theme?: Theme
+  keepBackground?: boolean
+}
+
+const defaultOptions: Options = {
+  theme: {
+    light: "github-light",
+    dark: "github-dark",
  },
-})
+  keepBackground: false,
+}
+
+export const SyntaxHighlighting: QuartzTransformerPlugin<Options> = (
+  userOpts?: Partial<Options>,
+) => {
+  const opts: Partial<CodeOptions> = { ...defaultOptions, ...userOpts }
+
+  return {
+    name: "SyntaxHighlighting",
+    htmlPlugins() {
+      return [[rehypePrettyCode, opts]]
+    },
+  }
+}
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@ -57,8 +57,12 @@ ul,
  }
 }

+strong {
+  font-weight: $semiBoldWeight;
+}
+
 a {
-  font-weight: $boldWeight;
+  font-weight: $semiBoldWeight;
  text-decoration: none;
  transition: color 0.2s ease;
  color: var(--secondary);
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@ -157,6 +157,6 @@
  }

  .callout-title-inner {
-    font-weight: $boldWeight;
+    font-weight: $semiBoldWeight;
  }
 }
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@ -5,4 +5,5 @@ $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
 $boldWeight: 700;
+$semiBoldWeight: 600;
 $normalWeight: 400;