This commit is contained in:
Emile Bangma 2024-11-08 01:40:12 +01:00 committed by GitHub
commit 613acc0d20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
60 changed files with 1727 additions and 1054 deletions

View File

@ -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: [
Plugin.FrontMatter(),
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" }),
],
//transformers: Presets.DefaultPreset(),
transformers: Presets.ObsidianPreset(),
filters: [Plugin.RemoveDrafts()],
emitters: [
Plugin.AliasRedirects(),

View File

@ -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") =>
cfg.plugins[key].map((plugin) => plugin.name)
const pluginNames = (key: "filters" | "emitters") => 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(", ")}`)
}

View File

@ -8,8 +8,8 @@ export function getStaticResourcesFromPlugins(ctx: BuildCtx) {
js: [],
}
for (const transformer of ctx.cfg.plugins.transformers) {
const res = transformer.externalResources ? transformer.externalResources(ctx) : {}
for (const transformer of ctx.cfg.plugins.transformers.externalResources) {
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"

View File

@ -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

View File

@ -1,7 +1,7 @@
import { Root as HTMLRoot } from "hast"
import { toString } from "hast-util-to-string"
import { QuartzTransformerPlugin } from "../types"
import { escapeHTML } from "../../util/escape"
import { HtmlTransformerPlugin } from "../../types"
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) => {

View File

@ -1,27 +1,22 @@
import remarkGfm from "remark-gfm"
import smartypants from "remark-smartypants"
import { QuartzTransformerPlugin } from "../types"
import { HtmlTransformerPlugin } 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",
markdownPlugins() {
return opts.enableSmartyPants ? [remarkGfm, smartypants] : [remarkGfm]
},
htmlPlugins() {
name: "GitHubFlavoredMarkdownLinkHeadings",
transformation() {
if (opts.linkHeadings) {
return [
rehypeSlug,

View File

@ -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"

View File

@ -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 }]]
}
},
}
}

View File

@ -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) => {

View File

@ -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
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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]]
},
}

View File

@ -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"

View File

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

View File

@ -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 { QuartzPluginData } from "../vfile"
import { i18n } from "../../i18n"
import { slugTag } from "../../../util/path"
import { QuartzPluginData } from "../../vfile"
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"]],
() => {

View File

@ -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]
},
}
}

View File

@ -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"

View File

@ -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

View File

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

View File

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

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
@ -93,7 +61,7 @@ function transformSpecialEmbed(node: Paragraph, opts: Options): Html | null {
return {
type: "html",
value: `<iframe
value: `<iframe
class="external-embed youtube"
width="600px"
height="350px"
@ -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",
markdownPlugins() {
name: "RoamFlavoredMarkdownSpecialEmbeds",
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)
}
})

View File

@ -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
},
}
}

View File

@ -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) => {

View File

@ -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
}
}

View File

@ -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
},
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 }
},
}
}

View File

@ -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 }
},
}
}

View File

@ -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 }
},
}
}

View File

@ -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
},
}
}

View File

@ -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"

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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
},
}
}

View File

@ -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 QuartzTransformerPlugin<Options extends OptionType = undefined> = (
export type TextTransformerPlugin<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
textTransform?: (ctx: BuildCtx, src: string | Buffer) => string | Buffer
markdownPlugins?: (ctx: BuildCtx) => PluggableList
htmlPlugins?: (ctx: BuildCtx) => PluggableList
externalResources?: (ctx: BuildCtx) => Partial<StaticResources>
//name: string,
textTransformers: TextTransformerPluginInstance[]
markdownTransformers: MarkdownTransformerPluginInstance[]
htmlTransformers: HtmlTransformerPluginInstance[]
externalResources: ExternalResourcePluginInstance[]
}
export type QuartzFilterPlugin<Options extends OptionType = undefined> = (

View File

@ -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(
transformers
.filter((p) => p.markdownPlugins)
.flatMap((plugin) => plugin.markdownPlugins!(ctx)),
)
.use(markdownTransformers.flatMap((plugin) => plugin.transformation(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)) {
file.value = plugin.textTransform!(ctx, file.value.toString())
for (const plugin of cfg.plugins.transformers.textTransformers) {
file.value = plugin.transformation(ctx, file.value.toString())
}
// base data properties that plugins may use