Update to Eleventy v3 (#11)

* feat: upgrade to v3; install eleventy-upgrade-help

* feat: convert all files to esm

* feat: remove decapcms

* fix: remove unused filter

* feat: remove netlify packages

* feat: update image handling

- removes old image shortcode
- update to latest 11ty image transform plugin

* feat: update colophon

* fix: pill style; global style

Fixes an issue with <img> inside <figure> not being centered

* feat: remove linting packages

* feat: update package.json scripts

* feat: remove upgrade helper plugin

* feat: add new button style, update nav

* feat: simplify `pill` class usage

* feat: fix tag list in catalogue-item.html

* feat: move games into their own section

* feat: update node version to latest LTS

* feat: move books to their own section

* feat: move fun pages into pages dir

* feat: update index and book/game templates

* feat: add watching section

* fix: update scaling values for buttons

* feat: various css updates

* feat: update now page style

* feat: cleaning up newer posts using old shortcode

also adding markdown-it-attrs to add attrs to various markdown elements!

* fix: movie data structure

* feat: update colophon

* fix: remove text-skew from post excerpt text

* feat: add support for shows in /watching

* fix: update book tags

* feat: add complete implementation of books pages

other stuff happened too

* fix: image border-radius

* feat: update game layout and content

* feat: reorganize watching section

* feat: add contact page

* feat: small page changes

* feat: add podroll page

* feat: reorganize content directories

* feat: exclude podcasts from page output

* chore: delete guestbook page

* chore: remove bracket syntax for css classes in html

* feat: create macro for tag list

* fix: colophon update

* chore: remove last.fm data

* chore: clean up 11ty config

* fix: misc permalink fixes

* feat: add update post

* fix: media meta grid on mobile

* fix: tables on mobile

* fix: add titles to icon button links

* fix: add missing divider for movies/shows

* feat: add alternate feeds

* fix: tag cleanup

* feat: homepage content update

* fix: game meta data

* fix: update post dates

* feat: add missing link to changelog

eleventy.config.js

@@ -1,16 +1,15 @@
-const pluginRss = require("@11ty/eleventy-plugin-rss");
-const pluginNoRobots = require("eleventy-plugin-no-robots");
+import util from "util";
+import pluginRss from "@11ty/eleventy-plugin-rss";
+import pluginNoRobots from "eleventy-plugin-no-robots";
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
-const {
-  catalogueByType,
-  postsByTag,
-} = require("./config/collections/index.js");
-const { dir } = require("./config/constants.js");
-const {
+import { collectionByTag, postsByTag } from "./config/collections/index.js";
+
+import { dir } from "./config/constants.js";
+import {
   allTagCounts,
   entries,
   filter,
-  filterCatalogueTags,
   filterFavourites,
   formatDate,
   isOld,
@@ -19,12 +18,13 @@ const {
   organizeByDate,
   pluralize,
   values,
-} = require("./config/filters/index.js");
-const markdown = require("./config/plugins/markdown.js");
-const imageShortcode = require("./config/shortcodes/image.js");
-const liteYoutube = require("./config/shortcodes/youtube.js");
+} from "./config/filters/index.js";
+import markdown from "./config/plugins/markdown.js";
+import liteYoutube from "./config/shortcodes/youtube.js";
 
-module.exports = (eleventyConfig) => {
+import htmlConfigTransform from "./config/transforms/html-config.js";
+
+export default function (eleventyConfig) {
   eleventyConfig.addWatchTarget("./src/css");
 
   // 	--------------------- Plugins ---------------------
@@ -32,14 +32,24 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addPlugin(pluginNoRobots);
 
   // 	--------------------- Custom Collections -----------------------
-  eleventyConfig.addCollection("catalogueByType", catalogueByType);
   eleventyConfig.addCollection("postsByTag", postsByTag);
+  eleventyConfig.addCollection("booksByTag", (collection) =>
+    collectionByTag(collection, "book"),
+  );
+  eleventyConfig.addCollection("gamesByTag", (collection) =>
+    collectionByTag(collection, "game"),
+  );
+  eleventyConfig.addCollection("showsByTag", (collection) =>
+    collectionByTag(collection, "tv"),
+  );
+  eleventyConfig.addCollection("moviesByTag", (collection) =>
+    collectionByTag(collection, "movie"),
+  );
 
   // 	--------------------- Custom Filters -----------------------
   eleventyConfig.addFilter("allTagCounts", allTagCounts);
   eleventyConfig.addFilter("entries", entries);
   eleventyConfig.addFilter("filter", filter);
-  eleventyConfig.addFilter("filterCatalogueTags", filterCatalogueTags);
   eleventyConfig.addFilter("filterFavourites", filterFavourites);
   eleventyConfig.addFilter("formatDate", formatDate);
   eleventyConfig.addFilter("isOld", isOld);
@@ -50,7 +60,26 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter("pluralize", pluralize);
 
   // 	--------------------- Custom Transforms -----------------------
-  eleventyConfig.addPlugin(require("./config/transforms/html-config.js"));
+  eleventyConfig.addPlugin(htmlConfigTransform);
+
+  // Image Transforms
+  // Works with any <img> tag in output files.
+  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+    extensions: "html",
+
+    formats: ["webp", "jpeg"],
+
+    sharpOptions: {
+      animated: true,
+    },
+
+    defaultAttributes: {
+      loading: "lazy",
+      decoding: "async",
+    },
+
+    failOnError: false,
+  });
 
   // 	--------------------- Passthrough File Copy -----------------------
   ["src/assets/fonts/", "src/assets/images"].forEach((path) =>
@@ -62,9 +91,12 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.setLibrary("md", markdown);
 
   // 	--------------------- Shortcodes -----------------------
-  eleventyConfig.addShortcode("image", imageShortcode);
   eleventyConfig.addShortcode("youtube", liteYoutube);
 
+  eleventyConfig.addFilter("console", function (value) {
+    return util.inspect(value);
+  });
+
   return {
     // Optional (default is set): If your site deploys to a subdirectory, change `pathPrefix`, for example with with GitHub pages
     pathPrefix: "/",
@@ -75,4 +107,4 @@ module.exports = (eleventyConfig) => {
 
     dir,
   };
-};
+}