DockerFiles/quartz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lazyLoading specifier in link transformer

Browse Source
This commit is contained in:
Jacky Zhao 2023-12-28 13:56:20 -08:00
parent e277ed5c30
commit 4b6c7aeffe
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
quartz/plugins/transformers/links.ts
View File

@ -12,6 +12,7 @@ import {
import path from "path" import path from "path"
import { visit } from "unist-util-visit" import { visit } from "unist-util-visit"
import isAbsoluteUrl from "is-absolute-url" import isAbsoluteUrl from "is-absolute-url"
import { Root } from "hast"
interface Options { interface Options {
/** How to resolve Markdown paths */ /** How to resolve Markdown paths */
@ -19,12 +20,14 @@ interface Options {
/** Strips folders from a link so that it looks nice */ /** Strips folders from a link so that it looks nice */
prettyLinks: boolean prettyLinks: boolean
openLinksInNewTab: boolean openLinksInNewTab: boolean
lazyLoad: boolean
} }
const defaultOptions: Options = { const defaultOptions: Options = {
markdownLinkResolution: "absolute", markdownLinkResolution: "absolute",
prettyLinks: true, prettyLinks: true,
openLinksInNewTab: false, openLinksInNewTab: false,
lazyLoad: false,
} }
export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => { export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
@ -34,7 +37,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
htmlPlugins(ctx) { htmlPlugins(ctx) {
return [ return [
() => { () => {
return (tree, file) => { return (tree: Root, file) => {
const curSlug = simplifySlug(file.data.slug!) const curSlug = simplifySlug(file.data.slug!)
const outgoing: Set<SimpleSlug> = new Set() const outgoing: Set<SimpleSlug> = new Set()
@ -51,8 +54,8 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
typeof node.properties.href === "string" typeof node.properties.href === "string"
) { ) {
let dest = node.properties.href as RelativeURL let dest = node.properties.href as RelativeURL
node.properties.className ??= [] const classes = (node.properties.className ?? []) as string[]
node.properties.className.push(isAbsoluteUrl(dest) ? "external" : "internal") classes.push(isAbsoluteUrl(dest) ? "external" : "internal")
// Check if the link has alias text // Check if the link has alias text
if ( if (
@ -61,8 +64,9 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
node.children[0].value !== dest node.children[0].value !== dest
) { ) {
// Add the 'alias' class if the text content is not the same as the href // 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) { if (opts.openLinksInNewTab) {
node.properties.target = "_blank" node.properties.target = "_blank"
@ -111,6 +115,10 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
node.properties && node.properties &&
typeof node.properties.src === "string" typeof node.properties.src === "string"
) { ) {
if (opts.lazyLoad) {
node.properties.loading = "lazy"
}
if (!isAbsoluteUrl(node.properties.src)) { if (!isAbsoluteUrl(node.properties.src)) {
let dest = node.properties.src as RelativeURL let dest = node.properties.src as RelativeURL
dest = node.properties.src = transformLink( dest = node.properties.src = transformLink(