A bit of code cleanup

content/content.11tydata.js

@@ -1,31 +0,0 @@
-module.exports = {
-	// Draft posts:
-	eleventyComputed: {
-		permalink: data => {
-			if(data.draft) {
-				// BUILD_DRAFTS is set in eleventy.config.js
-				if(process.env.BUILD_DRAFTS) {
-					return data.permalink;
-				}
-
-				// Always skip during non-watch/serve builds
-				return false;
-			}
-
-			return data.permalink;
-		},
-		eleventyExcludeFromCollections: data => {
-			if(data.draft) {
-				// BUILD_DRAFTS is set in eleventy.config.js
-				if(process.env.BUILD_DRAFTS) {
-					return data.eleventyExcludeFromCollections;
-				}
-
-				// Always exclude from non-watch/serve builds
-				return true;
-			}
-
-			return data.eleventyExcludeFromCollections;
-		}
-	},
-};

eleventy.config.drafts.js

@@ -0,0 +1,60 @@
+function eleventyComputedPermalink() {
+	// When using `addGlobalData` and you *want* to return a function, you must nest functions like this.
+	// `addGlobalData` acts like a global data file and runs the top level function it receives.
+	return (data) => {
+		if(data.draft) {
+			// BUILD_DRAFTS is set in eleventy.config.js
+			if(process.env.BUILD_DRAFTS) {
+				return data.permalink;
+			}
+
+			// Always skip during non-watch/serve builds
+			return false;
+		}
+
+		return data.permalink;
+	}
+};
+
+function eleventyComputedExcludeFromCollections() {
+	// When using `addGlobalData` and you *want* to return a function, you must nest functions like this.
+	// `addGlobalData` acts like a global data file and runs the top level function it receives.
+	return (data) => {
+		if(data.draft) {
+			// BUILD_DRAFTS is set in eleventy.config.js
+			if(process.env.BUILD_DRAFTS) {
+				return data.eleventyExcludeFromCollections;
+			}
+
+			// Always exclude from non-watch/serve builds
+			return true;
+		}
+
+		return data.eleventyExcludeFromCollections;
+	}
+};
+
+module.exports.eleventyComputedPermalink = eleventyComputedPermalink;
+module.exports.eleventyComputedExcludeFromCollections = eleventyComputedExcludeFromCollections;
+
+module.exports = eleventyConfig => {
+	eleventyConfig.addGlobalData("eleventyComputed.permalink", eleventyComputedPermalink);
+	eleventyConfig.addGlobalData("eleventyComputed.eleventyExcludeFromCollections", eleventyComputedExcludeFromCollections);
+
+	let logged = false;
+	eleventyConfig.on("eleventy.before", ({runMode}) => {
+		let text = "Excluding";
+		// Only show drafts in serve/watch modes
+		if(runMode === "serve" || runMode === "watch") {
+			process.env.BUILD_DRAFTS = true;
+			text = "Including";
+		}
+
+		// Only log once.
+		if(!logged) {
+			console.log( `[11ty/eleventy-base-blog] ${text} drafts.` );
+		}
+
+		logged = true;
+	});
+}

eleventy.config.images.js

@@ -0,0 +1,30 @@
+const path = require("path");
+const eleventyImage = require("@11ty/eleventy-img");
+
+module.exports = eleventyConfig => {
+	function relativeToInputPath(inputPath, relativeFilePath) {
+		let split = inputPath.split("/");
+		split.pop();
+
+		return path.resolve(split.join(path.sep), relativeFilePath);
+	}
+
+	// Eleventy Image shortcode
+	// https://www.11ty.dev/docs/plugins/image/
+	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) {
+		let file = relativeToInputPath(this.page.inputPath, src);
+		let metadata = await eleventyImage(file, {
+			widths: ["auto"],
+			// You can add "avif" or "jpeg" here if you’d like!
+			formats: ["webp", "png"],
+			outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
+		});
+		let imageAttributes = {
+			alt,
+			sizes,
+			loading: "lazy",
+			decoding: "async",
+		};
+		return eleventyImage.generateHTML(metadata, imageAttributes);
+	});
+};

eleventy.config.js

@@ -1,11 +1,9 @@
-const path = require("path");
 const { DateTime } = require("luxon");
 const markdownItAnchor = require("markdown-it-anchor");
 
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
-const eleventyImage = require("@11ty/eleventy-img");
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
 
 module.exports = function(eleventyConfig) {
@@ -22,61 +20,16 @@ module.exports = function(eleventyConfig) {
 	// Process content images to the image pipeline.
 	eleventyConfig.addWatchTarget("content/**/*.{png,jpeg}");
 
+	// App plugins
+	eleventyConfig.addPlugin(require("./eleventy.config.drafts.js"));
+	eleventyConfig.addPlugin(require("./eleventy.config.images.js"));
 
-	// Plugins
+	// Official plugins
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight);
 	eleventyConfig.addPlugin(pluginNavigation);
 	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
 
-	// Eleventy Image shortcode
-	// https://www.11ty.dev/docs/plugins/image/
-	eleventyConfig.addPlugin(eleventyConfig => {
-		function relativeToInputPath(inputPath, relativeFilePath) {
-			let split = inputPath.split("/");
-			split.pop();
-
-			return path.resolve(split.join(path.sep), relativeFilePath);
-		}
-
-		eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) {
-			let file = relativeToInputPath(this.page.inputPath, src);
-			let metadata = await eleventyImage(file, {
-				widths: ["auto"],
-				// You can add "avif" or "jpeg" here if you’d like!
-				formats: ["webp", "png"],
-				outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
-			});
-			let imageAttributes = {
-				alt,
-				sizes,
-				loading: "lazy",
-				decoding: "async",
-			};
-			return eleventyImage.generateHTML(metadata, imageAttributes);
-		});
-	});
-
-	// Drafts implementation, see `content/content.11tydata.js` for additional code.
-	// This section *could* be simplified to an environment variable in an npm script,
-	// but this way an ENV is not required and this code works cross-platform.
-	eleventyConfig.addPlugin(function enableDrafts(eleventyConfig) {
-		let logged = false;
-		eleventyConfig.on("eleventy.before", ({runMode}) => {
-			// Only show drafts in serve/watch modes
-			if(runMode === "serve" || runMode === "watch") {
-				process.env.BUILD_DRAFTS = true;
-
-				// Only log once.
-				if(!logged) {
-					console.log( "[11ty/eleventy-base-blog] including `draft: true` posts" );
-				}
-
-				logged = true;
-			}
-		});
-	})
-
 	// Filters
 	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
 		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens