minify js scripts

.github/dependabot.yml

@@ -1,11 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "weekly"

.github/workflows/ci.yaml

@@ -7,7 +7,6 @@ on:
   push:
     branches:
       - v4
-  workflow_dispatch:
 
 jobs:
   build-and-test:
@@ -19,17 +18,17 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 18
 
       - name: Cache dependencies
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -47,26 +46,8 @@ jobs:
       - name: Ensure Quartz builds, check bundle info
         run: npx quartz build --bundleInfo
 
-  publish-tag:
-    if: ${{ github.repository == 'jackyzha0/quartz' && github.ref == 'refs/heads/v4' }}
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Get package version
-        run: node -p -e '`PACKAGE_VERSION=${require("./package.json").version}`' >> $GITHUB_ENV
       - name: Create release tag
-        uses: pkgdeps/git-tag-action@v3
+        uses: Klemensas/action-autotag@stable
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          github_repo: ${{ github.repository }}
-          version: ${{ env.PACKAGE_VERSION }}
-          git_commit_sha: ${{ github.sha }}
-          git_tag_prefix: "v"
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          tag_prefix: "v"

.node-version

@@ -1 +0,0 @@
-v20.9.0

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)

docs/advanced/creating components.md

@@ -129,11 +129,11 @@ export default (() => {
     return <button id="btn">Click me</button>
   }
 
-  YourComponent.beforeDOMLoaded = `
+  YourComponent.beforeDOM = `
   console.log("hello from before the page loads!")
   `
 
-  YourComponent.afterDOMLoaded = `
+  YourComponent.afterDOM = `
   document.getElementById('btn').onclick = () => {
     alert('button clicked!')
   }
@@ -156,13 +156,12 @@ document.addEventListener("nav", () => {
   // do page specific logic here
   // e.g. attach event listeners
   const toggleSwitch = document.querySelector("#switch") as HTMLInputElement
+  toggleSwitch.removeEventListener("change", switchTheme)
   toggleSwitch.addEventListener("change", switchTheme)
-  window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
 })
 ```
 
-It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks.
-This will get called on page navigation.
+It is best practice to also unmount any existing event handlers to prevent memory leaks.
 
 #### Importing Code
 
@@ -180,7 +179,7 @@ export default (() => {
     return <button id="btn">Click me</button>
   }
 
-  YourComponent.afterDOMLoaded = script
+  YourComponent.afterDOM = script
   return YourComponent
 }) satisfies QuartzComponentConstructor
 ```

docs/advanced/making plugins.md

@@ -53,12 +53,12 @@ All transformer plugins must define at least a `name` field to register the plug
 
 Normally for both `remark` and `rehype`, you can find existing plugins that you can use to . If you'd like to create your own `remark` or `rehype` plugin, checkout the [guide to creating a plugin](https://unifiedjs.com/learn/guide/create-a-plugin/) using `unified` (the underlying AST parser and transformer library).
 
-A good example of a transformer plugin that borrows from the `remark` and `rehype` ecosystems is the [[plugins/Latex|Latex]] plugin:
+A good example of a transformer plugin that borrows from the `remark` and `rehype` ecosystems is the [[Latex]] plugin:
 
 ```ts title="quartz/plugins/transformers/latex.ts"
 import remarkMath from "remark-math"
 import rehypeKatex from "rehype-katex"
