popovers

Jacky Zhao

2023-06-17 8bfee04c8c6948a88114d53769d4bb89b8ec7bf5

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