pkg: bump to 4.1.6

* feat(usability): update functions for search

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* perf: slightly cleaner variables

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# 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: "daily"

docs/authoring content.md

@@ -28,21 +28,13 @@ 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.
 - `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 by doing `npx quartz sync`.
+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`.
-> [!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/features/callouts.md

@@ -24,7 +24,24 @@ See [documentation on supported types and syntax here](https://help.obsidian.md
 ## Customization
 
 - Disable callouts: simply pass `callouts: false` to the plugin: `Plugin.ObsidianFlavoredMarkdown({ callouts: false })`
-- Editing icons: `quartz/plugins/transformers/ofm.ts`
+- Editing icons: `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.
 
 ## Showcase
 

docs/features/darkmode.md

@@ -12,3 +12,12 @@ 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/index.md

@@ -23,7 +23,11 @@ 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. [[hosting|Host]] Quartz online
+5. Sync your changes with [[setting up your GitHub repository|GitHub]]
+6. [[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)
 
 ## 🔧 Features
 

docs/setting up your GitHub repository.md

@@ -15,25 +15,34 @@ 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
-# add your repository
+# list all the repositories that are tracked
-git remote add origin REMOTE-URL
+git remote -v
 
-# track the main quartz repository for updates
+# 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
 git remote add upstream https://github.com/jackyzha0/quartz.git
 ```
 
-To verify that you set the remote URL correctly, run the following command.
+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.
-
-```bash
-git remote -v
-```
-
-Then, you can sync the content to upload it to your repository.
 
 ```bash
 npx quartz sync --no-pull
 ```
 
-> [!hint]
+> [!warning]- `fatal: --[no-]autostash option is only valid with --rebase`
-> If `npx quartz sync` fails with `fatal: --[no-]autostash option is only valid with --rebase`, you
+> You may have an outdated version of `git`. Updating `git` should fix this issue.
-> 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

docs/showcase.md

@@ -7,13 +7,10 @@ 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/)
-- [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/)
 - [oldwinter の数字花园](https://garden.oldwinter.top/)
+- [Aaron Pham's Garden](https://aarnphm.xyz/)
+- [The Quantum Garden](https://quantumgardener.blog/)
 - [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/)
@@ -22,7 +19,11 @@ Want to see what Quartz can do? Here are some cool community gardens:
 - [Mau Camargo's Notkesto](https://notes.camargomau.com/)
 - [Caicai's Novels](https://imoko.cc/blog/caicai/)
 - [🌊 Collapsed Wave](https://collapsedwave.com/)
-- [Aaron Pham's Garden](https://aarnphm.xyz/)
 - [Sideny's 3D Artist's Handbook](https://sidney-eliot.github.io/3d-artists-handbook/)
+- [Mike's AI Garden 🤖🪴](https://mwalton.me/)
+- [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/)
 
 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)!

globals.d.ts

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

index.d.ts

@@ -6,6 +6,7 @@ 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.1.5",
+  "version": "4.1.6",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",
@@ -35,15 +35,15 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@floating-ui/dom": "^1.5.3",
+    "@floating-ui/dom": "^1.6.1",
-    "@napi-rs/simple-git": "0.1.9",
+    "@napi-rs/simple-git": "0.1.14",
     "async-mutex": "^0.4.0",
     "chalk": "^5.3.0",
     "chokidar": "^3.5.3",
     "cli-spinner": "^0.2.10",
     "d3": "^7.8.5",
     "esbuild-sass-plugin": "^2.16.0",
-    "flexsearch": "0.7.21",
+    "flexsearch": "0.7.43",
     "github-slugger": "^2.0.0",
     "globby": "^14.0.0",
     "gray-matter": "^4.0.3",
@@ -52,7 +52,7 @@
     "hast-util-to-string": "^3.0.0",
     "is-absolute-url": "^4.0.1",
     "js-yaml": "^4.1.0",
-    "lightningcss": "^1.22.1",
+    "lightningcss": "^1.23.0",
     "mdast-util-find-and-replace": "^3.0.1",
     "mdast-util-to-hast": "^13.0.2",
     "mdast-util-to-string": "^4.0.0",
@@ -64,8 +64,8 @@
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-katex": "^7.0.0",
-    "rehype-mathjax": "^5.0.0",
+    "rehype-mathjax": "^6.0.0",
-    "rehype-pretty-code": "^0.12.3",
+    "rehype-pretty-code": "^0.12.6",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
@@ -74,37 +74,35 @@
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.0.0",
+    "remark-rehype": "^11.1.0",
     "remark-smartypants": "^2.0.0",
-    "rfdc": "^1.3.0",
+    "rfdc": "^1.3.1",
     "rimraf": "^5.0.5",
     "serve-handler": "^6.1.5",
-    "shikiji": "^0.9.9",
+    "shikiji": "^0.10.2",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",
     "unified": "^11.0.4",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.1",
-    "workerpool": "^8.0.0",
+    "workerpool": "^9.1.0",
     "ws": "^8.15.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/cli-spinner": "^0.2.3",
     "@types/d3": "^7.4.3",
-    "@types/flexsearch": "^0.7.3",
     "@types/hast": "^3.0.3",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.11.11",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
-    "@types/workerpool": "^6.4.7",
     "@types/ws": "^8.5.10",
     "@types/yargs": "^17.0.32",
     "esbuild": "^0.19.9",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
-    "tsx": "^4.6.2",
+    "tsx": "^4.7.0",
     "typescript": "^5.3.3"
   }
 }

quartz/build.ts

@@ -3,13 +3,13 @@ sourceMapSupport.install(options)
 import path from "path"
 import { PerfTimer } from "./util/perf"
 import { rimraf } from "rimraf"
-import { isGitIgnored } from "globby"
+import { GlobbyFilterFunction, isGitIgnored } from "globby"
 import chalk from "chalk"
 import { parseMarkdown } from "./processors/parse"
 import { filterContent } from "./processors/filter"
 import { emitContent } from "./processors/emit"
 import cfg from "../quartz.config"
-import { FilePath, joinSegments, slugifyFilePath } from "./util/path"
+import { FilePath, FullSlug, joinSegments, slugifyFilePath } from "./util/path"
 import chokidar from "chokidar"
 import { ProcessedContent } from "./plugins/vfile"
 import { Argv, BuildCtx } from "./util/ctx"
@@ -18,6 +18,19 @@ import { trace } from "./util/trace"
 import { options } from "./util/sourcemap"
 import { Mutex } from "async-mutex"
 
+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
+}
+
 async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
   const ctx: BuildCtx = {
     argv,
@@ -73,19 +86,60 @@ async function startServing(
 ) {
   const { argv } = ctx
 
-  const ignored = await isGitIgnored()
   const contentMap = new Map<FilePath, ProcessedContent>()
   for (const content of initialContent) {
     const [_tree, vfile] = content
     contentMap.set(vfile.data.filePath!, content)
   }
 
-  const initialSlugs = ctx.allSlugs
+  const buildData: BuildData = {
-  let lastBuildMs = 0
+    ctx,
-  const toRebuild: Set<FilePath> = new Set()
+    mut,
-  const toRemove: Set<FilePath> = new Set()
+    contentMap,
-  const trackedAssets: Set<FilePath> = new Set()
+    ignored: await isGitIgnored(),
-  async function rebuild(fp: string, action: "add" | "change" | "delete") {
+    initialSlugs: ctx.allSlugs,
+    toRebuild: new Set<FilePath>(),
+    toRemove: new Set<FilePath>(),
+    trackedAssets: new Set<FilePath>(),
+    lastBuildMs: 0,
+  }
+
+  const watcher = chokidar.watch(".", {
+    persistent: true,
+    cwd: argv.directory,
+    ignoreInitial: true,
+  })
+
+  watcher
+    .on("add", (fp) => rebuildFromEntrypoint(fp, "add", clientRefresh, buildData))
+    .on("change", (fp) => rebuildFromEntrypoint(fp, "change", clientRefresh, buildData))
+    .on("unlink", (fp) => rebuildFromEntrypoint(fp, "delete", clientRefresh, buildData))
+
+  return async () => {
+    await watcher.close()
+  }
+}
+
+async function rebuildFromEntrypoint(
+  fp: string,
+  action: "add" | "change" | "delete",
+  clientRefresh: () => void,
+  buildData: BuildData, // note: this function mutates buildData
+) {
+  const {
+    ctx,
+    ignored,
+    mut,
+    initialSlugs,
+    contentMap,
+    toRebuild,
+    toRemove,
+    trackedAssets,
+    lastBuildMs,
+  } = buildData
+
+  const { argv } = ctx
+
   // don't do anything for gitignored files
   if (ignored(fp)) {
     return
@@ -113,7 +167,7 @@ async function startServing(
   // debounce rebuilds every 250ms
 
   const buildStart = new Date().getTime()
-    lastBuildMs = buildStart
+  buildData.lastBuildMs = buildStart
   const release = await mut.acquire()
   if (lastBuildMs > buildStart) {
     release()
@@ -161,22 +215,6 @@ async function startServing(
   toRemove.clear()
 }
 
-  const watcher = chokidar.watch(".", {
-    persistent: true,
-    cwd: argv.directory,
-    ignoreInitial: true,
-  })
-
-  watcher
-    .on("add", (fp) => rebuild(fp, "add"))
-    .on("change", (fp) => rebuild(fp, "change"))
-    .on("unlink", (fp) => rebuild(fp, "delete"))
-
-  return async () => {
-    await watcher.close()
-  }
-}
-
 export default async (argv: Argv, mut: Mutex, clientRefresh: () => void) => {
   try {
     return await buildQuartz(argv, mut, clientRefresh)

quartz/cfg.ts

@@ -16,6 +16,7 @@ export type Analytics =
   | {
       provider: "umami"
       websiteId: string
+      host?: string
     }
 
 export interface GlobalConfiguration {
@@ -35,6 +36,12 @@ export interface GlobalConfiguration {
    */
   baseUrl?: string
   theme: Theme
+  /**
+   * The locale to use for date formatting. Default to "en-US"
+   * Allow to translate the date in the language of your choice.
+   * Need to be formated following the IETF language tag format (https://en.wikipedia.org/wiki/IETF_language_tag)
+   */
+  locale?: string
 }
 
 export interface QuartzConfig {

quartz/cli/handlers.js

@@ -168,22 +168,20 @@ 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. You can change this later in \`quartz.config.ts\`.`,
+        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\`.`,
         options: [
-          {
-            value: "absolute",
-            label: "Treat links as absolute path",
-            hint: "for content made for Quartz 3 and Hugo",
-          },
           {
             value: "shortest",
             label: "Treat links as shortest path",
-            hint: "for most Obsidian vaults",
+            hint: "(default)",
+          },
+          {
+            value: "absolute",
+            label: "Treat links as absolute path",
           },
           {
             value: "relative",
             label: "Treat links as relative paths",
-            hint: "for just normal Markdown files",
           },
         ],
       }),
@@ -202,6 +200,7 @@ 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:
@@ -258,6 +257,7 @@ export async function handleBuild(argv) {
               },
               write: false,
               bundle: true,
+              minify: true,
               platform: "browser",
               format: "esm",
             })
@@ -347,7 +347,7 @@ export async function handleBuild(argv) {
           directoryListing: false,
           headers: [
             {
-              source: "**/*.html",
+              source: "**/*.*",
               headers: [{ key: "Content-Disposition", value: "inline" }],
             },
           ],

quartz/components/ArticleTitle.tsx

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

quartz/components/Backlinks.tsx

@@ -1,12 +1,13 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
+import { classNames } from "../util/lang"
 
 function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
   const slug = simplifySlug(fileData.slug!)
   const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
   return (
-    <div class={`backlinks ${displayClass ?? ""}`}>
+    <div class={classNames(displayClass, "backlinks")}>
       <h3>Backlinks</h3>
       <ul class="overflow">
         {backlinkFiles.length > 0 ? (

quartz/components/Breadcrumbs.tsx

@@ -2,6 +2,7 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
 import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
+import { classNames } from "../util/lang"
 
 type CrumbData = {
   displayName: string
@@ -113,7 +114,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
     }
 
     return (
-      <nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs">
+      <nav class={classNames(displayClass, "breadcrumb-container")} aria-label="breadcrumbs">
         {crumbs.map((crumb, index) => (
           <div class="breadcrumb-element">
             <a href={crumb.path}>{crumb.displayName}</a>

quartz/components/ContentMeta.tsx

@@ -1,6 +1,7 @@
 import { formatDate, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
+import { classNames } from "../util/lang"
 
 interface ContentMetaOptions {
   /**
@@ -24,7 +25,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
       const segments: string[] = []
 
       if (fileData.dates) {
-        segments.push(formatDate(getDate(cfg, fileData)!))
+        segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
       }
 
       // Display reading time if enabled
@@ -33,7 +34,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
         segments.push(timeTaken)
       }
 
-      return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p>
+      return <p class={classNames(displayClass, "content-meta")}>{segments.join(", ")}</p>
     } else {
       return null
     }

quartz/components/Darkmode.tsx

@@ -4,10 +4,11 @@
 import darkmodeScript from "./scripts/darkmode.inline"
 import styles from "./styles/darkmode.scss"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
 
 function Darkmode({ displayClass }: QuartzComponentProps) {
   return (
-    <div class={`darkmode ${displayClass ?? ""}`}>
+    <div class={classNames(displayClass, "darkmode")}>
       <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
       <label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}>
         <svg

quartz/components/Date.tsx

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

quartz/components/Explorer.tsx

@@ -5,6 +5,7 @@ import explorerStyle from "./styles/explorer.scss"
 import script from "./scripts/explorer.inline"
 import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
 import { QuartzPluginData } from "../plugins/vfile"
+import { classNames } from "../util/lang"
 
 // Options interface defined in `ExplorerNode` to avoid circular dependency
 const defaultOptions = {
@@ -69,16 +70,15 @@ export default ((userOpts?: Partial<Options>) => {
     }
 
     // Get all folders of tree. Initialize with collapsed state
-    const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
-
     // Stringify to pass json tree as data attribute ([data-tree])
+    const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
     jsonTree = JSON.stringify(folders)
   }
 
   function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
     constructFileTree(allFiles)
     return (
-      <div class={`explorer ${displayClass ?? ""}`}>
+      <div class={classNames(displayClass, "explorer")}>
         <button
           type="button"
           id="explorer"

quartz/components/Graph.tsx

@@ -2,6 +2,7 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 // @ts-ignore
 import script from "./scripts/graph.inline"
 import style from "./styles/graph.scss"
+import { classNames } from "../util/lang"
 
 export interface D3Config {
   drag: boolean
@@ -56,7 +57,7 @@ export default ((opts?: GraphOptions) => {
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
     return (
-      <div class={`graph ${displayClass ?? ""}`}>
+      <div class={classNames(displayClass, "graph")}>
         <h3>Graph View</h3>
         <div class="graph-outer">
           <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>

quartz/components/PageList.tsx

@@ -46,7 +46,7 @@ export function PageList({ cfg, fileData, allFiles, limit }: Props) {
             <div class="section">
               {page.dates && (
                 <p class="meta">
-                  <Date date={getDate(cfg, page)!} />
+                  <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                 </p>
               )}
               <div class="desc">

quartz/components/PageTitle.tsx

@@ -1,11 +1,12 @@
 import { pathToRoot } from "../util/path"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
 
 function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
   const title = cfg?.pageTitle ?? "Untitled Quartz"
   const baseDir = pathToRoot(fileData.slug!)
   return (
-    <h1 class={`page-title ${displayClass ?? ""}`}>
+    <h1 class={classNames(displayClass, "page-title")}>
       <a href={baseDir}>{title}</a>
     </h1>
   )

quartz/components/RecentNotes.tsx

@@ -5,6 +5,7 @@ import { byDateAndAlphabetical } from "./PageList"
 import style from "./styles/recentNotes.scss"
 import { Date, getDate } from "./Date"
 import { GlobalConfiguration } from "../cfg"
+import { classNames } from "../util/lang"
 
 interface Options {
   title: string
@@ -28,7 +29,7 @@ export default ((userOpts?: Partial<Options>) => {
     const pages = allFiles.filter(opts.filter).sort(opts.sort)
     const remaining = Math.max(0, pages.length - opts.limit)
     return (
-      <div class={`recent-notes ${displayClass ?? ""}`}>
+      <div class={classNames(displayClass, "recent-notes")}>
         <h3>{opts.title}</h3>
         <ul class="recent-ul">
           {pages.slice(0, opts.limit).map((page) => {
@@ -47,7 +48,7 @@ export default ((userOpts?: Partial<Options>) => {
                   </div>
                   {page.dates && (
                     <p class="meta">
-                      <Date date={getDate(cfg, page)!} />
+                      <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                     </p>
                   )}
                   <ul class="tags">

quartz/components/Search.tsx

@@ -2,11 +2,22 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
+import { classNames } from "../util/lang"
 
-export default (() => {
+export interface SearchOptions {
+  enablePreview: boolean
+}
+
+const defaultOptions: SearchOptions = {
+  enablePreview: true,
+}
+
+export default ((userOpts?: Partial<SearchOptions>) => {
   function Search({ displayClass }: QuartzComponentProps) {
+    const opts = { ...defaultOptions, ...userOpts }
+
     return (
-      <div class={`search ${displayClass ?? ""}`}>
+      <div class={classNames(displayClass, "search")}>
         <div id="search-icon">
           <p>Search</p>
           <div></div>
@@ -35,7 +46,7 @@ export default (() => {
               aria-label="Search for something"
               placeholder="Search for something"
             />
-            <div id="results-container"></div>
+            <div id="search-layout" data-preview={opts.enablePreview}></div>
           </div>
         </div>
       </div>

quartz/components/Spacer.tsx

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

quartz/components/TableOfContents.tsx

@@ -1,6 +1,7 @@
 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"
@@ -19,7 +20,7 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
   }
 
   return (
-    <div class={`toc ${displayClass ?? ""}`}>
+    <div class={classNames(displayClass, "toc")}>
       <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
         <h3>Table of Contents</h3>
         <svg

quartz/components/TagList.tsx

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

quartz/components/pages/Content.tsx

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

quartz/components/pages/FolderContent.tsx

@@ -8,6 +8,20 @@ import { Root } from "hast"
 import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
 
+interface FolderContentOptions {
+  /**
+   * Whether to display number of folders
+   */
+  showFolderCount: boolean
+}
+
+const defaultOptions: FolderContentOptions = {
+  showFolderCount: true,
+}
+
+export default ((opts?: Partial<FolderContentOptions>) => {
+  const options: FolderContentOptions = { ...defaultOptions, ...opts }
+
   function FolderContent(props: QuartzComponentProps) {
     const { tree, fileData, allFiles } = props
     const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
@@ -19,7 +33,8 @@ function FolderContent(props: QuartzComponentProps) {
       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,
       allFiles: allPagesInFolder,
@@ -31,17 +46,22 @@ function FolderContent(props: QuartzComponentProps) {
         : htmlToJsx(fileData.filePath!, tree)
 
     return (
-    <div class="popover-hint">
+      <div class={classes}>
         <article>
           <p>{content}</p>
         </article>
+        <div class="page-listing">
+          {options.showFolderCount && (
             <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+          )}
           <div>
             <PageList {...listProps} />
           </div>
         </div>
+      </div>
     )
   }
 
   FolderContent.css = style + PageList.css
-export default (() => FolderContent) satisfies QuartzComponentConstructor
+  return FolderContent
+}) satisfies QuartzComponentConstructor

quartz/components/pages/TagContent.tsx

@@ -26,7 +26,8 @@ function TagContent(props: QuartzComponentProps) {
     (tree as Root).children.length === 0
       ? fileData.description
       : htmlToJsx(fileData.filePath!, tree)
-
+  const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
+  const classes = ["popover-hint", ...cssClasses].join(" ")
   if (tag === "/") {
     const tags = [
       ...new Set(
@@ -37,9 +38,8 @@ function TagContent(props: QuartzComponentProps) {
     for (const tag of tags) {
       tagItemMap.set(tag, allPagesWithTag(tag))
     }
-
     return (
-      <div class="popover-hint">
+      <div class={classes}>
         <article>
           <p>{content}</p>
         </article>
@@ -62,12 +62,14 @@ function TagContent(props: QuartzComponentProps) {
                   </a>
                 </h2>
                 {content && <p>{content}</p>}
+                <div class="page-listing">
                   <p>
                     {pluralize(pages.length, "item")} with this tag.{" "}
                     {pages.length > numPages && `Showing first ${numPages}.`}
                   </p>
                   <PageList limit={numPages} {...listProps} />
                 </div>
+              </div>
             )
           })}
         </div>
@@ -81,13 +83,15 @@ function TagContent(props: QuartzComponentProps) {
     }
 
     return (
-      <div class="popover-hint">
+      <div class={classes}>
         <article>{content}</article>
+        <div class="page-listing">
           <p>{pluralize(pages.length, "item")} with this tag.</p>
           <div>
             <PageList {...listProps} />
           </div>
         </div>
+      </div>
     )
   }
 }

quartz/components/scripts/darkmode.inline.ts

@@ -2,15 +2,19 @@ const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "l
 const currentTheme = localStorage.getItem("theme") ?? userPref
 document.documentElement.setAttribute("saved-theme", currentTheme)
 
+const emitThemeChangeEvent = (theme: "light" | "dark") => {
+  const event: CustomEventMap["themechange"] = new CustomEvent("themechange", {
+    detail: { theme },
+  })
+  document.dispatchEvent(event)
+}
+
 document.addEventListener("nav", () => {
   const switchTheme = (e: any) => {
-    if (e.target.checked) {
+    const newTheme = e.target.checked ? "dark" : "light"
-      document.documentElement.setAttribute("saved-theme", "dark")
+    document.documentElement.setAttribute("saved-theme", newTheme)
-      localStorage.setItem("theme", "dark")
+    localStorage.setItem("theme", newTheme)
-    } else {
+    emitThemeChangeEvent(newTheme)
-      document.documentElement.setAttribute("saved-theme", "light")
-      localStorage.setItem("theme", "light")
-    }
   }
 
   // Darkmode toggle
@@ -28,5 +32,6 @@ document.addEventListener("nav", () => {
     document.documentElement.setAttribute("saved-theme", newTheme)
     localStorage.setItem("theme", newTheme)
     toggleSwitch.checked = e.matches
+    emitThemeChangeEvent(newTheme)
   })
 })

quartz/components/scripts/explorer.inline.ts

@@ -1,132 +1,106 @@
 import { FolderState } from "../ExplorerNode"
 
-// Current state of folders
+type MaybeHTMLElement = HTMLElement | undefined
-let explorerState: FolderState[]
+let currentExplorerState: FolderState[]
-
 const observer = new IntersectionObserver((entries) => {
   // If last element is observed, remove gradient of "overflow" class so element is visible
-  const explorer = document.getElementById("explorer-ul")
+  const explorerUl = document.getElementById("explorer-ul")
+  if (!explorerUl) return
   for (const entry of entries) {
     if (entry.isIntersecting) {
-      explorer?.classList.add("no-background")
+      explorerUl.classList.add("no-background")
     } else {
-      explorer?.classList.remove("no-background")
+      explorerUl.classList.remove("no-background")
     }
   }
 })
 
 function toggleExplorer(this: HTMLElement) {
-  // Toggle collapsed state of entire explorer
   this.classList.toggle("collapsed")
-  const content = this.nextElementSibling as HTMLElement
+  const content = this.nextElementSibling as MaybeHTMLElement
+  if (!content) return
+
   content.classList.toggle("collapsed")
   content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
 }
 
 function toggleFolder(evt: MouseEvent) {
   evt.stopPropagation()
+  const target = evt.target as MaybeHTMLElement
+  if (!target) return
 
-  // Element that was clicked
-  const target = evt.target as HTMLElement
-
-  // Check if target was svg icon or button
   const isSvg = target.nodeName === "svg"
-
+  const childFolderContainer = (
-  // corresponding <ul> element relative to clicked button/folder
+    isSvg
-  let childFolderContainer: HTMLElement
+      ? target.parentElement?.nextSibling
-
+      : target.parentElement?.parentElement?.nextElementSibling
-  // <li> element of folder (stores folder-path dataset)
+  ) as MaybeHTMLElement
-  let currentFolderParent: HTMLElement
+  const currentFolderParent = (
-
+    isSvg ? target.nextElementSibling : target.parentElement
-  // Get correct relative container and toggle collapsed class
+  ) as MaybeHTMLElement
-  if (isSvg) {
+  if (!(childFolderContainer && currentFolderParent)) return
-    childFolderContainer = target.parentElement?.nextSibling as HTMLElement
-    currentFolderParent = target.nextElementSibling as HTMLElement
 
   childFolderContainer.classList.toggle("open")
-  } else {
-    childFolderContainer = target.parentElement?.parentElement?.nextElementSibling as HTMLElement
-    currentFolderParent = target.parentElement as HTMLElement
-
-    childFolderContainer.classList.toggle("open")
-  }
-  if (!childFolderContainer) return
-
-  // Collapse folder container
   const isCollapsed = childFolderContainer.classList.contains("open")
   setFolderState(childFolderContainer, !isCollapsed)
-
+  const fullFolderPath = currentFolderParent.dataset.folderpath as string
-  // Save folder state to localStorage
+  toggleCollapsedByPath(currentExplorerState, fullFolderPath)
-  const clickFolderPath = currentFolderParent.dataset.folderpath as string
+  const stringifiedFileTree = JSON.stringify(currentExplorerState)
-
-  const fullFolderPath = clickFolderPath
-  toggleCollapsedByPath(explorerState, fullFolderPath)
-
-  const stringifiedFileTree = JSON.stringify(explorerState)
   localStorage.setItem("fileTree", stringifiedFileTree)
 }
 
 function setupExplorer() {
-  // Set click handler for collapsing entire explorer
   const explorer = document.getElementById("explorer")
+  if (!explorer) return
+
+  if (explorer.dataset.behavior === "collapse") {
+    for (const item of document.getElementsByClassName(
+      "folder-button",
+    ) as HTMLCollectionOf<HTMLElement>) {
+      item.removeEventListener("click", toggleFolder)
+      item.addEventListener("click", toggleFolder)
+    }
+  }
+
+  explorer.removeEventListener("click", toggleExplorer)
+  explorer.addEventListener("click", toggleExplorer)
+
+  // Set up click handlers for each folder (click handler on folder "icon")
+  for (const item of document.getElementsByClassName(
+    "folder-icon",
+  ) as HTMLCollectionOf<HTMLElement>) {
+    item.removeEventListener("click", toggleFolder)
+    item.addEventListener("click", toggleFolder)
+  }
 
   // Get folder state from local storage
   const storageTree = localStorage.getItem("fileTree")
-
-  // Convert to bool
   const useSavedFolderState = explorer?.dataset.savestate === "true"
-
+  const oldExplorerState: FolderState[] =
-  if (explorer) {
+    storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
-    // Get config
+  const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
-    const collapseBehavior = explorer.dataset.behavior
+  const newExplorerState: FolderState[] = explorer.dataset.tree
-
+    ? JSON.parse(explorer.dataset.tree)
-    // Add click handlers for all folders (click handler on folder "label")
+    : []
-    if (collapseBehavior === "collapse") {
+  currentExplorerState = []
-      Array.prototype.forEach.call(
+  for (const { path, collapsed } of newExplorerState) {
-        document.getElementsByClassName("folder-button"),
+    currentExplorerState.push({ path, collapsed: oldIndex.get(path) ?? collapsed })
-        function (item) {
-          item.removeEventListener("click", toggleFolder)
-          item.addEventListener("click", toggleFolder)
-        },
-      )
   }
 
-    // Add click handler to main explorer
+  currentExplorerState.map((folderState) => {
-    explorer.removeEventListener("click", toggleExplorer)
+    const folderLi = document.querySelector(
-    explorer.addEventListener("click", toggleExplorer)
+      `[data-folderpath='${folderState.path}']`,
-  }
+    ) as MaybeHTMLElement
-
+    const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
-  // Set up click handlers for each folder (click handler on folder "icon")
+    if (folderUl) {
-  Array.prototype.forEach.call(document.getElementsByClassName("folder-icon"), function (item) {
+      setFolderState(folderUl, folderState.collapsed)
-    item.removeEventListener("click", toggleFolder)
-    item.addEventListener("click", toggleFolder)
-  })
-
-  if (storageTree && useSavedFolderState) {
-    // Get state from localStorage and set folder state
-    explorerState = JSON.parse(storageTree)
-    explorerState.map((folderUl) => {
-      // grab <li> element for matching folder path
-      const folderLi = document.querySelector(`[data-folderpath='${folderUl.path}']`) as HTMLElement
-
-      // Get corresponding content <ul> tag and set state
-      if (folderLi) {
-        const folderUL = folderLi.parentElement?.nextElementSibling
-        if (folderUL) {
-          setFolderState(folderUL as HTMLElement, folderUl.collapsed)
-        }
     }
   })
-  } else if (explorer?.dataset.tree) {
-    // If tree is not in localStorage or config is disabled, use tree passed from Explorer as dataset
-    explorerState = JSON.parse(explorer.dataset.tree)
-  }
 }
 
 window.addEventListener("resize", setupExplorer)
 document.addEventListener("nav", () => {
   setupExplorer()
-
   observer.disconnect()
 
   // select pseudo element at end of list
@@ -142,11 +116,7 @@ document.addEventListener("nav", () => {
  * @param collapsed if folder should be set to collapsed or not
  */
 function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
-  if (collapsed) {
+  return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
-    folderElement?.classList.remove("open")
-  } else {
-    folderElement?.classList.add("open")
-  }
 }
 
 /**

quartz/components/scripts/graph.inline.ts

@@ -319,8 +319,8 @@ function renderGlobalGraph() {
   registerEscapeHandler(container, hideGlobalGraph)
 }
 
-document.addEventListener("nav", async (e: unknown) => {
+document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
-  const slug = (e as CustomEventMap["nav"]).detail.url
+  const slug = e.detail.url
   addToVisited(slug)
   await renderGraph("graph-container", slug)
 

quartz/components/scripts/search.inline.ts

@@ -1,7 +1,7 @@
-import { Document, SimpleDocumentSearchResultSetUnit } from "flexsearch"
+import FlexSearch from "flexsearch"
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import { registerEscapeHandler, removeAllChildren } from "./util"
-import { FullSlug, resolveRelative } from "../../util/path"
+import { FullSlug, normalizeRelativeURLs, resolveRelative } from "../../util/path"
 
 interface Item {
   id: number
@@ -11,7 +11,7 @@ interface Item {
   tags: string[]
 }
 
-let index: Document<Item> | undefined = undefined
+let index: FlexSearch.Document<Item> | undefined = undefined
 
 // Can be expanded with things like "term" in the future
 type SearchType = "basic" | "tags"
@@ -20,8 +20,8 @@ type SearchType = "basic" | "tags"
 let searchType: SearchType = "basic"
 
 const contextWindowWords = 30
-const numSearchResults = 5
+const numSearchResults = 8
-const numTagResults = 3
+const numTagResults = 5
 function highlight(searchTerm: string, text: string, trim?: boolean) {
   // try to highlight longest tokens first
   const tokenizedTerms = searchTerm
@@ -71,20 +71,43 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
   }`
 }
 
+const p = new DOMParser()
 const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
 let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined
-document.addEventListener("nav", async (e: unknown) => {
+
-  const currentSlug = (e as CustomEventMap["nav"]).detail.url
+const fetchContentCache: Map<FullSlug, Element[]> = new Map()
+
+document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
+  const currentSlug = e.detail.url
 
   const data = await fetchData
   const container = document.getElementById("search-container")
   const sidebar = container?.closest(".sidebar") as HTMLElement
   const searchIcon = document.getElementById("search-icon")
   const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
-  const results = document.getElementById("results-container")
+  const searchLayout = document.getElementById("search-layout")
-  const resultCards = document.getElementsByClassName("result-card")
   const idDataMap = Object.keys(data) as FullSlug[]
 
+  const appendLayout = (el: HTMLElement) => {
+    if (searchLayout?.querySelector(`#${el.id}`) === null) {
+      searchLayout?.appendChild(el)
+    }
+  }
+
+  const enablePreview = searchLayout?.dataset?.preview === "true"
+  let preview: HTMLDivElement | undefined = undefined
+  const results = document.createElement("div")
+  results.id = "results-container"
+  results.style.flexBasis = enablePreview ? "30%" : "100%"
+  appendLayout(results)
+
+  if (enablePreview) {
+    preview = document.createElement("div")
+    preview.id = "preview-container"
+    preview.style.flexBasis = "70%"
+    appendLayout(preview)
+  }
+
   function hideSearch() {
     container?.classList.remove("active")
     if (searchBar) {
@@ -96,6 +119,9 @@ document.addEventListener("nav", async (e: unknown) => {
     if (results) {
       removeAllChildren(results)
     }
+    if (preview) {
+      removeAllChildren(preview)
+    }
 
     searchType = "basic" // reset search type after closing
   }
@@ -109,7 +135,7 @@ document.addEventListener("nav", async (e: unknown) => {
     searchBar?.focus()
   }
 
-  function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
+  async function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
     if (e.key === "k" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
       e.preventDefault()
       const searchBarOpen = container?.classList.contains("active")
@@ -124,32 +150,50 @@ document.addEventListener("nav", async (e: unknown) => {
       if (searchBar) searchBar.value = "#"
     }
 
+    const resultCards = document.getElementsByClassName("result-card")
+
+    // If search is active, then we will render the first result and display accordingly
     if (!container?.classList.contains("active")) return
-    else if (e.key === "Enter") {
+    else if (results?.contains(document.activeElement)) {
-      // If result has focus, navigate to that one, otherwise pick first result
-      if (results?.contains(document.activeElement)) {
       const active = document.activeElement as HTMLInputElement
+      await displayPreview(active)
+      if (e.key === "Enter") {
         active.click()
+      }
     } else {
-        const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
+      const anchor = resultCards[0] as HTMLInputElement | null
+      await displayPreview(anchor)
+      if (e.key === "Enter") {
         anchor?.click()
       }
-    } else if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) {
+    }
+
+    if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) {
       e.preventDefault()
       if (results?.contains(document.activeElement)) {
         // If an element in results-container already has focus, focus previous one
-        const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null
+        const currentResult = document.activeElement as HTMLInputElement | null
+        const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
+        currentResult?.classList.remove("focus")
+        await displayPreview(prevResult)
         prevResult?.focus()
       }
     } else if (e.key === "ArrowDown" || e.key === "Tab") {
       e.preventDefault()
-      // When first pressing ArrowDown, results wont contain the active element, so focus first element
+      // The results should already been focused, so we need to find the next one.
+      // The activeElement is the search bar, so we need to find the first result and focus it.
       if (!results?.contains(document.activeElement)) {
         const firstResult = resultCards[0] as HTMLInputElement | null
-        firstResult?.focus()
+        const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
+        firstResult?.classList.remove("focus")
+        await displayPreview(secondResult)
+        secondResult?.focus()
       } else {
         // If an element in results-container already has focus, focus next one
-        const nextResult = document.activeElement?.nextElementSibling as HTMLInputElement | null
+        const active = document.activeElement as HTMLInputElement | null
+        active?.classList.remove("focus")
+        const nextResult = active?.nextElementSibling as HTMLInputElement | null
+        await displayPreview(nextResult)
         nextResult?.focus()
       }
     }
@@ -220,37 +264,117 @@ document.addEventListener("nav", async (e: unknown) => {
     }
   }
 
+  function resolveUrl(slug: FullSlug): URL {
+    return new URL(resolveRelative(currentSlug, slug), location.toString())
+  }
+
   const resultToHTML = ({ slug, title, content, tags }: Item) => {
     const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : ``
+    const resultContent = enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
+
     const itemTile = document.createElement("a")
     itemTile.classList.add("result-card")
-    itemTile.id = slug
+    Object.assign(itemTile, {
-    itemTile.href = new URL(resolveRelative(currentSlug, slug), location.toString()).toString()
+      id: slug,
-    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p>${content}</p>`
+      href: resolveUrl(slug).toString(),
-    itemTile.addEventListener("click", (event) => {
+      innerHTML: `<h3>${title}</h3>${htmlTags}${resultContent}`,
+    })
+
+    async function onMouseEnter(ev: MouseEvent) {
+      // When search is active, the first element is in focus, so we need to remove focus if given target is not the first element
+      const firstEl = document.getElementsByClassName("result-card")[0] as HTMLAnchorElement | null
+      const target = ev.target as HTMLAnchorElement
+      if (firstEl !== target) {
+        firstEl?.classList.remove("focus")
+      }
+      target.classList.add("focus")
+      await displayPreview(target)
+    }
+
+    async function onMouseLeave(ev: MouseEvent) {
+      const target = ev.target as HTMLAnchorElement
+      target.classList.remove("focus")
+    }
+
+    const events = [
+      ["mouseenter", onMouseEnter],
+      ["mouseleave", onMouseLeave],
+      [
+        "click",
+        (event: MouseEvent) => {
           if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
           hideSearch()
-    })
+        },
+      ],
+    ] as [keyof HTMLElementEventMap, (this: HTMLElement) => void][]
+
+    events.forEach(([event, handler]) => itemTile.addEventListener(event, handler))
+
     return itemTile
   }
 
-  function displayResults(finalResults: Item[]) {
+  async function displayResults(finalResults: Item[]) {
     if (!results) return
 
     removeAllChildren(results)
     if (finalResults.length === 0) {
-      results.innerHTML = `<button class="result-card">
+      results.innerHTML = `<a class="result-card">
                     <h3>No results.</h3>
                     <p>Try another search term?</p>
-                </button>`
+                </a>`
     } else {
       results.append(...finalResults.map(resultToHTML))
     }
+    // focus on first result, then also dispatch preview immediately
+    if (results?.firstElementChild) {
+      results?.firstElementChild?.classList.add("focus")
+      await displayPreview(results?.firstElementChild as HTMLElement)
+    }
+  }
+
+  async function fetchContent(slug: FullSlug): Promise<Element[]> {
+    if (fetchContentCache.has(slug)) {
+      return fetchContentCache.get(slug) as Element[]
+    }
+
+    const targetUrl = resolveUrl(slug).toString()
+    const contents = await fetch(targetUrl)
+      .then((res) => res.text())
+      .then((contents) => {
+        if (contents === undefined) {
+          throw new Error(`Could not fetch ${targetUrl}`)
+        }
+        const html = p.parseFromString(contents ?? "", "text/html")
+        normalizeRelativeURLs(html, targetUrl)
+        return [...html.getElementsByClassName("popover-hint")]
+      })
+
+    fetchContentCache.set(slug, contents)
+    return contents
+  }
+
+  async function displayPreview(el: HTMLElement | null) {
+    if (!searchLayout || !enablePreview || !el) return
+
+    const slug = el.id as FullSlug
+    el.classList.add("focus")
+
+    removeAllChildren(preview as HTMLElement)
+    const contentDetails = await fetchContent(slug)
+
+    const previewInner = document.createElement("div")
+    previewInner.classList.add("preview-inner")
+    preview?.appendChild(previewInner)
+    contentDetails?.forEach((elt) => previewInner.appendChild(elt))
   }
 
   async function onType(e: HTMLElementEventMap["input"]) {
     let term = (e.target as HTMLInputElement).value
-    let searchResults: SimpleDocumentSearchResultSetUnit[]
+    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
+
+    if (searchLayout) {
+      searchLayout.style.opacity = "1"
+    }
 
     if (term.toLowerCase().startsWith("#")) {
       searchType = "tags"
@@ -289,7 +413,7 @@ document.addEventListener("nav", async (e: unknown) => {
       ...getByField("tags"),
     ])
     const finalResults = [...allIds].map((id) => formatForDisplay(term, id))
-    displayResults(finalResults)
+    await displayResults(finalResults)
   }
 
   if (prevShortcutHandler) {
@@ -305,24 +429,23 @@ document.addEventListener("nav", async (e: unknown) => {
 
   // setup index if it hasn't been already
   if (!index) {
-    index = new Document({
+    index = new FlexSearch.Document({
       charset: "latin:extra",
-      optimize: true,
       encode: encoder,
       document: {
         id: "id",
         index: [
           {
             field: "title",
-            tokenize: "reverse",
+            tokenize: "forward",
           },
           {
             field: "content",
-            tokenize: "reverse",
+            tokenize: "forward",
           },
           {
             field: "tags",
-            tokenize: "reverse",
+            tokenize: "forward",
           },
         ],
       },
@@ -340,7 +463,7 @@ document.addEventListener("nav", async (e: unknown) => {
  * @param index index to fill
  * @param data data to fill index with
  */
-async function fillDocument(index: Document<Item, false>, data: any) {
+async function fillDocument(index: FlexSearch.Document<Item, false>, data: any) {
   let id = 0
   for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
     await index.addAsync(id, {

quartz/components/scripts/toc.inline.ts

@@ -16,7 +16,8 @@ const observer = new IntersectionObserver((entries) => {
 
 function toggleToc(this: HTMLElement) {
   this.classList.toggle("collapsed")
-  const content = this.nextElementSibling as HTMLElement
+  const content = this.nextElementSibling as HTMLElement | undefined
+  if (!content) return
   content.classList.toggle("collapsed")
   content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
 }
@@ -25,7 +26,8 @@ function setupToc() {
   const toc = document.getElementById("toc")
   if (toc) {
     const collapsed = toc.classList.contains("collapsed")
-    const content = toc.nextElementSibling as HTMLElement
+    const content = toc.nextElementSibling as HTMLElement | undefined
+    if (!content) return
     content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
     toc.removeEventListener("click", toggleToc)
     toc.addEventListener("click", toggleToc)

quartz/components/styles/search.scss

@@ -55,7 +55,7 @@
 
     & > #search-space {
       width: 50%;
-      margin-top: 15vh;
+      margin-top: 12vh;
       margin-left: auto;
       margin-right: auto;
 
@@ -86,14 +86,74 @@
         }
       }
 
+      & > #search-layout {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        opacity: 0;
+        border: 1px solid var(--lightgray);
+
+        & > div {
+          height: calc(75vh - 20em);
+          background: none;
+
+          &:first-child {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+            border-right: 1px solid var(--lightgray);
+          }
+
+          &:last-child {
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+          }
+        }
+
+        @media all and (max-width: $mobileBreakpoint) {
+          display: block;
+          & > *:not(#results-container) {
+            display: none !important;
+          }
+
           & > #results-container {
+            width: 100%;
+            height: auto;
+          }
+        }
+
+        & > #preview-container {
+          display: block;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          & .preview-inner {
+            padding: 1em;
+            height: 100%;
+            box-sizing: border-box;
+            overflow-y: auto;
+            font-family: inherit;
+            color: var(--dark);
+            line-height: 1.5em;
+            font-weight: 400;
+            background: var(--light);
+            border-radius: 5px;
+            box-shadow:
+              0 14px 50px rgba(27, 33, 48, 0.12),
+              0 10px 30px rgba(27, 33, 48, 0.16);
+          }
+        }
+
+        & > #results-container {
+          overflow-y: auto;
+
           & .result-card {
             padding: 1em;
             cursor: pointer;
             transition: background 0.2s ease;
-          border: 1px solid var(--lightgray);
+            border-bottom: 1px solid var(--lightgray);
-          border-bottom: none;
             width: 100%;
+            display: block;
+            box-sizing: border-box;
 
             // normalize card props
             font-family: inherit;
@@ -112,21 +172,11 @@
             }
 
             &:hover,
-          &:focus {
+            &:focus,
+            &.focus {
               background: var(--lightgray);
             }
 
-          &:first-of-type {
-            border-top-left-radius: 5px;
-            border-top-right-radius: 5px;
-          }
-
-          &:last-of-type {
-            border-bottom-left-radius: 5px;
-            border-bottom-right-radius: 5px;
-            border-bottom: 1px solid var(--lightgray);
-          }
-
             & > h3 {
               margin: 0;
             }
@@ -146,8 +196,7 @@
               gap: 0.4rem;
               margin: 0;
               margin-top: 0.45rem;
-            // Offset border radius
+              box-sizing: border-box;
-            margin-left: -2px;
               overflow: hidden;
               background-clip: border-box;
             }
@@ -177,3 +226,4 @@
       }
     }
   }
+}

quartz/plugins/emitters/aliases.ts

@@ -15,12 +15,7 @@ export const AliasRedirects: QuartzEmitterPlugin = () => ({
     for (const [_tree, file] of content) {
       const ogSlug = simplifySlug(file.data.slug!)
       const dir = path.posix.relative(argv.directory, path.dirname(file.data.filePath!))
-
+      const aliases = file.data.frontmatter?.aliases ?? []
-      let aliases: FullSlug[] = file.data.frontmatter?.aliases ?? file.data.frontmatter?.alias ?? []
-      if (typeof aliases === "string") {
-        aliases = [aliases]
-      }
-
       const slugs: FullSlug[] = aliases.map((alias) => path.posix.join(dir, alias) as FullSlug)
       const permalink = file.data.frontmatter?.permalink
       if (typeof permalink === "string") {

quartz/plugins/emitters/componentResources.ts

@@ -119,7 +119,7 @@ function addGlobalPageResources(
   } else if (cfg.analytics?.provider === "umami") {
     componentResources.afterDOMLoaded.push(`
       const umamiScript = document.createElement("script")
-      umamiScript.src = "https://analytics.umami.is/script.js"
+      umamiScript.src = cfg.analytics.host ?? "https://analytics.umami.is/script.js"
       umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
       umamiScript.async = true
 

quartz/plugins/emitters/folderPage.tsx

@@ -19,7 +19,7 @@ import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.lay
 import { FolderContent } from "../../components"
 import { write } from "./helpers"
 
-export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
+export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
     ...sharedPageComponents,
     ...defaultListPageLayout,

quartz/plugins/emitters/tagPage.tsx

@@ -16,7 +16,7 @@ import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.lay
 import { TagContent } from "../../components"
 import { write } from "./helpers"
 
-export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (userOpts) => {
+export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
     ...sharedPageComponents,
     ...defaultListPageLayout,

quartz/plugins/filters/explicit.ts

@@ -3,11 +3,6 @@ import { QuartzFilterPlugin } from "../types"
 export const ExplicitPublish: QuartzFilterPlugin = () => ({
   name: "ExplicitPublish",
   shouldPublish(_ctx, [_tree, vfile]) {
-    const publishProperty = vfile.data?.frontmatter?.publish ?? false
+    return vfile.data?.frontmatter?.publish ?? false
-    const publishFlag =
-      typeof publishProperty === "string"
-        ? publishProperty.toLowerCase() === "true"
-        : Boolean(publishProperty)
-    return publishFlag
   },
 })

quartz/plugins/transformers/frontmatter.ts

@@ -9,13 +9,34 @@ import { QuartzPluginData } from "../vfile"
 export interface Options {
   delims: string | string[]
   language: "yaml" | "toml"
-  oneLineTagDelim: string
 }
 
 const defaultOptions: Options = {
   delims: "---",
   language: "yaml",
-  oneLineTagDelim: ",",
+}
+
+function coalesceAliases(data: { [key: string]: any }, aliases: string[]) {
+  for (const alias of aliases) {
+    if (data[alias] !== undefined && data[alias] !== null) return data[alias]
+  }
+}
+
+function coerceToArray(input: string | string[]): string[] | undefined {
+  if (input === undefined || input === null) return undefined
+
+  // coerce to array
+  if (!Array.isArray(input)) {
+    input = input
+      .toString()
+      .split(",")
+      .map((tag: string) => tag.trim())
+  }
+
+  // remove all non-strings
+  return input
+    .filter((tag: unknown) => typeof tag === "string" || typeof tag === "number")
+    .map((tag: string | number) => tag.toString())
 }
 
 export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
@@ -23,8 +44,6 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
   return {
     name: "FrontMatter",
     markdownPlugins() {
-      const { oneLineTagDelim } = opts
-
       return [
         [remarkFrontmatter, ["yaml", "toml"]],
         () => {
@@ -37,35 +56,19 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
               },
             })
 
-            // tag is an alias for tags
-            if (data.tag) {
-              data.tags = data.tag
-            }
-
-            // coerce title to string
             if (data.title) {
               data.title = data.title.toString()
             } else if (data.title === null || data.title === undefined) {
               data.title = file.stem ?? "Untitled"
             }
 
-            if (data.tags) {
+            const tags = coerceToArray(coalesceAliases(data, ["tags", "tag"]))
-              // coerce to array
+            if (tags) data.tags = [...new Set(tags.map((tag: string) => slugTag(tag)))]
-              if (!Array.isArray(data.tags)) {
-                data.tags = data.tags
-                  .toString()
-                  .split(oneLineTagDelim)
-                  .map((tag: string) => tag.trim())
-              }
 
-              // remove all non-string tags
+            const aliases = coerceToArray(coalesceAliases(data, ["aliases", "alias"]))
-              data.tags = data.tags
+            if (aliases) data.aliases = aliases
-                .filter((tag: unknown) => typeof tag === "string" || typeof tag === "number")
+            const cssclasses = coerceToArray(coalesceAliases(data, ["cssclasses", "cssclass"]))
-                .map((tag: string | number) => tag.toString())
+            if (cssclasses) data.cssclasses = cssclasses
-            }
-
-            // slug them all!!
-            data.tags = [...new Set(data.tags?.map((tag: string) => slugTag(tag)))]
 
             // fill in frontmatter
             file.data.frontmatter = data as QuartzPluginData["frontmatter"]
@@ -78,9 +81,16 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
 
 declare module "vfile" {
   interface DataMap {
-    frontmatter: { [key: string]: any } & {
+    frontmatter: { [key: string]: unknown } & {
       title: string
+    } & Partial<{
         tags: string[]
-    }
+        aliases: string[]
+        description: string
+        publish: boolean
+        draft: boolean
+        enableToc: string
+        cssclasses: string[]
+      }>
   }
 }

quartz/plugins/transformers/gfm.ts

@@ -37,8 +37,36 @@ export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> |
                 "data-no-popover": true,
               },
               content: {
-                type: "text",
+                type: "element",
-                value: " §",
+                tagName: "svg",
+                properties: {
+                  width: 18,
+                  height: 18,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                },
+                children: [
+                  {
+                    type: "element",
+                    tagName: "path",
+                    properties: {
+                      d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+                    },
+                    children: [],
+                  },
+                  {
+                    type: "element",
+                    tagName: "path",
+                    properties: {
+                      d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+                    },
+                    children: [],
+                  },
+                ],
               },
             },
           ],

quartz/plugins/transformers/lastmod.ts

@@ -50,11 +50,11 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
                 created ||= st.birthtimeMs
                 modified ||= st.mtimeMs
               } else if (source === "frontmatter" && file.data.frontmatter) {
-                created ||= file.data.frontmatter.date
+                created ||= file.data.frontmatter.date as MaybeDate
-                modified ||= file.data.frontmatter.lastmod
+                modified ||= file.data.frontmatter.lastmod as MaybeDate
-                modified ||= file.data.frontmatter.updated
+                modified ||= file.data.frontmatter.updated as MaybeDate
-                modified ||= file.data.frontmatter["last-modified"]
+                modified ||= file.data.frontmatter["last-modified"] as MaybeDate
-                published ||= file.data.frontmatter.publishDate
+                published ||= file.data.frontmatter.publishDate as MaybeDate
               } else if (source === "git") {
                 if (!repo) {
                   // Get a reference to the main git repo.

quartz/plugins/transformers/latex.ts

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

quartz/plugins/transformers/ofm.ts

@@ -44,39 +44,7 @@ const defaultOptions: Options = {
   enableVideoEmbed: true,
 }
 
-const icons = {
+const calloutMapping = {
-  infoIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`,
-  pencilIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>`,
-  clipboardListIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>`,
-  checkCircleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>`,
-  flameIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>`,
-  checkIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
-  helpCircleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
-  alertTriangleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
-  xIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
-  zapIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`,
-  bugIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>`,
-  listIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>`,
-  quoteIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>`,
-}
-
-const callouts = {
-  note: icons.pencilIcon,
-  abstract: icons.clipboardListIcon,
-  info: icons.infoIcon,
-  todo: icons.checkCircleIcon,
-  tip: icons.flameIcon,
-  success: icons.checkIcon,
-  question: icons.helpCircleIcon,
-  warning: icons.alertTriangleIcon,
-  failure: icons.xIcon,
-  danger: icons.zapIcon,
-  bug: icons.bugIcon,
-  example: icons.listIcon,
-  quote: icons.quoteIcon,
-}
-
-const calloutMapping: Record<string, keyof typeof callouts> = {
   note: "note",
   abstract: "abstract",
   summary: "abstract",
@@ -104,11 +72,12 @@ const calloutMapping: Record<string, keyof typeof callouts> = {
   example: "example",
   quote: "quote",
   cite: "quote",
-}
+} as const
 
-function canonicalizeCallout(calloutName: string): keyof typeof callouts {
+function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
-  let callout = calloutName.toLowerCase() as keyof typeof calloutMapping
+  const normalizedCallout = calloutName.toLowerCase() as keyof typeof calloutMapping
-  return calloutMapping[callout] ?? "note"
+  // if callout is not recognized, make it a custom one
+  return calloutMapping[normalizedCallout] ?? calloutName
 }
 
 export const externalLinkRegex = /^https?:\/\//i
@@ -119,9 +88,9 @@ export const arrowRegex = new RegExp(/-{1,2}>/, "g")
 // \[\[              -> open brace
 // ([^\[\]\|\#]+)    -> one or more non-special characters ([,],|, or #) (name)
 // (#[^\[\]\|\#]+)?  -> # then one or more non-special characters (heading link)
-// (|[^\[\]\|\#]+)? -> | then one or more non-special characters (alias)
+// (\|[^\[\]\#]+)? -> | then one or more non-special characters (alias)
 export const wikilinkRegex = new RegExp(
-  /!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/,
+  /!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\#]+)?\]\]/,
   "g",
 )
 const highlightRegex = new RegExp(/==([^=]+)==/, "g")
@@ -137,6 +106,9 @@ const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\p{Emoji}\d])+(?:\/[-_\p{L}\p{E
 const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/, "g")
 const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
 const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/)
+const wikilinkImageEmbedRegex = new RegExp(
+  /^(?<alt>(?!^\d*x?\d*$).*?)?(\|?\s*?(?<width>\d+)(x(?<height>\d+))?)?$/,
+)
 
 export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
   userOpts,
@@ -221,10 +193,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   const ext: string = path.extname(fp).toLowerCase()
                   const url = slugifyFilePath(fp as FilePath)
                   if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
-                    const dims = alias ?? ""
+                    const match = wikilinkImageEmbedRegex.exec(alias ?? "")
-                    let [width, height] = dims.split("x", 2)
+                    const alt = match?.groups?.alt ?? ""
-                    width ||= "auto"
+                    const width = match?.groups?.width ?? "auto"
-                    height ||= "auto"
+                    const height = match?.groups?.height ?? "auto"
                     return {
                       type: "image",
                       url,
@@ -232,6 +204,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                         hProperties: {
                           width,
                           height,
+                          alt,
                         },
                       },
                     }
@@ -317,8 +290,9 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 }
 
                 tag = slugTag(tag)
-                if (file.data.frontmatter && !file.data.frontmatter.tags.includes(tag)) {
+                if (file.data.frontmatter) {
-                  file.data.frontmatter.tags.push(tag)
+                  const noteTags = file.data.frontmatter.tags ?? []
+                  file.data.frontmatter.tags = [...new Set([...noteTags, tag])]
                 }
 
                 return {
@@ -406,9 +380,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
               const match = firstLine.match(calloutRegex)
               if (match && match.input) {
                 const [calloutDirective, typeString, collapseChar] = match
-                const calloutType = canonicalizeCallout(
+                const calloutType = canonicalizeCallout(typeString.toLowerCase())
-                  typeString.toLowerCase() as keyof typeof calloutMapping,
-                )
                 const collapse = collapseChar === "+" || collapseChar === "-"
                 const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
                 const titleContent =
@@ -422,16 +394,14 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 }
                 const title = mdastToHtml(titleNode)
 
-                const toggleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold">
+                const toggleIcon = `<div class="fold-callout-icon"></div>`
-                  <polyline points="6 9 12 15 18 9"></polyline>
-                </svg>`
 
                 const titleHtml: Html = {
                   type: "html",
                   value: `<div
                   class="callout-title"
                 >
-                  <div class="callout-icon">${callouts[calloutType]}</div>
+                  <div class="callout-icon"></div>
                   <div class="callout-title-inner">${title}</div>
                   ${collapse ? toggleIcon : ""}
                 </div>`,
@@ -457,7 +427,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 node.data = {
                   hProperties: {
                     ...(node.data?.hProperties ?? {}),
-                    className: `callout ${collapse ? "is-collapsible" : ""} ${
+                    className: `callout ${calloutType} ${collapse ? "is-collapsible" : ""} ${
                       defaultState === "collapsed" ? "is-collapsed" : ""
                     }`,
                     "data-callout": calloutType,

quartz/plugins/types.ts

@@ -2,7 +2,7 @@ import { PluggableList } from "unified"
 import { StaticResources } from "../util/resources"
 import { ProcessedContent } from "./vfile"
 import { QuartzComponent } from "../components/types"
-import { FilePath, FullSlug } from "../util/path"
+import { FilePath } from "../util/path"
 import { BuildCtx } from "../util/ctx"
 
 export interface PluginTypes {

quartz/styles/base.scss

@@ -4,7 +4,6 @@
 
 html {
   scroll-behavior: smooth;
-  -webkit-text-size-adjust: none;
   text-size-adjust: none;
   overflow-x: hidden;
   width: 100vw;
@@ -59,7 +58,6 @@ a {
   text-decoration: none;
   transition: color 0.2s ease;
   color: var(--secondary);
-  display: inline-block;
 
   &:hover {
     color: var(--tertiary) !important;
@@ -173,9 +171,11 @@ a {
 
     & .sidebar.right {
       right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
+      flex-wrap: wrap;
       & > * {
         @media all and (max-width: $fullPageWidth) {
           flex: 1;
+          min-width: 140px;
         }
       }
     }
@@ -278,7 +278,6 @@ h6 {
     opacity: 0;
     transition: opacity 0.2s ease;
     transform: translateY(-0.1rem);
-    display: inline-block;
     font-family: var(--codeFont);
     user-select: none;
   }
@@ -357,6 +356,7 @@ pre {
     counter-increment: line 0;
     display: grid;
     padding: 0.5rem 0;
+    overflow-x: scroll;
 
     & [data-highlighted-chars] {
       background-color: var(--highlight);

quartz/styles/callouts.scss

@@ -13,16 +13,33 @@
     margin-top: 0;
   }
 
-  &[data-callout="note"] {
+  --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
+  --callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>');
+  --callout-icon-info: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
+  --callout-icon-todo: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>');
+  --callout-icon-tip: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg> ');
+  --callout-icon-success: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> ');
+  --callout-icon-question: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg> ');
+  --callout-icon-warning: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
+  --callout-icon-failure: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> ');
+  --callout-icon-danger: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> ');
+  --callout-icon-bug: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>');
+  --callout-icon-example: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg> ');
+  --callout-icon-quote: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>');
+  --callout-icon-fold: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E');
+
+  &[data-callout] {
     --color: #448aff;
     --border: #448aff44;
     --bg: #448aff10;
+    --callout-icon: var(--callout-icon-note);
   }
 
   &[data-callout="abstract"] {
     --color: #00b0ff;
     --border: #00b0ff44;
     --bg: #00b0ff10;
+    --callout-icon: var(--callout-icon-abstract);
   }
 
   &[data-callout="info"],
@@ -30,30 +47,39 @@
     --color: #00b8d4;
     --border: #00b8d444;
     --bg: #00b8d410;
+    --callout-icon: var(--callout-icon-info);
+  }
+
+  &[data-callout="todo"] {
+    --callout-icon: var(--callout-icon-todo);
   }
 
   &[data-callout="tip"] {
     --color: #00bfa5;
     --border: #00bfa544;
     --bg: #00bfa510;
+    --callout-icon: var(--callout-icon-tip);
   }
 
   &[data-callout="success"] {
     --color: #09ad7a;
     --border: #09ad7144;
     --bg: #09ad7110;
+    --callout-icon: var(--callout-icon-success);
   }
 
   &[data-callout="question"] {
     --color: #dba642;
     --border: #dba64244;
     --bg: #dba64210;
+    --callout-icon: var(--callout-icon-question);
   }
 
   &[data-callout="warning"] {
     --color: #db8942;
     --border: #db894244;
     --bg: #db894210;
+    --callout-icon: var(--callout-icon-warning);
   }
 
   &[data-callout="failure"],
@@ -62,50 +88,74 @@
     --color: #db4242;
     --border: #db424244;
     --bg: #db424210;
+    --callout-icon: var(--callout-icon-failure);
+  }
+
+  &[data-callout="bug"] {
+    --callout-icon: var(--callout-icon-bug);
+  }
+
+  &[data-callout="danger"] {
+    --callout-icon: var(--callout-icon-danger);
   }
 
   &[data-callout="example"] {
     --color: #7a43b5;
     --border: #7a43b544;
     --bg: #7a43b510;
+    --callout-icon: var(--callout-icon-example);
   }
 
   &[data-callout="quote"] {
     --color: var(--secondary);
     --border: var(--lightgray);
+    --callout-icon: var(--callout-icon-quote);
   }
 
-  &.is-collapsed > .callout-title > .fold {
+  &.is-collapsed > .callout-title > .fold-callout-icon {
     transform: rotateZ(-90deg);
   }
 }
 
 .callout-title {
   display: flex;
+  align-items: center;
   gap: 5px;
   padding: 1rem 0;
   color: var(--color);
 
-  & .fold {
+  --icon-size: 18px;
-    margin-left: 0.5rem;
+
-    transition: transform 0.3s ease;
+  & .fold-callout-icon {
+    transition: transform 0.15s ease;
     opacity: 0.8;
     cursor: pointer;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    --callout-icon: var(--callout-icon-fold);
   }
 
   & > .callout-title-inner > p {
     color: var(--color);
     margin: 0;
   }
-}
 
-.callout-icon {
+  .callout-icon,
-  width: 18px;
+  & .fold-callout-icon {
-  height: 18px;
+    width: var(--icon-size);
-  flex: 0 0 18px;
+    height: var(--icon-size);
-  padding-top: 4px;
+
+    // icon support
+    background-size: var(--icon-size) var(--icon-size);
+    background-position: center;
+    background-color: var(--color);
+    mask-image: var(--callout-icon);
+    mask-size: var(--icon-size) var(--icon-size);
+    mask-position: center;
+    mask-repeat: no-repeat;
   }
 
   .callout-title-inner {
     font-weight: 700;
   }
+}

quartz/util/lang.ts

@@ -9,3 +9,13 @@ export function pluralize(count: number, s: string): string {
 export function capitalize(s: string): string {
   return s.substring(0, 1).toUpperCase() + s.substring(1)
 }
+
+export function classNames(
+  displayClass?: "mobile-only" | "desktop-only",
+  ...classes: string[]
+): string {
+  if (displayClass) {
+    classes.push(displayClass)
+  }
+  return classes.join(" ")
+}

quartz/util/path.ts

@@ -52,7 +52,7 @@ function sluggify(s: string): string {
     .split("/")
     .map((segment) =>
       segment.replace(/\s/g, "-").replace(/%/g, "-percent").replace(/\?/g, "-q").replace(/#/g, ""),
-    ) // slugify all segments
+    )
     .join("/") // always use / as sep
     .replace(/\/$/, "")
 }

tsconfig.json

@@ -13,8 +13,8 @@
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "preact"
+    "jsxImportSource": "preact",
   },
   "include": ["**/*.ts", "**/*.tsx", "./package.json"],
-  "exclude": ["build/**/*.d.ts"]
+  "exclude": ["build/**/*.d.ts"],
 }