-import rehypeMathjax from "rehype-mathjax/svg"
+import rehypeMathjax from "rehype-mathjax/svg.js"
 import { QuartzTransformerPlugin } from "../types"
 
 interface Options {
@@ -84,14 +84,10 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
     externalResources() {
       if (engine === "katex") {
         return {
-          css: [
-            // base css
-            "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css",
-          ],
+          css: ["https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"],
           js: [
             {
-              // fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
-              src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js",
+              src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
               loadTime: "afterDOMReady",
               contentType: "external",
             },
@@ -220,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
@@ -260,11 +259,11 @@ export const ContentPage: QuartzEmitterPlugin = () => {
     ...defaultContentPageLayout,
     pageBody: Content(),
   }
-  const { head, header, beforeBody, pageBody, afterBody, left, right, footer } = layout
+  const { head, header, beforeBody, pageBody, left, right, footer } = layout
   return {
     name: "ContentPage",
     getQuartzComponents() {
-      return [head, ...header, ...beforeBody, pageBody, ...afterBody, ...left, ...right, footer]
+      return [head, ...header, ...beforeBody, pageBody, ...left, ...right, footer]
     },
     async emit(ctx, content, resources, emit): Promise<FilePath[]> {
       const cfg = ctx.cfg.configuration
@@ -282,7 +281,7 @@ export const ContentPage: QuartzEmitterPlugin = () => {
           allFiles,
         }
 
-        const content = renderPage(cfg, slug, componentData, opts, externalResources)
+        const content = renderPage(slug, componentData, opts, externalResources)
         const fp = await emit({
           content,
           slug: file.data.slug!,

docs/advanced/paths.md

@@ -48,4 +48,4 @@ Here are the main types of slugs with a rough description of each type of path:
 - `SimpleSlug`: cannot be relative and shouldn't have `/index` as an ending or a file extension. It _can_ however have a trailing slash to indicate a folder path.
 - `RelativeURL`: must start with `.` or `..` to indicate it's a relative URL. Shouldn't have `/index` as an ending or a file extension but can contain a trailing slash.
 
-To get a clearer picture of how these relate to each other, take a look at the path tests in `quartz/util/path.test.ts`.
+To get a clearer picture of how these relate to each other, take a look at the path tests in `quartz/path.test.ts`.

docs/authoring content.md

@@ -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.
 
@@ -28,18 +28,21 @@ The rest of your content lives here. You can use **Markdown** here :)
 Some common frontmatter fields that are natively supported by Quartz:
 
 - `title`: Title of the page. If it isn't provided, Quartz will use the name of the file as the title.
-- `description`: Description of the page used for link previews.
-- `permalink`: A custom URL for the page that will remain constant even if the path to the file changes.
 - `aliases`: Other names for this note. This is a list of strings.
-- `tags`: Tags for this note.
 - `draft`: Whether to publish the page or not. This is one way to make [[private pages|pages private]] in Quartz.
 - `date`: A string representing the day the note was published. Normally uses `YYYY-MM-DD` format.
 
 ## Syncing your Content
 
-When your Quartz is at a point you're happy with, you can save your changes to GitHub.
-First, make sure you've [[setting up your GitHub repository|already setup your GitHub repository]] and then do `npx quartz sync`.
+When your Quartz is at a point you're happy with, you can save your changes to GitHub by doing `npx quartz sync`.
 
-## Customization
-
-Frontmatter parsing for `title`, `tags`, `aliases` and `cssclasses` is a functionality of the [[Frontmatter]] plugin, `date` is handled by the [[CreatedModifiedDate]] plugin and `description` by the [[Description]] plugin. See the plugin pages for customization options.
+> [!hint] Flags and options
+> For full help options, you can run `npx quartz sync --help`.
+>
+> Most of these have sensible defaults but you can override them if you have a custom setup:
+>
+> - `-d` or `--directory`: the content folder. This is normally just `content`
+> - `-v` or `--verbose`: print out extra logging information
+> - `--commit` or `--no-commit`: whether to make a `git` commit for your changes
+> - `--push` or `--no-push`: whether to push updates to your GitHub fork of Quartz
+> - `--pull` or `--no-pull`: whether to try and pull in any updates from your GitHub fork (i.e. from other devices) before pushing

docs/configuration.md

@@ -25,21 +25,14 @@ This part of the configuration concerns anything that can affect the whole site.
 - `enablePopovers`: whether to enable [[popover previews]] on your site.
 - `analytics`: what to use for analytics on your site. Values can be
   - `null`: don't use analytics;
-  - `{ provider: 'google', tagId: '<your-google-tag>' }`: use Google Analytics;
-  - `{ provider: 'plausible' }` (managed) or `{ provider: 'plausible', host: '<your-plausible-host>' }` (self-hosted): use [Plausible](https://plausible.io/);
-  - `{ provider: 'umami', host: '<your-umami-host>', websiteId: '<your-umami-website-id>' }`: use [Umami](https://umami.is/);
-  - `{ provider: 'goatcounter', websiteId: 'my-goatcounter-id' }` (managed) or `{ provider: 'goatcounter', websiteId: 'my-goatcounter-id', host: 'my-goatcounter-domain.com', scriptSrc: 'https://my-url.to/counter.js' }` (self-hosted) use [GoatCounter](https://goatcounter.com);
-  - `{ provider: 'posthog', apiKey: '<your-posthog-project-apiKey>', host: '<your-posthog-host>' }`: use [Posthog](https://posthog.com/);
-  - `{ provider: 'tinylytics', siteId: '<your-site-id>' }`: use [Tinylytics](https://tinylytics.app/);
-  - `{ provider: 'cabin' }` or `{ provider: 'cabin', host: 'https://cabin.example.com' }` (custom domain): use [Cabin](https://withcabin.com);
-- `locale`: used for [[i18n]] and date formatting
+  - `{ provider: 'plausible' }`: use [Plausible](https://plausible.io/), a privacy-friendly alternative to Google Analytics; or
+  - `{ provider: 'google', tagId: <your-google-tag> }`: use Google Analytics
 - `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
-  - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`.
+  - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`
   - Note that Quartz 4 will avoid using this as much as possible and use relative URLs whenever it can to make sure your site works no matter _where_ you end up actually deploying it.
 - `ignorePatterns`: a list of [glob](<https://en.wikipedia.org/wiki/Glob_(programming)>) patterns that Quartz should ignore and not search through when looking for files inside the `content` folder. See [[private pages]] for more details.
 - `defaultDateType`: whether to use created, modified, or published as the default date to display on pages and page listings.
 - `theme`: configure how the site looks.
-  - `cdnCaching`: If `true` (default), use Google CDN to cache the fonts. This will generally will be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
   - `typography`: what fonts to use. Any font available on [Google Fonts](https://fonts.google.com/) works here.
     - `header`: Font to use for headers
     - `code`: Font for inline and block quotes.
@@ -53,7 +46,6 @@ This part of the configuration concerns anything that can affect the whole site.
     - `secondary`: link colour, current [[graph view|graph]] node
     - `tertiary`: hover states and visited [[graph view|graph]] nodes
     - `highlight`: internal link background, highlighted text, [[syntax highlighting|highlighted lines of code]]
-    - `textHighlight`: markdown highlighted text background
 
 ## Plugins
 
@@ -61,7 +53,7 @@ You can think of Quartz plugins as a series of transformations over content.
 
 ![[quartz transform pipeline.png]]
 
-```ts title="quartz.config.ts"
+```ts
 plugins: {
   transformers: [...],
   filters: [...],
@@ -69,40 +61,22 @@ plugins: {
 }
 ```
 
-- [[tags/plugin/transformer|Transformers]] **map** over content (e.g. parsing frontmatter, generating a description)
-- [[tags/plugin/filter|Filters]] **filter** content (e.g. filtering out drafts)
-- [[tags/plugin/emitter|Emitters]] **reduce** over content (e.g. creating an RSS feed or pages that list all files with a specific tag)
+- [[making plugins#Transformers|Transformers]] **map** over content (e.g. parsing frontmatter, generating a description)
+- [[making plugins#Filters|Filters]] **filter** content (e.g. filtering out drafts)
+- [[making plugins#Emitters|Emitters]] **reduce** over content (e.g. creating an RSS feed or pages that list all files with a specific tag)
 
-You can customize the behaviour of Quartz by adding, removing and reordering plugins in the `transformers`, `filters` and `emitters` fields.
+By adding, removing, and reordering plugins from the `tranformers`, `filters`, and `emitters` fields, you can customize the behaviour of Quartz.
 
 > [!note]
-> Each node is modified by every transformer _in order_. Some transformers are position sensitive, so you may need to pay particular attention to whether they need to come before or after certain other plugins.
+> Each node is modified by every transformer _in order_. Some transformers are position-sensitive so you may need to take special note of whether it needs come before or after any other particular plugins.
 
-You should take care to add the plugin to the right entry corresponding to its plugin type. For example, to add the [[ExplicitPublish]] plugin (a [[tags/plugin/filter|Filter]]), you would add the following line:
+Additionally, plugins may also have their own configuration settings that you can pass in. For example, the [[Latex]] plugin allows you to pass in a field specifying the `renderEngine` to choose between Katex and MathJax.
 
-```ts title="quartz.config.ts"
-filters: [
-  ...
-  Plugin.ExplicitPublish(),
-  ...
-],
-```
-
-To remove a plugin, you should remove all occurrences of it in the `quartz.config.ts`.
-
-To customize plugins further, some plugins may also have their own configuration settings that you can pass in. If you do not pass in a configuration, the plugin will use its default settings.
-
-For example, the [[plugins/Latex|Latex]] plugin allows you to pass in a field specifying the `renderEngine` to choose between Katex and MathJax.
-
-```ts title="quartz.config.ts"
+```ts
 transformers: [
-  Plugin.FrontMatter(), // use default options
-  Plugin.Latex({ renderEngine: "katex" }), // set some custom options
+  Plugin.FrontMatter(), // uses default options
+  Plugin.Latex({ renderEngine: "katex" }), // specify some options
 ]
 ```
 
-Some plugins are included by default in the[ `quartz.config.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz.config.ts), but there are more available.
-
-You can see a list of all plugins and their configuration options [[tags/plugin|here]].
-
-If you'd like to make your own plugins, see the [[making plugins|making custom plugins]] guide.
+If you'd like to make your own plugins, read the guide on [[making plugins]] for more information.

docs/features/Latex.md

@@ -1,7 +1,6 @@
 ---
-title: LaTeX
 tags:
-  - feature/transformer
+  - plugin/transformer
 ---
 
 Quartz uses [Katex](https://katex.org/) by default to typeset both inline and block math expressions at build time.
@@ -39,20 +38,6 @@ a & b & c
 \end{bmatrix}
 $$
 
-$$
-\begin{array}{rll}
-E \psi &= H\psi & \text{Expanding the Hamiltonian Operator} \\
-&= -\frac{\hbar^2}{2m}\frac{\partial^2}{\partial x^2} \psi + \frac{1}{2}m\omega x^2 \psi & \text{Using the ansatz $\psi(x) = e^{-kx^2}f(x)$, hoping to cancel the $x^2$ term} \\
-&= -\frac{\hbar^2}{2m} [4k^2x^2f(x)+2(-2kx)f'(x) + f''(x)]e^{-kx^2} + \frac{1}{2}m\omega x^2 f(x)e^{-kx^2} &\text{Removing the $e^{-kx^2}$ term from both sides} \\
-& \Downarrow \\
-Ef(x) &= -\frac{\hbar^2}{2m} [4k^2x^2f(x)-4kxf'(x) + f''(x)] + \frac{1}{2}m\omega x^2 f(x) & \text{Choosing $k=\frac{im}{2}\sqrt{\frac{\omega}{\hbar}}$ to cancel the $x^2$ term, via $-\frac{\hbar^2}{2m}4k^2=\frac{1}{2}m \omega$} \\
-&= -\frac{\hbar^2}{2m} [-4kxf'(x) + f''(x)] \\
-\end{array}
-$$
-
-> [!warn]
-> Due to limitations in the [underlying parsing library](https://github.com/remarkjs/remark-math), block math in Quartz requires the `$$` delimiters to be on newlines like above.
-
 ### Inline Math
 
 Similarly, inline math can be rendered by delimiting math expression with a single `$`. For example, `$e^{i\pi} = -1$` produces $e^{i\pi} = -1$
@@ -68,15 +53,11 @@ For example:
 - Incorrect: `I have $1 and you have $2` produces I have $1 and you have $2
 - Correct: `I have \$1 and you have \$2` produces I have \$1 and you have \$2
 
-### Using mhchem
+## MathJax
 
-Add the following import to the top of `quartz/plugins/transformers/latex.ts` (before all the other
-imports):
-
-```ts title="quartz/plugins/transformers/latex.ts"
-import "katex/contrib/mhchem"
-```
+In `quartz.config.ts`, you can configure Quartz to use [MathJax SVG rendering](https://docs.mathjax.org/en/latest/output/svg.html) by replacing `Plugin.Latex({ renderEngine: 'katex' })` with `Plugin.Latex({ renderEngine: 'mathjax' })`
 
 ## Customization
 
-Latex parsing is a functionality of the [[plugins/Latex|Latex]] plugin. See the plugin page for customization options.
+- Removing Latex support: remove all instances of `Plugin.Latex()` from `quartz.config.ts`.
+- Plugin: `quartz/plugins/transformers/latex.ts`

docs/features/Mermaid diagrams.md

@@ -1,15 +1,9 @@
----
-title: "Mermaid Diagrams"
-tags:
-  - feature/transformer
----
-
 Quartz supports Mermaid which allows you to add diagrams and charts to your notes. Mermaid supports a range of diagrams, such as [flow charts](https://mermaid.js.org/syntax/flowchart.html), [sequence diagrams](https://mermaid.js.org/syntax/sequenceDiagram.html), and [timelines](https://mermaid.js.org/syntax/timeline.html). This is enabled as a part of [[Obsidian compatibility]] and can be configured and enabled/disabled from that plugin.
 
 By default, Quartz will render Mermaid diagrams to match the site theme.
 
 > [!warning]
-> Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that [[ObsidianFlavoredMarkdown]] is _after_ [[SyntaxHighlighting]].
+> Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is _after_ `Plugin.SyntaxHighlighting()`.
 
 ## Syntax
 

docs/features/Obsidian compatibility.md

@@ -1,17 +1,31 @@
 ---
-title: "Obsidian Compatibility"
 tags:
-  - feature/transformer
+  - plugin/transformer
 ---
 
 Quartz was originally designed as a tool to publish Obsidian vaults as websites. Even as the scope of Quartz has widened over time, it hasn't lost the ability to seamlessly interoperate with Obsidian.
 
-By default, Quartz ships with the [[ObsidianFlavoredMarkdown]] plugin, which is a transformer plugin that adds support for [Obsidian Flavored Markdown](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown). This includes support for features like [[wikilinks]] and [[Mermaid diagrams]].
+By default, Quartz ships with `Plugin.ObsidianFlavoredMarkdown` which is a transformer plugin that adds support for [Obsidian Flavored Markdown](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown). This includes support for features like [[wikilinks]] and [[Mermaid diagrams]].
 
-It also ships with support for [frontmatter parsing](https://help.obsidian.md/Editing+and+formatting/Properties) with the same fields that Obsidian uses through the [[Frontmatter]] transformer plugin.
+It also ships with support for [frontmatter parsing](https://help.obsidian.md/Editing+and+formatting/Properties) with the same fields that Obsidian uses through the `Plugin.FrontMatter` transformer plugin.
 
-Finally, Quartz also provides [[CrawlLinks]] plugin, which allows you to customize Quartz's link resolution behaviour to match Obsidian.
+Finally, Quartz also provides `Plugin.CrawlLinks` which allows you to customize Quartz's link resolution behaviour to match Obsidian.
 
 ## Configuration
 
-This functionality is provided by the [[ObsidianFlavoredMarkdown]], [[Frontmatter]] and [[CrawlLinks]] plugins. See the plugin pages for customization options.
+- Frontmatter parsing:
+  - Disabling: remove all instances of `Plugin.FrontMatter()` from `quartz.config.ts`.
+  - Customize default values for frontmatter: edit `quartz/plugins/transformers/frontmatter.ts`
+- Obsidian Flavored Markdown:
+  - Disabling: remove all instances of `Plugin.ObsidianFlavoredMarkdown()` from `quartz.config.ts`
+  - Customizing features: `Plugin.ObsidianFlavoredMarkdown` has several other options to toggle on and off:
+    - `comments`: whether to enable `%%` style Obsidian comments. Defaults to `true`
+    - `highlight`: whether to enable `==` style highlights. Defaults to `true`
+    - `wikilinks`: whether to enable turning [[wikilinks]] into regular links. Defaults to `true`
+    - `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`
+    - `enableInHtmlEmbed`: whether to try and parse Obsidian flavoured markdown in raw HTML. 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`

docs/features/OxHugo compatibility.md

@@ -1,12 +1,11 @@
 ---
-title: "OxHugo Compatibility"
 tags:
-  - feature/transformer
+  - plugin/transformer
 ---
 
 [org-roam](https://www.orgroam.com/) is a plain-text personal knowledge management system for [emacs](https://en.wikipedia.org/wiki/Emacs). [ox-hugo](https://github.com/kaushalmodi/ox-hugo) is org exporter backend that exports `org-mode` files to [Hugo](https://gohugo.io/) compatible Markdown.
 
-Because the Markdown generated by ox-hugo is not pure Markdown but Hugo specific, we need to transform it to fit into Quartz. This is done by the [[OxHugoFlavoredMarkdown]] plugin. Even though this plugin was written with `ox-hugo` in mind, it should work for any Hugo specific Markdown.
+Because the Markdown generated by ox-hugo is not pure Markdown but Hugo specific, we need to transform it to fit into Quartz. This is done by `Plugin.OxHugoFlavouredMarkdown`. Even though this [[making plugins|plugin]] was written with `ox-hugo` in mind, it should work for any Hugo specific Markdown.
 
 ```typescript title="quartz.config.ts"
 plugins: {
@@ -26,4 +25,15 @@ Quartz by default doesn't understand `org-roam` files as they aren't Markdown. Y
 
 ## Configuration
 
-This functionality is provided by the [[OxHugoFlavoredMarkdown]] plugin. See the plugin page for customization options.
+- Link resolution
+  - `wikilinks`: Whether to replace `{{ relref }}` with Quartz [[wikilinks]]
+  - `removePredefinedAnchor`: Whether to remove [pre-defined anchor set by ox-hugo](https://ox-hugo.scripter.co/doc/anchors/).
+- Image handling
+  - `replaceFigureWithMdImg`: Whether to replace `<figure/>` with `![]()`
+- Formatting
+  - `removeHugoShortcode`: Whether to remove hugo shortcode syntax (`{{}}`)
+  - `replaceOrgLatex`: Whether to replace org-mode formatting for latex fragments with what `Plugin.Latex` supports.
+
+> [!warning]
+>
+> While you can use `Plugin.OxHugoFlavoredMarkdown` and `Plugin.ObsidianFlavoredMarkdown` together, it's not recommended because it might mutate the file in unexpected ways. Use with caution.

docs/features/RSS Feed.md

@@ -1,5 +1,7 @@
-Quartz emits an RSS feed for all the content on your site by generating an `index.xml` file that RSS readers can subscribe to. Because of the RSS spec, this requires the `baseUrl` property in your [[configuration]] to be set properly for RSS readers to pick it up properly.
+Quartz creates an RSS feed for all the content on your site by generating an `index.xml` file that RSS readers can subscribe to. Because of the RSS spec, this requires the `baseUrl` property in your [[configuration]] to be set properly for RSS readers to pick it up properly.
 
 ## Configuration
 
-This functionality is provided by the [[ContentIndex]] plugin. See the plugin page for customization options.
+- Remove RSS feed: set the `enableRSS` field of `Plugin.ContentIndex` in `quartz.config.ts` to be `false`.
+- Change number of entries: set the `rssLimit` field of `Plugin.ContentIndex` to be the desired value. It defaults to latest 10 items.
+- Use rich HTML output in RSS: set `rssFullHtml` field of `Plugin.ContentIndex` to be `true`.

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
 })
 ```
 

docs/features/callouts.md

@@ -1,7 +1,7 @@
 ---
 title: Callouts
 tags:
-  - feature/transformer
+  - plugin/transformer
 ---
 
 Quartz supports the same Admonition-callout syntax as Obsidian.
@@ -19,78 +19,68 @@ This includes
 See [documentation on supported types and syntax here](https://help.obsidian.md/Editing+and+formatting/Callouts).
 
 > [!warning]
-> Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that [[ObsidianFlavoredMarkdown]] is _after_ [[SyntaxHighlighting]].
+> Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is _after_ `Plugin.SyntaxHighlighting()`.
 
 ## Customization
 
-The callouts are a functionality of the [[ObsidianFlavoredMarkdown]] plugin. See the plugin page for how to enable or disable them.
-
-You can edit the icons by customizing `quartz/styles/callouts.scss`.
-
-### Add custom callouts
-
-By default, custom callouts are handled by applying the `note` style. To make fancy ones, you have to add these lines to `custom.scss`.
-
-```scss title="quartz/styles/custom.scss"
-.callout {
-  &[data-callout="custom"] {
-    --color: #customcolor;
-    --border: #custombordercolor;
-    --bg: #custombg;
-    --callout-icon: url("data:image/svg+xml; utf8, <custom formatted svg>"); //SVG icon code
-  }
-}
-```
-
-> [!warning]
-> Don't forget to ensure that the SVG is URL encoded before putting it in the CSS. You can use tools like [this one](https://yoksel.github.io/url-encoder/) to help you do that.
+- Disable callouts: simply pass `callouts: false` to the plugin: `Plugin.ObsidianFlavoredMarkdown({ callouts: false })`
+- Editing icons: `quartz/plugins/transformers/ofm.ts`
 
 ## Showcase
 
 > [!info]
 > Default title
 
-> [!question]+ Can callouts be _nested_?
+> [!question]+ Can callouts be nested?
 >
 > > [!todo]- Yes!, they can. And collapsed!
 > >
 > > > [!example] You can even use multiple layers of nesting.
 
-> [!note]
-> Aliases: "note"
+> [!EXAMPLE] Examples
+>
+> Aliases: example
 
-> [!abstract]
-> Aliases: "abstract", "summary", "tldr"
+> [!note] Notes
+>
+> Aliases: note
 
-> [!info]
-> Aliases: "info"
+> [!abstract] Summaries
+>
+> Aliases: abstract, summary, tldr
 
-> [!todo]
-> Aliases: "todo"
+> [!info] Info
+>
+> Aliases: info, todo
 
-> [!tip]
-> Aliases: "tip", "hint", "important"
+> [!tip] Hint
+>
+> Aliases: tip, hint, important
 
-> [!success]
-> Aliases: "success", "check", "done"
+> [!success] Success
+>
+> Aliases: success, check, done
 
-> [!question]
-> Aliases: "question", "help", "faq"
+> [!question] Question
+>
+> Aliases: question, help, faq
 
-> [!warning]
-> Aliases: "warning", "attention", "caution"
+> [!warning] Warning
+>
+> Aliases: warning, caution, attention
 
-> [!failure]
-> Aliases: "failure", "missing", "fail"
+> [!failure] Failure
+>
+> Aliases: failure, fail, missing
 
-> [!danger]
-> Aliases: "danger", "error"
+> [!danger] Error
+>
+> Aliases: danger, error
 
-> [!bug]
-> Aliases: "bug"
+> [!bug] Bug
+>
+> Aliases: bug
 
-> [!example]
-> Aliases: "example"
-
-> [!quote]
-> Aliases: "quote", "cite"
+> [!quote] Quote
+>
+> Aliases: quote, cite

docs/features/comments.md

@@ -1,83 +0,0 @@
----
-title: Comments
-tags:
-  - component
----
-
-Quartz also has the ability to hook into various providers to enable readers to leave comments on your site.
-
-![[giscus-example.png]]
-
-As of today, only [Giscus](https://giscus.app/) is supported out of the box but PRs to support other providers are welcome!
-
-## Providers
-
-### Giscus
-
-First, make sure that the [[setting up your GitHub repository|GitHub]] repository you are using for your Quartz meets the following requirements:
-
-1. The **repository is [public](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/setting-repository-visibility#making-a-repository-public)**, otherwise visitors will not be able to view the discussion.
-2. The **[giscus](https://github.com/apps/giscus) app is installed**, otherwise visitors will not be able to comment and react.
-3. The **Discussions feature is turned on** by [enabling it for your repository](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository).
-
-Then, use the [Giscus site](https://giscus.app/#repository) to figure out what your `repoId` and `categoryId` should be. Make sure you select `Announcements` for the Discussion category.
-
-![[giscus-repo.png]]
-
-![[giscus-discussion.png]]
-
-After entering both your repository and selecting the discussion category, Giscus will compute some IDs that you'll need to provide back to Quartz. You won't need to manually add the script yourself as Quartz will handle that part for you but will need these values in the next step!
-
-![[giscus-results.png]]
-
-Finally, in `quartz.layout.ts`, edit the `afterBody` field of `sharedPageComponents` to include the following options but with the values you got from above:
-
-```ts title="quartz.layout.ts"
-afterBody: [
-  Component.Comments({
-    provider: 'giscus',
-    options: {
-      // from data-repo
-      repo: 'jackyzha0/quartz',
-      // from data-repo-id
-      repoId: 'MDEwOlJlcG9zaXRvcnkzODcyMTMyMDg',
-      // from data-category
-      category: 'Announcements',
-      // from data-category-id
-      categoryId: 'DIC_kwDOFxRnmM4B-Xg6',
-    }
-  }),
-],
-```
-
-### Customization
-
-Quartz also exposes a few of the other Giscus options as well and you can provide them the same way `repo`, `repoId`, `category`, and `categoryId` are provided.
-
-```ts
-type Options = {
-  provider: "giscus"
-  options: {
-    repo: `${string}/${string}`
-    repoId: string
-    category: string
-    categoryId: string
-
-    // how to map pages -> discussions
-    // defaults to 'url'
-    mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
-
-    // use strict title matching
-    // defaults to true
-    strict?: boolean
-
-    // whether to enable reactions for the main post
-    // defaults to true
-    reactionsEnabled?: boolean
-
-    // where to put the comment input box relative to the comments
-    // defaults to 'bottom'
-    inputPosition?: "top" | "bottom"
-  }
-}
-```

docs/features/darkmode.md

@@ -12,12 +12,3 @@ Quartz supports darkmode out of the box that respects the user's theme preferenc
 - Component: `quartz/components/Darkmode.tsx`
 - Style: `quartz/components/styles/darkmode.scss`
 - Script: `quartz/components/scripts/darkmode.inline.ts`
-
-You can also listen to the `themechange` event to perform any custom logic when the theme changes.
-
-```js
-document.addEventListener("themechange", (e) => {
-  console.log("Theme changed to " + e.detail.theme) // either "light" or "dark"
-  // your logic here
-})
-```

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
@@ -42,7 +42,7 @@ When passing in your own options, you can omit any or all of these fields if you
 
 Want to customize it even more?
 
-- Removing explorer: remove `Component.Explorer()` from `quartz.layout.ts`
+- Removing table of contents: remove `Component.Explorer()` from `quartz.layout.ts`
   - (optional): After removing the explorer component, you can move the [[table of contents | Table of Contents]] component back to the `left` part of the layout
 - Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]]
 - Component:
@@ -61,7 +61,7 @@ export class FileNode {
   children: FileNode[]  // children of current node
   name: string  // last part of slug
   displayName: string // what actually should be displayed in the explorer
-  file: QuartzPluginData | null // if node is a file, this is the file's metadata. See `QuartzPluginData` for more detail
+  file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail
   depth: number // depth of current node
 
   ... // rest of implementation
@@ -167,19 +167,6 @@ Component.Explorer({
 
 You can customize this by changing the entries of the `omit` set. Simply add all folder or file names you want to remove.
 
-### Remove files by tag
-
-You can access the frontmatter of a file by `node.file?.frontmatter?`. This allows you to filter out files based on their frontmatter, for example by their tags.
-
-```ts title="quartz.layout.ts"
-Component.Explorer({
-  filterFn: (node) => {
-    // exclude files with the tag "explorerexclude"
-    return node.file?.frontmatter?.tags?.includes("explorerexclude") !== true
-  },
-})
-```
-
 ### Show every element in explorer
 
 To override the default filter function that removes the `tags` folder from the explorer, you can set the filter function to `undefined`.

docs/features/folder and tag listings.md

@@ -1,20 +1,18 @@
 ---
 title: Folder and Tag Listings
 tags:
-  - feature/emitter
+  - plugin/emitter
 ---
 
-Quartz emits listing pages for any folders and tags you have.
+Quartz creates listing pages for any folders and tags you have.
 
 ## Folder Listings
 
 Quartz will generate an index page for all the pages under that folder. This includes any content that is multiple levels deep.
 
-Additionally, Quartz will also generate pages for subfolders. Say you have a note in a nested folder `content/abc/def/note.md`. Then Quartz would generate a page for all the notes under `abc` _and_ a page for all the notes under `abc/def`.
+Additionally, Quartz will also generate pages for subfolders. Say you have a note in a nested folder `content/abc/def/note.md`. Then, Quartz would generate a page for all the notes under `abc` _and_ a page for all the notes under `abc/def`.
 
-You can link to the folder listing by referencing its name, plus a trailing slash, like this: `[[advanced/]]` (results in [[advanced/]]).
-
-By default, Quartz will title the page `Folder: <folder name>` and no description. You can override this by creating an `index.md` file in the folder with the `title` [[authoring content#Syntax|frontmatter]] field. Any content you write in this file will also be used in the folder description.
+By default, Quartz will title the page `Folder: <name of folder>` and no description. You can override this by creating an `index.md` file in the folder with the `title` [[authoring content#Syntax|frontmatter]] field. Any content you write in this file will also be used in the description of the folder.
 
 For example, for the folder `content/posts`, you can add another file `content/posts/index.md` to add a specific description for it.
 
@@ -22,12 +20,13 @@ For example, for the folder `content/posts`, you can add another file `content/p
 
 Quartz will also create an index page for each unique tag in your vault and render a list of all notes with that tag.
 
-Quartz also supports tag hierarchies as well (e.g. `plugin/emitter`) and will also render a separate tag page for each level of the tag hierarchy. It will also create a default global tag index page at `/tags` that displays a list of all the tags in your Quartz.
+Quartz also supports tag hierarchies as well (e.g. `plugin/emitter`) and will also render a separate tag page for each layer of the tag hierarchy. It will also create a default global tag index page at `/tags` that displays a list of all the tags in your Quartz.
 
-You can link to the tag listing by referencing its name with a `tag/` prefix, like this: `[[tags/plugin]]` (results in [[tags/plugin]]).
-
-As with folder listings, you can also provide a description and title for a tag page by creating a file for each tag. For example, if you wanted to create a custom description for the #component tag, you would create a file at `content/tags/component.md` with a title and description.
+Like folder listings, you can also provide a description and title for a tag page by creating a file for each tag. For example, if you wanted to create a custom description for the #component tag, you would create a file at `content/tags/component.md` with a title and description.
 
 ## Customization
 
-Quartz allows you to define a custom sort ordering for content on both page types. The folder listings are a functionality of the [[FolderPage]] plugin, the tag listings of the [[TagPage]] plugin. See the plugin pages for customization options.
+The layout for both the folder and content pages can be customized. By default, they use the `defaultListPageLayout` in `quartz.layouts.ts`. If you'd like to make more involved changes to the layout and don't mind editing some [[creating components|Quartz components]], you can take a look at `quartz/components/pages/FolderContent.tsx` and `quartz/components/pages/TagContent.tsx` respectively.
+
+- Removing folder listings: remove `Plugin.FolderPage()` from `emitters` in `quartz.config.ts`
+- Removing tag listings: remove `Plugin.TagPage()` from `emitters` in `quartz.config.ts`

docs/features/i18n.md

@@ -1,18 +0,0 @@
----
-title: Internationalization
----
-
-Internationalization allows users to translate text in the Quartz interface into various supported languages without needing to make extensive code changes. This can be changed via the `locale` [[configuration]] field in `quartz.config.ts`.
-
-The locale field generally follows a certain format: `{language}-{REGION}`
-
-- `{language}` is usually a [2-letter lowercase language code](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes).
-- `{REGION}` is usually a [2-letter uppercase region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)
-
-> [!tip] Interested in contributing?
-> We [gladly welcome translation PRs](https://github.com/jackyzha0/quartz/tree/v4/quartz/i18n/locales)! To contribute a translation, do the following things:
->
-> 1. In the `quartz/i18n/locales` folder, copy the `en-US.ts` file.
-> 2. Rename it to `{language}-{REGION}.ts` so it matches a locale of the format shown above.
-> 3. Fill in the translations!
-> 4. Add the entry under `TRANSLATIONS` in `quartz/i18n/index.ts`.

docs/features/popover previews.md

@@ -8,8 +8,6 @@ By default, Quartz only fetches previews for pages inside your vault due to [COR
 
 When [[creating components|creating your own components]], you can include this `popover-hint` class to also include it in the popover.
 
-Similar to Obsidian, [[quartz layout.png|images referenced using wikilinks]] can also be viewed as popups.
-
 ## Configuration
 
 - Remove popovers: set the `enablePopovers` field in `quartz.config.ts` to be `false`.

docs/features/private pages.md

@@ -1,16 +1,16 @@
 ---
 title: Private Pages
 tags:
-  - feature/filter
+  - plugin/filter
 ---
 
 There may be some notes you want to avoid publishing as a website. Quartz supports this through two mechanisms which can be used in conjunction:
 
 ## Filter Plugins
 
-[[making plugins#Filters|Filter plugins]] are plugins that filter out content based off of certain criteria. By default, Quartz uses the [[RemoveDrafts]] plugin which filters out any note that has `draft: true` in the frontmatter.
+[[making plugins#Filters|Filter plugins]] are plugins that filter out content based off of certain criteria. By default, Quartz uses the `Plugin.RemoveDrafts` plugin which filters out any note that has `draft: true` in the frontmatter.
 
-If you'd like to only publish a select number of notes, you can instead use [[ExplicitPublish]] which will filter out all notes except for any that have `publish: true` in the frontmatter.
+If you'd like to only publish a select number of notes, you can instead use `Plugin.ExplicitPublish` which will filter out all notes except for any that have `publish: true` in the frontmatter.
 
 > [!warning]
 > Regardless of the filter plugin used, **all non-markdown files will be emitted and available publically in the final build.** This includes files such as images, voice recordings, PDFs, etc. One way to prevent this and still be able to embed local images is to create a folder specifically for public media and add the following two patterns to the ignorePatterns array.

docs/features/recent notes.md

@@ -3,13 +3,12 @@ title: Recent Notes
 tags: component
 ---
 
-Quartz can generate a list of recent notes based on some filtering and sorting criteria. Though this component isn't included in any [[layout]] by default, you can add it by using `Component.RecentNotes` in `quartz.layout.ts`.
+Quartz can generate a list of recent notes for based on some filtering and sorting criteria. Though this component isn't included in any [[layout]] by default, you can add it by using `Component.RecentNotes`.
 
 ## Customization
 
 - Changing the title from "Recent notes": pass in an additional parameter to `Component.RecentNotes({ title: "Recent writing" })`
 - Changing the number of recent notes: pass in an additional parameter to `Component.RecentNotes({ limit: 5 })`
-- Display the note's tags (defaults to true): `Component.RecentNotes({ showTags: false })`
 - Show a 'see more' link: pass in an additional parameter to `Component.RecentNotes({ linkToMore: "tags/components" })`. This field should be a full slug to a page that exists.
 - Customize filtering: pass in an additional parameter to `Component.RecentNotes({ filter: someFilterFunction })`. The filter function should be a function that has the signature `(f: QuartzPluginData) => boolean`.
 - Customize sorting: pass in an additional parameter to `Component.RecentNotes({ sort: someSortFunction })`. By default, Quartz will sort by date and then tie break lexographically. The sort function should be a function that has the signature `(f1: QuartzPluginData, f2: QuartzPluginData) => number`. See `byDateAndAlphabetical` in `quartz/components/PageList.tsx` for an example.

docs/features/syntax highlighting.md

@@ -1,7 +1,7 @@
 ---
 title: Syntax Highlighting
 tags:
-  - feature/transformer
+  - plugin/transformer
 ---
 
 Syntax highlighting in Quartz is completely done at build-time. This means that Quartz only ships pre-calculated CSS to highlight the right words so there is no heavy client-side bundle that does the syntax highlighting.
@@ -95,16 +95,6 @@ const [age, setAge] = useState(50)
 const [name, setName] = useState("Taylor")
 ```
 
-### Inline Highlighting
-
-Append {:lang} to the end of inline code to highlight it like a regular code block.
-
-```
-This is an array `[1, 2, 3]{:js}` of numbers 1 through 3.
-```
-
-This is an array `[1, 2, 3]{:js}` of numbers 1 through 3.
-
 ### Line numbers
 
 Syntax highlighting has line numbers configured automatically. If you want to start line numbers at a specific number, use `showLineNumbers{number}`:
@@ -140,4 +130,6 @@ const [name, setName] = useState('Taylor');
 
 ## Customization
 
-Syntax highlighting is a functionality of the [[SyntaxHighlighting]] plugin. See the plugin page for customization options.
+- Removing syntax highlighting: delete all usages of `Plugin.SyntaxHighlighting()` from `quartz.config.ts`.
+- Style: By default, Quartz uses derivatives of the GitHub light and dark themes. You can customize the colours in the `quartz/styles/syntax.scss` file.
+- Plugin: `quartz/plugins/transformers/syntax.ts`

docs/features/table of contents.md

@@ -2,17 +2,25 @@
 title: "Table of Contents"
 tags:
   - component
-  - feature/transformer
+  - plugin/transformer
 ---
 
-Quartz can automatically generate a table of contents (TOC) from a list of headings on each page. It will also show you your current scrolling position on the page by highlighting headings you've scrolled through with a different color.
+Quartz can automatically generate a table of contents from a list of headings on each page. It will also show you your current scroll position on the site by marking headings you've scrolled through with a different colour.
 
-You can hide the TOC on a page by adding `enableToc: false` to the frontmatter for that page.
+By default, it will show all headers from H1 (`# Title`) all the way to H3 (`### Title`) and will only show the table of contents if there is more than 1 header on the page.
+You can also hide the table of contents on a page by adding `enableToc: false` to the frontmatter for that page.
 
-By default, the TOC shows all headings from H1 (`# Title`) to H3 (`### Title`) and is only displayed if there is more than one heading on the page.
+> [!info]
+> This feature requires both `Plugin.TableOfContents` in your `quartz.config.ts` and `Component.TableOfContents` in your `quartz.layout.ts` to function correctly.
 
 ## Customization
 
-The table of contents is a functionality of the [[TableOfContents]] plugin. See the plugin page for more customization options.
-
-It also needs the `TableOfContents` component, which is displayed in the right sidebar by default. You can change this by customizing the [[layout]]. The TOC component can be configured with the `layout` parameter, which can either be `modern` (default) or `legacy`.
+- Removing table of contents: remove all instances of `Plugin.TableOfContents()` from `quartz.config.ts`. and `Component.TableOfContents()` from `quartz.layout.ts`
+- Changing the max depth: pass in a parameter to `Plugin.TableOfContents({ maxDepth: 4 })`
+- Changing the minimum number of entries in the Table of Contents before it renders: pass in a parameter to `Plugin.TableOfContents({ minEntries: 3 })`
+- Collapse the table of content by default: pass in a parameter to `Plugin.TableOfContents({ collapseByDefault: true })`
+- Component: `quartz/components/TableOfContents.tsx`
+- Style:
+  - Modern (default): `quartz/components/styles/toc.scss`
+  - Legacy Quartz 3 style: `quartz/components/styles/legacyToc.scss`
+- Script: `quartz/components/scripts/toc.inline.ts`

docs/features/upcoming features.md

@@ -2,11 +2,22 @@
 draft: true
 ---
 
-## misc backlog
+## high priority backlog
 
 - static dead link detection
+- block links: https://help.obsidian.md/Linking+notes+and+files/Internal+links#Link+to+a+block+in+a+note
+- note/header/block transcludes: https://help.obsidian.md/Linking+notes+and+files/Embedding+files
+- docker support
+
+## misc backlog
+
+- breadcrumbs component
 - cursor chat extension
+- https://giscus.app/ extension
 - sidenotes? https://github.com/capnfabs/paperesque
 - direct match in search using double quotes
 - https://help.obsidian.md/Advanced+topics/Using+Obsidian+URI
+- audio/video embed styling
 - Canvas
+- parse all images in page: use this for page lists if applicable?
+- CV mode? with print stylesheet

docs/features/wikilinks.md

@@ -4,7 +4,7 @@ title: Wikilinks
 
 Wikilinks were pioneered by earlier internet wikis to make it easier to write links across pages without needing to write Markdown or HTML links each time.
 
-Quartz supports Wikilinks by default and these links are resolved by Quartz using the [[CrawlLinks]] plugin. See the [Obsidian Help page on Internal Links](https://help.obsidian.md/Linking+notes+and+files/Internal+links) for more information on Wikilink syntax.
+Quartz supports Wikilinks by default and these links are resolved by Quartz using `Plugin.CrawlLinks`. See the [Obsidian Help page on Internal Links](https://help.obsidian.md/Linking+notes+and+files/Internal+links) for more information on Wikilink syntax.
 
 This is enabled as a part of [[Obsidian compatibility]] and can be configured and enabled/disabled from that plugin.
 

docs/hosting.md

@@ -30,7 +30,7 @@ Press "Save and deploy" and Cloudflare should have a deployed version of your si
 To add a custom domain, check out [Cloudflare's documentation](https://developers.cloudflare.com/pages/platform/custom-domains/).
 
 > [!warning]
-> Cloudflare Pages performs a shallow clone by default, so if you rely on `git` for timestamps, it is recommended that you add `git fetch --unshallow &&` to the beginning of the build command (e.g., `git fetch --unshallow && npx quartz build`).
+> Cloudflare Pages only allows shallow `git` clones so if you rely on `git` for timestamps, it is recommended you either add dates to your frontmatter (see [[authoring content#Syntax]]) or use another hosting provider.
 
 ## GitHub Pages
 
@@ -57,18 +57,18 @@ jobs:
   build:
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0 # Fetch all history for git info
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v3
         with:
-          node-version: 22
+          node-version: 18.14
       - name: Install Dependencies
         run: npm ci
       - name: Build Quartz
         run: npx quartz build
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v2
         with:
           path: public
 
@@ -81,7 +81,7 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v2
 ```
 
 Then:
@@ -182,33 +182,37 @@ Using `docs.example.com` is an example of a subdomain. They're a simple way of c
 
 ## GitLab Pages
 
-In your local Quartz, create a new file `.gitlab-ci.yml`.
+In your local Quartz, create a new file `.gitlab-ci.yaml`.
 
-```yaml title=".gitlab-ci.yml"
+```yaml title=".gitlab-ci.yaml"
 stages:
   - build
   - deploy
 
-image: node:20
-cache: # Cache modules in between jobs
-  key: $CI_COMMIT_REF_SLUG
-  paths:
-    - .npm/
+variables:
+  NODE_VERSION: "18.14"
 
 build:
   stage: build
   rules:
     - if: '$CI_COMMIT_REF_NAME == "v4"'
   before_script:
+    - apt-get update -q && apt-get install -y nodejs npm
+    - npm install -g n
+    - n $NODE_VERSION
     - hash -r
-    - npm ci --cache .npm --prefer-offline
+    - npm ci
   script:
     - npx quartz build
   artifacts:
     paths:
       - public
+  cache:
+    paths:
+      - ~/.npm/
+    key: "${CI_COMMIT_REF_SLUG}-node-${CI_COMMIT_REF_NAME}"
   tags:
-    - gitlab-org-docker
+    - docker
 
 pages:
   stage: deploy
@@ -221,46 +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`.
-
-## Self-Hosting
-
-Copy the `public` directory to your web server and configure it to serve the files. You can use any web server to host your site. Since Quartz generates links that do not include the `.html` extension, you need to let your web server know how to deal with it.
-
-### Using Nginx
-
-Here's an example of how to do this with Nginx:
-
-```nginx title="nginx.conf"
-server {
-    listen 80;
-    server_name example.com;
-    root /path/to/quartz/public;
-    index index.html;
-    error_page 404 /404.html;
-
-    location / {
-        try_files $uri $uri.html $uri/ =404;
-    }
-}
-```
-
-### Using Caddy
-
-Here's and example of how to do this with Caddy:
-
-```caddy title="Caddyfile"
-example.com {
-    root * /path/to/quartz/public
-    try_files {path} {path}.html {path}/ =404
-    file_server
-    encode gzip
-
-    handle_errors {
-        rewrite * /{err.status_code}.html
-        file_server
-    }
-}
-```

docs/index.md

@@ -6,7 +6,7 @@ Quartz is a fast, batteries-included static-site generator that transforms Markd
 
 ## 🪴 Get Started
 
-Quartz requires **at least [Node](https://nodejs.org/) v20** and `npm` v9.3.1 to function correctly. Ensure you have this installed on your machine before continuing.
+Quartz requires **at least [Node](https://nodejs.org/) v18.14** and `npm` v9.3.1 to function correctly. Ensure you have this installed on your machine before continuing.
 
 Then, in your terminal of choice, enter the following commands line by line:
 
@@ -23,15 +23,14 @@ This will guide you through initializing your Quartz with content. Once you've d
 2. [[configuration|Configure]] Quartz's behaviour
 3. Change Quartz's [[layout]]
 4. [[build|Build and preview]] Quartz
-5. Sync your changes with [[setting up your GitHub repository|GitHub]]
-6. [[hosting|Host]] Quartz online
+5. [[hosting|Host]] Quartz online
 
-If you prefer instructions in a video format you can try following Nicole van der Hoeven's
-[video guide on how to set up Quartz!](https://www.youtube.com/watch?v=6s6DT1yN4dw&t=227s)
+> [!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]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]], [[comments]] and [many more](./features) right out of the box
+- [[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
 - Hot-reload for both configuration and content
 - Simple JSX layouts and [[creating components|page components]]
 - [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes

docs/layout.md

@@ -12,7 +12,6 @@ export interface FullPageLayout {
   header: QuartzComponent[] // laid out horizontally
   beforeBody: QuartzComponent[] // laid out vertically
   pageBody: QuartzComponent // single component
-  afterBody: QuartzComponent[] // laid out vertically
   left: QuartzComponent[] // vertical on desktop, horizontal on mobile
   right: QuartzComponent[] // vertical on desktop, horizontal on mobile
   footer: QuartzComponent // single component

docs/plugins/AliasRedirects.md

@@ -1,37 +0,0 @@
----
-title: AliasRedirects
-tags:
-  - plugin/emitter
----
-
-This plugin emits HTML redirect pages for aliases and permalinks defined in the frontmatter of content files.
-
-For example, A `foo.md` has the following frontmatter
-
-```md title="foo.md"
----
-title: "Foo"
-alias:
-  - "bar"
----
-```
-
-The target `host.me/bar` will be redirected to `host.me/foo`
-
-Note that these are permanent redirect.
-
-The emitter supports the following aliases:
-
-- `aliases`
-- `alias`
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.AliasRedirects()`.
-- Source: [`quartz/plugins/emitters/aliases.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/aliases.ts).

docs/plugins/Assets.md

@@ -1,20 +0,0 @@
----
-title: Assets
-tags:
-  - plugin/emitter
----
-
-This plugin emits all non-Markdown static assets in your content folder (like images, videos, HTML, etc). The plugin respects the `ignorePatterns` in the global [[configuration]].
-
-Note that all static assets will then be accessible through its path on your generated site, i.e: `host.me/path/to/static.pdf`
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.Assets()`.
-- Source: [`quartz/plugins/emitters/assets.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/assets.ts).

docs/plugins/CNAME.md

@@ -1,22 +0,0 @@
----
-title: CNAME
-tags:
-  - plugin/emitter
----
-
-This plugin emits a `CNAME` record that points your subdomain to the default domain of your site.
-
-If you want to use a custom domain name like `quartz.example.com` for the site, then this is needed.
-
-See [[hosting|Hosting]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.CNAME()`.
-- Source: [`quartz/plugins/emitters/cname.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/cname.ts).

docs/plugins/ComponentResources.md

@@ -1,18 +0,0 @@
----
-title: ComponentResources
-tags:
-  - plugin/emitter
----
-
-This plugin manages and emits the static resources required for the Quartz framework. This includes CSS stylesheets and JavaScript scripts that enhance the functionality and aesthetics of the generated site. See also the `cdnCaching` option in the `theme` section of the [[configuration]].
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.ComponentResources()`.
-- Source: [`quartz/plugins/emitters/componentResources.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/componentResources.ts).

docs/plugins/ContentIndex.md

@@ -1,26 +0,0 @@
----
-title: ContentIndex
-tags:
-  - plugin/emitter
----
-
-This plugin emits both RSS and an XML sitemap for your site. The [[RSS Feed]] allows users to subscribe to content on your site and the sitemap allows search engines to better index your site. The plugin also emits a `contentIndex.json` file which is used by dynamic frontend components like search and graph.
-
-This plugin emits a comprehensive index of the site's content, generating additional resources such as a sitemap, an RSS feed, and a
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `enableSiteMap`: If `true` (default), generates a sitemap XML file (`sitemap.xml`) listing all site URLs for search engines in content discovery.
-- `enableRSS`: If `true` (default), produces an RSS feed (`index.xml`) with recent content updates.
-- `rssLimit`: Defines the maximum number of entries to include in the RSS feed, helping to focus on the most recent or relevant content. Defaults to `10`.
-- `rssFullHtml`: If `true`, the RSS feed includes full HTML content. Otherwise it includes just summaries.
-- `includeEmptyFiles`: If `true` (default), content files with no body text are included in the generated index and resources.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.ContentIndex()`.
-- Source: [`quartz/plugins/emitters/contentIndex.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/contentIndex.ts).

docs/plugins/ContentPage.md

@@ -1,18 +0,0 @@
----
-title: ContentPage
-tags:
-  - plugin/emitter
----
-
-This plugin is a core component of the Quartz framework. It generates the HTML pages for each piece of Markdown content. It emits the full-page [[layout]], including headers, footers, and body content, among others.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.ContentPage()`.
-- Source: [`quartz/plugins/emitters/contentPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/contentPage.tsx).

docs/plugins/CrawlLinks.md

@@ -1,30 +0,0 @@
----
-title: CrawlLinks
-tags:
-  - plugin/transformer
----
-
-This plugin parses links and processes them to point to the right places. It is also needed for embedded links (like images). See [[Obsidian compatibility]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `markdownLinkResolution`: Sets the strategy for resolving Markdown paths, can be `"absolute"` (default), `"relative"` or `"shortest"`. You should use the same setting here as in [[Obsidian compatibility|Obsidian]].
-  - `absolute`: Path relative to the root of the content folder.
-  - `relative`: Path relative to the file you are linking from.
-  - `shortest`: Name of the file. If this isn't enough to identify the file, use the full absolute path.
-- `prettyLinks`: If `true` (default), simplifies links by removing folder paths, making them more user friendly (e.g. `folder/deeply/nested/note` becomes `note`).
-- `openLinksInNewTab`: If `true`, configures external links to open in a new tab. Defaults to `false`.
-- `lazyLoad`: If `true`, adds lazy loading to resource elements (`img`, `video`, etc.) to improve page load performance. Defaults to `false`.
-- `externalLinkIcon`: Adds an icon next to external links when `true` (default) to visually distinguishing them from internal links.
-
-> [!warning]
-> Removing this plugin is _not_ recommended and will likely break the page.
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.CrawlLinks()`.
-- Source: [`quartz/plugins/transformers/links.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/links.ts).

docs/plugins/CreatedModifiedDate.md

@@ -1,25 +0,0 @@
----
-title: "CreatedModifiedDate"
-tags:
-  - plugin/transformer
----
-
-This plugin determines the created, modified, and published dates for a document using three potential data sources: frontmatter metadata, Git history, and the filesystem. See [[authoring content#Syntax]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `priority`: The data sources to consult for date information. Highest priority first. Possible values are `"frontmatter"`, `"git"`, and `"filesystem"`. Defaults to `["frontmatter", "git", "filesystem"]`.
-
-> [!warning]
-> If you rely on `git` for dates, make sure `defaultDateType` is set to `modified` in `quartz.config.ts`.
->
-> Depending on how you [[hosting|host]] your Quartz, the `filesystem` dates of your local files may not match the final dates. In these cases, it may be better to use `git` or `frontmatter` to guarantee correct dates.
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.CreatedModifiedDate()`.
-- Source: [`quartz/plugins/transformers/lastmod.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/lastmod.ts).

docs/plugins/Description.md

@@ -1,23 +0,0 @@
----
-title: Description
-tags:
-  - plugin/transformer
----
-
-This plugin generates descriptions that are used as metadata for the HTML `head`, the [[RSS Feed]] and in [[folder and tag listings]] if there is no main body content, the description is used as the text between the title and the listing.
-
-If the frontmatter contains a `description` property, it is used (see [[authoring content#Syntax]]). Otherwise, the plugin will do its best to use the first few sentences of the content to reach the target description length.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `descriptionLength`: the maximum length of the generated description. Default is 150 characters. The cut off happens after the first _sentence_ that ends after the given length.
-- `replaceExternalLinks`: If `true` (default), replace external links with their domain and path in the description (e.g. `https://domain.tld/some_page/another_page?query=hello&target=world` is replaced with `domain.tld/some_page/another_page`).
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.Description()`.
-- Source: [`quartz/plugins/transformers/description.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/description.ts).

docs/plugins/ExplicitPublish.md

@@ -1,18 +0,0 @@
----
-title: ExplicitPublish
-tags:
-  - plugin/filter
----
-
-This plugin filters content based on an explicit `publish` flag in the frontmatter, allowing only content that is explicitly marked for publication to pass through. It's the opt-in version of [[RemoveDrafts]]. See [[private pages]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Filter
-- Function name: `Plugin.ExplicitPublish()`.
-- Source: [`quartz/plugins/filters/explicit.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/filters/explicit.ts).

docs/plugins/FolderPage.md

@@ -1,24 +0,0 @@
----
-title: FolderPage
-tags:
-  - plugin/emitter
----
-
-This plugin generates index pages for folders, creating a listing page for each folder that contains multiple content files. See [[folder and tag listings]] for more information.
-
-Example: [[advanced/|Advanced]]
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `FolderContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/FolderContent.tsx`).
-
-This plugin accepts the following configuration options:
-
-- `sort`: A function of type `(f1: QuartzPluginData, f2: QuartzPluginData) => number{:ts}` used to sort entries. Defaults to sorting by date and tie-breaking on lexographical order.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.FolderPage()`.
-- Source: [`quartz/plugins/emitters/folderPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/folderPage.tsx).

docs/plugins/Frontmatter.md

@@ -1,24 +0,0 @@
----
-title: "Frontmatter"
-tags:
-  - plugin/transformer
----
-
-This plugin parses the frontmatter of the page using the [gray-matter](https://github.com/jonschlinkert/gray-matter) library. See [[authoring content#Syntax]], [[Obsidian compatibility]] and [[OxHugo compatibility]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `delimiters`: the delimiters to use for the frontmatter. Can have one value (e.g. `"---"`) or separate values for opening and closing delimiters (e.g. `["---", "~~~"]`). Defaults to `"---"`.
-- `language`: the language to use for parsing the frontmatter. Can be `yaml` (default) or `toml`.
-
-> [!warning]
-> This plugin must not be removed, otherwise Quartz will break.
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.Frontmatter()`.
-- Source: [`quartz/plugins/transformers/frontmatter.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/frontmatter.ts).

docs/plugins/GitHubFlavoredMarkdown.md

@@ -1,23 +0,0 @@
----
-title: GitHubFlavoredMarkdown
-tags:
-  - plugin/transformer
----
-
-This plugin enhances Markdown processing to support GitHub Flavored Markdown (GFM) which adds features like autolink literals, footnotes, strikethrough, tables and tasklists.
-
-In addition, this plugin adds optional features for typographic refinement (such as converting straight quotes to curly quotes, dashes to en-dashes/em-dashes, and ellipses) and automatic heading links as a symbol that appears next to the heading on hover.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `enableSmartyPants`: When true, enables typographic enhancements. Default is true.
-- `linkHeadings`: When true, automatically adds links to headings. Default is true.
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.GitHubFlavoredMarkdown()`.
-- Source: [`quartz/plugins/transformers/gfm.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/gfm.ts).

docs/plugins/HardLineBreaks.md

@@ -1,18 +0,0 @@
----
-title: HardLineBreaks
-tags:
-  - plugin/transformer
----
-
-This plugin automatically converts single line breaks in Markdown text into hard line breaks in the HTML output. This plugin is not enabled by default as this doesn't follow the semantics of actual Markdown but you may enable it if you'd like parity with [[Obsidian compatibility|Obsidian]].
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.HardLineBreaks()`.
-- Source: [`quartz/plugins/transformers/linebreaks.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/linebreaks.ts).

docs/plugins/Latex.md

@@ -1,21 +0,0 @@
----
-title: "Latex"
-tags:
-  - plugin/transformer
----
-
-This plugin adds LaTeX support to Quartz. See [[features/Latex|Latex]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `renderEngine`: the engine to use to render LaTeX equations. Can be `"katex"` for [KaTeX](https://katex.org/) or `"mathjax"` for [MathJax](https://www.mathjax.org/) [SVG rendering](https://docs.mathjax.org/en/latest/output/svg.html). Defaults to KaTeX.
-- `customMacros`: custom macros for all LaTeX blocks. It takes the form of a key-value pair where the key is a new command name and the value is the expansion of the macro. For example: `{"\\R": "\\mathbb{R}"}`
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.Latex()`.
-- Source: [`quartz/plugins/transformers/latex.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/latex.ts).

docs/plugins/NotFoundPage.md

@@ -1,18 +0,0 @@
----
-title: NotFoundPage
-tags:
-  - plugin/emitter
----
-
-This plugin emits a 404 (Not Found) page for broken or non-existent URLs.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.NotFoundPage()`.
-- Source: [`quartz/plugins/emitters/404.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/404.tsx).

docs/plugins/ObsidianFlavoredMarkdown.md

@@ -1,34 +0,0 @@
----
-title: ObsidianFlavoredMarkdown
-tags:
-  - plugin/transformer
----
-
-This plugin provides support for [[Obsidian compatibility]].
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `comments`: If `true` (default), enables parsing of `%%` style Obsidian comment blocks.
-- `highlight`: If `true` (default), enables parsing of `==` style highlights within content.
-- `wikilinks`:If `true` (default), turns [[wikilinks]] into regular links.
-- `callouts`: If `true` (default), adds support for [[callouts|callout]] blocks for emphasizing content.
-- `mermaid`: If `true` (default), enables [[Mermaid diagrams|Mermaid diagram]] rendering within Markdown files.
-- `parseTags`: If `true` (default), parses and links tags within the content.
-- `parseArrows`: If `true` (default), transforms arrow symbols into their HTML character equivalents.
-- `parseBlockReferences`: If `true` (default), handles block references, linking to specific content blocks.
-- `enableInHtmlEmbed`: If `true`, allows embedding of content directly within HTML. Defaults to `false`.
-- `enableYouTubeEmbed`: If `true` (default), enables the embedding of YouTube videos and playlists using external image Markdown syntax.
-- `enableVideoEmbed`: If `true` (default), enables the embedding of video files.
-- `enableCheckbox`: If `true`, adds support for interactive checkboxes in content. Defaults to `false`.
-
-> [!warning]
-> Don't remove this plugin if you're using [[Obsidian compatibility|Obsidian]] to author the content!
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.ObsidianFlavoredMarkdown()`.
-- Source: [`quartz/plugins/transformers/toc.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/toc.ts).

docs/plugins/OxHugoFlavoredMarkdown.md

@@ -1,29 +0,0 @@
----
-title: OxHugoFlavoredMarkdown
-tags:
-  - plugin/transformer
----
-
-This plugin provides support for [ox-hugo](https://github.com/kaushalmodi/ox-hugo) compatibility. See [[OxHugo compatibility]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `wikilinks`: If `true` (default), converts Hugo `{{ relref }}` shortcodes to Quartz [[wikilinks]].
-- `removePredefinedAnchor`: If `true` (default), strips predefined anchors from headings.
-- `removeHugoShortcode`: If `true` (default), removes Hugo shortcode syntax (`{{}}`) from the content.
-- `replaceFigureWithMdImg`: If `true` (default), replaces `<figure/>` with `![]()`.
-- `replaceOrgLatex`: If `true` (default), converts Org-mode [[features/Latex|Latex]] fragments to Quartz-compatible LaTeX wrapped in `$` (for inline) and `$$` (for block equations).
-
-> [!warning]
-> While you can use this together with [[ObsidianFlavoredMarkdown]], it's not recommended because it might mutate the file in unexpected ways. Use with caution.
->
-> If you use `toml` frontmatter, make sure to configure the [[Frontmatter]] plugin accordingly. See [[OxHugo compatibility]] for an example.
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.OxHugoFlavoredMarkdown()`.
-- Source: [`quartz/plugins/transformers/oxhugofm.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/oxhugofm.ts).

docs/plugins/RemoveDrafts.md

@@ -1,18 +0,0 @@
----
-title: RemoveDrafts
-tags:
-  - plugin/filter
----
-
-This plugin filters out content from your vault, so that only finalized content is made available. This prevents [[private pages]] from being published. By default, it filters out all pages with `draft: true` in the frontmatter and leaves all other pages intact.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Filter
-- Function name: `Plugin.RemoveDrafts()`.
-- Source: [`quartz/plugins/filters/draft.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/filters/draft.ts).

docs/plugins/Static.md

@@ -1,21 +0,0 @@
----
-title: Static
-tags:
-  - plugin/emitter
----
-
-This plugin emits all static resources needed by Quartz. This is used, for example, for fonts and images that need a stable position, such as banners and icons. The plugin respects the `ignorePatterns` in the global [[configuration]].
-
-> [!important]
-> This is different from [[Assets]]. The resources from the [[Static]] plugin are located under `quartz/static`, whereas [[Assets]] renders all static resources under `content` and is used for images, videos, audio, etc. that are directly referenced by your markdown content.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin has no configuration options.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.Static()`.
-- Source: [`quartz/plugins/emitters/static.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/static.ts).

docs/plugins/SyntaxHighlighting.md

@@ -1,23 +0,0 @@
----
-title: "SyntaxHighlighting"
-tags:
-  - plugin/transformer
----
-
-This plugin is used to add syntax highlighting to code blocks in Quartz. See [[syntax highlighting]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `theme`: a separate id of one of the [themes bundled with Shikiji](https://shikiji.netlify.app/themes). One for light mode and one for dark mode. Defaults to `theme: { light: "github-light", dark: "github-dark" }`.
-- `keepBackground`: If set to `true`, the background of the Shikiji theme will be used. With `false` (default) the Quartz theme color for background will be used instead.
-
-In addition, you can further override the colours in the `quartz/styles/syntax.scss` file.
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.SyntaxHighlighting()`.
-- Source: [`quartz/plugins/transformers/syntax.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/syntax.ts).

docs/plugins/TableOfContents.md

@@ -1,26 +0,0 @@
----
-title: TableOfContents
-tags:
-  - plugin/transformer
----
-
-This plugin generates a table of contents (TOC) for Markdown documents. See [[table of contents]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-This plugin accepts the following configuration options:
-
-- `maxDepth`: Limits the depth of headings included in the TOC, ranging from `1` (top level headings only) to `6` (all heading levels). Default is `3`.
-- `minEntries`: The minimum number of heading entries required for the TOC to be displayed. Default is `1`.
-- `showByDefault`: If `true` (default), the TOC should be displayed by default. Can be overridden by frontmatter settings.
-- `collapseByDefault`: If `true`, the TOC will start in a collapsed state. Default is `false`.
-
-> [!warning]
-> This plugin needs the `Component.TableOfContents` component in `quartz.layout.ts` to determine where to display the TOC. Without it, nothing will be displayed. They should always be added or removed together.
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.TableOfContents()`.
-- Source: [`quartz/plugins/transformers/toc.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/toc.ts).

docs/plugins/TagPage.md

@@ -1,22 +0,0 @@
----
-title: TagPage
-tags:
-  - plugin/emitter
----
-
-This plugin emits dedicated pages for each tag used in the content. See [[folder and tag listings]] for more information.
-
-> [!note]
-> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
-
-The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `TagContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/TagContent.tsx`).
-
-This plugin accepts the following configuration options:
-
-- `sort`: A function of type `(f1: QuartzPluginData, f2: QuartzPluginData) => number{:ts}` used to sort entries. Defaults to sorting by date and tie-breaking on lexographical order.
-
-## API
-
-- Category: Emitter
-- Function name: `Plugin.TagPage()`.
-- Source: [`quartz/plugins/emitters/tagPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/tagPage.tsx).

docs/plugins/index.md

@@ -1,3 +0,0 @@
----
-title: Plugins
----

docs/setting up your GitHub repository.md

@@ -15,34 +15,25 @@ At the top of your repository on GitHub.com's Quick Setup page, click the clipb
 In your terminal of choice, navigate to the root of your Quartz folder. Then, run the following commands, replacing `REMOTE-URL` with the URL you just copied from the previous step.
 
 ```bash
-# list all the repositories that are tracked
-git remote -v
+# add your repository
+git remote add origin REMOTE-URL
 
-# if the origin doesn't match your own repository, set your repository as the origin
-git remote set-url origin REMOTE-URL
-
-# if you don't have upstream as a remote, add it so updates work
+# track the main quartz repository for updates
 git remote add upstream https://github.com/jackyzha0/quartz.git
 ```
 
-Then, you can sync the content to upload it to your repository. This is a helper command that will do the initial push of your content to your repository.
+To verify that you set the remote URL correctly, run the following command.
+
+```bash
+git remote -v
+```
+
+Then, you can sync the content to upload it to your repository.
 
 ```bash
 npx quartz sync --no-pull
 ```
 
-> [!warning]- `fatal: --[no-]autostash option is only valid with --rebase`
-> You may have an outdated version of `git`. Updating `git` should fix this issue.
-
-In future updates, you can simply run `npx quartz sync` every time you want to push updates to your repository.
-
-> [!hint] Flags and options
-> For full help options, you can run `npx quartz sync --help`.
->
-> Most of these have sensible defaults but you can override them if you have a custom setup:
->
-> - `-d` or `--directory`: the content folder. This is normally just `content`
-> - `-v` or `--verbose`: print out extra logging information
-> - `--commit` or `--no-commit`: whether to make a `git` commit for your changes
-> - `--push` or `--no-push`: whether to push updates to your GitHub fork of Quartz
-> - `--pull` or `--no-pull`: whether to try and pull in any updates from your GitHub fork (i.e. from other devices) before pushing
+> [!hint]
+> If `npx quartz sync` fails with `fatal: --[no-]autostash option is only valid with --rebase`, you
+> may have an outdated version of `git`. Updating `git` should fix this issue.

docs/showcase.md

@@ -7,26 +7,20 @@ Want to see what Quartz can do? Here are some cool community gardens:
 - [Quartz Documentation (this site!)](https://quartz.jzhao.xyz/)
 - [Jacky Zhao's Garden](https://jzhao.xyz/)
 - [Socratica Toolbox](https://toolbox.socratica.info/)
-- [Morrowind Modding Wiki](https://morrowind-modding.github.io/)
-- [Aaron Pham's Garden](https://aarnphm.xyz/)
-- [Pelayo Arbues' Notes](https://pelayoarbues.com/)
-- [Stanford CME 302 Numerical Linear Algebra](https://ericdarve.github.io/NLA/)
-- [A Pattern Language - Christopher Alexander (Architecture)](https://patternlanguage.cc/)
-- [oldwinter の数字花园](https://garden.oldwinter.top/)
-- [Eilleen's Everything Notebook](https://quartz.eilleeenz.com/)
-- [🧠🌳 Chad's Mind Garden](https://www.chadly.net/)
-- [Pedro MC Fernandes's Topo da Mente](https://www.pmcf.xyz/topo-da-mente/)
-- [Mau Camargo's Notkesto](https://notes.camargomau.com/)
-- [Sideny's 3D Artist's Handbook](https://sidney-eliot.github.io/3d-artists-handbook/)
 - [Brandon Boswell's Garden](https://brandonkboswell.com)
 - [Scaling Synthesis - A hypertext research notebook](https://scalingsynthesis.com/)
 - [Data Dictionary 🧠](https://glossary.airbyte.com/)
 - [sspaeti.com's Second Brain](https://brain.sspaeti.com/)
-- [🪴Aster's notebook](https://notes.asterhu.com)
-- [Gatekeeper Wiki](https://www.gatekeeper.wiki)
-- [Ellie's Notes](https://ellie.wtf)
-- [🥷🏻🌳🍃 Computer Science & Thinkering Garden](https://notes.yxy.ninja)
-- [Eledah's Crystalline](https://blog.eledah.ir/)
-- [🌓 Projects & Privacy - FOSS, tech, law](https://be-far.com)
+- [oldwinter の数字花园](https://garden.oldwinter.top/)
+- [Abhijeet's Math Wiki](https://abhmul.github.io/quartz/Math-Wiki/)
+- [Mike's AI Garden 🤖🪴](https://mwalton.me/)
+- [Matt Dunn's Second Brain](https://mattdunn.info/)
+- [Pelayo Arbues' Notes](https://pelayoarbues.github.io/)
+- [Vince Imbat's Talahardin](https://vinceimbat.com/)
+- [🧠🌳 Chad's Mind Garden](https://www.chadly.net/)
+- [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)!

docs/tags/plugin.md

@@ -1,3 +0,0 @@
----
-title: Plugins
----

globals.d.ts

@@ -4,14 +4,9 @@ export declare global {
       type: K,
       listener: (this: Document, ev: CustomEventMap[K]) => void,
     ): void
-    removeEventListener<K extends keyof CustomEventMap>(
-      type: K,
-      listener: (this: Document, ev: CustomEventMap[K]) => void,
-    ): void
-    dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K] | UIEvent): void
+    dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void
   }
   interface Window {
     spaNavigate(url: URL, isBack: boolean = false)
-    addCleanup(fn: (...args: any[]) => void)
   }
 }

index.d.ts

@@ -6,7 +6,6 @@ declare module "*.scss" {
 // dom custom event
 interface CustomEventMap {
   nav: CustomEvent<{ url: FullSlug }>
-  themechange: CustomEvent<{ theme: "light" | "dark" }>
 }
 
 declare const fetchData: Promise<ContentIndex>

package.json

@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.3.1",
+  "version": "4.1.3",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",
@@ -12,16 +12,15 @@
     "url": "https://github.com/jackyzha0/quartz.git"
   },
   "scripts": {
-    "quartz": "./quartz/bootstrap-cli.mjs",
     "docs": "npx quartz build --serve -d docs",
     "check": "tsc --noEmit && npx prettier . --check",
     "format": "npx prettier . --write",
-    "test": "tsx ./quartz/util/path.test.ts && tsx ./quartz/depgraph.test.ts",
+    "test": "tsx ./quartz/util/path.test.ts",
     "profile": "0x -D prof ./quartz/bootstrap-cli.mjs build --concurrency=1"
   },
   "engines": {
     "npm": ">=9.3.1",
-    "node": "20 || >=22"
+    "node": ">=18.14"
   },
   "keywords": [
     "site generator",
@@ -36,40 +35,38 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@floating-ui/dom": "^1.6.10",
-    "@napi-rs/simple-git": "0.1.19",
-    "@tweenjs/tween.js": "^25.0.0",
-    "async-mutex": "^0.5.0",
+    "@floating-ui/dom": "^1.5.3",
+    "@napi-rs/simple-git": "0.1.9",
+    "async-mutex": "^0.4.0",
     "chalk": "^5.3.0",
-    "chokidar": "^3.6.0",
+    "chokidar": "^3.5.3",
     "cli-spinner": "^0.2.10",
-    "d3": "^7.9.0",
-    "esbuild-sass-plugin": "^2.16.1",
-    "flexsearch": "0.7.43",
+    "d3": "^7.8.5",
+    "esbuild-sass-plugin": "^2.16.0",
+    "flexsearch": "0.7.21",
     "github-slugger": "^2.0.0",
-    "globby": "^14.0.2",
+    "globby": "^14.0.0",
     "gray-matter": "^4.0.3",
-    "hast-util-to-html": "^9.0.1",
+    "hast-util-to-html": "^9.0.0",
     "hast-util-to-jsx-runtime": "^2.3.0",
     "hast-util-to-string": "^3.0.0",
     "is-absolute-url": "^4.0.1",
     "js-yaml": "^4.1.0",
-    "lightningcss": "^1.26.0",
+    "lightningcss": "^1.22.1",
     "mdast-util-find-and-replace": "^3.0.1",
-    "mdast-util-to-hast": "^13.2.0",
+    "mdast-util-to-hast": "^13.0.2",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
-    "pixi.js": "^8.3.3",
-    "preact": "^10.23.2",
-    "preact-render-to-string": "^6.5.9",
+    "plausible-tracker": "^0.3.8",
+    "preact": "^10.19.3",
+    "preact-render-to-string": "^6.3.1",
     "pretty-bytes": "^6.1.1",
     "pretty-time": "^1.1.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-citation": "^2.1.1",
-    "rehype-katex": "^7.0.1",
-    "rehype-mathjax": "^6.0.0",
-    "rehype-pretty-code": "^0.13.2",
+    "rehype-katex": "^7.0.0",
+    "rehype-mathjax": "^5.0.0",
+    "rehype-pretty-code": "^0.12.3",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
@@ -78,35 +75,37 @@
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.0",
-    "remark-smartypants": "^3.0.2",
-    "rfdc": "^1.4.1",
-    "rimraf": "^6.0.1",
+    "remark-rehype": "^11.0.0",
+    "remark-smartypants": "^2.0.0",
+    "rfdc": "^1.3.0",
+    "rimraf": "^5.0.5",
     "serve-handler": "^6.1.5",
-    "shiki": "^1.12.1",
+    "shikiji": "^0.9.9",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",
-    "unified": "^11.0.5",
+    "unified": "^11.0.4",
     "unist-util-visit": "^5.0.0",
-    "vfile": "^6.0.2",
-    "workerpool": "^9.1.3",
-    "ws": "^8.18.0",
+    "vfile": "^6.0.1",
+    "workerpool": "^8.0.0",
+    "ws": "^8.15.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/cli-spinner": "^0.2.3",
     "@types/d3": "^7.4.3",
-    "@types/hast": "^3.0.4",
+    "@types/flexsearch": "^0.7.3",
+    "@types/hast": "^3.0.3",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.5.0",
+    "@types/node": "^20.1.2",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
-    "@types/ws": "^8.5.12",
-    "@types/yargs": "^17.0.33",
+    "@types/workerpool": "^6.4.7",
+    "@types/ws": "^8.5.10",
+    "@types/yargs": "^17.0.32",
     "esbuild": "^0.19.9",
-    "prettier": "^3.3.3",
-    "tsx": "^4.18.0",
-    "typescript": "^5.5.4"
+    "prettier": "^3.1.1",
+    "tsx": "^4.6.2",
+    "typescript": "^5.3.3"
   }
 }

quartz.config.ts

@@ -1,11 +1,6 @@
 import { QuartzConfig } from "./quartz/cfg"
 import * as Plugin from "./quartz/plugins"
 
-/**
- * Quartz 4.0 Configuration
- *
- * See https://quartz.jzhao.xyz/configuration for more information.
- */
 const config: QuartzConfig = {
   configuration: {
     pageTitle: "🪴 Quartz 4.0",
@@ -14,13 +9,10 @@ const config: QuartzConfig = {
     analytics: {
       provider: "plausible",
     },
-    locale: "en-US",
     baseUrl: "quartz.jzhao.xyz",
     ignorePatterns: ["private", "templates", ".obsidian"],
     defaultDateType: "created",
     theme: {
-      fontOrigin: "googleFonts",
-      cdnCaching: true,
       typography: {
         header: "Schibsted Grotesk",
         body: "Source Sans Pro",
@@ -36,7 +28,6 @@ const config: QuartzConfig = {
           secondary: "#284b63",
           tertiary: "#84a59d",
           highlight: "rgba(143, 159, 169, 0.15)",
-          textHighlight: "#fff23688",
         },
         darkMode: {
           light: "#161618",
@@ -47,7 +38,6 @@ const config: QuartzConfig = {
           secondary: "#7b97aa",
           tertiary: "#84a59d",
           highlight: "rgba(143, 159, 169, 0.15)",
-          textHighlight: "#b3aa0288",
         },
       },
     },
@@ -55,27 +45,21 @@ const config: QuartzConfig = {
   plugins: {
     transformers: [
       Plugin.FrontMatter(),
+      Plugin.TableOfContents(),
       Plugin.CreatedModifiedDate({
-        priority: ["frontmatter", "filesystem"],
-      }),
-      Plugin.SyntaxHighlighting({
-        theme: {
-          light: "github-light",
-          dark: "github-dark",
-        },
-        keepBackground: false,
+        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.TableOfContents(),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
-      Plugin.Latex({ renderEngine: "katex" }),
     ],
     filters: [Plugin.RemoveDrafts()],
     emitters: [
       Plugin.AliasRedirects(),
-      Plugin.ComponentResources(),
+      Plugin.ComponentResources({ fontOrigin: "googleFonts" }),
       Plugin.ContentPage(),
       Plugin.FolderPage(),
       Plugin.TagPage(),

quartz.layout.ts

@@ -5,7 +5,6 @@ import * as Component from "./quartz/components"
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
   header: [],
-  afterBody: [],
   footer: Component.Footer({
     links: {
       GitHub: "https://github.com/jackyzha0/quartz",
@@ -38,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: [],
 }

quartz/build.ts

@@ -3,13 +3,13 @@ sourceMapSupport.install(options)
 import path from "path"
 import { PerfTimer } from "./util/perf"
 import { rimraf } from "rimraf"
-import { GlobbyFilterFunction, isGitIgnored } from "globby"
+import { isGitIgnored } from "globby"
 import chalk from "chalk"
 import { parseMarkdown } from "./processors/parse"
 import { filterContent } from "./processors/filter"
 import { emitContent } from "./processors/emit"
 import cfg from "../quartz.config"
-import { FilePath, FullSlug, joinSegments, slugifyFilePath } from "./util/path"
+import { FilePath, joinSegments, slugifyFilePath } from "./util/path"
 import chokidar from "chokidar"
 import { ProcessedContent } from "./plugins/vfile"
 import { Argv, BuildCtx } from "./util/ctx"
@@ -17,34 +17,9 @@ import { glob, toPosixPath } from "./util/glob"
 import { trace } from "./util/trace"
 import { options } from "./util/sourcemap"
 import { Mutex } from "async-mutex"
-import DepGraph from "./depgraph"
-import { getStaticResourcesFromPlugins } from "./plugins"
-
-type Dependencies = Record<string, DepGraph<FilePath> | null>
-
-type BuildData = {
-  ctx: BuildCtx
-  ignored: GlobbyFilterFunction
-  mut: Mutex
-  initialSlugs: FullSlug[]
-  // TODO merge contentMap and trackedAssets
-  contentMap: Map<FilePath, ProcessedContent>
-  trackedAssets: Set<FilePath>
-  toRebuild: Set<FilePath>
-  toRemove: Set<FilePath>
-  lastBuildMs: number
-  dependencies: Dependencies
-}
-
-type FileEvent = "add" | "change" | "delete"
-
-function newBuildId() {
-  return new Date().toISOString()
-}
 
 async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
   const ctx: BuildCtx = {
-    buildId: newBuildId(),
     argv,
     cfg,
     allSlugs: [],
@@ -65,7 +40,7 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
 
   const release = await mut.acquire()
   perf.addEvent("clean")
-  await rimraf(path.join(output, "*"), { glob: true })
+  await rimraf(output)
   console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`)
 
   perf.addEvent("glob")
@@ -80,24 +55,12 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
 
   const parsedFiles = await parseMarkdown(ctx, filePaths)
   const filteredContent = filterContent(ctx, parsedFiles)
-
-  const dependencies: Record<string, DepGraph<FilePath> | null> = {}
-
-  // Only build dependency graphs if we're doing a fast rebuild
-  if (argv.fastRebuild) {
-    const staticResources = getStaticResourcesFromPlugins(ctx)
-    for (const emitter of cfg.plugins.emitters) {
-      dependencies[emitter.name] =
-        (await emitter.getDependencyGraph?.(ctx, filteredContent, staticResources)) ?? null
-    }
-  }
-
   await emitContent(ctx, filteredContent)
   console.log(chalk.green(`Done processing ${fps.length} files in ${perf.timeSince()}`))
   release()
 
   if (argv.serve) {
-    return startServing(ctx, mut, parsedFiles, clientRefresh, dependencies)
+    return startServing(ctx, mut, parsedFiles, clientRefresh)
   }
 }
 
@@ -107,28 +70,95 @@ async function startServing(
   mut: Mutex,
   initialContent: ProcessedContent[],
   clientRefresh: () => void,
-  dependencies: Dependencies, // emitter name: dep graph
 ) {
   const { argv } = ctx
 
-  // cache file parse results
+  const ignored = await isGitIgnored()
   const contentMap = new Map<FilePath, ProcessedContent>()
   for (const content of initialContent) {
     const [_tree, vfile] = content
     contentMap.set(vfile.data.filePath!, content)
   }
 
-  const buildData: BuildData = {
-    ctx,
-    mut,
-    dependencies,
-    contentMap,
-    ignored: await isGitIgnored(),
-    initialSlugs: ctx.allSlugs,
-    toRebuild: new Set<FilePath>(),
-    toRemove: new Set<FilePath>(),
-    trackedAssets: new Set<FilePath>(),
-    lastBuildMs: 0,
+  const initialSlugs = ctx.allSlugs
+  let lastBuildMs = 0
+  const toRebuild: Set<FilePath> = new Set()
+  const toRemove: Set<FilePath> = new Set()
+  const trackedAssets: Set<FilePath> = new Set()
+  async function rebuild(fp: string, action: "add" | "change" | "delete") {
+    // don't do anything for gitignored files
+    if (ignored(fp)) {
+      return
+    }
+
+    // dont bother rebuilding for non-content files, just track and refresh
+    fp = toPosixPath(fp)
+    const filePath = joinSegments(argv.directory, fp) as FilePath
+    if (path.extname(fp) !== ".md") {
+      if (action === "add" || action === "change") {
+        trackedAssets.add(filePath)
+      } else if (action === "delete") {
+        trackedAssets.delete(filePath)
+      }
+      clientRefresh()
+      return
+    }
+
+    if (action === "add" || action === "change") {
+      toRebuild.add(filePath)
+    } else if (action === "delete") {
+      toRemove.add(filePath)
+    }
+
+    // debounce rebuilds every 250ms
+
+    const buildStart = new Date().getTime()
+    lastBuildMs = buildStart
+    const release = await mut.acquire()
+    if (lastBuildMs > buildStart) {
+      release()
+      return
+    }
+
+    const perf = new PerfTimer()
+    console.log(chalk.yellow("Detected change, rebuilding..."))
+    try {
+      const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))
+
+      const trackedSlugs = [...new Set([...contentMap.keys(), ...toRebuild, ...trackedAssets])]
+        .filter((fp) => !toRemove.has(fp))
+        .map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))
+
+      ctx.allSlugs = [...new Set([...initialSlugs, ...trackedSlugs])]
+      const parsedContent = await parseMarkdown(ctx, filesToRebuild)
+      for (const content of parsedContent) {
+        const [_tree, vfile] = content
+        contentMap.set(vfile.data.filePath!, content)
+      }
+
+      for (const fp of toRemove) {
+        contentMap.delete(fp)
+      }
+
+      const parsedFiles = [...contentMap.values()]
+      const filteredContent = filterContent(ctx, parsedFiles)
+
+      // TODO: we can probably traverse the link graph to figure out what's safe to delete here
+      // instead of just deleting everything
+      await rimraf(argv.output)
+      await emitContent(ctx, filteredContent)
+      console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
+    } catch (err) {
+      console.log(chalk.yellow(`Rebuild failed. Waiting on a change to fix the error...`))
+      if (argv.verbose) {
+        console.log(chalk.red(err))
+      }
+    }
+
+    release()
+    clientRefresh()
+    toRebuild.clear()
+    toRemove.clear()
   }
 
   const watcher = chokidar.watch(".", {
@@ -137,280 +167,16 @@ async function startServing(
     ignoreInitial: true,
   })
 
-  const buildFromEntry = argv.fastRebuild ? partialRebuildFromEntrypoint : rebuildFromEntrypoint
   watcher
-    .on("add", (fp) => buildFromEntry(fp, "add", clientRefresh, buildData))
-    .on("change", (fp) => buildFromEntry(fp, "change", clientRefresh, buildData))
-    .on("unlink", (fp) => buildFromEntry(fp, "delete", clientRefresh, buildData))
+    .on("add", (fp) => rebuild(fp, "add"))
+    .on("change", (fp) => rebuild(fp, "change"))
+    .on("unlink", (fp) => rebuild(fp, "delete"))
 
   return async () => {
     await watcher.close()
   }
 }
 
-async function partialRebuildFromEntrypoint(
-  filepath: string,
-  action: FileEvent,
-  clientRefresh: () => void,
-  buildData: BuildData, // note: this function mutates buildData
-) {
-  const { ctx, ignored, dependencies, contentMap, mut, toRemove } = buildData
-  const { argv, cfg } = ctx
-
-  // don't do anything for gitignored files
-  if (ignored(filepath)) {
-    return
-  }
-
-  const buildStart = new Date().getTime()
-  buildData.lastBuildMs = buildStart
-  const release = await mut.acquire()
-  if (buildData.lastBuildMs > buildStart) {
-    release()
-    return
-  }
-
-  const perf = new PerfTimer()
-  console.log(chalk.yellow("Detected change, rebuilding..."))
-  ctx.buildId = newBuildId()
-
-  // UPDATE DEP GRAPH
-  const fp = joinSegments(argv.directory, toPosixPath(filepath)) as FilePath
-
-  const staticResources = getStaticResourcesFromPlugins(ctx)
-  let processedFiles: ProcessedContent[] = []
-
-  switch (action) {
-    case "add":
-      // add to cache when new file is added
-      processedFiles = await parseMarkdown(ctx, [fp])
-      processedFiles.forEach(([tree, vfile]) => contentMap.set(vfile.data.filePath!, [tree, vfile]))
-
-      // update the dep graph by asking all emitters whether they depend on this file
-      for (const emitter of cfg.plugins.emitters) {
-        const emitterGraph =
-          (await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
-
-        if (emitterGraph) {
-          const existingGraph = dependencies[emitter.name]
-          if (existingGraph !== null) {
-            existingGraph.mergeGraph(emitterGraph)
-          } else {
-            // might be the first time we're adding a mardown file
-            dependencies[emitter.name] = emitterGraph
-          }
-        }
-      }
-      break
-    case "change":
-      // invalidate cache when file is changed
-      processedFiles = await parseMarkdown(ctx, [fp])
-      processedFiles.forEach(([tree, vfile]) => contentMap.set(vfile.data.filePath!, [tree, vfile]))
-
-      // only content files can have added/removed dependencies because of transclusions
-      if (path.extname(fp) === ".md") {
-        for (const emitter of cfg.plugins.emitters) {
-          // get new dependencies from all emitters for this file
-          const emitterGraph =
-            (await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
-
-          // only update the graph if the emitter plugin uses the changed file
-          // eg. Assets plugin ignores md files, so we skip updating the graph
-          if (emitterGraph?.hasNode(fp)) {
-            // merge the new dependencies into the dep graph
-            dependencies[emitter.name]?.updateIncomingEdgesForNode(emitterGraph, fp)
-          }
-        }
-      }
-      break
-    case "delete":
-      toRemove.add(fp)
-      break
-  }
-
-  if (argv.verbose) {
-    console.log(`Updated dependency graphs in ${perf.timeSince()}`)
-  }
-
-  // EMIT
-  perf.addEvent("rebuild")
-  let emittedFiles = 0
-
-  for (const emitter of cfg.plugins.emitters) {
-    const depGraph = dependencies[emitter.name]
-
-    // emitter hasn't defined a dependency graph. call it with all processed files
-    if (depGraph === null) {
-      if (argv.verbose) {
-        console.log(
-          `Emitter ${emitter.name} doesn't define a dependency graph. Calling it with all files...`,
-        )
-      }
-
-      const files = [...contentMap.values()].filter(
-        ([_node, vfile]) => !toRemove.has(vfile.data.filePath!),
-      )
-
-      const emittedFps = await emitter.emit(ctx, files, staticResources)
-
-      if (ctx.argv.verbose) {
-        for (const file of emittedFps) {
-          console.log(`[emit:${emitter.name}] ${file}`)
-        }
-      }
-
-      emittedFiles += emittedFps.length
-      continue
-    }
-
-    // only call the emitter if it uses this file
-    if (depGraph.hasNode(fp)) {
-      // re-emit using all files that are needed for the downstream of this file
-      // eg. for ContentIndex, the dep graph could be:
-      // a.md --> contentIndex.json
-      // b.md ------^
-      //
-      // if a.md changes, we need to re-emit contentIndex.json,
-      // and supply [a.md, b.md] to the emitter
-      const upstreams = [...depGraph.getLeafNodeAncestors(fp)] as FilePath[]
-
-      const upstreamContent = upstreams
-        // filter out non-markdown files
-        .filter((file) => contentMap.has(file))
-        // if file was deleted, don't give it to the emitter
-        .filter((file) => !toRemove.has(file))
-        .map((file) => contentMap.get(file)!)
-
-      const emittedFps = await emitter.emit(ctx, upstreamContent, staticResources)
-
-      if (ctx.argv.verbose) {
-        for (const file of emittedFps) {
-          console.log(`[emit:${emitter.name}] ${file}`)
-        }
-      }
-
-      emittedFiles += emittedFps.length
-    }
-  }
-
-  console.log(`Emitted ${emittedFiles} files to \`${argv.output}\` in ${perf.timeSince("rebuild")}`)
-
-  // CLEANUP
-  const destinationsToDelete = new Set<FilePath>()
-  for (const file of toRemove) {
-    // remove from cache
-    contentMap.delete(file)
-    Object.values(dependencies).forEach((depGraph) => {
-      // remove the node from dependency graphs
-      depGraph?.removeNode(file)
-      // remove any orphan nodes. eg if a.md is deleted, a.html is orphaned and should be removed
-      const orphanNodes = depGraph?.removeOrphanNodes()
-      orphanNodes?.forEach((node) => {
-        // only delete files that are in the output directory
-        if (node.startsWith(argv.output)) {
-          destinationsToDelete.add(node)
-        }
-      })
-    })
-  }
-  await rimraf([...destinationsToDelete])
-
-  console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
-
-  toRemove.clear()
-  release()
-  clientRefresh()
-}
-
-async function rebuildFromEntrypoint(
-  fp: string,
-  action: FileEvent,
-  clientRefresh: () => void,
-  buildData: BuildData, // note: this function mutates buildData
-) {
-  const { ctx, ignored, mut, initialSlugs, contentMap, toRebuild, toRemove, trackedAssets } =
-    buildData
-
-  const { argv } = ctx
-
-  // don't do anything for gitignored files
-  if (ignored(fp)) {
-    return
-  }
-
-  // dont bother rebuilding for non-content files, just track and refresh
-  fp = toPosixPath(fp)
-  const filePath = joinSegments(argv.directory, fp) as FilePath
-  if (path.extname(fp) !== ".md") {
-    if (action === "add" || action === "change") {
-      trackedAssets.add(filePath)
-    } else if (action === "delete") {
-      trackedAssets.delete(filePath)
-    }
-    clientRefresh()
-    return
-  }
-
-  if (action === "add" || action === "change") {
-    toRebuild.add(filePath)
-  } else if (action === "delete") {
-    toRemove.add(filePath)
-  }
-
-  const buildStart = new Date().getTime()
-  buildData.lastBuildMs = buildStart
-  const release = await mut.acquire()
-
-  // there's another build after us, release and let them do it
-  if (buildData.lastBuildMs > buildStart) {
-    release()
-    return
-  }
-
-  const perf = new PerfTimer()
-  console.log(chalk.yellow("Detected change, rebuilding..."))
-  ctx.buildId = newBuildId()
-
-  try {
-    const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))
-    const parsedContent = await parseMarkdown(ctx, filesToRebuild)
-    for (const content of parsedContent) {
-      const [_tree, vfile] = content
-      contentMap.set(vfile.data.filePath!, content)
-    }
-
-    for (const fp of toRemove) {
-      contentMap.delete(fp)
-    }
-
-    const parsedFiles = [...contentMap.values()]
-    const filteredContent = filterContent(ctx, parsedFiles)
-
-    // re-update slugs
-    const trackedSlugs = [...new Set([...contentMap.keys(), ...toRebuild, ...trackedAssets])]
-      .filter((fp) => !toRemove.has(fp))
-      .map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))
-
-    ctx.allSlugs = [...new Set([...initialSlugs, ...trackedSlugs])]
-
-    // TODO: we can probably traverse the link graph to figure out what's safe to delete here
-    // instead of just deleting everything
-    await rimraf(path.join(argv.output, ".*"), { glob: true })
-    await emitContent(ctx, filteredContent)
-    console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
-  } catch (err) {
-    console.log(chalk.yellow(`Rebuild failed. Waiting on a change to fix the error...`))
-    if (argv.verbose) {
-      console.log(chalk.red(err))
-    }
-  }
-
-  release()
-  clientRefresh()
-  toRebuild.clear()
-  toRemove.clear()
-}
-
 export default async (argv: Argv, mut: Mutex, clientRefresh: () => void) => {
   try {
     return await buildQuartz(argv, mut, clientRefresh)

quartz/cfg.ts

@@ -1,6 +1,5 @@
 import { ValidDateType } from "./components/Date"
 import { QuartzComponent } from "./components/types"
-import { ValidLocale } from "./i18n"
 import { PluginTypes } from "./plugins/types"
 import { Theme } from "./util/theme"
 
@@ -8,7 +7,6 @@ export type Analytics =
   | null
   | {
       provider: "plausible"
-      host?: string
     }
   | {
       provider: "google"
@@ -17,26 +15,6 @@ export type Analytics =
   | {
       provider: "umami"
       websiteId: string
-      host?: string
-    }
-  | {
-      provider: "goatcounter"
-      websiteId: string
-      host?: string
-      scriptSrc?: string
-    }
-  | {
-      provider: "posthog"
-      apiKey: string
-      host?: string
-    }
-  | {
-      provider: "tinylytics"
-      siteId: string
-    }
-  | {
-      provider: "cabin"
-      host?: string
     }
 
 export interface GlobalConfiguration {
@@ -56,15 +34,6 @@ export interface GlobalConfiguration {
    */
   baseUrl?: string
   theme: Theme
-  /**
-   * Allow to translate the date in the language of your choice.
-   * Also used for UI translation (default: en-US)
-   * Need to be formated following BCP 47: https://en.wikipedia.org/wiki/IETF_language_tag
-   * The first part is the language (en) and the second part is the script/region (US)
-   * Language Codes: https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
-   * Region Codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
-   */
-  locale: ValidLocale
 }
 
 export interface QuartzConfig {
@@ -77,11 +46,10 @@ export interface FullPageLayout {
   header: QuartzComponent[]
   beforeBody: QuartzComponent[]
   pageBody: QuartzComponent
-  afterBody: QuartzComponent[]
   left: QuartzComponent[]
   right: QuartzComponent[]
   footer: QuartzComponent
 }
 
 export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
-export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody">
+export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer">

quartz/cli/args.js

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

quartz/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
 
@@ -168,20 +165,22 @@ See the [documentation](https://quartz.jzhao.xyz) for how to get started.
     // get a preferred link resolution strategy
     linkResolutionStrategy = exitIfCancel(
       await select({
-        message: `Choose how Quartz should resolve links in your content. This should match Obsidian's link format. You can change this later in \`quartz.config.ts\`.`,
+        message: `Choose how Quartz should resolve links in your content. You can change this later in \`quartz.config.ts\`.`,
         options: [
-          {
-            value: "shortest",
-            label: "Treat links as shortest path",
-            hint: "(default)",
-          },
           {
             value: "absolute",
             label: "Treat links as absolute path",
+            hint: "for content made for Quartz 3 and Hugo",
+          },
+          {
+            value: "shortest",
+            label: "Treat links as shortest path",
+            hint: "for most Obsidian vaults",
           },
           {
             value: "relative",
             label: "Treat links as relative paths",
+            hint: "for just normal Markdown files",
           },
         ],
       }),
@@ -200,7 +199,6 @@ See the [documentation](https://quartz.jzhao.xyz) for how to get started.
   // setup remote
   execSync(
     `git remote show upstream || git remote add upstream https://github.com/jackyzha0/quartz.git`,
-    { stdio: "ignore" },
   )
 
   outro(`You're all set! Not sure what to do next? Try:
@@ -257,7 +255,6 @@ export async function handleBuild(argv) {
               },
               write: false,
               bundle: true,
-              minify: true,
               platform: "browser",
               format: "esm",
             })
@@ -347,7 +344,7 @@ export async function handleBuild(argv) {
           directoryListing: false,
           headers: [
             {
-              source: "**/*.*",
+              source: "**/*.html",
               headers: [{ key: "Content-Disposition", value: "inline" }],
             },
           ],
@@ -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
     }

quartz/components/ArticleTitle.tsx

@@ -1,15 +1,13 @@
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import { classNames } from "../util/lang"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
+function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
   const title = fileData.frontmatter?.title
   if (title) {
-    return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
+    return <h1 class={`article-title ${displayClass ?? ""}`}>{title}</h1>
   } else {
     return null
   }
 }
-
 ArticleTitle.css = `
 .article-title {
   margin: 2rem 0 0 0;

quartz/components/Backlinks.tsx

@@ -1,20 +1,13 @@
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
-import { i18n } from "../i18n"
-import { classNames } from "../util/lang"
 
-const Backlinks: QuartzComponent = ({
-  fileData,
-  allFiles,
-  displayClass,
-  cfg,
-}: QuartzComponentProps) => {
+function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
   const slug = simplifySlug(fileData.slug!)
   const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
   return (
-    <div class={classNames(displayClass, "backlinks")}>
-      <h3>{i18n(cfg.locale).components.backlinks.title}</h3>
+    <div class={`backlinks ${displayClass ?? ""}`}>
+      <h3>Backlinks</h3>
       <ul class="overflow">
         {backlinkFiles.length > 0 ? (
           backlinkFiles.map((f) => (
@@ -25,7 +18,7 @@ const Backlinks: QuartzComponent = ({
             </li>
           ))
         ) : (
-          <li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
+          <li>No backlinks found</li>
         )}
       </ul>
     </div>

quartz/components/Body.tsx

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

quartz/components/Breadcrumbs.tsx

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

quartz/components/Comments.tsx

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

quartz/components/ContentMeta.tsx

@@ -1,60 +1,30 @@
 import { formatDate, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
-import { classNames } from "../util/lang"
-import { i18n } from "../i18n"
-import { JSX } from "preact"
-import style from "./styles/contentMeta.scss"
-
-interface ContentMetaOptions {
-  /**
-   * Whether to display reading time
-   */
-  showReadingTime: boolean
-  showComma: boolean
-}
-
-const defaultOptions: ContentMetaOptions = {
-  showReadingTime: true,
-  showComma: true,
-}
-
-export default ((opts?: Partial<ContentMetaOptions>) => {
-  // 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 | JSX.Element)[] = []
+      const segments: string[] = []
+      const { text: timeTaken, words: _words } = readingTime(text)
 
       if (fileData.dates) {
-        segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
+        segments.push(formatDate(getDate(cfg, fileData)!))
       }
 
-      // Display reading time if enabled
-      if (options.showReadingTime) {
-        const { minutes, words: _words } = readingTime(text)
-        const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
-          minutes: Math.ceil(minutes),
-        })
-        segments.push(displayedTime)
-      }
-
-      const segmentsElements = segments.map((segment) => <span>{segment}</span>)
-
-      return (
-        <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
-          {segmentsElements}
-        </p>
-      )
+      segments.push(timeTaken)
+      return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p>
     } else {
       return null
     }
   }
 
-  ContentMetadata.css = style
-
+  ContentMetadata.css = `
+  .content-meta {
+    margin-top: 0;
+    color: var(--gray);
+  }
+  `
   return ContentMetadata
 }) satisfies QuartzComponentConstructor

quartz/components/Darkmode.tsx

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

quartz/components/Date.tsx

@@ -1,10 +1,8 @@
 import { GlobalConfiguration } from "../cfg"
-import { ValidLocale } from "../i18n"
 import { QuartzPluginData } from "../plugins/vfile"
 
 interface Props {
   date: Date
-  locale?: ValidLocale
 }
 
 export type ValidDateType = keyof Required<QuartzPluginData>["dates"]
@@ -18,14 +16,14 @@ export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date
   return data.dates?.[cfg.defaultDateType]
 }
 
-export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
-  return d.toLocaleDateString(locale, {
+export function formatDate(d: Date): string {
+  return d.toLocaleDateString("en-US", {
     year: "numeric",
     month: "short",
     day: "2-digit",
   })
 }
 
-export function Date({ date, locale }: Props) {
-  return <>{formatDate(date, locale)}</>
+export function Date({ date }: Props) {
+  return <>{formatDate(date)}</>
 }

quartz/components/DesktopOnly.tsx

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

quartz/components/Explorer.tsx

@@ -1,15 +1,14 @@
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import explorerStyle from "./styles/explorer.scss"
 
 // @ts-ignore
 import script from "./scripts/explorer.inline"
 import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
 import { QuartzPluginData } from "../plugins/vfile"
-import { classNames } from "../util/lang"
-import { i18n } from "../i18n"
 
 // Options interface defined in `ExplorerNode` to avoid circular dependency
 const defaultOptions = {
+  title: "Explorer",
   folderClickBehavior: "collapse",
   folderDefaultState: "collapsed",
   useSavedState: true,
@@ -44,9 +43,12 @@ export default ((userOpts?: Partial<Options>) => {
   // memoized
   let fileTree: FileNode
   let jsonTree: string
-  let lastBuildId: string = ""
 
   function constructFileTree(allFiles: QuartzPluginData[]) {
+    if (fileTree) {
+      return
+    }
+
     // Construct tree from allFiles
     fileTree = new FileNode("")
     allFiles.forEach((file) => fileTree.add(file))
@@ -67,25 +69,16 @@ export default ((userOpts?: Partial<Options>) => {
     }
 
     // Get all folders of tree. Initialize with collapsed state
-    // Stringify to pass json tree as data attribute ([data-tree])
     const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
+
+    // Stringify to pass json tree as data attribute ([data-tree])
     jsonTree = JSON.stringify(folders)
   }
 
-  const Explorer: QuartzComponent = ({
-    ctx,
-    cfg,
-    allFiles,
-    displayClass,
-    fileData,
-  }: QuartzComponentProps) => {
-    if (ctx.buildId !== lastBuildId) {
-      lastBuildId = ctx.buildId
-      constructFileTree(allFiles)
-    }
-
+  function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
+    constructFileTree(allFiles)
     return (
-      <div class={classNames(displayClass, "explorer")}>
+      <div class={`explorer ${displayClass ?? ""}`}>
         <button
           type="button"
           id="explorer"
@@ -93,10 +86,8 @@ export default ((userOpts?: Partial<Options>) => {
           data-collapsed={opts.folderDefaultState}
           data-savestate={opts.useSavedState}
           data-tree={jsonTree}
-          aria-controls="explorer-content"
-          aria-expanded={opts.folderDefaultState === "open"}
         >
-          <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
+          <h1>{opts.title}</h1>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="14"

quartz/components/ExplorerNode.tsx

@@ -12,7 +12,7 @@ import {
 type OrderEntries = "sort" | "filter" | "map"
 
 export interface Options {
-  title?: string
+  title: string
   folderDefaultState: "collapsed" | "open"
   folderClickBehavior: "collapse" | "link"
   useSavedState: boolean
@@ -168,8 +168,10 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
   const isDefaultOpen = opts.folderDefaultState === "open"
 
   // Calculate current folderPath
-  const folderPath = node.name !== "" ? joinSegments(fullPath ?? "", node.name) : ""
-  const href = resolveRelative(fileData.slug!, folderPath as SimpleSlug) + "/"
+  let folderPath = ""
+  if (node.name !== "") {
+    folderPath = joinSegments(fullPath ?? "", node.name)
+  }
 
   return (
     <>
@@ -203,7 +205,11 @@ 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={href} data-for={node.name} class="folder-title">
+                  <a
+                    href={resolveRelative(fileData.slug!, folderPath as SimpleSlug)}
+                    data-for={node.name}
+                    class="folder-title"
+                  >
                     {node.displayName}
                   </a>
                 ) : (

quartz/components/Footer.tsx

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

quartz/components/Graph.tsx

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

quartz/components/Head.tsx

@@ -1,14 +1,11 @@
-import { i18n } from "../i18n"
-import { FullSlug, joinSegments, pathToRoot } from "../util/path"
+import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
-import { googleFontHref } from "../util/theme"
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 export default (() => {
-  const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
-    const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
-    const description =
-      fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
+  function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
+    const title = fileData.frontmatter?.title ?? "Untitled"
+    const description = fileData.description?.trim() ?? "No description provided"
     const { css, js } = externalResources
 
     const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
@@ -22,13 +19,6 @@ export default (() => {
       <head>
         <title>{title}</title>
         <meta charSet="utf-8" />
-        {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
-          <>
-            <link rel="preconnect" href="https://fonts.googleapis.com" />
-            <link rel="preconnect" href="https://fonts.gstatic.com" />
-            <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
-          </>
-        )}
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
@@ -38,6 +28,8 @@ export default (() => {
         <link rel="icon" href={iconPath} />
         <meta name="description" content={description} />
         <meta name="generator" content="Quartz" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
         {css.map((href) => (
           <link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />
         ))}

quartz/components/Header.tsx

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

quartz/components/MobileOnly.tsx

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

quartz/components/PageList.tsx

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

quartz/components/PageTitle.tsx

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

quartz/components/RecentNotes.tsx

@@ -1,46 +1,38 @@
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { byDateAndAlphabetical } from "./PageList"
 import style from "./styles/recentNotes.scss"
 import { Date, getDate } from "./Date"
 import { GlobalConfiguration } from "../cfg"
-import { i18n } from "../i18n"
-import { classNames } from "../util/lang"
 
 interface Options {
-  title?: string
+  title: string
   limit: number
   linkToMore: SimpleSlug | false
-  showTags: boolean
   filter: (f: QuartzPluginData) => boolean
   sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number
 }
 
 const defaultOptions = (cfg: GlobalConfiguration): Options => ({
+  title: "Recent Notes",
   limit: 3,
   linkToMore: false,
-  showTags: true,
   filter: () => true,
   sort: byDateAndAlphabetical(cfg),
 })
 
 export default ((userOpts?: Partial<Options>) => {
-  const RecentNotes: QuartzComponent = ({
-    allFiles,
-    fileData,
-    displayClass,
-    cfg,
-  }: QuartzComponentProps) => {
+  function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) {
     const opts = { ...defaultOptions(cfg), ...userOpts }
     const pages = allFiles.filter(opts.filter).sort(opts.sort)
     const remaining = Math.max(0, pages.length - opts.limit)
     return (
-      <div class={classNames(displayClass, "recent-notes")}>
-        <h3>{opts.title ?? i18n(cfg.locale).components.recentNotes.title}</h3>
+      <div class={`recent-notes ${displayClass ?? ""}`}>
+        <h3>{opts.title}</h3>
         <ul class="recent-ul">
           {pages.slice(0, opts.limit).map((page) => {
-            const title = page.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
+            const title = page.frontmatter?.title
             const tags = page.frontmatter?.tags ?? []
 
             return (
@@ -55,23 +47,21 @@ export default ((userOpts?: Partial<Options>) => {
                   </div>
                   {page.dates && (
                     <p class="meta">
-                      <Date date={getDate(cfg, page)!} locale={cfg.locale} />
+                      <Date date={getDate(cfg, page)!} />
                     </p>
                   )}
-                  {opts.showTags && (
-                    <ul class="tags">
-                      {tags.map((tag) => (
-                        <li>
-                          <a
-                            class="internal tag-link"
-                            href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
-                          >
-                            {tag}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
+                  <ul class="tags">
+                    {tags.map((tag) => (
+                      <li>
+                        <a
+                          class="internal tag-link"
+                          href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
+                        >
+                          #{tag}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
               </li>
             )
@@ -79,9 +69,7 @@ export default ((userOpts?: Partial<Options>) => {
         </ul>
         {opts.linkToMore && remaining > 0 && (
           <p>
-            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>
-              {i18n(cfg.locale).components.recentNotes.seeRemainingMore({ remaining })}
-            </a>
+            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>See {remaining} more →</a>
           </p>
         )}
       </div>

quartz/components/Search.tsx

@@ -1,34 +1,30 @@
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
-import { classNames } from "../util/lang"
-import { i18n } from "../i18n"
 
-export interface SearchOptions {
-  enablePreview: boolean
-}
-
-const defaultOptions: SearchOptions = {
-  enablePreview: true,
-}
-
-export default ((userOpts?: Partial<SearchOptions>) => {
-  const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
-    const opts = { ...defaultOptions, ...userOpts }
-    const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
+export default (() => {
+  function Search({ displayClass }: QuartzComponentProps) {
     return (
-      <div class={classNames(displayClass, "search")}>
-        <button class="search-button" id="search-button">
-          <p>{i18n(cfg.locale).components.search.title}</p>
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
-            <title>Search</title>
+      <div class={`search ${displayClass ?? ""}`}>
+        <div id="search-icon">
+          <p>Search</p>
+          <div></div>
+          <svg
+            tabIndex={0}
+            aria-labelledby="title desc"
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 19.9 19.7"
+          >
+            <title id="title">Search</title>
+            <desc id="desc">Search</desc>
             <g class="search-path" fill="none">
               <path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
               <circle cx="8" cy="8" r="7" />
             </g>
           </svg>
-        </button>
+        </div>
         <div id="search-container">
           <div id="search-space">
             <input
@@ -36,10 +32,10 @@ export default ((userOpts?: Partial<SearchOptions>) => {
               id="search-bar"
               name="search"
               type="text"
-              aria-label={searchPlaceholder}
-              placeholder={searchPlaceholder}
+              aria-label="Search for something"
+              placeholder="Search for something"
             />
-            <div id="search-layout" data-preview={opts.enablePreview}></div>
+            <div id="results-container"></div>
           </div>
         </div>
       </div>

quartz/components/Spacer.tsx

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

quartz/components/TableOfContents.tsx

@@ -1,11 +1,9 @@
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import legacyStyle from "./styles/legacyToc.scss"
 import modernStyle from "./styles/toc.scss"
-import { classNames } from "../util/lang"
 
 // @ts-ignore
 import script from "./scripts/toc.inline"
-import { i18n } from "../i18n"
 
 interface Options {
   layout: "modern" | "legacy"
@@ -15,25 +13,15 @@ const defaultOptions: Options = {
   layout: "modern",
 }
 
-const TableOfContents: QuartzComponent = ({
-  fileData,
-  displayClass,
-  cfg,
-}: QuartzComponentProps) => {
+function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
   if (!fileData.toc) {
     return null
   }
 
   return (
-    <div class={classNames(displayClass, "toc")}>
-      <button
-        type="button"
-        id="toc"
-        class={fileData.collapseToc ? "collapsed" : ""}
-        aria-controls="toc-content"
-        aria-expanded={!fileData.collapseToc}
-      >
-        <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
+    <div class={`toc ${displayClass ?? ""}`}>
+      <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
+        <h3>Table of Contents</h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -49,7 +37,7 @@ const TableOfContents: QuartzComponent = ({
           <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
       </button>
-      <div id="toc-content" class={fileData.collapseToc ? "collapsed" : ""}>
+      <div id="toc-content">
         <ul class="overflow">
           {fileData.toc.map((tocEntry) => (
             <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
@@ -66,14 +54,15 @@ const TableOfContents: QuartzComponent = ({
 TableOfContents.css = modernStyle
 TableOfContents.afterDOMLoaded = script
 
-const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => {
+function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
   if (!fileData.toc) {
     return null
   }
+
   return (
     <details id="toc" open={!fileData.collapseToc}>
       <summary>
-        <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
+        <h3>Table of Contents</h3>
       </summary>
       <ul>
         {fileData.toc.map((tocEntry) => (

quartz/components/TagList.tsx

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

quartz/components/index.ts

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

quartz/components/pages/404.tsx

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

quartz/components/pages/Content.tsx

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

quartz/components/pages/FolderContent.tsx

@@ -1,71 +1,47 @@
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
+import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
 import path from "path"
 
 import style from "../styles/listPage.scss"
-import { PageList, SortFn } from "../PageList"
-import { stripSlashes, simplifySlug } from "../../util/path"
+import { PageList } from "../PageList"
+import { _stripSlashes, simplifySlug } from "../../util/path"
 import { Root } from "hast"
+import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
-import { i18n } from "../../i18n"
 
-interface FolderContentOptions {
-  /**
-   * Whether to display number of folders
-   */
-  showFolderCount: boolean
-  sort?: SortFn
-}
+function FolderContent(props: QuartzComponentProps) {
+  const { tree, fileData, allFiles } = props
+  const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
+  const allPagesInFolder = allFiles.filter((file) => {
+    const fileSlug = _stripSlashes(simplifySlug(file.slug!))
+    const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
+    const folderParts = folderSlug.split(path.posix.sep)
+    const fileParts = fileSlug.split(path.posix.sep)
+    const isDirectChild = fileParts.length === folderParts.length + 1
+    return prefixed && isDirectChild
+  })
 
-const defaultOptions: FolderContentOptions = {
-  showFolderCount: true,
-}
-
-export default ((opts?: Partial<FolderContentOptions>) => {
-  const options: FolderContentOptions = { ...defaultOptions, ...opts }
-
-  const FolderContent: QuartzComponent = (props: QuartzComponentProps) => {
-    const { tree, fileData, allFiles, cfg } = props
-    const folderSlug = stripSlashes(simplifySlug(fileData.slug!))
-    const allPagesInFolder = allFiles.filter((file) => {
-      const fileSlug = stripSlashes(simplifySlug(file.slug!))
-      const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
-      const folderParts = folderSlug.split(path.posix.sep)
-      const fileParts = fileSlug.split(path.posix.sep)
-      const isDirectChild = fileParts.length === folderParts.length + 1
-      return prefixed && isDirectChild
-    })
-    const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
-    const classes = ["popover-hint", ...cssClasses].join(" ")
-    const listProps = {
-      ...props,
-      sort: options.sort,
-      allFiles: allPagesInFolder,
-    }
-
-    const content =
-      (tree as Root).children.length === 0
-        ? fileData.description
-        : htmlToJsx(fileData.filePath!, tree)
-
-    return (
-      <div class={classes}>
-        <article>{content}</article>
-        <div class="page-listing">
-          {options.showFolderCount && (
-            <p>
-              {i18n(cfg.locale).pages.folderContent.itemsUnderFolder({
-                count: allPagesInFolder.length,
-              })}
-            </p>
-          )}
-          <div>
-            <PageList {...listProps} />
-          </div>
-        </div>
-      </div>
-    )
+  const listProps = {
+    ...props,
+    allFiles: allPagesInFolder,
   }
 
-  FolderContent.css = style + PageList.css
-  return FolderContent
-}) satisfies QuartzComponentConstructor
+  const content =
+    (tree as Root).children.length === 0
+      ? fileData.description
+      : htmlToJsx(fileData.filePath!, tree)
+
+  return (
+    <div class="popover-hint">
+      <article>
+        <p>{content}</p>
+      </article>
+      <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+      <div>
+        <PageList {...listProps} />
+      </div>
+    </div>
+  )
+}
+
+FolderContent.css = style + PageList.css
+export default (() => FolderContent) satisfies QuartzComponentConstructor