[about] ⚡️ | Converti les images des anciennes versions

_includes/layouts/old.njk

@@ -7,8 +7,9 @@ layout: layouts/base.njk
     <h1>{{oldVersion.key}} - {{oldVersion.yearStart}}</h1>
     {{ content | safe }}
     <p><em>Propulsé à cette époque par {{ oldVersion.engine }}</em></p>
-    <img src="/img/articles/old/{{oldVersion.img}}" alt="{{oldVersion.alt}}">
+      {%- set thumb = "../../public/img/articles/old/" + oldVersion.img -%}
-    <p>( Vous pouvez affichez l'image en plus grand en l'ouvrant dans un nouvel onglet )</p>
+      <a href="/img/articles/old/{{oldVersion.img}}" target="_blank">{%- image thumb, "", [800] -%}</a>
+    <p>( Vous pouvez affichez l'image en plus grand en cliquant dessus, l'image complète s'ouvrira dans un nouvel onglet )</p>
   </article>
   {% renderFile "./_includes/footer.md" %}
 </main>

content/about/index.md

@@ -62,7 +62,10 @@ J’ai pour but de faire pas mal d’autres petits sites suivant mes intérêts
           <a href="{{ post.url }}" class="preview-link">
             <h1 class="card-header"> {{ post.data.oldVersion.key }} </h1>
             <div class="preview-content">
-              <div class="preview-exerpt" aria-hidden="true"><p class="p-img"><img class="preview-img" src="/img/articles/old/{{ post.data.oldVersion.img }}" /></p></div>
+              <div class="preview-exerpt" aria-hidden="true"><p class="p-img">
+                {%- set thumb = "../../public/img/articles/old/" + post.data.oldVersion.img -%}
+                {%- thumbnail thumb, "" -%}
+              </p></div>
               <div class="preview-overlay">
                 <div class="preview-metadata">
                   <div class="metadata-pills">

eleventy.config.images.js

@@ -31,4 +31,25 @@ module.exports = eleventyConfig => {
 		};
 		return eleventyImage.generateHTML(metadata, imageAttributes);
 	});
+
+	eleventyConfig.addAsyncShortcode("thumbnail", async function imageShortcode(src, alt, widths, sizes) {
+		// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
+		// Warning: Avif can be resource-intensive so take care!
+		let formats = ["avif", "webp", "auto"];
+		let file = relativeToInputPath(this.page.inputPath, src);
+		let metadata = await eleventyImage(file, {
+			widths: [360],
+			formats,
+			outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
+		});
+
+		// TODO loading=eager and fetchpriority=high
+		let imageAttributes = {
+			alt,
+			sizes,
+			loading: "lazy",
+			decoding: "async",
+		};
+		return eleventyImage.generateHTML(metadata, imageAttributes);
+	});
 };