| | |
|---|
| | | import { QuartzTransformerPlugin } from "../types" |
|---|
| | | import { Root, Html, 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" |
|---|
| | | import calloutScript from "../../components/scripts/callout.inline" |
|---|
| | | // @ts-ignore |
|---|
| | | import checkboxScript from "../../components/scripts/checkbox.inline" |
|---|
| | | // @ts-ignore |
|---|
| | | import mermaidScript from "../../components/scripts/mermaid.inline" |
|---|
| | | import mermaidStyle from "../../components/styles/mermaid.inline.scss" |
|---|
| | | 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" |
|---|
| | | |
|---|
| | |
|---|
| | | enableInHtmlEmbed: boolean |
|---|
| | | enableYouTubeEmbed: boolean |
|---|
| | | enableVideoEmbed: boolean |
|---|
| | | enableCheckbox: boolean |
|---|
| | | disableBrokenWikilinks: boolean |
|---|
| | | } |
|---|
| | | |
|---|
| | | const defaultOptions: Options = { |
|---|
| | |
|---|
| | | enableInHtmlEmbed: false, |
|---|
| | | enableYouTubeEmbed: true, |
|---|
| | | enableVideoEmbed: true, |
|---|
| | | enableCheckbox: false, |
|---|
| | | disableBrokenWikilinks: false, |
|---|
| | | } |
|---|
| | | |
|---|
| | | const calloutMapping = { |
|---|
| | |
|---|
| | | cite: "quote", |
|---|
| | | } as const |
|---|
| | | |
|---|
| | | const arrowMapping: Record<string, string> = { |
|---|
| | | "->": "→", |
|---|
| | | "-->": "⇒", |
|---|
| | | "=>": "⇒", |
|---|
| | | "==>": "⇒", |
|---|
| | | "<-": "←", |
|---|
| | | "<--": "⇐", |
|---|
| | | "<=": "⇐", |
|---|
| | | "<==": "⇐", |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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 |
|---|
| | |
|---|
| | | |
|---|
| | | 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 zero or more non-special characters (alias) |
|---|
| | | export const wikilinkRegex = new RegExp( |
|---|
| | | /!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\#]+)?\]\]/, |
|---|
| | | "g", |
|---|
| | | /!?\[\[([^\[\]\|\#\\]+)?(#+[^\[\]\|\#\\]+)?(\\?\|[^\[\]\#]*)?\]\]/g, |
|---|
| | | ) |
|---|
| | | const highlightRegex = new RegExp(/==([^=]+)==/, "g") |
|---|
| | | const commentRegex = new RegExp(/%%[\s\S]*?%%/, "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>(?!^\d*x?\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) => { |
|---|
| | |
|---|
| | | 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 = 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?.startsWith("#^")) ? "^" : "" |
|---|
| | | const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : "" |
|---|
| | | const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? "" |
|---|
| | | const embedDisplay = value.startsWith("!") ? "!" : "" |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | return src |
|---|
| | | }, |
|---|
| | | markdownPlugins() { |
|---|
| | | markdownPlugins(ctx) { |
|---|
| | | const plugins: PluggableList = [] |
|---|
| | | |
|---|
| | | // regex replacements |
|---|
| | |
|---|
| | | let [rawFp, rawHeader, rawAlias] = capture |
|---|
| | | const fp = rawFp?.trim() ?? "" |
|---|
| | | const anchor = rawHeader?.trim() ?? "" |
|---|
| | | const alias = rawAlias?.slice(1).trim() |
|---|
| | | const alias: string | undefined = rawAlias?.slice(1).trim() |
|---|
| | | |
|---|
| | | // embed cases |
|---|
| | | if (value.startsWith("!")) { |
|---|
| | |
|---|
| | | } 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>`, |
|---|
| | | } |
|---|
| | |
|---|
| | | // otherwise, fall through to regular link |
|---|
| | | } |
|---|
| | | |
|---|
| | | // treat as broken link if slug not in ctx.allSlugs |
|---|
| | | if (opts.disableBrokenWikilinks) { |
|---|
| | | const slug = slugifyFilePath(fp as FilePath) |
|---|
| | | const exists = ctx.allSlugs && ctx.allSlugs.includes(slug) |
|---|
| | | if (!exists) { |
|---|
| | | return { |
|---|
| | | type: "html", |
|---|
| | | value: `<a class=\"internal broken\">${alias ?? fp}</a>`, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // internal link |
|---|
| | | const url = fp + anchor |
|---|
| | | |
|---|
| | | return { |
|---|
| | | type: "link", |
|---|
| | | url, |
|---|
| | |
|---|
| | | 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>`, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | type: "text", |
|---|
| | | value: `#${tag}`, |
|---|
| | | value: tag, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | const match = firstLine.match(calloutRegex) |
|---|
| | | if (match && match.input) { |
|---|
| | | const [calloutDirective, typeString, collapseChar] = match |
|---|
| | | 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: [{ type: "text", value: titleContent + " " }, ...restOfTitle], |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | type: "text", |
|---|
| | | value: useDefaultTitle |
|---|
| | | ? capitalize(typeString).replace(/-/g, " ") |
|---|
| | | : titleContent + " ", |
|---|
| | | }, |
|---|
| | | ...restOfTitle, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | const title = mdastToHtml(titleNode) |
|---|
| | | |
|---|
| | |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // For the rest of the MD callout elements other than the title, wrap them with |
|---|
| | | // two nested HTML <div>s (use some hacked mdhast component to achieve this) of |
|---|
| | | // class `callout-content` and `callout-content-inner` respectively for |
|---|
| | | // grid-based collapsible animation. |
|---|
| | | if (calloutContent.length > 0) { |
|---|
| | | node.children = [ |
|---|
| | | node.children[0], |
|---|
| | | { |
|---|
| | | data: { hProperties: { className: ["callout-content"] }, hName: "div" }, |
|---|
| | | type: "blockquote", |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | data: { |
|---|
| | | hProperties: { className: ["callout-content-inner"] }, |
|---|
| | | hName: "div", |
|---|
| | | }, |
|---|
| | | type: "blockquote", |
|---|
| | | children: [...calloutContent], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 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 ${calloutType} ${collapse ? "is-collapsible" : ""} ${ |
|---|
| | | defaultState === "collapsed" ? "is-collapsed" : "" |
|---|
| | | }`, |
|---|
| | | className: classNames.join(" "), |
|---|
| | | "data-callout": calloutType, |
|---|
| | | "data-callout-fold": collapse, |
|---|
| | | "data-callout-metadata": calloutMetaData, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | 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), |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | 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}`, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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", |
|---|
| | | "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", role: "dialog" }, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | type: "element", |
|---|
| | | tagName: "div", |
|---|
| | | properties: { id: "mermaid-space" }, |
|---|
| | | 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({ |
|---|
| | |
|---|
| | | |
|---|
| | | 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' |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | `, |
|---|
| | | script: mermaidScript, |
|---|
| | | loadTime: "afterDOMReady", |
|---|
| | | moduleType: "module", |
|---|
| | | contentType: "inline", |
|---|
| | | moduleType: "module", |
|---|
| | | }) |
|---|
| | | |
|---|
| | | css.push({ |
|---|
| | | content: mermaidStyle, |
|---|
| | | inline: true, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { js } |
|---|
| | | return { js, css } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | interface DataMap { |
|---|
| | | blocks: Record<string, Element> |
|---|
| | | htmlAst: HtmlRoot |
|---|
| | | hasMermaidDiagram: boolean | undefined |
|---|
| | | } |
|---|
| | | } |
|---|
