pkg: bump version to 4.1.3

2023-12-18 09:49:55 -08:00
53 changed files with 314 additions and 621 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -20,19 +20,12 @@ Steps to reproduce the behavior:
 **Expected behavior**
 A clear and concise description of what you expected to happen.

-**Screenshots and Source**
+**Screenshots**
 If applicable, add screenshots to help explain your problem.

-You can help speed up fixing the problem by either
-
-1. providing a simple reproduction
-2. linking to your Quartz repository where the problem can be observed
-
 **Desktop (please complete the following information):**

- Quartz Version: [e.g. v4.1.2]
- `node` Version: [e.g. v18.16]
- `npm` version: [e.g. v10.1.0]
+- Device: [e.g. iPhone6]
 - OS: [e.g. iOS]
 - Browser [e.g. chrome, safari]

--- a/README.md
+++ b/README.md
@@ -5,6 +5,8 @@
 Quartz is a set of tools that helps you publish your [digital garden](https://jzhao.xyz/posts/networked-thought) and notes as a website for free.
 Quartz v4 features a from-the-ground rewrite focusing on end-user extensibility and ease-of-use.

+**If you are looking for Quartz v3, you can find it on the [`hugo` branch](https://github.com/jackyzha0/quartz/tree/hugo).**
+
 🔗 Read the documentation and get started: https://quartz.jzhao.xyz/

 [Join the Discord Community](https://discord.gg/cRFFHYye7t)
--- a/docs/advanced/making
+++ b/docs/advanced/making
@@ -216,19 +216,22 @@ export type QuartzEmitterPlugin<Options extends OptionType = undefined> = (

 export type QuartzEmitterPluginInstance = {
  name: string
-  emit(ctx: BuildCtx, content: ProcessedContent[], resources: StaticResources): Promise<FilePath[]>
+  emit(
+    ctx: BuildCtx,
+    content: ProcessedContent[],
+    resources: StaticResources,
+    emitCallback: EmitCallback,
+  ): Promise<FilePath[]>
  getQuartzComponents(ctx: BuildCtx): QuartzComponent[]
 }
 ```

-An emitter plugin must define a `name` field, an `emit` function, and a `getQuartzComponents` function. `emit` is responsible for looking at all the parsed and filtered content and then appropriately creating files and returning a list of paths to files the plugin created.
+An emitter plugin must define a `name` field an `emit` function and a `getQuartzComponents` function. `emit` is responsible for looking at all the parsed and filtered content and then appropriately creating files and returning a list of paths to files the plugin created.

-Creating new files can be done via regular Node [fs module](https://nodejs.org/api/fs.html) (i.e. `fs.cp` or `fs.writeFile`) or via the `write` function in `quartz/plugins/emitters/helpers.ts` if you are creating files that contain text. `write` has the following signature:
+Creating new files can be done via regular Node [fs module](https://nodejs.org/api/fs.html) (i.e. `fs.cp` or `fs.writeFile`) or via the `emitCallback` if you are creating files that contain text. The `emitCallback` function is the 4th argument of the emit function. Its interface looks something like this:

 ```ts
-export type WriteOptions = (data: {
-  // the build context
-  ctx: BuildCtx
+export type EmitCallback = (data: {
  // the name of the file to emit (not including the file extension)
  slug: ServerSlug
  // the file extension
--- a/docs/authoring
+++ b/docs/authoring
@@ -2,7 +2,7 @@
 title: Authoring Content
 ---

-All of the content in your Quartz should go in the `/content` folder. The content for the home page of your Quartz lives in `content/index.md`. If you've [[index#🪴 Get Started|setup Quartz]] already, this folder should already be initialized. Any Markdown in this folder will get processed by Quartz.
+All of the content in your Quartz should go in the `/content` folder. The content for the home page of your Quartz lives in `content/index.md`. If you've [[index#🪴 Get Started|setup Quartz]] already, this folder should already be initailized. Any Markdown in this folder will get processed by Quartz.

 It is recommended that you use [Obsidian](https://obsidian.md/) as a way to edit and maintain your Quartz. It comes with a nice editor and graphical interface to preview, edit, and link your local files and attachments.

--- a/docs/features/Obsidian
+++ b/docs/features/Obsidian
@@ -25,9 +25,7 @@ Finally, Quartz also provides `Plugin.CrawlLinks` which allows you to customize
    - `callouts`: whether to enable [[callouts]]. Defaults to `true`
    - `mermaid`: whether to enable [[Mermaid diagrams]]. Defaults to `true`
    - `parseTags`: whether to try and parse tags in the content body. Defaults to `true`
-    - `parseArrows`: whether to try and parse arrows in the content body. Defaults to `true`.
    - `enableInHtmlEmbed`: whether to try and parse Obsidian flavoured markdown in raw HTML. Defaults to `false`
-    - `enableYouTubeEmbed`: whether to enable embedded YouTube videos using external image Markdown syntax. Defaults to `false`
 - Link resolution behaviour:
  - Disabling: remove all instances of `Plugin.CrawlLinks()` from `quartz.config.ts`
  - Changing link resolution preference: set `markdownLinkResolution` to one of `absolute`, `relative` or `shortest`
--- a/docs/features/breadcrumbs.md
+++ b/docs/features/breadcrumbs.md
@@ -20,7 +20,7 @@ Component.Breadcrumbs({
  rootName: "Home", // name of first/root element
  resolveFrontmatterTitle: true, // whether to resolve folder names through frontmatter titles
  hideOnRoot: true, // whether to hide breadcrumbs on root `index.md` page
-  showCurrentPage: true, // whether to display the current page in the breadcrumbs
+  showCurrentPage: true, // wether to display the current page in the breadcrumbs
 })
 ```

--- a/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -26,7 +26,7 @@ Component.Explorer({
  title: "Explorer", // title of the explorer component
  folderClickBehavior: "collapse", // what happens when you click a folder ("link" to navigate to folder page on click or "collapse" to collapse folder on click)
  folderDefaultState: "collapsed", // default state of folders ("collapsed" or "open")
-  useSavedState: true, // whether to use local storage to save "state" (which folders are opened) of explorer
+  useSavedState: true, // wether to use local storage to save "state" (which folders are opened) of explorer
  // Sort order: folders first, then files. Sort folders and files alphabetically
  sortFn: (a, b) => {
    ... // default implementation shown later
@@ -179,34 +179,6 @@ Component.Explorer({

 ## Advanced examples

-> [!tip]
-> When writing more complicated functions, the `layout` file can start to look very cramped.
-> You can fix this by defining your functions in another file.
->
-> ```ts title="functions.ts"
-> import { Options } from "./quartz/components/ExplorerNode"
-> export const mapFn: Options["mapFn"] = (node) => {
->   // implement your function here
-> }
-> export const filterFn: Options["filterFn"] = (node) => {
->   // implement your function here
-> }
-> export const sortFn: Options["sortFn"] = (a, b) => {
->   // implement your function here
-> }
-> ```
->
-> You can then import them like this:
->
-> ```ts title="quartz.layout.ts"
-> import { mapFn, filterFn, sortFn } from "./functions.ts"
-> Component.Explorer({
->   mapFn: mapFn,
->   filterFn: filterFn,
->   sortFn: sortFn,
-> })
-> ```
-
 ### Add emoji prefix

 To add emoji prefixes (📁 for folders, 📄 for files), you could use a map function like this:
@@ -244,63 +216,30 @@ Notice how we customized the `order` array here. This is done because the defaul

 To fix this, we just changed around the order and apply the `sort` function before changing the display names in the `map` function.

-### Use `sort` with pre-defined sort order
-
-Here's another example where a map containing file/folder names (as slugs) is used to define the sort order of the explorer in quartz. All files/folders that aren't listed inside of `nameOrderMap` will appear at the top of that folders hierarchy level.
-
-It's also worth mentioning, that the smaller the number set in `nameOrderMap`, the higher up the entry will be in the explorer. Incrementing every folder/file by 100, makes ordering files in their folders a lot easier. Lastly, this example still allows you to use a `mapFn` or frontmatter titles to change display names, as it uses slugs for `nameOrderMap` (which is unaffected by display name changes).
-
-```ts title="quartz.layout.ts"
-Component.Explorer({
-  sortFn: (a, b) => {
-    const nameOrderMap: Record<string, number> = {
-      "poetry-folder": 100,
-      "essay-folder": 200,
-      "research-paper-file": 201,
-      "dinosaur-fossils-file": 300,
-      "other-folder": 400,
-    }
-
-    let orderA = 0
-    let orderB = 0
-
-    if (a.file && a.file.slug) {
-      orderA = nameOrderMap[a.file.slug] || 0
-    } else if (a.name) {
-      orderA = nameOrderMap[a.name] || 0
-    }
-
-    if (b.file && b.file.slug) {
-      orderB = nameOrderMap[b.file.slug] || 0
-    } else if (b.name) {
-      orderB = nameOrderMap[b.name] || 0
-    }
-
-    return orderA - orderB
-  },
-})
-```
-
-For reference, this is how the quartz explorer window would look like with that example:
-
-```
-📖 Poetry Folder
-📑 Essay Folder
-    ⚗️ Research Paper File
-🦴 Dinosaur Fossils File
-🔮 Other Folder
-```
-
-And this is how the file structure would look like:
-
-```
-index.md
-poetry-folder
-    index.md
-essay-folder
-    index.md
-    research-paper-file.md
-dinosaur-fossils-file.md
-other-folder
-    index.md
-```
+> [!tip]
+> When writing more complicated functions, the `layout` file can start to look very cramped.
+> You can fix this by defining your functions in another file.
+>
+> ```ts title="functions.ts"
+> import { Options } from "./quartz/components/ExplorerNode"
+> export const mapFn: Options["mapFn"] = (node) => {
+>   // implement your function here
+> }
+> export const filterFn: Options["filterFn"] = (node) => {
+>   // implement your function here
+> }
+> export const sortFn: Options["sortFn"] = (a, b) => {
+>   // implement your function here
+> }
+> ```
+>
+> You can then import them like this:
+>
+> ```ts title="quartz.layout.ts"
+> import { mapFn, filterFn, sortFn } from "./functions.ts"
+> Component.Explorer({
+>   mapFn: mapFn,
+>   filterFn: filterFn,
+>   sortFn: sortFn,
+> })
+> ```
--- a/docs/hosting.md
+++ b/docs/hosting.md
@@ -225,6 +225,6 @@ pages:
      - public
 ```

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

 By default, the page is private and only visible when logged in to a GitLab account with access to the repository but can be opened in the settings under `Deploy` -> `Pages`.
--- a/docs/index.md
+++ b/docs/index.md
@@ -25,6 +25,9 @@ This will guide you through initializing your Quartz with content. Once you've d
 4. [[build|Build and preview]] Quartz
 5. [[hosting|Host]] Quartz online

+> [!info]
+> Coming from Quartz 3? See the [[migrating from Quartz 3|migration guide]] for the differences between Quartz 3 and Quartz 4 and how to migrate.
+
 ## 🔧 Features

 - [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], and [many more](./features) right out of the box
--- a/docs/showcase.md
+++ b/docs/showcase.md
@@ -21,8 +21,5 @@ Want to see what Quartz can do? Here are some cool community gardens:
 - [Pedro MC Fernandes's Topo da Mente](https://www.pmcf.xyz/topo-da-mente/)
 - [Mau Camargo's Notkesto](https://notes.camargomau.com/)
 - [Caicai's Novels](https://imoko.cc/blog/caicai/)
- [🌊 Collapsed Wave](https://collapsedwave.com/)
- [Aaron Pham's Garden](https://aarnphm.xyz/)
- [Sideny's 3D Artist's Handbook](https://sidney-eliot.github.io/3d-artists-handbook/)

 If you want to see your own on here, submit a [Pull Request adding yourself to this file](https://github.com/jackyzha0/quartz/blob/v4/docs/showcase.md)!
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@jackyzha0/quartz",
-  "version": "4.1.5",
+  "version": "4.1.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@jackyzha0/quartz",
-      "version": "4.1.5",
+      "version": "4.1.2",
      "license": "MIT",
      "dependencies": {
        "@clack/prompts": "^0.7.0",
@@ -32,6 +32,7 @@
        "mdast-util-to-hast": "^13.0.2",
        "mdast-util-to-string": "^4.0.0",
        "micromorph": "^0.4.5",
+        "plausible-tracker": "^0.3.8",
        "preact": "^10.19.3",
        "preact-render-to-string": "^6.3.1",
        "pretty-bytes": "^6.1.1",
@@ -40,7 +41,7 @@
        "rehype-autolink-headings": "^7.1.0",
        "rehype-katex": "^7.0.0",
        "rehype-mathjax": "^5.0.0",
-        "rehype-pretty-code": "^0.12.3",
+        "rehype-pretty-code": "^0.12.1",
        "rehype-raw": "^7.0.0",
        "rehype-slug": "^6.0.0",
        "remark": "^15.0.1",
@@ -51,10 +52,9 @@
        "remark-parse": "^11.0.0",
        "remark-rehype": "^11.0.0",
        "remark-smartypants": "^2.0.0",
-        "rfdc": "^1.3.0",
        "rimraf": "^5.0.5",
        "serve-handler": "^6.1.5",
-        "shikiji": "^0.9.9",
+        "shikiji": "^0.8.7",
        "source-map-support": "^0.5.21",
        "to-vfile": "^8.0.0",
        "toml": "^3.0.0",
@@ -4450,6 +4450,14 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/plausible-tracker": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/plausible-tracker/-/plausible-tracker-0.3.8.tgz",
+      "integrity": "sha512-lmOWYQ7s9KOUJ1R+YTOR3HrjdbxIS2Z4de0P/Jx2dQPteznJl2eX3tXxKClpvbfyGP59B5bbhW8ftN59HbbFSg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/preact": {
      "version": "10.19.3",
      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
@@ -4705,9 +4713,9 @@
      }
    },
    "node_modules/rehype-pretty-code": {
-      "version": "0.12.3",
-      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.3.tgz",
-      "integrity": "sha512-6NbIit8A3hLrkKBEbNs862jVnTLeIOM2AmM0VZ/MtyHb+OuNMeCa6UZSx6UG4zrobm5tY9efTwhih1exsGYsiw==",
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.1.tgz",
+      "integrity": "sha512-QeGvAPTc31KwP52wBjXqdXXfBAhEs6wETNlOcZRkaPKZZo6Alsz0U6yY05cCKQK53xYNeDCClVYDCyVMl3SP1Q==",
      "dependencies": {
        "@types/hast": "^3.0.3",
        "hast-util-to-string": "^3.0.0",
@@ -4720,7 +4728,7 @@
        "node": ">=18"
      },
      "peerDependencies": {
-        "shikiji": "^0.7.0 || ^0.8.0 || ^0.9.0"
+        "shikiji": "^0.7.0 || ^0.8.0"
      }
    },
    "node_modules/rehype-raw": {
@@ -5153,11 +5161,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/rfdc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
-      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
-    },
    "node_modules/rimraf": {
      "version": "5.0.5",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz",
@@ -5311,18 +5314,13 @@
      }
    },
    "node_modules/shikiji": {
-      "version": "0.9.9",
-      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.9.9.tgz",
-      "integrity": "sha512-/S3unr/0mZTstNOuAmNDEufeimtqeQb8lXvPMLsYfDvqyfmG6334bO2xmDzD0kfxH2y8gnFgSWAJpdEzksmYXg==",
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.8.7.tgz",
+      "integrity": "sha512-j5usxwI0yHkDTHOuhuSJl9+wT5CNYeYO82dJMSJBlJ/NYT5SIebGcPoL6y9QOyH15wGrJC4LOP2nz5k8mUDGRQ==",
      "dependencies": {
-        "shikiji-core": "0.9.9"
+        "hast-util-to-html": "^9.0.0"
      }
    },
-    "node_modules/shikiji-core": {
-      "version": "0.9.9",
-      "resolved": "https://registry.npmjs.org/shikiji-core/-/shikiji-core-0.9.9.tgz",
-      "integrity": "sha512-qu5Qq7Co6JIMY312J9Ek6WYjXieeyJT/fIqmkcjF4MdnMNlUnhSqPo8/42g5UdPgdyTCwijS7Nhg8DfLSLodkg=="
-    },
    "node_modules/signal-exit": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "@jackyzha0/quartz",
  "description": "🌱 publish your digital garden and notes as a website",
  "private": true,
-  "version": "4.1.5",
+  "version": "4.1.3",
  "type": "module",
  "author": "jackyzha0 <j.zhao2k19@gmail.com>",
  "license": "MIT",
@@ -57,6 +57,7 @@
    "mdast-util-to-hast": "^13.0.2",
    "mdast-util-to-string": "^4.0.0",
    "micromorph": "^0.4.5",
+    "plausible-tracker": "^0.3.8",
    "preact": "^10.19.3",
    "preact-render-to-string": "^6.3.1",
    "pretty-bytes": "^6.1.1",
@@ -65,7 +66,7 @@
    "rehype-autolink-headings": "^7.1.0",
    "rehype-katex": "^7.0.0",
    "rehype-mathjax": "^5.0.0",
-    "rehype-pretty-code": "^0.12.3",
+    "rehype-pretty-code": "^0.12.1",
    "rehype-raw": "^7.0.0",
    "rehype-slug": "^6.0.0",
    "remark": "^15.0.1",
@@ -76,10 +77,9 @@
    "remark-parse": "^11.0.0",
    "remark-rehype": "^11.0.0",
    "remark-smartypants": "^2.0.0",
-    "rfdc": "^1.3.0",
    "rimraf": "^5.0.5",
    "serve-handler": "^6.1.5",
-    "shikiji": "^0.9.9",
+    "shikiji": "^0.8.7",
    "source-map-support": "^0.5.21",
    "to-vfile": "^8.0.0",
    "toml": "^3.0.0",
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -47,15 +47,13 @@ const config: QuartzConfig = {
      Plugin.FrontMatter(),
      Plugin.TableOfContents(),
      Plugin.CreatedModifiedDate({
-        // you can add 'git' here for last modified from Git
-        // if you do rely on git for dates, ensure defaultDateType is 'modified'
-        priority: ["frontmatter", "filesystem"],
+        priority: ["frontmatter", "filesystem"], // you can add 'git' here for last modified from Git but this makes the build slower
      }),
-      Plugin.Latex({ renderEngine: "katex" }),
      Plugin.SyntaxHighlighting(),
      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
      Plugin.GitHubFlavoredMarkdown(),
      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
+      Plugin.Latex({ renderEngine: "katex" }),
      Plugin.Description(),
    ],
    filters: [Plugin.RemoveDrafts()],
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -37,13 +37,12 @@ export const defaultContentPageLayout: PageLayout = {

 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
-  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
+  beforeBody: [Component.ArticleTitle()],
  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Search(),
    Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
  ],
  right: [],
 }
--- a/quartz/build.ts
+++ b/quartz/build.ts
@@ -148,11 +148,8 @@ async function startServing(
      await rimraf(argv.output)
      await emitContent(ctx, filteredContent)
      console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
-    } catch (err) {
+    } catch {
      console.log(chalk.yellow(`Rebuild failed. Waiting on a change to fix the error...`))
-      if (argv.verbose) {
-        console.log(chalk.red(err))
-      }
    }

    release()
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@@ -7,7 +7,6 @@ export type Analytics =
  | null
  | {
      provider: "plausible"
-      host?: string
    }
  | {
      provider: "google"
--- a/quartz/cli/handlers.js
+++ b/quartz/cli/handlers.js
@@ -113,10 +113,7 @@ export async function handleCreate(argv) {
    }
  }

-  const gitkeepPath = path.join(contentFolder, ".gitkeep")
-  if (fs.existsSync(gitkeepPath)) {
-    await fs.promises.unlink(gitkeepPath)
-  }
+  await fs.promises.unlink(path.join(contentFolder, ".gitkeep"))
  if (setupStrategy === "copy" || setupStrategy === "symlink") {
    let originalFolder = sourceDirectory

@@ -450,7 +447,7 @@ export async function handleUpdate(argv) {
  try {
    gitPull(UPSTREAM_NAME, QUARTZ_SOURCE_BRANCH)
  } catch {
-    console.log(chalk.red("An error occurred above while pulling updates."))
+    console.log(chalk.red("An error occured above while pulling updates."))
    await popContentFolder(contentFolder)
    return
  }
@@ -522,7 +519,7 @@ export async function handleSync(argv) {
    try {
      gitPull(ORIGIN_NAME, QUARTZ_SOURCE_BRANCH)
    } catch {
-      console.log(chalk.red("An error occurred above while pulling updates."))
+      console.log(chalk.red("An error occured above while pulling updates."))
      await popContentFolder(contentFolder)
      return
    }
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -18,15 +18,15 @@ interface BreadcrumbOptions {
   */
  rootName: string
  /**
-   * Whether to look up frontmatter title for folders (could cause performance problems with big vaults)
+   * wether to look up frontmatter title for folders (could cause performance problems with big vaults)
   */
  resolveFrontmatterTitle: boolean
  /**
-   * Whether to display breadcrumbs on root `index.md`
+   * Wether to display breadcrumbs on root `index.md`
   */
  hideOnRoot: boolean
  /**
-   * Whether to display the current page in the breadcrumbs.
+   * Wether to display the current page in the breadcrumbs.
   */
  showCurrentPage: boolean
 }
@@ -68,10 +68,9 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
      // 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) {
+          const folderParts = file.filePath?.split("/")
+          if (folderParts) {
+            const folderName = folderParts[folderParts?.length - 2]
            folderIndex.set(folderName, file)
          }
        }
@@ -89,10 +88,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
        // Try to resolve frontmatter folder title
        const currentFile = folderIndex?.get(curPathSegment)
        if (currentFile) {
-          const title = currentFile.frontmatter!.title
-          if (title !== "index") {
-            curPathSegment = title
-          }
+          curPathSegment = currentFile.frontmatter!.title
        }

        // Add current slug to full path
@@ -104,14 +100,13 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
      }

      // Add current file to crumb (can directly use frontmatter title)
-      if (options.showCurrentPage && slugParts.at(-1) !== "index") {
+      if (options.showCurrentPage) {
        crumbs.push({
          displayName: fileData.frontmatter!.title,
          path: "",
        })
      }
    }
-
    return (
      <nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs">
        {crumbs.map((crumb, index) => (
--- a/quartz/components/ContentMeta.tsx
+++ b/quartz/components/ContentMeta.tsx
@@ -2,37 +2,18 @@ import { formatDate, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"

-interface ContentMetaOptions {
-  /**
-   * Whether to display reading time
-   */
-  showReadingTime: boolean
-}
-
-const defaultOptions: ContentMetaOptions = {
-  showReadingTime: true,
-}
-
-export default ((opts?: Partial<ContentMetaOptions>) => {
-  // Merge options with defaults
-  const options: ContentMetaOptions = { ...defaultOptions, ...opts }
-
+export default (() => {
  function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
    const text = fileData.text
-
    if (text) {
      const segments: string[] = []
+      const { text: timeTaken, words: _words } = readingTime(text)

      if (fileData.dates) {
        segments.push(formatDate(getDate(cfg, fileData)!))
      }

-      // Display reading time if enabled
-      if (options.showReadingTime) {
-        const { text: timeTaken, words: _words } = readingTime(text)
-        segments.push(timeTaken)
-      }
-
+      segments.push(timeTaken)
      return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p>
    } else {
      return null
--- a/quartz/components/Darkmode.tsx
+++ b/quartz/components/Darkmode.tsx
@@ -18,7 +18,7 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
          x="0px"
          y="0px"
          viewBox="0 0 35 35"
-          style="enable-background:new 0 0 35 35"
+          style="enable-background:new 0 0 35 35;"
          xmlSpace="preserve"
        >
          <title>Light mode</title>
@@ -34,7 +34,7 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
          x="0px"
          y="0px"
          viewBox="0 0 100 100"
-          style="enable-background:new 0 0 100 100"
+          style="enable-background='new 0 0 100 100'"
          xmlSpace="preserve"
        >
          <title>Dark mode</title>
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -12,9 +12,6 @@ const defaultOptions = {
  folderClickBehavior: "collapse",
  folderDefaultState: "collapsed",
  useSavedState: true,
-  mapFn: (node) => {
-    return node
-  },
  sortFn: (a, b) => {
    // Sort order: folders first, then files. Sort folders and files alphabetically
    if ((!a.file && !b.file) || (a.file && b.file)) {
@@ -25,7 +22,6 @@ const defaultOptions = {
        sensitivity: "base",
      })
    }
-
    if (a.file && !b.file) {
      return 1
    } else {
@@ -45,34 +41,46 @@ export default ((userOpts?: Partial<Options>) => {
  let jsonTree: string

  function constructFileTree(allFiles: QuartzPluginData[]) {
-    if (fileTree) {
-      return
-    }
+    if (!fileTree) {
+      // Construct tree from allFiles
+      fileTree = new FileNode("")
+      allFiles.forEach((file) => fileTree.add(file, 1))

-    // Construct tree from allFiles
-    fileTree = new FileNode("")
-    allFiles.forEach((file) => fileTree.add(file))
+      /**
+       * Keys of this object must match corresponding function name of `FileNode`,
+       * while values must be the argument that will be passed to the function.
+       *
+       * e.g. entry for FileNode.sort: `sort: opts.sortFn` (value is sort function from options)
+       */
+      const functions = {
+        map: opts.mapFn,
+        sort: opts.sortFn,
+        filter: opts.filterFn,
+      }

-    // Execute all functions (sort, filter, map) that were provided (if none were provided, only default "sort" is applied)
-    if (opts.order) {
-      // Order is important, use loop with index instead of order.map()
-      for (let i = 0; i < opts.order.length; i++) {
-        const functionName = opts.order[i]
-        if (functionName === "map") {
-          fileTree.map(opts.mapFn)
-        } else if (functionName === "sort") {
-          fileTree.sort(opts.sortFn)
-        } else if (functionName === "filter") {
-          fileTree.filter(opts.filterFn)
+      // Execute all functions (sort, filter, map) that were provided (if none were provided, only default "sort" is applied)
+      if (opts.order) {
+        // Order is important, use loop with index instead of order.map()
+        for (let i = 0; i < opts.order.length; i++) {
+          const functionName = opts.order[i]
+          if (functions[functionName]) {
+            // for every entry in order, call matching function in FileNode and pass matching argument
+            // e.g. i = 0; functionName = "filter"
+            // converted to: (if opts.filterFn) => fileTree.filter(opts.filterFn)
+
+            // @ts-ignore
+            // typescript cant statically check these dynamic references, so manually make sure reference is valid and ignore warning
+            fileTree[functionName].call(fileTree, functions[functionName])
+          }
        }
      }
+
+      // Get all folders of tree. Initialize with collapsed state
+      const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
+
+      // Stringify to pass json tree as data attribute ([data-tree])
+      jsonTree = JSON.stringify(folders)
    }
-
-    // Get all folders of tree. Initialize with collapsed state
-    const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
-
-    // Stringify to pass json tree as data attribute ([data-tree])
-    jsonTree = JSON.stringify(folders)
  }

  function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
@@ -112,7 +120,6 @@ export default ((userOpts?: Partial<Options>) => {
      </div>
    )
  }
-
  Explorer.css = explorerStyle
  Explorer.afterDOMLoaded = script
  return Explorer
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -1,13 +1,6 @@
 // @ts-ignore
 import { QuartzPluginData } from "../plugins/vfile"
-import {
-  joinSegments,
-  resolveRelative,
-  clone,
-  simplifySlug,
-  SimpleSlug,
-  FilePath,
-} from "../util/path"
+import { resolveRelative } from "../util/path"

 type OrderEntries = "sort" | "filter" | "map"

@@ -17,9 +10,9 @@ export interface Options {
  folderClickBehavior: "collapse" | "link"
  useSavedState: boolean
  sortFn: (a: FileNode, b: FileNode) => number
-  filterFn: (node: FileNode) => boolean
-  mapFn: (node: FileNode) => void
-  order: OrderEntries[]
+  filterFn?: (node: FileNode) => boolean
+  mapFn?: (node: FileNode) => void
+  order?: OrderEntries[]
 }

 type DataWrapper = {
@@ -32,74 +25,59 @@ export type FolderState = {
  collapsed: boolean
 }

-function getPathSegment(fp: FilePath | undefined, idx: number): string | undefined {
-  if (!fp) {
-    return undefined
-  }
-
-  return fp.split("/").at(idx)
-}
-
 // Structure to add all files into a tree
 export class FileNode {
-  children: Array<FileNode>
-  name: string // this is the slug segment
+  children: FileNode[]
+  name: string
  displayName: string
  file: QuartzPluginData | null
  depth: number

-  constructor(slugSegment: string, displayName?: string, file?: QuartzPluginData, depth?: number) {
+  constructor(name: string, file?: QuartzPluginData, depth?: number) {
    this.children = []
-    this.name = slugSegment
-    this.displayName = displayName ?? file?.frontmatter?.title ?? slugSegment
-    this.file = file ? clone(file) : null
+    this.name = name
+    this.displayName = name
+    this.file = file ? structuredClone(file) : null
    this.depth = depth ?? 0
  }

-  private insert(fileData: DataWrapper) {
-    if (fileData.path.length === 0) {
-      return
-    }
-
-    const nextSegment = fileData.path[0]
-
-    // base case, insert here
-    if (fileData.path.length === 1) {
-      if (nextSegment === "") {
-        // index case (we are the root and we just found index.md), set our data appropriately
-        const title = fileData.file.frontmatter?.title
-        if (title && title !== "index") {
+  private insert(file: DataWrapper) {
+    if (file.path.length === 1) {
+      if (file.path[0] !== "index.md") {
+        this.children.push(new FileNode(file.file.frontmatter!.title, file.file, this.depth + 1))
+      } else {
+        const title = file.file.frontmatter?.title
+        if (title && title !== "index" && file.path[0] === "index.md") {
          this.displayName = title
        }
-      } else {
-        // direct child
-        this.children.push(new FileNode(nextSegment, undefined, fileData.file, this.depth + 1))
+      }
+    } else {
+      const next = file.path[0]
+      file.path = file.path.splice(1)
+      for (const child of this.children) {
+        if (child.name === next) {
+          child.insert(file)
+          return
+        }
      }

-      return
+      const newChild = new FileNode(next, undefined, this.depth + 1)
+      newChild.insert(file)
+      this.children.push(newChild)
    }
-
-    // find the right child to insert into
-    fileData.path = fileData.path.splice(1)
-    const child = this.children.find((c) => c.name === nextSegment)
-    if (child) {
-      child.insert(fileData)
-      return
-    }
-
-    const newChild = new FileNode(
-      nextSegment,
-      getPathSegment(fileData.file.relativePath, this.depth),
-      undefined,
-      this.depth + 1,
-    )
-    newChild.insert(fileData)
-    this.children.push(newChild)
  }

  // Add new file to tree
-  add(file: QuartzPluginData) {
-    this.insert({ file: file, path: simplifySlug(file.slug!).split("/") })
+  add(file: QuartzPluginData, splice: number = 0) {
+    this.insert({ file, path: file.filePath!.split("/").splice(splice) })
+  }
+
+  // Print tree structure (for debugging)
+  print(depth: number = 0) {
+    let folderChar = ""
+    if (!this.file) folderChar = "|"
+    console.log("-".repeat(depth), folderChar, this.name, this.depth)
+    this.children.forEach((e) => e.print(depth + 1))
  }

  /**
@@ -117,6 +95,7 @@ export class FileNode {
   */
  map(mapFn: (node: FileNode) => void) {
    mapFn(this)
+
    this.children.forEach((child) => child.map(mapFn))
  }

@@ -131,16 +110,16 @@ export class FileNode {

    const traverse = (node: FileNode, currentPath: string) => {
      if (!node.file) {
-        const folderPath = joinSegments(currentPath, node.name)
+        const folderPath = currentPath + (currentPath ? "/" : "") + node.name
        if (folderPath !== "") {
          folderPaths.push({ path: folderPath, collapsed })
        }
-
        node.children.forEach((child) => traverse(child, folderPath))
      }
    }

    traverse(this, "")
+
    return folderPaths
  }

@@ -168,13 +147,14 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
  const isDefaultOpen = opts.folderDefaultState === "open"

  // Calculate current folderPath
+  let pathOld = fullPath ? fullPath : ""
  let folderPath = ""
  if (node.name !== "") {
-    folderPath = joinSegments(fullPath ?? "", node.name)
+    folderPath = `${pathOld}/${node.name}`
  }

  return (
-    <>
+    <li>
      {node.file ? (
        // Single file node
        <li key={node.file.slug}>
@@ -183,7 +163,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
          </a>
        </li>
      ) : (
-        <li>
+        <div>
          {node.name !== "" && (
            // Node with entire folder
            // Render svg button + folder name, then children
@@ -205,16 +185,12 @@ 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={`${folderPath}`} data-for={node.name} class="folder-title">
                    {node.displayName}
                  </a>
                ) : (
                  <button class="folder-button">
-                    <span class="folder-title">{node.displayName}</span>
+                    <p class="folder-title">{node.displayName}</p>
                  </button>
                )}
              </div>
@@ -241,8 +217,8 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
              ))}
            </ul>
          </div>
-        </li>
+        </div>
      )}
-    </>
+    </li>
  )
 }
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -23,7 +23,7 @@ export function pageResources(
  staticResources: StaticResources,
 ): StaticResources {
  const contentIndexPath = joinSegments(baseDir, "static/contentIndex.json")
-  const contentIndexScript = `const fetchData = fetch("${contentIndexPath}").then(data => data.json())`
+  const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())`

  return {
    css: [joinSegments(baseDir, "index.css"), ...staticResources.css],
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -59,7 +59,8 @@ function toggleFolder(evt: MouseEvent) {
  // Save folder state to localStorage
  const clickFolderPath = currentFolderParent.dataset.folderpath as string

-  const fullFolderPath = clickFolderPath
+  // Remove leading "/"
+  const fullFolderPath = clickFolderPath.substring(1)
  toggleCollapsedByPath(explorerState, fullFolderPath)

  const stringifiedFileTree = JSON.stringify(explorerState)
@@ -107,7 +108,9 @@ function setupExplorer() {
    explorerState = JSON.parse(storageTree)
    explorerState.map((folderUl) => {
      // grab <li> element for matching folder path
-      const folderLi = document.querySelector(`[data-folderpath='${folderUl.path}']`) as HTMLElement
+      const folderLi = document.querySelector(
+        `[data-folderpath='/${folderUl.path}']`,
+      ) as HTMLElement

      // Get corresponding content <ul> tag and set state
      if (folderLi) {
--- a/quartz/components/scripts/plausible.inline.ts
+++ b/quartz/components/scripts/plausible.inline.ts
@@ -0,0 +1,3 @@
+import Plausible from "plausible-tracker"
+const { trackPageview } = Plausible()
+document.addEventListener("nav", () => trackPageview())
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -35,12 +35,12 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
  if (trim) {
    const includesCheck = (tok: string) =>
      tokenizedTerms.some((term) => tok.toLowerCase().startsWith(term.toLowerCase()))
-    const occurrencesIndices = tokenizedText.map(includesCheck)
+    const occurencesIndices = tokenizedText.map(includesCheck)

    let bestSum = 0
    let bestIndex = 0
    for (let i = 0; i < Math.max(tokenizedText.length - contextWindowWords, 0); i++) {
-      const window = occurrencesIndices.slice(i, i + contextWindowWords)
+      const window = occurencesIndices.slice(i, i + contextWindowWords)
      const windowSum = window.reduce((total, cur) => total + (cur ? 1 : 0), 0)
      if (windowSum >= bestSum) {
        bestSum = windowSum
@@ -122,10 +122,7 @@ document.addEventListener("nav", async (e: unknown) => {

      // add "#" prefix for tag search
      if (searchBar) searchBar.value = "#"
-    }
-
-    if (!container?.classList.contains("active")) return
-    else if (e.key === "Enter") {
+    } else if (e.key === "Enter") {
      // If result has focus, navigate to that one, otherwise pick first result
      if (results?.contains(document.activeElement)) {
        const active = document.activeElement as HTMLInputElement
@@ -134,14 +131,7 @@ document.addEventListener("nav", async (e: unknown) => {
        const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
        anchor?.click()
      }
-    } else if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) {
-      e.preventDefault()
-      if (results?.contains(document.activeElement)) {
-        // If an element in results-container already has focus, focus previous one
-        const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null
-        prevResult?.focus()
-      }
-    } else if (e.key === "ArrowDown" || e.key === "Tab") {
+    } else if (e.key === "ArrowDown") {
      e.preventDefault()
      // When first pressing ArrowDown, results wont contain the active element, so focus first element
      if (!results?.contains(document.activeElement)) {
@@ -152,6 +142,13 @@ document.addEventListener("nav", async (e: unknown) => {
        const nextResult = document.activeElement?.nextElementSibling as HTMLInputElement | null
        nextResult?.focus()
      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      if (results?.contains(document.activeElement)) {
+        // If an element in results-container already has focus, focus previous one
+        const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null
+        prevResult?.focus()
+      }
    }
  }

@@ -199,7 +196,7 @@ document.addEventListener("nav", async (e: unknown) => {
      const termLower = term.toLowerCase()
      let matching = tags.filter((str) => str.includes(termLower))

-      // Subtract matching from original tags, then push difference
+      // Substract matching from original tags, then push difference
      if (matching.length > 0) {
        let difference = tags.filter((x) => !matching.includes(x))

@@ -222,16 +219,16 @@ document.addEventListener("nav", async (e: unknown) => {

  const resultToHTML = ({ slug, title, content, tags }: Item) => {
    const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : ``
-    const itemTile = document.createElement("a")
-    itemTile.classList.add("result-card")
-    itemTile.id = slug
-    itemTile.href = new URL(resolveRelative(currentSlug, slug), location.toString()).toString()
-    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p>${content}</p>`
-    itemTile.addEventListener("click", (event) => {
-      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+    const button = document.createElement("button")
+    button.classList.add("result-card")
+    button.id = slug
+    button.innerHTML = `<h3>${title}</h3>${htmlTags}<p>${content}</p>`
+    button.addEventListener("click", () => {
+      const targ = resolveRelative(currentSlug, slug)
+      window.spaNavigate(new URL(targ, window.location.toString()))
      hideSearch()
    })
-    return itemTile
+    return button
  }

  function displayResults(finalResults: Item[]) {
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -106,7 +106,7 @@ svg {
    align-items: center;
    font-family: var(--headerFont);

-    & span {
+    & p {
      font-size: 0.95rem;
      display: inline-block;
      color: var(--secondary);
@@ -126,7 +126,7 @@ svg {
  backface-visibility: visible;
 }

-li:has(> .folder-outer:not(.open)) > .folder-container > svg {
+div:has(> .folder-outer:not(.open)) > .folder-container > svg {
  transform: rotate(-90deg);
 }

--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -26,7 +26,6 @@
    max-height: 20rem;
    padding: 0 1rem 1rem 1rem;
    font-weight: initial;
-    font-style: initial;
    line-height: normal;
    font-size: initial;
    font-family: var(--bodyFont);
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -95,7 +95,7 @@
          border-bottom: none;
          width: 100%;

-          // normalize card props
+          // normalize button props
          font-family: inherit;
          font-size: 100%;
          line-height: 1.15;
@@ -104,7 +104,6 @@
          text-align: left;
          background: var(--light);
          outline: none;
-          font-weight: inherit;

          & .highlight {
            color: var(--secondary);
--- a/quartz/plugins/emitters/404.tsx
+++ b/quartz/plugins/emitters/404.tsx
@@ -7,7 +7,6 @@ import { FilePath, FullSlug } from "../../util/path"
 import { sharedPageComponents } from "../../../quartz.layout"
 import { NotFound } from "../../components"
 import { defaultProcessedContent } from "../vfile"
-import { write } from "./helpers"

 export const NotFoundPage: QuartzEmitterPlugin = () => {
  const opts: FullPageLayout = {
@@ -26,7 +25,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
    getQuartzComponents() {
      return [Head, Body, pageBody, Footer]
    },
-    async emit(ctx, _content, resources): Promise<FilePath[]> {
+    async emit(ctx, _content, resources, emit): Promise<FilePath[]> {
      const cfg = ctx.cfg.configuration
      const slug = "404" as FullSlug

@@ -49,8 +48,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
      }

      return [
-        await write({
-          ctx,
+        await emit({
          content: renderPage(slug, componentData, opts, externalResources),
          slug,
          ext: ".html",
--- a/quartz/plugins/emitters/aliases.ts
+++ b/quartz/plugins/emitters/aliases.ts
@@ -1,15 +1,13 @@
 import { FilePath, FullSlug, joinSegments, resolveRelative, simplifySlug } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import path from "path"
-import { write } from "./helpers"

 export const AliasRedirects: QuartzEmitterPlugin = () => ({
  name: "AliasRedirects",
  getQuartzComponents() {
    return []
  },
-  async emit(ctx, content, _resources): Promise<FilePath[]> {
-    const { argv } = ctx
+  async emit({ argv }, content, _resources, emit): Promise<FilePath[]> {
    const fps: FilePath[] = []

    for (const [_tree, file] of content) {
@@ -34,8 +32,7 @@ export const AliasRedirects: QuartzEmitterPlugin = () => ({
        }

        const redirUrl = resolveRelative(slug, file.data.slug!)
-        const fp = await write({
-          ctx,
+        const fp = await emit({
          content: `
            <!DOCTYPE html>
            <html lang="en-us">
--- a/quartz/plugins/emitters/assets.ts
+++ b/quartz/plugins/emitters/assets.ts
@@ -10,7 +10,7 @@ export const Assets: QuartzEmitterPlugin = () => {
    getQuartzComponents() {
      return []
    },
-    async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
+    async emit({ argv, cfg }, _content, _resources, _emit): Promise<FilePath[]> {
      // glob all non MD/MDX/HTML files in content folder and copy it over
      const assetsPath = argv.output
      const fps = await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
--- a/quartz/plugins/emitters/cname.ts
+++ b/quartz/plugins/emitters/cname.ts
@@ -13,7 +13,7 @@ export const CNAME: QuartzEmitterPlugin = () => ({
  getQuartzComponents() {
    return []
  },
-  async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
+  async emit({ argv, cfg }, _content, _resources, _emit): Promise<FilePath[]> {
    if (!cfg.configuration.baseUrl) {
      console.warn(chalk.yellow("CNAME emitter requires `baseUrl` to be set in your configuration"))
      return []
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -4,6 +4,8 @@ import { QuartzEmitterPlugin } from "../types"
 // @ts-ignore
 import spaRouterScript from "../../components/scripts/spa.inline"
 // @ts-ignore
+import plausibleScript from "../../components/scripts/plausible.inline"
+// @ts-ignore
 import popoverScript from "../../components/scripts/popover.inline"
 import styles from "../../styles/custom.scss"
 import popoverStyle from "../../components/styles/popover.scss"
@@ -12,8 +14,6 @@ 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"

 type ComponentResources = {
  css: string[]
@@ -56,16 +56,9 @@ function getComponentResources(ctx: BuildCtx): ComponentResources {
  }
 }

-async function joinScripts(scripts: string[]): Promise<string> {
+function joinScripts(scripts: string[]): string {
  // wrap with iife to prevent scope collision
-  const script = scripts.map((script) => `(function () {${script}})();`).join("\n")
-
-  // minify with esbuild
-  const res = await transpile(script, {
-    minify: true,
-  })
-
-  return res.code
+  return scripts.map((script) => `(function () {${script}})();`).join("\n")
 }

 function addGlobalPageResources(
@@ -92,37 +85,24 @@ function addGlobalPageResources(
    componentResources.afterDOMLoaded.push(`
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
-      gtag("js", new Date());
-      gtag("config", "${tagId}", { send_page_view: false });
-
-      document.addEventListener("nav", () => {
-        gtag("event", "page_view", {
+      gtag(\`js\`, new Date());
+      gtag(\`config\`, \`${tagId}\`, { send_page_view: false });
+  
+      document.addEventListener(\`nav\`, () => {
+        gtag(\`event\`, \`page_view\`, {
          page_title: document.title,
          page_location: location.href,
        });
      });`)
  } else if (cfg.analytics?.provider === "plausible") {
-    const plausibleHost = cfg.analytics.host ?? "https://plausible.io"
-    componentResources.afterDOMLoaded.push(`
-      const plausibleScript = document.createElement("script")
-      plausibleScript.src = "${plausibleHost}/js/script.manual.js"
-      plausibleScript.setAttribute("data-domain", location.hostname)
-      plausibleScript.defer = true
-      document.head.appendChild(plausibleScript)
-
-      window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
-
-      document.addEventListener("nav", () => {
-        plausible("pageview")
-      })
-    `)
+    componentResources.afterDOMLoaded.push(plausibleScript)
  } else if (cfg.analytics?.provider === "umami") {
    componentResources.afterDOMLoaded.push(`
      const umamiScript = document.createElement("script")
      umamiScript.src = "https://analytics.umami.is/script.js"
      umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
      umamiScript.async = true
-
+  
      document.head.appendChild(umamiScript)
    `)
  }
@@ -169,7 +149,7 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
    getQuartzComponents() {
      return []
    },
-    async emit(ctx, _content, resources): Promise<FilePath[]> {
+    async emit(ctx, _content, resources, emit): Promise<FilePath[]> {
      // component specific scripts and styles
      const componentResources = getComponentResources(ctx)
      // important that this goes *after* component scripts
@@ -185,14 +165,10 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
      addGlobalPageResources(ctx, resources, componentResources)

      const stylesheet = joinStyles(ctx.cfg.configuration.theme, ...componentResources.css, styles)
-      const [prescript, postscript] = await Promise.all([
-        joinScripts(componentResources.beforeDOMLoaded),
-        joinScripts(componentResources.afterDOMLoaded),
-      ])
-
+      const prescript = joinScripts(componentResources.beforeDOMLoaded)
+      const postscript = joinScripts(componentResources.afterDOMLoaded)
      const fps = await Promise.all([
-        write({
-          ctx,
+        emit({
          slug: "index" as FullSlug,
          ext: ".css",
          content: transform({
@@ -209,14 +185,12 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
            include: Features.MediaQueries,
          }).code.toString(),
        }),
-        write({
-          ctx,
+        emit({
          slug: "prescript" as FullSlug,
          ext: ".js",
          content: prescript,
        }),
-        write({
-          ctx,
+        emit({
          slug: "postscript" as FullSlug,
          ext: ".js",
          content: postscript,
--- a/quartz/plugins/emitters/contentIndex.ts
+++ b/quartz/plugins/emitters/contentIndex.ts
@@ -2,11 +2,10 @@ import { Root } from "hast"
 import { GlobalConfiguration } from "../../cfg"
 import { getDate } from "../../components/Date"
 import { escapeHTML } from "../../util/escape"
-import { FilePath, FullSlug, SimpleSlug, joinSegments, simplifySlug } from "../../util/path"
+import { FilePath, FullSlug, SimpleSlug, simplifySlug } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import { toHtml } from "hast-util-to-html"
 import path from "path"
-import { write } from "./helpers"

 export type ContentIndex = Map<FullSlug, ContentDetails>
 export type ContentDetails = {
@@ -38,7 +37,7 @@ const defaultOptions: Options = {
 function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string {
  const base = cfg.baseUrl ?? ""
  const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<url>
-    <loc>https://${joinSegments(base, encodeURI(slug))}</loc>
+    <loc>https://${base}/${encodeURI(slug)}</loc>
    <lastmod>${content.date?.toISOString()}</lastmod>
  </url>`
  const urls = Array.from(idx)
@@ -49,11 +48,12 @@ function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string {

 function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: number): string {
  const base = cfg.baseUrl ?? ""
+  const root = `https://${base}`

  const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<item>
    <title>${escapeHTML(content.title)}</title>
-    <link>https://${joinSegments(base, encodeURI(slug))}</link>
-    <guid>https://${joinSegments(base, encodeURI(slug))}</guid>
+    <link>${root}/${encodeURI(slug)}</link>
+    <guid>${root}/${encodeURI(slug)}</guid>
    <description>${content.richContent ?? content.description}</description>
    <pubDate>${content.date?.toUTCString()}</pubDate>
  </item>`
@@ -78,7 +78,7 @@ function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: nu
 <rss version="2.0">
    <channel>
      <title>${escapeHTML(cfg.pageTitle)}</title>
-      <link>https://${base}</link>
+      <link>${root}</link>
      <description>${!!limit ? `Last ${limit} notes` : "Recent notes"} on ${escapeHTML(
        cfg.pageTitle,
      )}</description>
@@ -92,7 +92,7 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
  opts = { ...defaultOptions, ...opts }
  return {
    name: "ContentIndex",
-    async emit(ctx, content, _resources) {
+    async emit(ctx, content, _resources, emit) {
      const cfg = ctx.cfg.configuration
      const emitted: FilePath[] = []
      const linkIndex: ContentIndex = new Map()
@@ -116,8 +116,7 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {

      if (opts?.enableSiteMap) {
        emitted.push(
-          await write({
-            ctx,
+          await emit({
            content: generateSiteMap(cfg, linkIndex),
            slug: "sitemap" as FullSlug,
            ext: ".xml",
@@ -127,8 +126,7 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {

      if (opts?.enableRSS) {
        emitted.push(
-          await write({
-            ctx,
+          await emit({
            content: generateRSSFeed(cfg, linkIndex, opts.rssLimit),
            slug: "index" as FullSlug,
            ext: ".xml",
@@ -136,7 +134,7 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
        )
      }

-      const fp = joinSegments("static", "contentIndex") as FullSlug
+      const fp = path.join("static", "contentIndex") as FullSlug
      const simplifiedIndex = Object.fromEntries(
        Array.from(linkIndex).map(([slug, content]) => {
          // remove description and from content index as nothing downstream
@@ -149,8 +147,7 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
      )

      emitted.push(
-        await write({
-          ctx,
+        await emit({
          content: JSON.stringify(simplifiedIndex),
          slug: fp,
          ext: ".json",
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -8,7 +8,6 @@ import { FilePath, pathToRoot } from "../../util/path"
 import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { Content } from "../../components"
 import chalk from "chalk"
-import { write } from "./helpers"

 export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
  const opts: FullPageLayout = {
@@ -27,7 +26,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
    getQuartzComponents() {
      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
    },
-    async emit(ctx, content, resources): Promise<FilePath[]> {
+    async emit(ctx, content, resources, emit): Promise<FilePath[]> {
      const cfg = ctx.cfg.configuration
      const fps: FilePath[] = []
      const allFiles = content.map((c) => c[1].data)
@@ -50,8 +49,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
        }

        const content = renderPage(slug, componentData, opts, externalResources)
-        const fp = await write({
-          ctx,
+        const fp = await emit({
          content,
          slug,
          ext: ".html",
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/quartz/plugins/emitters/folderPage.tsx
@@ -17,7 +17,6 @@ import {
 } from "../../util/path"
 import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { FolderContent } from "../../components"
-import { write } from "./helpers"

 export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
  const opts: FullPageLayout = {
@@ -36,7 +35,7 @@ export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
    getQuartzComponents() {
      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
    },
-    async emit(ctx, content, resources): Promise<FilePath[]> {
+    async emit(ctx, content, resources, emit): Promise<FilePath[]> {
      const fps: FilePath[] = []
      const allFiles = content.map((c) => c[1].data)
      const cfg = ctx.cfg.configuration
@@ -83,8 +82,7 @@ export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
        }

        const content = renderPage(slug, componentData, opts, externalResources)
-        const fp = await write({
-          ctx,
+        const fp = await emit({
          content,
          slug,
          ext: ".html",
--- a/quartz/plugins/emitters/helpers.ts
+++ b/quartz/plugins/emitters/helpers.ts
@@ -1,19 +0,0 @@
-import path from "path"
-import fs from "fs"
-import { BuildCtx } from "../../util/ctx"
-import { FilePath, FullSlug, joinSegments } from "../../util/path"
-
-type WriteOptions = {
-  ctx: BuildCtx
-  slug: FullSlug
-  ext: `.${string}` | ""
-  content: string
-}
-
-export const write = async ({ ctx, slug, ext, content }: WriteOptions): Promise<FilePath> => {
-  const pathToPage = joinSegments(ctx.argv.output, slug + ext) as FilePath
-  const dir = path.dirname(pathToPage)
-  await fs.promises.mkdir(dir, { recursive: true })
-  await fs.promises.writeFile(pathToPage, content)
-  return pathToPage
-}
--- a/quartz/plugins/emitters/static.ts
+++ b/quartz/plugins/emitters/static.ts
@@ -8,7 +8,7 @@ export const Static: QuartzEmitterPlugin = () => ({
  getQuartzComponents() {
    return []
  },
-  async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
+  async emit({ argv, cfg }, _content, _resources, _emit): Promise<FilePath[]> {
    const staticPath = joinSegments(QUARTZ, "static")
    const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)
    await fs.promises.cp(staticPath, joinSegments(argv.output, "static"), {
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/quartz/plugins/emitters/tagPage.tsx
@@ -14,7 +14,6 @@ import {
 } from "../../util/path"
 import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { TagContent } from "../../components"
-import { write } from "./helpers"

 export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
  const opts: FullPageLayout = {
@@ -33,7 +32,7 @@ export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
    getQuartzComponents() {
      return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
    },
-    async emit(ctx, content, resources): Promise<FilePath[]> {
+    async emit(ctx, content, resources, emit): Promise<FilePath[]> {
      const fps: FilePath[] = []
      const allFiles = content.map((c) => c[1].data)
      const cfg = ctx.cfg.configuration
@@ -82,8 +81,7 @@ export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
        }

        const content = renderPage(slug, componentData, opts, externalResources)
-        const fp = await write({
-          ctx,
+        const fp = await emit({
          content,
          slug: file.data.slug!,
          ext: ".html",
--- a/quartz/plugins/filters/explicit.ts
+++ b/quartz/plugins/filters/explicit.ts
@@ -3,11 +3,7 @@ import { QuartzFilterPlugin } from "../types"
 export const ExplicitPublish: QuartzFilterPlugin = () => ({
  name: "ExplicitPublish",
  shouldPublish(_ctx, [_tree, vfile]) {
-    const publishProperty = vfile.data?.frontmatter?.publish ?? false
-    const publishFlag =
-      typeof publishProperty === "string"
-        ? publishProperty.toLowerCase() === "true"
-        : Boolean(publishProperty)
+    const publishFlag: boolean = vfile.data?.frontmatter?.publish ?? false
    return publishFlag
  },
 })
--- a/quartz/plugins/index.ts
+++ b/quartz/plugins/index.ts
@@ -30,6 +30,5 @@ declare module "vfile" {
  interface DataMap {
    slug: FullSlug
    filePath: FilePath
-    relativePath: FilePath
  }
 }
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@@ -49,19 +49,11 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
              data.title = file.stem ?? "Untitled"
            }

-            if (data.tags) {
-              // coerce to array
-              if (!Array.isArray(data.tags)) {
-                data.tags = data.tags
-                  .toString()
-                  .split(oneLineTagDelim)
-                  .map((tag: string) => tag.trim())
-              }
-
-              // remove all non-string tags
+            if (data.tags && !Array.isArray(data.tags)) {
              data.tags = data.tags
-                .filter((tag: unknown) => typeof tag === "string" || typeof tag === "number")
-                .map((tag: string | number) => tag.toString())
+                .toString()
+                .split(oneLineTagDelim)
+                .map((tag: string) => tag.trim())
            }

            // slug them all!!
--- a/quartz/plugins/transformers/lastmod.ts
+++ b/quartz/plugins/transformers/lastmod.ts
@@ -57,22 +57,10 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
                published ||= file.data.frontmatter.publishDate
              } else if (source === "git") {
                if (!repo) {
-                  // Get a reference to the main git repo.
-                  // It's either the same as the workdir,
-                  // or 1+ level higher in case of a submodule/subtree setup
-                  repo = Repository.discover(file.cwd)
+                  repo = new Repository(file.cwd)
                }

-                try {
-                  modified ||= await repo.getFileLatestModifiedDateAsync(file.data.filePath!)
-                } catch {
-                  console.log(
-                    chalk.yellow(
-                      `\nWarning: ${file.data
-                        .filePath!} isn't yet tracked by git, last modification date is not available for this file`,
-                    ),
-                  )
-                }
+                modified ||= await repo.getFileLatestModifiedDateAsync(file.data.filePath!)
              }
            }

--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@@ -12,7 +12,6 @@ import {
 import path from "path"
 import { visit } from "unist-util-visit"
 import isAbsoluteUrl from "is-absolute-url"
-import { Root } from "hast"

 interface Options {
  /** How to resolve Markdown paths */
@@ -20,16 +19,12 @@ interface Options {
  /** Strips folders from a link so that it looks nice */
  prettyLinks: boolean
  openLinksInNewTab: boolean
-  lazyLoad: boolean
-  externalLinkIcon: boolean
 }

 const defaultOptions: Options = {
  markdownLinkResolution: "absolute",
  prettyLinks: true,
  openLinksInNewTab: false,
-  lazyLoad: false,
-  externalLinkIcon: true,
 }

 export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
@@ -39,7 +34,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
    htmlPlugins(ctx) {
      return [
        () => {
-          return (tree: Root, file) => {
+          return (tree, file) => {
            const curSlug = simplifySlug(file.data.slug!)
            const outgoing: Set<SimpleSlug> = new Set()

@@ -56,30 +51,8 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                typeof node.properties.href === "string"
              ) {
                let dest = node.properties.href as RelativeURL
-                const classes = (node.properties.className ?? []) as string[]
-                const isExternal = isAbsoluteUrl(dest)
-                classes.push(isExternal ? "external" : "internal")
-
-                if (isExternal && opts.externalLinkIcon) {
-                  node.children.push({
-                    type: "element",
-                    tagName: "svg",
-                    properties: {
-                      class: "external-icon",
-                      viewBox: "0 0 512 512",
-                    },
-                    children: [
-                      {
-                        type: "element",
-                        tagName: "path",
-                        properties: {
-                          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",
-                        },
-                        children: [],
-                      },
-                    ],
-                  })
-                }
+                node.properties.className ??= []
+                node.properties.className.push(isAbsoluteUrl(dest) ? "external" : "internal")

                // Check if the link has alias text
                if (
@@ -88,9 +61,8 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                  node.children[0].value !== dest
                ) {
                  // Add the 'alias' class if the text content is not the same as the href
-                  classes.push("alias")
+                  node.properties.className.push("alias")
                }
-                node.properties.className = classes

                if (opts.openLinksInNewTab) {
                  node.properties.target = "_blank"
@@ -139,10 +111,6 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                node.properties &&
                typeof node.properties.src === "string"
              ) {
-                if (opts.lazyLoad) {
-                  node.properties.loading = "lazy"
-                }
-
                if (!isAbsoluteUrl(node.properties.src)) {
                  let dest = node.properties.src as RelativeURL
                  dest = node.properties.src = transformLink(
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -1,10 +1,10 @@
 import { QuartzTransformerPlugin } from "../types"
-import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
+import { Root, Html, BlockContent, DefinitionContent, Code, Paragraph } 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 { visit } from "unist-util-visit"
 import path from "path"
 import { JSResource } from "../../util/resources"
 // @ts-ignore
@@ -23,11 +23,8 @@ export interface Options {
  callouts: boolean
  mermaid: boolean
  parseTags: boolean
-  parseArrows: boolean
  parseBlockReferences: boolean
  enableInHtmlEmbed: boolean
-  enableYouTubeEmbed: boolean
-  enableVideoEmbed: boolean
 }

 const defaultOptions: Options = {
@@ -37,11 +34,8 @@ const defaultOptions: Options = {
  callouts: true,
  mermaid: true,
  parseTags: true,
-  parseArrows: true,
  parseBlockReferences: true,
  enableInHtmlEmbed: false,
-  enableYouTubeEmbed: true,
-  enableVideoEmbed: true,
 }

 const icons = {
@@ -111,10 +105,6 @@ function canonicalizeCallout(calloutName: string): keyof typeof callouts {
  return calloutMapping[callout] ?? "note"
 }

-export const externalLinkRegex = /^https?:\/\//i
-
-export const arrowRegex = new RegExp(/-{1,2}>/, "g")
-
 // !?               -> optional embedding
 // \[\[             -> open brace
 // ([^\[\]\|\#]+)   -> one or more non-special characters ([,],|, or #) (name)
@@ -125,7 +115,7 @@ export const wikilinkRegex = new RegExp(
  "g",
 )
 const highlightRegex = new RegExp(/==([^=]+)==/, "g")
-const commentRegex = new RegExp(/%%[\s\S]*?%%/, "g")
+const commentRegex = new RegExp(/%%(.+)%%/, "g")
 // from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
 const calloutRegex = new RegExp(/^\[\!(\w+)\]([+-]?)/)
 const calloutLineRegex = new RegExp(/^> *\[\!\w+\][+-]?.*$/, "gm")
@@ -133,10 +123,8 @@ const calloutLineRegex = new RegExp(/^> *\[\!\w+\][+-]?.*$/, "gm")
 // #(...)               -> 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 ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
-const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/)
+const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\d])+(?:\/[-_\p{L}\d]+)*)/, "gu")
+const blockReferenceRegex = new RegExp(/\^([A-Za-z0-9]+)$/, "g")

 export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
  userOpts,
@@ -151,22 +139,13 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
  return {
    name: "ObsidianFlavoredMarkdown",
    textTransform(_ctx, src) {
-      // do comments at text level
-      if (opts.comments) {
-        if (src instanceof Buffer) {
-          src = src.toString()
-        }
-
-        src = src.replace(commentRegex, "")
-      }
-
      // pre-transform blockquotes
      if (opts.callouts) {
        if (src instanceof Buffer) {
          src = src.toString()
        }

-        src = src.replace(calloutLineRegex, (value) => {
+        src = src.replaceAll(calloutLineRegex, (value) => {
          // force newline after title of callout
          return value + "\n> "
        })
@@ -178,20 +157,14 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
          src = src.toString()
        }

-        src = src.replace(wikilinkRegex, (value, ...capture) => {
-          const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture
-
+        src = src.replaceAll(wikilinkRegex, (value, ...capture) => {
+          const [rawFp, rawHeader, rawAlias] = capture
          const fp = rawFp ?? ""
          const anchor = rawHeader?.trim().replace(/^#+/, "")
          const blockRef = Boolean(anchor?.startsWith("^")) ? "^" : ""
          const displayAnchor = anchor ? `#${blockRef}${slugAnchor(anchor)}` : ""
          const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
          const embedDisplay = value.startsWith("!") ? "!" : ""
-
-          if (rawFp?.match(externalLinkRegex)) {
-            return `${embedDisplay}[${displayAlias.replace(/^\|/, "")}](${rawFp})`
-          }
-
          return `${embedDisplay}[[${fp}${displayAnchor}${displayAlias}]]`
        })
      }
@@ -220,7 +193,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                if (value.startsWith("!")) {
                  const ext: string = path.extname(fp).toLowerCase()
                  const url = slugifyFilePath(fp as FilePath)
-                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
+                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg"].includes(ext)) {
                    const dims = alias ?? ""
                    let [width, height] = dims.split("x", 2)
                    width ||= "auto"
@@ -252,7 +225,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                      type: "html",
                      value: `<iframe src="${url}"></iframe>`,
                    }
-                  } else {
+                  } else if (ext === "") {
                    const block = anchor
                    return {
                      type: "html",
@@ -295,13 +268,13 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
            ])
          }

-          if (opts.parseArrows) {
+          if (opts.comments) {
            replacements.push([
-              arrowRegex,
+              commentRegex,
              (_value: string, ..._capture: string[]) => {
                return {
-                  type: "html",
-                  value: `<span>&rarr;</span>`,
+                  type: "text",
+                  value: "",
                }
              },
            ])
@@ -346,7 +319,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                if (typeof replace === "string") {
                  node.value = node.value.replace(regex, replace)
                } else {
-                  node.value = node.value.replace(regex, (substring: string, ...args) => {
+                  node.value = node.value.replaceAll(regex, (substring: string, ...args) => {
                    const replaceValue = replace(substring, ...args)
                    if (typeof replaceValue === "string") {
                      return replaceValue
@@ -362,28 +335,11 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
              }
            })
          }
+
          mdastFindReplace(tree, replacements)
        }
      })

-      if (opts.enableVideoEmbed) {
-        plugins.push(() => {
-          return (tree: Root, _file) => {
-            visit(tree, "image", (node, index, parent) => {
-              if (parent && index != undefined && videoExtensionRegex.test(node.url)) {
-                const newNode: Html = {
-                  type: "html",
-                  value: `<video controls src="${node.url}"></video>`,
-                }
-
-                parent.children.splice(index, 1, newNode)
-                return SKIP
-              }
-            })
-          }
-        })
-      }
-
      if (opts.callouts) {
        plugins.push(() => {
          return (tree: Root, _file) => {
@@ -399,7 +355,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
              }

              const text = firstChild.children[0].value
-              const restOfTitle = firstChild.children.slice(1)
+              const restChildren = firstChild.children.slice(1)
              const [firstLine, ...remainingLines] = text.split("\n")
              const remainingText = remainingLines.join("\n")

@@ -415,10 +371,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                  match.input.slice(calloutDirective.length).trim() || capitalize(calloutType)
                const titleNode: Paragraph = {
                  type: "paragraph",
-                  children:
-                    restOfTitle.length === 0
-                      ? [{ type: "text", value: titleContent + " " }]
-                      : restOfTitle,
+                  children: [{ type: "text", value: titleContent + " " }, ...restChildren],
                }
                const title = mdastToHtml(titleNode)

@@ -490,12 +443,11 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
    },
    htmlPlugins() {
      const plugins: PluggableList = [rehypeRaw]
-
      if (opts.parseBlockReferences) {
        plugins.push(() => {
          const inlineTagTypes = new Set(["p", "li"])
          const blockTagTypes = new Set(["blockquote"])
-          return (tree: HtmlRoot, file) => {
+          return (tree, file) => {
            file.data.blocks = {}

            visit(tree, "element", (node, index, parent) => {
@@ -544,30 +496,6 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
        })
      }

-      if (opts.enableYouTubeEmbed) {
-        plugins.push(() => {
-          return (tree: HtmlRoot) => {
-            visit(tree, "element", (node) => {
-              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
-                if (videoId) {
-                  node.tagName = "iframe"
-                  node.properties = {
-                    class: "external-embed",
-                    allow: "fullscreen",
-                    frameborder: 0,
-                    width: "600px",
-                    height: "350px",
-                    src: `https://www.youtube.com/embed/${videoId}`,
-                  }
-                }
-              }
-            })
-          }
-        })
-      }
-
      return plugins
    },
    externalResources() {
--- a/quartz/plugins/types.ts
+++ b/quartz/plugins/types.ts
@@ -36,6 +36,19 @@ export type QuartzEmitterPlugin<Options extends OptionType = undefined> = (
 ) => QuartzEmitterPluginInstance
 export type QuartzEmitterPluginInstance = {
  name: string
-  emit(ctx: BuildCtx, content: ProcessedContent[], resources: StaticResources): Promise<FilePath[]>
+  emit(
+    ctx: BuildCtx,
+    content: ProcessedContent[],
+    resources: StaticResources,
+    emitCallback: EmitCallback,
+  ): Promise<FilePath[]>
  getQuartzComponents(ctx: BuildCtx): QuartzComponent[]
 }
+
+export interface EmitOptions {
+  slug: FullSlug
+  ext: `.${string}` | ""
+  content: string
+}
+
+export type EmitCallback = (data: EmitOptions) => Promise<FilePath>
--- a/quartz/processors/emit.ts
+++ b/quartz/processors/emit.ts
@@ -1,6 +1,10 @@
+import path from "path"
+import fs from "fs"
 import { PerfTimer } from "../util/perf"
 import { getStaticResourcesFromPlugins } from "../plugins"
+import { EmitCallback } from "../plugins/types"
 import { ProcessedContent } from "../plugins/vfile"
+import { FilePath, joinSegments } from "../util/path"
 import { QuartzLogger } from "../util/log"
 import { trace } from "../util/trace"
 import { BuildCtx } from "../util/ctx"
@@ -11,12 +15,19 @@ export async function emitContent(ctx: BuildCtx, content: ProcessedContent[]) {
  const log = new QuartzLogger(ctx.argv.verbose)

  log.start(`Emitting output files`)
+  const emit: EmitCallback = async ({ slug, ext, content }) => {
+    const pathToPage = joinSegments(argv.output, slug + ext) as FilePath
+    const dir = path.dirname(pathToPage)
+    await fs.promises.mkdir(dir, { recursive: true })
+    await fs.promises.writeFile(pathToPage, content)
+    return pathToPage
+  }

  let emittedFiles = 0
  const staticResources = getStaticResourcesFromPlugins(ctx)
  for (const emitter of cfg.plugins.emitters) {
    try {
-      const emitted = await emitter.emit(ctx, content, staticResources)
+      const emitted = await emitter.emit(ctx, content, staticResources, emit)
      emittedFiles += emitted.length

      if (ctx.argv.verbose) {
--- a/quartz/processors/parse.ts
+++ b/quartz/processors/parse.ts
@@ -91,9 +91,8 @@ export function createFileParser(ctx: BuildCtx, fps: FilePath[]) {
        }

        // base data properties that plugins may use
-        file.data.filePath = file.path as FilePath
-        file.data.relativePath = path.posix.relative(argv.directory, file.path) as FilePath
-        file.data.slug = slugifyFilePath(file.data.relativePath)
+        file.data.slug = slugifyFilePath(path.posix.relative(argv.directory, file.path) as FilePath)
+        file.data.filePath = fp

        const ast = processor.parse(file)
        const newAst = await processor.run(ast, file)
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -59,7 +59,6 @@ a {
  text-decoration: none;
  transition: color 0.2s ease;
  color: var(--secondary);
-  display: inline-block;

  &:hover {
    color: var(--tertiary) !important;
@@ -70,7 +69,6 @@ a {
    background-color: var(--highlight);
    padding: 0 0.1rem;
    border-radius: 5px;
-    line-height: 1.4rem;

    &:has(> img) {
      background-color: none;
@@ -78,15 +76,6 @@ a {
      padding: 0;
    }
  }
-
-  &.external .external-icon {
-    height: 1ex;
-    margin: 0 0.15em;
-
-    > path {
-      fill: var(--dark);
-    }
-  }
 }

 .desktop-only {
@@ -339,11 +328,10 @@ figure[data-rehype-pretty-code-figure] {

 pre {
  font-family: var(--codeFont);
-  padding: 0 0.5rem;
+  padding: 0.5rem;
  border-radius: 5px;
  overflow-x: auto;
  border: 1px solid var(--lightgray);
-  position: relative;

  &:has(> code.mermaid) {
    border: none;
--- a/quartz/util/path.test.ts
+++ b/quartz/util/path.test.ts
@@ -105,9 +105,6 @@ describe("transforms", () => {
        ["index.md", "index"],
        ["test.mp4", "test.mp4"],
        ["note with spaces.md", "note-with-spaces"],
-        ["notes.with.dots.md", "notes.with.dots"],
-        ["test/special chars?.md", "test/special-chars-q"],
-        ["test/special chars #3.md", "test/special-chars-3"],
      ],
      path.slugifyFilePath,
      path.isFilePath,
--- a/quartz/util/path.ts
+++ b/quartz/util/path.ts
@@ -1,9 +1,5 @@
 import { slug as slugAnchor } from "github-slugger"
 import type { Element as HastElement } from "hast"
-import rfdc from "rfdc"
-
-export const clone = rfdc()
-
 // this file must be isomorphic so it can't use node libs (e.g. path)

 export const QUARTZ = "quartz"
@@ -50,9 +46,7 @@ export function getFullSlug(window: Window): FullSlug {
 function sluggify(s: string): string {
  return s
    .split("/")
-    .map((segment) =>
-      segment.replace(/\s/g, "-").replace(/%/g, "-percent").replace(/\?/g, "-q").replace(/#/g, ""),
-    ) // slugify all segments
+    .map((segment) => segment.replace(/\s/g, "-").replace(/%/g, "-percent").replace(/\?/g, "-q")) // slugify all segments
    .join("/") // always use / as sep
    .replace(/\/$/, "")
 }
@@ -127,8 +121,7 @@ const _rebaseHastElement = (
  }
 }

-export function normalizeHastElement(rawEl: HastElement, curBase: FullSlug, newBase: FullSlug) {
-  const el = clone(rawEl) // clone so we dont modify the original page
+export function normalizeHastElement(el: HastElement, curBase: FullSlug, newBase: FullSlug) {
  _rebaseHastElement(el, "src", curBase, newBase)
  _rebaseHastElement(el, "href", curBase, newBase)
  if (el.children) {
--- a/quartz/util/resources.tsx
+++ b/quartz/util/resources.tsx
@@ -26,12 +26,9 @@ export function JSResourceToScriptElement(resource: JSResource, preserve?: boole
  } else {
    const content = resource.script
    return (
-      <script
-        key={randomUUID()}
-        type={scriptType}
-        spa-preserve={spaPreserve}
-        dangerouslySetInnerHTML={{ __html: content }}
-      ></script>
+      <script key={randomUUID()} type={scriptType} spa-preserve={spaPreserve}>
+        {content}
+      </script>
    )
  }
 }