feat: lazyLoading specifier in link transformer

Jacky Zhao

2023-12-28 4b6c7aeffe6028f68af7704d7928584a46d3bb1f

feat: lazyLoading specifier in link transformer

 quartz/plugins/transformers/links.ts

@@ -12,6 +12,7 @@
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 @@
  /** 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<Partial<Options> | undefined> = (userOpts) => {
@@ -34,7 +37,7 @@
    htmlPlugins(ctx) {
      return [
        () => {
          return (tree, file) => {
          return (tree: Root, file) => {
            const curSlug = simplifySlug(file.data.slug!)
            const outgoing: Set<SimpleSlug> = new Set()

@@ -51,8 +54,8 @@
                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 @@
                  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 @@
                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(