Merge remote-tracking branch 'upstream/v4' into v4

quartz/bootstrap-cli.mjs

@@ -0,0 +1,540 @@
+#!/usr/bin/env node
+import { promises, readFileSync } from "fs"
+import yargs from "yargs"
+import path from "path"
+import { hideBin } from "yargs/helpers"
+import esbuild from "esbuild"
+import chalk from "chalk"
+import { sassPlugin } from "esbuild-sass-plugin"
+import fs from "fs"
+import { intro, isCancel, outro, select, text } from "@clack/prompts"
+import { rimraf } from "rimraf"
+import chokidar from "chokidar"
+import prettyBytes from "pretty-bytes"
+import { execSync, spawnSync } from "child_process"
+import http from "http"
+import serveHandler from "serve-handler"
+import { WebSocketServer } from "ws"
+import { randomUUID } from "crypto"
+import { Mutex } from "async-mutex"
+
+const ORIGIN_NAME = "origin"
+const UPSTREAM_NAME = "upstream"
+const QUARTZ_SOURCE_BRANCH = "v4"
+const cwd = process.cwd()
+const cacheDir = path.join(cwd, ".quartz-cache")
+const cacheFile = "./.quartz-cache/transpiled-build.mjs"
+const fp = "./quartz/build.ts"
+const { version } = JSON.parse(readFileSync("./package.json").toString())
+const contentCacheFolder = path.join(cacheDir, "content-cache")
+
+const CommonArgv = {
+  directory: {
+    string: true,
+    alias: ["d"],
+    default: "content",
+    describe: "directory to look for content files",
+  },
+  verbose: {
+    boolean: true,
+    alias: ["v"],
+    default: false,
+    describe: "print out extra logging information",
+  },
+}
+
+const SyncArgv = {
+  ...CommonArgv,
+  commit: {
+    boolean: true,
+    default: true,
+    describe: "create a git commit for your unsaved changes",
+  },
+  push: {
+    boolean: true,
+    default: true,
+    describe: "push updates to your Quartz fork",
+  },
+  pull: {
+    boolean: true,
+    default: true,
+    describe: "pull updates from your Quartz fork",
+  },
+}
+
+const BuildArgv = {
+  ...CommonArgv,
+  output: {
+    string: true,
+    alias: ["o"],
+    default: "public",
+    describe: "output folder for files",
+  },
+  serve: {
+    boolean: true,
+    default: false,
+    describe: "run a local server to live-preview your Quartz",
+  },
+  baseDir: {
+    string: true,
+    default: "",
+    describe: "base path to serve your local server on",
+  },
+  port: {
+    number: true,
+    default: 8080,
+    describe: "port to serve Quartz on",
+  },
+  bundleInfo: {
+    boolean: true,
+    default: false,
+    describe: "show detailed bundle information",
+  },
+  concurrency: {
+    number: true,
+    describe: "how many threads to use to parse notes",
+  },
+}
+
+function escapePath(fp) {
+  return fp
+    .replace(/\\ /g, " ") // unescape spaces
+    .replace(/^".*"$/, "$1")
+    .replace(/^'.*"$/, "$1")
+    .trim()
+}
+
+function exitIfCancel(val) {
+  if (isCancel(val)) {
+    outro(chalk.red("Exiting"))
+    process.exit(0)
+  } else {
+    return val
+  }
+}
+
+async function stashContentFolder(contentFolder) {
+  await fs.promises.rm(contentCacheFolder, { force: true, recursive: true })
+  await fs.promises.cp(contentFolder, contentCacheFolder, {
+    force: true,
+    recursive: true,
+    verbatimSymlinks: true,
+    preserveTimestamps: true,
+  })
+  await fs.promises.rm(contentFolder, { force: true, recursive: true })
+}
+
+async function popContentFolder(contentFolder) {
+  await fs.promises.rm(contentFolder, { force: true, recursive: true })
+  await fs.promises.cp(contentCacheFolder, contentFolder, {
+    force: true,
+    recursive: true,
+    verbatimSymlinks: true,
+    preserveTimestamps: true,
+  })
+  await fs.promises.rm(contentCacheFolder, { force: true, recursive: true })
+}
+
+function gitPull(origin, branch) {
+  const flags = ["--no-rebase", "--autostash", "-s", "recursive", "-X", "ours", "--no-edit"]
+  const out = spawnSync("git", ["pull", ...flags, origin, branch], { stdio: "inherit" })
+  if (out.stderr) {
+    throw new Error(`Error while pulling updates: ${out.stderr}`)
+  }
+}
+
+yargs(hideBin(process.argv))
+  .scriptName("quartz")
+  .version(version)
+  .usage("$0 <cmd> [args]")
+  .command("create", "Initialize Quartz", CommonArgv, async (argv) => {
+    console.log()
+    intro(chalk.bgGreen.black(` Quartz v${version} `))
+    const contentFolder = path.join(cwd, argv.directory)
+    const setupStrategy = exitIfCancel(
+      await select({
+        message: `Choose how to initialize the content in \`${contentFolder}\``,
+        options: [
+          { value: "new", label: "Empty Quartz" },
+          { value: "copy", label: "Copy an existing folder", hint: "overwrites `content`" },
+          {
+            value: "symlink",
+            label: "Symlink an existing folder",
+            hint: "don't select this unless you know what you are doing!",
+          },
+          { value: "keep", label: "Keep the existing files" },
+        ],
+      }),
+    )
+
+    async function rmContentFolder() {
+      const contentStat = await fs.promises.lstat(contentFolder)
+      if (contentStat.isSymbolicLink()) {
+        await fs.promises.unlink(contentFolder)
+      } else {
+        await rimraf(contentFolder)
+      }
+    }
+
+    if (setupStrategy === "copy" || setupStrategy === "symlink") {
+      const originalFolder = escapePath(
+        exitIfCancel(
+          await text({
+            message: "Enter the full path to existing content folder",
+            placeholder:
+              "On most terminal emulators, you can drag and drop a folder into the window and it will paste the full path",
+            validate(fp) {
+              const fullPath = escapePath(fp)
+              if (!fs.existsSync(fullPath)) {
+                return "The given path doesn't exist"
+              } else if (!fs.lstatSync(fullPath).isDirectory()) {
+                return "The given path is not a folder"
+              }
+            },
+          }),
+        ),
+      )
+
+      await rmContentFolder()
+      if (setupStrategy === "copy") {
+        await fs.promises.cp(originalFolder, contentFolder, {
+          recursive: true,
+          preserveTimestamps: true,
+        })
+      } else if (setupStrategy === "symlink") {
+        await fs.promises.symlink(originalFolder, contentFolder, "dir")
+      }
+    } else if (setupStrategy === "new") {
+      await rmContentFolder()
+      await fs.promises.mkdir(contentFolder)
+      await fs.promises.writeFile(
+        path.join(contentFolder, "index.md"),
+        `---
+title: Welcome to Quartz
+---
+
+This is a blank Quartz installation.
+See the [documentation](https://quartz.jzhao.xyz) for how to get started.
+`,
+      )
+    }
+
+    // get a prefered link resolution strategy
+    const linkResolutionStrategy = exitIfCancel(
+      await select({
+        message: `Choose how Quartz should resolve links in your content. You can change this later in \`quartz.config.ts\`.`,
+        options: [
+          {
+            value: "absolute",
+            label: "Treat links as absolute path",
+            hint: "for content made for Quartz 3 and Hugo",
+          },
+          {
+            value: "shortest",
+            label: "Treat links as shortest path",
+            hint: "for most Obsidian vaults",
+          },
+          {
+            value: "relative",
+            label: "Treat links as relative paths",
+            hint: "for just normal Markdown files",
+          },
+        ],
+      }),
+    )
+
+    // now, do config changes
+    const configFilePath = path.join(cwd, "quartz.config.ts")
+    let configContent = await fs.promises.readFile(configFilePath, { encoding: "utf-8" })
+    configContent = configContent.replace(
+      /markdownLinkResolution: '(.+)'/,
+      `markdownLinkResolution: '${linkResolutionStrategy}'`,
+    )
+    await fs.promises.writeFile(configFilePath, configContent)
+
+    outro(`You're all set! Not sure what to do next? Try:
+   • Customizing Quartz a bit more by editing \`quartz.config.ts\`
+   • Running \`npx quartz build --serve\` to preview your Quartz locally
+   • Hosting your Quartz online (see: https://quartz.jzhao.xyz/setup/hosting)
+`)
+  })
+  .command("update", "Get the latest Quartz updates", CommonArgv, async (argv) => {
+    const contentFolder = path.join(cwd, argv.directory)
+    console.log(chalk.bgGreen.black(`\n Quartz v${version} \n`))
+    console.log("Backing up your content")
+    execSync(
+      `git remote show upstream || git remote add upstream https://github.com/jackyzha0/quartz.git`,
+    )
+    await stashContentFolder(contentFolder)
+    console.log(
+      "Pulling updates... you may need to resolve some `git` conflicts if you've made changes to components or plugins.",
+    )
+    gitPull(UPSTREAM_NAME, QUARTZ_SOURCE_BRANCH)
+    await popContentFolder(contentFolder)
+    console.log("Ensuring dependencies are up to date")
+    spawnSync("npm", ["i"], { stdio: "inherit" })
+    console.log(chalk.green("Done!"))
+  })
+  .command(
+    "restore",
+    "Try to restore your content folder from the cache",
+    CommonArgv,
+    async (argv) => {
+      const contentFolder = path.join(cwd, argv.directory)
+      await popContentFolder(contentFolder)
+    },
+  )
+  .command("sync", "Sync your Quartz to and from GitHub.", SyncArgv, async (argv) => {
+    const contentFolder = path.join(cwd, argv.directory)
+    console.log(chalk.bgGreen.black(`\n Quartz v${version} \n`))
+    console.log("Backing up your content")
+
+    if (argv.commit) {
+      const contentStat = await fs.promises.lstat(contentFolder)
+      if (contentStat.isSymbolicLink()) {
+        const linkTarg = await fs.promises.readlink(contentFolder)
+        console.log(chalk.yellow("Detected symlink, trying to dereference before committing"))
+
+        // stash symlink file
+        await stashContentFolder(contentFolder)
+
+        // follow symlink and copy content
+        await fs.promises.cp(linkTarg, contentFolder, {
+          recursive: true,
+          preserveTimestamps: true,
+        })
+      }
+
+      const currentTimestamp = new Date().toLocaleString("en-US", {
+        dateStyle: "medium",
+        timeStyle: "short",
+      })
+      spawnSync("git", ["add", "."], { stdio: "inherit" })
+      spawnSync("git", ["commit", "-m", `Quartz sync: ${currentTimestamp}`], { stdio: "inherit" })
+
+      if (contentStat.isSymbolicLink()) {
+        // put symlink back
+        await popContentFolder(contentFolder)
+      }
+    }
+
+    await stashContentFolder(contentFolder)
+
+    if (argv.pull) {
+      console.log(
+        "Pulling updates from your repository. You may need to resolve some `git` conflicts if you've made changes to components or plugins.",
+      )
+      gitPull(ORIGIN_NAME, QUARTZ_SOURCE_BRANCH)
+    }
+
+    await popContentFolder(contentFolder)
+    if (argv.push) {
+      console.log("Pushing your changes")
+      spawnSync("git", ["push", "-f", ORIGIN_NAME, QUARTZ_SOURCE_BRANCH], { stdio: "inherit" })
+    }
+
+    console.log(chalk.green("Done!"))
+  })
+  .command("build", "Build Quartz into a bundle of static HTML files", BuildArgv, async (argv) => {
+    console.log(chalk.bgGreen.black(`\n Quartz v${version} \n`))
+    const ctx = await esbuild.context({
+      entryPoints: [fp],
+      outfile: path.join("quartz", cacheFile),
+      bundle: true,
+      keepNames: true,
+      minifyWhitespace: true,
+      minifySyntax: true,
+      platform: "node",
+      format: "esm",
+      jsx: "automatic",
+      jsxImportSource: "preact",
+      packages: "external",
+      metafile: true,
+      sourcemap: true,
+      sourcesContent: false,
+      plugins: [
+        sassPlugin({
+          type: "css-text",
+          cssImports: true,
+        }),
+        {
+          name: "inline-script-loader",
+          setup(build) {
+            build.onLoad({ filter: /\.inline\.(ts|js)$/ }, async (args) => {
+              let text = await promises.readFile(args.path, "utf8")
+
+              // remove default exports that we manually inserted
+              text = text.replace("export default", "")
+              text = text.replace("export", "")
+
+              const sourcefile = path.relative(path.resolve("."), args.path)
+              const resolveDir = path.dirname(sourcefile)
+              const transpiled = await esbuild.build({
+                stdin: {
+                  contents: text,
+                  loader: "ts",
+                  resolveDir,
+                  sourcefile,
+                },
+                write: false,
+                bundle: true,
+                platform: "browser",
+                format: "esm",
+              })
+              const rawMod = transpiled.outputFiles[0].text
+              return {
+                contents: rawMod,
+                loader: "text",
+              }
+            })
+          },
+        },
+      ],
+    })
+
+    const buildMutex = new Mutex()
+    const timeoutIds = new Set()
+    const build = async (clientRefresh) => {
+      await buildMutex.acquire()
+      const result = await ctx.rebuild().catch((err) => {
+        console.error(`${chalk.red("Couldn't parse Quartz configuration:")} ${fp}`)
+        console.log(`Reason: ${chalk.grey(err)}`)
+        process.exit(1)
+      })
+
+      if (argv.bundleInfo) {
+        const outputFileName = "quartz/.quartz-cache/transpiled-build.mjs"
+        const meta = result.metafile.outputs[outputFileName]
+        console.log(
+          `Successfully transpiled ${Object.keys(meta.inputs).length} files (${prettyBytes(
+            meta.bytes,
+          )})`,
+        )
+        console.log(await esbuild.analyzeMetafile(result.metafile, { color: true }))
+      }
+
+      // bypass module cache
+      // https://github.com/nodejs/modules/issues/307
+      const { default: buildQuartz } = await import(cacheFile + `?update=${randomUUID()}`)
+      await buildQuartz(argv, clientRefresh)
+      clientRefresh()
+      buildMutex.release()
+    }
+
+    const rebuild = (clientRefresh) => {
+      timeoutIds.forEach((id) => clearTimeout(id))
+      timeoutIds.clear()
+      timeoutIds.add(setTimeout(() => build(clientRefresh), 250))
+    }
+
+    if (argv.serve) {
+      const connections = []
+      const clientRefresh = () => connections.forEach((conn) => conn.send("rebuild"))
+
+      if (argv.baseDir !== "" && !argv.baseDir.startsWith("/")) {
+        argv.baseDir = "/" + argv.baseDir
+      }
+
+      await build(clientRefresh)
+      const server = http.createServer(async (req, res) => {
+        if (argv.baseDir && !req.url?.startsWith(argv.baseDir)) {
+          console.log(
+            chalk.red(
+              `[404] ${req.url} (warning: link outside of site, this is likely a Quartz bug)`,
+            ),
+          )
+          res.writeHead(404)
+          res.end()
+          return
+        }
+
+        // strip baseDir prefix
+        req.url = req.url?.slice(argv.baseDir.length)
+
+        const serve = async () => {
+          await serveHandler(req, res, {
+            public: argv.output,
+            directoryListing: false,
+          })
+          const status = res.statusCode
+          const statusString =
+            status >= 200 && status < 300 ? chalk.green(`[${status}]`) : chalk.red(`[${status}]`)
+          console.log(statusString + chalk.grey(` ${argv.baseDir}${req.url}`))
+        }
+
+        const redirect = (newFp) => {
+          newFp = argv.baseDir + newFp
+          res.writeHead(302, {
+            Location: newFp,
+          })
+          console.log(chalk.yellow("[302]") + chalk.grey(` ${argv.baseDir}${req.url} -> ${newFp}`))
+          res.end()
+        }
+
+        let fp = req.url?.split("?")[0] ?? "/"
+
+        // handle redirects
+        if (fp.endsWith("/")) {
+          // /trailing/
+          // does /trailing/index.html exist? if so, serve it
+          const indexFp = path.posix.join(fp, "index.html")
+          if (fs.existsSync(path.posix.join(argv.output, indexFp))) {
+            req.url = fp
+            return serve()
+          }
+
+          // does /trailing.html exist? if so, redirect to /trailing
+          let base = fp.slice(0, -1)
+          if (path.extname(base) === "") {
+            base += ".html"
+          }
+          if (fs.existsSync(path.posix.join(argv.output, base))) {
+            return redirect(fp.slice(0, -1))
+          }
+        } else {
+          // /regular
+          // does /regular.html exist? if so, serve it
+          let base = fp
+          if (path.extname(base) === "") {
+            base += ".html"
+          }
+          if (fs.existsSync(path.posix.join(argv.output, base))) {
+            req.url = fp
+            return serve()
+          }
+
+          // does /regular/index.html exist? if so, redirect to /regular/
+          let indexFp = path.posix.join(fp, "index.html")
+          if (fs.existsSync(path.posix.join(argv.output, indexFp))) {
+            return redirect(fp + "/")
+          }
+        }
+
+        return serve()
+      })
+      server.listen(argv.port)
+      const wss = new WebSocketServer({ port: 3001 })
+      wss.on("connection", (ws) => connections.push(ws))
+      console.log(
+        chalk.cyan(
+          `Started a Quartz server listening at http://localhost:${argv.port}${argv.baseDir}`,
+        ),
+      )
+      console.log("hint: exit with ctrl+c")
+      chokidar
+        .watch(["**/*.ts", "**/*.tsx", "**/*.scss", "package.json"], {
+          ignoreInitial: true,
+        })
+        .on("all", async () => {
+          console.log(chalk.yellow("Detected a source code change, doing a hard rebuild..."))
+          rebuild(clientRefresh)
+        })
+    } else {
+      await build(() => {})
+      ctx.dispose()
+    }
+  })
+  .showHelpOnFail(false)
+  .help()
+  .strict()
+  .demandCommand().argv

quartz/bootstrap-worker.mjs

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import workerpool from "workerpool"
+const cacheFile = "./.quartz-cache/transpiled-worker.mjs"
+const { parseFiles } = await import(cacheFile)
+workerpool.worker({
+  parseFiles,
+})

quartz/build.ts

@@ -0,0 +1,172 @@
+import sourceMapSupport from "source-map-support"
+sourceMapSupport.install(options)
+import path from "path"
+import { PerfTimer } from "./util/perf"
+import { rimraf } from "rimraf"
+import { isGitIgnored } from "globby"
+import chalk from "chalk"
+import { parseMarkdown } from "./processors/parse"
+import { filterContent } from "./processors/filter"
+import { emitContent } from "./processors/emit"
+import cfg from "../quartz.config"
+import { FilePath, joinSegments, slugifyFilePath } from "./util/path"
+import chokidar from "chokidar"
+import { ProcessedContent } from "./plugins/vfile"
+import { Argv, BuildCtx } from "./util/ctx"
+import { glob, toPosixPath } from "./util/glob"
+import { trace } from "./util/trace"
+import { options } from "./util/sourcemap"
+import { Mutex } from "async-mutex"
+
+async function buildQuartz(argv: Argv, clientRefresh: () => void) {
+  const ctx: BuildCtx = {
+    argv,
+    cfg,
+    allSlugs: [],
+  }
+
+  const perf = new PerfTimer()
+  const output = argv.output
+
+  const pluginCount = Object.values(cfg.plugins).flat().length
+  const pluginNames = (key: "transformers" | "filters" | "emitters") =>
+    cfg.plugins[key].map((plugin) => plugin.name)
+  if (argv.verbose) {
+    console.log(`Loaded ${pluginCount} plugins`)
+    console.log(`  Transformers: ${pluginNames("transformers").join(", ")}`)
+    console.log(`  Filters: ${pluginNames("filters").join(", ")}`)
+    console.log(`  Emitters: ${pluginNames("emitters").join(", ")}`)
+  }
+
+  perf.addEvent("clean")
+  await rimraf(output)
+  console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`)
+
+  perf.addEvent("glob")
+  const allFiles = await glob("**/*.*", argv.directory, cfg.configuration.ignorePatterns)
+  const fps = allFiles.filter((fp) => fp.endsWith(".md"))
+  console.log(
+    `Found ${fps.length} input files from \`${argv.directory}\` in ${perf.timeSince("glob")}`,
+  )
+
+  const filePaths = fps.map((fp) => joinSegments(argv.directory, fp) as FilePath)
+  ctx.allSlugs = allFiles.map((fp) => slugifyFilePath(fp as FilePath))
+
+  const parsedFiles = await parseMarkdown(ctx, filePaths)
+  const filteredContent = filterContent(ctx, parsedFiles)
+  await emitContent(ctx, filteredContent)
+  console.log(chalk.green(`Done processing ${fps.length} files in ${perf.timeSince()}`))
+
+  if (argv.serve) {
+    return startServing(ctx, parsedFiles, clientRefresh)
+  }
+}
+
+// setup watcher for rebuilds
+async function startServing(
+  ctx: BuildCtx,
+  initialContent: ProcessedContent[],
+  clientRefresh: () => void,
+) {
+  const { argv } = ctx
+
+  const ignored = await isGitIgnored()
+  const contentMap = new Map<FilePath, ProcessedContent>()
+  for (const content of initialContent) {
+    const [_tree, vfile] = content
+    contentMap.set(vfile.data.filePath!, content)
+  }
+
+  const initialSlugs = ctx.allSlugs
+  const buildMutex = new Mutex()
+  const timeoutIds: Set<ReturnType<typeof setTimeout>> = new Set()
+  const toRebuild: Set<FilePath> = new Set()
+  const toRemove: Set<FilePath> = new Set()
+  const trackedAssets: Set<FilePath> = new Set()
+  async function rebuild(fp: string, action: "add" | "change" | "delete") {
+    // don't do anything for gitignored files
+    if (ignored(fp)) {
+      return
+    }
+
+    // dont bother rebuilding for non-content files, just track and refresh
+    fp = toPosixPath(fp)
+    const filePath = joinSegments(argv.directory, fp) as FilePath
+    if (path.extname(fp) !== ".md") {
+      if (action === "add" || action === "change") {
+        trackedAssets.add(filePath)
+      } else if (action === "delete") {
+        trackedAssets.delete(filePath)
+      }
+      clientRefresh()
+      return
+    }
+
+    if (action === "add" || action === "change") {
+      toRebuild.add(filePath)
+    } else if (action === "delete") {
+      toRemove.add(filePath)
+    }
+
+    timeoutIds.forEach((id) => clearTimeout(id))
+
+    // debounce rebuilds every 250ms
+    timeoutIds.add(
+      setTimeout(async () => {
+        await buildMutex.acquire()
+        const perf = new PerfTimer()
+        console.log(chalk.yellow("Detected change, rebuilding..."))
+        try {
+          const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))
+
+          const trackedSlugs = [...new Set([...contentMap.keys(), ...toRebuild, ...trackedAssets])]
+            .filter((fp) => !toRemove.has(fp))
+            .map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))
+
+          ctx.allSlugs = [...new Set([...initialSlugs, ...trackedSlugs])]
+          const parsedContent = await parseMarkdown(ctx, filesToRebuild)
+          for (const content of parsedContent) {
+            const [_tree, vfile] = content
+            contentMap.set(vfile.data.filePath!, content)
+          }
+
+          for (const fp of toRemove) {
+            contentMap.delete(fp)
+          }
+
+          await rimraf(argv.output)
+          const parsedFiles = [...contentMap.values()]
+          const filteredContent = filterContent(ctx, parsedFiles)
+          await emitContent(ctx, filteredContent)
+          console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
+        } catch {
+          console.log(chalk.yellow(`Rebuild failed. Waiting on a change to fix the error...`))
+        }
+
+        clientRefresh()
+        toRebuild.clear()
+        toRemove.clear()
+        buildMutex.release()
+      }, 250),
+    )
+  }
+
+  const watcher = chokidar.watch(".", {
+    persistent: true,
+    cwd: argv.directory,
+    ignoreInitial: true,
+  })
+
+  watcher
+    .on("add", (fp) => rebuild(fp, "add"))
+    .on("change", (fp) => rebuild(fp, "change"))
+    .on("unlink", (fp) => rebuild(fp, "delete"))
+}
+
+export default async (argv: Argv, clientRefresh: () => void) => {
+  try {
+    return await buildQuartz(argv, clientRefresh)
+  } catch (err) {
+    trace("\nExiting Quartz due to a fatal error", err as Error)
+  }
+}

quartz/cfg.ts

