add markdown-it-eleventy-img

config/plugins/markdown.js

@@ -4,6 +4,7 @@ const markdownItAnchor = require('markdown-it-anchor');
 const markdownItClass = require('@toycode/markdown-it-class');
 const markdownItLinkAttributes = require('markdown-it-link-attributes');
 const markdownItEmoji = require('markdown-it-emoji').full;
+const markdownItEleventyImg = require('markdown-it-eleventy-img');
 const markdownItFootnote = require('markdown-it-footnote');
 const markdownitMark = require('markdown-it-mark');
 const markdownitAbbr = require('markdown-it-abbr');
@@ -42,6 +43,22 @@ const markdownLib = markdownIt({
     }
   ])
   .use(markdownItEmoji)
+  .use(markdownItEleventyImg, {
+    imgOptions: {
+      widths: [440, 880],
+      urlPath: '/assets/images/',
+      outputDir: './dist/assets/images/',
+      formats: ['webp', 'jpeg']
+    },
+    globalAttributes: {
+      loading: 'lazy',
+      decoding: 'async',
+      sizes: '90vw'
+    },
+    resolvePath: (filepath, env) => {
+      return path.join('src', filepath);
+    }
+  })
   .use(markdownItFootnote)
   .use(markdownitMark)
   .use(markdownitAbbr);

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "eleventy-excellent",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "eleventy-excellent",
-      "version": "2.0.2",
+      "version": "2.1.0",
       "license": "ISC",
       "dependencies": {
         "@11ty/eleventy": "^2.0.1",
@@ -33,6 +33,7 @@
         "markdown-it": "^14.0.0",
         "markdown-it-abbr": "^2.0.0",
         "markdown-it-anchor": "^8.6.5",
+        "markdown-it-eleventy-img": "^0.10.1",
         "markdown-it-emoji": "^3.0.0",
         "markdown-it-footnote": "^4.0.0",
         "markdown-it-link-attributes": "^4.0.1",
@@ -3756,6 +3757,21 @@
         "markdown-it": "*"
       }
     },
+    "node_modules/markdown-it-eleventy-img": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-eleventy-img/-/markdown-it-eleventy-img-0.10.1.tgz",
+      "integrity": "sha512-MaPM7M1qFzbMj1kUeOiC4ZKICO+543bCDyCd7X3PvUdKwIX1dLFv00jO4D6rJPhiJTW7iFdHkRATuvgUdYCE2w==",
+      "dev": true,
+      "dependencies": {
+        "@11ty/eleventy-img": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14.15"
+      },
+      "peerDependencies": {
+        "markdown-it": ">= 9.0.0"
+      }
+    },
     "node_modules/markdown-it-emoji": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-3.0.0.tgz",

package.json

@@ -44,6 +44,7 @@
     "markdown-it": "^14.0.0",
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-anchor": "^8.6.5",
+    "markdown-it-eleventy-img": "^0.10.1",
     "markdown-it-emoji": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-link-attributes": "^4.0.1",