Merge commit '4bbcc0c50aca68d470542c1af8fd5f8060d97ab8' into HEAD

quartz/build.ts

@@ -17,6 +17,10 @@ import { glob, toPosixPath } from "./util/glob"
 import { trace } from "./util/trace"
 import { options } from "./util/sourcemap"
 import { Mutex } from "async-mutex"
+import DepGraph from "./depgraph"
+import { getStaticResourcesFromPlugins } from "./plugins"
+
+type Dependencies = Record<string, DepGraph<FilePath> | null>
 
 type BuildData = {
   ctx: BuildCtx
@@ -29,8 +33,11 @@ type BuildData = {
   toRebuild: Set<FilePath>
   toRemove: Set<FilePath>
   lastBuildMs: number
+  dependencies: Dependencies
 }
 
+type FileEvent = "add" | "change" | "delete"
+
 async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
   const ctx: BuildCtx = {
     argv,
@@ -53,7 +60,7 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
 
   const release = await mut.acquire()
   perf.addEvent("clean")
-  await rimraf(output)
+  await rimraf(path.join(output, "*"), { glob: true })
   console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`)
 
   perf.addEvent("glob")
@@ -68,12 +75,24 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
 
   const parsedFiles = await parseMarkdown(ctx, filePaths)
   const filteredContent = filterContent(ctx, parsedFiles)
+
+  const dependencies: Record<string, DepGraph<FilePath> | null> = {}
+
+  // Only build dependency graphs if we're doing a fast rebuild
+  if (argv.fastRebuild) {
+    const staticResources = getStaticResourcesFromPlugins(ctx)
+    for (const emitter of cfg.plugins.emitters) {
+      dependencies[emitter.name] =
+        (await emitter.getDependencyGraph?.(ctx, filteredContent, staticResources)) ?? null
+    }
+  }
+
   await emitContent(ctx, filteredContent)
   console.log(chalk.green(`Done processing ${fps.length} files in ${perf.timeSince()}`))
   release()
 
   if (argv.serve) {
-    return startServing(ctx, mut, parsedFiles, clientRefresh)
+    return startServing(ctx, mut, parsedFiles, clientRefresh, dependencies)
   }
 }
 
@@ -83,9 +102,11 @@ async function startServing(
   mut: Mutex,
   initialContent: ProcessedContent[],
   clientRefresh: () => void,
+  dependencies: Dependencies, // emitter name: dep graph
 ) {
   const { argv } = ctx
 
+  // cache file parse results
   const contentMap = new Map<FilePath, ProcessedContent>()
   for (const content of initialContent) {
     const [_tree, vfile] = content
@@ -95,6 +116,7 @@ async function startServing(
   const buildData: BuildData = {
     ctx,
     mut,
+    dependencies,
     contentMap,
     ignored: await isGitIgnored(),
     initialSlugs: ctx.allSlugs,
@@ -110,19 +132,193 @@ async function startServing(
     ignoreInitial: true,
   })
 
+  const buildFromEntry = argv.fastRebuild ? partialRebuildFromEntrypoint : rebuildFromEntrypoint
   watcher
-    .on("add", (fp) => rebuildFromEntrypoint(fp, "add", clientRefresh, buildData))
-    .on("change", (fp) => rebuildFromEntrypoint(fp, "change", clientRefresh, buildData))
-    .on("unlink", (fp) => rebuildFromEntrypoint(fp, "delete", clientRefresh, buildData))
+    .on("add", (fp) => buildFromEntry(fp, "add", clientRefresh, buildData))
+    .on("change", (fp) => buildFromEntry(fp, "change", clientRefresh, buildData))
+    .on("unlink", (fp) => buildFromEntry(fp, "delete", clientRefresh, buildData))
 
   return async () => {
     await watcher.close()
   }
 }
 
+async function partialRebuildFromEntrypoint(
+  filepath: string,
+  action: FileEvent,
+  clientRefresh: () => void,
+  buildData: BuildData, // note: this function mutates buildData
+) {
+  const { ctx, ignored, dependencies, contentMap, mut, toRemove } = buildData
+  const { argv, cfg } = ctx
+
+  // don't do anything for gitignored files
+  if (ignored(filepath)) {
+    return
+  }
+
+  const buildStart = new Date().getTime()
+  buildData.lastBuildMs = buildStart
+  const release = await mut.acquire()
+  if (buildData.lastBuildMs > buildStart) {
+    release()
+    return
+  }
+
+  const perf = new PerfTimer()
+  console.log(chalk.yellow("Detected change, rebuilding..."))
+
+  // UPDATE DEP GRAPH
+  const fp = joinSegments(argv.directory, toPosixPath(filepath)) as FilePath
+
+  const staticResources = getStaticResourcesFromPlugins(ctx)
+  let processedFiles: ProcessedContent[] = []
+
+  switch (action) {
+    case "add":
+      // add to cache when new file is added
+      processedFiles = await parseMarkdown(ctx, [fp])
+      processedFiles.forEach(([tree, vfile]) => contentMap.set(vfile.data.filePath!, [tree, vfile]))
+
+      // update the dep graph by asking all emitters whether they depend on this file
+      for (const emitter of cfg.plugins.emitters) {
+        const emitterGraph =
+          (await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
+
+        if (emitterGraph) {
+          const existingGraph = dependencies[emitter.name]
+          if (existingGraph !== null) {
+            existingGraph.mergeGraph(emitterGraph)
+          } else {
+            // might be the first time we're adding a mardown file
+            dependencies[emitter.name] = emitterGraph
+          }
+        }
+      }
+      break
+    case "change":
+      // invalidate cache when file is changed
+      processedFiles = await parseMarkdown(ctx, [fp])
+      processedFiles.forEach(([tree, vfile]) => contentMap.set(vfile.data.filePath!, [tree, vfile]))
+
+      // only content files can have added/removed dependencies because of transclusions
+      if (path.extname(fp) === ".md") {
+        for (const emitter of cfg.plugins.emitters) {
+          // get new dependencies from all emitters for this file
+          const emitterGraph =
+            (await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
+
+          // only update the graph if the emitter plugin uses the changed file
+          // eg. Assets plugin ignores md files, so we skip updating the graph
+          if (emitterGraph?.hasNode(fp)) {
+            // merge the new dependencies into the dep graph
+            dependencies[emitter.name]?.updateIncomingEdgesForNode(emitterGraph, fp)
+          }
+        }
+      }
+      break
+    case "delete":
+      toRemove.add(fp)
+      break
+  }
+
+  if (argv.verbose) {
+    console.log(`Updated dependency graphs in ${perf.timeSince()}`)
+  }
+
+  // EMIT
+  perf.addEvent("rebuild")
+  let emittedFiles = 0
+
+  for (const emitter of cfg.plugins.emitters) {
+    const depGraph = dependencies[emitter.name]
+
+    // emitter hasn't defined a dependency graph. call it with all processed files
+    if (depGraph === null) {
+      if (argv.verbose) {
+        console.log(
+          `Emitter ${emitter.name} doesn't define a dependency graph. Calling it with all files...`,
+        )
+      }
+
+      const files = [...contentMap.values()].filter(
+        ([_node, vfile]) => !toRemove.has(vfile.data.filePath!),
+      )
+
+      const emittedFps = await emitter.emit(ctx, files, staticResources)
+
+      if (ctx.argv.verbose) {
+        for (const file of emittedFps) {
+          console.log(`[emit:${emitter.name}] ${file}`)
+        }
+      }
+
+      emittedFiles += emittedFps.length
+      continue
+    }
+
+    // only call the emitter if it uses this file
+    if (depGraph.hasNode(fp)) {
+      // re-emit using all files that are needed for the downstream of this file
+      // eg. for ContentIndex, the dep graph could be:
+      // a.md --> contentIndex.json
+      // b.md ------^
+      //
+      // if a.md changes, we need to re-emit contentIndex.json,
+      // and supply [a.md, b.md] to the emitter
+      const upstreams = [...depGraph.getLeafNodeAncestors(fp)] as FilePath[]
+
+      const upstreamContent = upstreams
+        // filter out non-markdown files
+        .filter((file) => contentMap.has(file))
+        // if file was deleted, don't give it to the emitter
+        .filter((file) => !toRemove.has(file))
+        .map((file) => contentMap.get(file)!)
+
+      const emittedFps = await emitter.emit(ctx, upstreamContent, staticResources)
+
+      if (ctx.argv.verbose) {
+        for (const file of emittedFps) {
+          console.log(`[emit:${emitter.name}] ${file}`)
+        }
+      }
+
+      emittedFiles += emittedFps.length
+    }
+  }
+
+  console.log(`Emitted ${emittedFiles} files to \`${argv.output}\` in ${perf.timeSince("rebuild")}`)
+
+  // CLEANUP
+  const destinationsToDelete = new Set<FilePath>()
+  for (const file of toRemove) {
+    // remove from cache
+    contentMap.delete(file)
+    Object.values(dependencies).forEach((depGraph) => {
+      // remove the node from dependency graphs
+      depGraph?.removeNode(file)
+      // remove any orphan nodes. eg if a.md is deleted, a.html is orphaned and should be removed
+      const orphanNodes = depGraph?.removeOrphanNodes()
+      orphanNodes?.forEach((node) => {
+        // only delete files that are in the output directory
+        if (node.startsWith(argv.output)) {
+          destinationsToDelete.add(node)
+        }
+      })
+    })
+  }
+  await rimraf([...destinationsToDelete])
+
+  console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
+
+  toRemove.clear()
+  release()
+  clientRefresh()
+}
+
 async function rebuildFromEntrypoint(
   fp: string,
-  action: "add" | "change" | "delete",
+  action: FileEvent,
   clientRefresh: () => void,
   buildData: BuildData, // note: this function mutates buildData
 ) {
@@ -190,7 +386,7 @@ async function rebuildFromEntrypoint(
 
     // TODO: we can probably traverse the link graph to figure out what's safe to delete here
     // instead of just deleting everything
-    await rimraf(argv.output)
+    await rimraf(path.join(argv.output, ".*"), { glob: true })
     await emitContent(ctx, filteredContent)
     console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
   } catch (err) {

quartz/cfg.ts

@@ -7,18 +7,37 @@ import { Theme } from "./util/theme"
 export type Analytics =
   | null
   | {
-    provider: "plausible"
-    host?: string
-  }
+      provider: "plausible"
+      host?: string
+    }
   | {
-    provider: "google"
-    tagId: string
-  }
+      provider: "google"
+      tagId: string
+    }
   | {
-    provider: "umami"
-    websiteId: string
-    host?: string
-  }
+      provider: "umami"
+      websiteId: string
+      host?: string
+    }
+  | {
+      provider: "goatcounter"
+      websiteId: string
+      host?: string
+      scriptSrc?: string
+    }
+  | {
+      provider: "posthog"
+      apiKey: string
+      host?: string
+    }
+  | {
+      provider: "tinylytics"
+      siteId: string
+    }
+  | {
+      provider: "cabin"
+      host?: string
+    }
 
 export interface GlobalConfiguration {
   pageTitle: string
@@ -35,7 +54,6 @@ export interface GlobalConfiguration {
   /** 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
    */
-  repoUrl?: string
   baseUrl?: string
   theme: Theme
   /**
@@ -59,10 +77,11 @@ export interface FullPageLayout {
   header: QuartzComponent[]
   beforeBody: QuartzComponent[]
   pageBody: QuartzComponent
+  afterBody: QuartzComponent[]
   left: QuartzComponent[]
   right: QuartzComponent[]
   footer: QuartzComponent
 }
 
 export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
-export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer">
+export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody">

quartz/cli/args.js

@@ -71,6 +71,11 @@ export const BuildArgv = {
     default: false,
     describe: "run a local server to live-preview your Quartz",
   },
+  fastRebuild: {
+    boolean: true,
+    default: false,
+    describe: "[experimental] rebuild only the changed files",
+  },
   baseDir: {
     string: true,
     default: "",

quartz/components/ArticleTitle.tsx

@@ -1,7 +1,7 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 
-function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
+const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
   const title = fileData.frontmatter?.title
   if (title) {
     return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>

quartz/components/Backlinks.tsx

@@ -1,10 +1,15 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
-function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentProps) {
+const Backlinks: QuartzComponent = ({
+  fileData,
+  allFiles,
+  displayClass,
+  cfg,
+}: QuartzComponentProps) => {
   const slug = simplifySlug(fileData.slug!)
   const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
   return (

quartz/components/Body.tsx

@@ -1,9 +1,9 @@
 // @ts-ignore
 import clipboardScript from "./scripts/clipboard.inline"
 import clipboardStyle from "./styles/clipboard.scss"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-function Body({ children }: QuartzComponentProps) {
+const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
   return <div id="quartz-body">{children}</div>
 }
 

quartz/components/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
-import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
+import { FullSlug, SimpleSlug, joinSegments, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { classNames } from "../util/lang"
 
@@ -54,7 +54,11 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
   // computed index of folder name to its associated file data
   let folderIndex: Map<string, QuartzPluginData> | undefined
 
-  function Breadcrumbs({ fileData, allFiles, displayClass }: QuartzComponentProps) {
+  const Breadcrumbs: QuartzComponent = ({
+    fileData,
+    allFiles,
+    displayClass,
+  }: QuartzComponentProps) => {
     // Hide crumbs on root if enabled
     if (options.hideOnRoot && fileData.slug === "index") {
       return <></>
@@ -68,13 +72,9 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
       folderIndex = new Map()
       // construct the index for the first time
       for (const file of allFiles) {
-        if (file.slug?.endsWith("index")) {
-          const folderParts = file.slug?.split("/")
-          // 2nd last to exclude the /index
-          const folderName = folderParts?.at(-2)
-          if (folderName) {
-            folderIndex.set(folderName, file)
-          }
+        const folderParts = file.slug?.split("/")
+        if (folderParts?.at(-1) === "index") {
+          folderIndex.set(folderParts.slice(0, -1).join("/"), file)
         }
       }
     }
@@ -82,13 +82,17 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
     // Split slug into hierarchy/parts
     const slugParts = fileData.slug?.split("/")
     if (slugParts) {
+      // is tag breadcrumb?
+      const isTagPath = slugParts[0] === "tags"
+
       // full path until current part
       let currentPath = ""
+
       for (let i = 0; i < slugParts.length - 1; i++) {
         let curPathSegment = slugParts[i]
 
         // Try to resolve frontmatter folder title
-        const currentFile = folderIndex?.get(curPathSegment)
+        const currentFile = folderIndex?.get(slugParts.slice(0, i + 1).join("/"))
         if (currentFile) {
           const title = currentFile.frontmatter!.title
           if (title !== "index") {
@@ -97,10 +101,15 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
         }
 
         // Add current slug to full path
-        currentPath += slugParts[i] + "/"
+        currentPath = joinSegments(currentPath, slugParts[i])
+        const includeTrailingSlash = !isTagPath || i < 1
 
         // Format and add current crumb
-        const crumb = formatCrumb(curPathSegment, fileData.slug!, currentPath as SimpleSlug)
+        const crumb = formatCrumb(
+          curPathSegment,
+          fileData.slug!,
+          (currentPath + (includeTrailingSlash ? "/" : "")) as SimpleSlug,
+        )
         crumbs.push(crumb)
       }
 
@@ -125,5 +134,6 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
     )
   }
   Breadcrumbs.css = breadcrumbsStyle
+
   return Breadcrumbs
 }) satisfies QuartzComponentConstructor

quartz/components/Comments.tsx

@@ -0,0 +1,44 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+// @ts-ignore
+import script from "./scripts/comments.inline"
+
+type Options = {
+  provider: "giscus"
+  options: {
+    repo: `${string}/${string}`
+    repoId: string
+    category: string
+    categoryId: string
+    mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
+    strict?: boolean
+    reactionsEnabled?: boolean
+    inputPosition?: "top" | "bottom"
+  }
+}
+
+function boolToStringBool(b: boolean): string {
+  return b ? "1" : "0"
+}
+
+export default ((opts: Options) => {
+  const Comments: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+    return (
+      <div
+        class={classNames(displayClass, "giscus")}
+        data-repo={opts.options.repo}
+        data-repo-id={opts.options.repoId}
+        data-category={opts.options.category}
+        data-category-id={opts.options.categoryId}
+        data-mapping={opts.options.mapping ?? "url"}
+        data-strict={boolToStringBool(opts.options.strict ?? true)}
+        data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
+        data-input-position={opts.options.inputPosition ?? "bottom"}
+      ></div>
+    )
+  }
+
+  Comments.afterDOMLoaded = script
+
+  return Comments
+}) satisfies QuartzComponentConstructor<Options>

quartz/components/ContentMeta.tsx

@@ -2,17 +2,21 @@ import { formatDate, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
 import { classNames } from "../util/lang"
-import { JSX } from "preact/jsx-runtime"
+import { i18n } from "../i18n"
+import { JSX } from "preact"
+import style from "./styles/contentMeta.scss"
 
 interface ContentMetaOptions {
   /**
    * Whether to display reading time
    */
   showReadingTime: boolean
+  showComma: boolean
 }
 
 const defaultOptions: ContentMetaOptions = {
   showReadingTime: true,
+  showComma: true,
 }
 
 export default ((opts?: Partial<ContentMetaOptions>) => {
@@ -21,42 +25,28 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
 
   function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
     const text = fileData.text
-    const filepath = fileData.filePath
-    if (text && filepath) {
-      const fileRepoUrl: string = `${cfg.repoUrl}/commits/branch/v4/${filepath}`
-      const segments: JSX.Element[] = []
-      // const segments: string[] = []
 
-      if (fileData.dates?.created) {
-        segments.push(<span>created: {formatDate(fileData.dates.created, cfg.locale)}</span>)
-      }
-      if (fileData.dates?.modified) {
-        segments.push(<span> updated: {formatDate(fileData.dates.modified, cfg.locale)}</span>)
+    if (text) {
+      const segments: (string | JSX.Element)[] = []
+
+      if (fileData.dates) {
+        segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
       }
+
       // Display reading time if enabled
       if (options.showReadingTime) {
-        const { text: timeTaken, words: _words } = readingTime(text)
-        segments.push(<span>{timeTaken}</span>)
+        const { minutes, words: _words } = readingTime(text)
+        const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
+          minutes: Math.ceil(minutes),
+        })
+        segments.push(displayedTime)
       }
-      segments.push(
-        <a
-          href={fileRepoUrl}
-          class="external"
-          target="_blank"
-        >
-          view history
-          <svg class="external-icon" viewBox="0 0 512 512"><path d="M320 0H288V64h32 82.7L201.4 265.4 178.7 288 224 333.3l22.6-22.6L448 109.3V192v32h64V192 32 0H480 320zM32 32H0V64 480v32H32 456h32V480 352 320H424v32 96H64V96h96 32V32H160 32z"></path></svg>
-        </a>,
-      )
 
+      const segmentsElements = segments.map((segment) => <span>{segment}</span>)
 
       return (
-        <p class={classNames(displayClass, "content-meta")}>
-          {segments.map((meta, idx) => (
-            <>
-              {meta}
-            </>
-          ))}
+        <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
+          {segmentsElements}
         </p>
       )
     } else {
@@ -64,14 +54,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
     }
   }
 
-  ContentMetadata.css = `
-  .content-meta {
-    margin-top: 0;
-    color: var(--gray);
-  }
-  .content-meta span{
-    margin-right: 10px;
-  }
-  `
+  ContentMetadata.css = style
+
   return ContentMetadata
 }) satisfies QuartzComponentConstructor

quartz/components/Darkmode.tsx

@@ -3,11 +3,11 @@
 // see: https://v8.dev/features/modules#defer
 import darkmodeScript from "./scripts/darkmode.inline"
 import styles from "./styles/darkmode.scss"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