@@ -0,0 +1,48 @@
+import { QuartzComponent } from "./components/types"
+import { PluginTypes } from "./plugins/types"
+import { Theme } from "./util/theme"
+
+export type Analytics =
+  | null
+  | {
+      provider: "plausible"
+    }
+  | {
+      provider: "google"
+      tagId: string
+    }
+
+export interface GlobalConfiguration {
+  pageTitle: string
+  /** Whether to enable single-page-app style rendering. this prevents flashes of unstyled content and improves smoothness of Quartz */
+  enableSPA: boolean
+  /** Whether to display Wikipedia-style popovers when hovering over links */
+  enablePopovers: boolean
+  /** Analytics mode */
+  analytics: Analytics
+  /** Glob patterns to not search */
+  ignorePatterns: string[]
+  /** Base URL to use for CNAME files, sitemaps, and RSS feeds that require an absolute URL.
+   *   Quartz will avoid using this as much as possible and use relative URLs most of the time
+   */
+  baseUrl?: string
+  theme: Theme
+}
+
+export interface QuartzConfig {
+  configuration: GlobalConfiguration
+  plugins: PluginTypes
+}
+
+export interface FullPageLayout {
+  head: QuartzComponent
+  header: QuartzComponent[]
+  beforeBody: QuartzComponent[]
+  pageBody: QuartzComponent
+  left: QuartzComponent[]
+  right: QuartzComponent[]
+  footer: QuartzComponent
+}
+
+export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
+export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer">

quartz/components/ArticleTitle.tsx

@@ -0,0 +1,17 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+function ArticleTitle({ fileData }: QuartzComponentProps) {
+  const title = fileData.frontmatter?.title
+  if (title) {
+    return <h1 class="article-title">{title}</h1>
+  } else {
+    return null
+  }
+}
+ArticleTitle.css = `
+.article-title {
+  margin: 2rem 0 0 0;
+}
+`
+
+export default (() => ArticleTitle) satisfies QuartzComponentConstructor

quartz/components/Backlinks.tsx

@@ -0,0 +1,29 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import style from "./styles/backlinks.scss"
+import { resolveRelative, simplifySlug } from "../util/path"
+
+function Backlinks({ fileData, allFiles }: QuartzComponentProps) {
+  const slug = simplifySlug(fileData.slug!)
+  const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
+  return (
+    <div class="backlinks">
+      <h3>Backlinks</h3>
+      <ul class="overflow">
+        {backlinkFiles.length > 0 ? (
+          backlinkFiles.map((f) => (
+            <li>
+              <a href={resolveRelative(fileData.slug!, f.slug!)} class="internal">
+                {f.frontmatter?.title}
+              </a>
+            </li>
+          ))
+        ) : (
+          <li>No backlinks found</li>
+        )}
+      </ul>
+    </div>
+  )
+}
+
+Backlinks.css = style
+export default (() => Backlinks) satisfies QuartzComponentConstructor

quartz/components/Body.tsx

@@ -0,0 +1,13 @@
+// @ts-ignore
+import clipboardScript from "./scripts/clipboard.inline"
+import clipboardStyle from "./styles/clipboard.scss"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+function Body({ children }: QuartzComponentProps) {
+  return <div id="quartz-body">{children}</div>
+}
+
+Body.afterDOMLoaded = clipboardScript
+Body.css = clipboardStyle
+
+export default (() => Body) satisfies QuartzComponentConstructor

quartz/components/ContentMeta.tsx

@@ -0,0 +1,29 @@
+import { formatDate } from "./Date"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import readingTime from "reading-time"
+
+export default (() => {
+  function ContentMetadata({ fileData }: QuartzComponentProps) {
+    const text = fileData.text
+    if (text) {
+      const segments: string[] = []
+      const { text: timeTaken, words: _words } = readingTime(text)
+      if (fileData.dates?.modified) {
+        segments.push(formatDate(fileData.dates.modified))
+      }
+
+      segments.push(timeTaken)
+      return <p class="content-meta">{segments.join(", ")}</p>
+    } else {
+      return null
+    }
+  }
+
+  ContentMetadata.css = `
+  .content-meta {
+    margin-top: 0;
+    color: var(--gray);
+  }
+  `
+  return ContentMetadata
+}) satisfies QuartzComponentConstructor

quartz/components/Darkmode.tsx

@@ -0,0 +1,51 @@
+// @ts-ignore: this is safe, we don't want to actually make darkmode.inline.ts a module as
+// modules are automatically deferred and we don't want that to happen for critical beforeDOMLoads
+// see: https://v8.dev/features/modules#defer
+import darkmodeScript from "./scripts/darkmode.inline"
+import styles from "./styles/darkmode.scss"
+import { QuartzComponentConstructor } from "./types"
+
+function Darkmode() {
+  return (
+    <div class="darkmode">
+      <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
+      <label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          version="1.1"
+          id="dayIcon"
+          x="0px"
+          y="0px"
+          viewBox="0 0 35 35"
+          style="enable-background:new 0 0 35 35;"
+          xmlSpace="preserve"
+        >
+          <title>Light mode</title>
+          <path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5    S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5    C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6    C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9    c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44    l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5    c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06    L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z     M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2    C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29    c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7    C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5    c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path>
+        </svg>
+      </label>
+      <label id="toggle-label-dark" for="darkmode-toggle" tabIndex={-1}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          version="1.1"
+          id="nightIcon"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          style="enable-background='new 0 0 100 100'"
+          xmlSpace="preserve"
+        >
+          <title>Dark mode</title>
+          <path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571  C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23  c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369  c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65  c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path>
+        </svg>
+      </label>
+    </div>
+  )
+}
+
+Darkmode.beforeDOMLoaded = darkmodeScript
+Darkmode.css = styles
+
+export default (() => Darkmode) satisfies QuartzComponentConstructor

quartz/components/Date.tsx

@@ -0,0 +1,15 @@
+interface Props {
+  date: Date
+}
+
+export function formatDate(d: Date): string {
+  return d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+  })
+}
+
+export function Date({ date }: Props) {
+  return <>{formatDate(date)}</>
+}

quartz/components/DesktopOnly.tsx

@@ -0,0 +1,18 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+export default ((component?: QuartzComponent) => {
+  if (component) {
+    const Component = component
+    function DesktopOnly(props: QuartzComponentProps) {
+      return <Component displayClass="desktop-only" {...props} />
+    }
+
+    DesktopOnly.displayName = component.displayName
+    DesktopOnly.afterDOMLoaded = component?.afterDOMLoaded
+    DesktopOnly.beforeDOMLoaded = component?.beforeDOMLoaded
+    DesktopOnly.css = component?.css
+    return DesktopOnly
+  } else {
+    return () => <></>
+  }
+}) satisfies QuartzComponentConstructor

quartz/components/Footer.tsx

@@ -0,0 +1,32 @@
+import { QuartzComponentConstructor } from "./types"
+import style from "./styles/footer.scss"
+import { version } from "../../package.json"
+
+interface Options {
+  links: Record<string, string>
+}
+
+export default ((opts?: Options) => {
+  function Footer() {
+    const year = new Date().getFullYear()
+    const links = opts?.links ?? []
+    return (
+      <footer>
+        <hr />
+        <p>
+          Created with <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}
+        </p>
+        <ul>
+          {Object.entries(links).map(([text, link]) => (
+            <li>
+              <a href={link}>{text}</a>
+            </li>
+          ))}
+        </ul>
+      </footer>
+    )
+  }
+
+  Footer.css = style
+  return Footer
+}) satisfies QuartzComponentConstructor

quartz/components/Graph.tsx

@@ -0,0 +1,94 @@
+import { QuartzComponentConstructor } from "./types"
+// @ts-ignore
+import script from "./scripts/graph.inline"
+import style from "./styles/graph.scss"
+
+export interface D3Config {
+  drag: boolean
+  zoom: boolean
+  depth: number
+  scale: number
+  repelForce: number
+  centerForce: number
+  linkDistance: number
+  fontSize: number
+  opacityScale: number
+}
+
+interface GraphOptions {
+  localGraph: Partial<D3Config> | undefined
+  globalGraph: Partial<D3Config> | undefined
+}
+
+const defaultOptions: GraphOptions = {
+  localGraph: {
+    drag: true,
+    zoom: true,
+    depth: 1,
+    scale: 1.1,
+    repelForce: 0.5,
+    centerForce: 0.3,
+    linkDistance: 30,
+    fontSize: 0.6,
+    opacityScale: 1,
+  },
+  globalGraph: {
+    drag: true,
+    zoom: true,
+    depth: -1,
+    scale: 0.9,
+    repelForce: 0.5,
+    centerForce: 0.3,
+    linkDistance: 30,
+    fontSize: 0.6,
+    opacityScale: 1,
+  },
+}
+
+export default ((opts?: GraphOptions) => {
+  function Graph() {
+    const localGraph = { ...opts?.localGraph, ...defaultOptions.localGraph }
+    const globalGraph = { ...opts?.globalGraph, ...defaultOptions.globalGraph }
+    return (
+      <div class="graph">
+        <h3>Graph View</h3>
+        <div class="graph-outer">
+          <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
+          <svg
+            version="1.1"
+            id="global-graph-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            x="0px"
+            y="0px"
+            viewBox="0 0 55 55"
+            fill="currentColor"
+            xmlSpace="preserve"
+          >
+            <path
+              d="M49,0c-3.309,0-6,2.691-6,6c0,1.035,0.263,2.009,0.726,2.86l-9.829,9.829C32.542,17.634,30.846,17,29,17
+	s-3.542,0.634-4.898,1.688l-7.669-7.669C16.785,10.424,17,9.74,17,9c0-2.206-1.794-4-4-4S9,6.794,9,9s1.794,4,4,4
+	c0.74,0,1.424-0.215,2.019-0.567l7.669,7.669C21.634,21.458,21,23.154,21,25s0.634,3.542,1.688,4.897L10.024,42.562
+	C8.958,41.595,7.549,41,6,41c-3.309,0-6,2.691-6,6s2.691,6,6,6s6-2.691,6-6c0-1.035-0.263-2.009-0.726-2.86l12.829-12.829
+	c1.106,0.86,2.44,1.436,3.898,1.619v10.16c-2.833,0.478-5,2.942-5,5.91c0,3.309,2.691,6,6,6s6-2.691,6-6c0-2.967-2.167-5.431-5-5.91
+	v-10.16c1.458-0.183,2.792-0.759,3.898-1.619l7.669,7.669C41.215,39.576,41,40.26,41,41c0,2.206,1.794,4,4,4s4-1.794,4-4
+	s-1.794-4-4-4c-0.74,0-1.424,0.215-2.019,0.567l-7.669-7.669C36.366,28.542,37,26.846,37,25s-0.634-3.542-1.688-4.897l9.665-9.665
+	C46.042,11.405,47.451,12,49,12c3.309,0,6-2.691,6-6S52.309,0,49,0z M11,9c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2
+	S11,10.103,11,9z M6,51c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S8.206,51,6,51z M33,49c0,2.206-1.794,4-4,4s-4-1.794-4-4
+	s1.794-4,4-4S33,46.794,33,49z M29,31c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S32.309,31,29,31z M47,41c0,1.103-0.897,2-2,2
+	s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"
+            />
+          </svg>
+        </div>
+        <div id="global-graph-outer">
+          <div id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></div>
+        </div>
+      </div>
+    )
+  }
+
+  Graph.css = style
+  Graph.afterDOMLoaded = script
+
+  return Graph
+}) satisfies QuartzComponentConstructor

quartz/components/Head.tsx

@@ -0,0 +1,40 @@
+import { joinSegments, pathToRoot } from "../util/path"
+import { JSResourceToScriptElement } from "../util/resources"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+export default (() => {
+  function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
+    const title = fileData.frontmatter?.title ?? "Untitled"
+    const description = fileData.description?.trim() ?? "No description provided"
+    const { css, js } = externalResources
+    const baseDir = pathToRoot(fileData.slug!)
+    const iconPath = joinSegments(baseDir, "static/icon.png")
+    const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`
+
+    return (
+      <head>
+        <title>{title}</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        {cfg.baseUrl && <meta property="og:image" content={ogImagePath} />}
+        <meta property="og:width" content="1200" />
+        <meta property="og:height" content="675" />
+        <link rel="icon" href={iconPath} />
+        <meta name="description" content={description} />
+        <meta name="generator" content="Quartz" />
+        <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 />
+        ))}
+        {js
+          .filter((resource) => resource.loadTime === "beforeDOMReady")
+          .map((res) => JSResourceToScriptElement(res, true))}
+      </head>
+    )
+  }
+
+  return Head
+}) satisfies QuartzComponentConstructor

quartz/components/Header.tsx

@@ -0,0 +1,22 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+function Header({ children }: QuartzComponentProps) {
+  return children.length > 0 ? <header>{children}</header> : null
+}
+
+Header.css = `
+header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 2rem 0;
+  gap: 1.5rem;
+}
+
+header h1 {
+  margin: 0;
+  flex: auto;
+}
+`
+
+export default (() => Header) satisfies QuartzComponentConstructor

quartz/components/MobileOnly.tsx

@@ -0,0 +1,18 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+export default ((component?: QuartzComponent) => {
+  if (component) {
+    const Component = component
+    function MobileOnly(props: QuartzComponentProps) {
+      return <Component displayClass="mobile-only" {...props} />
+    }
+
+    MobileOnly.displayName = component.displayName
+    MobileOnly.afterDOMLoaded = component?.afterDOMLoaded
+    MobileOnly.beforeDOMLoaded = component?.beforeDOMLoaded
+    MobileOnly.css = component?.css
+    return MobileOnly
+  } else {
+    return () => <></>
+  }
+}) satisfies QuartzComponentConstructor

quartz/components/PageList.tsx

@@ -0,0 +1,82 @@
+import { FullSlug, resolveRelative } from "../util/path"
+import { QuartzPluginData } from "../plugins/vfile"
+import { Date } from "./Date"
+import { QuartzComponentProps } from "./types"
+
+export function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): number {
+  if (f1.dates && f2.dates) {
+    // sort descending by last modified
+    return f2.dates.modified.getTime() - f1.dates.modified.getTime()
+  } else if (f1.dates && !f2.dates) {
+    // prioritize files with dates
+    return -1
+  } else if (!f1.dates && f2.dates) {
+    return 1
+  }
+
+  // otherwise, sort lexographically by title
+  const f1Title = f1.frontmatter?.title.toLowerCase() ?? ""
+  const f2Title = f2.frontmatter?.title.toLowerCase() ?? ""
+  return f1Title.localeCompare(f2Title)
+}
+
+type Props = {
+  limit?: number
+} & QuartzComponentProps
+
+export function PageList({ fileData, allFiles, limit }: Props) {
+  let list = allFiles.sort(byDateAndAlphabetical)
+  if (limit) {
+    list = list.slice(0, limit)
+  }
+
+  return (
+    <ul class="section-ul">
+      {list.map((page) => {
+        const title = page.frontmatter?.title
+        const tags = page.frontmatter?.tags ?? []
+
+        return (
+          <li class="section-li">
+            <div class="section">
+              {page.dates && (
+                <p class="meta">
+                  <Date date={page.dates.modified} />
+                </p>
+              )}
+              <div class="desc">
+                <h3>
+                  <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
+                    {title}
+                  </a>
+                </h3>
+              </div>
+              <ul class="tags">
+                {tags.map((tag) => (
+                  <li>
+                    <a
+                      class="internal tag-link"
+                      href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
+                    >
+                      #{tag}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+PageList.css = `
+.section h3 {
+  margin: 0;
+}
+
+.section > .tags {
+  margin: 0;
+}
+`

quartz/components/PageTitle.tsx

@@ -0,0 +1,20 @@
+import { pathToRoot } from "../util/path"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+function PageTitle({ fileData, cfg }: QuartzComponentProps) {
+  const title = cfg?.pageTitle ?? "Untitled Quartz"
+  const baseDir = pathToRoot(fileData.slug!)
+  return (
+    <h1 class="page-title">
+      <a href={baseDir}>{title}</a>
+    </h1>
+  )
+}
+
+PageTitle.css = `
+.page-title {
+  margin: 0;
+}
+`
+
+export default (() => PageTitle) satisfies QuartzComponentConstructor

quartz/components/RecentNotes.tsx

@@ -0,0 +1,81 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
+import { QuartzPluginData } from "../plugins/vfile"
+import { byDateAndAlphabetical } from "./PageList"
+import style from "./styles/recentNotes.scss"
+import { Date } from "./Date"
+
+interface Options {
+  title: string
+  limit: number
+  linkToMore: SimpleSlug | false
+  filter: (f: QuartzPluginData) => boolean
+  sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number
+}
+
+const defaultOptions: Options = {
+  title: "Recent Notes",
+  limit: 3,
+  linkToMore: false,
+  filter: () => true,
+  sort: byDateAndAlphabetical,
+}
+
+export default ((userOpts?: Partial<Options>) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  function RecentNotes(props: QuartzComponentProps) {
+    const { allFiles, fileData, displayClass } = props
+    const pages = allFiles.filter(opts.filter).sort(opts.sort)
+    const remaining = Math.max(0, pages.length - opts.limit)
+    return (
+      <div class={`recent-notes ${displayClass}`}>
+        <h3>{opts.title}</h3>
+        <ul class="recent-ul">
+          {pages.slice(0, opts.limit).map((page) => {
+            const title = page.frontmatter?.title
+            const tags = page.frontmatter?.tags ?? []
+
+            return (
+              <li class="recent-li">
+                <div class="section">
+                  <div class="desc">
+                    <h3>
+                      <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
+                        {title}
+                      </a>
+                    </h3>
+                  </div>
+                  {page.dates && (
+                    <p class="meta">
+                      <Date date={page.dates.modified} />
+                    </p>
+                  )}
+                  <ul class="tags">
+                    {tags.map((tag) => (
+                      <li>
+                        <a
+                          class="internal tag-link"
+                          href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
+                        >
+                          #{tag}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+        {opts.linkToMore && remaining > 0 && (
+          <p>
+            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>See {remaining} more →</a>
+          </p>
+        )}
+      </div>
+    )
+  }
+
+  RecentNotes.css = style
+  return RecentNotes
+}) satisfies QuartzComponentConstructor

quartz/components/Search.tsx

@@ -0,0 +1,49 @@
+import { QuartzComponentConstructor } from "./types"
+import style from "./styles/search.scss"
+// @ts-ignore
+import script from "./scripts/search.inline"
+
+export default (() => {
+  function Search() {
+    return (
+      <div class="search">
+        <div id="search-icon">
+          <p>Search</p>
+          <div></div>
+          <svg
+            tabIndex={0}
+            aria-labelledby="title desc"
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 19.9 19.7"
+          >
+            <title id="title">Search</title>
+            <desc id="desc">Search</desc>
+            <g class="search-path" fill="none">
+              <path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
+              <circle cx="8" cy="8" r="7" />
+            </g>
+          </svg>
+        </div>
+        <div id="search-container">
+          <div id="search-space">
+            <input
+              autocomplete="off"
+              id="search-bar"
+              name="search"
+              type="text"
+              aria-label="Search for something"
+              placeholder="Search for something"
+            />
+            <div id="results-container"></div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  Search.afterDOMLoaded = script
+  Search.css = style
+
+  return Search
+}) satisfies QuartzComponentConstructor

quartz/components/Spacer.tsx

@@ -0,0 +1,8 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+function Spacer({ displayClass }: QuartzComponentProps) {
+  const className = displayClass ? `spacer ${displayClass}` : "spacer"
+  return <div class={className}></div>
+}
+
+export default (() => Spacer) satisfies QuartzComponentConstructor

quartz/components/TableOfContents.tsx

@@ -0,0 +1,84 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import legacyStyle from "./styles/legacyToc.scss"
+import modernStyle from "./styles/toc.scss"
+
+// @ts-ignore
+import script from "./scripts/toc.inline"
+
+interface Options {
+  layout: "modern" | "legacy"
+}
+
+const defaultOptions: Options = {
+  layout: "modern",
+}
+
+function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
+  if (!fileData.toc) {
+    return null
+  }
+
+  return (
+    <div class={`toc ${displayClass}`}>
+      <button type="button" id="toc">
+        <h3>Table of Contents</h3>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="fold"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </button>
+      <div id="toc-content">
+        <ul class="overflow">
+          {fileData.toc.map((tocEntry) => (
+            <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
+              <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
+                {tocEntry.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+TableOfContents.css = modernStyle
+TableOfContents.afterDOMLoaded = script
+
+function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
+  if (!fileData.toc) {
+    return null
+  }
+
+  return (
+    <details id="toc" open>
+      <summary>
+        <h3>Table of Contents</h3>
+      </summary>
+      <ul>
+        {fileData.toc.map((tocEntry) => (
+          <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
+            <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
+              {tocEntry.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </details>
+  )
+}
+LegacyTableOfContents.css = legacyStyle
+
+export default ((opts?: Partial<Options>) => {
+  const layout = opts?.layout ?? defaultOptions.layout
+  return layout === "modern" ? TableOfContents : LegacyTableOfContents
+}) satisfies QuartzComponentConstructor

quartz/components/TagList.tsx

@@ -0,0 +1,51 @@
+import { pathToRoot, slugTag } from "../util/path"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+function TagList({ fileData }: QuartzComponentProps) {
+  const tags = fileData.frontmatter?.tags
+  const baseDir = pathToRoot(fileData.slug!)
+  if (tags && tags.length > 0) {
+    return (
+      <ul class="tags">
+        {tags.map((tag) => {
+          const display = `#${tag}`
+          const linkDest = baseDir + `/tags/${slugTag(tag)}`
+          return (
+            <li>
+              <a href={linkDest} class="internal tag-link">
+                {display}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    )
+  } else {
+    return null
+  }
+}
+
+TagList.css = `
+.tags {
+  list-style: none;
+  display: flex;
+  padding-left: 0;
+  gap: 0.4rem;
+  margin: 1rem 0;
+}
+  
+.tags > li {
+  display: inline-block;
+  white-space: nowrap;
+  margin: 0;
+  overflow-wrap: normal;
+}
+
+a.tag-link {
+  border-radius: 8px;
+  background-color: var(--highlight);
+  padding: 0.2rem 0.5rem;
+}
+`
+
+export default (() => TagList) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -0,0 +1,39 @@
+import ArticleTitle from "./ArticleTitle"
+import Content from "./pages/Content"
+import TagContent from "./pages/TagContent"
+import FolderContent from "./pages/FolderContent"
+import Darkmode from "./Darkmode"
+import Head from "./Head"
+import PageTitle from "./PageTitle"
+import ContentMeta from "./ContentMeta"
+import Spacer from "./Spacer"
+import TableOfContents from "./TableOfContents"
+import TagList from "./TagList"
+import Graph from "./Graph"
+import Backlinks from "./Backlinks"
+import Search from "./Search"
+import Footer from "./Footer"
+import DesktopOnly from "./DesktopOnly"
+import MobileOnly from "./MobileOnly"
+import RecentNotes from "./RecentNotes"
+
+export {
+  ArticleTitle,
+  Content,
+  TagContent,
+  FolderContent,
+  Darkmode,
+  Head,
+  PageTitle,
+  ContentMeta,
+  Spacer,
+  TableOfContents,
+  TagList,
+  Graph,
+  Backlinks,
+  Search,
+  Footer,
+  DesktopOnly,
+  MobileOnly,
+  RecentNotes,
+}

quartz/components/pages/Content.tsx

@@ -0,0 +1,11 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
+import { toJsxRuntime } from "hast-util-to-jsx-runtime"
+
+function Content({ tree }: QuartzComponentProps) {
+  // @ts-ignore (preact makes it angry)
+  const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
+  return <article class="popover-hint">{content}</article>
+}
+
+export default (() => Content) satisfies QuartzComponentConstructor

quartz/components/pages/FolderContent.tsx

@@ -0,0 +1,46 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
+import { toJsxRuntime } from "hast-util-to-jsx-runtime"
+import path from "path"
+
+import style from "../styles/listPage.scss"
+import { PageList } from "../PageList"
+import { _stripSlashes, simplifySlug } from "../../util/path"
+import { Root } from "hast"
+
+function FolderContent(props: QuartzComponentProps) {
+  const { tree, fileData, allFiles } = props
+  const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
+  const allPagesInFolder = allFiles.filter((file) => {
+    const fileSlug = _stripSlashes(simplifySlug(file.slug!))
+    const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
+    const folderParts = folderSlug.split(path.posix.sep)
+    const fileParts = fileSlug.split(path.posix.sep)
+    const isDirectChild = fileParts.length === folderParts.length + 1
+    return prefixed && isDirectChild
+  })
+
+  const listProps = {
+    ...props,
+    allFiles: allPagesInFolder,
+  }
+
+  const content =
+    (tree as Root).children.length === 0
+      ? fileData.description
+      : // @ts-ignore
+        toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
+
+  return (
+    <div class="popover-hint">
+      <article>{content}</article>
+      <p>{allPagesInFolder.length} items under this folder.</p>
+      <div>
+        <PageList {...listProps} />
+      </div>
+    </div>
+  )
+}
+
+FolderContent.css = style + PageList.css
+export default (() => FolderContent) satisfies QuartzComponentConstructor

