i18n, fetch, image, render ESM docs 11ty/eleventy#836

src/_includes/snippets/image/diy.njk

@@ -0,0 +1,79 @@
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<div class="codetitle">eleventy.config.js</div>
+<seven-minute-tabs class="tabs-flush">
+<div role="tablist" aria-label="DIY mode chooser">
+	<a href="#filter-diy-img" role="tab">Do it yourself: &lt;img&gt;</a>
+	<a href="#filter-diy-picture" role="tab">Do it yourself: &lt;picture&gt;</a>
+</div>
+<div id="filter-diy-img" role="tabpanel">
+
+```js
+import Image from "@11ty/eleventy-img";
+
+export default function (eleventyConfig) {
+	eleventyConfig.addShortcode("image", async function (src, alt) {
+		if (alt === undefined) {
+			// You bet we throw an error on missing alt (alt="" works okay)
+			throw new Error(`Missing \`alt\` on myImage from: ${src}`);
+		}
+
+		let metadata = await Image(src, {
+			widths: [600],
+			formats: ["jpeg"],
+		});
+
+		let data = metadata.jpeg[metadata.jpeg.length - 1];
+		return `<img src="${data.url}" width="${data.width}" height="${data.height}" alt="${alt}" loading="lazy" decoding="async">`;
+	});
+};
+```
+
+</div>
+<div id="filter-diy-picture" role="tabpanel">
+
+```js
+import Image from "@11ty/eleventy-img";
+
+export default function (eleventyConfig) {
+	eleventyConfig.addShortcode(
+		"image",
+		async function (src, alt, widths = [300, 600], sizes = "100vh") {
+			if (alt === undefined) {
+				// You bet we throw an error on missing alt (alt="" works okay)
+				throw new Error(`Missing \`alt\` on responsiveimage from: ${src}`);
+			}
+
+			let metadata = await Image(src, {
+				widths,
+				formats: ["webp", "jpeg"],
+			});
+
+			let lowsrc = metadata.jpeg[0];
+			let highsrc = metadata.jpeg[metadata.jpeg.length - 1];
+
+			return `<picture>
+			${Object.values(metadata)
+				.map((imageFormat) => {
+					return `  <source type="${
+						imageFormat[0].sourceType
+					}" srcset="${imageFormat
+						.map((entry) => entry.srcset)
+						.join(", ")}" sizes="${sizes}">`;
+				})
+				.join("\n")}
+				<img
+					src="${lowsrc.url}"
+					width="${highsrc.width}"
+					height="${highsrc.height}"
+					alt="${alt}"
+					loading="lazy"
+					decoding="async">
+			</picture>`;
+		}
+	);
+};
+```
+
+</div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/image/intro.njk

@@ -1,11 +1,10 @@
 {%- set tabid = "imageintro" %}
+<div class="codetitle">my-node-script.js</div>
 <is-land on:visible import="/js/seven-minute-tabs.js">
-<seven-minute-tabs persist sync>
+<seven-minute-tabs persist sync class="tabs-flush">
   {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
   <div id="{{ tabid }}-jsesm" role="tabpanel">
 
-{% codetitle "my-node-script.js" %}
-
 ```js
 import Image from "@11ty/eleventy-img";
 
@@ -20,8 +19,6 @@ console.log(stats);
   </div>
   <div id="{{ tabid }}-jscjs" role="tabpanel">
 
-{% codetitle "my-node-script.js" %}
-
 ```js
 const Image = require("@11ty/eleventy-img");
 

src/_includes/snippets/image/templates.njk

@@ -0,0 +1,44 @@
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs persist sync class="tabs-flush">
+	{% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "shortcode"} %}
+	<div id="shortcode-liquid" role="tabpanel">
+{%- highlight "liquid" %}{% raw %}
+{% image "cat.jpg", "photo of my tabby cat" %}
+{% image "cat.jpg", "photo of my tabby cat", "(min-width: 30em) 50vw, 100vw" %}
+{% endraw %}{% endhighlight %}
+		<p>The comma between arguments is <strong>optional</strong> in Liquid templates.</p>
+	</div>
+	<div id="shortcode-njk" role="tabpanel">
+{%- highlight "jinja2" %}{% raw %}
+{% image "cat.jpg", "photo of my tabby cat" %}
+{% image "cat.jpg", "photo of my tabby cat", "(min-width: 30em) 50vw, 100vw" %}
+{% endraw %}{% endhighlight %}
+		<p>The comma between arguments is <strong>required</strong> in Nunjucks templates.</p>
+	</div>
+	<div id="shortcode-js" role="tabpanel">
+{%- highlight "js" %}{% raw %}
+export default function() {
+	let img1 = await this.image("cat.jpg", "photo of my tabby cat");
+	let img2 = await this.image("cat.jpg", "photo of my tabby cat", "(min-width: 30em) 50vw, 100vw");
+
+    return `${img1}
+
+${img2}`;
+};
+{% endraw %}{% endhighlight %}
+	</div>
+	<div id="shortcode-cjs" role="tabpanel">
+{%- highlight "js" %}{% raw %}
+module.exports = function() {
+	let img1 = await this.image("cat.jpg", "photo of my tabby cat");
+	let img2 = await this.image("cat.jpg", "photo of my tabby cat", "(min-width: 30em) 50vw, 100vw");
+
+    return `${img1}
+
+${img2}`;
+};
+{% endraw %}{% endhighlight %}
+
+</div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/plugins/i18nalternate.njk

