From b4660d0bdd5cc497cd6ac738ab0db88ad36f4b44 Mon Sep 17 00:00:00 2001 From: aloxe Date: Wed, 4 Dec 2024 17:49:42 +0100 Subject: [PATCH] =?UTF-8?q?adjust=20sizes=20and=20widths=20in=20srcset=20a?= =?UTF-8?q?nd=20keep=20lighthouse=20=F0=9F=92=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eleventy.js | 58 +++++++++-------------------- src/pages/documentation/images.md | 2 +- src/pages/documentation/index.md | 10 ++--- src/pages/documentation/markdown.md | 1 - src/pages/index.html | 10 ++--- 5 files changed, 29 insertions(+), 52 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 6f9b404..4fd06e8 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -10,6 +10,14 @@ const mditAttrs = require('markdown-it-attrs'); const mditHighlight = require('markdown-it-highlightjs'); const Image = require('@11ty/eleventy-img'); +// sizes and formats of resized images to make them responsive +// it can be overwriten when using the "Picture" short code +const Images = { + WIDTHS: [426, 460, 580, 768, 1200], // sizes of generated images + FORMATS: ['webp', 'jpeg'], // formats of generated images + SIZES: '(max-width: 1200px) 70vw, 1200px' // size of image rendered +} + module.exports = async function(eleventyConfig) { const { EleventyHtmlBasePlugin } = await import("@11ty/eleventy"); @@ -28,7 +36,7 @@ module.exports = async function(eleventyConfig) { } const mdLib = mdit(mditOptions).use(mditAttrs).use(mditHighlight, { inline: true }).disable('code') - // generate responsive images from img Markdown + // generate responsive images from Markdown img // from https://tomichen.com/blog/posts/20220416-responsive-images-in-markdown-with-eleventy-image/ mdLib.renderer.rules.image = (tokens, idx, options, env, self) => { const token = tokens[idx] @@ -36,14 +44,11 @@ module.exports = async function(eleventyConfig) { const imgAlt = token.content const imgTitle = token.attrGet('title') ?? '' const className = token.attrGet('class') - const widths = [350, 750, 1200] // sizes of generated images - const formats = ['webp', 'jpeg'] // formats of generated images - const sizes = '100vw"' - const ImgOptions = getImgOptions(env.page, imgSrc, imgAlt, className, widths, formats, sizes); + const ImgOptions = getImgOptions(env.page, imgSrc, imgAlt, className, Images.WIDTHS, Images.FORMATS, Images.SIZES); const htmlOptions = { alt: imgAlt, class: className, - sizes: '(max-width: 400px) 380px, (max-width: 470px) 450px, (max-width: 841px) 640px, (max-width: 1100px) 640px, 764px', + sizes: Images.SIZES, loading: className?.includes('lazy') ? 'lazy' : undefined, decoding: 'async', title: imgTitle @@ -68,18 +73,15 @@ module.exports = async function(eleventyConfig) { // process css eleventyConfig.addNunjucksAsyncFilter('postcss', postcssFilter); - // images - /////////// - - // Picture shortcode with + // Image shortcode with eleventyConfig.addShortcode("Picture", async ( page, src, alt, className = undefined, - widths = [350, 750, 1200], - formats = ['jpeg'], - sizes = '100vw"' + widths = Images.WIDTHS, + formats = Images.FORMATS, + sizes = Images.SIZES ) => { if (!alt) { throw new Error(`Missing \`alt\` on myImage from: ${src}`); @@ -136,32 +138,6 @@ module.exports = async function(eleventyConfig) { return `${picture}`; }); - // Image shortcode with - eleventyConfig.addShortcode("Image", async ( - page, - src, - alt, - className = undefined, - widths = [350, 750, 1200], - formats = ['jpeg'], - sizes = '100vw"', - ) => { - if (!alt) { - throw new Error(`Missing \`alt\` on myImage from: ${src}`); - } - const srcImage = getSrcImage(page, src); - - const options = getImgOptions(page, src, alt, className, widths, formats, sizes); - const imageMetadata = await Image(srcImage, options); - - const imageAttributes = { - alt, - sizes: '(max-width: 400px) 380px, (max-width: 470px) 450px, (max-width: 841px) 640px, (max-width: 1100px) 640px, 764px"', - loading: className?.includes('lazy') ? 'lazy' : undefined, - decoding: "async", - } - return Image.generateHTML(imageMetadata, imageAttributes) - }); // Collections eleventyConfig.addCollection("documentation", function (collection) { @@ -243,7 +219,9 @@ const stringifyAttributes = (attributeMap) => { urlPath = "/" + urlPath.join("/"); const options = { - widths: [...widths, null], + widths: widths + .concat(widths.map((w) => w * 2)) // generate 2x sizes + .filter((v, i, s) => s.indexOf(v) === i), // dedupe formats: [...formats, null], outputDir: outputFolder, urlPath: urlPath, diff --git a/src/pages/documentation/images.md b/src/pages/documentation/images.md index 53cdd24..134d8d1 100644 --- a/src/pages/documentation/images.md +++ b/src/pages/documentation/images.md @@ -5,7 +5,7 @@ subtitle: Edit and manage images ismarkdown: true --- ## example image -![drooderfiets and yallow boat](/documentation/boat.jpg) +![drooderfiets and yellow boat](/documentation/boat.jpg) ## another image ![drooderfiets and red circus](/documentation/circus.jpg){.lazy} diff --git a/src/pages/documentation/index.md b/src/pages/documentation/index.md index 642bd52..19f5226 100644 --- a/src/pages/documentation/index.md +++ b/src/pages/documentation/index.md @@ -5,16 +5,16 @@ description: Documentation for Huwindty. layout: base.njk ismarkdown: true --- + ## Table of content -{% for post in collections.documentation %} + +{% for post in collections.documentation | reverse %} {% if post.data.title != 'documentation' %} - [{{post.data.title}}]({{post.url}}) -{{post.data.description}} {% endif %} {% endfor %} - - ## wind 🌬️ -{% Picture page, "vera.jpg", "Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece", undefined, undefined, undefined, "(max-width: 1200px) 40vw, 1200px" %} +![Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece](/documentation/vera.jpg) + diff --git a/src/pages/documentation/markdown.md b/src/pages/documentation/markdown.md index 06944f3..a60f03c 100644 --- a/src/pages/documentation/markdown.md +++ b/src/pages/documentation/markdown.md @@ -2,7 +2,6 @@ layout: base.njk title: Markdown subtitle: Using Markdown in 11ty -tags: documentation ismarkdown: true --- ## Markdown diff --git a/src/pages/index.html b/src/pages/index.html index 31d2337..5db81ba 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -4,8 +4,8 @@ description: A basic template using 11ty with Tailwind. layout: base.njk --- -
- {% Picture page, "vera-davidova.jpg", "Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece", undefined, undefined, undefined, "(max-width: 1200px) 40vw, 1200px" %} +
+ {% Picture page, "vera-davidova.jpg", "Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece", undefined, undefined, undefined, undefined %}