quartz/components/pages/TagContent.tsx

@@ -0,0 +1,91 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
+import { toJsxRuntime } from "hast-util-to-jsx-runtime"
+import style from "../styles/listPage.scss"
+import { PageList } from "../PageList"
+import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
+import { QuartzPluginData } from "../../plugins/vfile"
+import { Root } from "hast"
+
+const numPages = 10
+function TagContent(props: QuartzComponentProps) {
+  const { tree, fileData, allFiles } = props
+  const slug = fileData.slug
+
+  if (!(slug?.startsWith("tags/") || slug === "tags")) {
+    throw new Error(`Component "TagContent" tried to render a non-tag page: ${slug}`)
+  }
+
+  const tag = simplifySlug(slug.slice("tags/".length) as FullSlug)
+  const allPagesWithTag = (tag: string) =>
+    allFiles.filter((file) =>
+      (file.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes).includes(tag),
+    )
+
+  const content =
+    (tree as Root).children.length === 0
+      ? fileData.description
+      : // @ts-ignore
+        toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
+
+  if (tag === "") {
+    const tags = [...new Set(allFiles.flatMap((data) => data.frontmatter?.tags ?? []))]
+    const tagItemMap: Map<string, QuartzPluginData[]> = new Map()
+    for (const tag of tags) {
+      tagItemMap.set(tag, allPagesWithTag(tag))
+    }
+
+    return (
+      <div class="popover-hint">
+        <article>{content}</article>
+        <p>Found {tags.length} total tags.</p>
+        <div>
+          {tags.map((tag) => {
+            const pages = tagItemMap.get(tag)!
+            const listProps = {
+              ...props,
+              allFiles: pages,
+            }
+
+            const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`)[0]
+            const content = contentPage?.description
+            return (
+              <div>
+                <h2>
+                  <a class="internal tag-link" href={`./${tag}`}>
+                    #{tag}
+                  </a>
+                </h2>
+                {content && <p>{content}</p>}
+                <p>
+                  {pages.length} items with this tag.{" "}
+                  {pages.length > numPages && `Showing first ${numPages}.`}
+                </p>
+                <PageList limit={numPages} {...listProps} />
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  } else {
+    const pages = allPagesWithTag(tag)
+    const listProps = {
+      ...props,
+      allFiles: pages,
+    }
+
+    return (
+      <div class="popover-hint">
+        <article>{content}</article>
+        <p>{pages.length} items with this tag.</p>
+        <div>
+          <PageList {...listProps} />
+        </div>
+      </div>
+    )
+  }
+}
+
+TagContent.css = style + PageList.css
+export default (() => TagContent) satisfies QuartzComponentConstructor

quartz/components/renderPage.tsx

@@ -0,0 +1,117 @@
+import { render } from "preact-render-to-string"
+import { QuartzComponent, QuartzComponentProps } from "./types"
+import HeaderConstructor from "./Header"
+import BodyConstructor from "./Body"
+import { JSResourceToScriptElement, StaticResources } from "../util/resources"
+import { FullSlug, joinSegments, pathToRoot } from "../util/path"
+
+interface RenderComponents {
+  head: QuartzComponent
+  header: QuartzComponent[]
+  beforeBody: QuartzComponent[]
+  pageBody: QuartzComponent
+  left: QuartzComponent[]
+  right: QuartzComponent[]
+  footer: QuartzComponent
+}
+
+export function pageResources(slug: FullSlug, staticResources: StaticResources): StaticResources {
+  const baseDir = pathToRoot(slug)
+
+  const contentIndexPath = joinSegments(baseDir, "static/contentIndex.json")
+  const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())`
+
+  return {
+    css: [joinSegments(baseDir, "index.css"), ...staticResources.css],
+    js: [
+      {
+        src: joinSegments(baseDir, "prescript.js"),
+        loadTime: "beforeDOMReady",
+        contentType: "external",
+      },
+      {
+        loadTime: "beforeDOMReady",
+        contentType: "inline",
+        spaPreserve: true,
+        script: contentIndexScript,
+      },
+      ...staticResources.js,
+      {
+        src: joinSegments(baseDir, "postscript.js"),
+        loadTime: "afterDOMReady",
+        moduleType: "module",
+        contentType: "external",
+      },
+    ],
+  }
+}
+
+export function renderPage(
+  slug: FullSlug,
+  componentData: QuartzComponentProps,
+  components: RenderComponents,
+  pageResources: StaticResources,
+): string {
+  const {
+    head: Head,
+    header,
+    beforeBody,
+    pageBody: Content,
+    left,
+    right,
+    footer: Footer,
+  } = components
+  const Header = HeaderConstructor()
+  const Body = BodyConstructor()
+
+  const LeftComponent = (
+    <div class="left sidebar">
+      {left.map((BodyComponent) => (
+        <BodyComponent {...componentData} />
+      ))}
+    </div>
+  )
+
+  const RightComponent = (
+    <div class="right sidebar">
+      {right.map((BodyComponent) => (
+        <BodyComponent {...componentData} />
+      ))}
+    </div>
+  )
+
+  const doc = (
+    <html>
+      <Head {...componentData} />
+      <body data-slug={slug}>
+        <div id="quartz-root" class="page">
+          <Body {...componentData}>
+            {LeftComponent}
+            <div class="center">
+              <div class="page-header">
+                <Header {...componentData}>
+                  {header.map((HeaderComponent) => (
+                    <HeaderComponent {...componentData} />
+                  ))}
+                </Header>
+                <div class="popover-hint">
+                  {beforeBody.map((BodyComponent) => (
+                    <BodyComponent {...componentData} />
+                  ))}
+                </div>
+              </div>
+              <Content {...componentData} />
+            </div>
+            {RightComponent}
+          </Body>
+          <Footer {...componentData} />
+        </div>
+      </body>
+      {pageResources.js
+        .filter((resource) => resource.loadTime === "afterDOMReady")
+        .map((res) => JSResourceToScriptElement(res))}
+    </html>
+  )
+
+  return "<!DOCTYPE html>\n" + render(doc)
+}

quartz/components/scripts/callout.inline.ts

@@ -0,0 +1,44 @@
+function toggleCallout(this: HTMLElement) {
+  const outerBlock = this.parentElement!
+  outerBlock.classList.toggle(`is-collapsed`)
+  const collapsed = outerBlock.classList.contains(`is-collapsed`)
+  const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight
+  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() {
+  const collapsible = document.getElementsByClassName(
+    `callout is-collapsible`,
+  ) as HTMLCollectionOf<HTMLElement>
+  for (const div of collapsible) {
+    const title = div.firstElementChild
+
+    if (title) {
+      title.removeEventListener(`click`, toggleCallout)
+      title.addEventListener(`click`, toggleCallout)
+
+      const collapsed = div.classList.contains(`is-collapsed`)
+      const height = collapsed ? title.scrollHeight : div.scrollHeight
+      div.style.maxHeight = height + `px`
+    }
+  }
+}
+
+document.addEventListener(`nav`, setupCallout)
+window.addEventListener(`resize`, setupCallout)

quartz/components/scripts/clipboard.inline.ts

@@ -0,0 +1,33 @@
+const svgCopy =
+  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>'
+const svgCheck =
+  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'
+
+document.addEventListener("nav", () => {
+  const els = document.getElementsByTagName("pre")
+  for (let i = 0; i < els.length; i++) {
+    const codeBlock = els[i].getElementsByTagName("code")[0]
+    if (codeBlock) {
+      const source = codeBlock.innerText.replace(/\n\n/g, "\n")
+      const button = document.createElement("button")
+      button.className = "clipboard-button"
+      button.type = "button"
+      button.innerHTML = svgCopy
+      button.ariaLabel = "Copy source"
+      button.addEventListener("click", () => {
+        navigator.clipboard.writeText(source).then(
+          () => {
+            button.blur()
+            button.innerHTML = svgCheck
+            setTimeout(() => {
+              button.innerHTML = svgCopy
+              button.style.borderColor = ""
+            }, 2000)
+          },
+          (error) => console.error(error),
+        )
+      })
+      els[i].prepend(button)
+    }
+  }
+})

quartz/components/scripts/darkmode.inline.ts

@@ -0,0 +1,23 @@
+const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"
+const currentTheme = localStorage.getItem("theme") ?? userPref
+document.documentElement.setAttribute("saved-theme", currentTheme)
+
+document.addEventListener("nav", () => {
+  const switchTheme = (e: any) => {
+    if (e.target.checked) {
+      document.documentElement.setAttribute("saved-theme", "dark")
+      localStorage.setItem("theme", "dark")
+    } else {
+      document.documentElement.setAttribute("saved-theme", "light")
+      localStorage.setItem("theme", "light")
+    }
+  }
+
+  // Darkmode toggle
+  const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement
+  toggleSwitch.removeEventListener("change", switchTheme)
+  toggleSwitch.addEventListener("change", switchTheme)
+  if (currentTheme === "dark") {
+    toggleSwitch.checked = true
+  }
+})

quartz/components/scripts/graph.inline.ts

@@ -0,0 +1,307 @@
+import type { ContentDetails } from "../../plugins/emitters/contentIndex"
+import * as d3 from "d3"
+import { registerEscapeHandler, removeAllChildren } from "./util"
+import { FullSlug, SimpleSlug, getFullSlug, resolveRelative, simplifySlug } from "../../util/path"
+
+type NodeData = {
+  id: SimpleSlug
+  text: string
+  tags: string[]
+} & d3.SimulationNodeDatum
+
+type LinkData = {
+  source: SimpleSlug
+  target: SimpleSlug
+}
+
+const localStorageKey = "graph-visited"
+function getVisited(): Set<SimpleSlug> {
+  return new Set(JSON.parse(localStorage.getItem(localStorageKey) ?? "[]"))
+}
+
+function addToVisited(slug: SimpleSlug) {
+  const visited = getVisited()
+  visited.add(slug)
+  localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
+}
+
+async function renderGraph(container: string, fullSlug: FullSlug) {
+  const slug = simplifySlug(fullSlug)
+  const visited = getVisited()
+  const graph = document.getElementById(container)
+  if (!graph) return
+  removeAllChildren(graph)
+
+  let {
+    drag: enableDrag,
+    zoom: enableZoom,
+    depth,
+    scale,
+    repelForce,
+    centerForce,
+    linkDistance,
+    fontSize,
+    opacityScale,
+  } = JSON.parse(graph.dataset["cfg"]!)
+
+  const data = await fetchData
+
+  const links: LinkData[] = []
+  for (const [src, details] of Object.entries<ContentDetails>(data)) {
+    const source = simplifySlug(src as FullSlug)
+    const outgoing = details.links ?? []
+    for (const dest of outgoing) {
+      if (dest in data) {
+        links.push({ source, target: dest })
+      }
+    }
+  }
+
+  const neighbourhood = new Set<SimpleSlug>()
+  const wl: (SimpleSlug | "__SENTINEL")[] = [slug, "__SENTINEL"]
+  if (depth >= 0) {
+    while (depth >= 0 && wl.length > 0) {
+      // compute neighbours
+      const cur = wl.shift()!
+      if (cur === "__SENTINEL") {
+        depth--
+        wl.push("__SENTINEL")
+      } else {
+        neighbourhood.add(cur)
+        const outgoing = links.filter((l) => l.source === cur)
+        const incoming = links.filter((l) => l.target === cur)
+        wl.push(...outgoing.map((l) => l.target), ...incoming.map((l) => l.source))
+      }
+    }
+  } else {
+    Object.keys(data).forEach((id) => neighbourhood.add(simplifySlug(id as FullSlug)))
+  }
+
+  const graphData: { nodes: NodeData[]; links: LinkData[] } = {
+    nodes: [...neighbourhood].map((url) => ({
+      id: url,
+      text: data[url]?.title ?? url,
+      tags: data[url]?.tags ?? [],
+    })),
+    links: links.filter((l) => neighbourhood.has(l.source) && neighbourhood.has(l.target)),
+  }
+
+  const simulation: d3.Simulation<NodeData, LinkData> = d3
+    .forceSimulation(graphData.nodes)
+    .force("charge", d3.forceManyBody().strength(-100 * repelForce))
+    .force(
+      "link",
+      d3
+        .forceLink(graphData.links)
+        .id((d: any) => d.id)
+        .distance(linkDistance),
+    )
+    .force("center", d3.forceCenter().strength(centerForce))
+
+  const height = Math.max(graph.offsetHeight, 250)
+  const width = graph.offsetWidth
+
+  const svg = d3
+    .select<HTMLElement, NodeData>("#" + container)
+    .append("svg")
+    .attr("width", width)
+    .attr("height", height)
+    .attr("viewBox", [-width / 2 / scale, -height / 2 / scale, width / scale, height / scale])
+
+  // draw links between nodes
+  const link = svg
+    .append("g")
+    .selectAll("line")
+    .data(graphData.links)
+    .join("line")
+    .attr("class", "link")
+    .attr("stroke", "var(--lightgray)")
+    .attr("stroke-width", 1)
+
+  // svg groups
+  const graphNode = svg.append("g").selectAll("g").data(graphData.nodes).enter().append("g")
+
+  // calculate color
+  const color = (d: NodeData) => {
+    const isCurrent = d.id === slug
+    if (isCurrent) {
+      return "var(--secondary)"
+    } else if (visited.has(d.id)) {
+      return "var(--tertiary)"
+    } else {
+      return "var(--gray)"
+    }
+  }
+
+  const drag = (simulation: d3.Simulation<NodeData, LinkData>) => {
+    function dragstarted(event: any, d: NodeData) {
+      if (!event.active) simulation.alphaTarget(1).restart()
+      d.fx = d.x
+      d.fy = d.y
+    }
+
+    function dragged(event: any, d: NodeData) {
+      d.fx = event.x
+      d.fy = event.y
+    }
+
+    function dragended(event: any, d: NodeData) {
+      if (!event.active) simulation.alphaTarget(0)
+      d.fx = null
+      d.fy = null
+    }
+
+    const noop = () => {}
+    return d3
+      .drag<Element, NodeData>()
+      .on("start", enableDrag ? dragstarted : noop)
+      .on("drag", enableDrag ? dragged : noop)
+      .on("end", enableDrag ? dragended : noop)
+  }
+
+  function nodeRadius(d: NodeData) {
+    const numLinks = links.filter((l: any) => l.source.id === d.id || l.target.id === d.id).length
+    return 2 + Math.sqrt(numLinks)
+  }
+
+  // draw individual nodes
+  const node = graphNode
+    .append("circle")
+    .attr("class", "node")
+    .attr("id", (d) => d.id)
+    .attr("r", nodeRadius)
+    .attr("fill", color)
+    .style("cursor", "pointer")
+    .on("click", (_, d) => {
+      const targ = resolveRelative(fullSlug, d.id)
+      window.spaNavigate(new URL(targ, window.location.toString()))
+    })
+    .on("mouseover", function (_, d) {
+      const neighbours: SimpleSlug[] = data[fullSlug].links ?? []
+      const neighbourNodes = d3
+        .selectAll<HTMLElement, NodeData>(".node")
+        .filter((d) => neighbours.includes(d.id))
+      const currentId = d.id
+      const linkNodes = d3
+        .selectAll(".link")
+        .filter((d: any) => d.source.id === currentId || d.target.id === currentId)
+
+      // highlight neighbour nodes
+      neighbourNodes.transition().duration(200).attr("fill", color)
+
+      // highlight links
+      linkNodes.transition().duration(200).attr("stroke", "var(--gray)").attr("stroke-width", 1)
+
+      const bigFont = fontSize * 1.5
+
+      // show text for self
+      const parent = this.parentNode as HTMLElement
+      d3.select<HTMLElement, NodeData>(parent)
+        .raise()
+        .select("text")
+        .transition()
+        .duration(200)
+        .attr("opacityOld", d3.select(parent).select("text").style("opacity"))
+        .style("opacity", 1)
+        .style("font-size", bigFont + "em")
+    })
+    .on("mouseleave", function (_, d) {
+      const currentId = d.id
+      const linkNodes = d3
+        .selectAll(".link")
+        .filter((d: any) => d.source.id === currentId || d.target.id === currentId)
+
+      linkNodes.transition().duration(200).attr("stroke", "var(--lightgray)")
+
+      const parent = this.parentNode as HTMLElement
+      d3.select<HTMLElement, NodeData>(parent)
+        .select("text")
+        .transition()
+        .duration(200)
+        .style("opacity", d3.select(parent).select("text").attr("opacityOld"))
+        .style("font-size", fontSize + "em")
+    })
+    // @ts-ignore
+    .call(drag(simulation))
+
+  // draw labels
+  const labels = graphNode
+    .append("text")
+    .attr("dx", 0)
+    .attr("dy", (d) => -nodeRadius(d) + "px")
+    .attr("text-anchor", "middle")
+    .text(
+      (d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "),
+    )
+    .style("opacity", (opacityScale - 1) / 3.75)
+    .style("pointer-events", "none")
+    .style("font-size", fontSize + "em")
+    .raise()
+    // @ts-ignore
+    .call(drag(simulation))
+
+  // set panning
+  if (enableZoom) {
+    svg.call(
+      d3
+        .zoom<SVGSVGElement, NodeData>()
+        .extent([
+          [0, 0],
+          [width, height],
+        ])
+        .scaleExtent([0.25, 4])
+        .on("zoom", ({ transform }) => {
+          link.attr("transform", transform)
+          node.attr("transform", transform)
+          const scale = transform.k * opacityScale
+          const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
+          labels.attr("transform", transform).style("opacity", scaledOpacity)
+        }),
+    )
+  }
+
+  // progress the simulation
+  simulation.on("tick", () => {
+    link
+      .attr("x1", (d: any) => d.source.x)
+      .attr("y1", (d: any) => d.source.y)
+      .attr("x2", (d: any) => d.target.x)
+      .attr("y2", (d: any) => d.target.y)
+    node.attr("cx", (d: any) => d.x).attr("cy", (d: any) => d.y)
+    labels.attr("x", (d: any) => d.x).attr("y", (d: any) => d.y)
+  })
+}
+
+function renderGlobalGraph() {
+  const slug = getFullSlug(window)
+  const container = document.getElementById("global-graph-outer")
+  const sidebar = container?.closest(".sidebar") as HTMLElement
+  container?.classList.add("active")
+  if (sidebar) {
+    sidebar.style.zIndex = "1"
+  }
+
+  renderGraph("global-graph-container", slug)
+
+  function hideGlobalGraph() {
+    container?.classList.remove("active")
+    const graph = document.getElementById("global-graph-container")
+    if (sidebar) {
+      sidebar.style.zIndex = "unset"
+    }
+    if (!graph) return
+    removeAllChildren(graph)
+  }
+
+  registerEscapeHandler(container, hideGlobalGraph)
+}
+
+document.addEventListener("nav", async (e: unknown) => {
+  const slug = (e as CustomEventMap["nav"]).detail.url
+  addToVisited(slug)
+  await renderGraph("graph-container", slug)
+
+  const containerIcon = document.getElementById("global-graph-icon")
+  containerIcon?.removeEventListener("click", renderGlobalGraph)
+  containerIcon?.addEventListener("click", renderGlobalGraph)
+})

quartz/components/scripts/plausible.inline.ts

@@ -0,0 +1,3 @@
+import Plausible from "plausible-tracker"
+const { trackPageview } = Plausible()
+document.addEventListener("nav", () => trackPageview())

quartz/components/scripts/popover.inline.ts

@@ -0,0 +1,83 @@
+import { computePosition, flip, inline, shift } from "@floating-ui/dom"
+
+// from micromorph/src/utils.ts
+// https://github.com/natemoo-re/micromorph/blob/main/src/utils.ts#L5
+export function normalizeRelativeURLs(el: Element | Document, base: string | URL) {
+  const update = (el: Element, attr: string, base: string | URL) => {
+    el.setAttribute(attr, new URL(el.getAttribute(attr)!, base).pathname)
+  }
+
+  el.querySelectorAll('[href^="./"], [href^="../"]').forEach((item) => update(item, "href", base))
+
+  el.querySelectorAll('[src^="./"], [src^="../"]').forEach((item) => update(item, "src", base))
+}
+
+const p = new DOMParser()
+async function mouseEnterHandler(
+  this: HTMLLinkElement,
+  { clientX, clientY }: { clientX: number; clientY: number },
+) {
+  const link = this
+  async function setPosition(popoverElement: HTMLElement) {
+    const { x, y } = await computePosition(link, popoverElement, {
+      middleware: [inline({ x: clientX, y: clientY }), shift(), flip()],
+    })
+    Object.assign(popoverElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+    })
+  }
+
+  // dont refetch if there's already a popover
+  if ([...link.children].some((child) => child.classList.contains("popover"))) {
+    return setPosition(link.lastChild as HTMLElement)
+  }
+
+  const thisUrl = new URL(document.location.href)
+  thisUrl.hash = ""
+  thisUrl.search = ""
+  const targetUrl = new URL(link.href)
+  const hash = targetUrl.hash
+  targetUrl.hash = ""
+  targetUrl.search = ""
+  // prevent hover of the same page
+  if (thisUrl.toString() === targetUrl.toString()) return
+
+  const contents = await fetch(`${targetUrl}`)
+    .then((res) => res.text())
+    .catch((err) => {
+      console.error(err)
+    })
+
+  if (!contents) return
+  const html = p.parseFromString(contents, "text/html")
+  normalizeRelativeURLs(html, targetUrl)
+  const elts = [...html.getElementsByClassName("popover-hint")]
+  if (elts.length === 0) return
+
+  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))
+
+  setPosition(popoverElement)
+  link.appendChild(popoverElement)
+
+  if (hash !== "") {
+    const heading = popoverInner.querySelector(hash) as HTMLElement | null
+    if (heading) {
+      // leave ~12px of buffer when scrolling to a heading
+      popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })
+    }
+  }
+}
+
+document.addEventListener("nav", () => {
+  const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
+  for (const link of links) {
+    link.removeEventListener("mouseenter", mouseEnterHandler)
+    link.addEventListener("mouseenter", mouseEnterHandler)
+  }
+})

quartz/components/scripts/search.inline.ts

@@ -0,0 +1,205 @@
+import { Document } from "flexsearch"
+import { ContentDetails } from "../../plugins/emitters/contentIndex"
+import { registerEscapeHandler, removeAllChildren } from "./util"
+import { FullSlug, getFullSlug, resolveRelative, simplifySlug } from "../../util/path"
+
+interface Item {
+  id: number
+  slug: FullSlug
+  title: string
+  content: string
+}
+
+let index: Document<Item> | undefined = undefined
+
+const contextWindowWords = 30
+const numSearchResults = 5
+function highlight(searchTerm: string, text: string, trim?: boolean) {
+  // try to highlight longest tokens first
+  const tokenizedTerms = searchTerm
+    .split(/\s+/)
+    .filter((t) => t !== "")
+    .sort((a, b) => b.length - a.length)
+  let tokenizedText = text.split(/\s+/).filter((t) => t !== "")
+
+  let startIndex = 0
+  let endIndex = tokenizedText.length - 1
+  if (trim) {
+    const includesCheck = (tok: string) =>
+      tokenizedTerms.some((term) => tok.toLowerCase().startsWith(term.toLowerCase()))
+    const occurencesIndices = tokenizedText.map(includesCheck)
+
+    let bestSum = 0
+    let bestIndex = 0
+    for (let i = 0; i < Math.max(tokenizedText.length - contextWindowWords, 0); i++) {
+      const window = occurencesIndices.slice(i, i + contextWindowWords)
+      const windowSum = window.reduce((total, cur) => total + (cur ? 1 : 0), 0)
+      if (windowSum >= bestSum) {
+        bestSum = windowSum
+        bestIndex = i
+      }
+    }
+
+    startIndex = Math.max(bestIndex - contextWindowWords, 0)
+    endIndex = Math.min(startIndex + 2 * contextWindowWords, tokenizedText.length - 1)
+    tokenizedText = tokenizedText.slice(startIndex, endIndex)
+  }
+
+  const slice = tokenizedText
+    .map((tok) => {
+      // see if this tok is prefixed by any search terms
+      for (const searchTok of tokenizedTerms) {
+        if (tok.toLowerCase().includes(searchTok.toLowerCase())) {
+          const regex = new RegExp(searchTok.toLowerCase(), "gi")
+          return tok.replace(regex, `<span class="highlight">$&</span>`)
+        }
+      }
+      return tok
+    })
+    .join(" ")
+
+  return `${startIndex === 0 ? "" : "..."}${slice}${
+    endIndex === tokenizedText.length - 1 ? "" : "..."
+  }`
+}
+
+const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
+document.addEventListener("nav", async (e: unknown) => {
+  const currentSlug = (e as CustomEventMap["nav"]).detail.url
+
+  const data = await fetchData
+  const container = document.getElementById("search-container")
+  const sidebar = container?.closest(".sidebar") as HTMLElement
+  const searchIcon = document.getElementById("search-icon")
+  const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
+  const results = document.getElementById("results-container")
+  const idDataMap = Object.keys(data) as FullSlug[]
+
+  function hideSearch() {
+    container?.classList.remove("active")
+    if (searchBar) {
+      searchBar.value = "" // clear the input when we dismiss the search
+    }
+    if (sidebar) {
+      sidebar.style.zIndex = "unset"
+    }
+    if (results) {
+      removeAllChildren(results)
+    }
+  }
+
+  function showSearch() {
+    if (sidebar) {
+      sidebar.style.zIndex = "1"
+    }
+    container?.classList.add("active")
+    searchBar?.focus()
+  }
+
+  function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
+    if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      const searchBarOpen = container?.classList.contains("active")
+      searchBarOpen ? hideSearch() : showSearch()
+    } else if (e.key === "Enter") {
+      const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
+      if (anchor) {
+        anchor.click()
+      }
+    }
+  }
+
+  const formatForDisplay = (term: string, id: number) => {
+    const slug = idDataMap[id]
+    return {
+      id,
+      slug,
+      title: highlight(term, data[slug].title ?? ""),
+      content: highlight(term, data[slug].content ?? "", true),
+    }
+  }
+
+  const resultToHTML = ({ slug, title, content }: Item) => {
+    const button = document.createElement("button")
+    button.classList.add("result-card")
+    button.id = slug
+    button.innerHTML = `<h3>${title}</h3><p>${content}</p>`
+    button.addEventListener("click", () => {
+      const targ = resolveRelative(currentSlug, slug)
+      window.spaNavigate(new URL(targ, window.location.toString()))
+    })
+    return button
+  }
+
+  function displayResults(finalResults: Item[]) {
+    if (!results) return
+
+    removeAllChildren(results)
+    if (finalResults.length === 0) {
+      results.innerHTML = `<button class="result-card">
+                    <h3>No results.</h3>
+                    <p>Try another search term?</p>
+                </button>`
+    } else {
+      results.append(...finalResults.map(resultToHTML))
+    }
+  }
+
+  async function onType(e: HTMLElementEventMap["input"]) {
+    const term = (e.target as HTMLInputElement).value
+    const searchResults = (await index?.searchAsync(term, numSearchResults)) ?? []
+    const getByField = (field: string): number[] => {
+      const results = searchResults.filter((x) => x.field === field)
+      return results.length === 0 ? [] : ([...results[0].result] as number[])
+    }
+
+    // order titles ahead of content
+    const allIds: Set<number> = new Set([...getByField("title"), ...getByField("content")])
+    const finalResults = [...allIds].map((id) => formatForDisplay(term, id))
+    displayResults(finalResults)
+  }
+
+  document.removeEventListener("keydown", shortcutHandler)
+  document.addEventListener("keydown", shortcutHandler)
+  searchIcon?.removeEventListener("click", showSearch)
+  searchIcon?.addEventListener("click", showSearch)
+  searchBar?.removeEventListener("input", onType)
+  searchBar?.addEventListener("input", onType)
+
+  // setup index if it hasn't been already
+  if (!index) {
+    index = new Document({
+      cache: true,
+      charset: "latin:extra",
+      optimize: true,
+      encode: encoder,
+      document: {
+        id: "id",
+        index: [
+          {
+            field: "title",
+            tokenize: "reverse",
+          },
+          {
+            field: "content",
+            tokenize: "reverse",
+          },
+        ],
+      },
+    })
+
+    let id = 0
+    for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
+      await index.addAsync(id, {
+        id,
+        slug: slug as FullSlug,
+        title: fileData.title,
+        content: fileData.content,
+      })
+      id++
+    }
+  }
+
+  // register handlers
+  registerEscapeHandler(container, hideSearch)
+})

