@parksb/markdown-it-image-lazy-loading 2.0.2

package/README.md

@@ -0,0 +1,69 @@
+A markdown-it plugin supporting Chrome 75's [native image lazy-loading](https://addyosmani.com/blog/lazy-loading/) and [async decoding](https://github.com/whatwg/html/pull/3221).
+
+## Install
+
+```bash
+$ npm install markdown-it-image-lazy-loading
+```
+
+## Usage
+
+Load it in ES module.
+
+```javascript
+import markdownit from 'markdown-it';
+import lazy_loading from 'markdown-it-image-lazy-loading';
+
+const md = markdownit();
+md.use(lazy_loading);
+md.render(`![](example.png "image title")`);
+// <p><img src="example.png" alt="" title="image title" loading="lazy"></p>\n
+```
+
+Or load it in CommonJS module.
+
+```javascript
+const md = require('markdown-it')();
+const lazy_loading = require('markdown-it-image-lazy-loading');
+md.use(lazy_loading);
+
+md.render(`![](example.png "image title")`);
+// <p><img src="example.png" alt="" title="image title" loading="lazy"></p>\n
+```
+
+If you want the `decoding="async"` attribute, enable the plugin's `decoding` option.
+
+```javascript
+md.use(lazy_loading, {
+  decoding: true,
+});
+
+md.render(`![](example.png "image title")`);
+// <p><img src="example.png" alt="" title="image title" loading="lazy" decoding="async"></p>\n
+```
+
+The plugin can also add `width` and `height` attributes to each image. This can prevent [cumulative layout shifts (CLS)](https://web.dev/cls/):
+
+```javascript
+md.use(lazy_loading, {
+  image_size: true,
+
+  // Where your images are stored
+  base_path: __dirname + 'src/',
+});
+
+md.render(`![](example.png "image title")`);
+// <p><img src="example.png" alt="" title="image title" loading="lazy" width="100" height="100"></p>\n
+```
+
+To keep images responsive, also include the following CSS:
+```css
+img{
+    max-width: 100%;
+    height: auto;
+}
+```
+
+## License
+
+MIT

package/index.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var imageSize = require('image-size');
+var path = require('node:path');
+
+function lazy_loading_plugin(md, mdOptions) {
+  var defaultImageRenderer = md.renderer.rules.image;
+  var count = 0;
+
+  var skipCount = mdOptions && mdOptions.skip_count !== undefined ? mdOptions.skip_count : 0;
+  var excludeExtensions = mdOptions && mdOptions.exclude_extensions || [];
+  var maxWidth = mdOptions && mdOptions.max_width !== undefined ? mdOptions.max_width : null;
+
+  md.renderer.rules.image = function (tokens, idx, options, env, self) {
+    var token = tokens[idx];
+    if (count >= skipCount) {
+      token.attrSet('loading', 'lazy');
+    }
+
+    if (mdOptions && mdOptions.decoding === true) {
+      token.attrSet('decoding', 'async');
+    }
+
+    if (mdOptions && mdOptions.base_path && mdOptions.image_size === true) {
+      const imgSrc = token.attrGet('src');
+
+      const imgExt = path.extname(imgSrc);
+      if (excludeExtensions.includes(imgExt)) {
+        return defaultImageRenderer(tokens, idx, options, env, self);
+      }
+
+      const imgPath = path.join(mdOptions.base_path, imgSrc);
+      const dimensions = imageSize(imgPath);
+
+      if (maxWidth !== null && dimensions.width > maxWidth) {
+        dimensions.height = Math.round(dimensions.height * (maxWidth / dimensions.width));
+        dimensions.width = maxWidth;
+      }
+
+      token.attrSet('width', dimensions.width);
+      token.attrSet('height', dimensions.height);
+    }
+
+    count += 1;
+
+    return defaultImageRenderer(tokens, idx, options, env, self);
+  };
+}
+
+module.exports = lazy_loading_plugin;

package/index.mjs

@@ -0,0 +1,48 @@
+import imageSize from 'image-size';
+import path from 'node:path';
+
+function lazy_loading_plugin(md, mdOptions) {
+  var defaultImageRenderer = md.renderer.rules.image;
+  var count = 0;
+
+  var skipCount = mdOptions && mdOptions.skip_count !== undefined ? mdOptions.skip_count : 0;
+  var excludeExtensions = mdOptions && mdOptions.exclude_extensions || [];
+  var maxWidth = mdOptions && mdOptions.max_width !== undefined ? mdOptions.max_width : null;
+
+  md.renderer.rules.image = function (tokens, idx, options, env, self) {
+    var token = tokens[idx];
+    if (count >= skipCount) {
+      token.attrSet('loading', 'lazy');
+    }
+
+    if (mdOptions && mdOptions.decoding === true) {
+      token.attrSet('decoding', 'async');
+    }
+
+    if (mdOptions && mdOptions.base_path && mdOptions.image_size === true) {
+      const imgSrc = token.attrGet('src');
+
+      const imgExt = path.extname(imgSrc);
+      if (excludeExtensions.includes(imgExt)) {
+        return defaultImageRenderer(tokens, idx, options, env, self);
+      }
+
+      const imgPath = path.join(mdOptions.base_path, imgSrc);
+      const dimensions = imageSize(imgPath);
+
+      if (maxWidth !== null && dimensions.width > maxWidth) {
+        dimensions.height = Math.round(dimensions.height * (maxWidth / dimensions.width));
+        dimensions.width = maxWidth;
+      }
+
+      token.attrSet('width', dimensions.width);
+      token.attrSet('height', dimensions.height);
+    }
+
+    count += 1;
+
+    return defaultImageRenderer(tokens, idx, options, env, self);
+  };
+};
+
+export default lazy_loading_plugin;

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@parksb/markdown-it-image-lazy-loading",
+  "version": "2.0.2",
+  "description": "a markdown-it plugin supporting Chrome 75's native image lazy-loading",
+  "main": "index.js",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "scripts": {
+    "build": "rollup --config rollup.config.mjs",
+    "test": "npm run build && npx tape test/*.js",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "markdown-it-plugin",
+    "markdown-it",
+    "lazyload"
+  ],
+  "author": "parksb <parkgds@gmail.com>",
+  "homepage": "https://github.com/parksb/markdown-it-image-lazy-loading",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/parksb/markdown-it-image-lazy-loading.git"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "image-size": "^1.0.0"
+  },
+  "devDependencies": {
+    "markdown-it": "^14.0.0",
+    "rollup": "^4.9.1",
+    "tape": "^5.3.2"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,8 @@
+export default {
+	input: 'index.mjs',
+	output: {
+		file: 'index.js',
+		format: 'cjs'
+	},
+	external: ['image-size', 'node:path']
+};