Start bringing over a (curated) configuration for CSS and Eleventy

config/plugins/image.js

@@ -0,0 +1,54 @@
+const Image = require('@11ty/eleventy-img');
+
+const defaultSizes = `
+    (max-width: 300px) 300px,
+    (max-width: 600px) 600px,
+    (max-width: 1000px) 1000px,
+    (max-width: 1440px) 1440px,
+    (max-width: 2500px) 2500px,
+    (min-width: 2500px) 3840px
+`;
+
+const imageShortcode = (src, alt, cls, sizes = defaultSizes, widths = [300, 600, 1000, 1440, 2500, 3840]) => {
+    let options = {
+        widths: widths,
+        formats: ['webp', 'jpeg'],
+        outputDir: "./_site/img",
+    };
+
+    // generate images, while this is async we don’t wait
+    Image(src, options);
+
+    let imageAttributes = {
+        class: cls,
+        alt,
+        sizes,
+        decoding: "async",
+    };
+    // get metadata even the images are not fully generated
+    let metadata = Image.statsSync(src, options);
+    return Image.generateHTML(metadata, imageAttributes);
+}
+
+const remoteImageShortcode = async (src, alt, cls, sizes = defaultSizes, widths = [300, 600, 1000, 1440, 2500, 3840]) => {
+    let metadata = await Image(src, {
+        widths,
+        formats: ["webp", "avif", "jpeg", "png"],
+        outputDir: "./_site/img",
+      });
+    
+      let imageAttributes = {
+        alt,
+        class: cls,
+        sizes,
+        loading: "lazy",
+        decoding: "async",
+      };
+    
+      // You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
+      return Image.generateHTML(metadata, imageAttributes);
+}
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addShortcode("image", imageShortcode);
+    eleventyConfig.addAsyncShortcode("remoteImage", remoteImageShortcode);
+}

config/plugins/index.js

@@ -0,0 +1,11 @@
+const markdownPlugin = require('./markdown');
+const rss = require('@11ty/eleventy-plugin-rss');
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const imagePlugin = require('./image');
+
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addPlugin(syntaxHighlight);
+	eleventyConfig.addPlugin(rss);
+	eleventyConfig.addPlugin(markdownPlugin);
+	eleventyConfig.addPlugin(imagePlugin);
+}

config/plugins/markdown.js

@@ -0,0 +1,69 @@
+const path = require("path");
+
+const markdownIt = require('markdown-it');
+const markdownItPrism = require('markdown-it-prism');
+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');
+const markdownItFootnote = require('markdown-it-footnote');
+const markdownitMark = require('markdown-it-mark');
+const markdownitAbbr = require('markdown-it-abbr');
+const markdownItEleventyImg = require('markdown-it-eleventy-img');
+const { slugifyString } = require('../utils');
+const markdownLib = markdownIt({
+	html: true,
+	breaks: true,
+	linkify: true,
+	typographer: true
+  })
+	.disable('code')
+	.use(markdownItPrism, {
+	  defaultLanguage: 'plaintext'
+	})
+	.use(markdownItAnchor, {
+	  slugify: slugifyString,
+	  tabIndex: false,
+	  permalink: markdownItAnchor.permalink.headerLink({
+		class: 'heading-anchor'
+	  })
+	})
+	.use(markdownItClass, {
+	  ol: 'list',
+	  ul: 'list'
+	})
+	.use(markdownItLinkAttributes, [
+	  {
+		// match external links
+		matcher(href) {
+		  return href.match(/^https?:\/\//);
+		},
+		attrs: {
+		  target: '_blank',
+		  rel: 'noreferrer noopener'
+		}
+	  }
+	])
+	.use(markdownItEmoji)
+	.use(markdownItFootnote)
+	.use(markdownitMark)
+	.use(markdownitAbbr)
+	.use(markdownItEleventyImg, {
+		imgOptions: {
+			widths: [300, 600, 1000, 1440],
+			urlPath: "/img/",
+			outputDir: path.join("_site", "img"),
+			formats: ["avif", "webp", "jpeg"]
+		},
+		globalAttributes: {
+			sizes: `(max-width: 300px) 300px,
+			(max-width: 600px) 600px,
+			(max-width: 1000px) 1000px,
+			(max-width: 1440px) 1440px,
+			100%`
+		}
+	});
+  
+  module.exports = function(eleventyConfig) {
+	eleventyConfig.setLibrary('md', markdownLib);
+  };