links.ts: document link identifier image feature

docs/plugins/CrawlLinks.md

@@ -19,6 +19,14 @@ This plugin accepts the following configuration options:
 - `openLinksInNewTab`: If `true`, configures external links to open in a new tab. Defaults to `false`.
 - `lazyLoad`: If `true`, adds lazy loading to resource elements (`img`, `video`, etc.) to improve page load performance. Defaults to `false`.
 - `externalLinkIcon`: Adds an icon next to external links when `true` (default) to visually distinguishing them from internal links.
+- `substitutions`: default `[]`, a list of regex-image pairs. When you write a link's URL to match the regex, it will display the image after the link on your webpage.
+  - images may either be an `Image(url)`, `Emoji(text)`, or `Path({code: code, viewbox: viewbox})`. Examples:
+    - `Image("https://website.com/image.jpg")`
+    - `Image("/static/icon.png")`
+    - `Emoji("🪴")`
+    - `Path({code: "really long string like M320 0H288V64h32 82.7L201.4 265.4...", viewbox: "0 0 512 512"})`
+  - Example use: `substitutions: [ [/garden!(.+)/, Emoji("🪴")], ],` 
+    - This would let you write links in Markdown like `[Someone's garden](garden!https://their-website.com)`, which would look like `Someone's Garden🪴` on the website.
 
 > [!warning]
 > Removing this plugin is _not_ recommended and will likely break the page.

quartz.config.ts

@@ -1,5 +1,6 @@
 import { QuartzConfig } from "./quartz/cfg"
 import * as Plugin from "./quartz/plugins"
+import { Image, Path, Emoji } from "./quartz/plugins/transformers/links"
 
 /**
  * Quartz 4.0 Configuration
@@ -70,7 +71,12 @@ const config: QuartzConfig = {
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.GitHubFlavoredMarkdown(),
       Plugin.TableOfContents(),
-      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
+      Plugin.CrawlLinks({
+        markdownLinkResolution: "shortest",
+        // See https://quartz.jzhao.xyz/plugins/CrawlLinks
+        // Try uncommenting the below line and writing [Someone's Garden](garden!https://jzhao.xyz/) in markdown
+        // substitutions: [ [/garden!(.+)/, Emoji("🪴")], ],
+      }),
       Plugin.Description(),
       Plugin.Latex({ renderEngine: "katex" }),
     ],