106 lines
5.8 KiB
JavaScript
106 lines
5.8 KiB
JavaScript
const fs = require("node:fs");
|
||
const { TemplatePath } = require("@11ty/eleventy-utils");
|
||
|
||
const eleventyImage = require("../img.js");
|
||
const setupLogger = eleventyImage.setupLogger;
|
||
const Util = require("./util.js");
|
||
|
||
const debug = require("debug")("Eleventy:Image");
|
||
|
||
function eleventyImageOnRequestDuringServePlugin(eleventyConfig, options = {}) {
|
||
try {
|
||
// Throw an error if the application is not using Eleventy 3.0.0-alpha.7 or newer (including prereleases).
|
||
eleventyConfig.versionCheck(">=3.0.0-alpha.7");
|
||
} catch(e) {
|
||
console.log( `[11ty/eleventy-img] Warning: your version of Eleventy is incompatible with the dynamic image rendering plugin (see \`eleventyImageOnRequestDuringServePlugin\`). Any dynamically rendered images will 404 (be missing) during --serve mode but will not affect the standard build output: ${e.message}` );
|
||
}
|
||
|
||
setupLogger(eleventyConfig, {});
|
||
|
||
// Eleventy 3.0 or newer only.
|
||
eleventyConfig.setServerOptions({
|
||
onRequest: {
|
||
// TODO work with dev-server’s option for `injectedScriptsFolder`
|
||
"/.11ty/image/": async function({ url }) {
|
||
// src could be file path or full url
|
||
let src = url.searchParams.get("src");
|
||
let imageFormat = url.searchParams.get("format");
|
||
let width = parseInt(url.searchParams.get("width"), 10);
|
||
let via = url.searchParams.get("via");
|
||
|
||
let defaultOptions;
|
||
if(via === "webc") {
|
||
defaultOptions = eleventyConfig.getFilter("__private_eleventyImageConfigurationOptions")();
|
||
} else if(via === "transform") {
|
||
defaultOptions = eleventyConfig.getFilter("__private_eleventyImageTransformConfigurationOptions")();
|
||
}
|
||
// if using this plugin directly (not via webc or transform), global default options will need to be passed in to the `addPlugin` call directly
|
||
|
||
// Prefer options passed to this plugin, fallback to Transform plugin or WebC options if the image source was generated via those options.
|
||
let opts = Object.assign({}, defaultOptions, options, {
|
||
widths: [width || "auto"],
|
||
formats: [imageFormat || "auto"],
|
||
|
||
dryRun: true,
|
||
cacheOptions: {
|
||
// We *do* want to write files to .cache for re-use here.
|
||
dryRun: false
|
||
},
|
||
|
||
transformOnRequest: false, // use the built images so we don’t go in a loop
|
||
generatedVia: Util.KEYS.requested,
|
||
});
|
||
|
||
Util.addConfig(eleventyConfig, opts);
|
||
|
||
debug( `%o transformed on request to %o at %o width.`, src, imageFormat, width );
|
||
|
||
try {
|
||
if(!Util.isFullUrl(src)) {
|
||
// Image path on file system must be in working directory
|
||
src = TemplatePath.absolutePath(".", src);
|
||
|
||
if(!fs.existsSync(src) || !src.startsWith(TemplatePath.absolutePath("."))) {
|
||
throw new Error(`Invalid path: ${src}`);
|
||
}
|
||
}
|
||
|
||
let stats = await eleventyImage(src, opts);
|
||
|
||
let format = Object.keys(stats).pop();
|
||
let stat = stats[format][0];
|
||
if(!stat) {
|
||
throw new Error("Invalid image format.");
|
||
}
|
||
if(!stat.buffer) {
|
||
throw new Error("Could not find `buffer` property for image.");
|
||
}
|
||
|
||
return {
|
||
headers: {
|
||
// TODO Set cache headers to match eleventy-fetch cache options (though remote fetchs are still written to .cache)
|
||
"Content-Type": stat.sourceType,
|
||
},
|
||
body: stat.buffer,
|
||
};
|
||
} catch (error) {
|
||
debug("Error attempting to transform %o: %O", src, error);
|
||
|
||
return {
|
||
status: 500,
|
||
headers: {
|
||
"Content-Type": "image/svg+xml",
|
||
"x-error-message": error.message
|
||
},
|
||
body: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${width}" x="0" y="0" viewBox="0 0 1569.4 2186" xml:space="preserve" aria-hidden="true" focusable="false"><style>.st0{fill:#bbb;stroke:#bbb;stroke-width:28;stroke-miterlimit:10}</style><g><path class="st0" d="M562.2 1410.1c-9 0-13.5-12-13.5-36.1V778.9c0-11.5-2.3-16.9-7-16.2-28.4 7.2-42.7 10.8-43.1 10.8-7.9.7-11.8-7.2-11.8-23.7v-51.7c0-14.3 4.3-22.4 12.9-24.2l142.2-36.6c1.1-.3 2.7-.5 4.8-.5 7.9 0 11.8 8.4 11.8 25.3v712c0 24.1-4.7 36.1-14 36.1l-82.3-.1zM930.5 1411.2c-14.4 0-26.8-1-37.4-3-10.6-2-21.6-6.5-33.1-13.5s-20.9-16.6-28.3-28.8-13.4-29.3-18-51.2-7-47.9-7-78.1V960.4c0-7.2-2-10.8-5.9-10.8h-33.4c-9 0-13.5-8.6-13.5-25.8v-29.1c0-17.6 4.5-26.4 13.5-26.4h33.4c3.9 0 5.9-4.8 5.9-14.5l9.7-209.5c1.1-19 5.7-28.5 14-28.5h53.9c9 0 13.5 9.5 13.5 28.5v209.5c0 9.7 2.1 14.5 6.5 14.5H973c9 0 13.5 8.8 13.5 26.4v29.1c0 17.2-4.5 25.8-13.5 25.8h-68.9c-2.5 0-4.2.6-5.1 1.9-.9 1.2-1.3 4.2-1.3 8.9v277.9c0 20.8 1.3 38.2 4 52s6.6 24 11.8 30.4 10.4 10.8 15.6 12.9c5.2 2.2 11.6 3.2 19.1 3.2h38.2c9.7 0 14.5 6.7 14.5 19.9v32.3c0 14.7-5.2 22.1-15.6 22.1l-54.8.1zM1137.2 1475.8c8.2 0 15.4-6.7 21.5-20.2s9.2-32.6 9.2-57.4c0-5.8-3.6-25.7-10.8-59.8l-105.6-438.9c-.7-5-1.1-9-1.1-11.9 0-12.9 2.7-19.4 8.1-19.4h65.2c5 0 9.1 1.7 12.4 5.1s5.8 10.3 7.5 20.7l70 370.5c1.4 4.3 2.3 6.5 2.7 6.5 1.4 0 2.2-2 2.2-5.9l54.9-369.5c1.4-10.8 3.7-18 6.7-21.8s6.9-5.7 11.6-5.7h45.2c6.1 0 9.2 7 9.2 21 0 3.2-.4 7.4-1.1 12.4l-95.9 499.3c-7.5 41.3-15.8 72.9-24.8 94.8s-19 36.8-30.2 44.7c-11.1 7.9-25.8 12-44.2 12.4h-5.4c-29.1 0-48.8-7.7-59.2-23.2-2.9-3.2-4.3-11.5-4.3-24.8 0-26.6 4.3-39.9 12.9-39.9.7 0 7.2 1.8 19.4 5.4 12.4 3.8 20.3 5.6 23.9 5.6z"/><g><path class="st0" d="M291.2 1411.1c-9 0-13.5-12-13.5-36.1V779.9c0-11.5-2.3-16.9-7-16.2-28.4 7.2-42.7 10.8-43.1 10.8-7.9.7-11.8-7.2-11.8-23.7v-51.7c0-14.3 4.3-22.4 12.9-24.2L371 638.2c1.1-.3 2.7-.5 4.8-.5 7.9 0 11.8 8.4 11.8 25.3v712c0 24.1-4.7 36.1-14 36.1h-82.4z"/></g></g></svg>`,
|
||
};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
module.exports = {
|
||
eleventyImageOnRequestDuringServePlugin,
|
||
};
|
