131 lines
3.7 KiB
Plaintext
131 lines
3.7 KiB
Plaintext
<!---
|
||
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> |
