feat: lazyLoading specifier in link transformer
This commit is contained in:
		@@ -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(
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user