Address #36 - Enhancement: use eleventy-img, other image optimization…

…s; implement elevety-img, takes care of 'Optimize image loading' and 'Reduce layout shift'

.eleventy.js

@@ -6,13 +6,16 @@ const tocPlugin = require('eleventy-plugin-toc');
 // Markdown Libraries
 const markdownIt = require('markdown-it');
 const markdownItAnchor = require('markdown-it-anchor');
-const markdownItAttrs = require('markdown-it-attrs')
+const markdownItAttrs = require('markdown-it-attrs');
 
 // Filters
 const dateFilter = require('./src/filters/date-filter.js');
 const w3DateFilter = require('./src/filters/w3-date-filter.js');
 const cleanTocFilter = require('./src/filters/clean-toc-filter.js');
 
+// Shortcodes
+const imageShortcode = require('./src/shortcodes/image.js');
+
 // Utils
 const sortByDisplayOrder = require('./src/utils/sort-by-display-order.js');
 
@@ -22,6 +25,9 @@ module.exports = config => {
   config.addFilter('w3DateFilter', w3DateFilter);
   config.addFilter('cleanTocFilter', cleanTocFilter);
 
+  // Add shortcodes
+  config.addNunjucksAsyncShortcode('image', imageShortcode);
+
   // Plugins
   config.addPlugin(rssPlugin);
   config.addPlugin(externalLinksPlugin);