Added a remark plugin for markdown

quartz/plugins/transformers/ofm.ts

@@ -11,6 +11,7 @@ import {
 import { Element, Literal, Root as HtmlRoot } from "hast"
 import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
 import rehypeRaw from "rehype-raw"
+import remarkArgdownPlugin from "@argdown/remark-plugin"
 import { SKIP, visit } from "unist-util-visit"
 import path from "path"
 import { splitAnchor } from "../../util/path"
@@ -22,8 +23,6 @@ import checkboxScript from "../../components/scripts/checkbox.inline"
 // @ts-ignore
 import mermaidScript from "../../components/scripts/mermaid.inline"
 import mermaidStyle from "../../components/styles/mermaid.inline.scss"
-// import argdownScript from "../../components/scripts/argdown.inline"
-// import argdownStyle from "../../components/styles/argdown.inline.scss"
 import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
 import { toHast } from "mdast-util-to-hast"
 import { toHtml } from "hast-util-to-html"
@@ -36,7 +35,7 @@ export interface Options {
   wikilinks: boolean
   callouts: boolean
   mermaid: boolean
-  // argdown: boolean
+  argdown: boolean
   parseTags: boolean
   parseArrows: boolean
   parseBlockReferences: boolean
@@ -53,7 +52,7 @@ const defaultOptions: Options = {
   wikilinks: true,
   callouts: true,
   mermaid: true,
-  // argdown: true,
+  argdown: true,
   parseTags: true,
   parseArrows: true,
   parseBlockReferences: true,
@@ -542,23 +541,11 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
         })
       }
 
-      // if (opts.argdown) {
+      if (opts.argdown) {
-      //   plugins.push(() => {
+        plugins.push(() => {
-      //     return (tree: Root, file) => {
+          return [remarkArgdownPlugin]
-      //       visit(tree, "code", (node: Code) => {
+        })
-      //         if (node.lang === "argdown") {
+      }
-      //           file.data.hasArgdownDiagram = true
-      //           node.data = {
-      //             hProperties: {
-      //               className: ["argdown"],
-      //               "data-clipboard": JSON.stringify(node.value),
-      //             },
-      //           }
-      //         }
-      //       })
-      //     }
-      //   })
-      // }
 
       return plugins
     },
@@ -765,74 +752,9 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
         })
       }
 
-      // if (opts.argdown) {
+      if (opts.argdown) {
-      //   plugins.push(() => {
+        return [[remarkArgdownPlugin, { webComponent: { withoutHeader: true }}]]
-      //     return (tree: HtmlRoot, _file) => {
+      }
-      //       visit(tree, "element", (node: Element, _idx, parent) => {
-      //         if (
-      //           node.tagName === "code" &&
-      //           ((node.properties?.className ?? []) as string[])?.includes("argdown")
-      //         ) {
-      //           parent!.children = [
-      //             {
-      //               type: "element",
-      //               tagName: "button",
-      //               properties: {
-      //                 className: ["expand-button"],
-      //                 "aria-label": "Expand argdown diagram",
-      //                 "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: "argdown-container", role: "dialog" },
-      //               children: [
-      //                 {
-      //                   type: "element",
-      //                   tagName: "div",
-      //                   properties: { id: "argdown-space" },
-      //                   children: [
-      //                     {
-      //                       type: "element",
-      //                       tagName: "div",
-      //                       properties: { className: ["argdown-content"] },
-      //                       children: [],
-      //                     },
-      //                   ],
-      //                 },
-      //               ],
-      //             },
-      //           ]
-      //         }
-      //       })
-      //     }
-      //   })
-      // }
 
       return plugins
     },
@@ -870,20 +792,6 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
         })
       }
 
-      // if (opts.argdown) {
-      //   js.push({
-      //     script: argdownScript,
-      //     loadTime: "afterDOMReady",
-      //     contentType: "inline",
-      //     moduleType: "module",
-      //   })
-
-      //   css.push({
-      //     content: argdownStyle,
-      //     inline: true,
-      //   })
-      // }
-
       return { js, css }
     },
   }