links.ts: document link identifier image feature

This commit is contained in:
bfahrenfort 2024-12-23 14:34:55 -06:00
parent 936ce4ff07
commit ef2e56f029
2 changed files with 15 additions and 1 deletions

View File

@ -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`. - `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`. - `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. - `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] > [!warning]
> Removing this plugin is _not_ recommended and will likely break the page. > Removing this plugin is _not_ recommended and will likely break the page.

View File

@ -1,5 +1,6 @@
import { QuartzConfig } from "./quartz/cfg" import { QuartzConfig } from "./quartz/cfg"
import * as Plugin from "./quartz/plugins" import * as Plugin from "./quartz/plugins"
import { Image, Path, Emoji } from "./quartz/plugins/transformers/links"
/** /**
* Quartz 4.0 Configuration * Quartz 4.0 Configuration
@ -70,7 +71,12 @@ const config: QuartzConfig = {
Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }), Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
Plugin.GitHubFlavoredMarkdown(), Plugin.GitHubFlavoredMarkdown(),
Plugin.TableOfContents(), 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.Description(),
Plugin.Latex({ renderEngine: "katex" }), Plugin.Latex({ renderEngine: "katex" }),
], ],