Merge 1f9ee4735e into a6b2967df8

quartz.config.ts

@@ -1,5 +1,10 @@
 import { QuartzConfig } from "./quartz/cfg"
 import * as Plugin from "./quartz/plugins"
+import * as Text from "./quartz/plugins/transformers/text"
+import * as Markdown from "./quartz/plugins/transformers/markdown"
+import * as Html from "./quartz/plugins/transformers/html"
+import * as Resources from "./quartz/plugins/transformers/resources"
+import * as Presets from "./quartz/plugins/transformers/presets"
 
 /**
  * Quartz 4.0 Configuration
@@ -54,25 +59,8 @@ const config: QuartzConfig = {
     },
   },
   plugins: {
-    transformers: [
+    //transformers: Presets.DefaultPreset(),
-      Plugin.FrontMatter(),
+    transformers: Presets.ObsidianPreset(),
-      Plugin.CreatedModifiedDate({
-        priority: ["frontmatter", "filesystem"],
-      }),
-      Plugin.SyntaxHighlighting({
-        theme: {
-          light: "github-light",
-          dark: "github-dark",
-        },
-        keepBackground: false,
-      }),
-      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
-      Plugin.GitHubFlavoredMarkdown(),
-      Plugin.TableOfContents(),
-      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
-      Plugin.Description(),
-      Plugin.Latex({ renderEngine: "katex" }),
-    ],
     filters: [Plugin.RemoveDrafts()],
     emitters: [
       Plugin.AliasRedirects(),

quartz/build.ts

@@ -54,11 +54,21 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
   const output = argv.output
 
   const pluginCount = Object.values(cfg.plugins).flat().length
-  const pluginNames = (key: "transformers" | "filters" | "emitters") =>
+  const pluginNames = (key: "filters" | "emitters") => cfg.plugins[key].map((plugin) => plugin.name)
-    cfg.plugins[key].map((plugin) => plugin.name)
   if (argv.verbose) {
     console.log(`Loaded ${pluginCount} plugins`)
-    console.log(`  Transformers: ${pluginNames("transformers").join(", ")}`)
+    console.log(
+      `  Text Transformers: ${cfg.plugins["transformers"].textTransformers.map((plugin) => plugin.name).join(", ")}`,
+    )
+    console.log(
+      `  Markdown Transformers: ${cfg.plugins["transformers"].markdownTransformers.map((plugin) => plugin.name).join(", ")}`,
+    )
+    console.log(
+      `  Html Transformers: ${cfg.plugins["transformers"].htmlTransformers.map((plugin) => plugin.name).join(", ")}`,
+    )
+    console.log(
+      `  External Resources: ${cfg.plugins["transformers"].externalResources.map((plugin) => plugin.name).join(", ")}`,
+    )
     console.log(`  Filters: ${pluginNames("filters").join(", ")}`)
     console.log(`  Emitters: ${pluginNames("emitters").join(", ")}`)
   }

quartz/plugins/index.ts

@@ -8,8 +8,8 @@ export function getStaticResourcesFromPlugins(ctx: BuildCtx) {
     js: [],
   }
 
-  for (const transformer of ctx.cfg.plugins.transformers) {
+  for (const transformer of ctx.cfg.plugins.transformers.externalResources) {
-    const res = transformer.externalResources ? transformer.externalResources(ctx) : {}
+    const res = transformer ? transformer.transformation(ctx) : {}
     if (res?.js) {
       staticResources.js.push(...res.js)
     }
@@ -38,7 +38,10 @@ export function getStaticResourcesFromPlugins(ctx: BuildCtx) {
   return staticResources
 }
 
-export * from "./transformers"
+export * as Text from "./transformers/text"
+export * as Markdown from "./transformers/markdown"
+export * as Html from "./transformers/html"
+export * as Resources from "./transformers/resources"
 export * from "./filters"
 export * from "./emitters"
 

quartz/plugins/transformers/html/citations.ts

@@ -1,7 +1,7 @@
 import rehypeCitation from "rehype-citation"
 import { PluggableList } from "unified"
 import { visit } from "unist-util-visit"
-import { QuartzTransformerPlugin } from "../types"
+import { HtmlTransformerPlugin } from "../../types"
 
 export interface Options {
   bibliographyFile: string
@@ -17,11 +17,11 @@ const defaultOptions: Options = {
   csl: "apa",
 }
 
-export const Citations: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+export const Citations: HtmlTransformerPlugin<Partial<Options>> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "Citations",
-    htmlPlugins(ctx) {
+    transformation(ctx) {
       const plugins: PluggableList = []
 
       // Add rehype-citation to the list of plugins

quartz/plugins/transformers/html/description.ts

@@ -1,7 +1,7 @@
 import { Root as HTMLRoot } from "hast"
 import { toString } from "hast-util-to-string"
-import { QuartzTransformerPlugin } from "../types"
+import { HtmlTransformerPlugin } from "../../types"
-import { escapeHTML } from "../../util/escape"
+import { escapeHTML } from "../../../util/escape"
 
 export interface Options {
   descriptionLength: number
@@ -18,11 +18,11 @@ const urlRegex = new RegExp(
   "g",
 )
 
-export const Description: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+export const Description: HtmlTransformerPlugin<Partial<Options>> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "Description",
-    htmlPlugins() {
+    transformation() {
       return [
         () => {
           return async (tree: HTMLRoot, file) => {

quartz/plugins/transformers/html/gfmLinkHeadings.ts

@@ -1,27 +1,22 @@
-import remarkGfm from "remark-gfm"
+import { HtmlTransformerPlugin } from "../../types"
-import smartypants from "remark-smartypants"
-import { QuartzTransformerPlugin } from "../types"
 import rehypeSlug from "rehype-slug"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
 
 export interface Options {
-  enableSmartyPants: boolean
   linkHeadings: boolean
 }
 
 const defaultOptions: Options = {
-  enableSmartyPants: true,
   linkHeadings: true,
 }
 
-export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+export const GitHubFlavoredMarkdownLinkHeadings: HtmlTransformerPlugin<Partial<Options>> = (
+  userOpts,
+) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
-    name: "GitHubFlavoredMarkdown",
+    name: "GitHubFlavoredMarkdownLinkHeadings",
-    markdownPlugins() {
+    transformation() {
-      return opts.enableSmartyPants ? [remarkGfm, smartypants] : [remarkGfm]
-    },
-    htmlPlugins() {
       if (opts.linkHeadings) {
         return [
           rehypeSlug,

quartz/plugins/transformers/html/index.ts

@@ -0,0 +1,9 @@
+export { Citations } from "./citations"
+export { CrawlLinks } from "./links"
+export { Description } from "./description"
+export { GitHubFlavoredMarkdownLinkHeadings } from "./gfmLinkHeadings"
+export { Latex } from "./latex"
+export { SyntaxHighlighting } from "./syntax"
+export { ObsidianFlavoredMarkdownBlockReferences } from "./ofmBlockReferences"
+export { ObsidianFlavoredMarkdownCheckbox } from "./ofmCheckbox"
+export { ObsidianFlavoredMarkdownYouTubeEmbed } from "./ofmYoutubeEmbed"

quartz/plugins/transformers/html/latex.ts

@@ -0,0 +1,27 @@
+import rehypeKatex from "rehype-katex"
+import rehypeMathjax from "rehype-mathjax/svg"
+import { HtmlTransformerPlugin } from "../../types"
+
+interface Options {
+  renderEngine: "katex" | "mathjax"
+  customMacros: MacroType
+}
+
+interface MacroType {
+  [key: string]: string
+}
+
+export const Latex: HtmlTransformerPlugin<Partial<Options>> = (opts) => {
+  const engine = opts?.renderEngine ?? "katex"
+  const macros = opts?.customMacros ?? {}
+  return {
+    name: "Latex",
+    transformation() {
+      if (engine === "katex") {
+        return [[rehypeKatex, { output: "html", macros }]]
+      } else {
+        return [[rehypeMathjax, { macros }]]
+      }
+    },
+  }
+}

quartz/plugins/transformers/html/links.ts

@@ -1,4 +1,4 @@
-import { QuartzTransformerPlugin } from "../types"
+import { HtmlTransformerPlugin, QuartzTransformerPlugin } from "../../types"
 import {
   FullSlug,
   RelativeURL,
@@ -8,7 +8,7 @@ import {
   simplifySlug,
   splitAnchor,
   transformLink,
-} from "../../util/path"
+} from "../../../util/path"
 import path from "path"
 import { visit } from "unist-util-visit"
 import isAbsoluteUrl from "is-absolute-url"
@@ -32,11 +32,11 @@ const defaultOptions: Options = {
   externalLinkIcon: true,
 }
 
-export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+export const CrawlLinks: HtmlTransformerPlugin<Partial<Options>> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "LinkProcessing",
-    htmlPlugins(ctx) {
+    transformation(ctx) {
       return [
         () => {
           return (tree: Root, file) => {

quartz/plugins/transformers/html/ofmBlockReferences.ts

@@ -0,0 +1,99 @@
+import { HtmlTransformerPlugin } from "../../types"
+import { Element, Literal, Root as HtmlRoot } from "hast"
+import rehypeRaw from "rehype-raw"
+import { visit } from "unist-util-visit"
+import { PluggableList } from "unified"
+
+const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/g)
+
+export const ObsidianFlavoredMarkdownBlockReferences: HtmlTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownBlockReferences",
+    transformation() {
+      const plugins: PluggableList = [rehypeRaw]
+
+      plugins.push(() => {
+        const inlineTagTypes = new Set(["p", "li"])
+        const blockTagTypes = new Set(["blockquote"])
+        return (tree: HtmlRoot, file) => {
+          file.data.blocks = {}
+
+          visit(tree, "element", (node, index, parent) => {
+            if (blockTagTypes.has(node.tagName)) {
+              const nextChild = parent?.children.at(index! + 2) as Element
+              if (nextChild && nextChild.tagName === "p") {
+                const text = nextChild.children.at(0) as Literal
+                if (text && text.value && text.type === "text") {
+                  const matches = text.value.match(blockReferenceRegex)
+                  if (matches && matches.length >= 1) {
+                    parent!.children.splice(index! + 2, 1)
+                    const block = matches[0].slice(1)
+
+                    if (!Object.keys(file.data.blocks!).includes(block)) {
+                      node.properties = {
+                        ...node.properties,
+                        id: block,
+                      }
+                      file.data.blocks![block] = node
+                    }
+                  }
+                }
+              }
+            } else if (inlineTagTypes.has(node.tagName)) {
+              const last = node.children.at(-1) as Literal
+              if (last && last.value && typeof last.value === "string") {
+                const matches = last.value.match(blockReferenceRegex)
+                if (matches && matches.length >= 1) {
+                  last.value = last.value.slice(0, -matches[0].length)
+                  const block = matches[0].slice(1)
+
+                  if (last.value === "") {
+                    // this is an inline block ref but the actual block
+                    // is the previous element above it
+                    let idx = (index ?? 1) - 1
+                    while (idx >= 0) {
+                      const element = parent?.children.at(idx)
+                      if (!element) break
+                      if (element.type !== "element") {
+                        idx -= 1
+                      } else {
+                        if (!Object.keys(file.data.blocks!).includes(block)) {
+                          element.properties = {
+                            ...element.properties,
+                            id: block,
+                          }
+                          file.data.blocks![block] = element
+                        }
+                        return
+                      }
+                    }
+                  } else {
+                    // normal paragraph transclude
+                    if (!Object.keys(file.data.blocks!).includes(block)) {
+                      node.properties = {
+                        ...node.properties,
+                        id: block,
+                      }
+                      file.data.blocks![block] = node
+                    }
+                  }
+                }
+              }
+            }
+          })
+
+          file.data.htmlAst = tree
+        }
+      })
+
+      return plugins
+    },
+  }
+}
+
+declare module "vfile" {
+  interface DataMap {
+    blocks: Record<string, Element>
+    htmlAst: HtmlRoot
+  }
+}

quartz/plugins/transformers/html/ofmCheckbox.ts

@@ -0,0 +1,32 @@
+import { HtmlTransformerPlugin } from "../../types"
+import { Element, Root as HtmlRoot } from "hast"
+import rehypeRaw from "rehype-raw"
+import { visit } from "unist-util-visit"
+import { PluggableList } from "unified"
+
+export const ObsidianFlavoredMarkdownCheckbox: HtmlTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownCheckbox",
+    transformation() {
+      const plugins: PluggableList = [rehypeRaw]
+
+      plugins.push(() => {
+        return (tree: HtmlRoot, _file) => {
+          visit(tree, "element", (node) => {
+            if (node.tagName === "input" && node.properties.type === "checkbox") {
+              const isChecked = node.properties?.checked ?? false
+              node.properties = {
+                type: "checkbox",
+                disabled: false,
+                checked: isChecked,
+                class: "checkbox-toggle",
+              }
+            }
+          })
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/html/ofmYoutubeEmbed.ts

@@ -0,0 +1,54 @@
+import { HtmlTransformerPlugin } from "../../types"
+import { Element, Root as HtmlRoot } from "hast"
+import rehypeRaw from "rehype-raw"
+import { visit } from "unist-util-visit"
+import { PluggableList } from "unified"
+
+const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
+const ytPlaylistLinkRegex = /[?&]list=([^#?&]*)/
+
+export const ObsidianFlavoredMarkdownYouTubeEmbed: HtmlTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownYouTubeEmbed",
+    transformation() {
+      const plugins: PluggableList = [rehypeRaw]
+
+      plugins.push(() => {
+        return (tree: HtmlRoot) => {
+          visit(tree, "element", (node) => {
+            if (node.tagName === "img" && typeof node.properties.src === "string") {
+              const match = node.properties.src.match(ytLinkRegex)
+              const videoId = match && match[2].length == 11 ? match[2] : null
+              const playlistId = node.properties.src.match(ytPlaylistLinkRegex)?.[1]
+              if (videoId) {
+                // YouTube video (with optional playlist)
+                node.tagName = "iframe"
+                node.properties = {
+                  class: "external-embed youtube",
+                  allow: "fullscreen",
+                  frameborder: 0,
+                  width: "600px",
+                  src: playlistId
+                    ? `https://www.youtube.com/embed/${videoId}?list=${playlistId}`
+                    : `https://www.youtube.com/embed/${videoId}`,
+                }
+              } else if (playlistId) {
+                // YouTube playlist only.
+                node.tagName = "iframe"
+                node.properties = {
+                  class: "external-embed youtube",
+                  allow: "fullscreen",
+                  frameborder: 0,
+                  width: "600px",
+                  src: `https://www.youtube.com/embed/videoseries?list=${playlistId}`,
+                }
+              }
+            }
+          })
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/html/syntax.ts

@@ -1,4 +1,4 @@
-import { QuartzTransformerPlugin } from "../types"
+import { HtmlTransformerPlugin, QuartzTransformerPlugin } from "../../types"
 import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code"
 
 interface Theme extends Record<string, CodeTheme> {
@@ -19,12 +19,12 @@ const defaultOptions: Options = {
   keepBackground: false,
 }
 
-export const SyntaxHighlighting: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+export const SyntaxHighlighting: HtmlTransformerPlugin<Partial<Options>> = (userOpts) => {
   const opts: CodeOptions = { ...defaultOptions, ...userOpts }
 
   return {
     name: "SyntaxHighlighting",
-    htmlPlugins() {
+    transformation() {
       return [[rehypePrettyCode, opts]]
     },
   }

quartz/plugins/transformers/index.ts

@@ -1,13 +0,0 @@
-export { FrontMatter } from "./frontmatter"
-export { GitHubFlavoredMarkdown } from "./gfm"
-export { Citations } from "./citations"
-export { CreatedModifiedDate } from "./lastmod"
-export { Latex } from "./latex"
-export { Description } from "./description"
-export { CrawlLinks } from "./links"
-export { ObsidianFlavoredMarkdown } from "./ofm"
-export { OxHugoFlavouredMarkdown } from "./oxhugofm"
-export { SyntaxHighlighting } from "./syntax"
-export { TableOfContents } from "./toc"
-export { HardLineBreaks } from "./linebreaks"
-export { RoamFlavoredMarkdown } from "./roam"

quartz/plugins/transformers/linebreaks.ts

@@ -1,11 +0,0 @@
-import { QuartzTransformerPlugin } from "../types"
-import remarkBreaks from "remark-breaks"
-
-export const HardLineBreaks: QuartzTransformerPlugin = () => {
-  return {
-    name: "HardLineBreaks",
-    markdownPlugins() {
-      return [remarkBreaks]
-    },
-  }
-}

quartz/plugins/transformers/markdown/frontmatter.ts

@@ -1,11 +1,11 @@
 import matter from "gray-matter"
 import remarkFrontmatter from "remark-frontmatter"
-import { QuartzTransformerPlugin } from "../types"
+import { MarkdownTransformerPlugin } from "../../types"
 import yaml from "js-yaml"
 import toml from "toml"
-import { slugTag } from "../../util/path"
+import { slugTag } from "../../../util/path"
-import { QuartzPluginData } from "../vfile"
+import { QuartzPluginData } from "../../vfile"
-import { i18n } from "../../i18n"
+import { i18n } from "../../../i18n"
 
 export interface Options {
   delimiters: string | [string, string]
@@ -40,11 +40,11 @@ function coerceToArray(input: string | string[]): string[] | undefined {
     .map((tag: string | number) => tag.toString())
 }
 
-export const FrontMatter: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+export const FrontMatter: MarkdownTransformerPlugin<Partial<Options>> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "FrontMatter",
-    markdownPlugins({ cfg }) {
+    transformation({ cfg }) {
       return [
         [remarkFrontmatter, ["yaml", "toml"]],
         () => {

quartz/plugins/transformers/markdown/gfmRemark.ts

@@ -0,0 +1,23 @@
+import remarkGfm from "remark-gfm"
+import smartypants from "remark-smartypants"
+import { MarkdownTransformerPlugin } from "../../types"
+
+export interface Options {
+  enableSmartyPants: boolean
+}
+
+const defaultOptions: Options = {
+  enableSmartyPants: true,
+}
+
+export const GitHubFlavoredMarkdownRemark: MarkdownTransformerPlugin<Partial<Options>> = (
+  userOpts,
+) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "GitHubFlavoredMarkdownRemark",
+    transformation() {
+      return opts.enableSmartyPants ? [remarkGfm, smartypants] : [remarkGfm]
+    },
+  }
+}

quartz/plugins/transformers/markdown/index.ts

@@ -0,0 +1,21 @@
+export { CreatedModifiedDate } from "./lastmod"
+export { FrontMatter } from "./frontmatter"
+export { GitHubFlavoredMarkdownRemark } from "./gfmRemark"
+export { HardLineBreaks } from "./linebreaks"
+export { Latex } from "./latex"
+export { ObsidianFlavoredMarkdownArrow } from "./ofmArrow"
+export { ObsidianFlavoredMarkdownCallouts } from "./ofmCallouts"
+export { ObsidianFlavoredMarkdownDangerousHtml } from "./ofmDangerousHtml"
+export { ObsidianFlavoredMarkdownHighlight } from "./ofmHighlight"
+export { ObsidianFlavoredMarkdownMermaid } from "./ofmMermaid"
+export { ObsidianFlavoredMarkdownTags } from "./ofmTags"
+export { ObsidianFlavoredMarkdownVideoEmbed } from "./ofmVideoEmbed"
+export { ObsidianFlavoredMarkdownWikilinks } from "./ofmWikilinks"
+export { RoamFlavoredMarkdownBlockquote } from "./roamBlockquote"
+export { RoamFlavoredMarkdownDONE } from "./roamDONE"
+export { RoamFlavoredMarkdownHighlight } from "./roamHighlight"
+export { RoamFlavoredMarkdownItalics } from "./roamItalics"
+export { RoamFlavoredMarkdownSpecialEmbeds } from "./roamSpecialEmbeds"
+export { RoamFlavoredMarkdownTODO } from "./roamTODO"
+export { RoamFlavoredMarkdownOrComponent } from "./roamOrComponent"
+export { TableOfContents } from "./toc"

quartz/plugins/transformers/markdown/lastmod.ts

@@ -1,7 +1,7 @@
 import fs from "fs"
 import path from "path"
 import { Repository } from "@napi-rs/simple-git"
-import { QuartzTransformerPlugin } from "../types"
+import { MarkdownTransformerPlugin, QuartzTransformerPlugin } from "../../types"
 import chalk from "chalk"
 
 export interface Options {
@@ -27,11 +27,11 @@ function coerceDate(fp: string, d: any): Date {
 }
 
 type MaybeDate = undefined | string | number
-export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+export const CreatedModifiedDate: MarkdownTransformerPlugin<Partial<Options>> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "CreatedModifiedDate",
-    markdownPlugins() {
+    transformation() {
       return [
         () => {
           let repo: Repository | undefined = undefined

quartz/plugins/transformers/markdown/latex.ts

@@ -0,0 +1,11 @@
+import remarkMath from "remark-math"
+import { MarkdownTransformerPlugin } from "../../types"
+
+export const Latex: MarkdownTransformerPlugin = () => {
+  return {
+    name: "Latex",
+    transformation() {
+      return [remarkMath]
+    },
+  }
+}

quartz/plugins/transformers/markdown/linebreaks.ts

@@ -0,0 +1,11 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import remarkBreaks from "remark-breaks"
+
+export const HardLineBreaks: MarkdownTransformerPlugin = () => {
+  return {
+    name: "HardLineBreaks",
+    transformation() {
+      return [remarkBreaks]
+    },
+  }
+}

quartz/plugins/transformers/markdown/ofmArrow.ts

@@ -0,0 +1,50 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { Root } from "mdast"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { SKIP } from "unist-util-visit"
+import { PluggableList } from "unified"
+
+const arrowMapping: Record<string, string> = {
+  "->": "&rarr;",
+  "-->": "&rArr;",
+  "=>": "&rArr;",
+  "==>": "&rArr;",
+  "<-": "&larr;",
+  "<--": "&lArr;",
+  "<=": "&lArr;",
+  "<==": "&lArr;",
+}
+
+export const arrowRegex = new RegExp(/(-{1,2}>|={1,2}>|<-{1,2}|<={1,2})/g)
+
+export const ObsidianFlavoredMarkdownArrow: MarkdownTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownArrow",
+    transformation(_ctx) {
+      const plugins: PluggableList = []
+
+      // regex replacements
+      plugins.push(() => {
+        return (tree: Root, _file) => {
+          const replacements: [RegExp, string | ReplaceFunction][] = []
+
+          replacements.push([
+            arrowRegex,
+            (value: string, ..._capture: string[]) => {
+              const maybeArrow = arrowMapping[value]
+              if (maybeArrow === undefined) return SKIP
+              return {
+                type: "html",
+                value: `<span>${maybeArrow}</span>`,
+              }
+            },
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/ofmCallouts.ts

@@ -0,0 +1,168 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { Root, Html, BlockContent, DefinitionContent, Paragraph } from "mdast"
+import { visit } from "unist-util-visit"
+import { toHast } from "mdast-util-to-hast"
+import { toHtml } from "hast-util-to-html"
+import { PhrasingContent } from "mdast-util-find-and-replace/lib"
+import { capitalize } from "../../../util/lang"
+import { PluggableList } from "unified"
+
+const calloutMapping = {
+  note: "note",
+  abstract: "abstract",
+  summary: "abstract",
+  tldr: "abstract",
+  info: "info",
+  todo: "todo",
+  tip: "tip",
+  hint: "tip",
+  important: "tip",
+  success: "success",
+  check: "success",
+  done: "success",
+  question: "question",
+  help: "question",
+  faq: "question",
+  warning: "warning",
+  attention: "warning",
+  caution: "warning",
+  failure: "failure",
+  missing: "failure",
+  fail: "failure",
+  danger: "danger",
+  error: "danger",
+  bug: "bug",
+  example: "example",
+  quote: "quote",
+  cite: "quote",
+} as const
+
+function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
+  const normalizedCallout = calloutName.toLowerCase() as keyof typeof calloutMapping
+  // if callout is not recognized, make it a custom one
+  return calloutMapping[normalizedCallout] ?? calloutName
+}
+
+// from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
+const calloutRegex = new RegExp(/^\[\!([\w-]+)\|?(.+?)?\]([+-]?)/)
+
+export const ObsidianFlavoredMarkdownCallouts: MarkdownTransformerPlugin = () => {
+  const mdastToHtml = (ast: PhrasingContent | Paragraph) => {
+    const hast = toHast(ast, { allowDangerousHtml: true })!
+    return toHtml(hast, { allowDangerousHtml: true })
+  }
+
+  return {
+    name: "ObsidianFlavoredMarkdownCallouts",
+    transformation(_ctx) {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file) => {
+          visit(tree, "blockquote", (node) => {
+            if (node.children.length === 0) {
+              return
+            }
+
+            // find first line and callout content
+            const [firstChild, ...calloutContent] = node.children
+            if (firstChild.type !== "paragraph" || firstChild.children[0]?.type !== "text") {
+              return
+            }
+
+            const text = firstChild.children[0].value
+            const restOfTitle = firstChild.children.slice(1)
+            const [firstLine, ...remainingLines] = text.split("\n")
+            const remainingText = remainingLines.join("\n")
+
+            const match = firstLine.match(calloutRegex)
+            if (match && match.input) {
+              const [calloutDirective, typeString, calloutMetaData, collapseChar] = match
+              const calloutType = canonicalizeCallout(typeString.toLowerCase())
+              const collapse = collapseChar === "+" || collapseChar === "-"
+              const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
+              const titleContent = match.input.slice(calloutDirective.length).trim()
+              const useDefaultTitle = titleContent === "" && restOfTitle.length === 0
+              const titleNode: Paragraph = {
+                type: "paragraph",
+                children: [
+                  {
+                    type: "text",
+                    value: useDefaultTitle ? capitalize(typeString) : titleContent + " ",
+                  },
+                  ...restOfTitle,
+                ],
+              }
+              const title = mdastToHtml(titleNode)
+
+              const toggleIcon = `<div class="fold-callout-icon"></div>`
+
+              const titleHtml: Html = {
+                type: "html",
+                value: `<div
+                  class="callout-title"
+                >
+                  <div class="callout-icon"></div>
+                  <div class="callout-title-inner">${title}</div>
+                  ${collapse ? toggleIcon : ""}
+                </div>`,
+              }
+
+              const blockquoteContent: (BlockContent | DefinitionContent)[] = [titleHtml]
+              if (remainingText.length > 0) {
+                blockquoteContent.push({
+                  type: "paragraph",
+                  children: [
+                    {
+                      type: "text",
+                      value: remainingText,
+                    },
+                  ],
+                })
+              }
+
+              // replace first line of blockquote with title and rest of the paragraph text
+              node.children.splice(0, 1, ...blockquoteContent)
+
+              const classNames = ["callout", calloutType]
+              if (collapse) {
+                classNames.push("is-collapsible")
+              }
+              if (defaultState === "collapsed") {
+                classNames.push("is-collapsed")
+              }
+
+              // add properties to base blockquote
+              node.data = {
+                hProperties: {
+                  ...(node.data?.hProperties ?? {}),
+                  className: classNames.join(" "),
+                  "data-callout": calloutType,
+                  "data-callout-fold": collapse,
+                  "data-callout-metadata": calloutMetaData,
+                },
+              }
+
+              // Add callout-content class to callout body if it has one.
+              if (calloutContent.length > 0) {
+                const contentData: BlockContent | DefinitionContent = {
+                  data: {
+                    hProperties: {
+                      className: "callout-content",
+                    },
+                    hName: "div",
+                  },
+                  type: "blockquote",
+                  children: [...calloutContent],
+                }
+                node.children = [node.children[0], contentData]
+              }
+            }
+          })
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/ofmDangerousHtml.ts

@@ -0,0 +1,54 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { Root, Html, Paragraph } from "mdast"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { visit } from "unist-util-visit"
+import { toHast } from "mdast-util-to-hast"
+import { toHtml } from "hast-util-to-html"
+import { PhrasingContent } from "mdast-util-find-and-replace/lib"
+import { PluggableList } from "unified"
+
+export const ObsidianFlavoredMarkdownDangerousHtml: MarkdownTransformerPlugin = () => {
+  const mdastToHtml = (ast: PhrasingContent | Paragraph) => {
+    const hast = toHast(ast, { allowDangerousHtml: true })!
+    return toHtml(hast, { allowDangerousHtml: true })
+  }
+
+  return {
+    name: "ObsidianFlavoredMarkdownDangerousHtml",
+    transformation(_ctx) {
+      const plugins: PluggableList = []
+
+      // regex replacements
+      plugins.push(() => {
+        return (tree: Root, file) => {
+          const replacements: [RegExp, string | ReplaceFunction][] = []
+
+          visit(tree, "html", (node: Html) => {
+            for (const [regex, replace] of replacements) {
+              if (typeof replace === "string") {
+                node.value = node.value.replace(regex, replace)
+              } else {
+                node.value = node.value.replace(regex, (substring: string, ...args) => {
+                  const replaceValue = replace(substring, ...args)
+                  if (typeof replaceValue === "string") {
+                    return replaceValue
+                  } else if (Array.isArray(replaceValue)) {
+                    return replaceValue.map(mdastToHtml).join("")
+                  } else if (typeof replaceValue === "object" && replaceValue !== null) {
+                    return mdastToHtml(replaceValue)
+                  } else {
+                    return substring
+                  }
+                })
+              }
+            }
+          })
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/ofmHighlight.ts

@@ -0,0 +1,37 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { Root } from "mdast"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { PluggableList } from "unified"
+
+const highlightRegex = new RegExp(/==([^=]+)==/g)
+
+export const ObsidianFlavoredMarkdownHighlight: MarkdownTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownHighlight",
+    transformation(_ctx) {
+      const plugins: PluggableList = []
+
+      // regex replacements
+      plugins.push(() => {
+        return (tree: Root, _file) => {
+          const replacements: [RegExp, string | ReplaceFunction][] = []
+
+          replacements.push([
+            highlightRegex,
+            (_value: string, ...capture: string[]) => {
+              const [inner] = capture
+              return {
+                type: "html",
+                value: `<span class="text-highlight">${inner}</span>`,
+              }
+            },
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/ofmMermaid.ts

@@ -0,0 +1,29 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { Root, Code } from "mdast"
+import { visit } from "unist-util-visit"
+import { PluggableList } from "unified"
+
+export const ObsidianFlavoredMarkdownMermaid: MarkdownTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownMermaid",
+    transformation(_ctx) {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file) => {
+          visit(tree, "code", (node: Code) => {
+            if (node.lang === "mermaid") {
+              node.data = {
+                hProperties: {
+                  className: ["mermaid"],
+                },
+              }
+            }
+          })
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/ofmTags.ts

@@ -0,0 +1,66 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { Root } from "mdast"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { pathToRoot, slugTag } from "../../../util/path"
+import { PluggableList } from "unified"
+
+// (?:^| )              -> non-capturing group, tag should start be separated by a space or be the start of the line
+// #(...)               -> capturing group, tag itself must start with #
+// (?:[-_\p{L}\d\p{Z}])+       -> non-capturing group, non-empty string of (Unicode-aware) alpha-numeric characters and symbols, hyphens and/or underscores
+// (?:\/[-_\p{L}\d\p{Z}]+)*)   -> non-capturing group, matches an arbitrary number of tag strings separated by "/"
+const tagRegex = new RegExp(
+  /(?:^| )#((?:[-_\p{L}\p{Emoji}\p{M}\d])+(?:\/[-_\p{L}\p{Emoji}\p{M}\d]+)*)/gu,
+)
+
+export const ObsidianFlavoredMarkdownTags: MarkdownTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownTags",
+    transformation(_ctx) {
+      const plugins: PluggableList = []
+
+      // regex replacements
+      plugins.push(() => {
+        return (tree: Root, file) => {
+          const replacements: [RegExp, string | ReplaceFunction][] = []
+          const base = pathToRoot(file.data.slug!)
+
+          replacements.push([
+            tagRegex,
+            (_value: string, tag: string) => {
+              // Check if the tag only includes numbers and slashes
+              if (/^[\/\d]+$/.test(tag)) {
+                return false
+              }
+
+              tag = slugTag(tag)
+              if (file.data.frontmatter) {
+                const noteTags = file.data.frontmatter.tags ?? []
+                file.data.frontmatter.tags = [...new Set([...noteTags, tag])]
+              }
+
+              return {
+                type: "link",
+                url: base + `/tags/${tag}`,
+                data: {
+                  hProperties: {
+                    className: ["tag-link"],
+                  },
+                },
+                children: [
+                  {
+                    type: "text",
+                    value: tag,
+                  },
+                ],
+              }
+            },
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/ofmVideoEmbed.ts

@@ -0,0 +1,33 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { Root, Html } from "mdast"
+import { SKIP, visit } from "unist-util-visit"
+import { PluggableList } from "unified"
+
+const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/)
+
+export const ObsidianFlavoredMarkdownVideoEmbed: MarkdownTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownVideoEmbed",
+    transformation(_ctx) {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file) => {
+          visit(tree, "image", (node, index, parent) => {
+            if (parent && index != undefined && videoExtensionRegex.test(node.url)) {
+              const newNode: Html = {
+                type: "html",
+                value: `<video controls src="${node.url}"></video>`,
+              }
+
+              parent.children.splice(index, 1, newNode)
+              return SKIP
+            }
+          })
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/ofmWikilinks.ts

@@ -0,0 +1,112 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { Root } from "mdast"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import path from "path"
+import { FilePath, slugifyFilePath } from "../../../util/path"
+import { PluggableList } from "unified"
+
+// !?                 -> optional embedding
+// \[\[               -> open brace
+// ([^\[\]\|\#]+)     -> one or more non-special characters ([,],|, or #) (name)
+// (#[^\[\]\|\#]+)?   -> # then one or more non-special characters (heading link)
+// (\\?\|[^\[\]\#]+)? -> optional escape \ then | then one or more non-special characters (alias)
+export const wikilinkRegex = new RegExp(
+  /!?\[\[([^\[\]\|\#\\]+)?(#+[^\[\]\|\#\\]+)?(\\?\|[^\[\]\#]+)?\]\]/g,
+)
+
+const wikilinkImageEmbedRegex = new RegExp(
+  /^(?<alt>(?!^\d*x?\d*$).*?)?(\|?\s*?(?<width>\d+)(x(?<height>\d+))?)?$/,
+)
+
+export const ObsidianFlavoredMarkdownWikilinks: MarkdownTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownWikilinks",
+    transformation(_ctx) {
+      const plugins: PluggableList = []
+
+      // regex replacements
+      plugins.push(() => {
+        return (tree: Root, _file) => {
+          const replacements: [RegExp, string | ReplaceFunction][] = []
+
+          replacements.push([
+            wikilinkRegex,
+            (value: string, ...capture: string[]) => {
+              let [rawFp, rawHeader, rawAlias] = capture
+              const fp = rawFp?.trim() ?? ""
+              const anchor = rawHeader?.trim() ?? ""
+              const alias = rawAlias?.slice(1).trim()
+
+              // embed cases
+              if (value.startsWith("!")) {
+                const ext: string = path.extname(fp).toLowerCase()
+                const url = slugifyFilePath(fp as FilePath)
+                if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
+                  const match = wikilinkImageEmbedRegex.exec(alias ?? "")
+                  const alt = match?.groups?.alt ?? ""
+                  const width = match?.groups?.width ?? "auto"
+                  const height = match?.groups?.height ?? "auto"
+                  return {
+                    type: "image",
+                    url,
+                    data: {
+                      hProperties: {
+                        width,
+                        height,
+                        alt,
+                      },
+                    },
+                  }
+                } else if ([".mp4", ".webm", ".ogv", ".mov", ".mkv"].includes(ext)) {
+                  return {
+                    type: "html",
+                    value: `<video src="${url}" controls></video>`,
+                  }
+                } else if (
+                  [".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext)
+                ) {
+                  return {
+                    type: "html",
+                    value: `<audio src="${url}" controls></audio>`,
+                  }
+                } else if ([".pdf"].includes(ext)) {
+                  return {
+                    type: "html",
+                    value: `<iframe src="${url}" class="pdf"></iframe>`,
+                  }
+                } else {
+                  const block = anchor
+                  return {
+                    type: "html",
+                    data: { hProperties: { transclude: true } },
+                    value: `<blockquote class="transclude" data-url="${url}" data-block="${block}" data-embed-alias="${alias}"><a href="${
+                      url + anchor
+                    }" class="transclude-inner">Transclude of ${url}${block}</a></blockquote>`,
+                  }
+                }
+
+                // otherwise, fall through to regular link
+              }
+
+              // internal link
+              const url = fp + anchor
+              return {
+                type: "link",
+                url,
+                children: [
+                  {
+                    type: "text",
+                    value: alias ?? fp,
+                  },
+                ],
+              }
+            },
+          ])
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/roamBlockquote.ts

@@ -0,0 +1,34 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { PluggableList } from "unified"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { Root } from "mdast"
+import { VFile } from "vfile"
+
+const blockquoteRegex = new RegExp(/(\[\[>\]\])\s*(.*)/, "g")
+
+export const RoamFlavoredMarkdownBlockquote: MarkdownTransformerPlugin = () => {
+  return {
+    name: "RoamFlavoredMarkdownBlockquote",
+    transformation() {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file: VFile) => {
+          const replacements: [RegExp, ReplaceFunction][] = []
+
+          replacements.push([
+            blockquoteRegex,
+            (_match: string, _marker: string, content: string) => ({
+              type: "html",
+              value: `<blockquote>${content.trim()}</blockquote>`,
+            }),
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/roamDONE.ts

@@ -0,0 +1,34 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { PluggableList } from "unified"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { Root } from "mdast"
+import { VFile } from "vfile"
+
+const DONERegex = new RegExp(/{{.*?\bDONE\b.*?}}/, "g")
+
+export const RoamFlavoredMarkdownDONE: MarkdownTransformerPlugin = () => {
+  return {
+    name: "RoamFlavoredMarkdownDONE",
+    transformation() {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file: VFile) => {
+          const replacements: [RegExp, ReplaceFunction][] = []
+
+          replacements.push([
+            DONERegex,
+            () => ({
+              type: "html",
+              value: `<input type="checkbox" checked disabled>`,
+            }),
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/roamHighlight.ts

@@ -0,0 +1,35 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { PluggableList } from "unified"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { Root } from "mdast"
+import { VFile } from "vfile"
+
+const roamHighlightRegex = new RegExp(/\^\^(.+)\^\^/, "g")
+
+export const RoamFlavoredMarkdownHighlight: MarkdownTransformerPlugin = () => {
+  return {
+    name: "RoamFlavoredMarkdownHighlight",
+    transformation() {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file: VFile) => {
+          const replacements: [RegExp, ReplaceFunction][] = []
+
+          // Roam highlight syntax
+          replacements.push([
+            roamHighlightRegex,
+            (_value: string, inner: string) => ({
+              type: "html",
+              value: `<span class="text-highlight">${inner}</span>`,
+            }),
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/roamItalics.ts

@@ -0,0 +1,35 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { PluggableList } from "unified"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { Root } from "mdast"
+import { VFile } from "vfile"
+
+const roamItalicRegex = new RegExp(/__(.+)__/, "g")
+
+export const RoamFlavoredMarkdownItalics: MarkdownTransformerPlugin = () => {
+  return {
+    name: "RoamFlavoredMarkdownItalics",
+    transformation() {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file: VFile) => {
+          const replacements: [RegExp, ReplaceFunction][] = []
+
+          // Roam italic syntax
+          replacements.push([
+            roamItalicRegex,
+            (_value: string, match: string) => ({
+              type: "emphasis",
+              children: [{ type: "text", value: match }],
+            }),
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/roamOrComponent.ts

@@ -0,0 +1,41 @@
+import { MarkdownTransformerPlugin, QuartzTransformerPlugin } from "../../types"
+import { PluggableList } from "unified"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { Root } from "mdast"
+
+import { VFile } from "vfile"
+
+const orRegex = new RegExp(/{{or:(.*?)}}/, "g")
+
+export const RoamFlavoredMarkdownOrComponent: MarkdownTransformerPlugin = () => {
+  return {
+    name: "RoamFlavoredMarkdownOrComponent",
+    transformation() {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file: VFile) => {
+          const replacements: [RegExp, ReplaceFunction][] = []
+
+          replacements.push([
+            orRegex,
+            (match: string) => {
+              const matchResult = match.match(/{{or:(.*?)}}/)
+              if (matchResult === null) {
+                return { type: "html", value: "" }
+              }
+              const optionsString: string = matchResult[1]
+              const options: string[] = optionsString.split("|")
+              const selectHtml: string = `<select>${options.map((option: string) => `<option value="${option}">${option}</option>`).join("")}</select>`
+              return { type: "html", value: selectHtml }
+            },
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/roamSpecialEmbeds.ts

@@ -1,55 +1,23 @@
-import { QuartzTransformerPlugin } from "../types"
+import { MarkdownTransformerPlugin } from "../../types"
 import { PluggableList } from "unified"
-import { SKIP, visit } from "unist-util-visit"
+import { visit } from "unist-util-visit"
 import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
 import { Root, Html, Paragraph, Text, Link, Parent } from "mdast"
-import { Node } from "unist"
 import { VFile } from "vfile"
 import { BuildVisitor } from "unist-util-visit"
 
 export interface Options {
-  orComponent: boolean
-  TODOComponent: boolean
-  DONEComponent: boolean
   videoComponent: boolean
   audioComponent: boolean
   pdfComponent: boolean
-  blockquoteComponent: boolean
-  tableComponent: boolean
-  attributeComponent: boolean
 }
 
 const defaultOptions: Options = {
-  orComponent: true,
-  TODOComponent: true,
-  DONEComponent: true,
   videoComponent: true,
   audioComponent: true,
   pdfComponent: true,
-  blockquoteComponent: true,
-  tableComponent: true,
-  attributeComponent: true,
 }
 
-const orRegex = new RegExp(/{{or:(.*?)}}/, "g")
-const TODORegex = new RegExp(/{{.*?\bTODO\b.*?}}/, "g")
-const DONERegex = new RegExp(/{{.*?\bDONE\b.*?}}/, "g")
-const videoRegex = new RegExp(/{{.*?\[\[video\]\].*?\:(.*?)}}/, "g")
-const youtubeRegex = new RegExp(
-  /{{.*?\[\[video\]\].*?(https?:\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?)}}/,
-  "g",
-)
-
-// const multimediaRegex = new RegExp(/{{.*?\b(video|audio)\b.*?\:(.*?)}}/, "g")
-
-const audioRegex = new RegExp(/{{.*?\[\[audio\]\].*?\:(.*?)}}/, "g")
-const pdfRegex = new RegExp(/{{.*?\[\[pdf\]\].*?\:(.*?)}}/, "g")
-const blockquoteRegex = new RegExp(/(\[\[>\]\])\s*(.*)/, "g")
-const roamHighlightRegex = new RegExp(/\^\^(.+)\^\^/, "g")
-const roamItalicRegex = new RegExp(/__(.+)__/, "g")
-const tableRegex = new RegExp(/- {{.*?\btable\b.*?}}/, "g") /* TODO */
-const attributeRegex = new RegExp(/\b\w+(?:\s+\w+)*::/, "g") /* TODO */
-
 function isSpecialEmbed(node: Paragraph): boolean {
   if (node.children.length !== 2) return false
 
@@ -124,18 +92,18 @@ function transformSpecialEmbed(node: Paragraph, opts: Options): Html | null {
   }
 }
 
