From e82ba97a396e4e9d77486b48e6ee8b1dfd1c1b4c Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 24 Jul 2023 07:07:58 +0000
Subject: [PATCH] actually add processed tag to frontmatter

---
 quartz/plugins/transformers/ofm.ts |  151 ++++++++++++++++++++++++++++++++------------------
 1 files changed, 96 insertions(+), 55 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index a7f8f59..9840ea8 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -1,15 +1,15 @@
 import { PluggableList } from "unified"
 import { QuartzTransformerPlugin } from "../types"
-import { Root, HTML, BlockContent, DefinitionContent, Code } from 'mdast'
+import { Root, HTML, BlockContent, DefinitionContent, Code } from "mdast"
 import { findAndReplace } from "mdast-util-find-and-replace"
-import { slug as slugAnchor } from 'github-slugger'
+import { slug as slugAnchor } from "github-slugger"
 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"
-import { FilePath, slugifyFilePath, transformInternalLink } from "../../path"
+import { FilePath, canonicalizeServer, pathToRoot, slugifyFilePath } from "../../path"
 
 export interface Options {
   comments: boolean
@@ -17,6 +17,7 @@
   wikilinks: boolean
   callouts: boolean
   mermaid: boolean
+  parseTags: boolean
 }
 
 const defaultOptions: Options = {
@@ -25,6 +26,7 @@
   wikilinks: true,
   callouts: true,
   mermaid: true,
+  parseTags: true,
 }
 
 const icons = {
@@ -71,7 +73,7 @@
     bug: "bug",
     example: "example",
     quote: "quote",
-    cite: "quote"
+    cite: "quote",
   }
 
   return calloutMapping[callout]
@@ -94,31 +96,30 @@
 }
 
 const capitalize = (s: string): string => {
-  return s.substring(0, 1).toUpperCase() + s.substring(1);
+  return s.substring(0, 1).toUpperCase() + s.substring(1)
 }
 
-// Match wikilinks 
 // !?               -> optional embedding
 // \[\[             -> open brace
 // ([^\[\]\|\#]+)   -> one or more non-special characters ([,],|, or #) (name)
 // (#[^\[\]\|\#]+)? -> # then one or more non-special characters (heading link)
 // (|[^\[\]\|\#]+)? -> | then one or more non-special characters (alias)
 const wikilinkRegex = new RegExp(/!?\[\[([^\[\]\|\#]+)(#[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/, "g")
-
-// Match highlights 
 const highlightRegex = new RegExp(/==(.+)==/, "g")
-
-// Match comments 
 const commentRegex = new RegExp(/%%(.+)%%/, "g")
-
 // from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
 const calloutRegex = new RegExp(/^\[\!(\w+)\]([+-]?)/)
+// (?:^| )   -> non-capturing group, tag should start be separated by a space or be the start of the line
+// #(\w+)    -> tag itself is # followed by a string of alpha-numeric characters
+const tagRegex = new RegExp(/(?:^| )#(\w+)/, "g")
 
-export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
+export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
+  userOpts,
+) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "ObsidianFlavoredMarkdown",
-    textTransform(src) {
+    textTransform(_ctx, src) {
       // pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex)
       if (opts.wikilinks) {
         src = src.toString()
@@ -154,28 +155,31 @@
                   width ||= "auto"
                   height ||= "auto"
                   return {
-                    type: 'image',
+                    type: "image",
                     url,
                     data: {
                       hProperties: {
-                        width, height
-                      }
-                    }
+                        width,
+                        height,
+                      },
+                    },
                   }
                 } else if ([".mp4", ".webm", ".ogv", ".mov", ".mkv"].includes(ext)) {
                   return {
-                    type: 'html',
-                    value: `<video src="${url}" controls></video>`
+                    type: "html",
+                    value: `<video src="${url}" controls></video>`,
                   }
-                } else if ([".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext)) {
+                } else if (
+                  [".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext)
+                ) {
                   return {
-                    type: 'html',
-                    value: `<audio src="${url}" controls></audio>`
+                    type: "html",
+                    value: `<audio src="${url}" controls></audio>`,
                   }
                 } else if ([".pdf"].includes(ext)) {
                   return {
-                    type: 'html',
-                    value: `<iframe src="${url}"></iframe>`
+                    type: "html",
+                    value: `<iframe src="${url}"></iframe>`,
                   }
                 } else {
                   // TODO: this is the node embed case
@@ -187,17 +191,18 @@
               // const url = transformInternalLink(fp + anchor)
               const url = fp + anchor
               return {
-                type: 'link',
+                type: "link",
                 url,
-                children: [{
-                  type: 'text',
-                  value: alias ?? fp
-                }]
+                children: [
+                  {
+                    type: "text",
+                    value: alias ?? fp,
+                  },
+                ],
               }
             })
           }
-        }
-        )
+        })
       }
 
       if (opts.highlight) {
@@ -206,21 +211,21 @@
             findAndReplace(tree, highlightRegex, (_value: string, ...capture: string[]) => {
               const [inner] = capture
               return {
-                type: 'html',
-                value: `<span class="text-highlight">${inner}</span>`
+                type: "html",
+                value: `<span class="text-highlight">${inner}</span>`,
               }
             })
           }
         })
       }
