Fix npm audit vulnerabilities and broken image build
Build and copy to prod / build-and-copy (push) Successful in 4m15s
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:
1 parent
13d0b244e5
commit
f45b6308f9
6 files changed
+284
-2427
No files matched your search
@@ -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);
|
||||
}
|
||||
Reference in new issue
Block a user