From 8bfee04c8c6948a88114d53769d4bb89b8ec7bf5 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 17 Jun 2023 23:05:46 +0000
Subject: [PATCH] popovers
---
quartz/plugins/transformers/ofm.ts | 43 ++++++++++++++++++++++++++++++++-----------
1 files changed, 32 insertions(+), 11 deletions(-)
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 1b4e07a..3742d4b 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -6,6 +6,9 @@
import rehypeRaw from "rehype-raw"
import { visit } from "unist-util-visit"
import path from "path"
+import { JSResource } from "../../resources"
+// @ts-ignore
+import calloutScript from "../../components/scripts/callout.inline.ts"
export interface Options {
highlight: boolean
@@ -209,6 +212,10 @@
const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
const title = match.input.slice(calloutDirective.length).trim() || capitalize(calloutType)
+ 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 titleNode: HTML = {
type: "html",
value: `<div
@@ -216,6 +223,7 @@
>
<div class="callout-icon">${callouts[canonicalizeCallout(calloutType)]}</div>
<div class="callout-title-inner">${title}</div>
+ ${collapse ? toggleIcon : ""}
</div>`
}
@@ -227,7 +235,6 @@
type: 'text',
value: remainingText,
}]
-
})
}
@@ -270,16 +277,30 @@
htmlPlugins() {
return [rehypeRaw]
},
- externalResources: {
- js: [{
- script: `
-import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-mermaid.initialize({ startOnLoad: true });
- `,
- loadTime: 'afterDOMReady',
- moduleType: 'module',
- contentType: 'inline'
- }]
+ externalResources() {
+ const js: JSResource[] = []
+
+ if (opts.callouts) {
+ js.push({
+ script: calloutScript,
+ loadTime: 'afterDOMReady',
+ contentType: 'inline'
+ })
+ }
+
+ if (opts.mermaid) {
+ js.push({
+ script: `
+ import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+ mermaid.initialize({ startOnLoad: true });
+ `,
+ loadTime: 'afterDOMReady',
+ moduleType: 'module',
+ contentType: 'inline'
+ })
+ }
+
+ return { js }
}
}
}
--
Gitblit v1.10.0