adjust sizes and widths in srcset and keep lighthouse 💯

.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,22 +36,19 @@ 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]
     const imgSrc = env.eleventy.directories.input.slice(0, -1) + token.attrGet('src')
     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 <picture>
+  // Image shortcode with <picture>
   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 <img>
-  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,

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}

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)
+

src/pages/documentation/markdown.md

@@ -2,7 +2,6 @@
 layout: base.njk
 title: Markdown
 subtitle: Using Markdown in 11ty
-tags: documentation
 ismarkdown: true
 ---
 ## Markdown

src/pages/index.html

@@ -4,23 +4,23 @@
 description: A basic template using 11ty with Tailwind.
 layout: base.njk
 ---
-  <div class="w-2/3 p-4 border border-black mx-auto">
-    {% 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" %}
+  <div class="w-full sm:w-2/3 sm:p-4 md:border sm:border-black mx-auto">
+    {% 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 %}
     <!-- 
     Picture attributes: 
     page, file name, alt text, class, widths, formats, sizes 
     -->
     <div
       class="text-sm text-gray-500 text-center">photo: <a href="https://unsplash.com/photos/green-grass-field-during-daytime-J_CutWQnT78">Vera Davidova</a></div>
   </div>
-  <p class="mb-6 text-center text-base leading-normal md:text-left md:text-2xl">
-    <svg class="h-12" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <div class="my-8 w-full">
+    <svg class="h-12 mx-auto" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <title>GitHub</title>
       <path
         d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
       />
     </svg>
-  </p>
+  </div>