update responsive image processing

.eleventy.js

@@ -1,10 +1,12 @@
 'use strict';
 
+const path = require('path');
+
 const rss = require('@11ty/eleventy-plugin-rss');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const yaml = require('js-yaml');
 const _ = require('lodash');
-const Image = require('@11ty/eleventy-img');
+const image = require('@11ty/eleventy-img');
 
 const birds = require('#/birds');
 const events = require('#/events');
@@ -14,29 +16,55 @@ const taxonomy = require('#/taxonomy');
 const time = require('#/time');
 const type = require('#/type');
 const utils = require('#/utils');
-const images = require('#/images');
 
 // eleventy image plugin
-function imageShortcode(src, cls, alt, sizes, widths) {
-  let options = {
-    widths: widths,
-    formats: ['jpeg'],
+const imageShortcode = (src, alt, attrs, sizes, getUrl) => {
+  const imgConfig = taxonomy.fromTaxonomy('img');
+  const imgSizes =
+    sizes && imgConfig.sizes[sizes]
+      ? imgConfig.sizes[sizes]
+      : sizes || imgConfig.sizes.default;
+
+  const options = {
+    widths: imgConfig.widths,
+    formats: imgConfig.formats,
+    // test path and directory that will be changed in this PR
+    urlPath: '/img/',
+    outputDir: './_site/img/',
+    // eslint-disable-next-line
+    filenameFormat: function (id, src, width, format, options) {
+      const extension = path.extname(src);
+      const name = path.basename(src, extension);
+
+      return `${name}-${width}w.${format}`;
+    },
   };
 
   // generate images, while this is async we don’t wait
-  Image(src, options);
-
-  let imageAttributes = {
-    class: cls,
-    alt,
-    sizes,
-    loading: 'lazy',
-    decoding: 'async',
-  };
-  // get metadata even the images are not fully generated
-  metadata = Image.statsSync(src, options);
-  return Image.generateHTML(metadata, imageAttributes);
-}
+  image(src, options);
+
+  // eslint-disable-next-line no-sync
+  const metadata = image.statsSync(src, options);
+
+  if (getUrl) {
+    const data = metadata.jpeg[metadata.jpeg.length - 1];
+    return data.url;
+  }
+
+  const imageAttributes = _.merge(
+    {
+      alt,
+      sizes: imgSizes,
+      loading: 'lazy',
+      decoding: 'async',
+    },
+    attrs,
+  );
+
+  return image.generateHTML(metadata, imageAttributes, {
+    whitespaceMode: 'inline',
+  });
+};
 
 module.exports = (eleventyConfig) => {
   eleventyConfig.setUseGitIgnore(false);
@@ -162,19 +190,20 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter('removeMd', type.removeMd);
   eleventyConfig.addFilter('elide', type.elide);
 
-  eleventyConfig.addFilter('imgSuffix', images.imgSuffix);
-  eleventyConfig.addFilter('imgSize', images.imgSize);
-
   eleventyConfig.addFilter('max', (array) => Math.max(...array));
 
+  eleventyConfig.addFilter('imgSrc', (src) =>
+    imageShortcode(src, null, null, null, true),
+  );
+
   // shortcodes
   eleventyConfig.addPairedShortcode('md', type.md);
   eleventyConfig.addPairedShortcode('mdInline', type.mdInline);
   eleventyConfig.addPairedShortcode('h', type.heading);
   eleventyConfig.addShortcode('getDate', (format) =>
     time.getDate(time.now(), format),
   );
-  eleventyConfig.addNunjucksShortcode('myImage', imageShortcode);
+  eleventyConfig.addNunjucksShortcode('image', imageShortcode);
 
   // config
   eleventyConfig.setLibrary('md', type.mdown);