@@ -0,0 +1,104 @@
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs persist sync>
+  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "localelinksrel"} %}
+  <div id="localelinksrel-njk" role="tabpanel">
+
+{% codetitle "_includes/mylayout.njk" %}
+
+{% raw %}
+
+```njk
+{# `{{lang}}` must be set by you in the data cascade, see above note #}
+<!doctype html>
+<html lang="{{lang}}">
+  <head>
+    <link rel="alternate" hreflang="{{lang}}" href="{{page.url}}">
+  {% for link in page.url | locale_links %}
+    <link rel="alternate" hreflang="{{link.lang}}" href="https://www.11ty.dev{{link.url}}">
+  {% endfor %}
+```
+
+{% endraw %}
+
+  </div>
+  <div id="localelinksrel-liquid" role="tabpanel">
+
+{% codetitle "_includes/mylayout.njk" %}
+
+{% raw %}
+
+```liquid
+<!doctype html>
+{% comment %} `{{lang}}` must be set by you in the data cascade, see above note {% endcomment %}
+<html lang="{{lang}}">
+  <head>
+    <link rel="alternate" hreflang="{{lang}}" href="{{page.url}}">
+{% assign links = page.url | locale_links %}
+{%- for link in links %}
+    <link rel="alternate" hreflang="{{link.lang}}" href="https://www.11ty.dev{{link.url}}">
+{%- endfor -%}
+```
+
+{% endraw %}
+
+  </div>
+  <div id="localelinksrel-js" role="tabpanel">
+
+{% codetitle "/_includes/mylayout.11ty.js" %}
+
+{% raw %}
+
+```js
+export default function (data) {
+	let links = this.locale_links(data.page.url);
+	// side note: url argument is optional for current page
+
+	// `${data.lang}` must be set by you in the data cascade, see above note
+	return `
+<!doctype html>
+<html lang="${data.lang}">
+  <head>
+    <link rel="alternate" hreflang="${data.lang}" href="{{data.page.url}}">
+  ${links
+		.map((link) => {
+			return `    <link rel="alternate" hreflang="${link.lang}" href="https://www.11ty.dev${link.url}">`;
+		})
+		.join("\n")}
+`;
+};
+```
+
+{% endraw %}
+
+  </div>
+	<div id="localelinksrel-cjs" role="tabpanel">
+
+{% codetitle "/_includes/mylayout.11ty.cjs" %}
+
+{% raw %}
+
+```js
+module.exports = function (data) {
+	let links = this.locale_links(data.page.url);
+	// side note: url argument is optional for current page
+
+	// `${data.lang}` must be set by you in the data cascade, see above note
+	return `
+<!doctype html>
+<html lang="${data.lang}">
+  <head>
+    <link rel="alternate" hreflang="${data.lang}" href="{{data.page.url}}">
+  ${links
+		.map((link) => {
+			return `    <link rel="alternate" hreflang="${link.lang}" href="https://www.11ty.dev${link.url}">`;
+		})
+		.join("\n")}
+`;
+};
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/plugins/i18nexample.njk

@@ -0,0 +1,86 @@
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs persist sync>
+  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "localelinks"} %}
+  <div id="localelinks-njk" role="tabpanel">
+
+{% codetitle "/en/blog.njk" %}
+
+{% raw %}
+
+```njk
+This page is also available in:
+{% for link in page.url | locale_links %}
+{%- if not loop.first %},{% endif %}
+<a href="{{link.url}}" lang="{{link.lang}}" hreflang="{{link.lang}}">{{link.label}}</a>
+{% endfor %}
+```
+
+{% endraw %}
+
+  </div>
+  <div id="localelinks-liquid" role="tabpanel">
+
+{% codetitle "/en/blog.liquid" %}
+
+{% raw %}
+
+```liquid
+This page is also available in:
+{% assign links = page.url | locale_links %}
+{%- for link in links %}
+{%- unless forloop.first %},{% endunless %}
+<a href="{{link.url}}" lang="{{link.lang}}" hreflang="{{link.lang}}">{{link.label}}</a>
+{%- endfor -%}
+```
+
+{% endraw %}
+
+  </div>
+  <div id="localelinks-js" role="tabpanel">
+
+{% codetitle "/en/blog.11ty.js" %}
+
+{% raw %}
+
+```js
+export default function (data) {
+	let links = this.locale_links(data.page.url);
+
+	// Don’t forget to localize this text too
+	return `This page is also available in:
+${links
+	.map((link) => {
+		return `<a href="${link.url}" lang="${link.lang}" hreflang="${link.lang}">${link.label}</a>`;
+	})
+	.join(", ")}`;
+};
+```
+
+{% endraw %}
+
+  </div>
+	<div id="localelinks-cjs" role="tabpanel">
+
+{% codetitle "/en/blog.11ty.cjs" %}
+
+{% raw %}
+
+```js
+module.exports = function (data) {
+	let links = this.locale_links(data.page.url);
+
+	// Don’t forget to localize this text too
+	return `This page is also available in:
+${links
+	.map((link) => {
+		return `<a href="${link.url}" lang="${link.lang}" hreflang="${link.lang}">${link.label}</a>`;
+	})
+	.join(", ")}`;
+};
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>