Merge remote-tracking branch 'upstream/v4' into open-graph

.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`.
-
-> [!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
+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`.

docs/index.md

@@ -23,7 +23,8 @@ 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)

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
-git remote add origin REMOTE-URL
+# list all the repositories that are tracked
+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.
-
-```bash
-git remote -v
-```
-
-Then, you can sync the content to upload it to your repository.
+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
 npx quartz sync --no-pull
 ```
 
-> [!hint]
-> If `npx quartz sync` fails with `fatal: --[no-]autostash option is only valid with --rebase`, you
-> may have an outdated version of `git`. Updating `git` should fix this issue.
+> [!warning]- `fatal: --[no-]autostash option is only valid with --rebase`
+> You may have an outdated version of `git`. Updating `git` should fix this issue.
+
+In future updates, you can simply run `npx quartz sync` every time you want to push updates to your repository.
+
+> [!hint] Flags and options
+> For full help options, you can run `npx quartz sync --help`.
+>
+> Most of these have sensible defaults but you can override them if you have a custom setup:
+>
+> - `-d` or `--directory`: the content folder. This is normally just `content`
+> - `-v` or `--verbose`: print out extra logging information
+> - `--commit` or `--no-commit`: whether to make a `git` commit for your changes
+> - `--push` or `--no-push`: whether to push updates to your GitHub fork of Quartz
+> - `--pull` or `--no-pull`: whether to try and pull in any updates from your GitHub fork (i.e. from other devices) before pushing

package.json

@@ -36,14 +36,14 @@
   "dependencies": {
     "@clack/prompts": "^0.7.0",
     "@floating-ui/dom": "^1.5.3",
-    "@napi-rs/simple-git": "0.1.9",
+    "@napi-rs/simple-git": "0.1.11",
     "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",
@@ -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-pretty-code": "^0.12.3",
+    "rehype-mathjax": "^6.0.0",
+    "rehype-pretty-code": "^0.12.6",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
@@ -80,7 +80,7 @@
     "rimraf": "^5.0.5",
     "satori": "^0.10.6",
     "serve-handler": "^6.1.5",
-    "shikiji": "^0.9.9",
+    "shikiji": "^0.10.2",
     "sharp": "^0.32.6",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
@@ -95,7 +95,6 @@
   "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",
@@ -106,7 +105,7 @@
     "@types/yargs": "^17.0.32",
     "esbuild": "^0.19.9",
     "prettier": "^3.1.1",
-    "tsx": "^4.6.2",
+    "tsx": "^4.7.0",
     "typescript": "^5.3.3"
   }
 }

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",
             })

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,40 +8,57 @@ import { Root } from "hast"
 import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
 
-function FolderContent(props: QuartzComponentProps) {
-  const { tree, fileData, allFiles } = props
-  const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
-  const allPagesInFolder = allFiles.filter((file) => {
-    const fileSlug = _stripSlashes(simplifySlug(file.slug!))
-    const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
-    const folderParts = folderSlug.split(path.posix.sep)
-    const fileParts = fileSlug.split(path.posix.sep)
-    const isDirectChild = fileParts.length === folderParts.length + 1
-    return prefixed && isDirectChild
-  })
-
-  const listProps = {
-    ...props,
-    allFiles: allPagesInFolder,
-  }
-
-  const content =
-    (tree as Root).children.length === 0
-      ? fileData.description
-      : htmlToJsx(fileData.filePath!, tree)
-
-  return (
-    <div class="popover-hint">
-      <article>
-        <p>{content}</p>
-      </article>
-      <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
-      <div>
-        <PageList {...listProps} />
-      </div>
-    </div>
-  )
+interface FolderContentOptions {
+  /**
+   * Whether to display number of folders
+   */
+  showFolderCount: boolean
 }
 
-FolderContent.css = style + PageList.css
-export default (() => FolderContent) satisfies QuartzComponentConstructor
+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!))
+    const allPagesInFolder = allFiles.filter((file) => {
+      const fileSlug = _stripSlashes(simplifySlug(file.slug!))
+      const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
+      const folderParts = folderSlug.split(path.posix.sep)
+      const fileParts = fileSlug.split(path.posix.sep)
+      const isDirectChild = fileParts.length === folderParts.length + 1
+      return prefixed && isDirectChild
+    })
+
+    const listProps = {
+      ...props,
+      allFiles: allPagesInFolder,
+    }
+
+    const content =
+      (tree as Root).children.length === 0
+        ? fileData.description
+        : htmlToJsx(fileData.filePath!, tree)
+
+    return (
+      <div class="popover-hint">
+        <article>
+          <p>{content}</p>
+        </article>
+        {options.showFolderCount && (
+          <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+        )}
+        <div>
+          <PageList {...listProps} />
+        </div>
+      </div>
+    )
+  }
+
+  FolderContent.css = style + PageList.css
+  return FolderContent
+}) satisfies QuartzComponentConstructor

quartz/components/scripts/search.inline.ts

@@ -1,4 +1,4 @@
-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"
@@ -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"
@@ -250,7 +250,7 @@ document.addEventListener("nav", async (e: unknown) => {
 
   async function onType(e: HTMLElementEventMap["input"]) {
     let term = (e.target as HTMLInputElement).value
-    let searchResults: SimpleDocumentSearchResultSetUnit[]
+    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
 
     if (term.toLowerCase().startsWith("#")) {
       searchType = "tags"
@@ -305,24 +305,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 +339,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/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!))
-
-      let aliases: FullSlug[] = file.data.frontmatter?.aliases ?? file.data.frontmatter?.alias ?? []
-      if (typeof aliases === "string") {
-        aliases = [aliases]
-      }
-
+      const aliases = file.data.frontmatter?.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/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
-    const publishFlag =
-      typeof publishProperty === "string"
-        ? publishProperty.toLowerCase() === "true"
-        : Boolean(publishProperty)
-    return publishFlag
+    return vfile.data?.frontmatter?.publish ?? false
   },
 })

quartz/plugins/transformers/frontmatter.ts

@@ -5,17 +5,56 @@ import yaml from "js-yaml"
 import toml from "toml"
 import { slugTag } from "../../util/path"
 import { QuartzPluginData } from "../vfile"
+import chalk from "chalk"
 
 export interface Options {
   delims: string | string[]
   language: "yaml" | "toml"
-  oneLineTagDelim: string
 }
 
 const defaultOptions: Options = {
   delims: "---",
   language: "yaml",
-  oneLineTagDelim: ",",
+}
+
+function coerceDate(fp: string, d: unknown): Date | undefined {
+  if (d === undefined || d === null) return undefined
+  const dt = new Date(d as string | number)
+  const invalidDate = isNaN(dt.getTime()) || dt.getTime() === 0
+  if (invalidDate) {
+    console.log(
+      chalk.yellow(
+        `\nWarning: found invalid date "${d}" in \`${fp}\`. Supported formats: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format`,
+      ),
+    )
+
+    return undefined
+  }
+
+  return dt
+}
+
+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,12 +62,11 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
   return {
     name: "FrontMatter",
     markdownPlugins() {
-      const { oneLineTagDelim } = opts
-
       return [
         [remarkFrontmatter, ["yaml", "toml"]],
         () => {
           return (_, file) => {
+            const fp = file.data.filePath!
             const { data } = matter(Buffer.from(file.value), {
               ...opts,
               engines: {
@@ -37,35 +75,29 @@ 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) {
-              // coerce to array
-              if (!Array.isArray(data.tags)) {
-                data.tags = data.tags
-                  .toString()
-                  .split(oneLineTagDelim)
-                  .map((tag: string) => tag.trim())
-              }
+            const tags = coerceToArray(coalesceAliases(data, ["tags", "tag"]))
+            if (tags) data.tags = [...new Set(tags.map((tag: string) => slugTag(tag)))]
 
-              // remove all non-string tags
-              data.tags = data.tags
-                .filter((tag: unknown) => typeof tag === "string" || typeof tag === "number")
-                .map((tag: string | number) => tag.toString())
-            }
+            const aliases = coerceToArray(coalesceAliases(data, ["aliases", "alias"]))
+            if (aliases) data.aliases = aliases
+            const cssclasses = coerceToArray(coalesceAliases(data, ["cssclasses", "cssclass"]))
+            if (cssclasses) data.cssclasses = cssclasses
+            const created = coerceDate(fp, coalesceAliases(data, ["created", "date"]))
 
-            // slug them all!!
-            data.tags = [...new Set(data.tags?.map((tag: string) => slugTag(tag)))]
+            if (created) data.created = created
+            const modified = coerceDate(
+              fp,
+              coalesceAliases(data, ["modified", "lastmod", "updated", "last-modified"]),
+            )
+            if (modified) data.modified = modified
+            const published = coerceDate(fp, coalesceAliases(data, ["published", "publishDate"]))
+            if (published) data.published = published
 
             // fill in frontmatter
             file.data.frontmatter = data as QuartzPluginData["frontmatter"]
@@ -78,9 +110,19 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
 
 declare module "vfile" {
   interface DataMap {
-    frontmatter: { [key: string]: any } & {
+    frontmatter: { [key: string]: unknown } & {
       title: string
-      tags: string[]
-    }
+    } & Partial<{
+        tags: string[]
+        aliases: string[]
+        description: string
+        publish: boolean
+        draft: boolean
+        enableToc: string
+        cssclasses: string[]
+        created: Date
+        modified: Date
+        published: Date
+      }>
   }
 }

quartz/plugins/transformers/lastmod.ts

@@ -12,21 +12,6 @@ const defaultOptions: Options = {
   priority: ["frontmatter", "git", "filesystem"],
 }
 
-function coerceDate(fp: string, d: any): Date {
-  const dt = new Date(d)
-  const invalidDate = isNaN(dt.getTime()) || dt.getTime() === 0
-  if (invalidDate && d !== undefined) {
-    console.log(
-      chalk.yellow(
-        `\nWarning: found invalid date "${d}" in \`${fp}\`. Supported formats: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format`,
-      ),
-    )
-  }
-
-  return invalidDate ? new Date() : dt
-}
-
-type MaybeDate = undefined | string | number
 export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | undefined> = (
   userOpts,
 ) => {
@@ -38,23 +23,21 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
         () => {
           let repo: Repository | undefined = undefined
           return async (_tree, file) => {
-            let created: MaybeDate = undefined
-            let modified: MaybeDate = undefined
-            let published: MaybeDate = undefined
+            let created: Date | undefined = undefined
+            let modified: Date | undefined = undefined
+            let published: Date | undefined = undefined
 
             const fp = file.data.filePath!
             const fullFp = path.posix.join(file.cwd, fp)
             for (const source of opts.priority) {
               if (source === "filesystem") {
                 const st = await fs.promises.stat(fullFp)
-                created ||= st.birthtimeMs
-                modified ||= st.mtimeMs
+                created ||= new Date(st.birthtimeMs)
+                modified ||= new Date(st.mtimeMs)
               } else if (source === "frontmatter" && file.data.frontmatter) {
-                created ||= file.data.frontmatter.date
-                modified ||= file.data.frontmatter.lastmod
-                modified ||= file.data.frontmatter.updated
-                modified ||= file.data.frontmatter["last-modified"]
-                published ||= file.data.frontmatter.publishDate
+                created ||= file.data.frontmatter.created
+                modified ||= file.data.frontmatter.modified
+                published ||= file.data.frontmatter.published
               } else if (source === "git") {
                 if (!repo) {
                   // Get a reference to the main git repo.
@@ -64,7 +47,9 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
                 }
 
                 try {
-                  modified ||= await repo.getFileLatestModifiedDateAsync(file.data.filePath!)
+                  modified ||= new Date(
+                    await repo.getFileLatestModifiedDateAsync(file.data.filePath!),
+                  )
                 } catch {
                   console.log(
                     chalk.yellow(
@@ -76,10 +61,13 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
               }
             }
 
+            created ||= new Date()
+            modified ||= new Date()
+            published ||= new Date()
             file.data.dates = {
-              created: coerceDate(fp, created),
-              modified: coerceDate(fp, modified),
-              published: coerceDate(fp, published),
+              created,
+              modified,
+              published,
             }
           }
         },

quartz/plugins/transformers/ofm.ts

@@ -116,13 +116,13 @@ export const externalLinkRegex = /^https?:\/\//i
 
 export const arrowRegex = new RegExp(/-{1,2}>/, "g")
 
-// !?               -> optional embedding
-// \[\[             -> open brace
-// ([^\[\]\|\#]+)   -> one or more non-special characters ([,],|, or #) (name)
-// (#[^\[\]\|\#]+)? -> # then one or more non-special characters (heading link)
-// (|[^\[\]\|\#]+)? -> | then one or more non-special characters (alias)
+// !?                -> optional embedding
+// \[\[              -> open brace
+// ([^\[\]\|\#]+)    -> one or more non-special characters ([,],|, or #) (name)
+// (#[^\[\]\|\#]+)?  -> # then one or more non-special characters (heading link)
+// (\|[^\[\]\#]+)? -> | then one or more non-special characters (alias)
 export const wikilinkRegex = new RegExp(
-  /!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/,
+  /!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\#]+)?\]\]/,
   "g",
 )
 const highlightRegex = new RegExp(/==([^=]+)==/, "g")
@@ -222,7 +222,15 @@ 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 ?? ""
+                    // either |alt|dims or |dims
+                    let [alt, dims] = (alias ?? "").split("|")
+
+                    // |dims case, treat first alt slot as dims
+                    if (dims === undefined) {
+                      dims = alt
+                      alt = ""
+                    }
+
                     let [width, height] = dims.split("x", 2)
                     width ||= "auto"
                     height ||= "auto"
@@ -233,6 +241,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                         hProperties: {
                           width,
                           height,
+                          alt,
                         },
                       },
                     }
@@ -318,7 +327,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 }
 
                 tag = slugTag(tag)
-                if (file.data.frontmatter && !file.data.frontmatter.tags.includes(tag)) {
+                if (file.data.frontmatter?.tags?.includes(tag)) {
                   file.data.frontmatter.tags.push(tag)
                 }
 

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;