Fix npm audit vulnerabilities and broken image build
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
This commit is contained in:
Lewis Dale committed 2026-11-03 13:39:36 +00:00
1 parent 13d0b244e5
commit f45b6308f9
6 files changed
+284 -2427

No files matched your search

+3 -6
View File
@@ -9,15 +9,14 @@ const defaultSizes = `
(min-width: 2500px) 3840px
`;
const imageShortcode = (src, alt, cls, sizes = defaultSizes, widths = [300, 600, 1000, 1440, 2500, 3840]) => {
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",
};
// generate images, while this is async we don’t wait
Image(src, options);
let metadata = await Image(src, options);
let imageAttributes = {
class: cls,
@@ -25,8 +24,6 @@ const imageShortcode = (src, alt, cls, sizes = defaultSizes, widths = [300, 600,
sizes,
decoding: "async",
};
// get metadata even the images are not fully generated
let metadata = Image.statsSync(src, options);
return Image.generateHTML(metadata, imageAttributes);
}
@@ -49,6 +46,6 @@ const remoteImageShortcode = async (src, alt, cls, sizes = defaultSizes, widths
return Image.generateHTML(metadata, imageAttributes);
}
export default function(eleventyConfig) {
eleventyConfig.addShortcode("image", imageShortcode);
eleventyConfig.addAsyncShortcode("image", imageShortcode);
eleventyConfig.addAsyncShortcode("remoteImage", remoteImageShortcode);
}