-function Darkmode({ displayClass, cfg }: QuartzComponentProps) {
+const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
   return (
     <div class={classNames(displayClass, "darkmode")}>
       <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />

quartz/components/DesktopOnly.tsx

@@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 export default ((component?: QuartzComponent) => {
   if (component) {
     const Component = component
-    function DesktopOnly(props: QuartzComponentProps) {
+    const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => {
       return <Component displayClass="desktop-only" {...props} />
     }
 

quartz/components/Explorer.tsx

@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import explorerStyle from "./styles/explorer.scss"
 
 // @ts-ignore
@@ -75,7 +75,12 @@ export default ((userOpts?: Partial<Options>) => {
     jsonTree = JSON.stringify(folders)
   }
 
-  function Explorer({ cfg, allFiles, displayClass, fileData }: QuartzComponentProps) {
+  const Explorer: QuartzComponent = ({
+    cfg,
+    allFiles,
+    displayClass,
+    fileData,
+  }: QuartzComponentProps) => {
     constructFileTree(allFiles)
     return (
       <div class={classNames(displayClass, "explorer")}>
@@ -87,7 +92,7 @@ export default ((userOpts?: Partial<Options>) => {
           data-savestate={opts.useSavedState}
           data-tree={jsonTree}
         >
-          <h1>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h1>
+          <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="14"

quartz/components/ExplorerNode.tsx

@@ -168,10 +168,8 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
   const isDefaultOpen = opts.folderDefaultState === "open"
 
   // Calculate current folderPath
-  let folderPath = ""
-  if (node.name !== "") {
-    folderPath = joinSegments(fullPath ?? "", node.name)
-  }
+  const folderPath = node.name !== "" ? joinSegments(fullPath ?? "", node.name) : ""
+  const href = resolveRelative(fileData.slug!, folderPath as SimpleSlug) + "/"
 
   return (
     <>
@@ -205,11 +203,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
               {/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
               <div key={node.name} data-folderpath={folderPath}>
                 {folderBehavior === "link" ? (
-                  <a
-                    href={resolveRelative(fileData.slug!, folderPath as SimpleSlug)}
-                    data-for={node.name}
-                    class="folder-title"
-                  >
+                  <a href={href} data-for={node.name} class="folder-title">
                     {node.displayName}
                   </a>
                 ) : (

quartz/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
 import { i18n } from "../i18n"
@@ -8,12 +8,11 @@ interface Options {
 }
 
 export default ((opts?: Options) => {
-  function Footer({ displayClass, cfg }: QuartzComponentProps) {
+  const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
     return (
       <footer class={`${displayClass ?? ""}`}>
-        <hr />
         <p>
           {i18n(cfg.locale).components.footer.createdWith}{" "}
           <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}

quartz/components/Graph.tsx

@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 // @ts-ignore
 import script from "./scripts/graph.inline"
 import style from "./styles/graph.scss"
@@ -17,6 +17,7 @@ export interface D3Config {
   opacityScale: number
   removeTags: string[]
   showTags: boolean
+  focusOnHover?: boolean
 }
 
 interface GraphOptions {
@@ -37,6 +38,7 @@ const defaultOptions: GraphOptions = {
     opacityScale: 1,
     showTags: true,
     removeTags: [],
+    focusOnHover: false,
   },
   globalGraph: {
     drag: true,
@@ -50,11 +52,12 @@ const defaultOptions: GraphOptions = {
     opacityScale: 1,
     showTags: true,
     removeTags: [],
+    focusOnHover: true,
   },
 }
 
 export default ((opts?: GraphOptions) => {
-  function Graph({ displayClass, cfg }: QuartzComponentProps) {
+  const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
     return (

quartz/components/Head.tsx

@@ -1,10 +1,11 @@
 import { i18n } from "../i18n"
-import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
+import { FullSlug, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { googleFontHref } from "../util/theme"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 export default (() => {
-  function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
+  const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
     const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
     const description =
       fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
@@ -21,6 +22,13 @@ export default (() => {
       <head>
         <title>{title}</title>
         <meta charSet="utf-8" />
+        {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
+          <>
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" />
+            <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
+          </>
+        )}
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
@@ -30,8 +38,6 @@ export default (() => {
         <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 />
         ))}

quartz/components/Header.tsx

@@ -1,6 +1,6 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-function Header({ children }: QuartzComponentProps) {
+const Header: QuartzComponent = ({ children }: QuartzComponentProps) => {
   return children.length > 0 ? <header>{children}</header> : null
 }
 

quartz/components/MobileOnly.tsx

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

quartz/components/PageList.tsx

@@ -1,12 +1,12 @@
 import { FullSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { Date, getDate } from "./Date"
-import { QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentProps } from "./types"
 import { GlobalConfiguration } from "../cfg"
 
-export function byDateAndAlphabetical(
-  cfg: GlobalConfiguration,
-): (f1: QuartzPluginData, f2: QuartzPluginData) => number {
+export type SortFn = (f1: QuartzPluginData, f2: QuartzPluginData) => number
+
+export function byDateAndAlphabetical(cfg: GlobalConfiguration): SortFn {
   return (f1, f2) => {
     if (f1.dates && f2.dates) {
       // sort descending
@@ -27,10 +27,12 @@ export function byDateAndAlphabetical(
 
 type Props = {
   limit?: number
+  sort?: SortFn
 } & QuartzComponentProps
 
-export function PageList({ cfg, fileData, allFiles, limit }: Props) {
-  let list = allFiles.sort(byDateAndAlphabetical(cfg))
+export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort }: Props) => {
+  const sorter = sort ?? byDateAndAlphabetical(cfg)
+  let list = allFiles.sort(sorter)
   if (limit) {
     list = list.slice(0, limit)
   }
@@ -63,7 +65,7 @@ export function PageList({ cfg, fileData, allFiles, limit }: Props) {
                       class="internal tag-link"
                       href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
                     >
-                      #{tag}
+                      {tag}
                     </a>
                   </li>
                 ))}

quartz/components/PageTitle.tsx

@@ -1,20 +1,21 @@
 import { pathToRoot } from "../util/path"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
 
-function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
+const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
   const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
   const baseDir = pathToRoot(fileData.slug!)
   return (
-    <h1 class={classNames(displayClass, "page-title")}>
+    <h2 class={classNames(displayClass, "page-title")}>
       <a href={baseDir}>{title}</a>
-    </h1>
+    </h2>
   )
 }
 
 PageTitle.css = `
 .page-title {
+  font-size: 1.75rem;
   margin: 0;
 }
 `

quartz/components/RecentNotes.tsx

@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { byDateAndAlphabetical } from "./PageList"
@@ -12,6 +12,7 @@ interface Options {
   title?: string
   limit: number
   linkToMore: SimpleSlug | false
+  showTags: boolean
   filter: (f: QuartzPluginData) => boolean
   sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number
 }
@@ -19,12 +20,18 @@ interface Options {
 const defaultOptions = (cfg: GlobalConfiguration): Options => ({
   limit: 3,
   linkToMore: false,
+  showTags: true,
   filter: () => true,
   sort: byDateAndAlphabetical(cfg),
 })
 
 export default ((userOpts?: Partial<Options>) => {
-  function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) {
+  const RecentNotes: QuartzComponent = ({
+    allFiles,
+    fileData,
+    displayClass,
+    cfg,
+  }: QuartzComponentProps) => {
     const opts = { ...defaultOptions(cfg), ...userOpts }
     const pages = allFiles.filter(opts.filter).sort(opts.sort)
     const remaining = Math.max(0, pages.length - opts.limit)
@@ -51,18 +58,20 @@ export default ((userOpts?: Partial<Options>) => {
                       <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                     </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>
+                  {opts.showTags && (
+                    <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>
             )

quartz/components/Search.tsx

@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
@@ -14,7 +14,7 @@ const defaultOptions: SearchOptions = {
 }
 
 export default ((userOpts?: Partial<SearchOptions>) => {
-  function Search({ displayClass, cfg }: QuartzComponentProps) {
+  const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const opts = { ...defaultOptions, ...userOpts }
     const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
     return (

quartz/components/TableOfContents.tsx

@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import legacyStyle from "./styles/legacyToc.scss"
 import modernStyle from "./styles/toc.scss"
 import { classNames } from "../util/lang"
@@ -15,7 +15,11 @@ const defaultOptions: Options = {
   layout: "modern",
 }
 
-function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps) {
+const TableOfContents: QuartzComponent = ({
+  fileData,
+  displayClass,
+  cfg,
+}: QuartzComponentProps) => {
   if (!fileData.toc) {
     return null
   }
@@ -56,7 +60,7 @@ function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps)
 TableOfContents.css = modernStyle
 TableOfContents.afterDOMLoaded = script
 
-function LegacyTableOfContents({ fileData, cfg }: QuartzComponentProps) {
+const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => {
   if (!fileData.toc) {
     return null
   }

quartz/components/TagList.tsx

@@ -1,20 +1,19 @@
 import { pathToRoot, slugTag } from "../util/path"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 
-function TagList({ fileData, displayClass }: QuartzComponentProps) {
+const TagList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
   const tags = fileData.frontmatter?.tags
   const baseDir = pathToRoot(fileData.slug!)
   if (tags && tags.length > 0) {
     return (
       <ul class={classNames(displayClass, "tags")}>
         {tags.map((tag) => {
-          const display = `#${tag}`
           const linkDest = baseDir + `/tags/${slugTag(tag)}`
           return (
             <li>
               <a href={linkDest} class="internal tag-link">
-                {display}
+                {tag}
               </a>
             </li>
           )

quartz/components/index.ts

@@ -19,6 +19,7 @@ import DesktopOnly from "./DesktopOnly"
 import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
+import Comments from "./Comments"
 
 export {
   ArticleTitle,
@@ -42,4 +43,5 @@ export {
   RecentNotes,
   NotFound,
   Breadcrumbs,
+  Comments,
 }

quartz/components/pages/404.tsx

@@ -1,11 +1,16 @@
 import { i18n } from "../../i18n"
-import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
+
+const NotFound: QuartzComponent = ({ cfg }: QuartzComponentProps) => {
+  // If baseUrl contains a pathname after the domain, use this as the home link
+  const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
+  const baseDir = url.pathname
 
-function NotFound({ cfg }: QuartzComponentProps) {
   return (
     <article class="popover-hint">
       <h1>404</h1>
       <p>{i18n(cfg.locale).pages.error.notFound}</p>
+      <a href={baseDir}>{i18n(cfg.locale).pages.error.home}</a>
     </article>
   )
 }

quartz/components/pages/Content.tsx

@@ -1,7 +1,7 @@
 import { htmlToJsx } from "../../util/jsx"
-import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
 
-function Content({ fileData, tree }: QuartzComponentProps) {
+const Content: QuartzComponent = ({ fileData, tree }: QuartzComponentProps) => {
   const content = htmlToJsx(fileData.filePath!, tree)
   const classes: string[] = fileData.frontmatter?.cssclasses ?? []
   const classString = ["popover-hint", ...classes].join(" ")

quartz/components/pages/FolderContent.tsx

@@ -1,9 +1,9 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
 import path from "path"
 
 import style from "../styles/listPage.scss"
-import { PageList } from "../PageList"
-import { _stripSlashes, simplifySlug } from "../../util/path"
+import { PageList, SortFn } from "../PageList"
+import { stripSlashes, simplifySlug } from "../../util/path"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
 import { i18n } from "../../i18n"
@@ -13,6 +13,7 @@ interface FolderContentOptions {
    * Whether to display number of folders
    */
   showFolderCount: boolean
+  sort?: SortFn
 }
 
 const defaultOptions: FolderContentOptions = {
@@ -22,11 +23,11 @@ const defaultOptions: FolderContentOptions = {
 export default ((opts?: Partial<FolderContentOptions>) => {
   const options: FolderContentOptions = { ...defaultOptions, ...opts }
 
-  function FolderContent(props: QuartzComponentProps) {
+  const FolderContent: QuartzComponent = (props: QuartzComponentProps) => {
     const { tree, fileData, allFiles, cfg } = props
-    const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
+    const folderSlug = stripSlashes(simplifySlug(fileData.slug!))
     const allPagesInFolder = allFiles.filter((file) => {
-      const fileSlug = _stripSlashes(simplifySlug(file.slug!))
+      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)
@@ -37,6 +38,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
     const classes = ["popover-hint", ...cssClasses].join(" ")
     const listProps = {
       ...props,
+      sort: options.sort,
       allFiles: allPagesInFolder,
     }
 
@@ -47,9 +49,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
 
     return (
       <div class={classes}>
-        <article>
-          <p>{content}</p>
-        </article>
+        <article>{content}</article>
         <div class="page-listing">
           {options.showFolderCount && (
             <p>

quartz/components/pages/TagContent.tsx

@@ -1,104 +1,127 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
 import style from "../styles/listPage.scss"
-import { PageList } from "../PageList"
+import { PageList, SortFn } from "../PageList"
 import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
 import { QuartzPluginData } from "../../plugins/vfile"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
 import { i18n } from "../../i18n"
 
-const numPages = 10
-function TagContent(props: QuartzComponentProps) {
-  const { tree, fileData, allFiles, cfg } = 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
-      : htmlToJsx(fileData.filePath!, tree)
-  const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
-  const classes = ["popover-hint", ...cssClasses].join(" ")
-  if (tag === "/") {
-    const tags = [
-      ...new Set(
-        allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
-      ),
-    ].sort((a, b) => a.localeCompare(b))
-    const tagItemMap: Map<string, QuartzPluginData[]> = new Map()
-    for (const tag of tags) {
-      tagItemMap.set(tag, allPagesWithTag(tag))
-    }
-    return (
-      <div class={classes}>
-        <article>
-          <p>{content}</p>
-        </article>
-        <p>{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}</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={`../tags/${tag}`}>
-                    #{tag}
-                  </a>
-                </h2>
-                {content && <p>{content}</p>}
-                <div class="page-listing">
-                  <p>
-                    {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
-                    {pages.length > numPages && (
-                      <span>
-                        {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })}
-                      </span>
-                    )}
-                  </p>
-                  <PageList limit={numPages} {...listProps} />
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    )
-  } else {
-    const pages = allPagesWithTag(tag)
-    const listProps = {
-      ...props,
-      allFiles: pages,
-    }
-
-    return (
-      <div class={classes}>
-        <article>{content}</article>
-        <div class="page-listing">
-          <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
-          <div>
-            <PageList {...listProps} />
-          </div>
-        </div>
-      </div>
-    )
-  }
+interface TagContentOptions {
+  sort?: SortFn
+  numPages: number
 }
 
-TagContent.css = style + PageList.css
-export default (() => TagContent) satisfies QuartzComponentConstructor
+const defaultOptions: TagContentOptions = {
+  numPages: 10,
+}
+
+export default ((opts?: Partial<TagContentOptions>) => {
+  const options: TagContentOptions = { ...defaultOptions, ...opts }
+
+  const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
+    const { tree, fileData, allFiles, cfg } = 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
+        : htmlToJsx(fileData.filePath!, tree)
+    const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
+    const classes = ["popover-hint", ...cssClasses].join(" ")
+    if (tag === "/") {
+      const tags = [
+        ...new Set(
+          allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
+        ),
+      ].sort((a, b) => a.localeCompare(b))
+      const tagItemMap: Map<string, QuartzPluginData[]> = new Map()
+      for (const tag of tags) {
+        tagItemMap.set(tag, allPagesWithTag(tag))
+      }
+      return (
+        <div class={classes}>
+          <article>
+            <p>{content}</p>
+          </article>
+          <p>{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}</p>
+          <div>
+            {tags.map((tag) => {
+              const pages = tagItemMap.get(tag)!
+              const listProps = {
+                ...props,
+                allFiles: pages,
+              }
+
+              const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`).at(0)
+
+              const root = contentPage?.htmlAst
+              const content =
+                !root || root?.children.length === 0
+                  ? contentPage?.description
+                  : htmlToJsx(contentPage.filePath!, root)
+
+              return (
+                <div>
+                  <h2>
+                    <a class="internal tag-link" href={`../tags/${tag}`}>
+                      {tag}
+                    </a>
+                  </h2>
+                  {content && <p>{content}</p>}
+                  <div class="page-listing">
+                    <p>
+                      {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
+                      {pages.length > options.numPages && (
+                        <>
+                          {" "}
+                          <span>
+                            {i18n(cfg.locale).pages.tagContent.showingFirst({
+                              count: options.numPages,
+                            })}
+                          </span>
+                        </>
+                      )}
+                    </p>
+                    <PageList limit={options.numPages} {...listProps} sort={opts?.sort} />
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )
+    } else {
+      const pages = allPagesWithTag(tag)
+      const listProps = {
+        ...props,
+        allFiles: pages,
+      }
+
+      return (
+        <div class={classes}>
+          <article>{content}</article>
+          <div class="page-listing">
+            <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
+            <div>
+              <PageList {...listProps} />
+            </div>
+          </div>
+        </div>
+      )
+    }
+  }
+
+  TagContent.css = style + PageList.css
+  return TagContent
+}) satisfies QuartzComponentConstructor

quartz/components/renderPage.tsx

@@ -3,10 +3,9 @@ import { QuartzComponent, QuartzComponentProps } from "./types"
 import HeaderConstructor from "./Header"
 import BodyConstructor from "./Body"
 import { JSResourceToScriptElement, StaticResources } from "../util/resources"
-import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
+import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
 import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
-import { QuartzPluginData } from "../plugins/vfile"
 import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"
 
@@ -15,11 +14,13 @@ interface RenderComponents {
   header: QuartzComponent[]
   beforeBody: QuartzComponent[]
   pageBody: QuartzComponent
+  afterBody: QuartzComponent[]
   left: QuartzComponent[]
   right: QuartzComponent[]
   footer: QuartzComponent
 }
 
+const headerRegex = new RegExp(/h[1-6]/)
 export function pageResources(
   baseDir: FullSlug | RelativeURL,
   staticResources: StaticResources,
@@ -52,18 +53,6 @@ export function pageResources(
   }
 }
 
-let pageIndex: Map<FullSlug, QuartzPluginData> | undefined = undefined
-function getOrComputeFileIndex(allFiles: QuartzPluginData[]): Map<FullSlug, QuartzPluginData> {
-  if (!pageIndex) {
-    pageIndex = new Map()
-    for (const file of allFiles) {
-      pageIndex.set(file.slug!, file)
-    }
-  }
-
-  return pageIndex
-}
-
 export function renderPage(
   cfg: GlobalConfiguration,
   slug: FullSlug,
@@ -71,14 +60,18 @@ export function renderPage(
   components: RenderComponents,
   pageResources: StaticResources,
 ): string {
+  // make a deep copy of the tree so we don't remove the transclusion references
+  // for the file cached in contentMap in build.ts
+  const root = clone(componentData.tree) as Root
+
   // process transcludes in componentData
-  visit(componentData.tree as Root, "element", (node, _index, _parent) => {
+  visit(root, "element", (node, _index, _parent) => {
     if (node.tagName === "blockquote") {
       const classNames = (node.properties?.className ?? []) as string[]
       if (classNames.includes("transclude")) {
         const inner = node.children[0] as Element
         const transcludeTarget = inner.properties["data-slug"] as FullSlug
-        const page = getOrComputeFileIndex(componentData.allFiles).get(transcludeTarget)
+        const page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
         if (!page) {
           return
         }
@@ -103,8 +96,10 @@ export function renderPage(
               {
                 type: "element",
                 tagName: "a",
-                properties: { href: inner.properties?.href, class: ["internal"] },
-                children: [{ type: "text", value: `Link to original` }],
+                properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
+                children: [
+                  { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+                ],
               },
             ]
           }
@@ -112,18 +107,24 @@ export function renderPage(
           // header transclude
           blockRef = blockRef.slice(1)
           let startIdx = undefined
+          let startDepth = undefined
           let endIdx = undefined
           for (const [i, el] of page.htmlAst.children.entries()) {
-            if (el.type === "element" && el.tagName.match(/h[1-6]/)) {
-              if (endIdx) {
-                break
-              }
+            // skip non-headers
+            if (!(el.type === "element" && el.tagName.match(headerRegex))) continue
+            const depth = Number(el.tagName.substring(1))
 
-              if (startIdx !== undefined) {
-                endIdx = i
-              } else if (el.properties?.id === blockRef) {
+            // lookin for our blockref
+            if (startIdx === undefined || startDepth === undefined) {
+              // skip until we find the blockref that matches
+              if (el.properties?.id === blockRef) {
                 startIdx = i
+                startDepth = depth
               }
+            } else if (depth <= startDepth) {
+              // looking for new header that is same level or higher
+              endIdx = i
+              break
             }
           }
 
@@ -138,7 +139,7 @@ export function renderPage(
             {
               type: "element",
               tagName: "a",
-              properties: { href: inner.properties?.href, class: ["internal"] },
+              properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
               children: [
                 { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
               ],
@@ -168,7 +169,7 @@ export function renderPage(
             {
               type: "element",
               tagName: "a",
-              properties: { href: inner.properties?.href, class: ["internal"] },
+              properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
               children: [
                 { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
               ],
@@ -179,11 +180,15 @@ export function renderPage(
     }
   })
 
+  // set componentData.tree to the edited html that has transclusions rendered
+  componentData.tree = root
+
   const {
     head: Head,
     header,
     beforeBody,
     pageBody: Content,
+    afterBody,
     left,
     right,
     footer: Footer,
@@ -207,8 +212,9 @@ export function renderPage(
     </div>
   )
 
+  const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
   const doc = (
-    <html>
+    <html lang={lang}>
       <Head {...componentData} />
       <body data-slug={slug}>
         <div id="quartz-root" class="page">
@@ -228,6 +234,12 @@ export function renderPage(
                 </div>
               </div>
               <Content {...componentData} />
+              <hr />
+              <div class="page-footer">
+                {afterBody.map((BodyComponent) => (
+                  <BodyComponent {...componentData} />
+                ))}
+              </div>
             </div>
             {RightComponent}
           </Body>

quartz/components/scripts/checkbox.inline.ts

@@ -0,0 +1,23 @@
+import { getFullSlug } from "../../util/path"
+
+const checkboxId = (index: number) => `${getFullSlug(window)}-checkbox-${index}`
+
+document.addEventListener("nav", () => {
+  const checkboxes = document.querySelectorAll(
+    "input.checkbox-toggle",
+  ) as NodeListOf<HTMLInputElement>
+  checkboxes.forEach((el, index) => {
+    const elId = checkboxId(index)
+
+    const switchState = (e: Event) => {
+      const newCheckboxState = (e.target as HTMLInputElement)?.checked ? "true" : "false"
+      localStorage.setItem(elId, newCheckboxState)
+    }
+
+    el.addEventListener("change", switchState)
+    window.addCleanup(() => el.removeEventListener("change", switchState))
+    if (localStorage.getItem(elId) === "true") {
+      el.checked = true
+    }
+  })
+})

quartz/components/scripts/comments.inline.ts

@@ -0,0 +1,67 @@
+const changeTheme = (e: CustomEventMap["themechange"]) => {
+  const theme = e.detail.theme
+  const iframe = document.querySelector("iframe.giscus-frame") as HTMLIFrameElement
+  if (!iframe) {
+    return
+  }
+
+  if (!iframe.contentWindow) {
+    return
+  }
+
+  iframe.contentWindow.postMessage(
+    {
+      giscus: {
+        setConfig: {
+          theme: theme,
+        },
+      },
+    },
+    "https://giscus.app",
+  )
+}
+
+type GiscusElement = Omit<HTMLElement, "dataset"> & {
+  dataset: DOMStringMap & {
+    repo: `${string}/${string}`
+    repoId: string
+    category: string
+    categoryId: string
+    mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
+    strict: string
+    reactionsEnabled: string
+    inputPosition: "top" | "bottom"
+  }
+}
+
+document.addEventListener("nav", () => {
+  const giscusContainer = document.querySelector(".giscus") as GiscusElement
+  if (!giscusContainer) {
+    return
+  }
+
+  const giscusScript = document.createElement("script")
+  giscusScript.src = "https://giscus.app/client.js"
+  giscusScript.async = true
+  giscusScript.crossOrigin = "anonymous"
+  giscusScript.setAttribute("data-loading", "lazy")
+  giscusScript.setAttribute("data-emit-metadata", "0")
+  giscusScript.setAttribute("data-repo", giscusContainer.dataset.repo)
+  giscusScript.setAttribute("data-repo-id", giscusContainer.dataset.repoId)
+  giscusScript.setAttribute("data-category", giscusContainer.dataset.category)
+  giscusScript.setAttribute("data-category-id", giscusContainer.dataset.categoryId)
+  giscusScript.setAttribute("data-mapping", giscusContainer.dataset.mapping)
+  giscusScript.setAttribute("data-strict", giscusContainer.dataset.strict)
+  giscusScript.setAttribute("data-reactions-enabled", giscusContainer.dataset.reactionsEnabled)
+  giscusScript.setAttribute("data-input-position", giscusContainer.dataset.inputPosition)
+
+  const theme = document.documentElement.getAttribute("saved-theme")
+  if (theme) {
+    giscusScript.setAttribute("data-theme", theme)
+  }
+
+  giscusContainer.appendChild(giscusScript)
+
+  document.addEventListener("themechange", changeTheme)
+  window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
+})

quartz/components/scripts/graph.inline.ts

@@ -1,4 +1,4 @@
-import type { ContentDetails, ContentIndex } from "../../plugins/emitters/contentIndex"
+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"
@@ -44,6 +44,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     opacityScale,
     removeTags,
     showTags,
+    focusOnHover,
   } = JSON.parse(graph.dataset["cfg"]!)
 
   const data: Map<SimpleSlug, ContentDetails> = new Map(
@@ -101,7 +102,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
 
   const graphData: { nodes: NodeData[]; links: LinkData[] } = {
     nodes: [...neighbourhood].map((url) => {
-      const text = url.startsWith("tags/") ? "#" + url.substring(5) : data.get(url)?.title ?? url
+      const text = url.startsWith("tags/") ? "#" + url.substring(5) : (data.get(url)?.title ?? url)
       return {
         id: url,
         text: text,
@@ -189,6 +190,8 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     return 2 + Math.sqrt(numLinks)
   }
 
+  let connectedNodes: SimpleSlug[] = []
+
   // draw individual nodes
   const node = graphNode
     .append("circle")
@@ -202,17 +205,37 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
       window.spaNavigate(new URL(targ, window.location.toString()))
     })
     .on("mouseover", function (_, d) {
-      const neighbours: SimpleSlug[] = data.get(slug)?.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)
+      if (focusOnHover) {
+        // fade out non-neighbour nodes
+        connectedNodes = linkNodes.data().flatMap((d: any) => [d.source.id, d.target.id])
+
+        d3.selectAll<HTMLElement, NodeData>(".link")
+          .transition()
+          .duration(200)
+          .style("opacity", 0.2)
+        d3.selectAll<HTMLElement, NodeData>(".node")
+          .filter((d) => !connectedNodes.includes(d.id))
+          .transition()
+          .duration(200)
+          .style("opacity", 0.2)
+
+        d3.selectAll<HTMLElement, NodeData>(".node")
+          .filter((d) => !connectedNodes.includes(d.id))
+          .nodes()
+          .map((it) => d3.select(it.parentNode as HTMLElement).select("text"))
+          .forEach((it) => {
+            let opacity = parseFloat(it.style("opacity"))
+            it.transition()
+              .duration(200)
+              .attr("opacityOld", opacity)
+              .style("opacity", Math.min(opacity, 0.2))
+          })
+      }
 
       // highlight links
       linkNodes.transition().duration(200).attr("stroke", "var(--gray)").attr("stroke-width", 1)
@@ -231,6 +254,16 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
         .style("font-size", bigFont + "em")
     })
     .on("mouseleave", function (_, d) {
+      if (focusOnHover) {
+        d3.selectAll<HTMLElement, NodeData>(".link").transition().duration(200).style("opacity", 1)
+        d3.selectAll<HTMLElement, NodeData>(".node").transition().duration(200).style("opacity", 1)
+
+        d3.selectAll<HTMLElement, NodeData>(".node")
+          .filter((d) => !connectedNodes.includes(d.id))
+          .nodes()
+          .map((it) => d3.select(it.parentNode as HTMLElement).select("text"))
+          .forEach((it) => it.transition().duration(200).style("opacity", it.attr("opacityOld")))
+      }
       const currentId = d.id
       const linkNodes = d3
         .selectAll(".link")
@@ -249,6 +282,13 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     // @ts-ignore
     .call(drag(simulation))
 
+  // make tags hollow circles
+  node
+    .filter((d) => d.id.startsWith("tags/"))
+    .attr("stroke", color)
+    .attr("stroke-width", 2)
+    .attr("fill", "var(--light)")
+
   // draw labels
   const labels = graphNode
     .append("text")
@@ -321,7 +361,7 @@ function renderGlobalGraph() {
 
 document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   const slug = e.detail.url
-  addToVisited(slug)
+  addToVisited(simplifySlug(slug))
   await renderGraph("graph-container", slug)
 
   const containerIcon = document.getElementById("global-graph-icon")

quartz/components/scripts/popover.inline.ts

@@ -3,7 +3,7 @@ import { normalizeRelativeURLs } from "../../util/path"
 
 const p = new DOMParser()
 async function mouseEnterHandler(
-  this: HTMLLinkElement,
+  this: HTMLAnchorElement,
   { clientX, clientY }: { clientX: number; clientY: number },
 ) {
   const link = this
@@ -33,33 +33,59 @@ async function mouseEnterHandler(
   thisUrl.hash = ""
   thisUrl.search = ""
   const targetUrl = new URL(link.href)
-  const hash = targetUrl.hash
+  const hash = decodeURIComponent(targetUrl.hash)
   targetUrl.hash = ""
   targetUrl.search = ""
 
-  const contents = await fetch(`${targetUrl}`)
-    .then((res) => res.text())
-    .catch((err) => {
-      console.error(err)
-    })
+  const response = await fetch(`${targetUrl}`).catch((err) => {
+    console.error(err)
+  })
 
   // bailout if another popover exists
   if (hasAlreadyBeenFetched()) {
     return
   }
 
-  if (!contents) return
-  const html = p.parseFromString(contents, "text/html")
-  normalizeRelativeURLs(html, targetUrl)
-  const elts = [...html.getElementsByClassName("popover-hint")]
-  if (elts.length === 0) return
+  if (!response) return
+  const [contentType] = response.headers.get("Content-Type")!.split(";")
+  const [contentTypeCategory, typeInfo] = contentType.split("/")
 
   const popoverElement = document.createElement("div")
   popoverElement.classList.add("popover")
   const popoverInner = document.createElement("div")
   popoverInner.classList.add("popover-inner")
   popoverElement.appendChild(popoverInner)
-  elts.forEach((elt) => popoverInner.appendChild(elt))
+
+  popoverInner.dataset.contentType = contentType ?? undefined
+
+  switch (contentTypeCategory) {
+    case "image":
+      const img = document.createElement("img")
+      img.src = targetUrl.toString()
+      img.alt = targetUrl.pathname
+
+      popoverInner.appendChild(img)
+      break
+    case "application":
+      switch (typeInfo) {
+        case "pdf":
+          const pdf = document.createElement("iframe")
+          pdf.src = targetUrl.toString()
+          popoverInner.appendChild(pdf)
+          break
+        default:
+          break
+      }
+      break
+    default:
+      const contents = await response.text()
+      const html = p.parseFromString(contents, "text/html")
+      normalizeRelativeURLs(html, targetUrl)
+      const elts = [...html.getElementsByClassName("popover-hint")]
+      if (elts.length === 0) return
+
+      elts.forEach((elt) => popoverInner.appendChild(elt))
+  }
 
   setPosition(popoverElement)
   link.appendChild(popoverElement)
@@ -74,7 +100,7 @@ async function mouseEnterHandler(
 }
 
 document.addEventListener("nav", () => {
-  const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
+  const links = [...document.getElementsByClassName("internal")] as HTMLAnchorElement[]
   for (const link of links) {
     link.addEventListener("mouseenter", mouseEnterHandler)
     window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler))

quartz/components/scripts/search.inline.ts

@@ -21,6 +21,7 @@ let index = new FlexSearch.Document<Item>({
   encode: encoder,
   document: {
     id: "id",
+    tag: "tags",
     index: [
       {
         field: "title",
@@ -405,11 +406,33 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
     let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
     if (searchType === "tags") {
-      searchResults = await index.searchAsync({
-        query: currentSearchTerm.substring(1),
-        limit: numSearchResults,
-        index: ["tags"],
-      })
+      currentSearchTerm = currentSearchTerm.substring(1).trim()
+      const separatorIndex = currentSearchTerm.indexOf(" ")
+      if (separatorIndex != -1) {
+        // search by title and content index and then filter by tag (implemented in flexsearch)
+        const tag = currentSearchTerm.substring(0, separatorIndex)
+        const query = currentSearchTerm.substring(separatorIndex + 1).trim()
+        searchResults = await index.searchAsync({
+          query: query,
+          // return at least 10000 documents, so it is enough to filter them by tag (implemented in flexsearch)
+          limit: Math.max(numSearchResults, 10000),
+          index: ["title", "content"],
+          tag: tag,
+        })
+        for (let searchResult of searchResults) {
+          searchResult.result = searchResult.result.slice(0, numSearchResults)
+        }
+        // set search type to basic and remove tag from term for proper highlightning and scroll
+        searchType = "basic"
+        currentSearchTerm = query
+      } else {
+        // default search by tags index
+        searchResults = await index.searchAsync({
+          query: currentSearchTerm,
+          limit: numSearchResults,
+          index: ["tags"],
+        })
+      }
     } else if (searchType === "basic") {
       searchResults = await index.searchAsync({
         query: currentSearchTerm,

quartz/components/styles/contentMeta.scss

@@ -0,0 +1,14 @@
+.content-meta {
+  margin-top: 0;
+  color: var(--gray);
+
+  &[show-comma="true"] {
+    > span:not(:last-child) {
+      margin-right: 8px;
+
+      &::after {
+        content: ",";
+      }
+    }
+  }
+}

quartz/components/styles/explorer.scss

@@ -11,7 +11,7 @@ button#explorer {
   display: flex;
   align-items: center;
 
-  & h1 {
+  & h2 {
     font-size: 1rem;
     display: inline-block;
     margin: 0;
@@ -87,7 +87,7 @@ svg {
     color: var(--secondary);
     font-family: var(--headerFont);
     font-size: 0.95rem;
-    font-weight: $boldWeight;
+    font-weight: $semiBoldWeight;
     line-height: 1.5rem;
     display: inline-block;
   }
@@ -112,7 +112,7 @@ svg {
       font-size: 0.95rem;
       display: inline-block;
       color: var(--secondary);
-      font-weight: $boldWeight;
+      font-weight: $semiBoldWeight;
       margin: 0;
       line-height: 1.5rem;
       pointer-events: none;

quartz/components/styles/listPage.scss

@@ -11,7 +11,7 @@ li.section-li {
 
   & > .section {
     display: grid;
-    grid-template-columns: 6em 3fr 1fr;
+    grid-template-columns: fit-content(8em) 3fr 1fr;
 
     @media all and (max-width: $mobileBreakpoint) {
       & > .tags {
@@ -24,8 +24,7 @@ li.section-li {
     }
 
     & > .meta {
-      margin: 0;
-      flex-basis: 6em;
+      margin: 0 1em 0 0;
       opacity: 0.6;
     }
   }
@@ -33,7 +32,8 @@ li.section-li {
 
 // modifications in popover context
 .popover .section {
-  grid-template-columns: 6em 1fr !important;
+  grid-template-columns: fit-content(8em) 1fr !important;
+
   & > .tags {
     display: none;
   }

quartz/components/styles/popover.scss

@@ -38,6 +38,28 @@
     white-space: normal;
   }
 
+  & > .popover-inner[data-content-type] {
+    &[data-content-type*="pdf"],
+    &[data-content-type*="image"] {
+      padding: 0;
+      max-height: 100%;
+    }
+
+    &[data-content-type*="image"] {
+      img {
+        margin: 0;
+        border-radius: 0;
+        display: block;
+      }
+    }
+
+    &[data-content-type*="pdf"] {
+      iframe {
+        width: 100%;
+      }
+    }
+  }
+
   h1 {
     font-size: 1.5rem;
   }

quartz/components/styles/search.scss

@@ -59,6 +59,10 @@
       margin-left: auto;
       margin-right: auto;
 
+      @media all and (max-width: $fullPageWidth) {
+        width: 90%;
+      }
+
       & > * {
         width: 100%;
         border-radius: 7px;
@@ -155,6 +159,10 @@
             margin: 0 auto;
             width: min($pageWidth, 100%);
           }
+
+          a[role="anchor"] {
+            background-color: transparent;
+          }
         }
 
         & > #results-container {

quartz/components/types.ts

@@ -3,8 +3,10 @@ import { StaticResources } from "../util/resources"
 import { QuartzPluginData } from "../plugins/vfile"
 import { GlobalConfiguration } from "../cfg"
 import { Node } from "hast"
+import { BuildCtx } from "../util/ctx"
 
 export type QuartzComponentProps = {
+  ctx: BuildCtx
   externalResources: StaticResources
   fileData: QuartzPluginData
   cfg: GlobalConfiguration

quartz/depgraph.test.ts

@@ -0,0 +1,118 @@
+import test, { describe } from "node:test"
+import DepGraph from "./depgraph"
+import assert from "node:assert"
+
+describe("DepGraph", () => {
+  test("getLeafNodes", () => {
+    const graph = new DepGraph<string>()
+    graph.addEdge("A", "B")
+    graph.addEdge("B", "C")
+    graph.addEdge("D", "C")
+    assert.deepStrictEqual(graph.getLeafNodes("A"), new Set(["C"]))
+    assert.deepStrictEqual(graph.getLeafNodes("B"), new Set(["C"]))
+    assert.deepStrictEqual(graph.getLeafNodes("C"), new Set(["C"]))
+    assert.deepStrictEqual(graph.getLeafNodes("D"), new Set(["C"]))
+  })
+
+  describe("getLeafNodeAncestors", () => {
+    test("gets correct ancestors in a graph without cycles", () => {
+      const graph = new DepGraph<string>()
+      graph.addEdge("A", "B")
+      graph.addEdge("B", "C")
+      graph.addEdge("D", "B")
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("A"), new Set(["A", "B", "D"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("B"), new Set(["A", "B", "D"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("C"), new Set(["A", "B", "D"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("D"), new Set(["A", "B", "D"]))
+    })
+
+    test("gets correct ancestors in a graph with cycles", () => {
+      const graph = new DepGraph<string>()
+      graph.addEdge("A", "B")
+      graph.addEdge("B", "C")
+      graph.addEdge("C", "A")
+      graph.addEdge("C", "D")
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("A"), new Set(["A", "B", "C"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("B"), new Set(["A", "B", "C"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("C"), new Set(["A", "B", "C"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("D"), new Set(["A", "B", "C"]))
+    })
+  })
+
+  describe("mergeGraph", () => {
+    test("merges two graphs", () => {
+      const graph = new DepGraph<string>()
+      graph.addEdge("A.md", "A.html")
+
+      const other = new DepGraph<string>()
+      other.addEdge("B.md", "B.html")
+
+      graph.mergeGraph(other)
+
+      const expected = {
+        nodes: ["A.md", "A.html", "B.md", "B.html"],
+        edges: [
+          ["A.md", "A.html"],
+          ["B.md", "B.html"],
+        ],
+      }
+
+      assert.deepStrictEqual(graph.export(), expected)
+    })
+  })
+
+  describe("updateIncomingEdgesForNode", () => {
+    test("merges when node exists", () => {
+      // A.md -> B.md -> B.html
+      const graph = new DepGraph<string>()
+      graph.addEdge("A.md", "B.md")
+      graph.addEdge("B.md", "B.html")
+
+      // B.md is edited so it removes the A.md transclusion
+      // and adds C.md transclusion
+      // C.md -> B.md
+      const other = new DepGraph<string>()
+      other.addEdge("C.md", "B.md")
+      other.addEdge("B.md", "B.html")
+
+      // A.md -> B.md removed, C.md -> B.md added
+      // C.md -> B.md -> B.html
+      graph.updateIncomingEdgesForNode(other, "B.md")
+
+      const expected = {
+        nodes: ["A.md", "B.md", "B.html", "C.md"],
+        edges: [
+          ["B.md", "B.html"],
+          ["C.md", "B.md"],
+        ],
+      }
+
+      assert.deepStrictEqual(graph.export(), expected)
+    })
+
+    test("adds node if it does not exist", () => {
+      // A.md -> B.md
+      const graph = new DepGraph<string>()
+      graph.addEdge("A.md", "B.md")
+
+      // Add a new file C.md that transcludes B.md
+      // B.md -> C.md
+      const other = new DepGraph<string>()
+      other.addEdge("B.md", "C.md")
+
+      // B.md -> C.md added
+      // A.md -> B.md -> C.md
+      graph.updateIncomingEdgesForNode(other, "C.md")
+
+      const expected = {
+        nodes: ["A.md", "B.md", "C.md"],
+        edges: [
+          ["A.md", "B.md"],
+          ["B.md", "C.md"],
+        ],
+      }
+
+      assert.deepStrictEqual(graph.export(), expected)
+    })
+  })
+})

quartz/depgraph.ts

@@ -0,0 +1,228 @@
+export default class DepGraph<T> {
+  // node: incoming and outgoing edges
+  _graph = new Map<T, { incoming: Set<T>; outgoing: Set<T> }>()
+
+  constructor() {
+    this._graph = new Map()
+  }
+
+  export(): Object {
+    return {
+      nodes: this.nodes,
+      edges: this.edges,
+    }
+  }
+
+  toString(): string {
+    return JSON.stringify(this.export(), null, 2)
+  }
+
+  // BASIC GRAPH OPERATIONS
+
+  get nodes(): T[] {
+    return Array.from(this._graph.keys())
+  }
+
+  get edges(): [T, T][] {
+    let edges: [T, T][] = []
+    this.forEachEdge((edge) => edges.push(edge))
+    return edges
+  }
+
+  hasNode(node: T): boolean {
+    return this._graph.has(node)
+  }
+
+  addNode(node: T): void {
+    if (!this._graph.has(node)) {
+      this._graph.set(node, { incoming: new Set(), outgoing: new Set() })
+    }
+  }
+
+  // Remove node and all edges connected to it
+  removeNode(node: T): void {
+    if (this._graph.has(node)) {
+      // first remove all edges so other nodes don't have references to this node
+      for (const target of this._graph.get(node)!.outgoing) {
+        this.removeEdge(node, target)
+      }
+      for (const source of this._graph.get(node)!.incoming) {
+        this.removeEdge(source, node)
+      }
+      this._graph.delete(node)
+    }
+  }
+
+  forEachNode(callback: (node: T) => void): void {
+    for (const node of this._graph.keys()) {
+      callback(node)
+    }
+  }
+
+  hasEdge(from: T, to: T): boolean {
+    return Boolean(this._graph.get(from)?.outgoing.has(to))
+  }
+
+  addEdge(from: T, to: T): void {
+    this.addNode(from)
+    this.addNode(to)
+
+    this._graph.get(from)!.outgoing.add(to)
+    this._graph.get(to)!.incoming.add(from)
+  }
+
+  removeEdge(from: T, to: T): void {
+    if (this._graph.has(from) && this._graph.has(to)) {
+      this._graph.get(from)!.outgoing.delete(to)
+      this._graph.get(to)!.incoming.delete(from)
+    }
+  }
+
+  // returns -1 if node does not exist
+  outDegree(node: T): number {
+    return this.hasNode(node) ? this._graph.get(node)!.outgoing.size : -1
+  }
+
+  // returns -1 if node does not exist
+  inDegree(node: T): number {
+    return this.hasNode(node) ? this._graph.get(node)!.incoming.size : -1
+  }
+
+  forEachOutNeighbor(node: T, callback: (neighbor: T) => void): void {
+    this._graph.get(node)?.outgoing.forEach(callback)
+  }
+
+  forEachInNeighbor(node: T, callback: (neighbor: T) => void): void {
+    this._graph.get(node)?.incoming.forEach(callback)
+  }
+
+  forEachEdge(callback: (edge: [T, T]) => void): void {
+    for (const [source, { outgoing }] of this._graph.entries()) {
+      for (const target of outgoing) {
+        callback([source, target])
+      }
+    }
+  }
+
+  // DEPENDENCY ALGORITHMS
+
+  // Add all nodes and edges from other graph to this graph
+  mergeGraph(other: DepGraph<T>): void {
+    other.forEachEdge(([source, target]) => {
+      this.addNode(source)
+      this.addNode(target)
+      this.addEdge(source, target)
+    })
+  }
+
+  // For the node provided:
+  // If node does not exist, add it
+  // If an incoming edge was added in other, it is added in this graph
+  // If an incoming edge was deleted in other, it is deleted in this graph
+  updateIncomingEdgesForNode(other: DepGraph<T>, node: T): void {
+    this.addNode(node)
+
+    // Add edge if it is present in other
+    other.forEachInNeighbor(node, (neighbor) => {
+      this.addEdge(neighbor, node)
+    })
+
+    // For node provided, remove incoming edge if it is absent in other
+    this.forEachEdge(([source, target]) => {
+      if (target === node && !other.hasEdge(source, target)) {
+        this.removeEdge(source, target)
+      }
+    })
+  }
+
+  // Remove all nodes that do not have any incoming or outgoing edges
+  // A node may be orphaned if the only node pointing to it was removed
+  removeOrphanNodes(): Set<T> {
+    let orphanNodes = new Set<T>()
+
+    this.forEachNode((node) => {
+      if (this.inDegree(node) === 0 && this.outDegree(node) === 0) {
+        orphanNodes.add(node)
+      }
+    })
+
+    orphanNodes.forEach((node) => {
+      this.removeNode(node)
+    })
+
+    return orphanNodes
+  }
+
+  // Get all leaf nodes (i.e. destination paths) reachable from the node provided
+  // Eg. if the graph is A -> B -> C
+  //                     D ---^
+  // and the node is B, this function returns [C]
+  getLeafNodes(node: T): Set<T> {
+    let stack: T[] = [node]
+    let visited = new Set<T>()
+    let leafNodes = new Set<T>()
+
+    // DFS
+    while (stack.length > 0) {
+      let node = stack.pop()!
+
+      // If the node is already visited, skip it
+      if (visited.has(node)) {
+        continue
+      }
+      visited.add(node)
+
+      // Check if the node is a leaf node (i.e. destination path)
+      if (this.outDegree(node) === 0) {
+        leafNodes.add(node)
+      }
+
+      // Add all unvisited neighbors to the stack
+      this.forEachOutNeighbor(node, (neighbor) => {
+        if (!visited.has(neighbor)) {
+          stack.push(neighbor)
+        }
+      })
+    }
+
+    return leafNodes
+  }
+
+  // Get all ancestors of the leaf nodes reachable from the node provided
+  // Eg. if the graph is A -> B -> C
+  //                     D ---^
+  // and the node is B, this function returns [A, B, D]
+  getLeafNodeAncestors(node: T): Set<T> {
+    const leafNodes = this.getLeafNodes(node)
+    let visited = new Set<T>()
+    let upstreamNodes = new Set<T>()
+
+    // Backwards DFS for each leaf node
+    leafNodes.forEach((leafNode) => {
+      let stack: T[] = [leafNode]
+
+      while (stack.length > 0) {
+        let node = stack.pop()!
+
+        if (visited.has(node)) {
+          continue
+        }
+        visited.add(node)
+        // Add node if it's not a leaf node (i.e. destination path)
+        // Assumes destination file cannot depend on another destination file
+        if (this.outDegree(node) !== 0) {
+          upstreamNodes.add(node)
+        }
+
+        // Add all unvisited parents to the stack
+        this.forEachInNeighbor(node, (parentNode) => {
+          if (!visited.has(parentNode)) {
+            stack.push(parentNode)
+          }
+        })
+      }
+    })
+
+    return upstreamNodes
+  }
+}

quartz/i18n/index.ts

@@ -1,13 +1,70 @@
-import { Translation } from "./locales/definition"
-import en from "./locales/en-US"
+import { Translation, CalloutTranslation } from "./locales/definition"
+import enUs from "./locales/en-US"
+import enGb from "./locales/en-GB"
 import fr from "./locales/fr-FR"
+import it from "./locales/it-IT"
 import ja from "./locales/ja-JP"
+import de from "./locales/de-DE"
+import nl from "./locales/nl-NL"
+import ro from "./locales/ro-RO"
+import ca from "./locales/ca-ES"
+import es from "./locales/es-ES"
+import ar from "./locales/ar-SA"
+import uk from "./locales/uk-UA"
+import ru from "./locales/ru-RU"
+import ko from "./locales/ko-KR"
+import zh from "./locales/zh-CN"
+import vi from "./locales/vi-VN"
+import pt from "./locales/pt-BR"
+import hu from "./locales/hu-HU"
+import fa from "./locales/fa-IR"
+import pl from "./locales/pl-PL"
 
 export const TRANSLATIONS = {
-  "en-US": en,
+  "en-US": enUs,
+  "en-GB": enGb,
   "fr-FR": fr,
+  "it-IT": it,
   "ja-JP": ja,
+  "de-DE": de,
+  "nl-NL": nl,
+  "nl-BE": nl,
+  "ro-RO": ro,
+  "ro-MD": ro,
+  "ca-ES": ca,
+  "es-ES": es,
+  "ar-SA": ar,
+  "ar-AE": ar,
+  "ar-QA": ar,
+  "ar-BH": ar,
+  "ar-KW": ar,
+  "ar-OM": ar,
+  "ar-YE": ar,
+  "ar-IR": ar,
+  "ar-SY": ar,
+  "ar-IQ": ar,
+  "ar-JO": ar,
+  "ar-PL": ar,
+  "ar-LB": ar,
+  "ar-EG": ar,
+  "ar-SD": ar,
+  "ar-LY": ar,
+  "ar-MA": ar,
+  "ar-TN": ar,
+  "ar-DZ": ar,
+  "ar-MR": ar,
+  "uk-UA": uk,
+  "ru-RU": ru,
+  "ko-KR": ko,
+  "zh-CN": zh,
+  "vi-VN": vi,
+  "pt-BR": pt,
+  "hu-HU": hu,
+  "fa-IR": fa,
+  "pl-PL": pl,
 } as const
 
-export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale]
+export const defaultTranslation = "en-US"
+export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale ?? defaultTranslation]
 export type ValidLocale = keyof typeof TRANSLATIONS
+export type ValidCallout = keyof CalloutTranslation

quartz/i18n/locales/ar-SA.ts

@@ -0,0 +1,89 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "غير معنون",
+    description: "لم يتم تقديم أي وصف",
+  },
+  components: {
+    callout: {
+      note: "ملاحظة",
+      abstract: "ملخص",
+      info: "معلومات",
+      todo: "للقيام",
+      tip: "نصيحة",
+      success: "نجاح",
+      question: "سؤال",
+      warning: "تحذير",
+      failure: "فشل",
+      danger: "خطر",
+      bug: "خلل",
+      example: "مثال",
+      quote: "اقتباس",
+    },
+    backlinks: {
+      title: "وصلات العودة",
+      noBacklinksFound: "لا يوجد وصلات عودة",
+    },
+    themeToggle: {
+      lightMode: "الوضع النهاري",
+      darkMode: "الوضع الليلي",
+    },
+    explorer: {
+      title: "المستعرض",
+    },
+    footer: {
+      createdWith: "أُنشئ باستخدام",
+    },
+    graph: {
+      title: "التمثيل التفاعلي",
+    },
+    recentNotes: {
+      title: "آخر الملاحظات",
+      seeRemainingMore: ({ remaining }) => `تصفح ${remaining} أكثر →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `مقتبس من ${targetSlug}`,
+      linkToOriginal: "وصلة للملاحظة الرئيسة",
+    },
+    search: {
+      title: "بحث",
+      searchBarPlaceholder: "ابحث عن شيء ما",
+    },
+    tableOfContents: {
+      title: "فهرس المحتويات",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) =>
+        minutes == 1
+          ? `دقيقة أو أقل للقراءة`
+          : minutes == 2
+            ? `دقيقتان للقراءة`
+            : `${minutes} دقائق للقراءة`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "آخر الملاحظات",
+      lastFewNotes: ({ count }) => `آخر ${count} ملاحظة`,
+    },
+    error: {
+      title: "غير موجود",
+      notFound: "إما أن هذه الصفحة خاصة أو غير موجودة.",
+      home: "العوده للصفحة الرئيسية",
+    },
+    folderContent: {
+      folder: "مجلد",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "يوجد عنصر واحد فقط تحت هذا المجلد" : `يوجد ${count} عناصر تحت هذا المجلد.`,
+    },
+    tagContent: {
+      tag: "الوسم",
+      tagIndex: "مؤشر الوسم",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "يوجد عنصر واحد فقط تحت هذا الوسم" : `يوجد ${count} عناصر تحت هذا الوسم.`,
+      showingFirst: ({ count }) => `إظهار أول ${count} أوسمة.`,
+      totalTags: ({ count }) => `يوجد ${count} أوسمة.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/ca-ES.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Sense títol",
+    description: "Sense descripció",
+  },
+  components: {
+    callout: {
+      note: "Nota",
+      abstract: "Resum",
+      info: "Informació",
+      todo: "Per fer",
+      tip: "Consell",
+      success: "Èxit",
+      question: "Pregunta",
+      warning: "Advertència",
+      failure: "Fall",
+      danger: "Perill",
+      bug: "Error",
+      example: "Exemple",
+      quote: "Cita",
+    },
+    backlinks: {
+      title: "Retroenllaç",
+      noBacklinksFound: "No s'han trobat retroenllaços",
+    },
+    themeToggle: {
+      lightMode: "Mode clar",
+      darkMode: "Mode fosc",
+    },
+    explorer: {
+      title: "Explorador",
+    },
+    footer: {
+      createdWith: "Creat amb",
+    },
+    graph: {
+      title: "Vista Gràfica",
+    },
+    recentNotes: {
+      title: "Notes Recents",
+      seeRemainingMore: ({ remaining }) => `Vegi ${remaining} més →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transcluit de ${targetSlug}`,
+      linkToOriginal: "Enllaç a l'original",
+    },
+    search: {
+      title: "Cercar",
+      searchBarPlaceholder: "Cerca alguna cosa",
+    },
+    tableOfContents: {
+      title: "Taula de Continguts",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `Es llegeix en ${minutes} min`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Notes recents",
+      lastFewNotes: ({ count }) => `Últimes ${count} notes`,
+    },
+    error: {
+      title: "No s'ha trobat.",
+      notFound: "Aquesta pàgina és privada o no existeix.",
+      home: "Torna a la pàgina principal",
+    },
+    folderContent: {
+      folder: "Carpeta",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 article en aquesta carpeta." : `${count} articles en esta carpeta.`,
+    },
+    tagContent: {
+      tag: "Etiqueta",
+      tagIndex: "índex d'Etiquetes",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 article amb aquesta etiqueta." : `${count} article amb aquesta etiqueta.`,
+      showingFirst: ({ count }) => `Mostrant les primeres ${count} etiquetes.`,
+      totalTags: ({ count }) => `S'han trobat ${count} etiquetes en total.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/de-DE.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Unbenannt",
+    description: "Keine Beschreibung angegeben",
+  },
+  components: {
+    callout: {
+      note: "Hinweis",
+      abstract: "Zusammenfassung",
+      info: "Info",
+      todo: "Zu erledigen",
+      tip: "Tipp",
+      success: "Erfolg",
+      question: "Frage",
+      warning: "Warnung",
+      failure: "Misserfolg",
+      danger: "Gefahr",
+      bug: "Fehler",
+      example: "Beispiel",
+      quote: "Zitat",
+    },
+    backlinks: {
+      title: "Backlinks",
+      noBacklinksFound: "Keine Backlinks gefunden",
+    },
+    themeToggle: {
+      lightMode: "Light Mode",
+      darkMode: "Dark Mode",
+    },
+    explorer: {
+      title: "Explorer",
+    },
+    footer: {
+      createdWith: "Erstellt mit",
+    },
+    graph: {
+      title: "Graphansicht",
+    },
+    recentNotes: {
+      title: "Zuletzt bearbeitete Seiten",
+      seeRemainingMore: ({ remaining }) => `${remaining} weitere ansehen →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transklusion von ${targetSlug}`,
+      linkToOriginal: "Link zum Original",
+    },
+    search: {
+      title: "Suche",
+      searchBarPlaceholder: "Suche nach etwas",
+    },
+    tableOfContents: {
+      title: "Inhaltsverzeichnis",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Zuletzt bearbeitete Seiten",
+      lastFewNotes: ({ count }) => `Letzte ${count} Seiten`,
+    },
+    error: {
+      title: "Nicht gefunden",
+      notFound: "Diese Seite ist entweder nicht öffentlich oder existiert nicht.",
+      home: "Return to Homepage",
+    },
+    folderContent: {
+      folder: "Ordner",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 Datei in diesem Ordner." : `${count} Dateien in diesem Ordner.`,
+    },
+    tagContent: {
+      tag: "Tag",
+      tagIndex: "Tag-Übersicht",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 Datei mit diesem Tag." : `${count} Dateien mit diesem Tag.`,
+      showingFirst: ({ count }) => `Die ersten ${count} Tags werden angezeigt.`,
+      totalTags: ({ count }) => `${count} Tags insgesamt.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/definition.ts

@@ -1,11 +1,28 @@
 import { FullSlug } from "../../util/path"
 
+export interface CalloutTranslation {
+  note: string
+  abstract: string
+  info: string
+  todo: string
+  tip: string
+  success: string
+  question: string
+  warning: string
+  failure: string
+  danger: string
+  bug: string
+  example: string
+  quote: string
+}
+
 export interface Translation {
   propertyDefaults: {
     title: string
     description: string
   }
   components: {
+    callout: CalloutTranslation
     backlinks: {
       title: string
       noBacklinksFound: string
@@ -38,6 +55,9 @@ export interface Translation {
     tableOfContents: {
       title: string
     }
+    contentMeta: {
+      readingTime: (variables: { minutes: number }) => string
+    }
   }
   pages: {
     rss: {
@@ -47,6 +67,7 @@ export interface Translation {
     error: {
       title: string
       notFound: string
+      home: string
     }
     folderContent: {
       folder: string

quartz/i18n/locales/en-GB.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Untitled",
+    description: "No description provided",
+  },
+  components: {
+    callout: {
+      note: "Note",
+      abstract: "Abstract",
+      info: "Info",
+      todo: "To-Do",
+      tip: "Tip",
+      success: "Success",
+      question: "Question",
+      warning: "Warning",
+      failure: "Failure",
+      danger: "Danger",
+      bug: "Bug",
+      example: "Example",
+      quote: "Quote",
+    },
+    backlinks: {
+      title: "Backlinks",
+      noBacklinksFound: "No backlinks found",
+    },
+    themeToggle: {
+      lightMode: "Light mode",
+      darkMode: "Dark mode",
+    },
+    explorer: {
+      title: "Explorer",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "Graph View",
+    },
+    recentNotes: {
+      title: "Recent Notes",
+      seeRemainingMore: ({ remaining }) => `See ${remaining} more →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transclude of ${targetSlug}`,
+      linkToOriginal: "Link to original",
+    },
+    search: {
+      title: "Search",
+      searchBarPlaceholder: "Search for something",
+    },
+    tableOfContents: {
+      title: "Table of Contents",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Recent notes",
+      lastFewNotes: ({ count }) => `Last ${count} notes`,
+    },
+    error: {
+      title: "Not Found",
+      notFound: "Either this page is private or doesn't exist.",
+      home: "Return to Homepage",
+    },
+    folderContent: {
+      folder: "Folder",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 item under this folder." : `${count} items under this folder.`,
+    },
+    tagContent: {
+      tag: "Tag",
+      tagIndex: "Tag Index",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 item with this tag." : `${count} items with this tag.`,
+      showingFirst: ({ count }) => `Showing first ${count} tags.`,
+      totalTags: ({ count }) => `Found ${count} total tags.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/en-US.ts

@@ -6,6 +6,21 @@ export default {
     description: "No description provided",
   },
   components: {
+    callout: {
+      note: "Note",
+      abstract: "Abstract",
+      info: "Info",
+      todo: "Todo",
+      tip: "Tip",
+      success: "Success",
+      question: "Question",
+      warning: "Warning",
+      failure: "Failure",
+      danger: "Danger",
+      bug: "Bug",
+      example: "Example",
+      quote: "Quote",
+    },
     backlinks: {
       title: "Backlinks",
       noBacklinksFound: "No backlinks found",
@@ -38,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Table of Contents",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
@@ -47,17 +65,18 @@ export default {
     error: {
       title: "Not Found",
       notFound: "Either this page is private or doesn't exist.",
+      home: "Return to Homepage",
     },
     folderContent: {
       folder: "Folder",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 item under this folder" : `${count} items under this folder.`,
+        count === 1 ? "1 item under this folder." : `${count} items under this folder.`,
     },
     tagContent: {
       tag: "Tag",
       tagIndex: "Tag Index",
       itemsUnderTag: ({ count }) =>
-        count === 1 ? "1 item with this tag" : `${count} items with this tag.`,
+        count === 1 ? "1 item with this tag." : `${count} items with this tag.`,
       showingFirst: ({ count }) => `Showing first ${count} tags.`,
       totalTags: ({ count }) => `Found ${count} total tags.`,
     },

quartz/i18n/locales/es-ES.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Sin título",
+    description: "Sin descripción",
+  },
+  components: {
+    callout: {
+      note: "Nota",
+      abstract: "Resumen",
+      info: "Información",
+      todo: "Por hacer",
+      tip: "Consejo",
+      success: "Éxito",
+      question: "Pregunta",
+      warning: "Advertencia",
+      failure: "Fallo",
+      danger: "Peligro",
+      bug: "Error",
+      example: "Ejemplo",
+      quote: "Cita",
+    },
+    backlinks: {
+      title: "Retroenlaces",
+      noBacklinksFound: "No se han encontrado retroenlaces",
+    },
+    themeToggle: {
+      lightMode: "Modo claro",
+      darkMode: "Modo oscuro",
+    },
+    explorer: {
+      title: "Explorador",
+    },
+    footer: {
+      createdWith: "Creado con",
+    },
+    graph: {
+      title: "Vista Gráfica",
+    },
+    recentNotes: {
+      title: "Notas Recientes",
+      seeRemainingMore: ({ remaining }) => `Vea ${remaining} más →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transcluido de ${targetSlug}`,
+      linkToOriginal: "Enlace al original",
+    },
+    search: {
+      title: "Buscar",
+      searchBarPlaceholder: "Busca algo",
+    },
+    tableOfContents: {
+      title: "Tabla de Contenidos",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `Se lee en ${minutes} min`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Notas recientes",
+      lastFewNotes: ({ count }) => `Últimas ${count} notas`,
+    },
+    error: {
+      title: "No se ha encontrado.",
+      notFound: "Esta página es privada o no existe.",
+      home: "Regresa a la página principal",
+    },
+    folderContent: {
+      folder: "Carpeta",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 artículo en esta carpeta." : `${count} artículos en esta carpeta.`,
+    },
+    tagContent: {
+      tag: "Etiqueta",
+      tagIndex: "Índice de Etiquetas",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 artículo con esta etiqueta." : `${count} artículos con esta etiqueta.`,
+      showingFirst: ({ count }) => `Mostrando las primeras ${count} etiquetas.`,
+      totalTags: ({ count }) => `Se han encontrado ${count} etiquetas en total.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/fa-IR.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "بدون عنوان",
+    description: "توضیح خاصی اضافه نشده است",
+  },
+  components: {
+    callout: {
+      note: "یادداشت",
+      abstract: "چکیده",
+      info: "اطلاعات",
+      todo: "اقدام",
+      tip: "نکته",
+      success: "تیک",
+      question: "سؤال",
+      warning: "هشدار",
+      failure: "شکست",
+      danger: "خطر",
+      bug: "باگ",
+      example: "مثال",
+      quote: "نقل قول",
+    },
+    backlinks: {
+      title: "بک‌لینک‌ها",
+      noBacklinksFound: "بدون بک‌لینک",
+    },
+    themeToggle: {
+      lightMode: "حالت روشن",
+      darkMode: "حالت تاریک",
+    },
+    explorer: {
+      title: "مطالب",
+    },
+    footer: {
+      createdWith: "ساخته شده با",
+    },
+    graph: {
+      title: "نمای گراف",
+    },
+    recentNotes: {
+      title: "یادداشت‌های اخیر",
+      seeRemainingMore: ({ remaining }) => `${remaining} یادداشت دیگر →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `از ${targetSlug}`,
+      linkToOriginal: "پیوند به اصلی",
+    },
+    search: {
+      title: "جستجو",
+      searchBarPlaceholder: "مطلبی را جستجو کنید",
+    },
+    tableOfContents: {
+      title: "فهرست",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `زمان تقریبی مطالعه: ${minutes} دقیقه`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "یادداشت‌های اخیر",
+      lastFewNotes: ({ count }) => `${count} یادداشت اخیر`,
+    },
+    error: {
+      title: "یافت نشد",
+      notFound: "این صفحه یا خصوصی است یا وجود ندارد",
+      home: "بازگشت به صفحه اصلی",
+    },
+    folderContent: {
+      folder: "پوشه",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? ".یک مطلب در این پوشه است" : `${count} مطلب در این پوشه است.`,
+    },
+    tagContent: {
+      tag: "برچسب",
+      tagIndex: "فهرست برچسب‌ها",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "یک مطلب با این برچسب" : `${count} مطلب با این برچسب.`,
+      showingFirst: ({ count }) => `در حال نمایش ${count} برچسب.`,
+      totalTags: ({ count }) => `${count} برچسب یافت شد.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/fr-FR.ts

@@ -6,6 +6,21 @@ export default {
     description: "Aucune description fournie",
   },
   components: {
+    callout: {
+      note: "Note",
+      abstract: "Résumé",
+      info: "Info",
+      todo: "À faire",
+      tip: "Conseil",
+      success: "Succès",
+      question: "Question",
+      warning: "Avertissement",
+      failure: "Échec",
+      danger: "Danger",
+      bug: "Bogue",
+      example: "Exemple",
+      quote: "Citation",
+    },
     backlinks: {
       title: "Liens retour",
       noBacklinksFound: "Aucun lien retour trouvé",
@@ -38,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Table des Matières",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min de lecture`,
+    },
   },
   pages: {
     rss: {
@@ -45,19 +63,20 @@ export default {
       lastFewNotes: ({ count }) => `Les dernières ${count} notes`,
     },
     error: {
-      title: "Pas trouvé",
+      title: "Introuvable",
       notFound: "Cette page est soit privée, soit elle n'existe pas.",
+      home: "Retour à la page d'accueil",
     },
     folderContent: {
       folder: "Dossier",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 élément sous ce dossier" : `${count} éléments sous ce dossier.`,
+        count === 1 ? "1 élément sous ce dossier." : `${count} éléments sous ce dossier.`,
     },
     tagContent: {
       tag: "Étiquette",
       tagIndex: "Index des étiquettes",
       itemsUnderTag: ({ count }) =>
-        count === 1 ? "1 élément avec cette étiquette" : `${count} éléments avec cette étiquette.`,
+        count === 1 ? "1 élément avec cette étiquette." : `${count} éléments avec cette étiquette.`,
       showingFirst: ({ count }) => `Affichage des premières ${count} étiquettes.`,
       totalTags: ({ count }) => `Trouvé ${count} étiquettes au total.`,
     },

quartz/i18n/locales/hu-HU.ts

@@ -0,0 +1,82 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Névtelen",
+    description: "Nincs leírás",
+  },
+  components: {
+    callout: {
+      note: "Jegyzet",
+      abstract: "Abstract",
+      info: "Információ",
+      todo: "Tennivaló",
+      tip: "Tipp",
+      success: "Siker",
+      question: "Kérdés",
+      warning: "Figyelmeztetés",
+      failure: "Hiba",
+      danger: "Veszély",
+      bug: "Bug",
+      example: "Példa",
+      quote: "Idézet",
+    },
+    backlinks: {
+      title: "Visszautalások",
+      noBacklinksFound: "Nincs visszautalás",
+    },
+    themeToggle: {
+      lightMode: "Világos mód",
+      darkMode: "Sötét mód",
+    },
+    explorer: {
+      title: "Fájlböngésző",
+    },
+    footer: {
+      createdWith: "Készítve ezzel:",
+    },
+    graph: {
+      title: "Grafikonnézet",
+    },
+    recentNotes: {
+      title: "Legutóbbi jegyzetek",
+      seeRemainingMore: ({ remaining }) => `${remaining} további megtekintése →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `${targetSlug} áthivatkozása`,
+      linkToOriginal: "Hivatkozás az eredetire",
+    },
+    search: {
+      title: "Keresés",
+      searchBarPlaceholder: "Keress valamire",
+    },
+    tableOfContents: {
+      title: "Tartalomjegyzék",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} perces olvasás`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Legutóbbi jegyzetek",
+      lastFewNotes: ({ count }) => `Legutóbbi ${count} jegyzet`,
+    },
+    error: {
+      title: "Nem található",
+      notFound: "Ez a lap vagy privát vagy nem létezik.",
+      home: "Vissza a kezdőlapra",
+    },
+    folderContent: {
+      folder: "Mappa",
+      itemsUnderFolder: ({ count }) => `Ebben a mappában ${count} elem található.`,
+    },
+    tagContent: {
+      tag: "Címke",
+      tagIndex: "Címke index",
+      itemsUnderTag: ({ count }) => `${count} elem található ezzel a címkével.`,
+      showingFirst: ({ count }) => `Első ${count} címke megjelenítve.`,
+      totalTags: ({ count }) => `Összesen ${count} címke található.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/it-IT.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Senza titolo",
+    description: "Nessuna descrizione",
+  },
+  components: {
+    callout: {
+      note: "Nota",
+      abstract: "Astratto",
+      info: "Info",
+      todo: "Da fare",
+      tip: "Consiglio",
+      success: "Completato",
+      question: "Domanda",
+      warning: "Attenzione",
+      failure: "Errore",
+      danger: "Pericolo",
+      bug: "Bug",
+      example: "Esempio",
+      quote: "Citazione",
+    },
+    backlinks: {
+      title: "Link entranti",
+      noBacklinksFound: "Nessun link entrante",
+    },
+    themeToggle: {
+      lightMode: "Tema chiaro",
+      darkMode: "Tema scuro",
+    },
+    explorer: {
+      title: "Esplora",
+    },
+    footer: {
+      createdWith: "Creato con",
+    },
+    graph: {
+      title: "Vista grafico",
+    },
+    recentNotes: {
+      title: "Note recenti",
+      seeRemainingMore: ({ remaining }) => `Vedi ${remaining} altro →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transclusione di ${targetSlug}`,
+      linkToOriginal: "Link all'originale",
+    },
+    search: {
+      title: "Cerca",
+      searchBarPlaceholder: "Cerca qualcosa",
+    },
+    tableOfContents: {
+      title: "Tabella dei contenuti",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} minuti`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Note recenti",
+      lastFewNotes: ({ count }) => `Ultime ${count} note`,
+    },
+    error: {
+      title: "Non trovato",
+      notFound: "Questa pagina è privata o non esiste.",
+      home: "Ritorna alla home page",
+    },
+    folderContent: {
+      folder: "Cartella",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 oggetto in questa cartella." : `${count} oggetti in questa cartella.`,
+    },
+    tagContent: {
+      tag: "Etichetta",
+      tagIndex: "Indice etichette",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 oggetto con questa etichetta." : `${count} oggetti con questa etichetta.`,
+      showingFirst: ({ count }) => `Prime ${count} etichette.`,
+      totalTags: ({ count }) => `Trovate ${count} etichette totali.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/ja-JP.ts

@@ -6,6 +6,21 @@ export default {
     description: "説明なし",
   },
   components: {
+    callout: {
+      note: "ノート",
+      abstract: "抄録",
+      info: "情報",
+      todo: "やるべきこと",
+      tip: "ヒント",
+      success: "成功",
+      question: "質問",
+      warning: "警告",
+      failure: "失敗",
+      danger: "危険",
+      bug: "バグ",
+      example: "例",
+      quote: "引用",
+    },
     backlinks: {
       title: "バックリンク",
       noBacklinksFound: "バックリンクはありません",
@@ -38,6 +53,9 @@ export default {
     tableOfContents: {
       title: "目次",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
@@ -47,17 +65,16 @@ export default {
     error: {
       title: "Not Found",
       notFound: "ページが存在しないか、非公開設定になっています。",
+      home: "ホームページに戻る",
     },
     folderContent: {
       folder: "フォルダ",
-      itemsUnderFolder: ({ count }) =>
-        `${count}件のページ`,
+      itemsUnderFolder: ({ count }) => `${count}件のページ`,
     },
     tagContent: {
       tag: "タグ",
       tagIndex: "タグ一覧",
-      itemsUnderTag: ({ count }) =>
-        `${count}件のページ`,
+      itemsUnderTag: ({ count }) => `${count}件のページ`,
       showingFirst: ({ count }) => `のうち最初の${count}件を表示しています`,
       totalTags: ({ count }) => `全${count}個のタグを表示中`,
     },

quartz/i18n/locales/ko-KR.ts

@@ -0,0 +1,82 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "제목 없음",
+    description: "설명 없음",
+  },
+  components: {
+    callout: {
+      note: "노트",
+      abstract: "개요",
+      info: "정보",
+      todo: "할일",
+      tip: "팁",
+      success: "성공",
+      question: "질문",
+      warning: "주의",
+      failure: "실패",
+      danger: "위험",
+      bug: "버그",
+      example: "예시",
+      quote: "인용",
+    },
+    backlinks: {
+      title: "백링크",
+      noBacklinksFound: "백링크가 없습니다.",
+    },
+    themeToggle: {
+      lightMode: "라이트 모드",
+      darkMode: "다크 모드",
+    },
+    explorer: {
+      title: "탐색기",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "그래프 뷰",
+    },
+    recentNotes: {
+      title: "최근 게시글",
+      seeRemainingMore: ({ remaining }) => `${remaining}건 더보기 →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `${targetSlug}의 포함`,
+      linkToOriginal: "원본 링크",
+    },
+    search: {
+      title: "검색",
+      searchBarPlaceholder: "검색어를 입력하세요",
+    },
+    tableOfContents: {
+      title: "목차",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "최근 게시글",
+      lastFewNotes: ({ count }) => `최근 ${count} 건`,
+    },
+    error: {
+      title: "Not Found",
+      notFound: "페이지가 존재하지 않거나 비공개 설정이 되어 있습니다.",
+      home: "홈페이지로 돌아가기",
+    },
+    folderContent: {
+      folder: "폴더",
+      itemsUnderFolder: ({ count }) => `${count}건의 항목`,
+    },
+    tagContent: {
+      tag: "태그",
+      tagIndex: "태그 목록",
+      itemsUnderTag: ({ count }) => `${count}건의 항목`,
+      showingFirst: ({ count }) => `처음 ${count}개의 태그`,
+      totalTags: ({ count }) => `총 ${count}개의 태그를 찾았습니다.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/nl-NL.ts

@@ -0,0 +1,86 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Naamloos",
+    description: "Geen beschrijving gegeven.",
+  },
+  components: {
+    callout: {
+      note: "Notitie",
+      abstract: "Samenvatting",
+      info: "Info",
+      todo: "Te doen",
+      tip: "Tip",
+      success: "Succes",
+      question: "Vraag",
+      warning: "Waarschuwing",
+      failure: "Mislukking",
+      danger: "Gevaar",
+      bug: "Bug",
+      example: "Voorbeeld",
+      quote: "Citaat",
+    },
+    backlinks: {
+      title: "Backlinks",
+      noBacklinksFound: "Geen backlinks gevonden",
+    },
+    themeToggle: {
+      lightMode: "Lichte modus",
+      darkMode: "Donkere modus",
+    },
+    explorer: {
+      title: "Verkenner",
+    },
+    footer: {
+      createdWith: "Gemaakt met",
+    },
+    graph: {
+      title: "Grafiekweergave",
+    },
+    recentNotes: {
+      title: "Recente notities",
+      seeRemainingMore: ({ remaining }) => `Zie ${remaining} meer →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Invoeging van ${targetSlug}`,
+      linkToOriginal: "Link naar origineel",
+    },
+    search: {
+      title: "Zoeken",
+      searchBarPlaceholder: "Doorzoek de website",
+    },
+    tableOfContents: {
+      title: "Inhoudsopgave",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) =>
+        minutes === 1 ? "1 minuut leestijd" : `${minutes} minuten leestijd`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Recente notities",
+      lastFewNotes: ({ count }) => `Laatste ${count} notities`,
+    },
+    error: {
+      title: "Niet gevonden",
+      notFound: "Deze pagina is niet zichtbaar of bestaat niet.",
+      home: "Keer terug naar de start pagina",
+    },
+    folderContent: {
+      folder: "Map",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 item in deze map." : `${count} items in deze map.`,
+    },
+    tagContent: {
+      tag: "Label",
+      tagIndex: "Label-index",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 item met dit label." : `${count} items met dit label.`,
+      showingFirst: ({ count }) =>
+        count === 1 ? "Eerste label tonen." : `Eerste ${count} labels tonen.`,
+      totalTags: ({ count }) => `${count} labels gevonden.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/pl-PL.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Bez nazwy",
+    description: "Brak opisu",
+  },
+  components: {
+    callout: {
+      note: "Notatka",
+      abstract: "Streszczenie",
+      info: "informacja",
+      todo: "Do zrobienia",
+      tip: "Wskazówka",
+      success: "Zrobione",
+      question: "Pytanie",
+      warning: "Ostrzeżenie",
+      failure: "Usterka",
+      danger: "Niebiezpieczeństwo",
+      bug: "Błąd w kodzie",
+      example: "Przykład",
+      quote: "Cytat",
+    },
+    backlinks: {
+      title: "Odnośniki zwrotne",
+      noBacklinksFound: "Brak połączeń zwrotnych",
+    },
+    themeToggle: {
+      lightMode: "Trzyb jasny",
+      darkMode: "Tryb ciemny",
+    },
+    explorer: {
+      title: "Przeglądaj",
+    },
+    footer: {
+      createdWith: "Stworzone z użyciem",
+    },
+    graph: {
+      title: "Graf",
+    },
+    recentNotes: {
+      title: "Najnowsze notatki",
+      seeRemainingMore: ({ remaining }) => `Zobacz ${remaining} nastepnych →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Osadzone ${targetSlug}`,
+      linkToOriginal: "Łącze do oryginału",
+    },
+    search: {
+      title: "Szukaj",
+      searchBarPlaceholder: "Search for something",
+    },
+    tableOfContents: {
+      title: "Spis treści",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min. czytania `,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Najnowsze notatki",
+      lastFewNotes: ({ count }) => `Ostatnie ${count} notatek`,
+    },
+    error: {
+      title: "Nie znaleziono",
+      notFound: "Ta strona jest prywatna lub nie istnieje.",
+      home: "Powrót do strony głównej",
+    },
+    folderContent: {
+      folder: "Folder",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "W tym folderze jest 1 element." : `Elementów w folderze: ${count}.`,
+    },
+    tagContent: {
+      tag: "Znacznik",
+      tagIndex: "Spis znaczników",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "Oznaczony 1 element." : `Elementów z tym znacznikiem: ${count}.`,
+      showingFirst: ({ count }) => `Pokazuje ${count} pierwszych znaczników.`,
+      totalTags: ({ count }) => `Znalezionych wszystkich znaczników: ${count}.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/pt-BR.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Sem título",
+    description: "Sem descrição",
+  },
+  components: {
+    callout: {
+      note: "Nota",
+      abstract: "Abstrato",
+      info: "Info",
+      todo: "Pendência",
+      tip: "Dica",
+      success: "Sucesso",
+      question: "Pergunta",
+      warning: "Aviso",
+      failure: "Falha",
+      danger: "Perigo",
+      bug: "Bug",
+      example: "Exemplo",
+      quote: "Citação",
+    },
+    backlinks: {
+      title: "Backlinks",
+      noBacklinksFound: "Sem backlinks encontrados",
+    },
+    themeToggle: {
+      lightMode: "Tema claro",
+      darkMode: "Tema escuro",
+    },
+    explorer: {
+      title: "Explorador",
+    },
+    footer: {
+      createdWith: "Criado com",
+    },
+    graph: {
+      title: "Visão de gráfico",
+    },
+    recentNotes: {
+      title: "Notas recentes",
+      seeRemainingMore: ({ remaining }) => `Veja mais ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transcrever de ${targetSlug}`,
+      linkToOriginal: "Link ao original",
+    },
+    search: {
+      title: "Pesquisar",
+      searchBarPlaceholder: "Pesquisar por algo",
+    },
+    tableOfContents: {
+      title: "Sumário",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `Leitura de ${minutes} min`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Notas recentes",
+      lastFewNotes: ({ count }) => `Últimas ${count} notas`,
+    },
+    error: {
+      title: "Não encontrado",
+      notFound: "Esta página é privada ou não existe.",
+      home: "Retornar a página inicial",
+    },
+    folderContent: {
+      folder: "Arquivo",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 item neste arquivo." : `${count} items neste arquivo.`,
+    },
+    tagContent: {
+      tag: "Tag",
+      tagIndex: "Sumário de Tags",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 item com esta tag." : `${count} items com esta tag.`,
+      showingFirst: ({ count }) => `Mostrando as ${count} primeiras tags.`,
+      totalTags: ({ count }) => `Encontradas ${count} tags.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/ro-RO.ts

@@ -0,0 +1,85 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Fără titlu",
+    description: "Nici o descriere furnizată",
+  },
+  components: {
+    callout: {
+      note: "Notă",
+      abstract: "Rezumat",
+      info: "Informație",
+      todo: "De făcut",
+      tip: "Sfat",
+      success: "Succes",
+      question: "Întrebare",
+      warning: "Avertisment",
+      failure: "Eșec",
+      danger: "Pericol",
+      bug: "Bug",
+      example: "Exemplu",
+      quote: "Citat",
+    },
+    backlinks: {
+      title: "Legături înapoi",
+      noBacklinksFound: "Nu s-au găsit legături înapoi",
+    },
+    themeToggle: {
+      lightMode: "Modul luminos",
+      darkMode: "Modul întunecat",
+    },
+    explorer: {
+      title: "Explorator",
+    },
+    footer: {
+      createdWith: "Creat cu",
+    },
+    graph: {
+      title: "Graf",
+    },
+    recentNotes: {
+      title: "Notițe recente",
+      seeRemainingMore: ({ remaining }) => `Vezi încă ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Extras din ${targetSlug}`,
+      linkToOriginal: "Legătură către original",
+    },
+    search: {
+      title: "Căutare",
+      searchBarPlaceholder: "Introduceți termenul de căutare...",
+    },
+    tableOfContents: {
+      title: "Cuprins",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) =>
+        minutes == 1 ? `lectură de 1 minut` : `lectură de ${minutes} minute`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Notițe recente",
+      lastFewNotes: ({ count }) => `Ultimele ${count} notițe`,
+    },
+    error: {
+      title: "Pagina nu a fost găsită",
+      notFound: "Fie această pagină este privată, fie nu există.",
+      home: "Reveniți la pagina de pornire",
+    },
+    folderContent: {
+      folder: "Dosar",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 articol în acest dosar." : `${count} elemente în acest dosar.`,
+    },
+    tagContent: {
+      tag: "Etichetă",
+      tagIndex: "Indexul etichetelor",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 articol cu această etichetă." : `${count} articole cu această etichetă.`,
+      showingFirst: ({ count }) => `Se afișează primele ${count} etichete.`,
+      totalTags: ({ count }) => `Au fost găsite ${count} etichete în total.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/ru-RU.ts

@@ -0,0 +1,96 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Без названия",
+    description: "Описание отсутствует",
+  },
+  components: {
+    callout: {
+      note: "Заметка",
+      abstract: "Резюме",
+      info: "Инфо",
+      todo: "Сделать",
+      tip: "Подсказка",
+      success: "Успех",
+      question: "Вопрос",
+      warning: "Предупреждение",
+      failure: "Неудача",
+      danger: "Опасность",
+      bug: "Баг",
+      example: "Пример",
+      quote: "Цитата",
+    },
+    backlinks: {
+      title: "Обратные ссылки",
+      noBacklinksFound: "Обратные ссылки отсутствуют",
+    },
+    themeToggle: {
+      lightMode: "Светлый режим",
+      darkMode: "Тёмный режим",
+    },
+    explorer: {
+      title: "Проводник",
+    },
+    footer: {
+      createdWith: "Создано с помощью",
+    },
+    graph: {
+      title: "Вид графа",
+    },
+    recentNotes: {
+      title: "Недавние заметки",
+      seeRemainingMore: ({ remaining }) =>
+        `Посмотреть оставш${getForm(remaining, "уюся", "иеся", "иеся")} ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Переход из ${targetSlug}`,
+      linkToOriginal: "Ссылка на оригинал",
+    },
+    search: {
+      title: "Поиск",
+      searchBarPlaceholder: "Найти что-нибудь",
+    },
+    tableOfContents: {
+      title: "Оглавление",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `время чтения ~${minutes} мин.`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Недавние заметки",
+      lastFewNotes: ({ count }) =>
+        `Последн${getForm(count, "яя", "ие", "ие")} ${count} замет${getForm(count, "ка", "ки", "ок")}`,
+    },
+    error: {
+      title: "Страница не найдена",
+      notFound: "Эта страница приватная или не существует",
+      home: "Вернуться на главную страницу",
+    },
+    folderContent: {
+      folder: "Папка",
+      itemsUnderFolder: ({ count }) =>
+        `в этой папке ${count} элемент${getForm(count, "", "а", "ов")}`,
+    },
+    tagContent: {
+      tag: "Тег",
+      tagIndex: "Индекс тегов",
+      itemsUnderTag: ({ count }) => `с этим тегом ${count} элемент${getForm(count, "", "а", "ов")}`,
+      showingFirst: ({ count }) =>
+        `Показыва${getForm(count, "ется", "ются", "ются")} ${count} тег${getForm(count, "", "а", "ов")}`,
+      totalTags: ({ count }) => `Всего ${count} тег${getForm(count, "", "а", "ов")}`,
+    },
+  },
+} as const satisfies Translation
+
+function getForm(number: number, form1: string, form2: string, form5: string): string {
+  const remainder100 = number % 100
+  const remainder10 = remainder100 % 10
+
+  if (remainder100 >= 10 && remainder100 <= 20) return form5
+  if (remainder10 > 1 && remainder10 < 5) return form2
+  if (remainder10 == 1) return form1
+  return form5
+}

quartz/i18n/locales/uk-UA.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Без назви",
+    description: "Опис не надано",
+  },
+  components: {
+    callout: {
+      note: "Примітка",
+      abstract: "Абстракт",
+      info: "Інформація",
+      todo: "Завдання",
+      tip: "Порада",
+      success: "Успіх",
+      question: "Питання",
+      warning: "Попередження",
+      failure: "Невдача",
+      danger: "Небезпека",
+      bug: "Баг",
+      example: "Приклад",
+      quote: "Цитата",
+    },
+    backlinks: {
+      title: "Зворотні посилання",
+      noBacklinksFound: "Зворотних посилань не знайдено",
+    },
+    themeToggle: {
+      lightMode: "Світлий режим",
+      darkMode: "Темний режим",
+    },
+    explorer: {
+      title: "Провідник",
+    },
+    footer: {
+      createdWith: "Створено за допомогою",
+    },
+    graph: {
+      title: "Вигляд графа",
+    },
+    recentNotes: {
+      title: "Останні нотатки",
+      seeRemainingMore: ({ remaining }) => `Переглянути ще ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Видобуто з ${targetSlug}`,
+      linkToOriginal: "Посилання на оригінал",
+    },
+    search: {
+      title: "Пошук",
+      searchBarPlaceholder: "Шукати щось",
+    },
+    tableOfContents: {
+      title: "Зміст",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} хв читання`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Останні нотатки",
+      lastFewNotes: ({ count }) => `Останні нотатки: ${count}`,
+    },
+    error: {
+      title: "Не знайдено",
+      notFound: "Ця сторінка або приватна, або не існує.",
+      home: "Повернутися на головну сторінку",
+    },
+    folderContent: {
+      folder: "Тека",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "У цій теці 1 елемент." : `Елементів у цій теці: ${count}.`,
+    },
+    tagContent: {
+      tag: "Мітка",
+      tagIndex: "Індекс мітки",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 елемент з цією міткою." : `Елементів з цією міткою: ${count}.`,
+      showingFirst: ({ count }) => `Показ перших ${count} міток.`,
+      totalTags: ({ count }) => `Всього знайдено міток: ${count}.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/vi-VN.ts

@@ -0,0 +1,84 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Không có tiêu đề",
+    description: "Không có mô tả được cung cấp",
+  },
+  components: {
+    callout: {
+      note: "Ghi Chú",
+      abstract: "Tóm Tắt",
+      info: "Thông tin",
+      todo: "Cần Làm",
+      tip: "Gợi Ý",
+      success: "Thành Công",
+      question: "Nghi Vấn",
+      warning: "Cảnh Báo",
+      failure: "Thất Bại",
+      danger: "Nguy Hiểm",
+      bug: "Lỗi",
+      example: "Ví Dụ",
+      quote: "Trích Dẫn",
+    },
+    backlinks: {
+      title: "Liên Kết Ngược",
+      noBacklinksFound: "Không có liên kết ngược được tìm thấy",
+    },
+    themeToggle: {
+      lightMode: "Sáng",
+      darkMode: "Tối",
+    },
+    explorer: {
+      title: "Trong bài này",
+    },
+    footer: {
+      createdWith: "Được tạo bởi",
+    },
+    graph: {
+      title: "Biểu Đồ",
+    },
+    recentNotes: {
+      title: "Bài viết gần đây",
+      seeRemainingMore: ({ remaining }) => `Xem ${remaining} thêm →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Bao gồm ${targetSlug}`,
+      linkToOriginal: "Liên Kết Gốc",
+    },
+    search: {
+      title: "Tìm Kiếm",
+      searchBarPlaceholder: "Tìm kiếm thông tin",
+    },
+    tableOfContents: {
+      title: "Bảng Nội Dung",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `đọc ${minutes} phút`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Những bài gần đây",
+      lastFewNotes: ({ count }) => `${count} Bài gần đây`,
+    },
+    error: {
+      title: "Không Tìm Thấy",
+      notFound: "Trang này được bảo mật hoặc không tồn tại.",
+      home: "Trở về trang chủ",
+    },
+    folderContent: {
+      folder: "Thư Mục",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 mục trong thư mục này." : `${count} mục trong thư mục này.`,
+    },
+    tagContent: {
+      tag: "Thẻ",
+      tagIndex: "Thẻ Mục Lục",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 mục gắn thẻ này." : `${count} mục gắn thẻ này.`,
+      showingFirst: ({ count }) => `Hiển thị trước ${count} thẻ.`,
+      totalTags: ({ count }) => `Tìm thấy ${count} thẻ tổng cộng.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/zh-CN.ts

@@ -0,0 +1,82 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "无题",
+    description: "无描述",
+  },
+  components: {
+    callout: {
+      note: "笔记",
+      abstract: "摘要",
+      info: "提示",
+      todo: "待办",
+      tip: "提示",
+      success: "成功",
+      question: "问题",
+      warning: "警告",
+      failure: "失败",
+      danger: "危险",
+      bug: "错误",
+      example: "示例",
+      quote: "引用",
+    },
+    backlinks: {
+      title: "反向链接",
+      noBacklinksFound: "无法找到反向链接",
+    },
+    themeToggle: {
+      lightMode: "亮色模式",
+      darkMode: "暗色模式",
+    },
+    explorer: {
+      title: "探索",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "关系图谱",
+    },
+    recentNotes: {
+      title: "最近的笔记",
+      seeRemainingMore: ({ remaining }) => `查看更多${remaining}篇笔记 →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `包含${targetSlug}`,
+      linkToOriginal: "指向原始笔记的链接",
+    },
+    search: {
+      title: "搜索",
+      searchBarPlaceholder: "搜索些什么",
+    },
+    tableOfContents: {
+      title: "目录",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes}分钟阅读`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "最近的笔记",
+      lastFewNotes: ({ count }) => `最近的${count}条笔记`,
+    },
+    error: {
+      title: "无法找到",
+      notFound: "私有笔记或笔记不存在。",
+      home: "返回首页",
+    },
+    folderContent: {
+      folder: "文件夹",
+      itemsUnderFolder: ({ count }) => `此文件夹下有${count}条笔记。`,
+    },
+    tagContent: {
+      tag: "标签",
+      tagIndex: "标签索引",
+      itemsUnderTag: ({ count }) => `此标签下有${count}条笔记。`,
+      showingFirst: ({ count }) => `显示前${count}个标签。`,
+      totalTags: ({ count }) => `总共有${count}个标签。`,
+    },
+  },
+} as const satisfies Translation

quartz/plugins/emitters/404.tsx

@@ -9,6 +9,7 @@ import { NotFound } from "../../components"
 import { defaultProcessedContent } from "../vfile"
 import { write } from "./helpers"
 import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
 
 export const NotFoundPage: QuartzEmitterPlugin = () => {
   const opts: FullPageLayout = {
@@ -27,6 +28,9 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
     getQuartzComponents() {
       return [Head, Body, pageBody, Footer]
     },
+    async getDependencyGraph(_ctx, _content, _resources) {
+      return new DepGraph<FilePath>()
+    },
     async emit(ctx, _content, resources): Promise<FilePath[]> {
       const cfg = ctx.cfg.configuration
       const slug = "404" as FullSlug
@@ -42,6 +46,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
         frontmatter: { title: notFound, tags: [] },
       })
       const componentData: QuartzComponentProps = {
+        ctx,
         fileData: vfile.data,
         externalResources,
         cfg,

quartz/plugins/emitters/aliases.ts

@@ -2,12 +2,38 @@ import { FilePath, FullSlug, joinSegments, resolveRelative, simplifySlug } from
 import { QuartzEmitterPlugin } from "../types"
 import path from "path"
 import { write } from "./helpers"
+import DepGraph from "../../depgraph"
 
 export const AliasRedirects: QuartzEmitterPlugin = () => ({
   name: "AliasRedirects",
   getQuartzComponents() {
     return []
   },
+  async getDependencyGraph(ctx, content, _resources) {
+    const graph = new DepGraph<FilePath>()
+
+    const { argv } = ctx
+    for (const [_tree, file] of content) {
+      const dir = path.posix.relative(argv.directory, path.dirname(file.data.filePath!))
+      const aliases = file.data.frontmatter?.aliases ?? []
+      const slugs = aliases.map((alias) => path.posix.join(dir, alias) as FullSlug)
+      const permalink = file.data.frontmatter?.permalink
+      if (typeof permalink === "string") {
+        slugs.push(permalink as FullSlug)
+      }
+
+      for (let slug of slugs) {
+        // fix any slugs that have trailing slash
+        if (slug.endsWith("/")) {
+          slug = joinSegments(slug, "index") as FullSlug
+        }
+
+        graph.addEdge(file.data.filePath!, joinSegments(argv.output, slug + ".html") as FilePath)
+      }
+    }
+
+    return graph
+  },
   async emit(ctx, content, _resources): Promise<FilePath[]> {
     const { argv } = ctx
     const fps: FilePath[] = []

quartz/plugins/emitters/assets.ts

@@ -3,6 +3,14 @@ import { QuartzEmitterPlugin } from "../types"
 import path from "path"
 import fs from "fs"
 import { glob } from "../../util/glob"
+import DepGraph from "../../depgraph"
+import { Argv } from "../../util/ctx"
+import { QuartzConfig } from "../../cfg"
+
+const filesToCopy = async (argv: Argv, cfg: QuartzConfig) => {
+  // glob all non MD files in content folder and copy it over
+  return await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
+}
 
 export const Assets: QuartzEmitterPlugin = () => {
   return {
@@ -10,10 +18,27 @@ export const Assets: QuartzEmitterPlugin = () => {
     getQuartzComponents() {
       return []
     },
+    async getDependencyGraph(ctx, _content, _resources) {
+      const { argv, cfg } = ctx
+      const graph = new DepGraph<FilePath>()
+
+      const fps = await filesToCopy(argv, cfg)
+
+      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(argv.output, name) as FilePath
+
+        graph.addEdge(src, dest)
+      }
+
+      return graph
+    },
     async emit({ argv, cfg }, _content, _resources): 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 fps = await filesToCopy(argv, cfg)
       const res: FilePath[] = []
       for (const fp of fps) {
         const ext = path.extname(fp)

quartz/plugins/emitters/cname.ts

@@ -2,6 +2,7 @@ import { FilePath, joinSegments } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import fs from "fs"
 import chalk from "chalk"
+import DepGraph from "../../depgraph"
 
 export function extractDomainFromBaseUrl(baseUrl: string) {
   const url = new URL(`https://${baseUrl}`)
@@ -13,6 +14,9 @@ export const CNAME: QuartzEmitterPlugin = () => ({
   getQuartzComponents() {
     return []
   },
+  async getDependencyGraph(_ctx, _content, _resources) {
+    return new DepGraph<FilePath>()
+  },
   async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
     if (!cfg.configuration.baseUrl) {
       console.warn(chalk.yellow("CNAME emitter requires `baseUrl` to be set in your configuration"))

quartz/plugins/emitters/componentResources.ts

@@ -1,4 +1,4 @@
-import { FilePath, FullSlug } from "../../util/path"
+import { FilePath, FullSlug, joinSegments } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 
 // @ts-ignore
@@ -8,12 +8,12 @@ import popoverScript from "../../components/scripts/popover.inline"
 import styles from "../../styles/custom.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"
 import { transform as transpile } from "esbuild"
 import { write } from "./helpers"
+import DepGraph from "../../depgraph"
 
 type ComponentResources = {
   css: string[]
@@ -68,13 +68,8 @@ async function joinScripts(scripts: string[]): Promise<string> {
   return res.code
 }
 
-function addGlobalPageResources(
-  ctx: BuildCtx,
-  staticResources: StaticResources,
-  componentResources: ComponentResources,
-) {
+function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentResources) {
   const cfg = ctx.cfg.configuration
-  const reloadScript = ctx.argv.serve
 
   // popovers
   if (cfg.enablePopovers) {
@@ -84,16 +79,17 @@ function addGlobalPageResources(
 
   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(`
+      const gtagScript = document.createElement("script")
+      gtagScript.src = "https://www.googletagmanager.com/gtag/js?id=${tagId}"
+      gtagScript.async = true
+      document.head.appendChild(gtagScript)
+
       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,
@@ -118,12 +114,44 @@ function addGlobalPageResources(
   } else if (cfg.analytics?.provider === "umami") {
     componentResources.afterDOMLoaded.push(`
       const umamiScript = document.createElement("script")
-      umamiScript.src = cfg.analytics.host ?? "https://analytics.umami.is/script.js"
+      umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js"
       umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
       umamiScript.async = true
 
       document.head.appendChild(umamiScript)
     `)
+  } else if (cfg.analytics?.provider === "goatcounter") {
+    componentResources.afterDOMLoaded.push(`
+      const goatcounterScript = document.createElement("script")
+      goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}"
+      goatcounterScript.async = true
+      goatcounterScript.setAttribute("data-goatcounter",
+        "https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count")
+      document.head.appendChild(goatcounterScript)
+    `)
+  } else if (cfg.analytics?.provider === "posthog") {
+    componentResources.afterDOMLoaded.push(`
+      const posthogScript = document.createElement("script")
+      posthogScript.innerHTML= \`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+      posthog.init('${cfg.analytics.apiKey}',{api_host:'${cfg.analytics.host ?? "https://app.posthog.com"}'})\`
+      document.head.appendChild(posthogScript)
+    `)
+  } else if (cfg.analytics?.provider === "tinylytics") {
+    const siteId = cfg.analytics.siteId
+    componentResources.afterDOMLoaded.push(`
+      const tinylyticsScript = document.createElement("script")
+      tinylyticsScript.src = "https://tinylytics.app/embed/${siteId}.js"
+      tinylyticsScript.defer = true
+      document.head.appendChild(tinylyticsScript)
+    `)
+  } else if (cfg.analytics?.provider === "cabin") {
+    componentResources.afterDOMLoaded.push(`
+      const cabinScript = document.createElement("script")
+      cabinScript.src = "${cfg.analytics.host ?? "https://scripts.cabin.dev"}/cabin.js"
+      cabinScript.defer = true
+      cabinScript.async = true
+      document.head.appendChild(cabinScript)
+    `)
   }
 
   if (cfg.enableSPA) {
@@ -136,62 +164,85 @@ function addGlobalPageResources(
       document.dispatchEvent(event)
     `)
   }
-
-  let wsUrl = `ws://localhost:${ctx.argv.wsPort}`
-
-  if (ctx.argv.remoteDevHost) {
-    wsUrl = `wss://${ctx.argv.remoteDevHost}:${ctx.argv.wsPort}`
-  }
-
-  if (reloadScript) {
-    staticResources.js.push({
-      loadTime: "afterDOMReady",
-      contentType: "inline",
-      script: `
-        const socket = new WebSocket('${wsUrl}')
-        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 }
+// This emitter should not update the `resources` parameter. If it does, partial
+// rebuilds may not work as expected.
+export const ComponentResources: QuartzEmitterPlugin = () => {
   return {
     name: "ComponentResources",
     getQuartzComponents() {
       return []
     },
-    async emit(ctx, _content, resources): Promise<FilePath[]> {
+    async getDependencyGraph(_ctx, _content, _resources) {
+      return new DepGraph<FilePath>()
+    },
+    async emit(ctx, _content, _resources): Promise<FilePath[]> {
+      const promises: Promise<FilePath>[] = []
+      const cfg = ctx.cfg.configuration
       // component specific scripts and styles
       const componentResources = getComponentResources(ctx)
+      let googleFontsStyleSheet = ""
+      if (cfg.theme.fontOrigin === "local") {
+        // let the user do it themselves in css
+      } else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) {
+        // when cdnCaching is true, we link to google fonts in Head.tsx
+        let match
+
+        const fontSourceRegex = /url\((https:\/\/fonts.gstatic.com\/s\/[^)]+\.(woff2|ttf))\)/g
+
+        googleFontsStyleSheet = await (
+          await fetch(googleFontHref(ctx.cfg.configuration.theme))
+        ).text()
+
+        while ((match = fontSourceRegex.exec(googleFontsStyleSheet)) !== null) {
+          // match[0] is the `url(path)`, match[1] is the `path`
+          const url = match[1]
+          // the static name of this file.
+          const [filename, ext] = url.split("/").pop()!.split(".")
+
+          googleFontsStyleSheet = googleFontsStyleSheet.replace(
+            url,
+            `https://${cfg.baseUrl}/static/fonts/${filename}.ttf`,
+          )
+
+          promises.push(
+            fetch(url)
+              .then((res) => {
+                if (!res.ok) {
+                  throw new Error(`Failed to fetch font`)
+                }
+                return res.arrayBuffer()
+              })
+              .then((buf) =>
+                write({
+                  ctx,
+                  slug: joinSegments("static", "fonts", filename) as FullSlug,
+                  ext: `.${ext}`,
+                  content: Buffer.from(buf),
+                }),
+              ),
+          )
+        }
+      }
+
       // important that this goes *after* component scripts
       // as the "nav" event gets triggered here and we should make sure
       // that everyone else had the chance to register a listener for it
+      addGlobalPageResources(ctx, componentResources)
 
-      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, ...componentResources.css, styles)
+      const stylesheet = joinStyles(
+        ctx.cfg.configuration.theme,
+        googleFontsStyleSheet,
+        ...componentResources.css,
+        styles,
+      )
       const [prescript, postscript] = await Promise.all([
         joinScripts(componentResources.beforeDOMLoaded),
         joinScripts(componentResources.afterDOMLoaded),
       ])
 
-      const fps = await Promise.all([
+      promises.push(
         write({
           ctx,
           slug: "index" as FullSlug,
@@ -222,8 +273,9 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
           ext: ".js",
           content: postscript,
         }),
-      ])
-      return fps
+      )
+
+      return await Promise.all(promises)
     },
   }
 }

quartz/plugins/emitters/contentIndex.ts

@@ -7,6 +7,7 @@ import { QuartzEmitterPlugin } from "../types"
 import { toHtml } from "hast-util-to-html"
 import { write } from "./helpers"
 import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
 
 export type ContentIndex = Map<FullSlug, ContentDetails>
 export type ContentDetails = {
@@ -92,6 +93,26 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
   opts = { ...defaultOptions, ...opts }
   return {
     name: "ContentIndex",
+    async getDependencyGraph(ctx, content, _resources) {
+      const graph = new DepGraph<FilePath>()
+
+      for (const [_tree, file] of content) {
+        const sourcePath = file.data.filePath!
+
+        graph.addEdge(
+          sourcePath,
+          joinSegments(ctx.argv.output, "static/contentIndex.json") as FilePath,
+        )
+        if (opts?.enableSiteMap) {
+          graph.addEdge(sourcePath, joinSegments(ctx.argv.output, "sitemap.xml") as FilePath)
+        }
+        if (opts?.enableRSS) {
+          graph.addEdge(sourcePath, joinSegments(ctx.argv.output, "index.xml") as FilePath)
+        }
+      }
+
+      return graph
+    },
     async emit(ctx, content, _resources) {
       const cfg = ctx.cfg.configuration
       const emitted: FilePath[] = []

quartz/plugins/emitters/contentPage.tsx

@@ -1,14 +1,55 @@
+import path from "path"
+import { visit } from "unist-util-visit"
+import { Root } from "hast"
+import { VFile } from "vfile"
 import { QuartzEmitterPlugin } from "../types"
 import { QuartzComponentProps } from "../../components/types"
 import HeaderConstructor from "../../components/Header"
 import BodyConstructor from "../../components/Body"
 import { pageResources, renderPage } from "../../components/renderPage"
 import { FullPageLayout } from "../../cfg"
-import { FilePath, pathToRoot } from "../../util/path"
+import { Argv } from "../../util/ctx"
+import { FilePath, isRelativeURL, joinSegments, pathToRoot } from "../../util/path"
 import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { Content } from "../../components"
 import chalk from "chalk"
 import { write } from "./helpers"
+import DepGraph from "../../depgraph"
+
+// get all the dependencies for the markdown file
+// eg. images, scripts, stylesheets, transclusions
+const parseDependencies = (argv: Argv, hast: Root, file: VFile): string[] => {
+  const dependencies: string[] = []
+
+  visit(hast, "element", (elem): void => {
+    let ref: string | null = null
+
+    if (
+      ["script", "img", "audio", "video", "source", "iframe"].includes(elem.tagName) &&
+      elem?.properties?.src
+    ) {
+      ref = elem.properties.src.toString()
+    } else if (["a", "link"].includes(elem.tagName) && elem?.properties?.href) {
+      // transclusions will create a tags with relative hrefs
+      ref = elem.properties.href.toString()
+    }
+
+    // if it is a relative url, its a local file and we need to add
+    // it to the dependency graph. otherwise, ignore
+    if (ref === null || !isRelativeURL(ref)) {
+      return
+    }
+
+    let fp = path.join(file.data.filePath!, path.relative(argv.directory, ref)).replace(/\\/g, "/")
+    // markdown files have the .md extension stripped in hrefs, add it back here
+    if (!fp.split("/").pop()?.includes(".")) {
+      fp += ".md"
+    }
+    dependencies.push(fp)
+  })
+
+  return dependencies
+}
 
 export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
@@ -18,14 +59,40 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
     ...userOpts,
   }
 
-  const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+  const { head: Head, header, beforeBody, pageBody, afterBody, 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]
+      return [
+        Head,
+        Header,
+        Body,
+        ...header,
+        ...beforeBody,
+        pageBody,
+        ...afterBody,
+        ...left,
+        ...right,
+        Footer,
+      ]
+    },
+    async getDependencyGraph(ctx, content, _resources) {
+      const graph = new DepGraph<FilePath>()
+
+      for (const [tree, file] of content) {
+        const sourcePath = file.data.filePath!
+        const slug = file.data.slug!
+        graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath)
+
+        parseDependencies(ctx.argv, tree as Root, file).forEach((dep) => {
+          graph.addEdge(dep as FilePath, sourcePath)
+        })
+      }
+
+      return graph
     },
     async emit(ctx, content, resources): Promise<FilePath[]> {
       const cfg = ctx.cfg.configuration
@@ -41,6 +108,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
 
         const externalResources = pageResources(pathToRoot(slug), resources)
         const componentData: QuartzComponentProps = {
+          ctx,
           fileData: file.data,
           externalResources,
           cfg,
@@ -60,7 +128,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
         fps.push(fp)
       }
 
-      if (!containsIndex) {
+      if (!containsIndex && !ctx.argv.fastRebuild) {
         console.log(
           chalk.yellow(
             `\nWarning: you seem to be missing an \`index.md\` home page file at the root of your \`${ctx.argv.directory}\` folder. This may cause errors when deploying.`,

quartz/plugins/emitters/folderPage.tsx

@@ -3,14 +3,14 @@ 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 { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile"
 import { FullPageLayout } from "../../cfg"
 import path from "path"
 import {
   FilePath,
   FullSlug,
   SimpleSlug,
-  _stripSlashes,
+  stripSlashes,
   joinSegments,
   pathToRoot,
   simplifySlug,
@@ -19,23 +19,55 @@ import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.lay
 import { FolderContent } from "../../components"
 import { write } from "./helpers"
 import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
 
-export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
+interface FolderPageOptions extends FullPageLayout {
+  sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
+}
+
+export const FolderPage: QuartzEmitterPlugin<Partial<FolderPageOptions>> = (userOpts) => {
   const opts: FullPageLayout = {
     ...sharedPageComponents,
     ...defaultListPageLayout,
-    pageBody: FolderContent(),
+    pageBody: FolderContent({ sort: userOpts?.sort }),
     ...userOpts,
   }
 
-  const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+  const { head: Head, header, beforeBody, pageBody, afterBody, 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]
+      return [
+        Head,
+        Header,
+        Body,
+        ...header,
+        ...beforeBody,
+        pageBody,
+        ...afterBody,
+        ...left,
+        ...right,
+        Footer,
+      ]
+    },
+    async getDependencyGraph(_ctx, content, _resources) {
+      // Example graph:
+      // nested/file.md --> nested/index.html
+      // nested/file2.md ------^
+      const graph = new DepGraph<FilePath>()
+
+      content.map(([_tree, vfile]) => {
+        const slug = vfile.data.slug
+        const folderName = path.dirname(slug ?? "") as SimpleSlug
+        if (slug && folderName !== "." && folderName !== "tags") {
+          graph.addEdge(vfile.data.filePath!, joinSegments(folderName, "index.html") as FilePath)
+        }
+      })
+
+      return graph
     },
     async emit(ctx, content, resources): Promise<FilePath[]> {
       const fps: FilePath[] = []
@@ -67,7 +99,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
       )
 
       for (const [tree, file] of content) {
-        const slug = _stripSlashes(simplifySlug(file.data.slug!)) as SimpleSlug
+        const slug = stripSlashes(simplifySlug(file.data.slug!)) as SimpleSlug
         if (folders.has(slug)) {
           folderDescriptions[slug] = [tree, file]
         }
@@ -78,6 +110,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
         const externalResources = pageResources(pathToRoot(slug), resources)
         const [tree, file] = folderDescriptions[folder]
         const componentData: QuartzComponentProps = {
+          ctx,
           fileData: file.data,
           externalResources,
           cfg,

quartz/plugins/emitters/helpers.ts

@@ -7,7 +7,7 @@ type WriteOptions = {
   ctx: BuildCtx
   slug: FullSlug
   ext: `.${string}` | ""
-  content: string
+  content: string | Buffer
 }
 
 export const write = async ({ ctx, slug, ext, content }: WriteOptions): Promise<FilePath> => {

quartz/plugins/emitters/static.ts

@@ -2,12 +2,27 @@ import { FilePath, QUARTZ, joinSegments } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import fs from "fs"
 import { glob } from "../../util/glob"
+import DepGraph from "../../depgraph"
 
 export const Static: QuartzEmitterPlugin = () => ({
   name: "Static",
   getQuartzComponents() {
     return []
   },
+  async getDependencyGraph({ argv, cfg }, _content, _resources) {
+    const graph = new DepGraph<FilePath>()
+
+    const staticPath = joinSegments(QUARTZ, "static")
+    const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)
+    for (const fp of fps) {
+      graph.addEdge(
+        joinSegments("static", fp) as FilePath,
+        joinSegments(argv.output, "static", fp) as FilePath,
+      )
+    }
+
+    return graph
+  },
   async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
     const staticPath = joinSegments(QUARTZ, "static")
     const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)

quartz/plugins/emitters/tagPage.tsx

@@ -3,7 +3,7 @@ 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 { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile"
 import { FullPageLayout } from "../../cfg"
 import {
   FilePath,
@@ -16,23 +16,60 @@ import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.lay
 import { TagContent } from "../../components"
 import { write } from "./helpers"
 import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
 
-export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
+interface TagPageOptions extends FullPageLayout {
+  sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
+}
+
+export const TagPage: QuartzEmitterPlugin<Partial<TagPageOptions>> = (userOpts) => {
   const opts: FullPageLayout = {
     ...sharedPageComponents,
     ...defaultListPageLayout,
-    pageBody: TagContent(),
+    pageBody: TagContent({ sort: userOpts?.sort }),
     ...userOpts,
   }
 
-  const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+  const { head: Head, header, beforeBody, pageBody, afterBody, 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]
+      return [
+        Head,
+        Header,
+        Body,
+        ...header,
+        ...beforeBody,
+        pageBody,
+        ...afterBody,
+        ...left,
+        ...right,
+        Footer,
+      ]
+    },
+    async getDependencyGraph(ctx, content, _resources) {
+      const graph = new DepGraph<FilePath>()
+
+      for (const [_tree, file] of content) {
+        const sourcePath = file.data.filePath!
+        const tags = (file.data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes)
+        // if the file has at least one tag, it is used in the tag index page
+        if (tags.length > 0) {
+          tags.push("index")
+        }
+
+        for (const tag of tags) {
+          graph.addEdge(
+            sourcePath,
+            joinSegments(ctx.argv.output, "tags", tag + ".html") as FilePath,
+          )
+        }
+      }
+
+      return graph
     },
     async emit(ctx, content, resources): Promise<FilePath[]> {
       const fps: FilePath[] = []
@@ -51,7 +88,7 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
           const title =
             tag === "index"
               ? i18n(cfg.locale).pages.tagContent.tagIndex
-              : `${i18n(cfg.locale).pages.tagContent.tag}: #${tag}`
+              : `${i18n(cfg.locale).pages.tagContent.tag}: ${tag}`
           return [
             tag,
             defaultProcessedContent({
@@ -77,6 +114,7 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
         const externalResources = pageResources(pathToRoot(slug), resources)
         const [tree, file] = tagDescriptions[tag]
         const componentData: QuartzComponentProps = {
+          ctx,
           fileData: file.data,
           externalResources,
           cfg,

quartz/plugins/filters/draft.ts

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

quartz/plugins/index.ts

@@ -18,6 +18,23 @@ export function getStaticResourcesFromPlugins(ctx: BuildCtx) {
     }
   }
 
+  // if serving locally, listen for rebuilds and reload the page
+  if (ctx.argv.serve) {
+    const wsUrl = ctx.argv.remoteDevHost
+      ? `wss://${ctx.argv.remoteDevHost}:${ctx.argv.wsPort}`
+      : `ws://localhost:${ctx.argv.wsPort}`
+
+    staticResources.js.push({
+      loadTime: "afterDOMReady",
+      contentType: "inline",
+      script: `
+        const socket = new WebSocket('${wsUrl}')
+        // reload(true) ensures resources like images and scripts are fetched again in firefox
+        socket.addEventListener('message', () => document.location.reload(true))
+      `,
+    })
+  }
+
   return staticResources
 }
 

quartz/plugins/transformers/citations.ts

@@ -0,0 +1,52 @@
+import rehypeCitation from "rehype-citation"
+import { PluggableList } from "unified"
+import { visit } from "unist-util-visit"
+import { QuartzTransformerPlugin } from "../types"
+
+export interface Options {
+  bibliographyFile: string
+  suppressBibliography: boolean
+  linkCitations: boolean
+  csl: string
+}
+
+const defaultOptions: Options = {
+  bibliographyFile: "./bibliography.bib",
+  suppressBibliography: false,
+  linkCitations: false,
+  csl: "apa",
+}
+
+export const Citations: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "Citations",
+    htmlPlugins() {
+      const plugins: PluggableList = []
+
+      // Add rehype-citation to the list of plugins
+      plugins.push([
+        rehypeCitation,
+        {
+          bibliography: opts.bibliographyFile,
+          suppressBibliography: opts.suppressBibliography,
+          linkCitations: opts.linkCitations,
+        },
+      ])
+
+      // Transform the HTML of the citattions; add data-no-popover property to the citation links
+      // using https://github.com/syntax-tree/unist-util-visit as they're just anochor links
+      plugins.push(() => {
+        return (tree, _file) => {
+          visit(tree, "element", (node, index, parent) => {
+            if (node.tagName === "a" && node.properties?.href?.startsWith("#bib")) {
+              node.properties["data-no-popover"] = true
+            }
+          })
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/description.ts

@@ -5,12 +5,19 @@ import { escapeHTML } from "../../util/escape"
 
 export interface Options {
   descriptionLength: number
+  replaceExternalLinks: boolean
 }
 
 const defaultOptions: Options = {
   descriptionLength: 150,
+  replaceExternalLinks: true,
 }
 
+const urlRegex = new RegExp(
+  /(https?:\/\/)?(?<domain>([\da-z\.-]+)\.([a-z\.]{2,6})(:\d+)?)(?<path>[\/\w\.-]*)(\?[\/\w\.=&;-]*)?/,
+  "g",
+)
+
 export const Description: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
@@ -19,22 +26,46 @@ export const Description: QuartzTransformerPlugin<Partial<Options> | undefined>
       return [
         () => {
           return async (tree: HTMLRoot, file) => {
-            const frontMatterDescription = file.data.frontmatter?.description
-            const text = escapeHTML(toString(tree))
+            let frontMatterDescription = file.data.frontmatter?.description
+            let 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++
+            if (opts.replaceExternalLinks) {
+              frontMatterDescription = frontMatterDescription?.replace(
+                urlRegex,
+                "$<domain>" + "$<path>",
+              )
+              text = text.replace(urlRegex, "$<domain>" + "$<path>")
             }
 
-            file.data.description = finalDesc
+            const desc = frontMatterDescription ?? text
+            const sentences = desc.replace(/\s+/g, " ").split(/\.\s/)
+            const finalDesc: string[] = []
+            const len = opts.descriptionLength
+            let sentenceIdx = 0
+            let currentDescriptionLength = 0
+
+            if (sentences[0] !== undefined && sentences[0].length >= len) {
+              const firstSentence = sentences[0].split(" ")
+              while (currentDescriptionLength < len) {
+                const sentence = firstSentence[sentenceIdx]
+                if (!sentence) break
+                finalDesc.push(sentence)
+                currentDescriptionLength += sentence.length
+                sentenceIdx++
+              }
+              finalDesc.push("...")
+            } else {
+              while (currentDescriptionLength < len) {
+                const sentence = sentences[sentenceIdx]
+                if (!sentence) break
+                const currentSentence = sentence.endsWith(".") ? sentence : sentence + "."
+                finalDesc.push(currentSentence)
+                currentDescriptionLength += currentSentence.length
+                sentenceIdx++
+              }
+            }
+
+            file.data.description = finalDesc.join(" ")
             file.data.text = text
           }
         },

quartz/plugins/transformers/frontmatter.ts

@@ -8,15 +8,13 @@ import { QuartzPluginData } from "../vfile"
 import { i18n } from "../../i18n"
 
 export interface Options {
-  delims: string | string[]
+  delimiters: string | [string, string]
   language: "yaml" | "toml"
-  oneLineTagDelim: string
 }
 
 const defaultOptions: Options = {
-  delims: "---",
+  delimiters: "---",
   language: "yaml",
-  oneLineTagDelim: ",",
 }
 
 function coalesceAliases(data: { [key: string]: any }, aliases: string[]) {
@@ -59,9 +57,9 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
               },
             })
 
-            if (data.title) {
+            if (data.title != null && data.title.toString() !== "") {
               data.title = data.title.toString()
-            } else if (data.title === null || data.title === undefined) {
+            } else {
               data.title = file.stem ?? i18n(cfg.configuration.locale).propertyDefaults.title
             }
 
@@ -92,6 +90,7 @@ declare module "vfile" {
         description: string
         publish: boolean
         draft: boolean
+        lang: string
         enableToc: string
         cssclasses: string[]
       }>

quartz/plugins/transformers/gfm.ts

@@ -32,6 +32,7 @@ export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> |
             {
               behavior: "append",
               properties: {
+                role: "anchor",
                 ariaHidden: true,
                 tabIndex: -1,
                 "data-no-popover": true,

quartz/plugins/transformers/index.ts

@@ -1,5 +1,6 @@
 export { FrontMatter } from "./frontmatter"
 export { GitHubFlavoredMarkdown } from "./gfm"
+export { Citations } from "./citations"
 export { CreatedModifiedDate } from "./lastmod"
 export { Latex } from "./latex"
 export { Description } from "./description"

quartz/plugins/transformers/latex.ts

@@ -26,12 +26,12 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
         return {
           css: [
             // base css
-            "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css",
+            "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css",
           ],
           js: [
             {
               // fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
-              src: "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/copy-tex.min.js",
+              src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js",
               loadTime: "afterDOMReady",
               contentType: "external",
             },

quartz/plugins/transformers/links.ts

@@ -4,10 +4,11 @@ import {
   RelativeURL,
   SimpleSlug,
   TransformOptions,
-  _stripSlashes,
+  stripSlashes,
   simplifySlug,
   splitAnchor,
   transformLink,
+  joinSegments,
 } from "../../util/path"
 import path from "path"
 import { visit } from "unist-util-visit"
@@ -92,7 +93,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                 }
                 node.properties.className = classes
 
-                if (opts.openLinksInNewTab) {
+                if (isExternal && opts.openLinksInNewTab) {
                   node.properties.target = "_blank"
                 }
 
@@ -107,7 +108,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
 
                   // url.resolve is considered legacy
                   // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to
-                  const url = new URL(dest, `https://base.com/${curSlug}`)
+                  const url = new URL(dest, "https://base.com/" + stripSlashes(curSlug, true))
                   const canonicalDest = url.pathname
                   let [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
                   if (destCanonical.endsWith("/")) {
@@ -115,7 +116,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                   }
 
                   // need to decodeURIComponent here as WHATWG URL percent-encodes everything
-                  const full = decodeURIComponent(_stripSlashes(destCanonical, true)) as FullSlug
+                  const full = decodeURIComponent(stripSlashes(destCanonical, true)) as FullSlug
                   const simple = simplifySlug(full)
                   outgoing.add(simple)
                   node.properties["data-slug"] = full

quartz/plugins/transformers/ofm.ts

@@ -2,13 +2,15 @@ import { QuartzTransformerPlugin } from "../types"
 import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
 import { Element, Literal, Root as HtmlRoot } from "hast"
 import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
-import { slug as slugAnchor } from "github-slugger"
 import rehypeRaw from "rehype-raw"
 import { SKIP, visit } from "unist-util-visit"
 import path from "path"
+import { splitAnchor } from "../../util/path"
 import { JSResource } from "../../util/resources"
 // @ts-ignore
 import calloutScript from "../../components/scripts/callout.inline.ts"
+// @ts-ignore
+import checkboxScript from "../../components/scripts/checkbox.inline.ts"
 import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
 import { toHast } from "mdast-util-to-hast"
 import { toHtml } from "hast-util-to-html"
@@ -28,6 +30,7 @@ export interface Options {
   enableInHtmlEmbed: boolean
   enableYouTubeEmbed: boolean
   enableVideoEmbed: boolean
+  enableCheckbox: boolean
 }
 
 const defaultOptions: Options = {
@@ -42,6 +45,7 @@ const defaultOptions: Options = {
   enableInHtmlEmbed: false,
   enableYouTubeEmbed: true,
   enableVideoEmbed: true,
+  enableCheckbox: false,
 }
 
 const calloutMapping = {
@@ -93,29 +97,40 @@ function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
 
 export const externalLinkRegex = /^https?:\/\//i
 
-export const arrowRegex = new RegExp(/(-{1,2}>|={1,2}>|<-{1,2}|<={1,2})/, "g")
+export const arrowRegex = new RegExp(/(-{1,2}>|={1,2}>|<-{1,2}|<={1,2})/g)
 
-// !?                -> 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)
+// !?                 -> optional embedding
+// \[\[               -> open brace
+// ([^\[\]\|\#]+)     -> one or more non-special characters ([,],|, or #) (name)
+// (#[^\[\]\|\#]+)?   -> # then one or more non-special characters (heading link)
+// (\\?\|[^\[\]\#]+)? -> optional escape \ then | then one or more non-special characters (alias)
 export const wikilinkRegex = new RegExp(
-  /!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\#]+)?\]\]/,
-  "g",
+  /!?\[\[([^\[\]\|\#\\]+)?(#+[^\[\]\|\#\\]+)?(\\?\|[^\[\]\#]+)?\]\]/g,
 )
-const highlightRegex = new RegExp(/==([^=]+)==/, "g")
-const commentRegex = new RegExp(/%%[\s\S]*?%%/, "g")
+
+// ^\|([^\n])+\|\n(\|) -> matches the header row
+// ( ?:?-{3,}:? ?\|)+  -> matches the header row separator
+// (\|([^\n])+\|\n)+   -> matches the body rows
+export const tableRegex = new RegExp(/^\|([^\n])+\|\n(\|)( ?:?-{3,}:? ?\|)+\n(\|([^\n])+\|\n?)+/gm)
+
+// matches any wikilink, only used for escaping wikilinks inside tables
+export const tableWikilinkRegex = new RegExp(/(!?\[\[[^\]]*?\]\])/g)
+
+const highlightRegex = new RegExp(/==([^=]+)==/g)
+const commentRegex = new RegExp(/%%[\s\S]*?%%/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")
+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
 // #(...)               -> capturing group, tag itself must start with #
 // (?:[-_\p{L}\d\p{Z}])+       -> non-capturing group, non-empty string of (Unicode-aware) alpha-numeric characters and symbols, hyphens and/or underscores
 // (?:\/[-_\p{L}\d\p{Z}]+)*)   -> non-capturing group, matches an arbitrary number of tag strings separated by "/"
-const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\p{Emoji}\d])+(?:\/[-_\p{L}\p{Emoji}\d]+)*)/, "gu")
-const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/, "g")
+const tagRegex = new RegExp(
+  /(?:^| )#((?:[-_\p{L}\p{Emoji}\p{M}\d])+(?:\/[-_\p{L}\p{Emoji}\p{M}\d]+)*)/gu,
+)
+const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/g)
 const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
+const ytPlaylistLinkRegex = /[?&]list=([^#?&]*)/
 const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/)
 const wikilinkImageEmbedRegex = new RegExp(
   /^(?<alt>(?!^\d*x?\d*$).*?)?(\|?\s*?(?<width>\d+)(x(?<height>\d+))?)?$/,
@@ -161,13 +176,27 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
           src = src.toString()
         }
 
+        // replace all wikilinks inside a table first
+        src = src.replace(tableRegex, (value) => {
+          // escape all aliases and headers in wikilinks inside a table
+          return value.replace(tableWikilinkRegex, (_value, raw) => {
+            // const [raw]: (string | undefined)[] = capture
+            let escaped = raw ?? ""
+            escaped = escaped.replace("#", "\\#")
+            // escape pipe characters if they are not already escaped
+            escaped = escaped.replace(/((^|[^\\])(\\\\)*)\|/g, "$1\\|")
+
+            return escaped
+          })
+        })
+
+        // replace all other wikilinks
         src = src.replace(wikilinkRegex, (value, ...capture) => {
           const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture
 
-          const fp = rawFp ?? ""
-          const anchor = rawHeader?.trim().replace(/^#+/, "")
-          const blockRef = Boolean(anchor?.startsWith("^")) ? "^" : ""
-          const displayAnchor = anchor ? `#${blockRef}${slugAnchor(anchor)}` : ""
+          const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
+          const blockRef = Boolean(rawHeader?.match(/^#?\^/)) ? "^" : ""
+          const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
           const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
           const embedDisplay = value.startsWith("!") ? "!" : ""
 
@@ -181,7 +210,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
 
       return src
     },
-    markdownPlugins() {
+    markdownPlugins(_ctx) {
       const plugins: PluggableList = []
 
       // regex replacements
@@ -234,14 +263,14 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   } else if ([".pdf"].includes(ext)) {
                     return {
                       type: "html",
-                      value: `<iframe src="${url}"></iframe>`,
+                      value: `<iframe src="${url}" class="pdf"></iframe>`,
                     }
                   } else {
                     const block = anchor
                     return {
                       type: "html",
                       data: { hProperties: { transclude: true } },
-                      value: `<blockquote class="transclude" data-url="${url}" data-block="${block}"><a href="${
+                      value: `<blockquote class="transclude" data-url="${url}" data-block="${block}" data-embed-alias="${alias}"><a href="${
                         url + anchor
                       }" class="transclude-inner">Transclude of ${url}${block}</a></blockquote>`,
                     }
@@ -319,7 +348,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   children: [
                     {
                       type: "text",
-                      value: `#${tag}`,
+                      value: tag,
                     },
                   ],
                 }
@@ -379,8 +408,8 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 return
               }
 
-              // find first line
-              const firstChild = node.children[0]
+              // find first line and callout content
+              const [firstChild, ...calloutContent] = node.children
               if (firstChild.type !== "paragraph" || firstChild.children[0]?.type !== "text") {
                 return
               }
@@ -392,7 +421,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
 
               const match = firstLine.match(calloutRegex)
               if (match && match.input) {
-                const [calloutDirective, typeString, collapseChar] = match
+                const [calloutDirective, typeString, calloutMetaData, collapseChar] = match
                 const calloutType = canonicalizeCallout(typeString.toLowerCase())
                 const collapse = collapseChar === "+" || collapseChar === "-"
                 const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
@@ -403,7 +432,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   children: [
                     {
                       type: "text",
-                      value: useDefaultTitle ? capitalize(calloutType) : titleContent + " ",
+                      value: useDefaultTitle ? capitalize(typeString) : titleContent + " ",
                     },
                     ...restOfTitle,
                   ],
@@ -439,17 +468,39 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 // replace first line of blockquote with title and rest of the paragraph text
                 node.children.splice(0, 1, ...blockquoteContent)
 
+                const classNames = ["callout", calloutType]
+                if (collapse) {
+                  classNames.push("is-collapsible")
+                }
+                if (defaultState === "collapsed") {
+                  classNames.push("is-collapsed")
+                }
+
                 // add properties to base blockquote
                 node.data = {
                   hProperties: {
                     ...(node.data?.hProperties ?? {}),
-                    className: `callout ${calloutType} ${collapse ? "is-collapsible" : ""} ${
-                      defaultState === "collapsed" ? "is-collapsed" : ""
-                    }`,
+                    className: classNames.join(" "),
                     "data-callout": calloutType,
                     "data-callout-fold": collapse,
+                    "data-callout-metadata": calloutMetaData,
                   },
                 }
+
+                // Add callout-content class to callout body if it has one.
+                if (calloutContent.length > 0) {
+                  const contentData: BlockContent | DefinitionContent = {
+                    data: {
+                      hProperties: {
+                        className: "callout-content",
+                      },
+                      hName: "div",
+                    },
+                    type: "blockquote",
+                    children: [...calloutContent],
+                  }
+                  node.children = [node.children[0], contentData]
+                }
               }
             })
           }
@@ -513,12 +564,35 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                     last.value = last.value.slice(0, -matches[0].length)
                     const block = matches[0].slice(1)
 
-                    if (!Object.keys(file.data.blocks!).includes(block)) {
-                      node.properties = {
-                        ...node.properties,
-                        id: block,
+                    if (last.value === "") {
+                      // this is an inline block ref but the actual block
+                      // is the previous element above it
+                      let idx = (index ?? 1) - 1
+                      while (idx >= 0) {
+                        const element = parent?.children.at(idx)
+                        if (!element) break
+                        if (element.type !== "element") {
+                          idx -= 1
+                        } else {
+                          if (!Object.keys(file.data.blocks!).includes(block)) {
+                            element.properties = {
+                              ...element.properties,
+                              id: block,
+                            }
+                            file.data.blocks![block] = element
+                          }
+                          return
+                        }
+                      }
+                    } else {
+                      // normal paragraph transclude
+                      if (!Object.keys(file.data.blocks!).includes(block)) {
+                        node.properties = {
+                          ...node.properties,
+                          id: block,
+                        }
+                        file.data.blocks![block] = node
                       }
-                      file.data.blocks![block] = node
                     }
                   }
                 }
@@ -537,16 +611,47 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
               if (node.tagName === "img" && typeof node.properties.src === "string") {
                 const match = node.properties.src.match(ytLinkRegex)
                 const videoId = match && match[2].length == 11 ? match[2] : null
+                const playlistId = node.properties.src.match(ytPlaylistLinkRegex)?.[1]
                 if (videoId) {
+                  // YouTube video (with optional playlist)
                   node.tagName = "iframe"
                   node.properties = {
-                    class: "external-embed",
+                    class: "external-embed youtube",
                     allow: "fullscreen",
                     frameborder: 0,
                     width: "600px",
-                    height: "350px",
-                    src: `https://www.youtube.com/embed/${videoId}`,
+                    src: playlistId
+                      ? `https://www.youtube.com/embed/${videoId}?list=${playlistId}`
+                      : `https://www.youtube.com/embed/${videoId}`,
                   }
+                } else if (playlistId) {
+                  // YouTube playlist only.
+                  node.tagName = "iframe"
+                  node.properties = {
+                    class: "external-embed youtube",
+                    allow: "fullscreen",
+                    frameborder: 0,
+                    width: "600px",
+                    src: `https://www.youtube.com/embed/videoseries?list=${playlistId}`,
+                  }
+                }
+              }
+            })
+          }
+        })
+      }
+
+      if (opts.enableCheckbox) {
+        plugins.push(() => {
+          return (tree: HtmlRoot, _file) => {
+            visit(tree, "element", (node) => {
+              if (node.tagName === "input" && node.properties.type === "checkbox") {
+                const isChecked = node.properties?.checked ?? false
+                node.properties = {
+                  type: "checkbox",
+                  disabled: false,
+                  checked: isChecked,
+                  class: "checkbox-toggle",
                 }
               }
             })
@@ -559,6 +664,14 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
     externalResources() {
       const js: JSResource[] = []
 
+      if (opts.enableCheckbox) {
+        js.push({
+          script: checkboxScript,
+          loadTime: "afterDOMReady",
+          contentType: "inline",
+        })
+      }
+
       if (opts.callouts) {
         js.push({
           script: calloutScript,
@@ -570,17 +683,22 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
       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'
-          });
+          let mermaidImport = undefined
           document.addEventListener('nav', async () => {
-            await mermaid.run({
-              querySelector: '.mermaid'
-            })
+            if (document.querySelector("code.mermaid")) {
+              mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs')
+              const mermaid = mermaidImport.default
+              const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
+              mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: 'loose',
+                theme: darkMode ? 'dark' : 'default'
+              })
+
+              await mermaid.run({
+                querySelector: '.mermaid'
+              })
+            }
           });
           `,
           loadTime: "afterDOMReady",
@@ -599,4 +717,4 @@ declare module "vfile" {
     blocks: Record<string, Element>
     htmlAst: HtmlRoot
   }
-}
+}

quartz/plugins/transformers/syntax.ts

@@ -1,20 +1,33 @@
 import { QuartzTransformerPlugin } from "../types"
-import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code"
+import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code"
 
-export const SyntaxHighlighting: QuartzTransformerPlugin = () => ({
-  name: "SyntaxHighlighting",
-  htmlPlugins() {
-    return [
-      [
-        rehypePrettyCode,
-        {
-          keepBackground: false,
-          theme: {
-            dark: "github-dark",
-            light: "github-light",
-          },
-        } satisfies Partial<CodeOptions>,
-      ],
-    ]
+interface Theme extends Record<string, CodeTheme> {
+  light: CodeTheme
+  dark: CodeTheme
+}
+
+interface Options {
+  theme?: Theme
+  keepBackground?: boolean
+}
+
+const defaultOptions: Options = {
+  theme: {
+    light: "github-light",
+    dark: "github-dark",
   },
-})
+  keepBackground: false,
+}
+
+export const SyntaxHighlighting: QuartzTransformerPlugin<Options> = (
+  userOpts?: Partial<Options>,
+) => {
+  const opts: Partial<CodeOptions> = { ...defaultOptions, ...userOpts }
+
+  return {
+    name: "SyntaxHighlighting",
+    htmlPlugins() {
+      return [[rehypePrettyCode, opts]]
+    },
+  }
+}

quartz/plugins/transformers/toc.ts

@@ -3,11 +3,10 @@ import { Root } from "mdast"
 import { visit } from "unist-util-visit"
 import { toString } from "mdast-util-to-string"
 import Slugger from "github-slugger"
-import { wikilinkRegex } from "./ofm"
 
 export interface Options {
   maxDepth: 1 | 2 | 3 | 4 | 5 | 6
-  minEntries: 1
+  minEntries: number
   showByDefault: boolean
   collapseByDefault: boolean
 }
@@ -25,7 +24,6 @@ interface TocEntry {
   slug: string // this is just the anchor (#some-slug), not the canonical slug
 }
 
-const regexMdLinks = new RegExp(/\[([^\[]+)\](\(.*\))/, "g")
 const slugAnchor = new Slugger()
 export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefined> = (
   userOpts,
@@ -44,16 +42,7 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
               let highestDepth: number = opts.maxDepth
               visit(tree, "heading", (node) => {
                 if (node.depth <= opts.maxDepth) {
-                  let text = toString(node)
-
-                  // strip link formatting from toc entries
-                  text = text.replace(wikilinkRegex, (_, rawFp, __, rawAlias) => {
-                    const fp = rawFp?.trim() ?? ""
-                    const alias = rawAlias?.slice(1).trim()
-                    return alias ?? fp
-                  })
-                  text = text.replace(regexMdLinks, "$1")
-
+                  const text = toString(node)
                   highestDepth = Math.min(highestDepth, node.depth)
                   toc.push({
                     depth: node.depth,
@@ -63,7 +52,7 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
                 }
               })
 
-              if (toc.length > opts.minEntries) {
+              if (toc.length > 0 && toc.length > opts.minEntries) {
                 file.data.toc = toc.map((entry) => ({
                   ...entry,
                   depth: entry.depth - highestDepth,

quartz/plugins/types.ts

@@ -4,6 +4,7 @@ import { ProcessedContent } from "./vfile"
 import { QuartzComponent } from "../components/types"
 import { FilePath } from "../util/path"
 import { BuildCtx } from "../util/ctx"
+import DepGraph from "../depgraph"
 
 export interface PluginTypes {
   transformers: QuartzTransformerPluginInstance[]
@@ -38,4 +39,9 @@ export type QuartzEmitterPluginInstance = {
   name: string
   emit(ctx: BuildCtx, content: ProcessedContent[], resources: StaticResources): Promise<FilePath[]>
   getQuartzComponents(ctx: BuildCtx): QuartzComponent[]
+  getDependencyGraph?(
+    ctx: BuildCtx,
+    content: ProcessedContent[],
+    resources: StaticResources,
+  ): Promise<DepGraph<FilePath>>
 }

quartz/styles/base.scss

@@ -1,6 +1,7 @@
+@use "./variables.scss" as *;
 @use "./syntax.scss";
 @use "./callouts.scss";
-@use "./variables.scss" as *;
+
 html {
   scroll-behavior: smooth;
   text-size-adjust: none;
@@ -19,11 +20,10 @@ section {
 }
 
 .text-highlight {
-  background-color: #fff23688;
+  background-color: var(--textHighlight);
   padding: 0 0.1rem;
   border-radius: 5px;
 }
-
 ::selection {
   background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
   color: var(--darkgray);
@@ -42,18 +42,34 @@ ul,
 .math {
   color: var(--darkgray);
   fill: var(--darkgray);
-  overflow-wrap: anywhere;
   hyphens: auto;
 }
 
+p,
+ul,
+text,
+a,
+li,
+ol,
+ul,
+.katex,
+.math {
+  overflow-wrap: anywhere;
+  /* tr and td removed from list of selectors for overflow-wrap, allowing them to use default 'normal' property value */
+}
+
 .math {
   &.math-display {
     text-align: center;
   }
 }
 
+strong {
+  font-weight: $semiBoldWeight;
+}
+
 a {
-  font-weight: $boldWeight;
+  font-weight: $semiBoldWeight;
   text-decoration: none;
   transition: color 0.2s ease;
   color: var(--secondary);
@@ -74,6 +90,11 @@ a {
       border-radius: 0;
       padding: 0;
     }
+    &.tag-link {
+      &::before {
+        content: "#";
+      }
+    }
   }
 
   &.external .external-icon {
@@ -180,11 +201,19 @@ a {
     }
   }
 
-  & .page-header {
+  & .page-header,
+  & .page-footer {
     width: $pageWidth;
-    margin: $topSpacing auto 0 auto;
+    margin-top: 1rem;
+
     @media all and (max-width: $fullPageWidth) {
       width: initial;
+    }
+  }
+
+  & .page-header {
+    margin: $topSpacing auto 0 auto;
+    @media all and (max-width: $fullPageWidth) {
       margin-top: 2rem;
     }
   }
@@ -258,11 +287,9 @@ thead {
   font-weight: revert;
   margin-bottom: 0;
 
-  article > & > a {
+  article > & > a[role="anchor"] {
     color: var(--dark);
-    &.internal {
-      background-color: transparent;
-    }
+    background-color: transparent;
   }
 }
 
@@ -473,6 +500,10 @@ video {
   flex: 1 1 auto;
 }
 
+div:has(> .overflow) {
+  position: relative;
+}
+
 ul.overflow,
 ol.overflow {
   max-height: 400;
@@ -505,3 +536,16 @@ ol.overflow {
     padding-left: 1rem;
   }
 }
+
+.katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.external-embed.youtube,
+iframe.pdf {
+  aspect-ratio: 16 / 9;
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+}

quartz/styles/callouts.scss

@@ -10,7 +10,7 @@
   transition: max-height 0.3s ease;
   box-sizing: border-box;
 
-  & > *:nth-child(2) {
+  & > .callout-content > :first-child {
     margin-top: 0;
   }
 
@@ -157,6 +157,6 @@
   }
 
   .callout-title-inner {
-    font-weight: $boldWeight;
+    font-weight: $semiBoldWeight;
   }
 }

quartz/styles/variables.scss

@@ -5,4 +5,5 @@ $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
 $boldWeight: 700;
+$semiBoldWeight: 600;
 $normalWeight: 400;

quartz/util/ctx.ts

@@ -6,6 +6,7 @@ export interface Argv {
   verbose: boolean
   output: string
   serve: boolean
+  fastRebuild: boolean
   port: number
   wsPort: number
   remoteDevHost?: string

quartz/util/path.ts

@@ -23,22 +23,22 @@ 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)
+  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.length > 1 && s.startsWith("/")))
-  const validEnding = !(s.endsWith("/index") || s === "index")
-  return validStart && !_containsForbiddenCharacters(s) && validEnding && !_hasFileExtension(s)
+  const validEnding = !endsWith(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")
+  const validEnding = !endsWith(s, "index")
   return validStart && validEnding && ![".md", ".html"].includes(_getFileExtension(s) ?? "")
 }
 
@@ -63,7 +63,7 @@ function sluggify(s: string): string {
 }
 
 export function slugifyFilePath(fp: FilePath, excludeExt?: boolean): FullSlug {
-  fp = _stripSlashes(fp) as FilePath
+  fp = stripSlashes(fp) as FilePath
   let ext = _getFileExtension(fp)
   const withoutFileExt = fp.replace(new RegExp(ext + "$"), "")
   if (excludeExt || [".md", ".html", undefined].includes(ext)) {
@@ -73,7 +73,7 @@ export function slugifyFilePath(fp: FilePath, excludeExt?: boolean): FullSlug {
   let slug = sluggify(withoutFileExt)
 
   // treat _index as index
-  if (_endsWith(slug, "_index")) {
+  if (endsWith(slug, "_index")) {
     slug = slug.replace(/_index$/, "index")
   }
 
@@ -81,21 +81,21 @@ export function slugifyFilePath(fp: FilePath, excludeExt?: boolean): FullSlug {
 }
 
 export function simplifySlug(fp: FullSlug): SimpleSlug {
-  const res = _stripSlashes(_trimSuffix(fp, "index"), true)
+  const res = stripSlashes(trimSuffix(fp, "index"), true)
   return (res.length === 0 ? "/" : res) as SimpleSlug
 }
 
 export function transformInternalLink(link: string): RelativeURL {
   let [fplike, anchor] = splitAnchor(decodeURI(link))
 
-  const folderPath = _isFolderPath(fplike)
+  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("/")
+  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 joined = joinSegments(stripSlashes(prefix), stripSlashes(simpleSlug))
   const trail = folderPath ? "/" : ""
   const res = (_addRelativeToStart(joined) + trail + anchor) as RelativeURL
   return res
@@ -168,6 +168,9 @@ export function resolveRelative(current: FullSlug, target: FullSlug | SimpleSlug
 
 export function splitAnchor(link: string): [string, string] {
   let [fp, anchor] = link.split("#", 2)
+  if (fp.endsWith(".pdf")) {
+    return [fp, anchor === undefined ? "" : `#${anchor}`]
+  }
   anchor = anchor === undefined ? "" : "#" + slugAnchor(anchor)
   return [fp, anchor]
 }
@@ -206,8 +209,8 @@ export function transformLink(src: FullSlug, target: string, opts: TransformOpti
   if (opts.strategy === "relative") {
     return targetSlug as RelativeURL
   } else {
-    const folderTail = _isFolderPath(targetSlug) ? "/" : ""
-    const canonicalSlug = _stripSlashes(targetSlug.slice(".".length))
+    const folderTail = isFolderPath(targetSlug) ? "/" : ""
+    const canonicalSlug = stripSlashes(targetSlug.slice(".".length))
     let [targetCanonical, targetAnchor] = splitAnchor(canonicalSlug)
 
     if (opts.strategy === "shortest") {
@@ -230,28 +233,29 @@ export function transformLink(src: FullSlug, target: string, opts: TransformOpti
   }
 }
 
-function _isFolderPath(fplike: string): boolean {
+// path helpers
+function isFolderPath(fplike: string): boolean {
   return (
     fplike.endsWith("/") ||
-    _endsWith(fplike, "index") ||
-    _endsWith(fplike, "index.md") ||
-    _endsWith(fplike, "index.html")
+    endsWith(fplike, "index") ||
+    endsWith(fplike, "index.md") ||
+    endsWith(fplike, "index.html")
   )
 }
 
-function _endsWith(s: string, suffix: string): boolean {
+export function endsWith(s: string, suffix: string): boolean {
   return s === suffix || s.endsWith("/" + suffix)
 }
 
-function _trimSuffix(s: string, suffix: string): string {
-  if (_endsWith(s, 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 containsForbiddenCharacters(s: string): boolean {
+  return s.includes(" ") || s.includes("#") || s.includes("?") || s.includes("&")
 }
 
 function _hasFileExtension(s: string): boolean {
@@ -262,11 +266,11 @@ function _getFileExtension(s: string): string | undefined {
   return s.match(/\.[A-Za-z0-9]+$/)?.[0]
 }
 
-function _isRelativeSegment(s: string): boolean {
+function isRelativeSegment(s: string): boolean {
   return /^\.{0,2}$/.test(s)
 }
 
-export function _stripSlashes(s: string, onlyStripPrefix?: boolean): string {
+export function stripSlashes(s: string, onlyStripPrefix?: boolean): string {
   if (s.startsWith("/")) {
     s = s.substring(1)
   }

quartz/util/theme.ts

@@ -7,6 +7,12 @@ export interface ColorScheme {
   secondary: string
   tertiary: string
   highlight: string
+  textHighlight: string
+}
+
+interface Colors {
+  lightMode: ColorScheme
+  darkMode: ColorScheme
 }
 
 export interface Theme {
@@ -15,12 +21,13 @@ export interface Theme {
     body: string
     code: string
   }
-  colors: {
-    lightMode: ColorScheme
-    darkMode: ColorScheme
-  }
+  cdnCaching: boolean
+  colors: Colors
+  fontOrigin: "googleFonts" | "local"
 }
 
+export type ThemeKey = keyof Colors
+
 const DEFAULT_SANS_SERIF =
   '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
 const DEFAULT_MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
@@ -43,6 +50,7 @@ ${stylesheet.join("\n\n")}
   --secondary: ${theme.colors.lightMode.secondary};
   --tertiary: ${theme.colors.lightMode.tertiary};
   --highlight: ${theme.colors.lightMode.highlight};
+  --textHighlight: ${theme.colors.lightMode.textHighlight};
 
   --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
   --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
@@ -58,6 +66,7 @@ ${stylesheet.join("\n\n")}
   --secondary: ${theme.colors.darkMode.secondary};
   --tertiary: ${theme.colors.darkMode.tertiary};
   --highlight: ${theme.colors.darkMode.highlight};
+  --textHighlight: ${theme.colors.darkMode.textHighlight};
 }
 `
 }