quartz/components/scripts/spa.inline.ts

@@ -0,0 +1,153 @@
+import micromorph from "micromorph"
+import { FullSlug, RelativeURL, getFullSlug } from "../../util/path"
+
+// adapted from `micromorph`
+// https://github.com/natemoo-re/micromorph
+
+const NODE_TYPE_ELEMENT = 1
+let announcer = document.createElement("route-announcer")
+const isElement = (target: EventTarget | null): target is Element =>
+  (target as Node)?.nodeType === NODE_TYPE_ELEMENT
+const isLocalUrl = (href: string) => {
+  try {
+    const url = new URL(href)
+    if (window.location.origin === url.origin) {
+      return true
+    }
+  } catch (e) {}
+  return false
+}
+
+const getOpts = ({ target }: Event): { url: URL; scroll?: boolean } | undefined => {
+  if (!isElement(target)) return
+  const a = target.closest("a")
+  if (!a) return
+  if ("routerIgnore" in a.dataset) return
+  const { href } = a
+  if (!isLocalUrl(href)) return
+  return { url: new URL(href), scroll: "routerNoscroll" in a.dataset ? false : undefined }
+}
+
+function notifyNav(url: FullSlug) {
+  const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } })
+  document.dispatchEvent(event)
+}
+
+let p: DOMParser
+async function navigate(url: URL, isBack: boolean = false) {
+  p = p || new DOMParser()
+  const contents = await fetch(`${url}`)
+    .then((res) => res.text())
+    .catch(() => {
+      window.location.assign(url)
+    })
+
+  if (!contents) return
+
+  const html = p.parseFromString(contents, "text/html")
+  let title = html.querySelector("title")?.textContent
+  if (title) {
+    document.title = title
+  } else {
+    const h1 = document.querySelector("h1")
+    title = h1?.innerText ?? h1?.textContent ?? url.pathname
+  }
+  if (announcer.textContent !== title) {
+    announcer.textContent = title
+  }
+  announcer.dataset.persist = ""
+  html.body.appendChild(announcer)
+
+  // morph body
+  micromorph(document.body, html.body)
+
+  // scroll into place and add history
+  if (!isBack) {
+    if (url.hash) {
+      const el = document.getElementById(url.hash.substring(1))
+      el?.scrollIntoView()
+    } else {
+      window.scrollTo({ top: 0 })
+    }
+  }
+
+  // now, patch head
+  const elementsToRemove = document.head.querySelectorAll(":not([spa-preserve])")
+  elementsToRemove.forEach((el) => el.remove())
+  const elementsToAdd = html.head.querySelectorAll(":not([spa-preserve])")
+  elementsToAdd.forEach((el) => document.head.appendChild(el))
+
+  // delay setting the url until now
+  // at this point everything is loaded so changing the url should resolve to the correct addresses
+  history.pushState({}, "", url)
+  notifyNav(getFullSlug(window))
+  delete announcer.dataset.persist
+}
+
+window.spaNavigate = navigate
+
+function createRouter() {
+  if (typeof window !== "undefined") {
+    window.addEventListener("click", async (event) => {
+      const { url } = getOpts(event) ?? {}
+      if (!url) return
+      event.preventDefault()
+      try {
+        navigate(url, false)
+      } catch (e) {
+        window.location.assign(url)
+      }
+    })
+
+    window.addEventListener("popstate", (event) => {
+      const { url } = getOpts(event) ?? {}
+      if (window.location.hash && window.location.pathname === url?.pathname) return
+      try {
+        navigate(new URL(window.location.toString()), true)
+      } catch (e) {
+        window.location.reload()
+      }
+      return
+    })
+  }
+
+  return new (class Router {
+    go(pathname: RelativeURL) {
+      const url = new URL(pathname, window.location.toString())
+      return navigate(url, false)
+    }
+
+    back() {
+      return window.history.back()
+    }
+
+    forward() {
+      return window.history.forward()
+    }
+  })()
+}
+
+createRouter()
+notifyNav(getFullSlug(window))
+
+if (!customElements.get("route-announcer")) {
+  const attrs = {
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    style:
+      "position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px",
+  }
+  customElements.define(
+    "route-announcer",
+    class RouteAnnouncer extends HTMLElement {
+      constructor() {
+        super()
+      }
+      connectedCallback() {
+        for (const [key, value] of Object.entries(attrs)) {
+          this.setAttribute(key, value)
+        }
+      }
+    },
+  )
+}

quartz/components/scripts/toc.inline.ts

@@ -0,0 +1,42 @@
+const bufferPx = 150
+const observer = new IntersectionObserver((entries) => {
+  for (const entry of entries) {
+    const slug = entry.target.id
+    const tocEntryElement = document.querySelector(`a[data-for="${slug}"]`)
+    const windowHeight = entry.rootBounds?.height
+    if (windowHeight && tocEntryElement) {
+      if (entry.boundingClientRect.y < windowHeight) {
+        tocEntryElement.classList.add("in-view")
+      } else {
+        tocEntryElement.classList.remove("in-view")
+      }
+    }
+  }
+})
+
+function toggleToc(this: HTMLElement) {
+  this.classList.toggle("collapsed")
+  const content = this.nextElementSibling as HTMLElement
+  content.classList.toggle("collapsed")
+  content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
+}
+
+function setupToc() {
+  const toc = document.getElementById("toc")
+  if (toc) {
+    const content = toc.nextElementSibling as HTMLElement
+    content.style.maxHeight = content.scrollHeight + "px"
+    toc.removeEventListener("click", toggleToc)
+    toc.addEventListener("click", toggleToc)
+  }
+}
+
+window.addEventListener("resize", setupToc)
+document.addEventListener("nav", () => {
+  setupToc()
+
+  // update toc entry highlighting
+  observer.disconnect()
+  const headers = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")
+  headers.forEach((header) => observer.observe(header))
+})

quartz/components/scripts/util.ts

@@ -0,0 +1,25 @@
+export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb: () => void) {
+  if (!outsideContainer) return
+  function click(this: HTMLElement, e: HTMLElementEventMap["click"]) {
+    if (e.target !== this) return
+    e.preventDefault()
+    cb()
+  }
+
+  function esc(e: HTMLElementEventMap["keydown"]) {
+    if (!e.key.startsWith("Esc")) return
+    e.preventDefault()
+    cb()
+  }
+
+  outsideContainer?.removeEventListener("click", click)
+  outsideContainer?.addEventListener("click", click)
+  document.removeEventListener("keydown", esc)
+  document.addEventListener("keydown", esc)
+}
+
+export function removeAllChildren(node: HTMLElement) {
+  while (node.firstChild) {
+    node.removeChild(node.firstChild)
+  }
+}

quartz/components/styles/backlinks.scss

@@ -0,0 +1,20 @@
+.backlinks {
+  position: relative;
+
+  & > h3 {
+    font-size: 1rem;
+    margin: 0;
+  }
+
+  & > ul {
+    list-style: none;
+    padding: 0;
+    margin: 0.5rem 0;
+
+    & > li {
+      & > a {
+        background-color: transparent;
+      }
+    }
+  }
+}

quartz/components/styles/clipboard.scss

@@ -0,0 +1,37 @@
+.clipboard-button {
+  position: absolute;
+  display: flex;
+  float: right;
+  right: 0;
+  padding: 0.4rem;
+  margin: -0.2rem 0.3rem;
+  color: var(--gray);
+  border-color: var(--dark);
+  background-color: var(--light);
+  border: 1px solid;
+  border-radius: 5px;
+  z-index: 1;
+  opacity: 0;
+  transition: 0.2s;
+
+  & > svg {
+    fill: var(--light);
+    filter: contrast(0.3);
+  }
+
+  &:hover {
+    cursor: pointer;
+    border-color: var(--secondary);
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+pre {
+  &:hover > .clipboard-button {
+    opacity: 1;
+    transition: 0.2s;
+  }
+}

quartz/components/styles/darkmode.scss

@@ -0,0 +1,40 @@
+.darkmode {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+
+  & > .toggle {
+    display: none;
+    box-sizing: border-box;
+  }
+
+  & svg {
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: calc(50% - 10px);
+    fill: var(--darkgray);
+    transition: opacity 0.1s ease;
+  }
+}
+
+:root[saved-theme="dark"] .toggle ~ label {
+  & > #dayIcon {
+    opacity: 0;
+  }
+  & > #nightIcon {
+    opacity: 1;
+  }
+}
+
+:root .toggle ~ label {
+  & > #dayIcon {
+    opacity: 1;
+  }
+  & > #nightIcon {
+    opacity: 0;
+  }
+}

quartz/components/styles/footer.scss

@@ -0,0 +1,15 @@
+footer {
+  text-align: left;
+  margin-bottom: 4rem;
+  opacity: 0.7;
+
+  & ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    margin-top: -1rem;
+  }
+}

quartz/components/styles/graph.scss

@@ -0,0 +1,70 @@
+@use "../../styles/variables.scss" as *;
+
+.graph {
+  & > h3 {
+    font-size: 1rem;
+    margin: 0;
+  }
+
+  & > .graph-outer {
+    border-radius: 5px;
+    border: 1px solid var(--lightgray);
+    box-sizing: border-box;
+    height: 250px;
+    margin: 0.5em 0;
+    position: relative;
+    overflow: hidden;
+
+    & > #global-graph-icon {
+      color: var(--dark);
+      opacity: 0.5;
+      width: 18px;
+      height: 18px;
+      position: absolute;
+      padding: 0.2rem;
+      margin: 0.3rem;
+      top: 0;
+      right: 0;
+      border-radius: 4px;
+      background-color: transparent;
+      transition: background-color 0.5s ease;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--lightgray);
+      }
+    }
+  }
+
+  & > #global-graph-outer {
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100%;
+    backdrop-filter: blur(4px);
+    display: none;
+    overflow: hidden;
+
+    &.active {
+      display: inline-block;
+    }
+
+    & > #global-graph-container {
+      border: 1px solid var(--lightgray);
+      background-color: var(--light);
+      border-radius: 5px;
+      box-sizing: border-box;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 60vh;
+      width: 50vw;
+
+      @media all and (max-width: $fullPageWidth) {
+        width: 90%;
+      }
+    }
+  }
+}

quartz/components/styles/legacyToc.scss

@@ -0,0 +1,27 @@
+details#toc {
+  & summary {
+    cursor: pointer;
+
+    &::marker {
+      color: var(--dark);
+    }
+
+    & > * {
+      padding-left: 0.25rem;
+      display: inline-block;
+      margin: 0;
+    }
+  }
+
+  & ul {
+    list-style: none;
+    margin: 0.5rem 1.25rem;
+    padding: 0;
+  }
+
+  @for $i from 1 through 6 {
+    & .depth-#{$i} {
+      padding-left: calc(1rem * #{$i});
+    }
+  }
+}

quartz/components/styles/listPage.scss

@@ -0,0 +1,45 @@
+@use "../../styles/variables.scss" as *;
+
+ul.section-ul {
+  list-style: none;
+  margin-top: 2em;
+  padding-left: 0;
+}
+
+li.section-li {
+  margin-bottom: 1em;
+
+  & > .section {
+    display: grid;
+    grid-template-columns: 6em 3fr 1fr;
+
+    @media all and (max-width: $mobileBreakpoint) {
+      & > .tags {
+        display: none;
+      }
+    }
+
+    & > .tags {
+      justify-self: end;
+      margin-left: 1rem;
+    }
+
+    & > .desc > h3 > a {
+      background-color: transparent;
+    }
+
+    & > .meta {
+      margin: 0;
+      flex-basis: 6em;
+      opacity: 0.6;
+    }
+  }
+}
+
+// modifications in popover context
+.popover .section {
+  grid-template-columns: 6em 1fr !important;
+  & > .tags {
+    display: none;
+  }
+}

quartz/components/styles/popover.scss

