From 4b6c7aeffe6028f68af7704d7928584a46d3bb1f Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Thu, 28 Dec 2023 13:56:20 -0800 Subject: [PATCH] feat: lazyLoading specifier in link transformer --- quartz/plugins/transformers/links.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts index 3072959..50d2d1a 100644 --- a/quartz/plugins/transformers/links.ts +++ b/quartz/plugins/transformers/links.ts @@ -12,6 +12,7 @@ import { import path from "path" import { visit } from "unist-util-visit" import isAbsoluteUrl from "is-absolute-url" +import { Root } from "hast" interface Options { /** How to resolve Markdown paths */ @@ -19,12 +20,14 @@ interface Options { /** Strips folders from a link so that it looks nice */ prettyLinks: boolean openLinksInNewTab: boolean + lazyLoad: boolean } const defaultOptions: Options = { markdownLinkResolution: "absolute", prettyLinks: true, openLinksInNewTab: false, + lazyLoad: false, } export const CrawlLinks: QuartzTransformerPlugin | undefined> = (userOpts) => { @@ -34,7 +37,7 @@ export const CrawlLinks: QuartzTransformerPlugin | undefined> = htmlPlugins(ctx) { return [ () => { - return (tree, file) => { + return (tree: Root, file) => { const curSlug = simplifySlug(file.data.slug!) const outgoing: Set = new Set() @@ -51,8 +54,8 @@ export const CrawlLinks: QuartzTransformerPlugin | undefined> = typeof node.properties.href === "string" ) { let dest = node.properties.href as RelativeURL - node.properties.className ??= [] - node.properties.className.push(isAbsoluteUrl(dest) ? "external" : "internal") + const classes = (node.properties.className ?? []) as string[] + classes.push(isAbsoluteUrl(dest) ? "external" : "internal") // Check if the link has alias text if ( @@ -61,8 +64,9 @@ export const CrawlLinks: QuartzTransformerPlugin | undefined> = node.children[0].value !== dest ) { // Add the 'alias' class if the text content is not the same as the href - node.properties.className.push("alias") + classes.push("alias") } + node.properties.className = classes if (opts.openLinksInNewTab) { node.properties.target = "_blank" @@ -111,6 +115,10 @@ export const CrawlLinks: QuartzTransformerPlugin | undefined> = node.properties && typeof node.properties.src === "string" ) { + if (opts.lazyLoad) { + node.properties.loading = "lazy" + } + if (!isAbsoluteUrl(node.properties.src)) { let dest = node.properties.src as RelativeURL dest = node.properties.src = transformLink(