scapegoat/Docs2.git

			@@ -1,18 +1,27 @@
			import { QuartzTransformerPlugin } from "../types"
			import { Root, Html, Image, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
			import {
			Root,
			Html,
			BlockContent,
			PhrasingContent,
			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 { slug as slugAnchor } from "github-slugger"
			import rehypeRaw from "rehype-raw"
			import { SKIP, visit } from "unist-util-visit"
			import path from "path"
			import { JSResource } from "../../util/resources"
			import { splitAnchor } from "../../util/path"
			import { JSResource, CSSResource } 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"

			@@ -28,6 +37,7 @@
			enableInHtmlEmbed: boolean
			enableYouTubeEmbed: boolean
			enableVideoEmbed: boolean
			enableCheckbox: boolean
			}

			const defaultOptions: Options = {
			@@ -42,41 +52,10 @@
			enableInHtmlEmbed: false,
			enableYouTubeEmbed: true,
			enableVideoEmbed: true,
			enableCheckbox: false,
			}

			const icons = {
			infoIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`,
			pencilIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>`,
			clipboardListIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>`,
			checkCircleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>`,
			flameIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>`,
			checkIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
			helpCircleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
			alertTriangleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
			xIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
			zapIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`,
			bugIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>`,
			listIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>`,
			quoteIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>`,
			}

			const callouts = {
			note: icons.pencilIcon,
			abstract: icons.clipboardListIcon,
			info: icons.infoIcon,
			todo: icons.checkCircleIcon,
			tip: icons.flameIcon,
			success: icons.checkIcon,
			question: icons.helpCircleIcon,
			warning: icons.alertTriangleIcon,
			failure: icons.xIcon,
			danger: icons.zapIcon,
			bug: icons.bugIcon,
			example: icons.listIcon,
			quote: icons.quoteIcon,
			}

			const calloutMapping: Record<string, keyof typeof callouts> = {
			const calloutMapping = {
			note: "note",
			abstract: "abstract",
			summary: "abstract",
			@@ -104,43 +83,67 @@
			example: "example",
			quote: "quote",
			cite: "quote",
			} as const

			const arrowMapping: Record<string, string> = {
			"->": "→",
			"-->": "⇒",
			"=>": "⇒",
			"==>": "⇒",
			"<-": "←",
			"<--": "⇐",
			"<=": "⇐",
			"<==": "⇐",
			}

			function canonicalizeCallout(calloutName: string): keyof typeof callouts {
			let callout = calloutName.toLowerCase() as keyof typeof calloutMapping
			return calloutMapping[callout] ?? "note"
			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}>/, "g")
			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)
			// (\|[^\[\]\\|\#]+)? -> \| then one or more non-special characters (alias)
			// !? -> optional embedding
			// \[\[ -> open brace
			// ([^\[\]\\|\#]+) -> one or more non-special characters ([,],\|, or #) (name)
			// (#[^\[\]\\|\#]+)? -> # then one or more non-special characters (heading link)
			// (\\?\\|[^\[\]\#]+)? -> optional escape \ then \| then one or more non-special characters (alias)
			export const wikilinkRegex = new RegExp(
			/!?\[\[([^\[\]\\|\#]+)?(#+[^\[\]\\|\#]+)?(\\|[^\[\]\\|\#]+)?\]\]/,
			"g",
			/!?\[\[([^\[\]\\|\#\\]+)?(#+[^\[\]\\|\#\\]+)?(\\?\\|[^\[\]\#]+)?\]\]/g,
			)
			const highlightRegex = new RegExp(/==([^=]+)==/, "g")
			const commentRegex = 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
			const calloutRegex = new RegExp(/^\[\!([\w-]+)\\|?(.+?)?\]([+-]?)/)
			const calloutLineRegex = new RegExp(/^> \[\!\w+\\|?.?\][+-]?.*$/gm)
			// (?<=^\| ) -> a lookbehind assertion, 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}\d])+(?:\/[-_\p{L}\p{Emoji}\d]+)*)/, "gu")
			const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/, "g")
			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>(?!^\dx?\d$).?)?(\\|?\s?(?<width>\d+)(x(?<height>\d+))?)?$/,
			)

			export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> \| undefined> = (
			userOpts,
			) => {
			export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
			const opts = { ...defaultOptions, ...userOpts }

			const mdastToHtml = (ast: PhrasingContent \| Paragraph) => {
			@@ -151,13 +154,22 @@
			return {
			name: "ObsidianFlavoredMarkdown",
			textTransform(_ctx, src) {
			// do comments at text level
			if (opts.comments) {
			if (src instanceof Buffer) {
			src = src.toString()
			}

			src = (src as string).replace(commentRegex, "")
			}

			// pre-transform blockquotes
			if (opts.callouts) {
			if (src instanceof Buffer) {
			src = src.toString()
			}

			src = src.replace(calloutLineRegex, (value) => {
			src = (src as string).replace(calloutLineRegex, (value) => {
			// force newline after title of callout
			return value + "\n> "
			})
			@@ -169,13 +181,27 @@
			src = src.toString()
			}

			src = src.replace(wikilinkRegex, (value, ...capture) => {
			// replace all wikilinks inside a table first
			src = (src as string).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 as string).replace(wikilinkRegex, (value, ...capture) => {
			const [rawFp, rawHeader, rawAlias]: (string \| undefined)[] = capture

			const fp = rawFp ?? ""
			const anchor = rawHeader?.trim().replace(/^#+/, "")
			const blockRef = Boolean(anchor?.startsWith("^")) ? "^" : ""
			const displayAnchor = anchor ? `#${blockRef}${slugAnchor(anchor)}` : ""
			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("!") ? "!" : ""

			@@ -189,7 +215,7 @@

			return src
			},
			markdownPlugins() {
			markdownPlugins(_ctx) {
			const plugins: PluggableList = []

			// regex replacements
			@@ -212,10 +238,10 @@
			const ext: string = path.extname(fp).toLowerCase()
			const url = slugifyFilePath(fp as FilePath)
			if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
			const dims = alias ?? ""
			let [width, height] = dims.split("x", 2)
			width \|\|= "auto"
			height \|\|= "auto"
			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,
			@@ -223,6 +249,7 @@
			hProperties: {
			width,
			height,
			alt,
			},
			},
			}
			@@ -241,14 +268,14 @@
			} else if ([".pdf"].includes(ext)) {
			return {
			type: "html",
			value: `<iframe src="${url}"></iframe>`,
			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}"><a href="${
			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>`,
			}
			@@ -259,6 +286,7 @@

			// internal link
			const url = fp + anchor

			return {
			type: "link",
			url,
			@@ -286,25 +314,15 @@
			])
			}

			if (opts.comments) {
			replacements.push([
			commentRegex,
			(_value: string, ..._capture: string[]) => {
			return {
			type: "text",
			value: "",
			}
			},
			])
			}

			if (opts.parseArrows) {
			replacements.push([
			arrowRegex,
			(_value: string, ..._capture: string[]) => {
			(value: string, ..._capture: string[]) => {
			const maybeArrow = arrowMapping[value]
			if (maybeArrow === undefined) return SKIP
			return {
			type: "html",
			value: `<span>→</span>`,
			value: `<span>${maybeArrow}</span>`,
			}
			},
			])
			@@ -314,14 +332,15 @@
			replacements.push([
			tagRegex,
			(_value: string, tag: string) => {
			// Check if the tag only includes numbers
			if (/^\d+$/.test(tag)) {
			// Check if the tag only includes numbers and slashes
			if (/^[\/\d]+$/.test(tag)) {
			return false
			}

			tag = slugTag(tag)
			if (file.data.frontmatter && !file.data.frontmatter.tags.includes(tag)) {
			file.data.frontmatter.tags.push(tag)
			if (file.data.frontmatter) {
			const noteTags = file.data.frontmatter.tags ?? []
			file.data.frontmatter.tags = [...new Set([...noteTags, tag])]
			}

			return {
			@@ -335,7 +354,7 @@
			children: [
			{
			type: "text",
			value: `#${tag}`,
			value: tag,
			},
			],
			}
			@@ -395,8 +414,8 @@
			return
			}

			// find first line
			const firstChild = node.children[0]
			// find first line and callout content
			const [firstChild, ...calloutContent] = node.children
			if (firstChild.type !== "paragraph" \|\| firstChild.children[0]?.type !== "text") {
			return
			}
			@@ -408,33 +427,34 @@

			const match = firstLine.match(calloutRegex)
			if (match && match.input) {
			const [calloutDirective, typeString, collapseChar] = match
			const calloutType = canonicalizeCallout(
			typeString.toLowerCase() as keyof typeof calloutMapping,
			)
			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() \|\| capitalize(calloutType)
			const titleContent = match.input.slice(calloutDirective.length).trim()
			const useDefaultTitle = titleContent === "" && restOfTitle.length === 0
			const titleNode: Paragraph = {
			type: "paragraph",
			children:
			restOfTitle.length === 0
			? [{ type: "text", value: titleContent + " " }]
			: restOfTitle,
			children: [
			{
			type: "text",
			value: useDefaultTitle
			? capitalize(typeString).replace(/-/g, " ")
			: titleContent + " ",
			},
			...restOfTitle,
			],
			}
			const title = mdastToHtml(titleNode)

			const toggleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold">
			<polyline points="6 9 12 15 18 9"></polyline>
			</svg>`
			const toggleIcon = `<div class="fold-callout-icon"></div>`

			const titleHtml: Html = {
			type: "html",
			value: `<div
			class="callout-title"
			>
			<div class="callout-icon">${callouts[calloutType]}</div>
			<div class="callout-icon"></div>
			<div class="callout-title-inner">${title}</div>
			${collapse ? toggleIcon : ""}
			</div>`,
			@@ -456,17 +476,39 @@
			// 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: `callout ${collapse ? "is-collapsible" : ""} ${
			defaultState === "collapsed" ? "is-collapsed" : ""
			}`,
			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]
			}
			}
			})
			}
			@@ -475,12 +517,14 @@

			if (opts.mermaid) {
			plugins.push(() => {
			return (tree: Root, _file) => {
			return (tree: Root, file) => {
			visit(tree, "code", (node: Code) => {
			if (node.lang === "mermaid") {
			file.data.hasMermaidDiagram = true
			node.data = {
			hProperties: {
			className: ["mermaid"],
			"data-clipboard": JSON.stringify(node.value),
			},
			}
			}
			@@ -530,12 +574,35 @@
			last.value = last.value.slice(0, -matches[0].length)
			const block = matches[0].slice(1)

			if (!Object.keys(file.data.blocks!).includes(block)) {
			node.properties = {
			...node.properties,
			id: block,
			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
			}
			}
			file.data.blocks![block] = node
			} else {
			// normal paragraph transclude
			if (!Object.keys(file.data.blocks!).includes(block)) {
			node.properties = {
			...node.properties,
			id: block,
			}
			file.data.blocks![block] = node
			}
			}
			}
			}
			@@ -554,15 +621,28 @@
			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",
			class: "external-embed youtube",
			allow: "fullscreen",
			frameborder: 0,
			width: "600px",
			height: "350px",
			src: `https://www.youtube.com/embed/${videoId}`,
			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}`,
			}
			}
			}
			@@ -571,10 +651,164 @@
			})
			}

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

			if (opts.mermaid) {
			plugins.push(() => {
			return (tree: HtmlRoot, _file) => {
			visit(tree, "element", (node: Element, _idx, parent) => {
			if (
			node.tagName === "code" &&
			((node.properties?.className ?? []) as string[])?.includes("mermaid")
			) {
			parent!.children = [
			{
			type: "element",
			tagName: "button",
			properties: {
			className: ["expand-button"],
			"aria-label": "Expand mermaid diagram",
			"aria-hidden": "true",
			"data-view-component": true,
			},
			children: [
			{
			type: "element",
			tagName: "svg",
			properties: {
			width: 16,
			height: 16,
			viewBox: "0 0 16 16",
			fill: "currentColor",
			},
			children: [
			{
			type: "element",
			tagName: "path",
			properties: {
			fillRule: "evenodd",
			d: "M3.72 3.72a.75.75 0 011.06 1.06L2.56 7h10.88l-2.22-2.22a.75.75 0 011.06-1.06l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.22-2.22H2.56l2.22 2.22a.75.75 0 11-1.06 1.06l-3.5-3.5a.75.75 0 010-1.06l3.5-3.5z",
			},
			children: [],
			},
			],
			},
			],
			},
			node,
			{
			type: "element",
			tagName: "div",
			properties: { id: "mermaid-container" },
			children: [
			{
			type: "element",
			tagName: "div",
			properties: { id: "mermaid-space" },
			children: [
			{
			type: "element",
			tagName: "div",
			properties: { className: ["mermaid-header"] },
			children: [
			{
			type: "element",
			tagName: "button",
			properties: {
			className: ["close-button"],
			"aria-label": "close button",
			},
			children: [
			{
			type: "element",
			tagName: "svg",
			properties: {
			"aria-hidden": "true",
			xmlns: "http://www.w3.org/2000/svg",
			width: 24,
			height: 24,
			viewBox: "0 0 24 24",
			fill: "none",
			stroke: "currentColor",
			"stroke-width": "2",
			"stroke-linecap": "round",
			"stroke-linejoin": "round",
			},
			children: [
			{
			type: "element",
			tagName: "line",
			properties: {
			x1: 18,
			y1: 6,
			x2: 6,
			y2: 18,
			},
			children: [],
			},
			{
			type: "element",
			tagName: "line",
			properties: {
			x1: 6,
			y1: 6,
			x2: 18,
			y2: 18,
			},
			children: [],
			},
			],
			},
			],
			},
			],
			},
			{
			type: "element",
			tagName: "div",
			properties: { className: ["mermaid-content"] },
			children: [],
			},
			],
			},
			],
			},
			]
			}
			})
			}
			})
			}

			return plugins
			},
			externalResources() {
			const js: JSResource[] = []
			const css: CSSResource[] = []

			if (opts.enableCheckbox) {
			js.push({
			script: checkboxScript,
			loadTime: "afterDOMReady",
			contentType: "inline",
			})
			}

			if (opts.callouts) {
			js.push({
			@@ -584,29 +818,7 @@
			})
			}

			if (opts.mermaid) {
			js.push({
			script: `
			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
			const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
			mermaid.initialize({
			startOnLoad: false,
			securityLevel: 'loose',
			theme: darkMode ? 'dark' : 'default'
			});
			document.addEventListener('nav', async () => {
			await mermaid.run({
			querySelector: '.mermaid'
			})
			});
			`,
			loadTime: "afterDOMReady",
			moduleType: "module",
			contentType: "inline",
			})
			}

			return { js }
			return { js, css }
			},
			}
			}
			@@ -615,5 +827,6 @@
			interface DataMap {
			blocks: Record<string, Element>
			htmlAst: HtmlRoot
			hasMermaidDiagram: boolean \| undefined
			}
			}