pkg: bump version to 4.1.3

2023-12-18 09:49:55 -08:00
26 changed files with 188 additions and 335 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/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -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/showcase.md
+++ b/docs/showcase.md
@@ -21,6 +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/)

 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.4",
+  "version": "4.1.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@jackyzha0/quartz",
-      "version": "4.1.4",
+      "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.4",
+  "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
@@ -49,11 +49,11 @@ const config: QuartzConfig = {
      Plugin.CreatedModifiedDate({
        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/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/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -68,9 +68,8 @@ 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("/")
+          const folderParts = file.filePath?.split("/")
          if (folderParts) {
-            // 2nd last to exclude the /index
            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
--- 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/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);
--- 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,7 +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"

 type ComponentResources = {
  css: string[]
@@ -55,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(
@@ -91,30 +85,17 @@ 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 });
+      gtag(\`js\`, new Date());
+      gtag(\`config\`, \`${tagId}\`, { send_page_view: false });
  
-      document.addEventListener("nav", () => {
-        gtag("event", "page_view", {
+      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")
@@ -184,11 +165,8 @@ 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([
        emit({
          slug: "index" as FullSlug,
--- a/quartz/plugins/emitters/contentIndex.ts
+++ b/quartz/plugins/emitters/contentIndex.ts
@@ -2,7 +2,7 @@ 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"
@@ -37,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)
@@ -52,8 +52,8 @@ function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: nu

  const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<item>
    <title>${escapeHTML(content.title)}</title>
-    <link>${joinSegments(root, encodeURI(slug))}</link>
-    <guid>${joinSegments(root, 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>`
--- 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/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,14 +19,12 @@ interface Options {
  /** Strips folders from a link so that it looks nice */
  prettyLinks: boolean
  openLinksInNewTab: boolean
-  lazyLoad: boolean
 }

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

 export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
@@ -37,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()

@@ -54,8 +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[]
-                classes.push(isAbsoluteUrl(dest) ? "external" : "internal")
+                node.properties.className ??= []
+                node.properties.className.push(isAbsoluteUrl(dest) ? "external" : "internal")

                // Check if the link has alias text
                if (
@@ -64,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"
@@ -115,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,5 +1,5 @@
 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"
@@ -105,8 +105,6 @@ function canonicalizeCallout(calloutName: string): keyof typeof callouts {
  return calloutMapping[callout] ?? "note"
 }

-export const externalLinkRegex = /^https?:\/\//i
-
 // !?               -> optional embedding
 // \[\[             -> open brace
 // ([^\[\]\|\#]+)   -> one or more non-special characters ([,],|, or #) (name)
@@ -160,19 +158,13 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
        }

        src = src.replaceAll(wikilinkRegex, (value, ...capture) => {
-          const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = 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}]]`
        })
      }
@@ -451,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) => {
--- 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
@@ -328,7 +328,7 @@ 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);
--- 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"
@@ -125,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>
    )
  }
 }