The Trans Directory
feat: lazyLoading specifier in link transformer
+12
-4
+12
-4
quartz/plugins/transformers/links.ts
+12
-4
quartz/plugins/transformers/links.ts
···
12
12
import path from "path"
13
13
import { visit } from "unist-util-visit"
14
14
import isAbsoluteUrl from "is-absolute-url"
15
+
import { Root } from "hast"
15
16
16
17
interface Options {
17
18
/** How to resolve Markdown paths */
···
19
20
/** Strips folders from a link so that it looks nice */
20
21
prettyLinks: boolean
21
22
openLinksInNewTab: boolean
23
+
lazyLoad: boolean
22
24
}
23
25
24
26
const defaultOptions: Options = {
25
27
markdownLinkResolution: "absolute",
26
28
prettyLinks: true,
27
29
openLinksInNewTab: false,
30
+
lazyLoad: false,
28
31
}
29
32
30
33
export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
···
34
37
htmlPlugins(ctx) {
35
38
return [
36
39
() => {
37
-
return (tree, file) => {
40
+
return (tree: Root, file) => {
38
41
const curSlug = simplifySlug(file.data.slug!)
39
42
const outgoing: Set<SimpleSlug> = new Set()
40
43
···
51
54
typeof node.properties.href === "string"
52
55
) {
53
56
let dest = node.properties.href as RelativeURL
54
-
node.properties.className ??= []
55
-
node.properties.className.push(isAbsoluteUrl(dest) ? "external" : "internal")
57
+
const classes = (node.properties.className ?? []) as string[]
58
+
classes.push(isAbsoluteUrl(dest) ? "external" : "internal")
56
59
57
60
// Check if the link has alias text
58
61
if (
···
61
64
node.children[0].value !== dest
62
65
) {
63
66
// Add the 'alias' class if the text content is not the same as the href
64
-
node.properties.className.push("alias")
67
+
classes.push("alias")
65
68
}
69
+
node.properties.className = classes
66
70
67
71
if (opts.openLinksInNewTab) {
68
72
node.properties.target = "_blank"
···
111
115
node.properties &&
112
116
typeof node.properties.src === "string"
113
117
) {
118
+
if (opts.lazyLoad) {
119
+
node.properties.loading = "lazy"
120
+
}
121
+
114
122
if (!isAbsoluteUrl(node.properties.src)) {
115
123
let dest = node.properties.src as RelativeURL
116
124
dest = node.properties.src = transformLink(