@@ -0,0 +1,59 @@
+@use "../../styles/variables.scss" as *;
+
+@keyframes dropin {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+  1% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.popover {
+  z-index: 999;
+  position: absolute;
+  overflow: visible;
+  padding: 1rem;
+
+  & > .popover-inner {
+    position: relative;
+    width: 30rem;
+    max-height: 20rem;
+    padding: 0 1rem 1rem 1rem;
+    font-weight: initial;
+    line-height: normal;
+    font-size: initial;
+    font-family: var(--bodyFont);
+    border: 1px solid var(--lightgray);
+    background-color: var(--light);
+    border-radius: 5px;
+    box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
+    overflow: auto;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease;
+
+  @media all and (max-width: $mobileBreakpoint) {
+    display: none !important;
+  }
+}
+
+a:hover .popover,
+.popover:hover {
+  animation: dropin 0.3s ease;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}

quartz/components/styles/recentNotes.scss

@@ -0,0 +1,24 @@
+.recent-notes {
+  & > h3 {
+    margin: 0.5rem 0 0 0;
+    font-size: 1rem;
+  }
+
+  & > ul.recent-ul {
+    list-style: none;
+    margin-top: 1rem;
+    padding-left: 0;
+
+    & > li {
+      margin: 1rem 0;
+      .section > .desc > h3 > a {
+        background-color: transparent;
+      }
+
+      .section > .meta {
+        margin: 0 0 0.5rem 0;
+        opacity: 0.6;
+      }
+    }
+  }
+}

quartz/components/styles/search.scss

@@ -0,0 +1,140 @@
+@use "../../styles/variables.scss" as *;
+
+.search {
+  min-width: fit-content;
+  max-width: 14rem;
+  flex-grow: 0.3;
+
+  & > #search-icon {
+    background-color: var(--lightgray);
+    border-radius: 4px;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    white-space: nowrap;
+
+    & > div {
+      flex-grow: 1;
+    }
+
+    & > p {
+      display: inline;
+      padding: 0 1rem;
+    }
+
+    & svg {
+      cursor: pointer;
+      width: 18px;
+      min-width: 18px;
+      margin: 0 0.5rem;
+
+      .search-path {
+        stroke: var(--darkgray);
+        stroke-width: 2px;
+        transition: stroke 0.5s ease;
+      }
+    }
+  }
+
+  & > #search-container {
+    position: fixed;
+    contain: layout;
+    z-index: 999;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow-y: auto;
+    display: none;
+    backdrop-filter: blur(4px);
+
+    &.active {
+      display: inline-block;
+    }
+
+    & > #search-space {
+      width: 50%;
+      margin-top: 15vh;
+      margin-left: auto;
+      margin-right: auto;
+
+      @media all and (max-width: $fullPageWidth) {
+        width: 90%;
+      }
+
+      & > * {
+        width: 100%;
+        border-radius: 5px;
+        background: var(--light);
+        box-shadow:
+          0 14px 50px rgba(27, 33, 48, 0.12),
+          0 10px 30px rgba(27, 33, 48, 0.16);
+        margin-bottom: 2em;
+      }
+
+      & > input {
+        box-sizing: border-box;
+        padding: 0.5em 1em;
+        font-family: var(--bodyFont);
+        color: var(--dark);
+        font-size: 1.1em;
+        border: 1px solid var(--lightgray);
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      & > #results-container {
+        & .result-card {
+          padding: 1em;
+          cursor: pointer;
+          transition: background 0.2s ease;
+          border: 1px solid var(--lightgray);
+          border-bottom: none;
+          width: 100%;
+
+          // normalize button props
+          font-family: inherit;
+          font-size: 100%;
+          line-height: 1.15;
+          margin: 0;
+          text-transform: none;
+          text-align: left;
+          background: var(--light);
+          outline: none;
+
+          & .highlight {
+            color: var(--secondary);
+            font-weight: 700;
+          }
+
+          &:hover,
+          &:focus {
+            background: var(--lightgray);
+          }
+
+          &:first-of-type {
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+          }
+
+          &:last-of-type {
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-bottom: 1px solid var(--lightgray);
+          }
+
+          & > h3 {
+            margin: 0;
+          }
+
+          & > p {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}

quartz/components/styles/toc.scss

@@ -0,0 +1,59 @@
+button#toc {
+  background-color: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+  color: var(--dark);
+  display: flex;
+  align-items: center;
+
+  & h3 {
+    font-size: 1rem;
+    display: inline-block;
+    margin: 0;
+  }
+
+  & .fold {
+    margin-left: 0.5rem;
+    transition: transform 0.3s ease;
+    opacity: 0.8;
+  }
+
+  &.collapsed .fold {
+    transform: rotateZ(-90deg);
+  }
+}
+
+#toc-content {
+  list-style: none;
+  overflow: hidden;
+  max-height: none;
+  transition: max-height 0.5s ease;
+
+  &.collapsed > .overflow::after {
+    opacity: 0;
+  }
+
+  & ul {
+    list-style: none;
+    margin: 0.5rem 0;
+    padding: 0;
+    & > li > a {
+      color: var(--dark);
+      opacity: 0.35;
+      transition:
+        0.5s ease opacity,
+        0.3s ease color;
+      &.in-view {
+        opacity: 0.75;
+      }
+    }
+  }
+
+  @for $i from 0 through 6 {
+    & .depth-#{$i} {
+      padding-left: calc(1rem * #{$i});
+    }
+  }
+}

quartz/components/types.ts

@@ -0,0 +1,27 @@
+import { ComponentType, JSX } from "preact"
+import { StaticResources } from "../util/resources"
+import { QuartzPluginData } from "../plugins/vfile"
+import { GlobalConfiguration } from "../cfg"
+import { Node } from "hast"
+
+export type QuartzComponentProps = {
+  externalResources: StaticResources
+  fileData: QuartzPluginData
+  cfg: GlobalConfiguration
+  children: (QuartzComponent | JSX.Element)[]
+  tree: Node<QuartzPluginData>
+  allFiles: QuartzPluginData[]
+  displayClass?: "mobile-only" | "desktop-only"
+} & JSX.IntrinsicAttributes & {
+    [key: string]: any
+  }
+
+export type QuartzComponent = ComponentType<QuartzComponentProps> & {
+  css?: string
+  beforeDOMLoaded?: string
+  afterDOMLoaded?: string
+}
+
+export type QuartzComponentConstructor<Options extends object | undefined = undefined> = (
+  opts: Options,
+) => QuartzComponent

quartz/plugins/emitters/aliases.ts

@@ -0,0 +1,47 @@
+import { FilePath, FullSlug, resolveRelative, simplifySlug } from "../../util/path"
+import { QuartzEmitterPlugin } from "../types"
+import path from "path"
+
+export const AliasRedirects: QuartzEmitterPlugin = () => ({
+  name: "AliasRedirects",
+  getQuartzComponents() {
+    return []
+  },
+  async emit({ argv }, content, _resources, emit): Promise<FilePath[]> {
+    const fps: FilePath[] = []
+
+    for (const [_tree, file] of content) {
+      const ogSlug = simplifySlug(file.data.slug!)
+      const dir = path.posix.relative(argv.directory, file.dirname ?? argv.directory)
+
+      let aliases: FullSlug[] = file.data.frontmatter?.aliases ?? file.data.frontmatter?.alias ?? []
+      if (typeof aliases === "string") {
+        aliases = [aliases]
+      }
+
+      for (const alias of aliases) {
+        const slug = path.posix.join(dir, alias) as FullSlug
+        const redirUrl = resolveRelative(slug, file.data.slug!)
+        const fp = await emit({
+          content: `
+            <!DOCTYPE html>
+            <html lang="en-us">
+            <head>
+            <title>${ogSlug}</title>
+            <link rel="canonical" href="${redirUrl}">
+            <meta name="robots" content="noindex">
+            <meta charset="utf-8">
+            <meta http-equiv="refresh" content="0; url=${redirUrl}">
+            </head>
+            </html>
+            `,
+          slug,
+          ext: ".html",
+        })
+
+        fps.push(fp)
+      }
+    }
+    return fps
+  },
+})

quartz/plugins/emitters/assets.ts

@@ -0,0 +1,33 @@
+import { FilePath, joinSegments, slugifyFilePath } from "../../util/path"
+import { QuartzEmitterPlugin } from "../types"
+import path from "path"
+import fs from "fs"
+import { glob } from "../../util/glob"
+
+export const Assets: QuartzEmitterPlugin = () => {
+  return {
+    name: "Assets",
+    getQuartzComponents() {
+      return []
+    },
+    async emit({ argv, cfg }, _content, _resources, _emit): Promise<FilePath[]> {
+      // glob all non MD/MDX/HTML files in content folder and copy it over
+      const assetsPath = argv.output
+      const fps = await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
+      const res: FilePath[] = []
+      for (const fp of fps) {
+        const ext = path.extname(fp)
+        const src = joinSegments(argv.directory, fp) as FilePath
+        const name = (slugifyFilePath(fp as FilePath, true) + ext) as FilePath
+
+        const dest = joinSegments(assetsPath, name) as FilePath
+        const dir = path.dirname(dest) as FilePath
+        await fs.promises.mkdir(dir, { recursive: true }) // ensure dir exists
+        await fs.promises.copyFile(src, dest)
+        res.push(dest)
+      }
+
+      return res
+    },
+  }
+}

quartz/plugins/emitters/componentResources.ts

@@ -0,0 +1,187 @@
+import { FilePath, FullSlug } from "../../util/path"
+import { QuartzEmitterPlugin } from "../types"
+
+// @ts-ignore
+import spaRouterScript from "../../components/scripts/spa.inline"
+// @ts-ignore
+import plausibleScript from "../../components/scripts/plausible.inline"
+// @ts-ignore
+import popoverScript from "../../components/scripts/popover.inline"
+import styles from "../../styles/base.scss"
+import popoverStyle from "../../components/styles/popover.scss"
+import { BuildCtx } from "../../util/ctx"
+import { StaticResources } from "../../util/resources"
+import { QuartzComponent } from "../../components/types"
+import { googleFontHref, joinStyles } from "../../util/theme"
+import { Features, transform } from "lightningcss"
+
+type ComponentResources = {
+  css: string[]
+  beforeDOMLoaded: string[]
+  afterDOMLoaded: string[]
+}
+
+function getComponentResources(ctx: BuildCtx): ComponentResources {
+  const allComponents: Set<QuartzComponent> = new Set()
+  for (const emitter of ctx.cfg.plugins.emitters) {
+    const components = emitter.getQuartzComponents(ctx)
+    for (const component of components) {
+      allComponents.add(component)
+    }
+  }
+
+  const componentResources = {
+    css: new Set<string>(),
+    beforeDOMLoaded: new Set<string>(),
+    afterDOMLoaded: new Set<string>(),
+  }
+
+  for (const component of allComponents) {
+    const { css, beforeDOMLoaded, afterDOMLoaded } = component
+    if (css) {
+      componentResources.css.add(css)
+    }
+    if (beforeDOMLoaded) {
+      componentResources.beforeDOMLoaded.add(beforeDOMLoaded)
+    }
+    if (afterDOMLoaded) {
+      componentResources.afterDOMLoaded.add(afterDOMLoaded)
+    }
+  }
+
+  return {
+    css: [...componentResources.css],
+    beforeDOMLoaded: [...componentResources.beforeDOMLoaded],
+    afterDOMLoaded: [...componentResources.afterDOMLoaded],
+  }
+}
+
+function joinScripts(scripts: string[]): string {
+  // wrap with iife to prevent scope collision
+  return scripts.map((script) => `(function () {${script}})();`).join("\n")
+}
+
+function addGlobalPageResources(
+  ctx: BuildCtx,
+  staticResources: StaticResources,
+  componentResources: ComponentResources,
+) {
+  const cfg = ctx.cfg.configuration
+  const reloadScript = ctx.argv.serve
+
+  // popovers
+  if (cfg.enablePopovers) {
+    componentResources.afterDOMLoaded.push(popoverScript)
+    componentResources.css.push(popoverStyle)
+  }
+
+  if (cfg.analytics?.provider === "google") {
+    const tagId = cfg.analytics.tagId
+    staticResources.js.push({
+      src: `https://www.googletagmanager.com/gtag/js?id=${tagId}`,
+      contentType: "external",
+      loadTime: "afterDOMReady",
+    })
+    componentResources.afterDOMLoaded.push(`
+      window.dataLayer = window.dataLayer || [];
+      function gtag() { dataLayer.push(arguments); }
+      gtag(\`js\`, new Date());
+      gtag(\`config\`, \`${tagId}\`, { send_page_view: false });
+  
+      document.addEventListener(\`nav\`, () => {
+        gtag(\`event\`, \`page_view\`, {
+          page_title: document.title,
+          page_location: location.href,
+        });
+      });`)
+  } else if (cfg.analytics?.provider === "plausible") {
+    componentResources.afterDOMLoaded.push(plausibleScript)
+  }
+
+  if (cfg.enableSPA) {
+    componentResources.afterDOMLoaded.push(spaRouterScript)
+  } else {
+    componentResources.afterDOMLoaded.push(`
+        window.spaNavigate = (url, _) => window.location.assign(url)
+        const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug } })
+        document.dispatchEvent(event)`)
+  }
+
+  if (reloadScript) {
+    staticResources.js.push({
+      loadTime: "afterDOMReady",
+      contentType: "inline",
+      script: `
+          const socket = new WebSocket('ws://localhost:3001')
+          socket.addEventListener('message', () => document.location.reload())
+        `,
+    })
+  }
+}
+
+interface Options {
+  fontOrigin: "googleFonts" | "local"
+}
+
+const defaultOptions: Options = {
+  fontOrigin: "googleFonts",
+}
+
+export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<Options>) => {
+  const { fontOrigin } = { ...defaultOptions, ...opts }
+  return {
+    name: "ComponentResources",
+    getQuartzComponents() {
+      return []
+    },
+    async emit(ctx, _content, resources, emit): Promise<FilePath[]> {
+      // 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
+
+      if (fontOrigin === "googleFonts") {
+        resources.css.push(googleFontHref(ctx.cfg.configuration.theme))
+      } else if (fontOrigin === "local") {
+        // let the user do it themselves in css
+      }
+
+      addGlobalPageResources(ctx, resources, componentResources)
+
+      const stylesheet = joinStyles(ctx.cfg.configuration.theme, styles, ...componentResources.css)
+      const prescript = joinScripts(componentResources.beforeDOMLoaded)
+      const postscript = joinScripts(componentResources.afterDOMLoaded)
+      const fps = await Promise.all([
+        emit({
+          slug: "index" as FullSlug,
+          ext: ".css",
+          content: transform({
+            filename: "index.css",
+            code: Buffer.from(stylesheet),
+            minify: true,
+            targets: {
+              safari: (15 << 16) | (6 << 8), // 15.6
+              ios_saf: (15 << 16) | (6 << 8), // 15.6
+              edge: 115 << 16,
+              firefox: 102 << 16,
+              chrome: 109 << 16,
+            },
+            include: Features.MediaQueries,
+          }).code.toString(),
+        }),
+        emit({
+          slug: "prescript" as FullSlug,
+          ext: ".js",
+          content: prescript,
+        }),
+        emit({
+          slug: "postscript" as FullSlug,
+          ext: ".js",
+          content: postscript,
+        }),
+      ])
+      return fps
+    },
+  }
+}

quartz/plugins/emitters/contentIndex.ts

@@ -0,0 +1,134 @@
+import { GlobalConfiguration } from "../../cfg"
+import { FilePath, FullSlug, SimpleSlug, simplifySlug } from "../../util/path"
+import { QuartzEmitterPlugin } from "../types"
+import path from "path"
+
+export type ContentIndex = Map<FullSlug, ContentDetails>
+export type ContentDetails = {
+  title: string
+  links: SimpleSlug[]
+  tags: string[]
+  content: string
+  date?: Date
+  description?: string
+}
+
+interface Options {
+  enableSiteMap: boolean
+  enableRSS: boolean
+  includeEmptyFiles: boolean
+}
+
+const defaultOptions: Options = {
+  enableSiteMap: true,
+  enableRSS: true,
+  includeEmptyFiles: false,
+}
+
+function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string {
+  const base = cfg.baseUrl ?? ""
+  const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<url>
+    <loc>https://${base}/${slug}</loc>
+    <lastmod>${content.date?.toISOString()}</lastmod>
+  </url>`
+  const urls = Array.from(idx)
+    .map(([slug, content]) => createURLEntry(simplifySlug(slug), content))
+    .join("")
+  return `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">${urls}</urlset>`
+}
+
+function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex): string {
+  const base = cfg.baseUrl ?? ""
+  const root = `https://${base}`
+
+  const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<items>
+    <title>${content.title}</title>
+    <link>${root}/${slug}</link>
+    <guid>${root}/${slug}</guid>
+    <description>${content.description}</description>
+    <pubDate>${content.date?.toUTCString()}</pubDate>
+  </items>`
+
+  const items = Array.from(idx)
+    .map(([slug, content]) => createURLEntry(simplifySlug(slug), content))
+    .join("")
+  return `<rss xmlns:atom="http://www.w3.org/2005/atom" version="2.0">
+    <channel>
+      <title>${cfg.pageTitle}</title>
+      <link>${root}</link>
+      <description>Recent content on ${cfg.pageTitle}</description>
+      <generator>Quartz -- quartz.jzhao.xyz</generator>
+      <atom:link href="${root}/index.xml" rel="self" type="application/rss+xml"/>
+    </channel>
+    ${items}
+  </rss>`
+}
+
+export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
+  opts = { ...defaultOptions, ...opts }
+  return {
+    name: "ContentIndex",
+    async emit(ctx, content, _resources, emit) {
+      const cfg = ctx.cfg.configuration
+      const emitted: FilePath[] = []
+      const linkIndex: ContentIndex = new Map()
+      for (const [_tree, file] of content) {
+        const slug = file.data.slug!
+        const date = file.data.dates?.modified ?? new Date()
+        if (opts?.includeEmptyFiles || (file.data.text && file.data.text !== "")) {
+          linkIndex.set(slug, {
+            title: file.data.frontmatter?.title!,
+            links: file.data.links ?? [],
+            tags: file.data.frontmatter?.tags ?? [],
+            content: file.data.text ?? "",
+            date: date,
+            description: file.data.description ?? "",
+          })
+        }
+      }
+
+      if (opts?.enableSiteMap) {
+        emitted.push(
+          await emit({
+            content: generateSiteMap(cfg, linkIndex),
+            slug: "sitemap" as FullSlug,
+            ext: ".xml",
+          }),
+        )
+      }
+
+      if (opts?.enableRSS) {
+        emitted.push(
+          await emit({
+            content: generateRSSFeed(cfg, linkIndex),
+            slug: "index" as FullSlug,
+            ext: ".xml",
+          }),
+        )
+      }
+
+      const fp = path.join("static", "contentIndex") as FullSlug
+      const simplifiedIndex = Object.fromEntries(
+        Array.from(linkIndex).map(([slug, content]) => {
+          // remove description and from content index as nothing downstream
+          // actually uses it. we only keep it in the index as we need it
+          // for the RSS feed
+          delete content.description
+          delete content.date
+          return [slug, content]
+        }),
+      )
+
+      emitted.push(
+        await emit({
+          content: JSON.stringify(simplifiedIndex),
+          slug: fp,
+          ext: ".json",
+        }),
+      )
+
+      return emitted
+    },
+    getQuartzComponents: () => [],
+  }
+}

quartz/plugins/emitters/contentPage.tsx

@@ -0,0 +1,56 @@
+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 } from "../../util/path"
+import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
+import { Content } from "../../components"
+
+export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
+  const opts: FullPageLayout = {
+    ...sharedPageComponents,
+    ...defaultContentPageLayout,
+    pageBody: Content(),
+    ...userOpts,
+  }
+
+  const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+  const Header = HeaderConstructor()
+  const Body = BodyConstructor()
+
+  return {
+    name: "ContentPage",
+    getQuartzComponents() {
+      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
+    },
+    async emit(ctx, content, resources, emit): Promise<FilePath[]> {
+      const cfg = ctx.cfg.configuration
+      const fps: FilePath[] = []
+      const allFiles = content.map((c) => c[1].data)
+      for (const [tree, file] of content) {
+        const slug = file.data.slug!
+        const externalResources = pageResources(slug, resources)
+        const componentData: QuartzComponentProps = {
+          fileData: file.data,
+          externalResources,
+          cfg,
+          children: [],
+          tree,
+          allFiles,
+        }
+
+        const content = renderPage(slug, componentData, opts, externalResources)
+        const fp = await emit({
+          content,
+          slug,
+          ext: ".html",
+        })
+
+        fps.push(fp)
+      }
+      return fps
+    },
+  }
+}

quartz/plugins/emitters/folderPage.tsx

@@ -0,0 +1,95 @@
+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 { ProcessedContent, defaultProcessedContent } from "../vfile"
+import { FullPageLayout } from "../../cfg"
+import path from "path"
+import {
+  FilePath,
+  FullSlug,
+  SimpleSlug,
+  _stripSlashes,
+  joinSegments,
+  simplifySlug,
+} from "../../util/path"
+import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
+import { FolderContent } from "../../components"
+
+export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
+  const opts: FullPageLayout = {
+    ...sharedPageComponents,
+    ...defaultListPageLayout,
+    pageBody: FolderContent(),
+    ...userOpts,
+  }
+
+  const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+  const Header = HeaderConstructor()
+  const Body = BodyConstructor()
+
+  return {
+    name: "FolderPage",
+    getQuartzComponents() {
+      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
+    },
+    async emit(ctx, content, resources, emit): Promise<FilePath[]> {
+      const fps: FilePath[] = []
+      const allFiles = content.map((c) => c[1].data)
+      const cfg = ctx.cfg.configuration
+
+      const folders: Set<SimpleSlug> = new Set(
+        allFiles.flatMap((data) => {
+          const slug = data.slug
+          const folderName = path.dirname(slug ?? "") as SimpleSlug
+          if (slug && folderName !== "." && folderName !== "tags") {
+            return [folderName]
+          }
+          return []
+        }),
+      )
+
+      const folderDescriptions: Record<string, ProcessedContent> = Object.fromEntries(
+        [...folders].map((folder) => [
+          folder,
+          defaultProcessedContent({
+            slug: joinSegments(folder, "index") as FullSlug,
+            frontmatter: { title: `Folder: ${folder}`, tags: [] },
+          }),
+        ]),
+      )
+
+      for (const [tree, file] of content) {
+        const slug = _stripSlashes(simplifySlug(file.data.slug!)) as SimpleSlug
+        if (folders.has(slug)) {
+          folderDescriptions[slug] = [tree, file]
+        }
+      }
+
+      for (const folder of folders) {
+        const slug = joinSegments(folder, "index") as FullSlug
+        const externalResources = pageResources(slug, resources)
+        const [tree, file] = folderDescriptions[folder]
+        const componentData: QuartzComponentProps = {
+          fileData: file.data,
+          externalResources,
+          cfg,
+          children: [],
+          tree,
+          allFiles,
+        }
+
+        const content = renderPage(slug, componentData, opts, externalResources)
+        const fp = await emit({
+          content,
+          slug,
+          ext: ".html",
+        })
+
+        fps.push(fp)
+      }
+      return fps
+    },
+  }
+}

quartz/plugins/emitters/index.ts

@@ -0,0 +1,8 @@
+export { ContentPage } from "./contentPage"
+export { TagPage } from "./tagPage"
+export { FolderPage } from "./folderPage"
+export { ContentIndex } from "./contentIndex"
+export { AliasRedirects } from "./aliases"
+export { Assets } from "./assets"
+export { Static } from "./static"
+export { ComponentResources } from "./componentResources"

quartz/plugins/emitters/static.ts

@@ -0,0 +1,17 @@
+import { FilePath, QUARTZ, joinSegments } from "../../util/path"
+import { QuartzEmitterPlugin } from "../types"
+import fs from "fs"
+import { glob } from "../../util/glob"
+
+export const Static: QuartzEmitterPlugin = () => ({
+  name: "Static",
+  getQuartzComponents() {
+    return []
+  },
+  async emit({ argv, cfg }, _content, _resources, _emit): Promise<FilePath[]> {
+    const staticPath = joinSegments(QUARTZ, "static")
+    const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)
+    await fs.promises.cp(staticPath, joinSegments(argv.output, "static"), { recursive: true })
+    return fps.map((fp) => joinSegments(argv.output, "static", fp)) as FilePath[]
+  },
+})

quartz/plugins/emitters/tagPage.tsx

@@ -0,0 +1,88 @@
+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 { ProcessedContent, defaultProcessedContent } from "../vfile"
+import { FullPageLayout } from "../../cfg"
+import { FilePath, FullSlug, getAllSegmentPrefixes, joinSegments } from "../../util/path"
+import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
+import { TagContent } from "../../components"
+
+export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
+  const opts: FullPageLayout = {
+    ...sharedPageComponents,
+    ...defaultListPageLayout,
+    pageBody: TagContent(),
+    ...userOpts,
+  }
+
+  const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+  const Header = HeaderConstructor()
+  const Body = BodyConstructor()
+
+  return {
+    name: "TagPage",
+    getQuartzComponents() {
+      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
+    },
+    async emit(ctx, content, resources, emit): Promise<FilePath[]> {
+      const fps: FilePath[] = []
+      const allFiles = content.map((c) => c[1].data)
+      const cfg = ctx.cfg.configuration
+
+      const tags: Set<string> = new Set(
+        allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
+      )
+      // add base tag
+      tags.add("index")
+
+      const tagDescriptions: Record<string, ProcessedContent> = Object.fromEntries(
+        [...tags].map((tag) => {
+          const title = tag === "" ? "Tag Index" : `Tag: #${tag}`
+          return [
+            tag,
+            defaultProcessedContent({
+              slug: joinSegments("tags", tag) as FullSlug,
+              frontmatter: { title, tags: [] },
+            }),
+          ]
+        }),
+      )
+
+      for (const [tree, file] of content) {
+        const slug = file.data.slug!
+        if (slug.startsWith("tags/")) {
+          const tag = slug.slice("tags/".length)
+          if (tags.has(tag)) {
+            tagDescriptions[tag] = [tree, file]
+          }
+        }
+      }
+
+      for (const tag of tags) {
+        const slug = joinSegments("tags", tag) as FullSlug
+        const externalResources = pageResources(slug, resources)
+        const [tree, file] = tagDescriptions[tag]
+        const componentData: QuartzComponentProps = {
+          fileData: file.data,
+          externalResources,
+          cfg,
+          children: [],
+          tree,
+          allFiles,
+        }
+
+        const content = renderPage(slug, componentData, opts, externalResources)
+        const fp = await emit({
+          content,
+          slug: file.data.slug!,
+          ext: ".html",
+        })
+
+        fps.push(fp)
+      }
+      return fps
+    },
+  }
+}

quartz/plugins/filters/draft.ts

@@ -0,0 +1,9 @@
+import { QuartzFilterPlugin } from "../types"
+
+export const RemoveDrafts: QuartzFilterPlugin<{}> = () => ({
+  name: "RemoveDrafts",
+  shouldPublish(_ctx, [_tree, vfile]) {
+    const draftFlag: boolean = vfile.data?.frontmatter?.draft ?? false
+    return !draftFlag
+  },
+})

quartz/plugins/filters/explicit.ts

@@ -0,0 +1,9 @@
+import { QuartzFilterPlugin } from "../types"
+
+export const ExplicitPublish: QuartzFilterPlugin = () => ({
+  name: "ExplicitPublish",
+  shouldPublish(_ctx, [_tree, vfile]) {
+    const publishFlag: boolean = vfile.data?.frontmatter?.publish ?? false
+    return publishFlag
+  },
+})

quartz/plugins/filters/index.ts

@@ -0,0 +1,2 @@
+export { RemoveDrafts } from "./draft"
+export { ExplicitPublish } from "./explicit"

quartz/plugins/index.ts

@@ -0,0 +1,34 @@
+import { StaticResources } from "../util/resources"
+import { FilePath, FullSlug } from "../util/path"
+import { BuildCtx } from "../util/ctx"
+
+export function getStaticResourcesFromPlugins(ctx: BuildCtx) {
+  const staticResources: StaticResources = {
+    css: [],
+    js: [],
+  }
+
+  for (const transformer of ctx.cfg.plugins.transformers) {
+    const res = transformer.externalResources ? transformer.externalResources(ctx) : {}
+    if (res?.js) {
+      staticResources.js.push(...res.js)
+    }
+    if (res?.css) {
+      staticResources.css.push(...res.css)
+    }
+  }
+
+  return staticResources
+}
+
+export * from "./transformers"
+export * from "./filters"
+export * from "./emitters"
+
+declare module "vfile" {
+  // inserted in processors.ts
+  interface DataMap {
+    slug: FullSlug
+    filePath: FilePath
+  }
+}

quartz/plugins/transformers/description.ts

@@ -0,0 +1,59 @@
+import { Root as HTMLRoot } from "hast"
+import { toString } from "hast-util-to-string"
+import { QuartzTransformerPlugin } from "../types"
+
+export interface Options {
+  descriptionLength: number
+}
+
+const defaultOptions: Options = {
+  descriptionLength: 150,
+}
+
+const escapeHTML = (unsafe: string) => {
+  return unsafe
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;")
+}
+
+export const Description: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "Description",
+    htmlPlugins() {
+      return [
+        () => {
+          return async (tree: HTMLRoot, file) => {
+            const frontMatterDescription = file.data.frontmatter?.description
+            const text = escapeHTML(toString(tree))
+
+            const desc = frontMatterDescription ?? text
+            const sentences = desc.replace(/\s+/g, " ").split(".")
+            let finalDesc = ""
+            let sentenceIdx = 0
+            const len = opts.descriptionLength
+            while (finalDesc.length < len) {
+              const sentence = sentences[sentenceIdx]
+              if (!sentence) break
+              finalDesc += sentence + "."
+              sentenceIdx++
+            }
+
+            file.data.description = finalDesc
+            file.data.text = text
+          }
+        },
+      ]
+    },
+  }
+}
+
+declare module "vfile" {
+  interface DataMap {
+    description: string
+    text: string
+  }
+}

quartz/plugins/transformers/frontmatter.ts

@@ -0,0 +1,66 @@
+import matter from "gray-matter"
+import remarkFrontmatter from "remark-frontmatter"
+import { QuartzTransformerPlugin } from "../types"
+import yaml from "js-yaml"
+import { slugTag } from "../../util/path"
+
+export interface Options {
+  delims: string | string[]
+}
+
+const defaultOptions: Options = {
+  delims: "---",
+}
+
+export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "FrontMatter",
+    markdownPlugins() {
+      return [
+        remarkFrontmatter,
+        () => {
+          return (_, file) => {
+            const { data } = matter(file.value, {
+              ...opts,
+              engines: {
+                yaml: (s) => yaml.load(s, { schema: yaml.JSON_SCHEMA }) as object,
+              },
+            })
+
+            // tag is an alias for tags
+            if (data.tag) {
+              data.tags = data.tag
+            }
+
+            if (data.tags && !Array.isArray(data.tags)) {
+              data.tags = data.tags
+                .toString()
+                .split(",")
+                .map((tag: string) => tag.trim())
+            }
+
+            // slug them all!!
+            data.tags = data.tags?.map((tag: string) => slugTag(tag)) ?? []
+
+            // fill in frontmatter
+            file.data.frontmatter = {
+              title: file.stem ?? "Untitled",
+              tags: [],
+              ...data,
+            }
+          }
+        },
+      ]
+    },
+  }
+}
+
+declare module "vfile" {
+  interface DataMap {
+    frontmatter: { [key: string]: any } & {
+      title: string
+      tags: string[]
+    }
+  }
+}

quartz/plugins/transformers/gfm.ts

@@ -0,0 +1,46 @@
+import remarkGfm from "remark-gfm"
+import smartypants from "remark-smartypants"
+import { QuartzTransformerPlugin } from "../types"
+import rehypeSlug from "rehype-slug"
+import rehypeAutolinkHeadings from "rehype-autolink-headings"
+
+export interface Options {
+  enableSmartyPants: boolean
+  linkHeadings: boolean
+}
+
+const defaultOptions: Options = {
+  enableSmartyPants: true,
+  linkHeadings: true,
+}
+
+export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
+  userOpts,
+) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "GitHubFlavoredMarkdown",
+    markdownPlugins() {
+      return opts.enableSmartyPants ? [remarkGfm, smartypants] : [remarkGfm]
+    },
+    htmlPlugins() {
+      if (opts.linkHeadings) {
+        return [
+          rehypeSlug,
+          [
+            rehypeAutolinkHeadings,
+            {
+              behavior: "append",
+              content: {
+                type: "text",
+                value: " §",
+              },
+            },
+          ],
+        ]
+      } else {
+        return []
+      }
+    },
+  }
+}

quartz/plugins/transformers/index.ts

@@ -0,0 +1,9 @@
+export { FrontMatter } from "./frontmatter"
+export { GitHubFlavoredMarkdown } from "./gfm"
+export { CreatedModifiedDate } from "./lastmod"
+export { Latex } from "./latex"
+export { Description } from "./description"
+export { CrawlLinks } from "./links"
+export { ObsidianFlavoredMarkdown } from "./ofm"
+export { SyntaxHighlighting } from "./syntax"
+export { TableOfContents } from "./toc"

