feat(03-final): add Eleventy-img optimized img.webc component

RobinCsl · RobinCsl · commit 4118b9855c34 · 2022-10-23T12:25:54.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 _site
+.cache
diff --git a/03-final/.eleventy.js b/03-final/.eleventy.js
@@ -0,0 +1,7 @@
+const webc = require("@11ty/eleventy-plugin-webc");
+
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addPlugin(webc, {
+		components: "_includes/webc/*.webc"
+	});
+}
diff --git a/03-final/_data/Image.js b/03-final/_data/Image.js
@@ -0,0 +1,5 @@
+const Image = require("@11ty/eleventy-img");
+
+module.exports = function() {
+  return Image;
+}
diff --git a/03-final/_includes/layouts/base.webc b/03-final/_includes/layouts/base.webc
@@ -0,0 +1,8 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Eleventy Images + WebC rocks!</title>
+    </head>
+    <body @html="content"></body>
+</html>
diff --git a/03-final/_includes/webc/img.webc b/03-final/_includes/webc/img.webc
@@ -0,0 +1,20 @@
+<script webc:type="render" webc:is="template">
+async function() {
+  let metadata = await this.Image(this.src, {
+    widths: [300],
+    formats: ["avif", "jpeg"],
+    outputDir: "_site/img/",
+  });
+
+  let imageAttributes = {
+    alt: this.alt,
+    sizes: '100vw',
+    loading: "lazy",
+    decoding: "async",
+    "webc:raw": true,
+  };
+
+  // You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
+  return this.Image.generateHTML(metadata, imageAttributes);
+}
+</script>
diff --git a/03-final/_includes/webc/site-footer.webc b/03-final/_includes/webc/site-footer.webc
@@ -0,0 +1,3 @@
+<footer>
+  <p>&copy; 2022 Yours Truly.</p>
+</footer>
diff --git a/03-final/index.webc b/03-final/index.webc
@@ -0,0 +1,15 @@
+---
+layout: layouts/base.webc
+---
+
+Fun with WebC
+
+<img alt="possum hanging from a palm leaf" src="https://images.unsplash.com/photo-1627224286457-923944e5b159?auto=format&fit=crop&w=387&q=80">
+
+<template webc:type="11ty" 11ty:type="md">
+
+!['close-up of a baby possum among ferns'](https://images.pexels.com/photos/13960994/pexels-photo-13960994.jpeg)
+
+</template>
+
+<site-footer></site-footer>
diff --git a/03-final/package-lock.json b/03-final/package-lock.json
diff --git a/03-final/package.json b/03-final/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`node_modules`
`2`	`2`	`_site`
	`3`	`+.cache`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<footer>`
	`2`	`+ <p>© 2022 Yours Truly.</p>`
	`3`	`+</footer>`