mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-27 23:04:05 -06:00
chore: use mermaid and update clipboard content
Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
This commit is contained in:
Aaron Pham
parent
e9a05be5ba
commit
7995078f66
631
package-lock.json
generated
631
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -58,6 +58,7 @@
|
||||
"mdast-util-find-and-replace": "^3.0.1",
|
||||
"mdast-util-to-hast": "^13.2.0",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"mermaid": "^11.4.0",
|
||||
"micromorph": "^0.4.5",
|
||||
"pixi.js": "^8.5.2",
|
||||
"preact": "^10.24.3",
|
||||
|
||||
@ -8,7 +8,9 @@ document.addEventListener("nav", () => {
|
||||
for (let i = 0; i < els.length; i++) {
|
||||
const codeBlock = els[i].getElementsByTagName("code")[0]
|
||||
if (codeBlock) {
|
||||
const source = codeBlock.innerText.replace(/\n\n/g, "\n")
|
||||
const source = (
|
||||
codeBlock.dataset.clipboard ? JSON.parse(codeBlock.dataset.clipboard) : codeBlock.innerText
|
||||
).replace(/\n\n/g, "\n")
|
||||
const button = document.createElement("button")
|
||||
button.className = "clipboard-button"
|
||||
button.type = "button"
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import { removeAllChildren } from "./util"
|
||||
|
||||
const svgExpand =
|
||||
'<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="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"></path></svg>'
|
||||
import mermaid from "mermaid"
|
||||
|
||||
interface Position {
|
||||
x: number
|
||||
@ -59,6 +57,7 @@ class DiagramPanZoom {
|
||||
button.textContent = text
|
||||
button.className = "mermaid-control-button"
|
||||
button.addEventListener("click", onClick)
|
||||
window.addCleanup(() => button.removeEventListener("click", onClick))
|
||||
return button
|
||||
}
|
||||
|
||||
@ -145,9 +144,8 @@ const cssVars = [
|
||||
"--codeFont",
|
||||
] as const
|
||||
|
||||
let mermaidImport = undefined
|
||||
document.addEventListener("nav", async () => {
|
||||
const nodes = document.querySelectorAll("code.mermaid")
|
||||
const nodes = document.querySelectorAll("code.mermaid") as NodeListOf<HTMLElement>
|
||||
if (nodes.length === 0) return
|
||||
|
||||
const computedStyleMap = cssVars.reduce(
|
||||
@ -158,11 +156,6 @@ document.addEventListener("nav", async () => {
|
||||
{} as Record<(typeof cssVars)[number], string>,
|
||||
)
|
||||
|
||||
mermaidImport ||= await import(
|
||||
// @ts-ignore
|
||||
"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,
|
||||
@ -186,12 +179,8 @@ document.addEventListener("nav", async () => {
|
||||
const codeBlock = nodes[i] as HTMLElement
|
||||
const pre = codeBlock.parentElement as HTMLPreElement
|
||||
const clipboardBtn = pre.querySelector(".clipboard-button") as HTMLButtonElement
|
||||
const expandBtn = pre.querySelector(".expand-button") as HTMLButtonElement
|
||||
|
||||
const expandBtn = document.createElement("button")
|
||||
expandBtn.className = "expand-button"
|
||||
expandBtn.type = "button"
|
||||
expandBtn.innerHTML = svgExpand
|
||||
expandBtn.ariaLabel = "Expand mermaid diagram"
|
||||
const clipboardStyle = window.getComputedStyle(clipboardBtn)
|
||||
const clipboardWidth =
|
||||
clipboardBtn.offsetWidth +
|
||||
@ -202,23 +191,9 @@ document.addEventListener("nav", async () => {
|
||||
expandBtn.style.right = `calc(${clipboardWidth}px + 0.3rem)`
|
||||
pre.prepend(expandBtn)
|
||||
|
||||
// Create popup container
|
||||
const popupContainer = document.createElement("div")
|
||||
popupContainer.id = "mermaid-container"
|
||||
popupContainer.innerHTML = `
|
||||
<div id="mermaid-space">
|
||||
<div class="mermaid-header">
|
||||
<button class="close-button" aria-label="Close">
|
||||
<svg width="24" height="24" 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>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mermaid-content"></div>
|
||||
</div>
|
||||
`
|
||||
pre.appendChild(popupContainer)
|
||||
// query popup container
|
||||
const popupContainer = document.querySelector("#mermaid-container") as HTMLElement
|
||||
if (!popupContainer) return
|
||||
|
||||
let panZoom: DiagramPanZoom | null = null
|
||||
|
||||
|
||||
@ -282,6 +282,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
|
||||
|
||||
// internal link
|
||||
const url = fp + anchor
|
||||
|
||||
return {
|
||||
type: "link",
|
||||
url,
|
||||
@ -518,6 +519,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
|
||||
node.data = {
|
||||
hProperties: {
|
||||
className: ["mermaid"],
|
||||
"data-clipboard": JSON.stringify(node.value),
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -662,6 +664,133 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
|
||||
})
|
||||
}
|
||||
|
||||
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() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user