quartz/plugins/transformers/lastmod.ts

@@ -0,0 +1,71 @@
+import fs from "fs"
+import path from "path"
+import { Repository } from "@napi-rs/simple-git"
+import { QuartzTransformerPlugin } from "../types"
+
+export interface Options {
+  priority: ("frontmatter" | "git" | "filesystem")[]
+}
+
+const defaultOptions: Options = {
+  priority: ["frontmatter", "git", "filesystem"],
+}
+
+type MaybeDate = undefined | string | number
+export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | undefined> = (
+  userOpts,
+) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "CreatedModifiedDate",
+    markdownPlugins() {
+      return [
+        () => {
+          let repo: Repository | undefined = undefined
+          return async (_tree, file) => {
+            let created: MaybeDate = undefined
+            let modified: MaybeDate = undefined
+            let published: MaybeDate = undefined
+
+            const fp = path.posix.join(file.cwd, file.data.filePath as string)
+            for (const source of opts.priority) {
+              if (source === "filesystem") {
+                const st = await fs.promises.stat(fp)
+                created ||= st.birthtimeMs
+                modified ||= st.mtimeMs
+              } else if (source === "frontmatter" && file.data.frontmatter) {
+                created ||= file.data.frontmatter.date
+                modified ||= file.data.frontmatter.lastmod
+                modified ||= file.data.frontmatter.updated
+                modified ||= file.data.frontmatter["last-modified"]
+                published ||= file.data.frontmatter.publishDate
+              } else if (source === "git") {
+                if (!repo) {
+                  repo = new Repository(file.cwd)
+                }
+
+                modified ||= await repo.getFileLatestModifiedDateAsync(file.data.filePath!)
+              }
+            }
+
+            file.data.dates = {
+              created: created ? new Date(created) : new Date(),
+              modified: modified ? new Date(modified) : new Date(),
+              published: published ? new Date(published) : new Date(),
+            }
+          }
+        },
+      ]
+    },
+  }
+}
+
+declare module "vfile" {
+  interface DataMap {
+    dates: {
+      created: Date
+      modified: Date
+      published: Date
+    }
+  }
+}

quartz/plugins/transformers/latex.ts

@@ -0,0 +1,45 @@
+import remarkMath from "remark-math"
+import rehypeKatex from "rehype-katex"
+import rehypeMathjax from "rehype-mathjax/svg.js"
+import { QuartzTransformerPlugin } from "../types"
+
+interface Options {
+  renderEngine: "katex" | "mathjax"
+}
+
+export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
+  const engine = opts?.renderEngine ?? "katex"
+  return {
+    name: "Latex",
+    markdownPlugins() {
+      return [remarkMath]
+    },
+    htmlPlugins() {
+      if (engine === "katex") {
+        return [[rehypeKatex, { output: "html" }]]
+      } else {
+        return [rehypeMathjax]
+      }
+    },
+    externalResources() {
+      if (engine === "katex") {
+        return {
+          css: [
+            // base css
+            "https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/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.7/dist/contrib/copy-tex.min.js",
+              loadTime: "afterDOMReady",
+              contentType: "external",
+            },
+          ],
+        }
+      } else {
+        return {}
+      }
+    },
+  }
+}

quartz/plugins/transformers/links.ts

@@ -0,0 +1,111 @@
+import { QuartzTransformerPlugin } from "../types"
+import {
+  FullSlug,
+  RelativeURL,
+  SimpleSlug,
+  TransformOptions,
+  _stripSlashes,
+  joinSegments,
+  simplifySlug,
+  splitAnchor,
+  transformLink,
+} from "../../util/path"
+import path from "path"
+import { visit } from "unist-util-visit"
+import isAbsoluteUrl from "is-absolute-url"
+
+interface Options {
+  /** How to resolve Markdown paths */
+  markdownLinkResolution: TransformOptions["strategy"]
+  /** Strips folders from a link so that it looks nice */
+  prettyLinks: boolean
+}
+
+const defaultOptions: Options = {
+  markdownLinkResolution: "absolute",
+  prettyLinks: true,
+}
+
+export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "LinkProcessing",
+    htmlPlugins(ctx) {
+      return [
+        () => {
+          return (tree, file) => {
+            const curSlug = simplifySlug(file.data.slug!)
+            const outgoing: Set<SimpleSlug> = new Set()
+
+            const transformOptions: TransformOptions = {
+              strategy: opts.markdownLinkResolution,
+              allSlugs: ctx.allSlugs,
+            }
+
+            visit(tree, "element", (node, _index, _parent) => {
+              // rewrite all links
+              if (
+                node.tagName === "a" &&
+                node.properties &&
+                typeof node.properties.href === "string"
+              ) {
+                let dest = node.properties.href as RelativeURL
+                node.properties.className ??= []
+                node.properties.className.push(isAbsoluteUrl(dest) ? "external" : "internal")
+
+                // don't process external links or intra-document anchors
+                if (!(isAbsoluteUrl(dest) || dest.startsWith("#"))) {
+                  dest = node.properties.href = transformLink(
+                    file.data.slug!,
+                    dest,
+                    transformOptions,
+                  )
+                  const url = new URL(dest, `https://base.com/${curSlug}`)
+                  const canonicalDest = url.pathname
+                  const [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
+                  const simple = simplifySlug(destCanonical as FullSlug)
+                  outgoing.add(simple)
+                }
+
+                // rewrite link internals if prettylinks is on
+                if (
+                  opts.prettyLinks &&
+                  node.children.length === 1 &&
+                  node.children[0].type === "text" &&
+                  !node.children[0].value.startsWith("#")
+                ) {
+                  node.children[0].value = path.basename(node.children[0].value)
+                }
+              }
+
+              // transform all other resources that may use links
+              if (
+                ["img", "video", "audio", "iframe"].includes(node.tagName) &&
+                node.properties &&
+                typeof node.properties.src === "string"
+              ) {
+                if (!isAbsoluteUrl(node.properties.src)) {
+                  let dest = node.properties.src as RelativeURL
+                  dest = node.properties.src = transformLink(
+                    file.data.slug!,
+                    dest,
+                    transformOptions,
+                  )
+                  node.properties.src = dest
+                }
+              }
+            })
+
+            file.data.links = [...outgoing]
+          }
+        },
+      ]
+    },
+  }
+}
+
+declare module "vfile" {
+  interface DataMap {
+    links: SimpleSlug[]
+  }
+}

quartz/plugins/transformers/ofm.ts

