Lewis Dale
f45b6308f9
Build and copy to prod / build-and-copy (push) Successful in 4m15s
Eleventy Image v7 removed its synchronous stats API, which broke the build. Rather than downgrade (older versions bundle a vulnerable sharp), adapt to v7 and clear out the remaining vulnerable dependencies: - Make the `image` shortcode async - Replace the unmaintained markdown-it-eleventy-img with a local plugin that pre-loads image metadata in eleventy.before, so markdown (and feed) images keep rendering as <picture> elements - Upgrade @11ty/eleventy-fetch to v6 - Swap npm-run-all for the maintained npm-run-all2 fork - Override eleventy-plugin-og-image's satori (and its pinned fflate) to patched versions, and set explicit heading weights in the OG template so newer satori doesn't synthesise bold text
51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
import Image from "@11ty/eleventy-img";
|
|
|
|
const defaultSizes = `
|
|
(max-width: 300px) 300px,
|
|
(max-width: 600px) 600px,
|
|
(max-width: 1000px) 1000px,
|
|
(max-width: 1440px) 1440px,
|
|
(max-width: 2500px) 2500px,
|
|
(min-width: 2500px) 3840px
|
|
`;
|
|
|
|
const imageShortcode = async (src, alt, cls, sizes = defaultSizes, widths = [300, 600, 1000, 1440, 2500, 3840]) => {
|
|
let options = {
|
|
widths: widths,
|
|
formats: ['webp', 'jpeg'],
|
|
outputDir: "./_site/img",
|
|
};
|
|
|
|
let metadata = await Image(src, options);
|
|
|
|
let imageAttributes = {
|
|
class: cls,
|
|
alt,
|
|
sizes,
|
|
decoding: "async",
|
|
};
|
|
return Image.generateHTML(metadata, imageAttributes);
|
|
}
|
|
|
|
const remoteImageShortcode = async (src, alt, cls, sizes = defaultSizes, widths = [300, 600, 1000, 1440, 2500, 3840]) => {
|
|
let metadata = await Image(src, {
|
|
widths,
|
|
formats: ["webp", "avif", "jpeg", "png"],
|
|
outputDir: "./_site/img",
|
|
});
|
|
|
|
let imageAttributes = {
|
|
alt,
|
|
class: cls,
|
|
sizes,
|
|
loading: "lazy",
|
|
decoding: "async",
|
|
};
|
|
|
|
// You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
|
|
return Image.generateHTML(metadata, imageAttributes);
|
|
}
|
|
export default function(eleventyConfig) {
|
|
eleventyConfig.addAsyncShortcode("image", imageShortcode);
|
|
eleventyConfig.addAsyncShortcode("remoteImage", remoteImageShortcode);
|
|
} |