From 350c914dbc58749e96f4c8a19ab441e0a8a0e3a6 Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleat@users.noreply.github.com>
Date: Wed, 8 Jan 2025 13:17:10 -0600
Subject: [PATCH] Upgrade to latest Eleventy Image, support animated gif

---
 eleventy.config.js | 24 +++++++++++++-----------
 package.json       |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/eleventy.config.js b/eleventy.config.js
index 09ee084..03d5b5d 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -6,7 +6,6 @@ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
 import pluginFilters from "./_config/filters.js";
 
-/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
 export default async function(eleventyConfig) {
 	// Drafts, see also _data/eleventyDataSchema.js
 	eleventyConfig.addPreprocessor("drafts", "*", (data, content) => {
@@ -26,8 +25,8 @@ export default async function(eleventyConfig) {
 	// Run Eleventy when these files change:
 	// https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
 
-	// Watch content images for the image pipeline.
-	eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
+	// Watch images for the image pipeline.
+	eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpg,jpeg,gif}");
 
 	// Per-page bundles, see https://github.com/11ty/eleventy-plugin-bundle
 	// Adds the {% css %} paired shortcode
@@ -74,19 +73,22 @@ export default async function(eleventyConfig) {
 
 	// Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform
 	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
-		// File extensions to process in _site folder
-		extensions: "html",
-
 		// Output formats for each image.
 		formats: ["avif", "webp", "auto"],
 
 		// widths: ["auto"],
 
-		defaultAttributes: {
-			// e.g. <img loading decoding> assigned on the HTML tag will override these values.
-			loading: "lazy",
-			decoding: "async",
-		}
+		htmlOptions: {
+			imgAttributes: {
+				// e.g. <img loading decoding> assigned on the HTML tag will override these values.
+				loading: "lazy",
+				decoding: "async",
+			}
+		},
+
+		sharpOptions: {
+			animated: true,
+		},
 	});
 
 	// Filters
diff --git a/package.json b/package.json
index 6a16961..db95617 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
 	"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
 	"devDependencies": {
 		"@11ty/eleventy": "^3.0.0",
-		"@11ty/eleventy-img": "^5.0.0",
+		"@11ty/eleventy-img": "^6.0.0",
 		"@11ty/eleventy-navigation": "^0.3.5",
 		"@11ty/eleventy-plugin-rss": "^2.0.2",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",