-      
+
       if (opts.comments) {
         plugins.push(() => {
           return (tree: Root, _file) => {
             findAndReplace(tree, commentRegex, (_value: string, ..._capture: string[]) => {
               return {
-                type: 'text',
-                value: ''
+                type: "text",
+                value: "",
               }
             })
           }
@@ -252,7 +257,8 @@
                 const calloutType = typeString.toLowerCase() as keyof typeof callouts
                 const collapse = collapseChar === "+" || collapseChar === "-"
                 const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
-                const title = match.input.slice(calloutDirective.length).trim() || capitalize(calloutType)
+                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>
@@ -266,17 +272,20 @@
                   <div class="callout-icon">${callouts[canonicalizeCallout(calloutType)]}</div>
                   <div class="callout-title-inner">${title}</div>
                   ${collapse ? toggleIcon : ""}
-                </div>`
+                </div>`,
                 }
 
                 const blockquoteContent: (BlockContent | DefinitionContent)[] = [titleNode]
                 if (remainingText.length > 0) {
                   blockquoteContent.push({
-                    type: 'paragraph',
-                    children: [{
-                      type: 'text',
-                      value: remainingText,
-                    }, ...restChildren]
+                    type: "paragraph",
+                    children: [
+                      {
+                        type: "text",
+                        value: remainingText,
+                      },
+                      ...restChildren,
+                    ],
                   })
                 }
 
@@ -287,10 +296,12 @@
                 node.data = {
                   hProperties: {
                     ...(node.data?.hProperties ?? {}),
-                    className: `callout ${collapse ? "is-collapsible" : ""} ${defaultState === "collapsed" ? "is-collapsed" : ""}`,
+                    className: `callout ${collapse ? "is-collapsible" : ""} ${
+                      defaultState === "collapsed" ? "is-collapsed" : ""
+                    }`,
                     "data-callout": calloutType,
                     "data-callout-fold": collapse,
-                  }
+                  },
                 }
               }
             })
@@ -301,12 +312,12 @@
       if (opts.mermaid) {
         plugins.push(() => {
           return (tree: Root, _file) => {
-            visit(tree, 'code', (node: Code) => {
-              if (node.lang === 'mermaid') {
+            visit(tree, "code", (node: Code) => {
+              if (node.lang === "mermaid") {
                 node.data = {
                   hProperties: {
-                    className: 'mermaid'
-                  }
+                    className: ["mermaid"],
+                  },
                 }
               }
             })
@@ -314,6 +325,36 @@
         })
       }
 
+      if (opts.parseTags) {
+        plugins.push(() => {
+          return (tree: Root, file) => {
+            const slug = canonicalizeServer(file.data.slug!)
+            const base = pathToRoot(slug)
+            findAndReplace(tree, tagRegex, (value: string, tag: string) => {
+              if (file.data.frontmatter) {
+                file.data.frontmatter.tags.push(tag)
+              }
+
+              return {
+                type: "link",
+                url: base + `/tags/${slugAnchor(tag)}`,
+                data: {
+                  hProperties: {
+                    className: ["tag-link"],
+                  },
+                },
+                children: [
+                  {
+                    type: "text",
+                    value,
+                  },
+                ],
+              }
+            })
+          }
+        })
+      }
+
       return plugins
     },
     htmlPlugins() {
@@ -325,8 +366,8 @@
       if (opts.callouts) {
         js.push({
           script: calloutScript,
-          loadTime: 'afterDOMReady',
-          contentType: 'inline'
+          loadTime: "afterDOMReady",
+          contentType: "inline",
         })
       }
 
@@ -336,13 +377,13 @@
           import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
           mermaid.initialize({ startOnLoad: true });
           `,
-          loadTime: 'afterDOMReady',
-          moduleType: 'module',
-          contentType: 'inline'
+          loadTime: "afterDOMReady",
+          moduleType: "module",
+          contentType: "inline",
         })
       }
 
       return { js }
-    }
+    },
   }
 }

--
Gitblit v1.10.0