diff --git a/.dockerignore b/.dockerignore deleted file mode 100644 index aa7275461..000000000 --- a/.dockerignore +++ /dev/null @@ -1,2 +0,0 @@ -out/* -node_modules/* \ No newline at end of file diff --git a/.eleventy.js b/.eleventy.js index 7c0f6a3d9..ddc1a105c 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,15 +1,37 @@ const { EleventyRenderPlugin } = require("@11ty/eleventy"); - +const Image = require("@11ty/eleventy-img"); +const Sharp = require('sharp'); module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(EleventyRenderPlugin); // used to set the current active dropdown list item to active, depending on current page eleventyConfig.addShortcode("dropdownActive", function(dropdownItem) { - let isActive = this.page.url.includes(`/${dropdownItem}/`); return isActive ? "active" : ""; }); + + eleventyConfig.addShortcode("image", async function(src, alt, width, height) { + let resizedImage = await resizeImage(src, width, height, "cover"); + + let metadata = await Image(resizedImage, { + formats: ["webp", "png"], + outputDir: "out/img" + }); + + let imageAttributes = { + alt, + width: width, + height: height, + loading: "lazy", + decoding: "async", + }; + + // You bet we throw an error on a missing alt (alt="" works okay) + return Image.generateHTML(metadata, imageAttributes); + }); + + eleventyConfig.addPassthroughCopy({ "src/files/images": "images" }); // Return your Object options: return { @@ -19,4 +41,10 @@ module.exports = function(eleventyConfig) { output: "out" } } - }; \ No newline at end of file + }; + +async function resizeImage(src, width, height, mode) { + return await Sharp(src) + .resize({ width: width, height: height, fit: mode }) + .toBuffer(); +} \ No newline at end of file diff --git a/11ty-source/_layouts/blog-layout.liquid b/11ty-source/_layouts/blog-layout.liquid index 99163ddc7..351b2b08a 100644 --- a/11ty-source/_layouts/blog-layout.liquid +++ b/11ty-source/_layouts/blog-layout.liquid @@ -4,9 +4,8 @@ layout: default.liquid