Merge pull request #63 from Kuadrant/kuadrant-roadmap

Add post on kuadrant process & roadmap

.eleventy.js

@@ -5,6 +5,7 @@ const string = require('string')
 const slugify = s => string(s).slugify().toString()
 const eleventyAsciidoc = require("eleventy-plugin-asciidoc");
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+const pluginImages = require("./eleventy.config.images.js");
 
 
 module.exports = function(eleventyConfig) {
@@ -21,6 +22,9 @@ module.exports = function(eleventyConfig) {
     linkify: true
   };
 
+  // Watch content images for the image pipeline.
+eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
+
   eleventyConfig.setLibrary(
     'md',
     markdownIt(markdownItOptions).use(markdownItAnchor, {
@@ -29,6 +33,7 @@ module.exports = function(eleventyConfig) {
     })
   );
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
+	eleventyConfig.addPlugin(pluginImages);
 
   eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
 		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 resources
 _site
+/img

eleventy.config.images.js

@@ -0,0 +1,51 @@
+const path = require("path");
+const eleventyImage = require("@11ty/eleventy-img");
+
+function relativeToInputPath(inputPath, relativeFilePath) {
+	let split = inputPath.split("/");
+	split.pop();
+
+	return path.resolve(split.join(path.sep), relativeFilePath);
+
+}
+
+function isFullUrl(url) {
+	try {
+		new URL(url);
+		return true;
+	} catch(e) {
+		return false;
+	}
+}
+
+module.exports = function(eleventyConfig) {
+	// Eleventy Image shortcode
+	// https://www.11ty.dev/docs/plugins/image/
+	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) {
+		// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
+		// Warning: Avif can be resource-intensive so take care!
+		let formats = ["avif", "webp", "auto"];
+		let input;
+		if(isFullUrl(src)) {
+			input = src;
+		} else {
+			input = relativeToInputPath(this.page.inputPath, src);
+		}
+
+		let metadata = await eleventyImage(input, {
+			widths: widths || ["900,600,300"],
+			formats,
+			outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
+		});
+
+		// TODO loading=eager and fetchpriority=high
+		let imageAttributes = {
+			alt,
+			sizes,
+			loading: "lazy",
+			decoding: "async",
+		};
+
+		return eleventyImage.generateHTML(metadata, imageAttributes);
+	});
+};