taglist, mermaid

quartz/plugins/emitters/contentPage.tsx

@@ -1,4 +1,4 @@
-import { StaticResources } from "../../resources"
+import { JSResourceToScriptElement, StaticResources } from "../../resources"
 import { EmitCallback, QuartzEmitterPlugin } from "../types"
 import { ProcessedContent } from "../vfile"
 import { render } from "preact-render-to-string"
@@ -37,9 +37,9 @@ export const ContentPage: QuartzEmitterPlugin<Options> = (opts) => {
         const pageResources: StaticResources = {
           css: [baseDir + "/index.css", ...resources.css],
           js: [
-            { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady" },
+            { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", contentType: "external" },
             ...resources.js,
-            { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", type: 'module' }
+            { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", moduleType: 'module', contentType: "external" }
           ]
         }
 
@@ -63,7 +63,7 @@ export const ContentPage: QuartzEmitterPlugin<Options> = (opts) => {
               </Body>
             </div>
           </body>
-          {pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(resource => <script key={resource.src} {...resource} />)}
+          {pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(res => JSResourceToScriptElement(res))}
         </html>
 
         const fp = file.data.slug + ".html"

quartz/plugins/transformers/latex.ts

@@ -23,7 +23,8 @@ export const Katex: QuartzTransformerPlugin = () => ({
       {
         // fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
         src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
-        loadTime: "afterDOMReady"
+        loadTime: "afterDOMReady",
+        contentType: 'external'
       }
     ]
   }

quartz/plugins/transformers/ofm.ts

@@ -1,6 +1,6 @@
 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"
@@ -11,12 +11,14 @@ 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 = {
@@ -246,11 +248,38 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
           }
         })
       }
+
+      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: {
+      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'
+      }]
     }
   }
 }

quartz/plugins/transformers/toc.ts

@@ -2,7 +2,7 @@ import { QuartzTransformerPlugin } from "../types"
 import { Root } from "mdast"
 import { visit } from "unist-util-visit"
 import { toString } from "mdast-util-to-string"
-import { slugAnchor } from "../../path"
+import { slug as slugAnchor } from 'github-slugger'
 
 export interface Options {
   maxDepth: 1 | 2 | 3 | 4 | 5 | 6,
@@ -40,7 +40,7 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
                 toc.push({
                   depth: node.depth,
                   text,
-                  slug: slugAnchor.slug(text)
+                  slug: slugAnchor(text)
                 })
               }
             })