[WIP] Upgrade to Eleventy 3

.eleventy.js

@@ -1,41 +1,51 @@
 // Config
-const paths = require("./config/paths.json");
+import paths from "./config/paths.js";
 
 // 11ty plugins
-const pluginLogging = require("@11ty/eleventy-plugin-directory-output");
-const pluginRss = require("@11ty/eleventy-plugin-rss");
-const pluginToc = require("eleventy-plugin-toc");
+import pluginLogging from "@11ty/eleventy-plugin-directory-output";
+import pluginRss from "@11ty/eleventy-plugin-rss";
+import pluginToc from "eleventy-plugin-toc";
 
 // Helpful functions that do stuff
-const {
+import {
   getArchiveYears,
   getArchivePostsByYear,
-} = require("./config/blogArchive.js");
-const {
+} from "./config/blogArchive.js";
+import {
   getAllTags,
   filterCommonTags,
   formatAsTag,
-} = require("./config/blogTags.js");
-const {
+} from "./config/blogTags.js";
+import {
   markdownConfig,
   markdownFilter,
   markdownFilterInline,
-} = require("./config/markdown.js");
-const { urlizeOpenGraphImage } = require("./config/opengraph.js");
-const { compileSass } = require("./config/sass.js");
-const {
+} from "./config/markdown.js";
+import { urlizeOpenGraphImage } from "./config/opengraph.js";
+import { compileSass } from "./config/sass.js";
+import {
   cachebustAssetUrl,
   formatDate,
   formatISODate,
   getFirstNItems,
   pageIsBlogPost,
-} = require("./config/utils.js");
+} from "./config/utils.js";
+
+// Shortcodes
+import calloutShortcode from "./config/shortcodes/callout.js";
+import characterShortcode from "./config/shortcodes/character.js";
+import figureShortcode from "./config/shortcodes/figure.js";
+import imageDifferShortcode from "./config/shortcodes/imageDiffer.js";
+import mastodonShortcode from "./config/shortcodes/mastodon.js";
+import responsiveImageShortcode from "./config/shortcodes/responsiveImages.js";
+import twitterShortcode from "./config/shortcodes/twitter.js";
+import youTubeShortcode from "./config/shortcodes/youtube.js";
 
 /**
  *  @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
  */
 
-module.exports = function (eleventyConfig) {
+export default async function (eleventyConfig) {
   // Turn off default log output
   eleventyConfig.setQuietMode(true);
 
@@ -80,39 +90,18 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addCollection("tags", getAllTags);
 
   // Custom Nunjucks Shortcodes
-  eleventyConfig.addPairedNunjucksShortcode(
-    "callout",
-    require("./config/shortcodes/callout.js")
-  );
-  eleventyConfig.addPairedNunjucksShortcode(
-    "character",
-    require("./config/shortcodes/character.js")
-  );
-  eleventyConfig.addPairedNunjucksShortcode(
-    "figure",
-    require("./config/shortcodes/figure.js")
-  );
-  eleventyConfig.addNunjucksAsyncShortcode(
-    "imageDiffer",
-    require("./config/shortcodes/imageDiffer.js")
-  );
+  eleventyConfig.addPairedNunjucksShortcode("callout", calloutShortcode);
+  eleventyConfig.addPairedNunjucksShortcode("character", characterShortcode);
+  eleventyConfig.addPairedNunjucksShortcode("figure", figureShortcode);
+  eleventyConfig.addNunjucksAsyncShortcode("imageDiffer", imageDifferShortcode);
   eleventyConfig.addPairedNunjucksShortcode("markdown", markdownFilter);
-  eleventyConfig.addPairedNunjucksShortcode(
-    "mastodon",
-    require("./config/shortcodes/mastodon.js")
-  );
+  eleventyConfig.addPairedNunjucksShortcode("mastodon", mastodonShortcode);
   eleventyConfig.addNunjucksAsyncShortcode(
     "responsiveImage",
-    require("./config/shortcodes/responsiveImages.js")
-  );
-  eleventyConfig.addPairedNunjucksShortcode(
-    "twitter",
-    require("./config/shortcodes/twitter.js")
-  );
-  eleventyConfig.addNunjucksShortcode(
-    "youtube",
-    require("./config/shortcodes/youtube.js")
+    responsiveImageShortcode
   );
+  eleventyConfig.addPairedNunjucksShortcode("twitter", twitterShortcode);
+  eleventyConfig.addNunjucksShortcode("youtube", youTubeShortcode);
 
   // Filters
   eleventyConfig.addFilter("cachebust", cachebustAssetUrl);
@@ -136,4 +125,4 @@ module.exports = function (eleventyConfig) {
       layouts: "_layouts",
     },
   };
-};
+}