@@ -0,0 +1,451 @@
+import { PluggableList } from "unified"
+import { QuartzTransformerPlugin } from "../types"
+import { Root, HTML, BlockContent, DefinitionContent, Code, Paragraph } from "mdast"
+import { Replace, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { slug as slugAnchor } from "github-slugger"
+import rehypeRaw from "rehype-raw"
+import { visit } from "unist-util-visit"
+import path from "path"
+import { JSResource } from "../../util/resources"
+// @ts-ignore
+import calloutScript from "../../components/scripts/callout.inline.ts"
+import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
+import { toHast } from "mdast-util-to-hast"
+import { toHtml } from "hast-util-to-html"
+import { PhrasingContent } from "mdast-util-find-and-replace/lib"
+
+export interface Options {
+  comments: boolean
+  highlight: boolean
+  wikilinks: boolean
+  callouts: boolean
+  mermaid: boolean
+  parseTags: boolean
+  enableInHtmlEmbed: boolean
+}
+
+const defaultOptions: Options = {
+  comments: true,
+  highlight: true,
+  wikilinks: true,
+  callouts: true,
+  mermaid: true,
+  parseTags: true,
+  enableInHtmlEmbed: false,
+}
+
+const icons = {
+  infoIcon: `<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"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`,
+  pencilIcon: `<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>`,
+  clipboardListIcon: `<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"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>`,
+  checkCircleIcon: `<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"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>`,
+  flameIcon: `<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"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>`,
+  checkIcon: `<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"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
+  helpCircleIcon: `<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"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
+  alertTriangleIcon: `<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"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
+  xIcon: `<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="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
+  zapIcon: `<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"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`,
+  bugIcon: `<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"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>`,
+  listIcon: `<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="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>`,
+  quoteIcon: `<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"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>`,
+}
+
+const callouts = {
+  note: icons.pencilIcon,
+  abstract: icons.clipboardListIcon,
+  info: icons.infoIcon,
+  todo: icons.checkCircleIcon,
+  tip: icons.flameIcon,
+  success: icons.checkIcon,
+  question: icons.helpCircleIcon,
+  warning: icons.alertTriangleIcon,
+  failure: icons.xIcon,
+  danger: icons.zapIcon,
+  bug: icons.bugIcon,
+  example: icons.listIcon,
+  quote: icons.quoteIcon,
+}
+
+const calloutMapping: Record<string, keyof typeof callouts> = {
+  note: "note",
+  abstract: "abstract",
+  info: "info",
+  todo: "todo",
+  tip: "tip",
+  hint: "tip",
+  important: "tip",
+  success: "success",
+  check: "success",
+  done: "success",
+  question: "question",
+  help: "question",
+  faq: "question",
+  warning: "warning",
+  attention: "warning",
+  caution: "warning",
+  failure: "failure",
+  missing: "failure",
+  fail: "failure",
+  danger: "danger",
+  error: "danger",
+  bug: "bug",
+  example: "example",
+  quote: "quote",
+  cite: "quote",
+}
+
+function canonicalizeCallout(calloutName: string): keyof typeof callouts {
+  let callout = calloutName.toLowerCase() as keyof typeof calloutMapping
+  return calloutMapping[callout] ?? calloutName
+}
+
+const capitalize = (s: string): string => {
+  return s.substring(0, 1).toUpperCase() + s.substring(1)
+}
+
+// !?               -> optional embedding
+// \[\[             -> open brace
+// ([^\[\]\|\#]+)   -> one or more non-special characters ([,],|, or #) (name)
+// (#[^\[\]\|\#]+)? -> # then one or more non-special characters (heading link)
+// (|[^\[\]\|\#]+)? -> | then one or more non-special characters (alias)
+const wikilinkRegex = new RegExp(/!?\[\[([^\[\]\|\#]+)?(#[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/, "g")
+const highlightRegex = new RegExp(/==(.+)==/, "g")
+const commentRegex = new RegExp(/%%(.+)%%/, "g")
+// from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
+const calloutRegex = new RegExp(/^\[\!(\w+)\]([+-]?)/)
+const calloutLineRegex = new RegExp(/^> *\[\!\w+\][+-]?.*$/, "gm")
+// (?:^| )   -> non-capturing group, tag should start be separated by a space or be the start of the line
+// #(\w+)    -> tag itself is # followed by a string of alpha-numeric characters
+const tagRegex = new RegExp(/(?:^| )#([\w-_\/]+)/, "g")
+
+export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
+  userOpts,
+) => {
+  const opts = { ...defaultOptions, ...userOpts }
+
+  const mdastToHtml = (ast: PhrasingContent | Paragraph) => {
+    const hast = toHast(ast, { allowDangerousHtml: true })!
+    return toHtml(hast, { allowDangerousHtml: true })
+  }
+  const findAndReplace = opts.enableInHtmlEmbed
+    ? (tree: Root, regex: RegExp, replace?: Replace | null | undefined) => {
+        if (replace) {
+          visit(tree, "html", (node: HTML) => {
+            if (typeof replace === "string") {
+              node.value = node.value.replace(regex, replace)
+            } else {
+              node.value = node.value.replaceAll(regex, (substring: string, ...args) => {
+                const replaceValue = replace(substring, ...args)
+                if (typeof replaceValue === "string") {
+                  return replaceValue
+                } else if (Array.isArray(replaceValue)) {
+                  return replaceValue.map(mdastToHtml).join("")
+                } else if (typeof replaceValue === "object" && replaceValue !== null) {
+                  return mdastToHtml(replaceValue)
+                } else {
+                  return substring
+                }
+              })
+            }
+          })
+        }
+
+        mdastFindReplace(tree, regex, replace)
+      }
+    : mdastFindReplace
+
+  return {
+    name: "ObsidianFlavoredMarkdown",
+    textTransform(_ctx, src) {
+      // pre-transform blockquotes
+      if (opts.callouts) {
+        src = src.toString()
+        src = src.replaceAll(calloutLineRegex, (value) => {
+          // force newline after title of callout
+          return value + "\n> "
+        })
+      }
+
+      // pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex)
+      if (opts.wikilinks) {
+        src = src.toString()
+        src = src.replaceAll(wikilinkRegex, (value, ...capture) => {
+          const [rawFp, rawHeader, rawAlias] = capture
+          const fp = rawFp ?? ""
+          const anchor = rawHeader?.trim().slice(1)
+          const displayAnchor = anchor ? `#${slugAnchor(anchor)}` : ""
+          const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
+          const embedDisplay = value.startsWith("!") ? "!" : ""
+          return `${embedDisplay}[[${fp}${displayAnchor}${displayAlias}]]`
+        })
+      }
+
+      return src
+    },
+    markdownPlugins() {
+      const plugins: PluggableList = []
+      if (opts.wikilinks) {
+        plugins.push(() => {
+          return (tree: Root, _file) => {
+            findAndReplace(tree, wikilinkRegex, (value: string, ...capture: string[]) => {
+              let [rawFp, rawHeader, rawAlias] = capture
+              const fp = rawFp?.trim() ?? ""
+              const anchor = rawHeader?.trim() ?? ""
+              const alias = rawAlias?.slice(1).trim()
+
+              // embed cases
+              if (value.startsWith("!")) {
+                const ext: string = path.extname(fp).toLowerCase()
+                const url = slugifyFilePath(fp as FilePath)
+                if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg"].includes(ext)) {
+                  const dims = alias ?? ""
+                  let [width, height] = dims.split("x", 2)
+                  width ||= "auto"
+                  height ||= "auto"
+                  return {
+                    type: "image",
+                    url,
+                    data: {
+                      hProperties: {
+                        width,
+                        height,
+                      },
+                    },
+                  }
+                } else if ([".mp4", ".webm", ".ogv", ".mov", ".mkv"].includes(ext)) {
+                  return {
+                    type: "html",
+                    value: `<video src="${url}" controls></video>`,
+                  }
+                } else if (
+                  [".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext)
+                ) {
+                  return {
+                    type: "html",
+                    value: `<audio src="${url}" controls></audio>`,
+                  }
+                } else if ([".pdf"].includes(ext)) {
+                  return {
+                    type: "html",
+                    value: `<iframe src="${url}"></iframe>`,
+                  }
+                } else if (ext === "") {
+                  // TODO: note embed
+                }
+                // otherwise, fall through to regular link
+              }
+
+              // internal link
+              const url = fp + anchor
+              return {
+                type: "link",
+                url,
+                children: [
+                  {
+                    type: "text",
+                    value: alias ?? fp,
+                  },
+                ],
+              }
+            })
+          }
+        })
+      }
+
+      if (opts.highlight) {
+        plugins.push(() => {
+          return (tree: Root, _file) => {
+            findAndReplace(tree, highlightRegex, (_value: string, ...capture: string[]) => {
+              const [inner] = capture
+              return {
+                type: "html",
+                value: `<span class="text-highlight">${inner}</span>`,
+              }
+            })
+          }
+        })
+      }
+
+      if (opts.comments) {
+        plugins.push(() => {
+          return (tree: Root, _file) => {
+            findAndReplace(tree, commentRegex, (_value: string, ..._capture: string[]) => {
+              return {
+                type: "text",
+                value: "",
+              }
+            })
+          }
+        })
+      }
+
+      if (opts.callouts) {
+        plugins.push(() => {
+          return (tree: Root, _file) => {
+            visit(tree, "blockquote", (node) => {
+              if (node.children.length === 0) {
+                return
+              }
+
+              // find first line
+              const firstChild = node.children[0]
+              if (firstChild.type !== "paragraph" || firstChild.children[0]?.type !== "text") {
+                return
+              }
+
+              const text = firstChild.children[0].value
+              const restChildren = firstChild.children.slice(1)
+              const [firstLine, ...remainingLines] = text.split("\n")
+              const remainingText = remainingLines.join("\n")
+
+              const match = firstLine.match(calloutRegex)
+              if (match && match.input) {
+                const [calloutDirective, typeString, collapseChar] = match
+                const calloutType = canonicalizeCallout(
+                  typeString.toLowerCase() as keyof typeof calloutMapping,
+                )
+                const collapse = collapseChar === "+" || collapseChar === "-"
+                const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
+                const titleContent =
+                  match.input.slice(calloutDirective.length).trim() || capitalize(calloutType)
+                const titleNode: Paragraph = {
+                  type: "paragraph",
+                  children: [{ type: "text", value: titleContent + " " }, ...restChildren],
+                }
+                const title = mdastToHtml(titleNode)
+
+                const toggleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>`
+
+                const titleHtml: HTML = {
+                  type: "html",
+                  value: `<div 
+                  class="callout-title"
+                >
+                  <div class="callout-icon">${callouts[calloutType]}</div>
+                  <div class="callout-title-inner">${title}</div>
+                  ${collapse ? toggleIcon : ""}
+                </div>`,
+                }
+
+                const blockquoteContent: (BlockContent | DefinitionContent)[] = [titleHtml]
+                if (remainingText.length > 0) {
+                  blockquoteContent.push({
+                    type: "paragraph",
+                    children: [
+                      {
+                        type: "text",
+                        value: remainingText,
+                      },
+                    ],
+                  })
+                }
+
+                // replace first line of blockquote with title and rest of the paragraph text
+                node.children.splice(0, 1, ...blockquoteContent)
+
+                // add properties to base blockquote
+                node.data = {
+                  hProperties: {
+                    ...(node.data?.hProperties ?? {}),
+                    className: `callout ${collapse ? "is-collapsible" : ""} ${
+                      defaultState === "collapsed" ? "is-collapsed" : ""
+                    }`,
+                    "data-callout": calloutType,
+                    "data-callout-fold": collapse,
+                  },
+                }
+              }
+            })
+          }
+        })
+      }
+
+      if (opts.mermaid) {
+        plugins.push(() => {
+          return (tree: Root, _file) => {
+            visit(tree, "code", (node: Code) => {
+              if (node.lang === "mermaid") {
+                node.data = {
+                  hProperties: {
+                    className: ["mermaid"],
+                  },
+                }
+              }
+            })
+          }
+        })
+      }
+
+      if (opts.parseTags) {
+        plugins.push(() => {
+          return (tree: Root, file) => {
+            const base = pathToRoot(file.data.slug!)
+            findAndReplace(tree, tagRegex, (value: string, tag: string) => {
+              if (file.data.frontmatter) {
+                file.data.frontmatter.tags.push(tag)
+              }
+
+              return {
+                type: "link",
+                url: base + `/tags/${slugTag(tag)}`,
+                data: {
+                  hProperties: {
+                    className: ["tag-link"],
+                  },
+                },
+                children: [
+                  {
+                    type: "text",
+                    value,
+                  },
+                ],
+              }
+            })
+          }
+        })
+      }
+
+      return plugins
+    },
+    htmlPlugins() {
+      return [rehypeRaw]
+    },
+    externalResources() {
+      const js: JSResource[] = []
+
+      if (opts.callouts) {
+        js.push({
+          script: calloutScript,
+          loadTime: "afterDOMReady",
+          contentType: "inline",
+        })
+      }
+
+      if (opts.mermaid) {
+        js.push({
+          script: `
+          import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+          const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
+          mermaid.initialize({ 
+            startOnLoad: false,
+            securityLevel: 'loose',
+            theme: darkMode ? 'dark' : 'default'
+          });
+          document.addEventListener('nav', async () => {
+            await mermaid.run({
+              querySelector: '.mermaid'
+            })
+          });
+          `,
+          loadTime: "afterDOMReady",
+          moduleType: "module",
+          contentType: "inline",
+        })
+      }
+
+      return { js }
+    },
+  }
+}

quartz/plugins/transformers/syntax.ts

@@ -0,0 +1,16 @@
+import { QuartzTransformerPlugin } from "../types"
+import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code"
+
+export const SyntaxHighlighting: QuartzTransformerPlugin = () => ({
+  name: "SyntaxHighlighting",
+  htmlPlugins() {
+    return [
+      [
+        rehypePrettyCode,
+        {
+          theme: "css-variables",
+        } satisfies Partial<CodeOptions>,
+      ],
+    ]
+  },
+})

quartz/plugins/transformers/toc.ts

@@ -0,0 +1,69 @@
+import { QuartzTransformerPlugin } from "../types"
+import { Root } from "mdast"
+import { visit } from "unist-util-visit"
+import { toString } from "mdast-util-to-string"
+import { slug as slugAnchor } from "github-slugger"
+
+export interface Options {
+  maxDepth: 1 | 2 | 3 | 4 | 5 | 6
+  minEntries: 1
+  showByDefault: boolean
+}
+
+const defaultOptions: Options = {
+  maxDepth: 3,
+  minEntries: 1,
+  showByDefault: true,
+}
+
+interface TocEntry {
+  depth: number
+  text: string
+  slug: string // this is just the anchor (#some-slug), not the canonical slug
+}
+
+export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefined> = (
+  userOpts,
+) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "TableOfContents",
+    markdownPlugins() {
+      return [
+        () => {
+          return async (tree: Root, file) => {
+            const display = file.data.frontmatter?.enableToc ?? opts.showByDefault
+            if (display) {
+              const toc: TocEntry[] = []
+              let highestDepth: number = opts.maxDepth
+              visit(tree, "heading", (node) => {
+                if (node.depth <= opts.maxDepth) {
+                  const text = toString(node)
+                  highestDepth = Math.min(highestDepth, node.depth)
+                  toc.push({
+                    depth: node.depth,
+                    text,
+                    slug: slugAnchor(text),
+                  })
+                }
+              })
+
+              if (toc.length > opts.minEntries) {
+                file.data.toc = toc.map((entry) => ({
+                  ...entry,
+                  depth: entry.depth - highestDepth,
+                }))
+              }
+            }
+          }
+        },
+      ]
+    },
+  }
+}
+
+declare module "vfile" {
+  interface DataMap {
+    toc: TocEntry[]
+  }
+}

quartz/plugins/types.ts

@@ -0,0 +1,54 @@
+import { PluggableList } from "unified"
+import { StaticResources } from "../util/resources"
+import { ProcessedContent } from "./vfile"
+import { QuartzComponent } from "../components/types"
+import { FilePath, FullSlug } from "../util/path"
+import { BuildCtx } from "../util/ctx"
+
+export interface PluginTypes {
+  transformers: QuartzTransformerPluginInstance[]
+  filters: QuartzFilterPluginInstance[]
+  emitters: QuartzEmitterPluginInstance[]
+}
+
+type OptionType = object | undefined
+export type QuartzTransformerPlugin<Options extends OptionType = undefined> = (
+  opts?: Options,
+) => QuartzTransformerPluginInstance
+export type QuartzTransformerPluginInstance = {
+  name: string
+  textTransform?: (ctx: BuildCtx, src: string | Buffer) => string | Buffer
+  markdownPlugins?: (ctx: BuildCtx) => PluggableList
+  htmlPlugins?: (ctx: BuildCtx) => PluggableList
+  externalResources?: (ctx: BuildCtx) => Partial<StaticResources>
+}
+
+export type QuartzFilterPlugin<Options extends OptionType = undefined> = (
+  opts?: Options,
+) => QuartzFilterPluginInstance
+export type QuartzFilterPluginInstance = {
+  name: string
+  shouldPublish(ctx: BuildCtx, content: ProcessedContent): boolean
+}
+
+export type QuartzEmitterPlugin<Options extends OptionType = undefined> = (
+  opts?: Options,
+) => QuartzEmitterPluginInstance
+export type QuartzEmitterPluginInstance = {
+  name: string
+  emit(
+    ctx: BuildCtx,
+    content: ProcessedContent[],
+    resources: StaticResources,
+    emitCallback: EmitCallback,
+  ): Promise<FilePath[]>
+  getQuartzComponents(ctx: BuildCtx): QuartzComponent[]
+}
+
+export interface EmitOptions {
+  slug: FullSlug
+  ext: `.${string}` | ""
+  content: string
+}
+
+export type EmitCallback = (data: EmitOptions) => Promise<FilePath>

quartz/plugins/vfile.ts

@@ -0,0 +1,12 @@
+import { Node, Parent } from "hast"
+import { Data, VFile } from "vfile"
+
+export type QuartzPluginData = Data
+export type ProcessedContent = [Node<QuartzPluginData>, VFile]
+
+export function defaultProcessedContent(vfileData: Partial<QuartzPluginData>): ProcessedContent {
+  const root: Parent = { type: "root", children: [] }
+  const vfile = new VFile("")
+  vfile.data = vfileData
+  return [root, vfile]
+}

quartz/processors/emit.ts

@@ -0,0 +1,44 @@
+import path from "path"
+import fs from "fs"
+import { PerfTimer } from "../util/perf"
+import { getStaticResourcesFromPlugins } from "../plugins"
+import { EmitCallback } from "../plugins/types"
+import { ProcessedContent } from "../plugins/vfile"
+import { FilePath, joinSegments } from "../util/path"
+import { QuartzLogger } from "../util/log"
+import { trace } from "../util/trace"
+import { BuildCtx } from "../util/ctx"
+
+export async function emitContent(ctx: BuildCtx, content: ProcessedContent[]) {
+  const { argv, cfg } = ctx
+  const perf = new PerfTimer()
+  const log = new QuartzLogger(ctx.argv.verbose)
+
+  log.start(`Emitting output files`)
+  const emit: EmitCallback = async ({ slug, ext, content }) => {
+    const pathToPage = joinSegments(argv.output, slug + ext) as FilePath
+    const dir = path.dirname(pathToPage)
+    await fs.promises.mkdir(dir, { recursive: true })
+    await fs.promises.writeFile(pathToPage, content)
+    return pathToPage
+  }
+
+  let emittedFiles = 0
+  const staticResources = getStaticResourcesFromPlugins(ctx)
+  for (const emitter of cfg.plugins.emitters) {
+    try {
+      const emitted = await emitter.emit(ctx, content, staticResources, emit)
+      emittedFiles += emitted.length
+
+      if (ctx.argv.verbose) {
+        for (const file of emitted) {
+          console.log(`[emit:${emitter.name}] ${file}`)
+        }
+      }
+    } catch (err) {
+      trace(`Failed to emit from plugin \`${emitter.name}\``, err as Error)
+    }
+  }
+
+  log.end(`Emitted ${emittedFiles} files to \`${argv.output}\` in ${perf.timeSince()}`)
+}

quartz/processors/filter.ts

@@ -0,0 +1,24 @@
+import { BuildCtx } from "../util/ctx"
+import { PerfTimer } from "../util/perf"
+import { ProcessedContent } from "../plugins/vfile"
+
+export function filterContent(ctx: BuildCtx, content: ProcessedContent[]): ProcessedContent[] {
+  const { cfg, argv } = ctx
+  const perf = new PerfTimer()
+  const initialLength = content.length
+  for (const plugin of cfg.plugins.filters) {
+    const updatedContent = content.filter((item) => plugin.shouldPublish(ctx, item))
+
+    if (argv.verbose) {
+      const diff = content.filter((x) => !updatedContent.includes(x))
+      for (const file of diff) {
+        console.log(`[filter:${plugin.name}] ${file[1].data.slug}`)
+      }
+    }
+
+    content = updatedContent
+  }
+
+  console.log(`Filtered out ${initialLength - content.length} files in ${perf.timeSince()}`)
+  return content
+}

quartz/processors/parse.ts

@@ -0,0 +1,161 @@
+import esbuild from "esbuild"
+import remarkParse from "remark-parse"
+import remarkRehype from "remark-rehype"
+import { Processor, unified } from "unified"
+import { Root as MDRoot } from "remark-parse/lib"
+import { Root as HTMLRoot } from "hast"
+import { ProcessedContent } from "../plugins/vfile"
+import { PerfTimer } from "../util/perf"
+import { read } from "to-vfile"
+import { FilePath, QUARTZ, slugifyFilePath } from "../util/path"
+import path from "path"
+import workerpool, { Promise as WorkerPromise } from "workerpool"
+import { QuartzLogger } from "../util/log"
+import { trace } from "../util/trace"
+import { BuildCtx } from "../util/ctx"
+
+export type QuartzProcessor = Processor<MDRoot, HTMLRoot, void>
+export function createProcessor(ctx: BuildCtx): QuartzProcessor {
+  const transformers = ctx.cfg.plugins.transformers
+
+  // base Markdown -> MD AST
+  let processor = unified().use(remarkParse)
+
+  // MD AST -> MD AST transforms
+  for (const plugin of transformers.filter((p) => p.markdownPlugins)) {
+    processor = processor.use(plugin.markdownPlugins!(ctx))
+  }
+
+  // MD AST -> HTML AST
+  processor = processor.use(remarkRehype, { allowDangerousHtml: true })
+
+  // HTML AST -> HTML AST transforms
+  for (const plugin of transformers.filter((p) => p.htmlPlugins)) {
+    processor = processor.use(plugin.htmlPlugins!(ctx))
+  }
+
+  return processor
+}
+
+function* chunks<T>(arr: T[], n: number) {
+  for (let i = 0; i < arr.length; i += n) {
+    yield arr.slice(i, i + n)
+  }
+}
+
+async function transpileWorkerScript() {
+  // transpile worker script
+  const cacheFile = "./.quartz-cache/transpiled-worker.mjs"
+  const fp = "./quartz/worker.ts"
+  return esbuild.build({
+    entryPoints: [fp],
+    outfile: path.join(QUARTZ, cacheFile),
+    bundle: true,
+    keepNames: true,
+    platform: "node",
+    format: "esm",
+    packages: "external",
+    sourcemap: true,
+    sourcesContent: false,
+    plugins: [
+      {
+        name: "css-and-scripts-as-text",
+        setup(build) {
+          build.onLoad({ filter: /\.scss$/ }, (_) => ({
+            contents: "",
+            loader: "text",
+          }))
+          build.onLoad({ filter: /\.inline\.(ts|js)$/ }, (_) => ({
+            contents: "",
+            loader: "text",
+          }))
+        },
+      },
+    ],
+  })
+}
+
+export function createFileParser(ctx: BuildCtx, fps: FilePath[]) {
+  const { argv, cfg } = ctx
+  return async (processor: QuartzProcessor) => {
+    const res: ProcessedContent[] = []
+    for (const fp of fps) {
+      try {
+        const perf = new PerfTimer()
+        const file = await read(fp)
+
+        // strip leading and trailing whitespace
+        file.value = file.value.toString().trim()
+
+        // Text -> Text transforms
+        for (const plugin of cfg.plugins.transformers.filter((p) => p.textTransform)) {
+          file.value = plugin.textTransform!(ctx, file.value)
+        }
+
+        // base data properties that plugins may use
+        file.data.slug = slugifyFilePath(path.posix.relative(argv.directory, file.path) as FilePath)
+        file.data.filePath = fp
+
+        const ast = processor.parse(file)
+        const newAst = await processor.run(ast, file)
+        res.push([newAst, file])
+
+        if (argv.verbose) {
+          console.log(`[process] ${fp} -> ${file.data.slug} (${perf.timeSince()})`)
+        }
+      } catch (err) {
+        trace(`\nFailed to process \`${fp}\``, err as Error)
+      }
+    }
+
+    return res
+  }
+}
+
+const clamp = (num: number, min: number, max: number) =>
+  Math.min(Math.max(Math.round(num), min), max)
+export async function parseMarkdown(ctx: BuildCtx, fps: FilePath[]): Promise<ProcessedContent[]> {
+  const { argv } = ctx
+  const perf = new PerfTimer()
+  const log = new QuartzLogger(argv.verbose)
+
+  // rough heuristics: 128 gives enough time for v8 to JIT and optimize parsing code paths
+  const CHUNK_SIZE = 128
+  const concurrency = ctx.argv.concurrency ?? clamp(fps.length / CHUNK_SIZE, 1, 4)
+
+  let res: ProcessedContent[] = []
+  log.start(`Parsing input files using ${concurrency} threads`)
+  if (concurrency === 1) {
+    try {
+      const processor = createProcessor(ctx)
+      const parse = createFileParser(ctx, fps)
+      res = await parse(processor)
+    } catch (error) {
+      log.end()
+      throw error
+    }
+  } else {
+    await transpileWorkerScript()
+    const pool = workerpool.pool("./quartz/bootstrap-worker.mjs", {
+      minWorkers: "max",
+      maxWorkers: concurrency,
+      workerType: "thread",
+    })
+
+    const childPromises: WorkerPromise<ProcessedContent[]>[] = []
+    for (const chunk of chunks(fps, CHUNK_SIZE)) {
+      childPromises.push(pool.exec("parseFiles", [argv, chunk, ctx.allSlugs]))
+    }
+
+    const results: ProcessedContent[][] = await WorkerPromise.all(childPromises).catch((err) => {
+      const errString = err.toString().slice("Error:".length)
+      console.error(errString)
+      process.exit(1)
+    })
+    res = results.flat()
+    await pool.terminate()
+  }
+
+  log.end(`Parsed ${res.length} Markdown files in ${perf.timeSince()}`)
+  return res
+}

quartz/styles/base.scss

@@ -0,0 +1,467 @@
+@use "./custom.scss";
+@use "./syntax.scss";
+@use "./callouts.scss";
+@use "./variables.scss" as *;
+
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  overflow-x: hidden;
+  width: 100vw;
+}
+
+body,
+section {
+  margin: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  background-color: var(--light);
+  font-family: var(--bodyFont);
+  color: var(--darkgray);
+}
+
+.text-highlight {
+  background-color: #fff23688;
+  padding: 0 0.1rem;
+  border-radius: 5px;
+}
+
+p,
+ul,
+text,
+a,
+tr,
+td,
+li,
+ol,
+ul,
+.katex,
+.math {
+  color: var(--darkgray);
+  fill: var(--darkgray);
+  overflow-wrap: anywhere;
+  hyphens: auto;
+}
+
+.math {
+  &.math-display {
+    text-align: center;
+  }
+}
+
+a {
+  font-weight: 600;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  color: var(--secondary);
+
+  &:hover {
+    color: var(--tertiary) !important;
+  }
+
+  &.internal {
+    text-decoration: none;
+    background-color: var(--highlight);
+    padding: 0 0.1rem;
+    border-radius: 5px;
+  }
+}
+
+.desktop-only {
+  display: initial;
+  @media all and (max-width: $fullPageWidth) {
+    display: none;
+  }
+}
+
+.mobile-only {
+  display: none;
+  @media all and (max-width: $fullPageWidth) {
+    display: initial;
+  }
+}
+
+.page {
+  @media all and (max-width: $fullPageWidth) {
+    margin: 0 auto;
+    padding: 0 1rem;
+    max-width: $pageWidth;
+  }
+
+  & article {
+    & > h1 {
+      font-size: 2rem;
+    }
+
+    & li:has(> input[type="checkbox"]) {
+      list-style-type: none;
+      padding-left: 0;
+    }
+
+    & li:has(> input[type="checkbox"]:checked) {
+      text-decoration: line-through;
+      text-decoration-color: var(--gray);
+      color: var(--gray);
+    }
+
+    & li > * {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    p > strong {
+      color: var(--dark);
+    }
+  }
+
+  & > #quartz-body {
+    width: 100%;
+    display: flex;
+    @media all and (max-width: $fullPageWidth) {
+      flex-direction: column;
+    }
+
+    & .sidebar {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      top: 0;
+      width: $sidePanelWidth;
+      margin-top: $topSpacing;
+      box-sizing: border-box;
+      padding: 0 4rem;
+      position: fixed;
+      @media all and (max-width: $fullPageWidth) {
+        position: initial;
+        flex-direction: row;
+        padding: 0;
+        width: initial;
+        margin-top: 2rem;
+      }
+    }
+
+    & .sidebar.left {
+      left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      @media all and (max-width: $fullPageWidth) {
+        gap: 0;
+        align-items: center;
+      }
+    }
+
+    & .sidebar.right {
+      right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      & > * {
+        @media all and (max-width: $fullPageWidth) {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  & .page-header {
+    width: $pageWidth;
+    margin: $topSpacing auto 0 auto;
+    @media all and (max-width: $fullPageWidth) {
+      width: initial;
+      margin-top: 2rem;
+    }
+  }
+
+  & .center,
+  & footer {
+    margin-left: auto;
+    margin-right: auto;
+    width: $pageWidth;
+    @media all and (max-width: $fullPageWidth) {
+      width: initial;
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+.footnotes {
+  margin-top: 2rem;
+  border-top: 1px solid var(--lightgray);
+}
+
+input[type="checkbox"] {
+  transform: translateY(2px);
+  color: var(--secondary);
+  border: 1px solid var(--lightgray);
+  border-radius: 3px;
+  background-color: var(--light);
+  position: relative;
+  margin-inline-end: 0.2rem;
+  margin-inline-start: -1.4rem;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+
+  &:checked {
+    border-color: var(--secondary);
+    background-color: var(--secondary);
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 4px;
+      height: 8px;
+      display: block;
+      border: solid var(--light);
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+}
+
+blockquote {
+  margin: 1rem 0;
+  border-left: 3px solid var(--secondary);
+  padding-left: 1rem;
+  transition: border-color 0.2s ease;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+thead {
+  font-family: var(--headerFont);
+  color: var(--dark);
+  font-weight: revert;
+  margin-bottom: 0;
+
+  article > & > a {
+    color: var(--dark);
+    &.internal {
+      background-color: transparent;
+    }
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &[id] > a[href^="#"] {
+    margin: 0 0.5rem;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    transform: translateY(-0.1rem);
+    display: inline-block;
+    font-family: var(--codeFont);
+    user-select: none;
+  }
+
+  &[id]:hover > a {
+    opacity: 1;
+  }
+}
+
+// typography improvements
+h1 {
+  font-size: 1.75rem;
+  margin-top: 2.25rem;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 1.4rem;
+  margin-top: 1.9rem;
+  margin-bottom: 1rem;
+}
+
+h3 {
+  font-size: 1.12rem;
+  margin-top: 1.62rem;
+  margin-bottom: 1rem;
+}
+
+h4,
+h5,
+h6 {
+  font-size: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+div[data-rehype-pretty-code-fragment] {
+  line-height: 1.6rem;
+  position: relative;
+
+  & > div[data-rehype-pretty-code-title] {
+    font-family: var(--codeFont);
+    font-size: 0.9rem;
+    padding: 0.1rem 0.5rem;
+    border: 1px solid var(--lightgray);
+    width: max-content;
+    border-radius: 5px;
+    margin-bottom: -0.5rem;
+    color: var(--darkgray);
+  }
+
+  & > pre {
+    padding: 0.5rem 0;
+  }
+}
+
+pre {
+  font-family: var(--codeFont);
+  padding: 0.5rem;
+  border-radius: 5px;
+  overflow-x: auto;
+  border: 1px solid var(--lightgray);
+
+  &:has(> code.mermaid) {
+    border: none;
+  }
+
+  & > code {
+    background: none;
+    padding: 0;
+    font-size: 0.85rem;
+    counter-reset: line;
+    counter-increment: line 0;
+    display: grid;
+
+    & [data-highlighted-chars] {
+      background-color: var(--highlight);
+      border-radius: 5px;
+    }
+
+    & > [data-line] {
+      padding: 0 0.25rem;
+      box-sizing: border-box;
+      border-left: 3px solid transparent;
+
+      &[data-highlighted-line] {
+        background-color: var(--highlight);
+        border-left: 3px solid var(--secondary);
+      }
+
+      &::before {
+        content: counter(line);
+        counter-increment: line;
+        width: 1rem;
+        margin-right: 1rem;
+        display: inline-block;
+        text-align: right;
+        color: rgba(115, 138, 148, 0.6);
+      }
+    }
+
+    &[data-line-numbers-max-digits="2"] > [data-line]::before {
+      width: 2rem;
+    }
+
+    &[data-line-numbers-max-digits="3"] > [data-line]::before {
+      width: 3rem;
+    }
+  }
+}
+
+code {
+  font-size: 0.9em;
+  color: var(--dark);
+  font-family: var(--codeFont);
+  border-radius: 5px;
+  padding: 0.1rem 0.2rem;
+  background: var(--lightgray);
+}
+
+tbody,
+li,
+p {
+  line-height: 1.6rem;
+}
+
+table {
+  margin: 1rem;
+  padding: 1.5rem;
+  border-collapse: collapse;
+  & > * {
+    line-height: 2rem;
+  }
+}
+
+th {
+  text-align: left;
+  padding: 0.4rem 1rem;
+  border-bottom: 2px solid var(--gray);
+}
+
+td {
+  padding: 0.2rem 1rem;
+}
+
+tr {
+  border-bottom: 1px solid var(--lightgray);
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+img {
+  max-width: 100%;
+  border-radius: 5px;
+  margin: 1rem 0;
+}
+
+p > img + em {
+  display: block;
+  transform: translateY(-1rem);
+}
+
+hr {
+  width: 100%;
+  margin: 2rem auto;
+  height: 1px;
+  border: none;
+  background-color: var(--lightgray);
+}
+
+audio,
+video {
+  width: 100%;
+  border-radius: 5px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+ul.overflow,
+ol.overflow {
+  height: 300px;
+  overflow-y: auto;
+
+  // clearfix
+  content: "";
+  clear: both;
+
+  & > li:last-of-type {
+    margin-bottom: 50px;
+  }
+
+  &:after {
+    pointer-events: none;
+    content: "";
+    width: 100%;
+    height: 50px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+    background: linear-gradient(transparent 0px, var(--light));
+  }
+}

quartz/styles/callouts.scss

@@ -0,0 +1,110 @@
+@use "sass:color";
+
+.callout {
+  border: 1px solid var(--border);
+  background-color: var(--bg);
+  border-radius: 5px;
+  padding: 0 1rem;
+  overflow-y: hidden;
+  transition: max-height 0.3s ease;
+  box-sizing: border-box;
+
+  & > *:nth-child(2) {
+    margin-top: 0;
+  }
+
+  &[data-callout="note"] {
+    --color: #448aff;
+    --border: #448aff44;
+    --bg: #448aff10;
+  }
+
+  &[data-callout="abstract"] {
+    --color: #00b0ff;
+    --border: #00b0ff44;
+    --bg: #00b0ff10;
+  }
+
+  &[data-callout="info"],
+  &[data-callout="todo"] {
+    --color: #00b8d4;
+    --border: #00b8d444;
+    --bg: #00b8d410;
+  }
+
+  &[data-callout="tip"] {
+    --color: #00bfa5;
+    --border: #00bfa544;
+    --bg: #00bfa510;
+  }
+
+  &[data-callout="success"] {
+    --color: #09ad7a;
+    --border: #09ad7144;
+    --bg: #09ad7110;
+  }
+
+  &[data-callout="question"] {
+    --color: #dba642;
+    --border: #dba64244;
+    --bg: #dba64210;
+  }
+
+  &[data-callout="warning"] {
+    --color: #db8942;
+    --border: #db894244;
+    --bg: #db894210;
+  }
+
+  &[data-callout="failure"],
+  &[data-callout="danger"],
+  &[data-callout="bug"] {
+    --color: #db4242;
+    --border: #db424244;
+    --bg: #db424210;
+  }
+
+  &[data-callout="example"] {
+    --color: #7a43b5;
+    --border: #7a43b544;
+    --bg: #7a43b510;
+  }
+
+  &[data-callout="quote"] {
+    --color: var(--secondary);
+    --border: var(--lightgray);
+  }
+
+  &.is-collapsed > .callout-title > .fold {
+    transform: rotateZ(-90deg);
+  }
+}
+
+.callout-title {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1rem 0;
+  color: var(--color);
+
+  & .fold {
+    margin-left: 0.5rem;
+    transition: transform 0.3s ease;
+    opacity: 0.8;
+    cursor: pointer;
+  }
+
+  & > .callout-title-inner > p {
+    color: var(--color);
+    margin: 0;
+  }
+}
+
+.callout-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.callout-title-inner {
+  font-weight: 700;
+}

quartz/styles/custom.scss

@@ -0,0 +1,13 @@
+:root {
+    --light: #d7eff7;
+    --dark: #284b63;
+    --secondary: #207e8f;
+    --tertiary: #84a59d;
+    --visited: #afbfc9;
+    --primary: #FA8F2D;
+    --gray: #4e4e4e;
+    --lightgray: #f0f0f0;
+    --outlinegray: #dadada;
+    --million-progress-bar-color: var(--secondary);
+    --highlighted: #f5dfaf88;
+  }

quartz/styles/syntax.scss

@@ -0,0 +1,29 @@
+// npx convert-sh-theme https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/github-light.json
+:root {
+  --shiki-color-text: #24292e;
+  --shiki-color-background: #f8f8f8;
+  --shiki-token-constant: #005cc5;
+  --shiki-token-string: #032f62;
+  --shiki-token-comment: #6a737d;
+  --shiki-token-keyword: #d73a49;
+  --shiki-token-parameter: #24292e;
+  --shiki-token-function: #24292e;
+  --shiki-token-string-expression: #22863a;
+  --shiki-token-punctuation: #24292e;
+  --shiki-token-link: #24292e;
+}
+
+// npx convert-sh-theme https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/github-dark.json
+[saved-theme="dark"] {
+  --shiki-color-text: #e1e4e8 !important;
+  --shiki-color-background: #24292e !important;
+  --shiki-token-constant: #79b8ff !important;
+  --shiki-token-string: #9ecbff !important;
+  --shiki-token-comment: #6a737d !important;
+  --shiki-token-keyword: #f97583 !important;
+  --shiki-token-parameter: #e1e4e8 !important;
+  --shiki-token-function: #e1e4e8 !important;
+  --shiki-token-string-expression: #85e89d !important;
+  --shiki-token-punctuation: #e1e4e8 !important;
+  --shiki-token-link: #e1e4e8 !important;
+}

quartz/styles/variables.scss

@@ -0,0 +1,6 @@
+$pageWidth: 750px;
+$mobileBreakpoint: 600px;
+$tabletBreakpoint: 1200px;
+$sidePanelWidth: 400px;
+$topSpacing: 6rem;
+$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;

quartz/util/ctx.ts

@@ -0,0 +1,17 @@
+import { QuartzConfig } from "../cfg"
+import { FullSlug } from "./path"
+
+export interface Argv {
+  directory: string
+  verbose: boolean
+  output: string
+  serve: boolean
+  port: number
+  concurrency?: number
+}
+
+export interface BuildCtx {
+  argv: Argv
+  cfg: QuartzConfig
+  allSlugs: FullSlug[]
+}

quartz/util/glob.ts

@@ -0,0 +1,22 @@
+import path from "path"
+import { FilePath } from "./path"
+import { globby } from "globby"
+
+export function toPosixPath(fp: string): string {
+  return fp.split(path.sep).join("/")
+}
+
+export async function glob(
+  pattern: string,
+  cwd: string,
+  ignorePatterns: string[],
+): Promise<FilePath[]> {
+  const fps = (
+    await globby(pattern, {
+      cwd,
+      ignore: ignorePatterns,
+      gitignore: true,
+    })
+  ).map(toPosixPath)
+  return fps as FilePath[]
+}

quartz/util/log.ts

@@ -0,0 +1,28 @@
+import { Spinner } from "cli-spinner"
+
+export class QuartzLogger {
+  verbose: boolean
+  spinner: Spinner | undefined
+  constructor(verbose: boolean) {
+    this.verbose = verbose
+  }
+
+  start(text: string) {
+    if (this.verbose) {
+      console.log(text)
+    } else {
+      this.spinner = new Spinner(`%s ${text}`)
+      this.spinner.setSpinnerString(18)
+      this.spinner.start()
+    }
+  }
+
+  end(text?: string) {
+    if (!this.verbose) {
+      this.spinner!.stop(true)
+    }
+    if (text) {
+      console.log(text)
+    }
+  }
+}

quartz/util/path.test.ts

@@ -0,0 +1,278 @@
+import test, { describe } from "node:test"
+import * as path from "./path"
+import assert from "node:assert"
+import { FullSlug, TransformOptions } from "./path"
+
+describe("typeguards", () => {
+  test("isSimpleSlug", () => {
+    assert(path.isSimpleSlug(""))
+    assert(path.isSimpleSlug("abc"))
+    assert(path.isSimpleSlug("abc/"))
+    assert(path.isSimpleSlug("notindex"))
+    assert(path.isSimpleSlug("notindex/def"))
+
+    assert(!path.isSimpleSlug("//"))
+    assert(!path.isSimpleSlug("index"))
+    assert(!path.isSimpleSlug("https://example.com"))
+    assert(!path.isSimpleSlug("/abc"))
+    assert(!path.isSimpleSlug("abc/index"))
+    assert(!path.isSimpleSlug("abc#anchor"))
+    assert(!path.isSimpleSlug("abc?query=1"))
+    assert(!path.isSimpleSlug("index.md"))
+    assert(!path.isSimpleSlug("index.html"))
+  })
+
+  test("isRelativeURL", () => {
+    assert(path.isRelativeURL("."))
+    assert(path.isRelativeURL(".."))
+    assert(path.isRelativeURL("./abc/def"))
+    assert(path.isRelativeURL("./abc/def#an-anchor"))
+    assert(path.isRelativeURL("./abc/def?query=1#an-anchor"))
+    assert(path.isRelativeURL("../abc/def"))
+    assert(path.isRelativeURL("./abc/def.pdf"))
+
+    assert(!path.isRelativeURL("abc"))
+    assert(!path.isRelativeURL("/abc/def"))
+    assert(!path.isRelativeURL(""))
+    assert(!path.isRelativeURL("./abc/def.html"))
+    assert(!path.isRelativeURL("./abc/def.md"))
+  })
+
+  test("isFullSlug", () => {
+    assert(path.isFullSlug("index"))
+    assert(path.isFullSlug("abc/def"))
+    assert(path.isFullSlug("html.energy"))
+    assert(path.isFullSlug("test.pdf"))
+
+    assert(!path.isFullSlug("."))
+    assert(!path.isFullSlug("./abc/def"))
+    assert(!path.isFullSlug("../abc/def"))
+    assert(!path.isFullSlug("abc/def#anchor"))
+    assert(!path.isFullSlug("abc/def?query=1"))
+    assert(!path.isFullSlug("note with spaces"))
+  })
+
+  test("isFilePath", () => {
+    assert(path.isFilePath("content/index.md"))
+    assert(path.isFilePath("content/test.png"))
+    assert(!path.isFilePath("../test.pdf"))
+    assert(!path.isFilePath("content/test"))
+    assert(!path.isFilePath("./content/test"))
+  })
+})
+
+describe("transforms", () => {
+  function asserts<Inp, Out>(
+    pairs: [string, string][],
+    transform: (inp: Inp) => Out,
+    checkPre: (x: any) => x is Inp,
+    checkPost: (x: any) => x is Out,
+  ) {
+    for (const [inp, expected] of pairs) {
+      assert(checkPre(inp), `${inp} wasn't the expected input type`)
+      const actual = transform(inp)
+      assert.strictEqual(
+        actual,
+        expected,
+        `after transforming ${inp}, '${actual}' was not '${expected}'`,
+      )
+      assert(checkPost(actual), `${actual} wasn't the expected output type`)
+    }
+  }
+
+  test("simplifySlug", () => {
+    asserts(
+      [
+        ["index", ""],
+        ["abc", "abc"],
+        ["abc/index", "abc/"],
+        ["abc/def", "abc/def"],
+      ],
+      path.simplifySlug,
+      path.isFullSlug,
+      path.isSimpleSlug,
+    )
+  })
+
+  test("slugifyFilePath", () => {
+    asserts(
+      [
+        ["content/index.md", "content/index"],
+        ["content/index.html", "content/index"],
+        ["content/_index.md", "content/index"],
+        ["/content/index.md", "content/index"],
+        ["content/cool.png", "content/cool.png"],
+        ["index.md", "index"],
+        ["test.mp4", "test.mp4"],
+        ["note with spaces.md", "note-with-spaces"],
+      ],
+      path.slugifyFilePath,
+      path.isFilePath,
+      path.isFullSlug,
+    )
+  })
+
+  test("transformInternalLink", () => {
+    asserts(
+      [
+        ["", "."],
+        [".", "."],
+        ["./", "./"],
+        ["./index", "./"],
+        ["./index#abc", "./#abc"],
+        ["./index.html", "./"],
+        ["./index.md", "./"],
+        ["./index.css", "./index.css"],
+        ["content", "./content"],
+        ["content/test.md", "./content/test"],
+        ["content/test.pdf", "./content/test.pdf"],
+        ["./content/test.md", "./content/test"],
+        ["../content/test.md", "../content/test"],
+        ["tags/", "./tags/"],
+        ["/tags/", "./tags/"],
+        ["content/with spaces", "./content/with-spaces"],
+        ["content/with spaces/index", "./content/with-spaces/"],
+        ["content/with spaces#and Anchor!", "./content/with-spaces#and-anchor"],
+      ],
+      path.transformInternalLink,
+      (_x: string): _x is string => true,
+      path.isRelativeURL,
+    )
+  })
+
+  test("pathToRoot", () => {
+    asserts(
+      [
+        ["index", "."],
+        ["abc", "."],
+        ["abc/def", ".."],
+        ["abc/def/ghi", "../.."],
+        ["abc/def/index", "../.."],
+      ],
+      path.pathToRoot,
+      path.isFullSlug,
+      path.isRelativeURL,
+    )
+  })
+})
+
+describe("link strategies", () => {
+  const allSlugs = [
+    "a/b/c",
+    "a/b/d",
+    "a/b/index",
+    "e/f",
+    "e/g/h",
+    "index",
+    "a/test.png",
+  ] as FullSlug[]
+
+  describe("absolute", () => {
+    const opts: TransformOptions = {
+      strategy: "absolute",
+      allSlugs,
+    }
+
+    test("from a/b/c", () => {
+      const cur = "a/b/c" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "a/b/d", opts), "../../a/b/d")
+      assert.strictEqual(path.transformLink(cur, "a/b/index", opts), "../../a/b/")
+      assert.strictEqual(path.transformLink(cur, "e/f", opts), "../../e/f")
+      assert.strictEqual(path.transformLink(cur, "e/g/h", opts), "../../e/g/h")
+      assert.strictEqual(path.transformLink(cur, "index", opts), "../../")
+      assert.strictEqual(path.transformLink(cur, "index.png", opts), "../../index.png")
+      assert.strictEqual(path.transformLink(cur, "index#abc", opts), "../../#abc")
+      assert.strictEqual(path.transformLink(cur, "tag/test", opts), "../../tag/test")
+      assert.strictEqual(path.transformLink(cur, "a/b/c#test", opts), "../../a/b/c#test")
+      assert.strictEqual(path.transformLink(cur, "a/test.png", opts), "../../a/test.png")
+    })
+
+    test("from a/b/index", () => {
+      const cur = "a/b/index" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "a/b/d", opts), "../../a/b/d")
+      assert.strictEqual(path.transformLink(cur, "a/b", opts), "../../a/b")
+      assert.strictEqual(path.transformLink(cur, "index", opts), "../../")
+    })
+
+    test("from index", () => {
+      const cur = "index" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "index", opts), "./")
+      assert.strictEqual(path.transformLink(cur, "a/b/c", opts), "./a/b/c")
+      assert.strictEqual(path.transformLink(cur, "a/b/index", opts), "./a/b/")
+    })
+  })
+
+  describe("shortest", () => {
+    const opts: TransformOptions = {
+      strategy: "shortest",
+      allSlugs,
+    }
+
+    test("from a/b/c", () => {
+      const cur = "a/b/c" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "d", opts), "../../a/b/d")
+      assert.strictEqual(path.transformLink(cur, "h", opts), "../../e/g/h")
+      assert.strictEqual(path.transformLink(cur, "a/b/index", opts), "../../a/b/")
+      assert.strictEqual(path.transformLink(cur, "a/b/index.png", opts), "../../a/b/index.png")
+      assert.strictEqual(path.transformLink(cur, "a/b/index#abc", opts), "../../a/b/#abc")
+      assert.strictEqual(path.transformLink(cur, "index", opts), "../../")
+      assert.strictEqual(path.transformLink(cur, "index.png", opts), "../../index.png")
+      assert.strictEqual(path.transformLink(cur, "test.png", opts), "../../a/test.png")
+      assert.strictEqual(path.transformLink(cur, "index#abc", opts), "../../#abc")
+    })
+
+    test("from a/b/index", () => {
+      const cur = "a/b/index" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "d", opts), "../../a/b/d")
+      assert.strictEqual(path.transformLink(cur, "h", opts), "../../e/g/h")
+      assert.strictEqual(path.transformLink(cur, "a/b/index", opts), "../../a/b/")
+      assert.strictEqual(path.transformLink(cur, "index", opts), "../../")
+    })
+
+    test("from index", () => {
+      const cur = "index" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "d", opts), "./a/b/d")
+      assert.strictEqual(path.transformLink(cur, "h", opts), "./e/g/h")
+      assert.strictEqual(path.transformLink(cur, "a/b/index", opts), "./a/b/")
+      assert.strictEqual(path.transformLink(cur, "index", opts), "./")
+    })
+  })
+
+  describe("relative", () => {
+    const opts: TransformOptions = {
+      strategy: "relative",
+      allSlugs,
+    }
+
+    test("from a/b/c", () => {
+      const cur = "a/b/c" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "d", opts), "./d")
+      assert.strictEqual(path.transformLink(cur, "index", opts), "./")
+      assert.strictEqual(path.transformLink(cur, "../../../index", opts), "../../../")
+      assert.strictEqual(path.transformLink(cur, "../../../index.png", opts), "../../../index.png")
+      assert.strictEqual(path.transformLink(cur, "../../../index#abc", opts), "../../../#abc")
+      assert.strictEqual(path.transformLink(cur, "../../../", opts), "../../../")
+      assert.strictEqual(
+        path.transformLink(cur, "../../../a/test.png", opts),
+        "../../../a/test.png",
+      )
+      assert.strictEqual(path.transformLink(cur, "../../../e/g/h", opts), "../../../e/g/h")
+      assert.strictEqual(path.transformLink(cur, "../../../e/g/h", opts), "../../../e/g/h")
+      assert.strictEqual(path.transformLink(cur, "../../../e/g/h#abc", opts), "../../../e/g/h#abc")
+    })
+
+    test("from a/b/index", () => {
+      const cur = "a/b/index" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "../../index", opts), "../../")
+      assert.strictEqual(path.transformLink(cur, "../../", opts), "../../")
+      assert.strictEqual(path.transformLink(cur, "../../e/g/h", opts), "../../e/g/h")
+      assert.strictEqual(path.transformLink(cur, "c", opts), "./c")
+    })
+
+    test("from index", () => {
+      const cur = "index" as FullSlug
+      assert.strictEqual(path.transformLink(cur, "e/g/h", opts), "./e/g/h")
+      assert.strictEqual(path.transformLink(cur, "a/b/index", opts), "./a/b/")
+    })
+  })
+})

quartz/util/path.ts

@@ -0,0 +1,231 @@
+import { slug } from "github-slugger"
+// this file must be isomorphic so it can't use node libs (e.g. path)
+
+export const QUARTZ = "quartz"
+
+/// Utility type to simulate nominal types in TypeScript
+type SlugLike<T> = string & { __brand: T }
+
+/** Cannot be relative and must have a file extension. */
+export type FilePath = SlugLike<"filepath">
+export function isFilePath(s: string): s is FilePath {
+  const validStart = !s.startsWith(".")
+  return validStart && _hasFileExtension(s)
+}
+
+/** Cannot be relative and may not have leading or trailing slashes. It can have `index` as it's last segment. Use this wherever possible is it's the most 'general' interpretation of a slug. */
+export type FullSlug = SlugLike<"full">
+export function isFullSlug(s: string): s is FullSlug {
+  const validStart = !(s.startsWith(".") || s.startsWith("/"))
+  const validEnding = !s.endsWith("/")
+  return validStart && validEnding && !_containsForbiddenCharacters(s)
+}
+
+/** Shouldn't be a relative path and shouldn't have `/index` as an ending or a file extension. It _can_ however have a trailing slash to indicate a folder path. */
+export type SimpleSlug = SlugLike<"simple">
+export function isSimpleSlug(s: string): s is SimpleSlug {
+  const validStart = !(s.startsWith(".") || s.startsWith("/"))
+  const validEnding = !(s.endsWith("/index") || s === "index")
+  return validStart && !_containsForbiddenCharacters(s) && validEnding && !_hasFileExtension(s)
+}
+
+/** Can be found on `href`s but can also be constructed for client-side navigation (e.g. search and graph) */
+export type RelativeURL = SlugLike<"relative">
+export function isRelativeURL(s: string): s is RelativeURL {
+  const validStart = /^\.{1,2}/.test(s)
+  const validEnding = !(s.endsWith("/index") || s === "index")
+  return validStart && validEnding && ![".md", ".html"].includes(_getFileExtension(s) ?? "")
+}
+
+export function getFullSlug(window: Window): FullSlug {
+  const res = window.document.body.dataset.slug! as FullSlug
+  return res
+}
+
+export function slugifyFilePath(fp: FilePath, excludeExt?: boolean): FullSlug {
+  fp = _stripSlashes(fp) as FilePath
+  let ext = _getFileExtension(fp)
+  const withoutFileExt = fp.replace(new RegExp(ext + "$"), "")
+  if (excludeExt || [".md", ".html", undefined].includes(ext)) {
+    ext = ""
+  }
+
+  let slug = withoutFileExt
+    .split("/")
+    .map((segment) => segment.replace(/\s/g, "-")) // slugify all segments
+    .join("/") // always use / as sep
+    .replace(/\/$/, "") // remove trailing slash
+
+  // treat _index as index
+  if (_endsWith(slug, "_index")) {
+    slug = slug.replace(/_index$/, "index")
+  }
+
+  return (slug + ext) as FullSlug
+}
+
+export function simplifySlug(fp: FullSlug): SimpleSlug {
+  return _stripSlashes(_trimSuffix(fp, "index"), true) as SimpleSlug
+}
+
+export function transformInternalLink(link: string): RelativeURL {
+  let [fplike, anchor] = splitAnchor(decodeURI(link))
+
+  const folderPath = _isFolderPath(fplike)
+  let segments = fplike.split("/").filter((x) => x.length > 0)
+  let prefix = segments.filter(_isRelativeSegment).join("/")
+  let fp = segments.filter((seg) => !_isRelativeSegment(seg) && seg !== "").join("/")
+
+  // manually add ext here as we want to not strip 'index' if it has an extension
+  const simpleSlug = simplifySlug(slugifyFilePath(fp as FilePath))
+  const joined = joinSegments(_stripSlashes(prefix), _stripSlashes(simpleSlug))
+  const trail = folderPath ? "/" : ""
+  const res = (_addRelativeToStart(joined) + trail + anchor) as RelativeURL
+  return res
+}
+
+// resolve /a/b/c to ../..
+export function pathToRoot(slug: FullSlug): RelativeURL {
+  let rootPath = slug
+    .split("/")
+    .filter((x) => x !== "")
+    .slice(0, -1)
+    .map((_) => "..")
+    .join("/")
+
+  if (rootPath.length === 0) {
+    rootPath = "."
+  }
+
+  return rootPath as RelativeURL
+}
+
+export function resolveRelative(current: FullSlug, target: FullSlug | SimpleSlug): RelativeURL {
+  const res = joinSegments(pathToRoot(current), simplifySlug(target as FullSlug)) as RelativeURL
+  return res
+}
+
+export function splitAnchor(link: string): [string, string] {
+  let [fp, anchor] = link.split("#", 2)
+  anchor = anchor === undefined ? "" : "#" + slugAnchor(anchor)
+  return [fp, anchor]
+}
+
+export function slugAnchor(anchor: string) {
+  return slug(anchor)
+}
+
+export function slugTag(tag: string) {
+  return tag
+    .split("/")
+    .map((tagSegment) => slug(tagSegment))
+    .join("/")
+}
+
+export function joinSegments(...args: string[]): string {
+  return args.filter((segment) => segment !== "").join("/")
+}
+
+export function getAllSegmentPrefixes(tags: string): string[] {
+  const segments = tags.split("/")
+  const results: string[] = []
+  for (let i = 0; i < segments.length; i++) {
+    results.push(segments.slice(0, i + 1).join("/"))
+  }
+  return results
+}
+
+export interface TransformOptions {
+  strategy: "absolute" | "relative" | "shortest"
+  allSlugs: FullSlug[]
+}
+
+export function transformLink(src: FullSlug, target: string, opts: TransformOptions): RelativeURL {
+  let targetSlug = transformInternalLink(target)
+
+  if (opts.strategy === "relative") {
+    return targetSlug as RelativeURL
+  } else {
+    const folderTail = _isFolderPath(targetSlug) ? "/" : ""
+    const canonicalSlug = _stripSlashes(targetSlug.slice(".".length))
+    let [targetCanonical, targetAnchor] = splitAnchor(canonicalSlug)
+
+    if (opts.strategy === "shortest") {
+      // if the file name is unique, then it's just the filename
+      const matchingFileNames = opts.allSlugs.filter((slug) => {
+        const parts = slug.split("/")
+        const fileName = parts.at(-1)
+        return targetCanonical === fileName
+      })
+
+      // only match, just use it
+      if (matchingFileNames.length === 1) {
+        const targetSlug = matchingFileNames[0]
+        return (resolveRelative(src, targetSlug) + targetAnchor) as RelativeURL
+      }
+    }
+
+    // if it's not unique, then it's the absolute path from the vault root
+    return (joinSegments(pathToRoot(src), canonicalSlug) + folderTail) as RelativeURL
+  }
+}
+
+function _isFolderPath(fplike: string): boolean {
+  return (
+    fplike.endsWith("/") ||
+    _endsWith(fplike, "index") ||
+    _endsWith(fplike, "index.md") ||
+    _endsWith(fplike, "index.html")
+  )
+}
+
+function _endsWith(s: string, suffix: string): boolean {
+  return s === suffix || s.endsWith("/" + suffix)
+}
+
+function _trimSuffix(s: string, suffix: string): string {
+  if (_endsWith(s, suffix)) {
+    s = s.slice(0, -suffix.length)
+  }
+  return s
+}
+
+function _containsForbiddenCharacters(s: string): boolean {
+  return s.includes(" ") || s.includes("#") || s.includes("?")
+}
+
+function _hasFileExtension(s: string): boolean {
+  return _getFileExtension(s) !== undefined
+}
+
+function _getFileExtension(s: string): string | undefined {
+  return s.match(/\.[A-Za-z0-9]+$/)?.[0]
+}
+
+function _isRelativeSegment(s: string): boolean {
+  return /^\.{0,2}$/.test(s)
+}
+
+export function _stripSlashes(s: string, onlyStripPrefix?: boolean): string {
+  if (s.startsWith("/")) {
+    s = s.substring(1)
+  }
+
+  if (!onlyStripPrefix && s.endsWith("/")) {
+    s = s.slice(0, -1)
+  }
+
+  return s
+}
+
+function _addRelativeToStart(s: string): string {
+  if (s === "") {
+    s = "."
+  }
+
+  if (!s.startsWith(".")) {
+    s = joinSegments(".", s)
+  }
+
+  return s
+}

quartz/util/perf.ts

@@ -0,0 +1,19 @@
+import chalk from "chalk"
+import pretty from "pretty-time"
+
+export class PerfTimer {
+  evts: { [key: string]: [number, number] }
+
+  constructor() {
+    this.evts = {}
+    this.addEvent("start")
+  }
+
+  addEvent(evtName: string) {
+    this.evts[evtName] = process.hrtime()
+  }
+
+  timeSince(evtName?: string): string {
+    return chalk.yellow(pretty(process.hrtime(this.evts[evtName ?? "start"])))
+  }
+}

quartz/util/resources.tsx

@@ -0,0 +1,39 @@
+import { randomUUID } from "crypto"
+import { JSX } from "preact/jsx-runtime"
+
+export type JSResource = {
+  loadTime: "beforeDOMReady" | "afterDOMReady"
+  moduleType?: "module"
+  spaPreserve?: boolean
+} & (
+  | {
+      src: string
+      contentType: "external"
+    }
+  | {
+      script: string
+      contentType: "inline"
+    }
+)
+
+export function JSResourceToScriptElement(resource: JSResource, preserve?: boolean): JSX.Element {
+  const scriptType = resource.moduleType ?? "application/javascript"
+  const spaPreserve = preserve ?? resource.spaPreserve
+  if (resource.contentType === "external") {
+    return (
+      <script key={resource.src} src={resource.src} type={scriptType} spa-preserve={spaPreserve} />
+    )
+  } else {
+    const content = resource.script
+    return (
+      <script key={randomUUID()} type={scriptType} spa-preserve={spaPreserve}>
+        {content}
+      </script>
+    )
+  }
+}
+
+export interface StaticResources {
+  css: string[]
+  js: JSResource[]
+}

quartz/util/sourcemap.ts

@@ -0,0 +1,18 @@
+import fs from "fs"
+import sourceMapSupport from "source-map-support"
+import { fileURLToPath } from "url"
+
+export const options: sourceMapSupport.Options = {
+  // source map hack to get around query param
+  // import cache busting
+  retrieveSourceMap(source) {
+    if (source.includes(".quartz-cache")) {
+      let realSource = fileURLToPath(source.split("?", 2)[0] + ".map")
+      return {
+        map: fs.readFileSync(realSource, "utf8"),
+      }
+    } else {
+      return null
+    }
+  },
+}

quartz/util/theme.ts

@@ -0,0 +1,63 @@
+export interface ColorScheme {
+  light: string
+  lightgray: string
+  gray: string
+  darkgray: string
+  dark: string
+  secondary: string
+  tertiary: string
+  highlight: string
+}
+
+export interface Theme {
+  typography: {
+    header: string
+    body: string
+    code: string
+  }
+  colors: {
+    lightMode: ColorScheme
+    darkMode: ColorScheme
+  }
+}
+
+const DEFAULT_SANS_SERIF =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
+const DEFAULT_MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
+
+export function googleFontHref(theme: Theme) {
+  const { code, header, body } = theme.typography
+  return `https://fonts.googleapis.com/css2?family=${code}&family=${header}:wght@400;700&family=${body}:ital,wght@0,400;0,600;1,400;1,600&display=swap`
+}
+
+export function joinStyles(theme: Theme, ...stylesheet: string[]) {
+  return `
+${stylesheet.join("\n\n")}
+
+:root {
+  --light: ${theme.colors.lightMode.light};
+  --lightgray: ${theme.colors.lightMode.lightgray};
+  --gray: ${theme.colors.lightMode.gray};
+  --darkgray: ${theme.colors.lightMode.darkgray};
+  --dark: ${theme.colors.lightMode.dark};
+  --secondary: ${theme.colors.lightMode.secondary};
+  --tertiary: ${theme.colors.lightMode.tertiary};
+  --highlight: ${theme.colors.lightMode.highlight};
+
+  --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
+  --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
+  --codeFont: "${theme.typography.code}", ${DEFAULT_MONO};
+}
+
+:root[saved-theme="dark"] {
+  --light: ${theme.colors.darkMode.light};
+  --lightgray: ${theme.colors.darkMode.lightgray};
+  --gray: ${theme.colors.darkMode.gray};
+  --darkgray: ${theme.colors.darkMode.darkgray};
+  --dark: ${theme.colors.darkMode.dark};
+  --secondary: ${theme.colors.darkMode.secondary};
+  --tertiary: ${theme.colors.darkMode.tertiary};
+  --highlight: ${theme.colors.darkMode.highlight};
+}
+`
+}

quartz/util/trace.ts

@@ -0,0 +1,47 @@
+import chalk from "chalk"
+import process from "process"
+import { isMainThread } from "workerpool"
+
+const rootFile = /.*at file:/
+export function trace(msg: string, err: Error) {
+  const stack = err.stack
+
+  const lines: string[] = []
+
+  lines.push("")
+  lines.push(
+    "\n" +
+      chalk.bgRed.black.bold(" ERROR ") +
+      "\n" +
+      chalk.red(` ${msg}`) +
+      (err.message.length > 0 ? `: ${err.message}` : ""),
+  )
+
+  if (!stack) {
+    return
+  }
+
+  let reachedEndOfLegibleTrace = false
+  for (const line of stack.split("\n").slice(1)) {
+    if (reachedEndOfLegibleTrace) {
+      break
+    }
+
+    if (!line.includes("node_modules")) {
+      lines.push(` ${line}`)
+      if (rootFile.test(line)) {
+        reachedEndOfLegibleTrace = true
+      }
+    }
+  }
+
+  const traceMsg = lines.join("\n")
+  if (!isMainThread) {
+    // gather lines and throw
+    throw new Error(traceMsg)
+  } else {
+    // print and exit
+    console.error(traceMsg)
+    process.exit(1)
+  }
+}

quartz/worker.ts

@@ -0,0 +1,19 @@
+import sourceMapSupport from "source-map-support"
+sourceMapSupport.install(options)
+import cfg from "../quartz.config"
+import { Argv, BuildCtx } from "./util/ctx"
+import { FilePath, FullSlug } from "./util/path"
+import { createFileParser, createProcessor } from "./processors/parse"
+import { options } from "./util/sourcemap"
+
+// only called from worker thread
+export async function parseFiles(argv: Argv, fps: FilePath[], allSlugs: FullSlug[]) {
+  const ctx: BuildCtx = {
+    cfg,
+    argv,
+    allSlugs,
+  }
+  const processor = createProcessor(ctx)
+  const parse = createFileParser(ctx, fps)
+  return parse(processor)
+}