Work on images, but it leaves a lot to be desired

....we'll have to reimplement Image.generateHTML :-/

.docs/.eleventy.js

@@ -1,4 +1,72 @@
-module.exports = function(eleventyConfig) {
+const path = require("path");
-	eleventyConfig.addPassthroughCopy("images");
+
-	eleventyConfig.addPassthroughCopy("theme.css");
+const htmlentities = require("html-entities");
+const Image = require("@11ty/eleventy-img");
+
+var nextid = 0;
+
+async function shortcode_image(src, alt, classes = "") {
+	let metadata = await Image(src, {
+		widths: [300, null],
+		formats: ["avif", "jpeg"],
+		outputDir: `./_site/img/`,
+		filenameFormat: (_id, src, width, format, _options) => {
+			const extension = path.extname(src);
+			const name = path.basename(src, extension);
+			return `${name}-${width}w.${format}`;
+		}
+	});
+	console.log(metadata);
+	
+	let imageAttributes = {
+		class: classes,
+		alt: htmlentities.encode(alt),
+		sizes: Object.values(metadata)[0].map((el) => `${el.width}w`).join(" "),
+		loading: "lazy",
+		decoding: "async",
+	};
+
+	// You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
+	return Image.generateHTML(metadata, imageAttributes);
+}
+
+async function shortcode_image_url(src) {
+	let metadata = await Image(src, {
+		widths: [ null ],
+		formats: [ "jpeg" ],
+		outputDir: `./_site/img/`,
+		filenameFormat: (_id, src, width, format, _options) => {
+			const extension = path.extname(src);
+			const name = path.basename(src, extension);
+			return `${name}-${width}w.${format}`;
+		}
+	});
+	console.log(metadata);
+	
+	let data = metadata.jpeg[metadata.jpeg.length - 1];
+	return data.url;
+}
+
+async function shortcode_cssbox(content, src) {
+	let idprev = `image-${nextid}`;
+	nextid += 1;
+	let idthis = `image-${nextid}`;
+	let idnext = `image-${nextid + 1}`;
+	return `<div class="cssbox">
+<a id="${idthis}" href="#${idthis}">${await shortcode_image(src, content, "cssbox_thumb", "300w")}
+	<span class="cssbox_full">${await shortcode_image(src, content, "", "1920w")}</span>
+</a>
+<a class="cssbox_close" href="#void"></a>
+<a class="cssbox_prev" href="#${idprev}">&lt;</a>
+<a class="cssbox_next" href="#${idnext}">&gt;</a>
+</div>`;
+}
+
+module.exports = function(eleventyConfig) {
+	// eleventyConfig.addPassthroughCopy("images");
+	// eleventyConfig.addPassthroughCopy("css");
+	eleventyConfig.addShortcode("image", shortcode_image);
+	eleventyConfig.addJavaScriptFunction("image", shortcode_image);
+	eleventyConfig.addShortcode("image-url", shortcode_image_url);
+	eleventyConfig.addPairedShortcode("cssbox", shortcode_cssbox);
 }

.docs/.eleventyignore

@@ -0,0 +1 @@
+css/

.docs/_includes/theme.njk

@@ -28,6 +28,7 @@
 		
 		<footer>
 			<p>Built with ❤ by <a href="https://starbeamrainbowlabs.com/">Starbeamrainbowlabs</a></p>
+			<p>Tech: <a href="https://www.11ty.dev/">Eleventy</a></p>
 			<p>Licensed under <a href="https://www.mozilla.org/en-US/MPL/2.0/">Mozilla Public Licence 2.0</a> (<a href="https://tldrlegal.com/license/mozilla-public-license-2.0-(mpl-2)">tldr</a>)</p>
 		</footer>
 	</body>

.docs/css.njk

@@ -0,0 +1,5 @@
+---
+permalink: theme.css
+---
+{% include "css/theme.css" %}
+{% include "css/CSSBox/cssbox.css" %}

.docs/css/CSSBox

@@ -0,0 +1 @@
+Subproject commit 2234546c25d51770086f972b0f330d4087e7c829

.docs/css/theme.css

@@ -103,6 +103,7 @@ iframe, object, embed, img, table
 {
 	max-width: 100%;
 }
+picture img { height: initial; }
 
 /* Turn the user's cursor into a hand when over things they can click */
 button, summary
@@ -217,3 +218,8 @@ input[type=text], input[type=number], textarea
 /* .features-large figure img {
 	max-width: 12em;
 } */
+
+
+.cssgallery {
+	display: flex;
+}

.docs/index.html

@@ -5,7 +5,7 @@ tags: navigable
 date: 2000-01-01
 ---
 
-<section class="bigbox" style="--bg: url(/images/banner-main.jpeg)">
+<section class="bigbox" style="--bg: url({% image-url "images/banner-main.jpeg" %})">
 	<h1>WorldEditAdditions</h1>
 	<p><em>Extra tools and commands to extend <a href="https://github.com/Uberi/Minetest-WorldEdit">WorldEdit</a> for <a href="https://www.minetest.net/">Minetest</a></em></p>
 	<p>If you can dream of it, it probably belongs here!</p>
@@ -13,7 +13,8 @@ date: 2000-01-01
 
 <section class="features-large">
 	<figure>
-		<img src="/images/maze2d-alt.png" alt="A green 2D hedge maze, made with the //maze command" />
+		{% image "images/maze2d-alt.png", "A green 2D hedge maze, made with the //maze command" %}
+		<!-- <img src="/images/maze2d-alt.png" alt="A green 2D hedge maze, made with the //maze command" /> -->
 		<figcaption>
 			<p>Use <code>//maze</code> and <code>//maze3d</code> to generate customisable mazes in 2 or 3 dimensions.</p>
 			<p>Customise the path sizing for additional artistic control.</p>
@@ -21,7 +22,8 @@ date: 2000-01-01
 	</figure>
 	
 	<figure>
-		<img src="/images/forest.png" alt="A forest of orange and lemon trees from the cooltrees mod, along with some bushes from Minetest Game." />
+		{% image "images/forest.png", "A forest of orange and lemon trees from the cooltrees mod, along with some bushes from Minetest Game." %}
+		<!-- <img src="/images/forest.png" alt="A forest of orange and lemon trees from the cooltrees mod, along with some bushes from Minetest Game." /> -->
 		<figcaption>
 			<p>Save time by creating instant forests with <code>//forest</code>.</p>
 			<p>Artibrary mixes of saplings are supported too as a weighted list.</p>
@@ -29,7 +31,8 @@ date: 2000-01-01
 	</figure>
 	
 	<figure>
-		<img src="/images/conv-layers.png" alt="A small mountain smoothed with //smoothadv and topped with snow with //overlay" />
+		{% image "images/conv-layers.png", "A small mountain smoothed with //smoothadv and topped with snow with //overlay" %}
+		<!-- <img src="/images/conv-layers.png" alt="A small mountain smoothed with //smoothadv and topped with snow with //overlay" /> -->
 		<figcaption>
 			<p>Unlock a continuously growing library of commands, such as <code>//smoothadv</code> for easy terrain smoothing, and <code>//overlay</code> for overlaying a node on top of terrain.</p>
 			<p>Many more commands are waiting to be discovered, including <code>//torus</code>, <code>//bonemeal</code>, and <code>//scale</code>.</p>
@@ -37,6 +40,7 @@ date: 2000-01-01
 	</figure>
 	
 	<figure>
+		{% image "images/torus-bonemeal.png", "A dirt torus with a grassy top, and a meadow of grass/flowers. Demonstrates //layers and //bonemeal. Doesn't have much to do with the sentences below - I just thought it looked nice as meta commands are difficult to find a good picture for." %}
 		<img src="/images/torus-bonemeal.png" alt="A dirt torus with a grassy top, and a meadow of grass/flowers. Demonstrates //layers and //bonemeal. Doesn't have much to do with the sentences below - I just thought it looked nice as meta commands are difficult to find a good picture for." />
 		<figcaption>
 			<p>Powerful meta commands such as <code>//multi</code> for executing multiple commands at once and <code>//subdivide</code> for running commands on areas of virtually unlimited size enable convenience and enhance flexibility.</p>
@@ -44,7 +48,12 @@ date: 2000-01-01
 	</figure>
 </section>
 
-
-
-
 <!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
+<section class="cssbox-gallery">
+	{% cssbox "images/gallery-a.jpeg" %}
+		A scene demonstrating <code>//replacemix</code>, <code>//ellipsoid</code>, <code>//layers</code>, <code>smoothadv</code> (aka <code>convolve</code> and <code>conv</code>), and <code>//floodfill</code> - all of which are provided by WorldEditAdditions.
+	{% endcssbox %}
+	{% cssbox "images/gallery-b.jpeg" %}
+		The inside of a 3d maze made with <code>//maze3d</code>. Lighting was placed manually to improve screenshot quality.
+	{% endcssbox %}
+</section>

.docs/package.json

@@ -18,6 +18,8 @@
 	},
 	"homepage": "https://github.com/sbrl/Minetest-WorldEditAdditions#readme",
 	"devDependencies": {
-		"@11ty/eleventy": "^0.12.1"
+		"@11ty/eleventy": "^0.12.1",
+		"@11ty/eleventy-img": "^0.9.0",
+		"html-entities": "^2.3.2"
 	}
 }

.gitmodules

@@ -0,0 +1,3 @@
+[submodule ".docs/css/CSSBox"]
+	path = .docs/css/CSSBox
+	url = https://github.com/TheLastProject/CSSBox.git