config/blogArchive.js

@@ -21,7 +21,4 @@ const getArchivePostsByYear = function (collection, year) {
   return [...new Set(posts)];
 };
 
-module.exports = {
-  getArchiveYears,
-  getArchivePostsByYear,
-};
+export { getArchiveYears, getArchivePostsByYear };

config/blogTags.js

@@ -37,8 +37,4 @@ const formatAsTag = function (tag) {
   return `#${tag.replace(" ", "-")}`;
 };
 
-module.exports = {
-  getAllTags,
-  filterCommonTags,
-  formatAsTag,
-};
+export { getAllTags, filterCommonTags, formatAsTag };

config/markdown.js

@@ -1,6 +1,6 @@
-const markdownIt = require("markdown-it");
-const markdownItAnchor = require("markdown-it-anchor");
-const hljs = require("highlight.js");
+import markdownIt from "markdown-it";
+import markdownItAnchor from "markdown-it-anchor";
+import hljs from "highlight.js";
 
 /**
  * Process a string as Markdown, treating it as a block of content (i.e. it will
@@ -171,8 +171,4 @@ const markdownConfig = markdownIt({
   })
   .use(markdownItClasses);
 
-module.exports = {
-  markdownConfig,
-  markdownFilter,
-  markdownFilterInline,
-};
+export { markdownConfig, markdownFilter, markdownFilterInline };

config/opengraph.js

@@ -1,11 +1,9 @@
-const { DateTime } = require("luxon");
+import { DateTime } from "luxon";
 
 const urlizeOpenGraphImage = function (url) {
   return `https://v1.screenshot.11ty.dev/${encodeURIComponent(
     url
   )}/opengraph/_${DateTime.local().toFormat("X")}/`;
 };
 
-module.exports = {
-  urlizeOpenGraphImage,
-};
+export { urlizeOpenGraphImage };

config/paths.js

@@ -0,0 +1,6 @@
+export default {
+  src: "./src",
+  srcAssets: "./src/assets",
+  output: "./_site",
+  outputAssets: "./_site/assets",
+};

config/sass.js

@@ -1,9 +1,9 @@
-const paths = require("./paths.json");
+import paths from "./paths.js";
 
-const fs = require("fs-extra");
-const sass = require("sass");
-const postcss = require("postcss");
-const postcssPresetEnv = require("postcss-preset-env");
+import fs from "fs-extra";
+import sass from "sass";
+import postcss from "postcss";
+import postcssPresetEnv from "postcss-preset-env";
 
 /**
  * Syncronously compile sass by passing it first through the Sass compiler and
@@ -38,6 +38,4 @@ const compileSass = function () {
   return true;
 };
 
-module.exports = {
-  compileSass,
-};
+export { compileSass };

config/shortcodes/callout.js

@@ -1,6 +1,4 @@
-const calloutShortcode = function (content) {
+export default function (content) {
   // The markdown parser gets angry without the newline
   return `<div class="kimCallout">\n${content}</div>`;
-};
-
-module.exports = calloutShortcode;
+}

config/shortcodes/character.js

@@ -1,6 +1,5 @@
-const paths = require("../paths.json");
-
-const pluginImages = require("@11ty/eleventy-img");
+import paths from "../paths.js";
+import pluginImages from "@11ty/eleventy-img";
 
 // List of available variants, images and alt text
 const variants = {
@@ -76,7 +75,7 @@ const variants = {
   ],
 };
 
-const characterShortcode = function (content, args) {
+export default function (content, args) {
   if (!args.variant) {
     throw new Error(`Missing \`variant\` argument on character shortcode.`);
   }
@@ -110,6 +109,4 @@ const characterShortcode = function (content, args) {
     </figcaption>
     <blockquote class="kimCharacter_speech">\n${content}</blockquote>
   </figure>`;
-};
-
-module.exports = characterShortcode;
+}

config/shortcodes/figure.js

@@ -1,4 +1,4 @@
-const figureShortcode = function (content, args) {
+export default function (content, args) {
   let html = `<figure class="kimFigure${
     args?.float ? " kimFigure-" + args.float : ""
   }">${content}`;
@@ -7,6 +7,4 @@ const figureShortcode = function (content, args) {
   }
   html += `</figure>`;
   return html;
-};
-
-module.exports = figureShortcode;
+}

config/shortcodes/imageDiffer.js

@@ -1,11 +1,6 @@
-const responsiveImagesShortcode = require("./responsiveImages.js");
+import responsiveImagesShortcode from "./responsiveImages.js";
 
-const imageDifferShortCode = async function (
-  image1Src,
-  image1Alt,
-  image2Src,
-  image2Alt
-) {
+export default async function (image1Src, image1Alt, image2Src, image2Alt) {
   const imageOptions = { htmlPicture: false, classes: "kimImageDiffer_image" };
   const image1 = await responsiveImagesShortcode(
     image1Src,
@@ -18,6 +13,4 @@ const imageDifferShortCode = async function (
     imageOptions
   );
   return `<div class="kimImageDiffer" data-js="image-differ">${image1}${image2}</div>`;
-};
-
-module.exports = imageDifferShortCode;
+}

config/shortcodes/mastodon.js

@@ -1,6 +1,6 @@
-const { formatISODate } = require("../utils.js");
+import { formatISODate } from "../utils.js";
 
-const mastodonQuoteShortcode = function (content, args) {
+export default function (content, args) {
   // Error if any of these args are missing
   if (!args.host) {
     throw new Error("Mastodon embed is missing instance URL.");
@@ -26,6 +26,4 @@ const mastodonQuoteShortcode = function (content, args) {
   }/@${args.username}/${
     args.number
   }" rel="noreferrer noopener">original post</a>)</figcaption></figure>`;
-};
-
-module.exports = mastodonQuoteShortcode;
+}

config/shortcodes/responsiveImages.js

@@ -1,8 +1,7 @@
-const paths = require("../paths.json");
+import paths from "../paths.js";
+import pluginImages from "@11ty/eleventy-img";
 
-const pluginImages = require("@11ty/eleventy-img");
-
-const responsiveImagesShortcode = async function (src, alt, args) {
+export default async function (src, alt, args) {
   if (alt === undefined) {
     // You bet we throw an error on missing alt (alt="" works okay)
     throw new Error(`Missing \`alt\` on responsiveImage from: ${src}`);
@@ -57,6 +56,4 @@ const responsiveImagesShortcode = async function (src, alt, args) {
   }
 
   return imageCode;
-};
-
-module.exports = responsiveImagesShortcode;
+}

config/shortcodes/twitter.js

@@ -1,6 +1,6 @@
-const { formatISODate } = require("../utils.js");
+import { formatISODate } from "../utils.js";
 
-const twitterQuoteShortcode = function (content, args) {
+export default function (content, args) {
   // Error if any of these args are missing
   if (!args.username) {
     throw new Error("Tweet embed is missing username.");
@@ -22,6 +22,4 @@ const twitterQuoteShortcode = function (content, args) {
   )}.</time>  (<a href="https://twitter.com/${args.username}/status/${
     args.number
   }" rel="noreferrer noopener">original tweet</a>)</figcaption></figure>`;
-};
-
-module.exports = twitterQuoteShortcode;
+}

config/shortcodes/youtube.js

@@ -1,4 +1,4 @@
-const youtubeShortcode = function (videoId, settings = {}) {
+export default function (videoId, settings = {}) {
   // Combine settings
   const defaultSettings = {
     aspectRatio: "16/9",
@@ -25,6 +25,4 @@ const youtubeShortcode = function (videoId, settings = {}) {
   )}" src="https://www.youtube-nocookie.com/embed/${videoId}" title="${
     settings.title
   }" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>`;
-};
-
-module.exports = youtubeShortcode;
+}

config/utils.js

@@ -1,4 +1,4 @@
-const { DateTime } = require("luxon");
+import { DateTime } from "luxon";
 
 /**
  * Generate a string we can use for asset cachebusting
@@ -77,7 +77,7 @@ const getFirstNItems = function (array, n) {
   return array.slice(0, n);
 };
 
-module.exports = {
+export {
   cachebustAssetUrl,
   formatDate,
   formatISODate,