@stepbrobd/figure@2024.704.0Built and signed on GitHub ActionsBuilt and signed on GitHub Actions
Built and signed on GitHub Actions
latest
stepbrobd/figureforked from ruanyf/markdown-it-image-lazy-loading
This package works with DenoIt is unknown whether this package works with Cloudflare Workers, Node.js, Bun, Browsers
JSR Score
100%
Published
3 months ago (2024.704.0)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566import { imageSize } from "npm:image-size@1.1.1"; import { join } from "jsr:@std/path@0.225.2"; interface MarkdownIt { renderer: { rules: { image: (tokens: Token[], idx: number, options: any, env: any, self: any) => string; }; }; } interface Token { attrSet: (name: string, value: string) => void; attrGet: (name: string) => string | null; } interface PluginOptions { decoding?: boolean; base_path?: string; image_size?: boolean; figure?: boolean; } /** * Plugin for markdown-it. * * @param md - The markdown-it instance. * @param mdOptions - The options for the markdown-it instance. */ function lazy_loading_plugin(md: MarkdownIt, mdOptions: PluginOptions = {}) { const defaultImageRenderer = md.renderer.rules.image; md.renderer.rules.image = function (tokens: Token[], idx: number, options: any, env: any, self: any) { const token = tokens[idx]; token.attrSet("loading", "lazy"); if (mdOptions.decoding === true) { token.attrSet("decoding", "async"); } if (mdOptions.base_path && mdOptions.image_size === true) { const imgSrc = token.attrGet("src") || ""; const imgPath = join(mdOptions.base_path, imgSrc); try { const dimensions = imageSize(imgPath); if (dimensions.width && dimensions.height) { token.attrSet("width", dimensions.width.toString()); token.attrSet("height", dimensions.height.toString()); } } catch (error) { console.error(`Error getting image size for ${imgPath}:`, error); } } const renderedImage = defaultImageRenderer(tokens, idx, options, env, self); if (mdOptions.figure === true) { const altText = token.attrGet("alt") || ""; return `<figure>${renderedImage}<figcaption>${altText}</figcaption></figure>`; } return renderedImage; }; } export default lazy_loading_plugin;