first

node_modules/@11ty/eleventy-img/eleventy-image.webc

@@ -0,0 +1,131 @@
+<!---
+	Supported attribute list:
+	* src (required)
+	* width
+	* formats
+	* url-path
+	* output-dir
+
+	<img
+	webc:is="eleventy-image"
+	src="./src/img/possum-geri.png"
+	alt="The possum is Eleventy’s mascot"
+	width="222, 350"
+	class="some-custom-class"
+	sizes="(min-width: 43.75em) 100px, 15vw">
+
+	Alternative attribute formats:
+	:width="[222, 350]"
+	formats="avif,webp,jpeg"
+	:formats="['avif', 'webp', 'jpeg']"
+--->
+<script webc:type="js">
+const path = require("path");
+
+// TODO expose this for re-use in a provided shortcode.
+async function imagePlugin(attributes, globalPluginOptions) {
+	if(!attributes.src) {
+		throw new Error("Missing `src` attribute on <eleventy-image>");
+	}
+
+	// TODO allow remote optimization automatically on full urls
+
+	let imagePackage;
+	let defaultGlobalAttributes;
+
+	if(globalPluginOptions) {
+		defaultGlobalAttributes = globalPluginOptions.defaultAttributes;
+		delete globalPluginOptions.defaultAttributes;
+
+		imagePackage = globalPluginOptions.packages?.image;
+		delete globalPluginOptions.packages;
+	}
+
+	if(!imagePackage) {
+		imagePackage = require("@11ty/eleventy-img");
+	}
+
+	let instanceOptions = {};
+
+	// Note that multiple widths require a `sizes`
+
+	if(attributes.width) {
+		if(typeof attributes.width === "string") {
+			instanceOptions.widths = attributes.width.split(",").map(entry => parseInt(entry, 10));
+			delete attributes.width;
+		} else if(Array.isArray(attributes.width)) {
+			instanceOptions.widths = attributes.width;
+			delete attributes.width;
+		}
+	}
+
+	if(attributes.formats) {
+		if(typeof attributes.formats === "string") {
+			instanceOptions.formats = attributes.formats.split(",").map(entry => entry.trim());
+			delete attributes.formats;
+		} else if(Array.isArray(attributes.formats)) {
+			instanceOptions.formats = attributes.formats;
+			delete attributes.formats;
+		}
+	}
+
+	// These defaults are set only if addPlugin was **not** called:
+	if(!globalPluginOptions) {
+		// Using eleventy.directories global data (Eleventy 2.0.2+)
+		if(eleventy.directories) {
+			instanceOptions.urlPath = "/img/";
+
+			// write to output folder by default
+			instanceOptions.outputDir = path.join(eleventy.directories.output, instanceOptions.urlPath);
+		}
+	}
+
+	// Overrides via attributes (hopefully you don’t need these)
+	if(attributes.urlPath) {
+		instanceOptions.urlPath = attributes.urlPath;
+		delete attributes.urlPath;
+
+		if(eleventy.directories && !attributes.outputDir) {
+			// use output folder if available (Eleventy v2.0.2+)
+			instanceOptions.outputDir = path.join(eleventy.directories.output, instanceOptions.urlPath);
+		}
+	}
+
+	if(attributes.outputDir) {
+		instanceOptions.outputDir = attributes.outputDir;
+		delete attributes.outputDir;
+	}
+
+	let options = Object.assign({}, globalPluginOptions, instanceOptions);
+
+	// see Util.addConfig
+	if(globalPluginOptions.eleventyConfig) {
+		Object.defineProperty(options, "eleventyConfig", {
+			value: globalPluginOptions.eleventyConfig,
+			enumerable: false,
+		});
+	}
+
+	let metadata = await imagePackage(src, options);
+
+	let imageAttributes = Object.assign({}, defaultGlobalAttributes, attributes);
+
+	// You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
+	return imagePackage.generateHTML(metadata, imageAttributes);
+};
+
+(async () => {
+	let globalPluginOptions;
+	// fetch global options from from addPlugin call
+	if(typeof __private_eleventyImageConfigurationOptions === "function") {
+		globalPluginOptions = __private_eleventyImageConfigurationOptions();
+	}
+
+	if(!("filterPublicAttributes" in webc)) {
+		throw new Error("The <eleventy-image> WebC component requires WebC v0.10.1+");
+	}
+
+	let attributes = webc.filterPublicAttributes(webc.attributes);
+	return imagePlugin(attributes, globalPluginOptions);
+})();
+</script>