-export const RoamFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
+export const RoamFlavoredMarkdownSpecialEmbeds: MarkdownTransformerPlugin<Partial<Options>> = (
   userOpts,
 ) => {
   const opts = { ...defaultOptions, ...userOpts }
 
   return {
-    name: "RoamFlavoredMarkdown",
+    name: "RoamFlavoredMarkdownSpecialEmbeds",
-    markdownPlugins() {
+    transformation() {
       const plugins: PluggableList = []
 
       plugins.push(() => {
-        return (tree: Root, file: VFile) => {
+        return (tree: Root, _file: VFile) => {
           const replacements: [RegExp, ReplaceFunction][] = []
 
           // Handle special embeds (audio, video, PDF)
@@ -150,70 +118,6 @@ export const RoamFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | un
             }) as BuildVisitor<Root, "paragraph">)
           }
 
-          // Roam italic syntax
-          replacements.push([
-            roamItalicRegex,
-            (_value: string, match: string) => ({
-              type: "emphasis",
-              children: [{ type: "text", value: match }],
-            }),
-          ])
-
-          // Roam highlight syntax
-          replacements.push([
-            roamHighlightRegex,
-            (_value: string, inner: string) => ({
-              type: "html",
-              value: `<span class="text-highlight">${inner}</span>`,
-            }),
-          ])
-
-          if (opts.orComponent) {
-            replacements.push([
-              orRegex,
-              (match: string) => {
-                const matchResult = match.match(/{{or:(.*?)}}/)
-                if (matchResult === null) {
-                  return { type: "html", value: "" }
-                }
-                const optionsString: string = matchResult[1]
-                const options: string[] = optionsString.split("|")
-                const selectHtml: string = `<select>${options.map((option: string) => `<option value="${option}">${option}</option>`).join("")}</select>`
-                return { type: "html", value: selectHtml }
-              },
-            ])
-          }
-
-          if (opts.TODOComponent) {
-            replacements.push([
-              TODORegex,
-              () => ({
-                type: "html",
-                value: `<input type="checkbox" disabled>`,
-              }),
-            ])
-          }
-
-          if (opts.DONEComponent) {
-            replacements.push([
-              DONERegex,
-              () => ({
-                type: "html",
-                value: `<input type="checkbox" checked disabled>`,
-              }),
-            ])
-          }
-
-          if (opts.blockquoteComponent) {
-            replacements.push([
-              blockquoteRegex,
-              (_match: string, _marker: string, content: string) => ({
-                type: "html",
-                value: `<blockquote>${content.trim()}</blockquote>`,
-              }),
-            ])
-          }
-
           mdastFindReplace(tree, replacements)
         }
       })

quartz/plugins/transformers/markdown/roamTODO.ts

@@ -0,0 +1,34 @@
+import { MarkdownTransformerPlugin } from "../../types"
+import { PluggableList } from "unified"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+import { Root } from "mdast"
+import { VFile } from "vfile"
+
+const TODORegex = new RegExp(/{{.*?\bTODO\b.*?}}/, "g")
+
+export const RoamFlavoredMarkdownTODO: MarkdownTransformerPlugin = () => {
+  return {
+    name: "RoamFlavoredMarkdownTODO",
+    transformation() {
+      const plugins: PluggableList = []
+
+      plugins.push(() => {
+        return (tree: Root, _file: VFile) => {
+          const replacements: [RegExp, ReplaceFunction][] = []
+
+          replacements.push([
+            TODORegex,
+            () => ({
+              type: "html",
+              value: `<input type="checkbox" disabled>`,
+            }),
+          ])
+
+          mdastFindReplace(tree, replacements)
+        }
+      })
+
+      return plugins
+    },
+  }
+}

quartz/plugins/transformers/markdown/toc.ts

@@ -1,4 +1,4 @@
-import { QuartzTransformerPlugin } from "../types"
+import { MarkdownTransformerPlugin, QuartzTransformerPlugin } from "../../types"
 import { Root } from "mdast"
 import { visit } from "unist-util-visit"
 import { toString } from "mdast-util-to-string"
@@ -25,11 +25,11 @@ interface TocEntry {
 }
 
 const slugAnchor = new Slugger()
-export const TableOfContents: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+export const TableOfContents: MarkdownTransformerPlugin<Partial<Options>> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "TableOfContents",
-    markdownPlugins() {
+    transformation() {
       return [
         () => {
           return async (tree: Root, file) => {

quartz/plugins/transformers/ofm.ts

@@ -1,720 +0,0 @@
-import { QuartzTransformerPlugin } from "../types"
-import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
-import { Element, Literal, Root as HtmlRoot } from "hast"
-import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
-import rehypeRaw from "rehype-raw"
-import { SKIP, visit } from "unist-util-visit"
-import path from "path"
-import { splitAnchor } from "../../util/path"
-import { JSResource } from "../../util/resources"
-// @ts-ignore
-import calloutScript from "../../components/scripts/callout.inline.ts"
-// @ts-ignore
-import checkboxScript from "../../components/scripts/checkbox.inline.ts"
-import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
-import { toHast } from "mdast-util-to-hast"
-import { toHtml } from "hast-util-to-html"
-import { PhrasingContent } from "mdast-util-find-and-replace/lib"
-import { capitalize } from "../../util/lang"
-import { PluggableList } from "unified"
-
-export interface Options {
-  comments: boolean
-  highlight: boolean
-  wikilinks: boolean
-  callouts: boolean
-  mermaid: boolean
-  parseTags: boolean
-  parseArrows: boolean
-  parseBlockReferences: boolean
-  enableInHtmlEmbed: boolean
-  enableYouTubeEmbed: boolean
-  enableVideoEmbed: boolean
-  enableCheckbox: boolean
-}
-
-const defaultOptions: Options = {
-  comments: true,
-  highlight: true,
-  wikilinks: true,
-  callouts: true,
-  mermaid: true,
-  parseTags: true,
-  parseArrows: true,
-  parseBlockReferences: true,
-  enableInHtmlEmbed: false,
-  enableYouTubeEmbed: true,
-  enableVideoEmbed: true,
-  enableCheckbox: false,
-}
-
-const calloutMapping = {
-  note: "note",
-  abstract: "abstract",
-  summary: "abstract",
-  tldr: "abstract",
-  info: "info",
-  todo: "todo",
-  tip: "tip",
-  hint: "tip",
-  important: "tip",
-  success: "success",
-  check: "success",
-  done: "success",
-  question: "question",
-  help: "question",
-  faq: "question",
-  warning: "warning",
-  attention: "warning",
-  caution: "warning",
-  failure: "failure",
-  missing: "failure",
-  fail: "failure",
-  danger: "danger",
-  error: "danger",
-  bug: "bug",
-  example: "example",
-  quote: "quote",
-  cite: "quote",
-} as const
-
-const arrowMapping: Record<string, string> = {
-  "->": "&rarr;",
-  "-->": "&rArr;",
-  "=>": "&rArr;",
-  "==>": "&rArr;",
-  "<-": "&larr;",
-  "<--": "&lArr;",
-  "<=": "&lArr;",
-  "<==": "&lArr;",
-}
-
-function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
-  const normalizedCallout = calloutName.toLowerCase() as keyof typeof calloutMapping
-  // if callout is not recognized, make it a custom one
-  return calloutMapping[normalizedCallout] ?? calloutName
-}
-
-export const externalLinkRegex = /^https?:\/\//i
-
-export const arrowRegex = new RegExp(/(-{1,2}>|={1,2}>|<-{1,2}|<={1,2})/g)
-
-// !?                 -> optional embedding
-// \[\[               -> open brace
-// ([^\[\]\|\#]+)     -> one or more non-special characters ([,],|, or #) (name)
-// (#[^\[\]\|\#]+)?   -> # then one or more non-special characters (heading link)
-// (\\?\|[^\[\]\#]+)? -> optional escape \ then | then one or more non-special characters (alias)
-export const wikilinkRegex = new RegExp(
-  /!?\[\[([^\[\]\|\#\\]+)?(#+[^\[\]\|\#\\]+)?(\\?\|[^\[\]\#]+)?\]\]/g,
-)
-
-// ^\|([^\n])+\|\n(\|) -> matches the header row
-// ( ?:?-{3,}:? ?\|)+  -> matches the header row separator
-// (\|([^\n])+\|\n)+   -> matches the body rows
-export const tableRegex = new RegExp(/^\|([^\n])+\|\n(\|)( ?:?-{3,}:? ?\|)+\n(\|([^\n])+\|\n?)+/gm)
-
-// matches any wikilink, only used for escaping wikilinks inside tables
-export const tableWikilinkRegex = new RegExp(/(!?\[\[[^\]]*?\]\])/g)
-
-const highlightRegex = new RegExp(/==([^=]+)==/g)
-const commentRegex = new RegExp(/%%[\s\S]*?%%/g)
-// from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
-const calloutRegex = new RegExp(/^\[\!([\w-]+)\|?(.+?)?\]([+-]?)/)
-const calloutLineRegex = new RegExp(/^> *\[\!\w+\|?.*?\][+-]?.*$/gm)
-// (?:^| )              -> non-capturing group, tag should start be separated by a space or be the start of the line
-// #(...)               -> capturing group, tag itself must start with #
-// (?:[-_\p{L}\d\p{Z}])+       -> non-capturing group, non-empty string of (Unicode-aware) alpha-numeric characters and symbols, hyphens and/or underscores
-// (?:\/[-_\p{L}\d\p{Z}]+)*)   -> non-capturing group, matches an arbitrary number of tag strings separated by "/"
-const tagRegex = new RegExp(
-  /(?:^| )#((?:[-_\p{L}\p{Emoji}\p{M}\d])+(?:\/[-_\p{L}\p{Emoji}\p{M}\d]+)*)/gu,
-)
-const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/g)
-const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
-const ytPlaylistLinkRegex = /[?&]list=([^#?&]*)/
-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>> = (userOpts) => {
-  const opts = { ...defaultOptions, ...userOpts }
-
-  const mdastToHtml = (ast: PhrasingContent | Paragraph) => {
-    const hast = toHast(ast, { allowDangerousHtml: true })!
-    return toHtml(hast, { allowDangerousHtml: true })
-  }
-
-  return {
-    name: "ObsidianFlavoredMarkdown",
-    textTransform(_ctx, src) {
-      // do comments at text level
-      if (opts.comments) {
-        if (src instanceof Buffer) {
-          src = src.toString()
-        }
-
-        src = src.replace(commentRegex, "")
-      }
-
-      // pre-transform blockquotes
-      if (opts.callouts) {
-        if (src instanceof Buffer) {
-          src = src.toString()
-        }
-
-        src = src.replace(calloutLineRegex, (value) => {
-          // force newline after title of callout
-          return value + "\n> "
-        })
-      }
-
-      // pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex)
-      if (opts.wikilinks) {
-        if (src instanceof Buffer) {
-          src = src.toString()
-        }
-
-        // replace all wikilinks inside a table first
-        src = src.replace(tableRegex, (value) => {
-          // escape all aliases and headers in wikilinks inside a table
-          return value.replace(tableWikilinkRegex, (_value, raw) => {
-            // const [raw]: (string | undefined)[] = capture
-            let escaped = raw ?? ""
-            escaped = escaped.replace("#", "\\#")
-            // escape pipe characters if they are not already escaped
-            escaped = escaped.replace(/((^|[^\\])(\\\\)*)\|/g, "$1\\|")
-
-            return escaped
-          })
-        })
-
-        // replace all other wikilinks
-        src = src.replace(wikilinkRegex, (value, ...capture) => {
-          const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture
-
-          const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
-          const blockRef = Boolean(rawHeader?.match(/^#?\^/)) ? "^" : ""
-          const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
-          const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
-          const embedDisplay = value.startsWith("!") ? "!" : ""
-
-          if (rawFp?.match(externalLinkRegex)) {
-            return `${embedDisplay}[${displayAlias.replace(/^\|/, "")}](${rawFp})`
-          }
-
-          return `${embedDisplay}[[${fp}${displayAnchor}${displayAlias}]]`
-        })
-      }
-
-      return src
-    },
-    markdownPlugins(_ctx) {
-      const plugins: PluggableList = []
-
-      // regex replacements
-      plugins.push(() => {
-        return (tree: Root, file) => {
-          const replacements: [RegExp, string | ReplaceFunction][] = []
-          const base = pathToRoot(file.data.slug!)
-
-          if (opts.wikilinks) {
-            replacements.push([
-              wikilinkRegex,
-              (value: string, ...capture: string[]) => {
-                let [rawFp, rawHeader, rawAlias] = capture
-                const fp = rawFp?.trim() ?? ""
-                const anchor = rawHeader?.trim() ?? ""
-                const alias = rawAlias?.slice(1).trim()
-
-                // embed cases
-                if (value.startsWith("!")) {
-                  const ext: string = path.extname(fp).toLowerCase()
-                  const url = slugifyFilePath(fp as FilePath)
-                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
-                    const match = wikilinkImageEmbedRegex.exec(alias ?? "")
-                    const alt = match?.groups?.alt ?? ""
-                    const width = match?.groups?.width ?? "auto"
-                    const height = match?.groups?.height ?? "auto"
-                    return {
-                      type: "image",
-                      url,
-                      data: {
-                        hProperties: {
-                          width,
-                          height,
-                          alt,
-                        },
-                      },
-                    }
-                  } else if ([".mp4", ".webm", ".ogv", ".mov", ".mkv"].includes(ext)) {
-                    return {
-                      type: "html",
-                      value: `<video src="${url}" controls></video>`,
-                    }
-                  } else if (
-                    [".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext)
-                  ) {
-                    return {
-                      type: "html",
-                      value: `<audio src="${url}" controls></audio>`,
-                    }
-                  } else if ([".pdf"].includes(ext)) {
-                    return {
-                      type: "html",
-                      value: `<iframe src="${url}" class="pdf"></iframe>`,
-                    }
-                  } else {
-                    const block = anchor
-                    return {
-                      type: "html",
-                      data: { hProperties: { transclude: true } },
-                      value: `<blockquote class="transclude" data-url="${url}" data-block="${block}" data-embed-alias="${alias}"><a href="${
-                        url + anchor
-                      }" class="transclude-inner">Transclude of ${url}${block}</a></blockquote>`,
-                    }
-                  }
-
-                  // otherwise, fall through to regular link
-                }
-
-                // internal link
-                const url = fp + anchor
-                return {
-                  type: "link",
-                  url,
-                  children: [
-                    {
-                      type: "text",
-                      value: alias ?? fp,
-                    },
-                  ],
-                }
-              },
-            ])
-          }
-
-          if (opts.highlight) {
-            replacements.push([
-              highlightRegex,
-              (_value: string, ...capture: string[]) => {
-                const [inner] = capture
-                return {
-                  type: "html",
-                  value: `<span class="text-highlight">${inner}</span>`,
-                }
-              },
-            ])
-          }
-
-          if (opts.parseArrows) {
-            replacements.push([
-              arrowRegex,
-              (value: string, ..._capture: string[]) => {
-                const maybeArrow = arrowMapping[value]
-                if (maybeArrow === undefined) return SKIP
-                return {
-                  type: "html",
-                  value: `<span>${maybeArrow}</span>`,
-                }
-              },
-            ])
-          }
-
-          if (opts.parseTags) {
-            replacements.push([
-              tagRegex,
-              (_value: string, tag: string) => {
-                // Check if the tag only includes numbers and slashes
-                if (/^[\/\d]+$/.test(tag)) {
-                  return false
-                }
-
-                tag = slugTag(tag)
-                if (file.data.frontmatter) {
-                  const noteTags = file.data.frontmatter.tags ?? []
-                  file.data.frontmatter.tags = [...new Set([...noteTags, tag])]
-                }
-
-                return {
-                  type: "link",
-                  url: base + `/tags/${tag}`,
-                  data: {
-                    hProperties: {
-                      className: ["tag-link"],
-                    },
-                  },
-                  children: [
-                    {
-                      type: "text",
-                      value: tag,
-                    },
-                  ],
-                }
-              },
-            ])
-          }
-
-          if (opts.enableInHtmlEmbed) {
-            visit(tree, "html", (node: Html) => {
-              for (const [regex, replace] of replacements) {
-                if (typeof replace === "string") {
-                  node.value = node.value.replace(regex, replace)
-                } else {
-                  node.value = node.value.replace(regex, (substring: string, ...args) => {
-                    const replaceValue = replace(substring, ...args)
-                    if (typeof replaceValue === "string") {
-                      return replaceValue
-                    } else if (Array.isArray(replaceValue)) {
-                      return replaceValue.map(mdastToHtml).join("")
-                    } else if (typeof replaceValue === "object" && replaceValue !== null) {
-                      return mdastToHtml(replaceValue)
-                    } else {
-                      return substring
-                    }
-                  })
-                }
-              }
-            })
-          }
-          mdastFindReplace(tree, replacements)
-        }
-      })
-
-      if (opts.enableVideoEmbed) {
-        plugins.push(() => {
-          return (tree: Root, _file) => {
-            visit(tree, "image", (node, index, parent) => {
-              if (parent && index != undefined && videoExtensionRegex.test(node.url)) {
-                const newNode: Html = {
-                  type: "html",
-                  value: `<video controls src="${node.url}"></video>`,
-                }
-
-                parent.children.splice(index, 1, newNode)
-                return SKIP
-              }
-            })
-          }
-        })
-      }
-
-      if (opts.callouts) {
-        plugins.push(() => {
-          return (tree: Root, _file) => {
-            visit(tree, "blockquote", (node) => {
-              if (node.children.length === 0) {
-                return
-              }
-
-              // find first line and callout content
-              const [firstChild, ...calloutContent] = node.children
-              if (firstChild.type !== "paragraph" || firstChild.children[0]?.type !== "text") {
-                return
-              }
-
-              const text = firstChild.children[0].value
-              const restOfTitle = firstChild.children.slice(1)
-              const [firstLine, ...remainingLines] = text.split("\n")
-              const remainingText = remainingLines.join("\n")
-
-              const match = firstLine.match(calloutRegex)
-              if (match && match.input) {
-                const [calloutDirective, typeString, calloutMetaData, collapseChar] = match
-                const calloutType = canonicalizeCallout(typeString.toLowerCase())
-                const collapse = collapseChar === "+" || collapseChar === "-"
-                const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
-                const titleContent = match.input.slice(calloutDirective.length).trim()
-                const useDefaultTitle = titleContent === "" && restOfTitle.length === 0
-                const titleNode: Paragraph = {
-                  type: "paragraph",
-                  children: [
-                    {
-                      type: "text",
-                      value: useDefaultTitle
-                        ? capitalize(typeString).replace(/-/g, " ")
-                        : titleContent + " ",
-                    },
-                    ...restOfTitle,
-                  ],
-                }
-                const title = mdastToHtml(titleNode)
-
-                const toggleIcon = `<div class="fold-callout-icon"></div>`
-
-                const titleHtml: Html = {
-                  type: "html",
-                  value: `<div
-                  class="callout-title"
-                >
-                  <div class="callout-icon"></div>
-                  <div class="callout-title-inner">${title}</div>
-                  ${collapse ? toggleIcon : ""}
-                </div>`,
-                }
-
-                const blockquoteContent: (BlockContent | DefinitionContent)[] = [titleHtml]
-                if (remainingText.length > 0) {
-                  blockquoteContent.push({
-                    type: "paragraph",
-                    children: [
-                      {
-                        type: "text",
-                        value: remainingText,
-                      },
-                    ],
-                  })
-                }
-
-                // replace first line of blockquote with title and rest of the paragraph text
-                node.children.splice(0, 1, ...blockquoteContent)
-
-                const classNames = ["callout", calloutType]
-                if (collapse) {
-                  classNames.push("is-collapsible")
-                }
-                if (defaultState === "collapsed") {
-                  classNames.push("is-collapsed")
-                }
-
-                // add properties to base blockquote
-                node.data = {
-                  hProperties: {
-                    ...(node.data?.hProperties ?? {}),
-                    className: classNames.join(" "),
-                    "data-callout": calloutType,
-                    "data-callout-fold": collapse,
-                    "data-callout-metadata": calloutMetaData,
-                  },
-                }
-
-                // Add callout-content class to callout body if it has one.
-                if (calloutContent.length > 0) {
-                  const contentData: BlockContent | DefinitionContent = {
-                    data: {
-                      hProperties: {
-                        className: "callout-content",
-                      },
-                      hName: "div",
-                    },
-                    type: "blockquote",
-                    children: [...calloutContent],
-                  }
-                  node.children = [node.children[0], contentData]
-                }
-              }
-            })
-          }
-        })
-      }
-
-      if (opts.mermaid) {
-        plugins.push(() => {
-          return (tree: Root, _file) => {
-            visit(tree, "code", (node: Code) => {
-              if (node.lang === "mermaid") {
-                node.data = {
-                  hProperties: {
-                    className: ["mermaid"],
-                  },
-                }
-              }
-            })
-          }
-        })
-      }
-
-      return plugins
-    },
-    htmlPlugins() {
-      const plugins: PluggableList = [rehypeRaw]
-
-      if (opts.parseBlockReferences) {
-        plugins.push(() => {
-          const inlineTagTypes = new Set(["p", "li"])
-          const blockTagTypes = new Set(["blockquote"])
-          return (tree: HtmlRoot, file) => {
-            file.data.blocks = {}
-
-            visit(tree, "element", (node, index, parent) => {
-              if (blockTagTypes.has(node.tagName)) {
-                const nextChild = parent?.children.at(index! + 2) as Element
-                if (nextChild && nextChild.tagName === "p") {
-                  const text = nextChild.children.at(0) as Literal
-                  if (text && text.value && text.type === "text") {
-                    const matches = text.value.match(blockReferenceRegex)
-                    if (matches && matches.length >= 1) {
-                      parent!.children.splice(index! + 2, 1)
-                      const block = matches[0].slice(1)
-
-                      if (!Object.keys(file.data.blocks!).includes(block)) {
-                        node.properties = {
-                          ...node.properties,
-                          id: block,
-                        }
-                        file.data.blocks![block] = node
-                      }
-                    }
-                  }
-                }
-              } else if (inlineTagTypes.has(node.tagName)) {
-                const last = node.children.at(-1) as Literal
-                if (last && last.value && typeof last.value === "string") {
-                  const matches = last.value.match(blockReferenceRegex)
-                  if (matches && matches.length >= 1) {
-                    last.value = last.value.slice(0, -matches[0].length)
-                    const block = matches[0].slice(1)
-
-                    if (last.value === "") {
-                      // this is an inline block ref but the actual block
-                      // is the previous element above it
-                      let idx = (index ?? 1) - 1
-                      while (idx >= 0) {
-                        const element = parent?.children.at(idx)
-                        if (!element) break
-                        if (element.type !== "element") {
-                          idx -= 1
-                        } else {
-                          if (!Object.keys(file.data.blocks!).includes(block)) {
-                            element.properties = {
-                              ...element.properties,
-                              id: block,
-                            }
-                            file.data.blocks![block] = element
-                          }
-                          return
-                        }
-                      }
-                    } else {
-                      // normal paragraph transclude
-                      if (!Object.keys(file.data.blocks!).includes(block)) {
-                        node.properties = {
-                          ...node.properties,
-                          id: block,
-                        }
-                        file.data.blocks![block] = node
-                      }
-                    }
-                  }
-                }
-              }
-            })
-
-            file.data.htmlAst = tree
-          }
-        })
-      }
-
-      if (opts.enableYouTubeEmbed) {
-        plugins.push(() => {
-          return (tree: HtmlRoot) => {
-            visit(tree, "element", (node) => {
-              if (node.tagName === "img" && typeof node.properties.src === "string") {
-                const match = node.properties.src.match(ytLinkRegex)
-                const videoId = match && match[2].length == 11 ? match[2] : null
-                const playlistId = node.properties.src.match(ytPlaylistLinkRegex)?.[1]
-                if (videoId) {
-                  // YouTube video (with optional playlist)
-                  node.tagName = "iframe"
-                  node.properties = {
-                    class: "external-embed youtube",
-                    allow: "fullscreen",
-                    frameborder: 0,
-                    width: "600px",
-                    src: playlistId
-                      ? `https://www.youtube.com/embed/${videoId}?list=${playlistId}`
-                      : `https://www.youtube.com/embed/${videoId}`,
-                  }
-                } else if (playlistId) {
-                  // YouTube playlist only.
-                  node.tagName = "iframe"
-                  node.properties = {
-                    class: "external-embed youtube",
-                    allow: "fullscreen",
-                    frameborder: 0,
-                    width: "600px",
-                    src: `https://www.youtube.com/embed/videoseries?list=${playlistId}`,
-                  }
-                }
-              }
-            })
-          }
-        })
-      }
-
-      if (opts.enableCheckbox) {
-        plugins.push(() => {
-          return (tree: HtmlRoot, _file) => {
-            visit(tree, "element", (node) => {
-              if (node.tagName === "input" && node.properties.type === "checkbox") {
-                const isChecked = node.properties?.checked ?? false
-                node.properties = {
-                  type: "checkbox",
-                  disabled: false,
-                  checked: isChecked,
-                  class: "checkbox-toggle",
-                }
-              }
-            })
-          }
-        })
-      }
-
-      return plugins
-    },
-    externalResources() {
-      const js: JSResource[] = []
-
-      if (opts.enableCheckbox) {
-        js.push({
-          script: checkboxScript,
-          loadTime: "afterDOMReady",
-          contentType: "inline",
-        })
-      }
-
-      if (opts.callouts) {
-        js.push({
-          script: calloutScript,
-          loadTime: "afterDOMReady",
-          contentType: "inline",
-        })
-      }
-
-      if (opts.mermaid) {
-        js.push({
-          script: `
-          let mermaidImport = undefined
-          document.addEventListener('nav', async () => {
-            if (document.querySelector("code.mermaid")) {
-              mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs')
-              const mermaid = mermaidImport.default
-              const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
-              mermaid.initialize({
-                startOnLoad: false,
-                securityLevel: 'loose',
-                theme: darkMode ? 'dark' : 'default'
-              })
-
-              await mermaid.run({
-                querySelector: '.mermaid'
-              })
-            }
-          });
-          `,
-          loadTime: "afterDOMReady",
-          moduleType: "module",
-          contentType: "inline",
-        })
-      }
-
-      return { js }
-    },
-  }
-}
-
-declare module "vfile" {
-  interface DataMap {
-    blocks: Record<string, Element>
-    htmlAst: HtmlRoot
-  }
-}

quartz/plugins/transformers/oxhugofm.ts

@@ -1,106 +0,0 @@
-import { QuartzTransformerPlugin } from "../types"
-
-export interface Options {
-  /** Replace {{ relref }} with quartz wikilinks []() */
-  wikilinks: boolean
-  /** Remove pre-defined anchor (see https://ox-hugo.scripter.co/doc/anchors/) */
-  removePredefinedAnchor: boolean
-  /** Remove hugo shortcode syntax */
-  removeHugoShortcode: boolean
-  /** Replace <figure/> with ![]() */
-  replaceFigureWithMdImg: boolean
-
-  /** Replace org latex fragments with $ and $$ */
-  replaceOrgLatex: boolean
-}
-
-const defaultOptions: Options = {
-  wikilinks: true,
-  removePredefinedAnchor: true,
-  removeHugoShortcode: true,
-  replaceFigureWithMdImg: true,
-  replaceOrgLatex: true,
-}
-
-const relrefRegex = new RegExp(/\[([^\]]+)\]\(\{\{< relref "([^"]+)" >\}\}\)/, "g")
-const predefinedHeadingIdRegex = new RegExp(/(.*) {#(?:.*)}/, "g")
-const hugoShortcodeRegex = new RegExp(/{{(.*)}}/, "g")
-const figureTagRegex = new RegExp(/< ?figure src="(.*)" ?>/, "g")
-// \\\\\( -> matches \\(
-// (.+?) -> Lazy match for capturing the equation
-// \\\\\) -> matches \\)
-const inlineLatexRegex = new RegExp(/\\\\\((.+?)\\\\\)/, "g")
-// (?:\\begin{equation}|\\\\\(|\\\\\[) -> start of equation
-// ([\s\S]*?) -> Matches the block equation
-// (?:\\\\\]|\\\\\)|\\end{equation}) -> end of equation
-const blockLatexRegex = new RegExp(
-  /(?:\\begin{equation}|\\\\\(|\\\\\[)([\s\S]*?)(?:\\\\\]|\\\\\)|\\end{equation})/,
-  "g",
-)
-// \$\$[\s\S]*?\$\$ -> Matches block equations
-// \$.*?\$ -> Matches inline equations
-const quartzLatexRegex = new RegExp(/\$\$[\s\S]*?\$\$|\$.*?\$/, "g")
-
-/**
- * ox-hugo is an org exporter backend that exports org files to hugo-compatible
- * markdown in an opinionated way. This plugin adds some tweaks to the generated
- * markdown to make it compatible with quartz but the list of changes applied it
- * is not exhaustive.
- * */
-export const OxHugoFlavouredMarkdown: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
-  const opts = { ...defaultOptions, ...userOpts }
-  return {
-    name: "OxHugoFlavouredMarkdown",
-    textTransform(_ctx, src) {
-      if (opts.wikilinks) {
-        src = src.toString()
-        src = src.replaceAll(relrefRegex, (value, ...capture) => {
-          const [text, link] = capture
-          return `[${text}](${link})`
-        })
-      }
-
-      if (opts.removePredefinedAnchor) {
-        src = src.toString()
-        src = src.replaceAll(predefinedHeadingIdRegex, (value, ...capture) => {
-          const [headingText] = capture
-          return headingText
-        })
-      }
-
-      if (opts.removeHugoShortcode) {
-        src = src.toString()
-        src = src.replaceAll(hugoShortcodeRegex, (value, ...capture) => {
-          const [scContent] = capture
-          return scContent
-        })
-      }
-
-      if (opts.replaceFigureWithMdImg) {
-        src = src.toString()
-        src = src.replaceAll(figureTagRegex, (value, ...capture) => {
-          const [src] = capture
-          return `![](${src})`
-        })
-      }
-
-      if (opts.replaceOrgLatex) {
-        src = src.toString()
-        src = src.replaceAll(inlineLatexRegex, (value, ...capture) => {
-          const [eqn] = capture
-          return `$${eqn}$`
-        })
-        src = src.replaceAll(blockLatexRegex, (value, ...capture) => {
-          const [eqn] = capture
-          return `$$${eqn}$$`
-        })
-
-        // ox-hugo escapes _ as \_
-        src = src.replaceAll(quartzLatexRegex, (value) => {
-          return value.replaceAll("\\_", "_")
-        })
-      }
-      return src
-    },
-  }
-}

quartz/plugins/transformers/presets/commonmark.ts

@@ -0,0 +1,55 @@
+import { QuartzTransformerPlugin } from "../../types"
+import * as Text from "../text"
+import * as Markdown from "../markdown"
+import * as Html from "../html"
+import * as Resources from "../resources"
+
+// TODO: commonmark compatibility pass
+export const CommonMarkPreset: QuartzTransformerPlugin = () => {
+  return {
+    textTransformers: [
+      Text.ObsidianFlavoredMarkdownComments(),
+      Text.ObsidianFlavoredMarkdownCallouts(),
+      Text.ObsidianFlavoredMarkdownWikilinks(),
+    ],
+    markdownTransformers: [
+      Markdown.FrontMatter(),
+      Markdown.CreatedModifiedDate({
+        priority: ["frontmatter", "filesystem"],
+      }),
+      // TODO: regular markdown links
+      //Markdown.ObsidianFlavoredMarkdownWikilinks(),
+      Markdown.ObsidianFlavoredMarkdownHighlight(),
+      Markdown.ObsidianFlavoredMarkdownArrow(),
+      Markdown.ObsidianFlavoredMarkdownTags(),
+      Markdown.ObsidianFlavoredMarkdownVideoEmbed(),
+      Markdown.ObsidianFlavoredMarkdownCallouts(),
+      Markdown.ObsidianFlavoredMarkdownMermaid(),
+      Markdown.GitHubFlavoredMarkdownRemark(),
+      Markdown.TableOfContents(),
+      Markdown.Latex(),
+    ],
+    htmlTransformers: [
+      Html.SyntaxHighlighting({
+        theme: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        keepBackground: false,
+      }),
+      Html.ObsidianFlavoredMarkdownBlockReferences(),
+      Html.ObsidianFlavoredMarkdownYouTubeEmbed(),
+      Html.ObsidianFlavoredMarkdownCheckbox(),
+      Html.GitHubFlavoredMarkdownLinkHeadings(),
+      Html.CrawlLinks({ markdownLinkResolution: "shortest" }),
+      Html.Description(),
+      Html.Latex({ renderEngine: "katex" }),
+    ],
+    externalResources: [
+      Resources.ObsidianFlavoredMarkdownCheckbox(),
+      Resources.ObsidianFlavoredMarkdownCallouts(),
+      Resources.ObsidianFlavoredMarkdownMermaid(),
+      Resources.Latex({ renderEngine: "katex" }),
+    ],
+  }
+}

quartz/plugins/transformers/presets/default.ts

@@ -0,0 +1,55 @@
+import { QuartzTransformerPlugin } from "../../types"
+import * as Text from "../text"
+import * as Markdown from "../markdown"
+import * as Html from "../html"
+import * as Resources from "../resources"
+
+export const DefaultPreset: QuartzTransformerPlugin = () => {
+  return {
+    textTransformers: [
+      Text.HtmlComments(),
+      Text.ObsidianFlavoredMarkdownCallouts(),
+      Text.ObsidianFlavoredMarkdownWikilinks(),
+    ],
+    markdownTransformers: [
+      Markdown.FrontMatter(),
+      Markdown.CreatedModifiedDate({
+        priority: ["frontmatter", "filesystem"],
+      }),
+      // TODO: wikilink fixes
+      Markdown.ObsidianFlavoredMarkdownWikilinks(),
+      Markdown.ObsidianFlavoredMarkdownHighlight(),
+      Markdown.ObsidianFlavoredMarkdownArrow(),
+      Markdown.ObsidianFlavoredMarkdownTags(),
+      Markdown.ObsidianFlavoredMarkdownVideoEmbed(),
+      // TODO: callout fixes
+      Markdown.ObsidianFlavoredMarkdownCallouts(),
+      Markdown.ObsidianFlavoredMarkdownMermaid(),
+      Markdown.GitHubFlavoredMarkdownRemark(),
+      Markdown.TableOfContents(),
+      Markdown.Latex(),
+    ],
+    htmlTransformers: [
+      Html.SyntaxHighlighting({
+        theme: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        keepBackground: false,
+      }),
+      Html.ObsidianFlavoredMarkdownBlockReferences(),
+      Html.ObsidianFlavoredMarkdownYouTubeEmbed(),
+      Html.ObsidianFlavoredMarkdownCheckbox(),
+      Html.GitHubFlavoredMarkdownLinkHeadings(),
+      Html.CrawlLinks({ markdownLinkResolution: "shortest" }),
+      Html.Description(),
+      Html.Latex({ renderEngine: "katex" }),
+    ],
+    externalResources: [
+      Resources.ObsidianFlavoredMarkdownCheckbox(),
+      Resources.ObsidianFlavoredMarkdownCallouts(),
+      Resources.ObsidianFlavoredMarkdownMermaid(),
+      Resources.Latex({ renderEngine: "katex" }),
+    ],
+  }
+}

quartz/plugins/transformers/presets/index.ts

@@ -0,0 +1,3 @@
+export { CommonMarkPreset } from "./commonmark"
+export { DefaultPreset } from "./default"
+export { ObsidianPreset } from "./obsidian"

quartz/plugins/transformers/presets/obsidian.ts

@@ -0,0 +1,52 @@
+import { QuartzTransformerPlugin } from "../../types"
+import * as Text from "../text"
+import * as Markdown from "../markdown"
+import * as Html from "../html"
+import * as Resources from "../resources"
+
+export const ObsidianPreset: QuartzTransformerPlugin = () => {
+  return {
+    textTransformers: [
+      Text.HtmlComments(),
+      Text.ObsidianFlavoredMarkdownComments(),
+      Text.ObsidianFlavoredMarkdownCallouts(),
+      Text.ObsidianFlavoredMarkdownWikilinks(),
+    ],
+    markdownTransformers: [
+      Markdown.FrontMatter(),
+      Markdown.CreatedModifiedDate({
+        priority: ["frontmatter", "filesystem"],
+      }),
+      Markdown.ObsidianFlavoredMarkdownWikilinks(),
+      Markdown.ObsidianFlavoredMarkdownHighlight(),
+      Markdown.ObsidianFlavoredMarkdownArrow(),
+      Markdown.ObsidianFlavoredMarkdownTags(),
+      Markdown.ObsidianFlavoredMarkdownVideoEmbed(),
+      Markdown.ObsidianFlavoredMarkdownCallouts(),
+      Markdown.ObsidianFlavoredMarkdownMermaid(),
+      Markdown.TableOfContents(),
+      Markdown.Latex(),
+    ],
+    htmlTransformers: [
+      Html.SyntaxHighlighting({
+        theme: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        keepBackground: false,
+      }),
+      Html.ObsidianFlavoredMarkdownBlockReferences(),
+      Html.ObsidianFlavoredMarkdownYouTubeEmbed(),
+      Html.ObsidianFlavoredMarkdownCheckbox(),
+      Html.CrawlLinks({ markdownLinkResolution: "shortest" }),
+      Html.Description(),
+      Html.Latex({ renderEngine: "katex" }),
+    ],
+    externalResources: [
+      Resources.ObsidianFlavoredMarkdownCheckbox(),
+      Resources.ObsidianFlavoredMarkdownCallouts(),
+      Resources.ObsidianFlavoredMarkdownMermaid(),
+      Resources.Latex({ renderEngine: "katex" }),
+    ],
+  }
+}

quartz/plugins/transformers/resources/index.ts

@@ -0,0 +1,4 @@
+export { Latex } from "./latex"
+export { ObsidianFlavoredMarkdownCallouts } from "./ofmCallouts"
+export { ObsidianFlavoredMarkdownCheckbox } from "./ofmCheckbox"
+export { ObsidianFlavoredMarkdownMermaid } from "./ofmMermaid"

quartz/plugins/transformers/resources/latex.ts

@@ -1,33 +1,14 @@
-import remarkMath from "remark-math"
+import { ExternalResourcePlugin } from "../../types"
-import rehypeKatex from "rehype-katex"
-import rehypeMathjax from "rehype-mathjax/svg"
-import { QuartzTransformerPlugin } from "../types"
 
 interface Options {
   renderEngine: "katex" | "mathjax"
-  customMacros: MacroType
 }
 
-interface MacroType {
+export const Latex: ExternalResourcePlugin<Partial<Options>> = (opts) => {
-  [key: string]: string
-}
-
-export const Latex: QuartzTransformerPlugin<Partial<Options>> = (opts) => {
   const engine = opts?.renderEngine ?? "katex"
-  const macros = opts?.customMacros ?? {}
   return {
     name: "Latex",
-    markdownPlugins() {
+    transformation() {
-      return [remarkMath]
-    },
-    htmlPlugins() {
-      if (engine === "katex") {
-        return [[rehypeKatex, { output: "html", macros }]]
-      } else {
-        return [[rehypeMathjax, { macros }]]
-      }
-    },
-    externalResources() {
       if (engine === "katex") {
         return {
           css: [

quartz/plugins/transformers/resources/ofmCallouts.ts

@@ -0,0 +1,21 @@
+import { ExternalResourcePlugin } from "../../types"
+import { JSResource } from "../../../util/resources"
+// @ts-ignore
+import calloutScript from "../../../components/scripts/callout.inline.ts"
+
+export const ObsidianFlavoredMarkdownCallouts: ExternalResourcePlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownCallouts",
+    transformation() {
+      const js: JSResource[] = []
+
+      js.push({
+        script: calloutScript,
+        loadTime: "afterDOMReady",
+        contentType: "inline",
+      })
+
+      return { js }
+    },
+  }
+}

quartz/plugins/transformers/resources/ofmCheckbox.ts

@@ -0,0 +1,21 @@
+import { ExternalResourcePlugin } from "../../types"
+import { JSResource } from "../../../util/resources"
+// @ts-ignore
+import checkboxScript from "../../../components/scripts/checkbox.inline.ts"
+
+export const ObsidianFlavoredMarkdownCheckbox: ExternalResourcePlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownCheckbox",
+    transformation() {
+      const js: JSResource[] = []
+
+      js.push({
+        script: checkboxScript,
+        loadTime: "afterDOMReady",
+        contentType: "inline",
+      })
+
+      return { js }
+    },
+  }
+}

quartz/plugins/transformers/resources/ofmMermaid.ts

@@ -0,0 +1,38 @@
+import { ExternalResourcePlugin } from "../../types"
+import { JSResource } from "../../../util/resources"
+
+export const ObsidianFlavoredMarkdownMermaid: ExternalResourcePlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownMermaid",
+    transformation() {
+      const js: JSResource[] = []
+
+      js.push({
+        script: `
+          let mermaidImport = undefined
+          document.addEventListener('nav', async () => {
+            if (document.querySelector("code.mermaid")) {
+              mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs')
+              const mermaid = mermaidImport.default
+              const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
+              mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: 'loose',
+                theme: darkMode ? 'dark' : 'default'
+              })
+
+              await mermaid.run({
+                querySelector: '.mermaid'
+              })
+            }
+          });
+          `,
+        loadTime: "afterDOMReady",
+        moduleType: "module",
+        contentType: "inline",
+      })
+
+      return { js }
+    },
+  }
+}

quartz/plugins/transformers/text/htmlComments.ts

@@ -0,0 +1,28 @@
+import { TextTransformerPlugin } from "../../types"
+
+const commentRegex = new RegExp(/<!--.*?-->/gms)
+const codeBlockRegex = new RegExp(/(```.*?```)/gms)
+
+export const HtmlComments: TextTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownComments",
+    transformation(_ctx, src) {
+      // do comments at text level
+      if (src instanceof Buffer) {
+        src = src.toString()
+      } // capture all codeblocks before parsing comments
+      const codeBlocks = Array.from(src.matchAll(codeBlockRegex), (x) => x[1])
+
+      src = src.replaceAll(codeBlockRegex, "###codeblockplaceholder###")
+
+      src = src.replaceAll(commentRegex, "")
+
+      // Restore codeblocks
+      for (const codeblock of codeBlocks) {
+        src = src.replace("###codeblockplaceholder###", codeblock)
+      }
+
+      return src
+    },
+  }
+}

quartz/plugins/transformers/text/index.ts

@@ -0,0 +1,9 @@
+export { HtmlComments } from "./htmlComments"
+export { ObsidianFlavoredMarkdownCallouts } from "./ofmCallouts"
+export { ObsidianFlavoredMarkdownComments } from "./ofmComments"
+export { ObsidianFlavoredMarkdownWikilinks } from "./ofmWikilinks"
+export { OxHugoFlavouredMarkdownPredefinedAnchor } from "./oxhugofmRemovePredefinedAnchor"
+export { OxHugoFlavouredMarkdownRemoveHugoShortcode } from "./oxhugofmRemoveHugoShortcode"
+export { OxHugoFlavouredMarkdownReplaceFigure } from "./oxhugofmReplaceFigure"
+export { OxHugoFlavouredMarkdownReplaceOrgLatex } from "./oxhugofmReplaceOrgLatex"
+export { OxHugoFlavouredMarkdownWikilinks } from "./oxhugofmWikilinks"

quartz/plugins/transformers/text/ofmCallouts.ts

@@ -0,0 +1,22 @@
+import { TextTransformerPlugin } from "../../types"
+
+const calloutLineRegex = new RegExp(/^> *\[\!\w+\|?.*?\][+-]?.*$/gm)
+
+export const ObsidianFlavoredMarkdownCallouts: TextTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownCallouts",
+    transformation(_ctx, src) {
+      // pre-transform blockquotes
+      if (src instanceof Buffer) {
+        src = src.toString()
+      }
+
+      src = src.replace(calloutLineRegex, (value) => {
+        // force newline after title of callout
+        return value + "\n> "
+      })
+
+      return src
+    },
+  }
+}

quartz/plugins/transformers/text/ofmComments.ts

@@ -0,0 +1,30 @@
+import { TextTransformerPlugin } from "../../types"
+
+const commentRegex = new RegExp(/%%.*?%%/gms)
+const codeBlockRegex = new RegExp(/(```.*?```)/gms)
+
+export const ObsidianFlavoredMarkdownComments: TextTransformerPlugin = () => {
+  return {
+    name: "ObsidianFlavoredMarkdownComments",
+    transformation(_ctx, src) {
+      // do comments at text level
+      if (src instanceof Buffer) {
+        src = src.toString()
+      }
+
+      // capture all codeblocks before parsing comments
+      const codeBlocks = Array.from(src.matchAll(codeBlockRegex), (x) => x[1].toString())
+
+      src = src.replaceAll(codeBlockRegex, "###codeblockplaceholder###")
+
+      src = src.replaceAll(commentRegex, "")
+
+      // Restore codeblock
+      for (const codeblock of codeBlocks) {
+        src = src.replace("###codeblockplaceholder###", codeblock)
+      }
+
+      return src
+    },
+  }
+}

quartz/plugins/transformers/text/ofmWikilinks.ts

@@ -0,0 +1,84 @@
+import { TextTransformerPlugin } from "../../types"
+import { Paragraph } from "mdast"
+import { Element, Root as HtmlRoot } from "hast"
+import { splitAnchor } from "../../../util/path"
+import { toHast } from "mdast-util-to-hast"
+import { toHtml } from "hast-util-to-html"
+import { PhrasingContent } from "mdast-util-find-and-replace/lib"
+
+export const externalLinkRegex = /^https?:\/\//i
+
+// !?                 -> optional embedding
+// \[\[               -> open brace
+// ([^\[\]\|\#]+)     -> one or more non-special characters ([,],|, or #) (name)
+// (#[^\[\]\|\#]+)?   -> # then one or more non-special characters (heading link)
+// (\\?\|[^\[\]\#]+)? -> optional escape \ then | then one or more non-special characters (alias)
+export const wikilinkRegex = new RegExp(
+  /!?\[\[([^\[\]\|\#\\]+)?(#+[^\[\]\|\#\\]+)?(\\?\|[^\[\]\#]+)?\]\]/g,
+)
+
+// ^\|([^\n])+\|\n(\|) -> matches the header row
+// ( ?:?-{3,}:? ?\|)+  -> matches the header row separator
+// (\|([^\n])+\|\n)+   -> matches the body rows
+export const tableRegex = new RegExp(/^\|([^\n])+\|\n(\|)( ?:?-{3,}:? ?\|)+\n(\|([^\n])+\|\n?)+/gm)
+
+// matches any wikilink, only used for escaping wikilinks inside tables
+export const tableWikilinkRegex = new RegExp(/(!?\[\[[^\]]*?\]\])/g)
+
+export const ObsidianFlavoredMarkdownWikilinks: TextTransformerPlugin = () => {
+  const mdastToHtml = (ast: PhrasingContent | Paragraph) => {
+    const hast = toHast(ast, { allowDangerousHtml: true })!
+    return toHtml(hast, { allowDangerousHtml: true })
+  }
+
+  return {
+    name: "ObsidianFlavoredMarkdownWikilinks",
+    transformation(_ctx, src) {
+      // pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex)
+
+      if (src instanceof Buffer) {
+        src = src.toString()
+      }
+
+      // replace all wikilinks inside a table first
+      src = src.replace(tableRegex, (value) => {
+        // escape all aliases and headers in wikilinks inside a table
+        return value.replace(tableWikilinkRegex, (_value, raw) => {
+          // const [raw]: (string | undefined)[] = capture
+          let escaped = raw ?? ""
+          escaped = escaped.replace("#", "\\#")
+          // escape pipe characters if they are not already escaped
+          escaped = escaped.replace(/((^|[^\\])(\\\\)*)\|/g, "$1\\|")
+
+          return escaped
+        })
+      })
+
+      // replace all other wikilinks
+      src = src.replace(wikilinkRegex, (value, ...capture) => {
+        const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture
+
+        const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
+        const blockRef = Boolean(rawHeader?.match(/^#?\^/)) ? "^" : ""
+        const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
+        const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
+        const embedDisplay = value.startsWith("!") ? "!" : ""
+
+        if (rawFp?.match(externalLinkRegex)) {
+          return `${embedDisplay}[${displayAlias.replace(/^\|/, "")}](${rawFp})`
+        }
+
+        return `${embedDisplay}[[${fp}${displayAnchor}${displayAlias}]]`
+      })
+
+      return src
+    },
+  }
+}
+
+declare module "vfile" {
+  interface DataMap {
+    blocks: Record<string, Element>
+    htmlAst: HtmlRoot
+  }
+}

quartz/plugins/transformers/text/oxhugofmRemoveHugoShortcode.ts

@@ -0,0 +1,24 @@
+import { TextTransformerPlugin } from "../../types"
+
+const hugoShortcodeRegex = new RegExp(/{{(.*)}}/, "g")
+
+/**
+ * ox-hugo is an org exporter backend that exports org files to hugo-compatible
+ * markdown in an opinionated way. This plugin adds some tweaks to the generated
+ * markdown to make it compatible with quartz but the list of changes applied it
+ * is not exhaustive.
+ * */
+export const OxHugoFlavouredMarkdownRemoveHugoShortcode: TextTransformerPlugin = () => {
+  return {
+    name: "OxHugoFlavouredMarkdownRemoveHugoShortcode",
+    transformation(_ctx, src) {
+      src = src.toString()
+      src = src.replaceAll(hugoShortcodeRegex, (value, ...capture) => {
+        const [scContent] = capture
+        return scContent
+      })
+
+      return src
+    },
+  }
+}

quartz/plugins/transformers/text/oxhugofmRemovePredefinedAnchor.ts

@@ -0,0 +1,24 @@
+import { TextTransformerPlugin } from "../../types"
+
+const predefinedHeadingIdRegex = new RegExp(/(.*) {#(?:.*)}/, "g")
+
+/**
+ * ox-hugo is an org exporter backend that exports org files to hugo-compatible
+ * markdown in an opinionated way. This plugin adds some tweaks to the generated
+ * markdown to make it compatible with quartz but the list of changes applied it
+ * is not exhaustive.
+ * */
+export const OxHugoFlavouredMarkdownPredefinedAnchor: TextTransformerPlugin = () => {
+  return {
+    name: "OxHugoFlavouredMarkdownPredefinedAnchor",
+    transformation(_ctx, src) {
+      src = src.toString()
+      src = src.replaceAll(predefinedHeadingIdRegex, (value, ...capture) => {
+        const [headingText] = capture
+        return headingText
+      })
+
+      return src
+    },
+  }
+}

quartz/plugins/transformers/text/oxhugofmReplaceFigure.ts

@@ -0,0 +1,24 @@
+import { TextTransformerPlugin } from "../../types"
+
+const figureTagRegex = new RegExp(/< ?figure src="(.*)" ?>/, "g")
+
+/**
+ * ox-hugo is an org exporter backend that exports org files to hugo-compatible
+ * markdown in an opinionated way. This plugin adds some tweaks to the generated
+ * markdown to make it compatible with quartz but the list of changes applied it
+ * is not exhaustive.
+ * */
+export const OxHugoFlavouredMarkdownReplaceFigure: TextTransformerPlugin = () => {
+  return {
+    name: "OxHugoFlavouredMarkdownWikilinks",
+    transformation(_ctx, src) {
+      src = src.toString()
+      src = src.replaceAll(figureTagRegex, (value, ...capture) => {
+        const [src] = capture
+        return `![](${src})`
+      })
+
+      return src
+    },
+  }
+}

quartz/plugins/transformers/text/oxhugofmReplaceOrgLatex.ts

@@ -0,0 +1,43 @@
+import { TextTransformerPlugin } from "../../types"
+
+const inlineLatexRegex = new RegExp(/\\\\\((.+?)\\\\\)/, "g")
+// (?:\\begin{equation}|\\\\\(|\\\\\[) -> start of equation
+// ([\s\S]*?) -> Matches the block equation
+// (?:\\\\\]|\\\\\)|\\end{equation}) -> end of equation
+const blockLatexRegex = new RegExp(
+  /(?:\\begin{equation}|\\\\\(|\\\\\[)([\s\S]*?)(?:\\\\\]|\\\\\)|\\end{equation})/,
+  "g",
+)
+// \$\$[\s\S]*?\$\$ -> Matches block equations
+// \$.*?\$ -> Matches inline equations
+const quartzLatexRegex = new RegExp(/\$\$[\s\S]*?\$\$|\$.*?\$/, "g")
+
+/**
+ * ox-hugo is an org exporter backend that exports org files to hugo-compatible
+ * markdown in an opinionated way. This plugin adds some tweaks to the generated
+ * markdown to make it compatible with quartz but the list of changes applied it
+ * is not exhaustive.
+ * */
+export const OxHugoFlavouredMarkdownReplaceOrgLatex: TextTransformerPlugin = () => {
+  return {
+    name: "OxHugoFlavouredMarkdownReplaceOrgLatex",
+    transformation(_ctx, src) {
+      src = src.toString()
+      src = src.replaceAll(inlineLatexRegex, (value, ...capture) => {
+        const [eqn] = capture
+        return `$${eqn}$`
+      })
+      src = src.replaceAll(blockLatexRegex, (value, ...capture) => {
+        const [eqn] = capture
+        return `$$${eqn}$$`
+      })
+
+      // ox-hugo escapes _ as \_
+      src = src.replaceAll(quartzLatexRegex, (value) => {
+        return value.replaceAll("\\_", "_")
+      })
+
+      return src
+    },
+  }
+}

quartz/plugins/transformers/text/oxhugofmWikilinks.ts

@@ -0,0 +1,24 @@
+import { TextTransformerPlugin } from "../../types"
+
+const relrefRegex = new RegExp(/\[([^\]]+)\]\(\{\{< relref "([^"]+)" >\}\}\)/, "g")
+
+/**
+ * ox-hugo is an org exporter backend that exports org files to hugo-compatible
+ * markdown in an opinionated way. This plugin adds some tweaks to the generated
+ * markdown to make it compatible with quartz but the list of changes applied it
+ * is not exhaustive.
+ * */
+export const OxHugoFlavouredMarkdownWikilinks: TextTransformerPlugin = () => {
+  return {
+    name: "OxHugoFlavouredMarkdownWikilinks",
+    transformation(_ctx, src) {
+      src = src.toString()
+      src = src.replaceAll(relrefRegex, (value, ...capture) => {
+        const [text, link] = capture
+        return `[${text}](${link})`
+      })
+
+      return src
+    },
+  }
+}

quartz/plugins/types.ts

@@ -6,22 +6,57 @@ import { FilePath } from "../util/path"
 import { BuildCtx } from "../util/ctx"
 import DepGraph from "../depgraph"
 
+type OptionType = object | undefined
 export interface PluginTypes {
-  transformers: QuartzTransformerPluginInstance[]
+  transformers: QuartzTransformerPluginInstance
   filters: QuartzFilterPluginInstance[]
   emitters: QuartzEmitterPluginInstance[]
 }
 
-type OptionType = object | undefined
+export type TextTransformerPlugin<Options extends OptionType = undefined> = (
-export type QuartzTransformerPlugin<Options extends OptionType = undefined> = (
   opts?: Options,
+) => TextTransformerPluginInstance
+export type TextTransformerPluginInstance = {
+  name: string
+  transformation: (ctx: BuildCtx, src: string | Buffer) => string | Buffer
+}
+
+export type MarkdownTransformerPlugin<Options extends OptionType = undefined> = (
+  opts?: Options,
+) => MarkdownTransformerPluginInstance
+export type MarkdownTransformerPluginInstance = {
+  name: string
+  transformation: (ctx: BuildCtx) => PluggableList
+}
+
+export type HtmlTransformerPlugin<Options extends OptionType = undefined> = (
+  opts?: Options,
+) => HtmlTransformerPluginInstance
+export type HtmlTransformerPluginInstance = {
+  name: string
+  transformation: (ctx: BuildCtx) => PluggableList
+}
+
+export type ExternalResourcePlugin<Options extends OptionType = undefined> = (
+  opts?: Options,
+) => ExternalResourcePluginInstance
+export type ExternalResourcePluginInstance = {
+  name: string
+  transformation: (ctx: BuildCtx) => Partial<StaticResources>
+}
+
+export type QuartzTransformerPlugin = (
+  textTransformers?: TextTransformerPlugin,
+  markdownTransformers?: MarkdownTransformerPlugin,
+  htmlTransformers?: HtmlTransformerPlugin,
+  externalResources?: ExternalResourcePlugin,
 ) => QuartzTransformerPluginInstance
 export type QuartzTransformerPluginInstance = {
-  name: string
+  //name: string,
-  textTransform?: (ctx: BuildCtx, src: string | Buffer) => string | Buffer
+  textTransformers: TextTransformerPluginInstance[]
-  markdownPlugins?: (ctx: BuildCtx) => PluggableList
+  markdownTransformers: MarkdownTransformerPluginInstance[]
-  htmlPlugins?: (ctx: BuildCtx) => PluggableList
+  htmlTransformers: HtmlTransformerPluginInstance[]
-  externalResources?: (ctx: BuildCtx) => Partial<StaticResources>
+  externalResources: ExternalResourcePluginInstance[]
 }
 
 export type QuartzFilterPlugin<Options extends OptionType = undefined> = (

quartz/processors/parse.ts

@@ -16,22 +16,19 @@ import { BuildCtx } from "../util/ctx"
 
 export type QuartzProcessor = Processor<MDRoot, MDRoot, HTMLRoot>
 export function createProcessor(ctx: BuildCtx): QuartzProcessor {
-  const transformers = ctx.cfg.plugins.transformers
+  const markdownTransformers = ctx.cfg.plugins.transformers.markdownTransformers
+  const htmlTransformers = ctx.cfg.plugins.transformers.htmlTransformers
 
   return (
     unified()
       // base Markdown -> MD AST
       .use(remarkParse)
       // MD AST -> MD AST transforms
-      .use(
+      .use(markdownTransformers.flatMap((plugin) => plugin.transformation(ctx)))
-        transformers
-          .filter((p) => p.markdownPlugins)
-          .flatMap((plugin) => plugin.markdownPlugins!(ctx)),
-      )
       // MD AST -> HTML AST
       .use(remarkRehype, { allowDangerousHtml: true })
       // HTML AST -> HTML AST transforms
-      .use(transformers.filter((p) => p.htmlPlugins).flatMap((plugin) => plugin.htmlPlugins!(ctx)))
+      .use(htmlTransformers.flatMap((plugin) => plugin.transformation!(ctx)))
   )
 }
 
@@ -86,8 +83,8 @@ export function createFileParser(ctx: BuildCtx, fps: FilePath[]) {
         file.value = file.value.toString().trim()
 
         // Text -> Text transforms
-        for (const plugin of cfg.plugins.transformers.filter((p) => p.textTransform)) {
+        for (const plugin of cfg.plugins.transformers.textTransformers) {
-          file.value = plugin.textTransform!(ctx, file.value.toString())
+          file.value = plugin.transformation(ctx, file.value.toString())
         }
 
         // base data properties that plugins may use