collapsible toc

Jacky Zhao

2023-06-17 6d5491fdcbccfad7af6c6dcc63ce2f67abd3850c

 quartz/plugins/transformers/ofm.ts

@@ -1,22 +1,25 @@
import { PluggableList } from "unified"
import { QuartzTransformerPlugin } from "../types"
import { Root, HTML, BlockContent, DefinitionContent } from 'mdast'
import { Root, HTML, BlockContent, DefinitionContent, Code } from 'mdast'
import { findAndReplace } from "mdast-util-find-and-replace"
import { slugify } from "../../path"
import rehypeRaw from "rehype-raw"
import { visit } from "unist-util-visit"
import path from "path"
import { JSResource } from "../../resources"

export interface Options {
  highlight: boolean
  wikilinks: boolean
  callouts: boolean
  mermaid: boolean
}

const defaultOptions: Options = {
  highlight: true,
  wikilinks: true,
  callouts: true
  callouts: true,
  mermaid: false,
}

const icons = {
@@ -233,6 +236,7 @@
                node.children.splice(0, 1, ...blockquoteContent)

                // add properties to base blockquote
                // TODO: add the js to actually support collapsing callout
                node.data = {
                  hProperties: {
                    ...(node.data?.hProperties ?? {}),
@@ -246,11 +250,41 @@
          }
        })
      }

      if (opts.mermaid) {
        plugins.push(() => {
          return (tree: Root, _file) => {
            visit(tree, 'code', (node: Code) => {
              if (node.lang === 'mermaid') {
                node.data = {
                  hProperties: {
                    className: 'mermaid'
                  }
                }
              }
            })
          }
        })
      }

      return plugins
    },

    htmlPlugins() {
      return [rehypeRaw]
    },
    externalResources() {
      const mermaidScript: JSResource = {
        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: opts.mermaid ? [mermaidScript] : []
      }
    }
  }
}