Merge branch 'main' into vortechnix

.docs/.eleventy.js

@@ -1,3 +1,4 @@
+const fs = require("fs");
 const path = require("path");
 
 const htmlentities = require("html-entities");
@@ -5,18 +6,28 @@ const Image = require("@11ty/eleventy-img");
 
 var nextid = 0;
 
+const image_filename_format = (_id, src, width, format, _options) => {
+	const extension = path.extname(src);
+	const name = path.basename(src, extension);
+	return `${name}-${width}w.${format}`;
+};
+
+function image_metadata_log(metadata, source) {
+	for(let format in metadata) {
+		for(let img of metadata[format]) {
+			console.log(`${source.padEnd(10)} ${format.padEnd(5)} ${`${img.width}x${img.height}`.padEnd(10)} ${img.outputPath}`);
+		}
+	}
+}
+
 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}`;
-		}
+		filenameFormat: image_filename_format
 	});
-	console.log(metadata);
+	image_metadata_log(metadata, `IMAGE`);
 	
 	let imageAttributes = {
 		class: classes,
@@ -35,31 +46,35 @@ async function shortcode_image_url(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}`;
-		}
+		filenameFormat: image_filename_format
 	});
-	console.log(metadata);
+	image_metadata_log(metadata, `IMAGE_URL`);
 	
 	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>`;
+async function shortcode_image_urlpass(src) {
+	let target_dir = `./_site/img`;
+	if(!fs.existsSync(target_dir))
+		await fs.promises.mkdir(target_dir, { recursive: true });
+	let filename = path.basename(src);
+	// Generally speaking we optimise PNGs *very* well with oxipng/Zopfli,
+	// and the Image plugin doesn't respect this
+	await fs.promises.copyFile(src, path.join(target_dir, filename));
+	return `/img/${filename}`;
+}
+
+async function shortcode_gallerybox(content, src, idthis, idprev, idnext) {
+	return `<figure class="gallerybox-item" id="${idthis}">
+<!-- ${await shortcode_image(src, "", "gallerybox-thumb", "300w")} -->
+	${await shortcode_image(src, "", "", "1920w")}
+	
+	<figcaption>${content}</figcaption>
+	
+<a class="gallerybox-prev" href="#${idprev}">❰</a>
+<a class="gallerybox-next" href="#${idnext}">❱</a>
+</figure>`;
 }
 
 module.exports = function(eleventyConfig) {
@@ -67,6 +82,9 @@ module.exports = function(eleventyConfig) {
 	// 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);
+	// eleventyConfig.addNunjucksAsyncShortcode("image_url", shortcode_image_url);
+	eleventyConfig.addAsyncShortcode("image_url", shortcode_image_url);
+	eleventyConfig.addAsyncShortcode("image_urlpass", shortcode_image_urlpass);
+	eleventyConfig.addNunjucksAsyncShortcode("image_urlpass", shortcode_image_urlpass);
+	eleventyConfig.addPairedShortcode("gallerybox", shortcode_gallerybox);
 }

.docs/Changelog.11tydata.json

@@ -1,5 +1,5 @@
 {
-	"layout": "theme.njk",
+	"layout": "content-generic.njk",
 	"title": "Changelog",
 	"tags": "navigable",
 	"date": "2002-01-01"

.docs/Cookbook.11tydata.json

@@ -0,0 +1,6 @@
+{
+	"layout": "content-generic.njk",
+	"title": "Cookbook",
+	"tags": "navigable",
+	"date": "2006-01-01"
+}

.docs/Cookbook.md

@@ -0,0 +1 @@
+../Cookbook.md

.docs/Reference.11tydata.js

@@ -0,0 +1,24 @@
+const fs = require("fs");
+const path = require("path");
+const parse_sections = require("./lib/parse_sections.js");
+
+const sections = parse_sections(fs.readFileSync(
+	path.resolve(
+		__dirname,
+		`../Chat-Command-Reference.md`
+	),
+	"utf-8"
+));
+
+console.log(`REFERENCE SECTION TITLES`, sections.slice(1)
+	.sort((a, b) => a.title.localeCompare(b.title)).map(s => s.title));
+
+module.exports = {
+	layout: "theme.njk",
+	title: "Reference",
+	tags: "navigable",
+	date: "2001-01-01",
+	section_intro: sections[0],
+	sections_help: sections.slice(1)
+		.sort((a, b) => a.title.localeCompare(b.title))
+}

.docs/Reference.11tydata.json

@@ -1,6 +0,0 @@
-{
-	"layout": "theme.njk",
-	"title": "Reference",
-	"tags": "navigable",
-	"date": "2001-01-01"
-}

.docs/Reference.html

@@ -0,0 +1,99 @@
+<main>
+	<section class="panel-generic">
+		<h1 id="{{ section.slug }}">{{ section_intro.title }}</h1>
+		<p>This is the full chat command reference for WorldEditAdditions. It has 2 parts:</p>
+		
+		<ol>
+			<li>A contents list of commands and their syntax</li>
+			<li>A full reference, with detailed explanations for each command</li>
+		</ol>
+		
+		<p>After the contents, there is a <a href="#filter">filter box</a> for filtering the detailed explanations to quickly find the one you're after.</p>
+	</section>
+	
+	<section class="panel-generic">
+		<h2 id="contents" class="linked-section-heading">
+			<a class="section-link" href="#{{ section.slug }}">&#x1f517; <!-- Link Symbol --></a>
+			<span>Contents</span>
+		</h2>
+		<p>TODO: Group commands here by category (*especially* the meta commands)</p>
+		<ul class="command-list">
+			{% for section in sections_help %}
+			<li><a href="#{{ section.slug }}">
+				<code>{{ section.title }}</code>
+			</a></li>
+			{% endfor %}
+		</ul>
+	</section>
+	
+	<section id="filter" class="panel-generic">
+		<div class="form-item bigsearch">
+			<label for="input-filter">Filter:</label>
+			<input type="search" id="input-filter" />
+		</div>
+		<div class="form-item centre checkbox">
+			<input type="checkbox" id="input-searchall" placeholder="Start typing to filter the sections." />
+			<label for="input-searchall" title="If unchecked, only the title will be searched.">Search content</label>
+		</div>
+	</section>
+	
+	<script>
+		function search_text(query, text) {
+			return text.toLocaleLowerCase().includes(query);
+		}
+		
+		function do_filter() {
+			let el_search = document.querySelector("#input-filter");
+			let el_searchall = document.querySelector("#input-searchall");
+			let els_sections = document.querySelectorAll("section.filterable");
+			
+			let query = el_search.value.toLocaleLowerCase();
+			
+			let mode = el_searchall.checked ? "all" : "header";
+			console.log(`SEARCH | mode`, mode, `query`, query);
+			
+			for(let i = 0; i < els_sections.length; i++) {
+				let el_next = els_sections[i];
+				
+				let show = true;
+				if(query.length > 0) {
+					switch(mode) {
+						case "all":
+							show = search_text(query,
+								el_next.textContent
+							);
+							break;
+						case "header":
+							show = search_text(query,
+								el_next.querySelector(".linked-section-heading").textContent
+							);
+							break;
+					}
+				}
+				
+				el_next.classList.remove("visible", "hidden");
+				el_next.classList.add(show ? "visible" : "hidden");
+			}
+		}
+		
+		window.addEventListener("load", (_event) => {
+			let el_search = document.querySelector("#input-filter");
+			let el_searchall = document.querySelector("#input-searchall");
+			
+			el_search.addEventListener("input", do_filter);
+			el_search.addEventListener("search", do_filter);
+			el_searchall.addEventListener("change", do_filter);
+		});
+	</script>
+	
+	{% for section in sections_help %}
+		<section class="panel-generic filterable">
+			<h2 id="{{ section.slug }}" class="linked-section-heading">
+				<a class="section-link" href="#{{ section.slug }}">&#x1f517; <!-- Link Symbol --></a>
+				<span>{{ section.title }}</span>
+			</h2>
+			
+			{{ section.content }}
+		</section>
+	{% endfor %}
+</main>

.docs/Reference.md

@@ -1 +0,0 @@
-../Chat-Command-Reference.md

.docs/Tutorial.md

@@ -0,0 +1,120 @@
+---
+layout: content-generic.njk
+title: Tutorial
+tags: navigable
+date: 2004-01-01
+---
+
+# WorldEditAdditions Beginner's Tutorial
+Welcome to the WorldEditAdditions beginners tutorial! There are a number of conventions used in the [chat command reference](/Reference) that may not be immediately obvious - this guide serves to explain in detail.
+
+It is assumed that:
+
+ - You are already familiar the basics of [Minetest](https://www.minetest.net/) (try the [tutorial game](https://content.minetest.net/packages/Wuzzy/tutorial/) if you're unsure)
+ - You have both WorldEdit and WorldEditAdditions installed (see the [Download](/#download) section)
+
+Minetest supports the execution of _Chat Commands_ to manipulate the Minetest world. While in a Minetest world, simply type `/help` (the first forward slash `/` will automatically cause the chat window to appear) and hit <kbd>enter</kbd> to display a list of chat commands that are currently registered grouped by mod for example.
+
+WorldEdit commands are, by convention, prefixed with an additional forward slash `/`. Here are some examples of WorldEdit chat commands:
+
+```
+//1
+//2
+//set dirt
+```
+
+Explaining core WorldEdit commands is out of scope of this tutorial, but you can find a complete list of them here: <https://github.com/Uberi/Minetest-WorldEdit/blob/master/ChatCommands.md>.
+
+The purpose of _WorldEditAdditions_ is to extend _WorldEdit_ by adding additional commands. Example commands that have been implemented that are not present in core _WorldEdit_ include (but certainly aren't limited to):
+
+ - [`//maze`](/Reference/#maze-replace_node-path_length-path_width-seed): Create instant mazes
+ - [`//forest`](/Reference/#forest-density-sapling_a-chance_a-sapling_b-chance_b-sapling_n-chance_n-): Plant forests
+ - [`//torus`](http://localhost:8080/Reference/#torus-major_radius-minor_radius-node_name-axesxy-hollow): Generate [torus](https://en.wikipedia.org/wiki/Torus) shapes
+ - [`//scale`](/Reference/#scale-axis-scale_factor-factor_x-factor_y-factor_z-anchor_x-anchor_y-anchor_z): Scale things up and down - even both at the same time!
+
+See a full list with complete explanations in the [chat command reference](/Reference).
+
+
+## Regions
+WorldEdit allows you to define a _region_ by specifying 2 points in the world - we number these points 1 and 2. By using the WorldEdit wand (or WorldEditAdditions Far Wand), one can left click to set the position of point 1, and right click to set point 2:
+
+{% image "images/tutorial_pos1_2.jpeg" "A screenshot showing WorldEdit points 1 and 2 in a desert with a cactus" %}
+
+Point 1 is on the cactus, and point 2 is on the ground in the bottom left.
+
+Most WorldEdit and WorldEditAdditions commands require either 1 or 2 points to be set in order to work.
+
+ - If 1 point is required, it's the origin point used by the command
+ - If 2 points are required, the defined region specifies the area in which the command is operate
+
+
+## Command syntax
+When explaining the syntax (ref [a](https://en.wikipedia.org/wiki/Syntax_(programming_languages)), [b](https://www.bbc.co.uk/bitesize/guides/z22wwmn/revision/6)) of a command, a number of different conventions are used to concisely explain said syntax. Understanding enables you to quickly understand the output of `/help /maze` for example, or the list of commands in the [reference](/Reference).
+
+ - `<thing>`: A placeholder for a value that you can change. Do *not* include the `<` angle brackets `>` when replacing it with your actual value.
+ - `a | b`: 1 thing or another, but not both.
+ - `[optional_thing]`: Something that's optional. Specifying it enables greater control over the behaviour of the command, but it can be left out for convenience.
+ - `<thing|other_thing>`: Pick 1 item from the list and replace the entire group, removing the `<` angle brackets `>` as with `<thing>`. For example `<snowballs|river>` could become either `snowballs` or `river`, but not both at the same time.
+ - `<thing=default_value>`: Most commonly seen in `[` square brackets `]` indicating an optional thing. Indicates the default value of something that you can replace (or omit).
+ - `...`: Indicates that the previous items can be repeated.
+
+Let's illustrate this with a practical example. Consider the following:
+
+```
+//example <height> <apple|orange> | <height> <width> <pear|maple> [<extra_value>]
+```
+
+The following different invocations of the above would be valid:
+
+```
+//example 10 apple
+//example 45 30 maple
+//example 30 12 pear something_else
+```
+
+Now let's apply this to a more practical example:
+
+```
+//erode [<snowballs|river> [<key_1> [<value_1>]] [<key_2> [<value_2>]] ...]
+```
+
+The `<snowballs|river>` explains that either a value of `snowballs` or `river` is acceptable. Then, a key - value list of options can be specified - allowing an arbitrary number of options.
+
+From this, we can infer the following usage:
+
+```
+//erode snowballs speed 1 count 50000
+```
+
+
+## Anything else?
+
+ - Make sure we have covered everything
+
+
+## Advanced Concepts
+A number of additional concepts that are not required to use WorldEditAdditions are explained here, as they can be helpful for understanding some of the more advanced concepts and commands provided by WorldEditAdditions.
+
+### Meta commands
+WorldEditAdditions provides a number of *meta commands*. Such commands don't do anything on their own, but call other commands in various different ways. Examples of meta commands include:
+
+ - [`//subdivide`](/Reference#subdivide-size_x-size_y-size_z-cmd_name-args): split a region into chunks, and execute the command once for each chunk
+ - [`//many`](/Reference#many-times-command): Execute a command multiple times
+ - [`//multi`](/Reference#multi-command_a-command_b-command_c-): Execute multiple commands in sequence
+
+Of course, this isn't an exhaustive list - check the [reference](/Reference) for a full list.
+
+### Memory usage
+Memory (or RAM - Random Access Memory) is used by all the processes running on a system to hold data that they are currently working with. This is especially important for WorldEdit and WorldEditAdditions, since the larger the region you define the more memory that will be required to run commands on it.
+
+Depending on your system, Minetest and your system can slow to a crawl or even crash if you execute a command on a region that's too big.
+
+To work around this, the [`//subdivide`](/Reference#subdivide-size_x-size_y-size_z-cmd_name-args) command was implemented. It splits the defined region into chunks, and calls the specified command over and over again for each chunk. 
+
+It's not suitable for all commands (since it requires that said command takes 2 points) though, but because it splits the defined region into multiple chunks, it can be executed on *enormous* regions that can't fit into memory all at the same time.
+
+
+## Conclusion
+This short tutorial has explained a few key concepts that are useful for understanding WorldEditAdditions, from executing chat commands to the syntax used in the [reference](/Reference) to concisely describe commands.
+
+If there's a concept that you don't understand after reading this and the [reference](/Reference), please [open an issue](https://github.com/sbrl/Minetest-WorldEditAdditions/issues/new) with a detailed explanation of what it is that you're finding difficult to understand.

.docs/_data/contributors.js

@@ -0,0 +1,23 @@
+const fs = require("fs");
+const path = require("path");
+const htmlentities = require("htmlentities");
+
+function read_contributors() {
+	return fs.readFileSync(path.resolve(__dirname, "../../CONTRIBUTORS.tsv"), "utf-8")
+		.split("\n")
+		.slice(1)
+		.filter(line => line.length > 0)
+		.map(line => line.split(/\s+/))
+		.map(items => { return {
+			handle: htmlentities.encode(items[0]),
+			name: htmlentities.encode(items[1]),
+			profile_url: `https://github.com/${encodeURIComponent(items[0])}`,
+			avatar_url: `https://avatars.githubusercontent.com/${encodeURIComponent(items[0])}`
+		} });
+}
+
+const contributors = read_contributors();
+
+console.log(`CONTRIBUTORS`, contributors);
+
+module.exports = contributors;

.docs/_includes/content-generic.njk

@@ -0,0 +1,7 @@
+---
+layout: theme.njk
+---
+
+<main class="panel-generic">
+	{{ content | safe }}
+</main>

.docs/_includes/theme.njk

@@ -1,6 +1,3 @@
----
-
----
 <!DOCTYPE html>
 <html>
 	<head>
@@ -10,9 +7,9 @@
 		<link rel="stylesheet" href="/theme.css" />
 	</head>
 	<body>
-		<nav>
+		<nav class="shadow-bottom">
 			<h1>
-				<img src="https://starbeamrainbowlabs.com/images/placeholder/?width=64&height=64&text=%20?%20" alt="Placeholder logo" class="icon medium" />
+				<img src="{% image_urlpass '../worldeditadditions.png' %}" alt="" class="icon logo" />
 				WorldEditAdditions
 			</h1>
 			<ul>
@@ -21,15 +18,25 @@
 					<a href="{{ navitem.url }}" class="nav">{{ navitem.data.title }}</a>
 				</li>
 			{% endfor %}
-				<li><a href="https://github.com/sbrl/Minetest-WorldEditAdditions/" class="nav">GitHub</a></li>
+				<li><a href="https://github.com/sbrl/Minetest-WorldEditAdditions/" class="nav image"><img src="{% image_urlpass 'images/github.svg' %}" alt="GitHub" title="GitHub" /></a></li>
 			</ul>
 		</nav>
+		
 		{{ content | safe }}
 		
-		<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 class="shadow-top">
+			<p>WorldEditAdditions built with ❤️ by these awesome people:</p>
+			<ul class="contributor-list">
+				{% for contributor in contributors %}
+				<li><a href="{{ contributor.profile_url }}">
+					<img class="icon large" src="{{ contributor.avatar_url }}" alt="{{ contributor.name }}" />
+					<span>{{ contributor.name }}</span>
+				</a></li>
+				{% endfor %}
+			</ul>
+			
+			<p>Tech: <a href="https://www.11ty.dev/">Eleventy</a> (this website), <a href="https://www.heropatterns.com/">Hero Patterns</a> (background patterns), <a href="https://github.com/shssoichiro/oxipng">Oxipng</a> (PNG image compression), <a href="https://www.minetest.net/">Minetest</a> (of course)</p>
+			<p>Licensed under the <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>
 </html>

.docs/css.njk

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

.docs/css/CSSBox

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

.docs/css/gallerybox.css

@@ -0,0 +1,123 @@
+/*
+ ██████   █████  ██      ██      ███████ ██████  ██    ██ ██████   ██████  ██   ██
+██       ██   ██ ██      ██      ██      ██   ██  ██  ██  ██   ██ ██    ██  ██ ██
+██   ███ ███████ ██      ██      █████   ██████    ████   ██████  ██    ██   ███
+██    ██ ██   ██ ██      ██      ██      ██   ██    ██    ██   ██ ██    ██  ██ ██
+ ██████  ██   ██ ███████ ███████ ███████ ██   ██    ██    ██████   ██████  ██   ██
+
+A pure css gallery, made with a bunch of wonderful hacks! Will be upgraded to
+be (slightly) less hacky once :target-within lands in browsers.
+
+Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
+ */
+
+
+.gallerybox {
+	display: flex;
+	justify-content: center;
+	/*
+	The <picture /> element causes a small amount of extra padding at the
+	bottom of the element, so we use this to balance out the look at the top
+	ideally we'd shift the <picture> out of the way, but we can't without also
+	shifting the <img /> inside
+	*/
+	padding-top: 0.2em;
+}
+
+.gallerybox-gallery {
+	--gallerybox-nextprev-padding: 5vw;
+	--gallerybox-nextprev-move: 0.2em;
+	--gallerybox-nextprev-hover: 0.1em;
+	
+	max-width: 80vmax;
+	
+	display: grid;
+	grid-template-columns: auto;
+	grid-template-rows: auto;
+	grid-template-areas: "main";
+}
+
+/* .gallerybox picture {
+	position: relative;
+	top: -1em;
+}
+.gallerybox picture > img {
+	position: relative;
+	top: 1em;
+} */
+
+.gallerybox-item {
+	grid-area: main;
+	z-index: 2;
+}
+
+.gallerybox-item > figcaption {
+	background: hsla(0, 0%, 95%, 0.75);
+	position: absolute;
+	bottom: 0.25em; left: 0; right: 0;
+	padding: 0.75em 1em;
+	text-align: center;
+}
+
+.gallerybox-gallery > .gallerybox-item:target {
+	display: block;
+	z-index: 100;
+}
+/* .gallerybox-gallery > .gallerybox-item:not(:target) {
+	display: none;
+	z-index: 2;
+}
+.gallerybox-item:not(:target) ~ .gallerybox-item:last-child {
+	display: block;
+	z-index: 2;
+} */
+
+/* 
+.gallerybox-gallery:target-within > .gallerybox-item:target {
+	display: block;
+}
+.gallerybox-gallery:target-within > .gallerybox-item:not(:target) {
+	display: none;
+} */
+
+
+.gallerybox-item {
+	position: relative;
+}
+.gallerybox-item img {
+	max-width: 100%;
+}
+:where(.gallerybox-prev, .gallerybox-next) {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	position: absolute; top: 0;
+	vertical-align: middle;
+	font-weight: bold;
+	font-size: 4em;
+	color: hsla(0, 0%, 100%, 0.8) !important;
+	text-decoration: none;
+	transform: none;
+	transition: transform 0.25s;
+}
+.gallerybox-item > .gallerybox-prev {
+	padding-left: var(--gallerybox-nextprev-padding);
+	left: 0;
+}
+.gallerybox-item > .gallerybox-next {
+	padding-right: var(--gallerybox-nextprev-padding);
+	right: 0;
+}
+
+
+:where(.gallerybox-prev, .gallerybox-next):hover {
+	color: hsla(0, 0%, 100%, 1) !important;
+}
+:is(.gallerybox-prev, .gallerybox-next):active {
+	color: hsla(0, 0%, 100%, 1) !important;
+}
+.gallerybox-next:hover { transform: translateX(calc(var(--gallerybox-nextprev-hover) * -1)); }
+.gallerybox-prev:hover { transform: translateX(var(--gallerybox-nextprev-hover)); }
+
+.gallerybox-prev:active { transform: translateX(calc(var(--gallerybox-nextprev-move) * -1)); }
+.gallerybox-next:active { transform: translateX(var(--gallerybox-nextprev-move)); }

.docs/css/patterns.css

@@ -0,0 +1,6 @@
+:root {
+	/* Ref https://www.heropatterns.com/ */
+	--pattern-bricks: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%236ca8c7' fill-opacity='0.14'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+	--pattern-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%236ca8c7' fill-opacity='0.1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+	--pattern-jigsaw-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23b7e3ad' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
+}

.docs/css/theme.css

@@ -13,38 +13,36 @@
  */
 
 :root {
-	--bg-main: #8ABEF6;
-	--bg-bright: #38871e;
+	--bg-main: hsl(206, 87%, 67%);
+	/* --bg-bright: #57b43f; */
+	--bg-bright: #7ac767;
 	--bg-alt: #3F57B4;
 	--bg-transcluscent-slight: rgba(255, 255, 255, 0.1);
-	--bg-transcluscent: rgba(255, 255, 255, 0.8);
+	--bg-transcluscent: rgba(255, 255, 255, 0.85);
+	--bg-transcluscent-alt: hsla(226, 59%, 38%, 0.8);
+	--bg-transcluscent-alt-slight: hsla(196, 91%, 62%, 0.23);
 	
-	--text-main: #3F57B4;
+	/* --text-main: #3F57B4; */
+	--text-main: hsl(227, 70%, 35%);
 	--text-bright: #efefef;
 	--text-alt: #38871e;
 	
+	--shadow: hsla(0, 0%, 25%, 0.25);
+	--shadow-dark: hsla(0, 0%, 25%, 0.5);
+	
 	--highlight: hsl(353, 100%, 36%);
 }
 
-/* @media (prefers-color-scheme: dark) {
-	:root {
-		--bg-main: #232323;
-		--bg-bright: black;
-		--bg-transcluscent: rgba(50, 50, 50, 0.5);
-		
-		--text-main: #f3f3f3;
-	}
-} */
-
 /* rem is relative to the html element, and em is relative to the current element. */
-html { font-size: 100%; }
+html { font-size: 100%; scroll-behavior: smooth; }
 
 body
 {
 	margin: 0;
 	font-family: sans-serif; /* Serif is awful :( */
 	
-	background: var(--bg-main); /* Don't forget to update the @page one too for paged media */
+	background: url('{% image_urlpass "images/clouds.png" %}') center / cover fixed,
+		var(--bg-main); /* Don't forget to update the @page one too for paged media */
 	color: var(--text-main);
 }
 
@@ -64,6 +62,25 @@ title { string-set: page-title content(text); }
 		opacity: 0.6;
 	}
 }
+h1, h2, h3, h4, h5, h6 {
+	text-align: center;
+	word-wrap: break-word;
+}
+.linked-section-heading {
+	display: flex;
+}
+.linked-section-heading > a.section-link {
+	opacity: 0.75;
+	text-decoration: none;
+	transition: 0.25s opacity;
+}
+.linked-section-heading > a.section-link:hover {
+	opacity: 1;
+}
+.linked-section-heading > span {
+	flex: 1;
+	word-wrap: anywhere;
+}
 
 nav {
 	background: var(--bg-bright);
@@ -73,11 +90,11 @@ nav {
 	margin: 0;
 }
 nav h1 {
-	background: var(--bg-alt);
+	background: var(--text-bright);
 	margin: 0;
-	padding: 0.5em;
+	padding: 0.2em 0.5em 0.2em 0.2em;
 	font-size: 1.2em;
-	color: var(--text-bright);
+	color: var(--bg-alt);
 }
 nav ul {
 	flex: 1;
@@ -86,16 +103,23 @@ nav ul {
 	display: flex;
 	justify-content: space-evenly;
 }
-nav ul li {
-	background: var(--bg-transcluscent-slight);
-}
 nav a {
+	background: var(--bg-transcluscent-slight);
 	display: inline-block;
-	padding: 1.2em 3em;
+	padding: 1.2em 2em;
 	text-decoration: none;
 	font-weight: bold;
-	color: var(--text-bright);
+	color: var(--text-main);
 }
+nav li[aria-current=page] a {
+	margin: -0.25em;
+	border: 0.25em solid var(--bg-alt);
+}
+
+nav a.image {
+	padding: 0.75em 1em 0.5em 1em;
+}
+nav img { max-height: 2em; }
 
 
 /* A small tweak to things more responsive */
@@ -121,14 +145,39 @@ a { font-weight: bold; }
 /* a:not(.nav) { color: hsl(208, 67%, 40%); }
 a:not(.nav):hover { color: hsl(214, 67%, 50%); }
 a:not(.nav):active, a:focus { color: hsl(214, 87%, 60%); } */
-a:not(.nav):visited { color: hsl(240, 77%, 60%); }
+a:not(.nav):not(.bigbutton):visited { color: hsl(240, 77%, 60%); }
 
-pre { page-break-inside: avoid; break-inside: avoid; }
+pre {
+	page-break-inside: avoid;
+	break-inside: avoid;
+	padding: 0.6em;
+	border: 0.2em solid var(--bg-transcluscent-alt);
+	border-radius: 0.25em;
+	background: var(--bg-transcluscent-alt);
+	box-shadow: inset 0 0 0.5em 0.1em var(--shadow-dark);
+	line-height: 1.75em;
+	color: var(--text-bright);
+}
 pre, code {
+	text-align: left;
+	font-size: 1rem;
+	font-family: "Source Code Pro", "Ubuntu Mono", monospace;
 	white-space: pre-wrap;
 	-moz-tab-size: 4;
 	tab-size: 4;
 }
+pre > code { background: transparent; padding: 0; }
+code {
+	background: var(--bg-transcluscent-alt-slight);
+	border-radius: 0.25em;
+	padding: 0.15em;
+}
+
+label {
+	font-weight: bold;
+	cursor: pointer;
+	padding: 0.25em 0.45em;
+}
 
 
 /* todo add the rest of the textbox like inputs here */
@@ -142,37 +191,34 @@ input[type=text], input[type=number], textarea
 	border-radius: 5px;
 }
 
+.form-item {
+	display: flex;
+	margin: 0.5em 0;
+}
+.form-item.checkbox:not(.centre) > label { flex: 1; }
+.form-item:not(.checkbox):not(.centre) > input { flex: 1; }
+.form-item.centre { justify-content: center; }
+.bigsearch {
+	flex-direction: row;
+}
+.bigsearch > input[type=search] {
+	width: 100%;
+	box-sizing: border-box;
+}
 
-/* Utility / layout aids */
-.float.left		{ float: left;	}
-.float.right	{ float: right;	}
-
-.flex	{ display: flex; }
-.flex-1	{ flex: 1;	}
-.flex-2	{ flex: 2;	}
-.flex-3	{ flex: 3;	}
-.flex-4	{ flex: 4;	}
-.flex-5	{ flex: 5;	}
-.flex-6	{ flex: 6;	}
-
-.small-spacing	{ margin: 0.25em 0.35em;	padding: 0.25em 0.35em;	}
-.med-spacing	{ margin: 0.45em 0.65em;	padding: 0.45em 0.65em;	}
-.high-spacing	{ margin: 1em 1.25em;		padding: 1em 1.25em;	}
+footer {
+	margin: 3em 0 0 0;
+	padding: 1em;
+	text-align: center;
+	background: var(--pattern-jigsaw-green),
+		var(--bg-bright);
+	/* color: var(--text-bright); */
+}
 
 .text-left		{ text-align: left;		}
 .text-centre	{ text-align: center;	}
 .text-right		{ text-align: right;	}
 
-.small-text		{ font-size: 0.8rem;	}
-.medium-text	{ font-size: 1rem;		}
-.large-text		{ font-size: 1.3rem;	}
-
-.bold-text		{ font-weight: bolder;	}
-
-.block			{ display: block;			}
-.inline			{ display: inline;			}
-.inline.block	{ display: inline-block;	}
-
 .invisilink		{ text-decoration: none; color: inherit;			}
 .invisilist		{ list-style-type: none; margin: 5px; padding: 5px; }
 
@@ -181,9 +227,21 @@ input[type=text], input[type=number], textarea
 .icon.small		{ max-width: 1.25em; max-height: 1.25em;	}
 .icon.medium	{ max-width: 2em; max-height: 2em;			}
 .icon.large		{ max-width: 5em; max-height: 5em;			}
+.icon.logo		{
+	max-width: 3em;
+	max-height: 3em;
+}
+.icon.logo-large {
+	max-width: 8em;
+	max-height: 8em;
+}
 
-.img-text-middle{ vertical-align: middle; }
+.shadow-top		{ box-shadow: 0 -0.25em	0.5em			var(--shadow);	}
+.shadow-bottom	{ box-shadow: 0 0.25em	0.5em			var(--shadow);	}
+.shadow-vertical{ box-shadow: 0 0		0.5em	0.25em	var(--shadow);	}
+.shadow-text	{ text-shadow: 0.15em 0.15em 0.15em		var(--shadow);	}
 
+.hidden			{ display: none;							}
 
 .bigbox {
 	display: flex;
@@ -191,16 +249,17 @@ input[type=text], input[type=number], textarea
 	align-items: center; justify-content: center;
 	background: content-box linear-gradient(var(--bg-transcluscent), var(--bg-transcluscent)),
 		var(--bg) center / cover;
+	
 	height: 80vh;
 	padding: 0 5em 0 5em;
 	box-sizing: border-box;
 }
 .bigbox h1 {
-	margin-top: 0;
+	margin: 0;
 	font-size: 3em;
-	color: var(--text-alt);
+	/* color: var(--text-alt); */
+	color: var(--bg-alt);
 }
-.bigbox :last-child { margin-bottom: 7em; }
 
 .features-large {
 	margin: 3em 0;
@@ -209,16 +268,115 @@ input[type=text], input[type=number], textarea
 	flex-wrap: wrap;
 	justify-content: space-evenly;
 }
-.features-large figure {
+.features-large > :where(figure, .features-item) {
 	background: var(--bg-transcluscent);
+	background-image: var(--pattern-bricks);
 	margin: 0.1em;
 	padding: 1em;
 	max-width: 15em;
+	box-shadow: 0.25em 0.25em 0.5em var(--shadow);
 }
-/* .features-large figure img {
-	max-width: 12em;
+.features-item.wide {
+	flex: 1;
+	max-width: initial;
+	margin: 0.1em 2em;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}
+/* .features-item.wide > :last-child {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+    align-items: center;
 } */
 
-.cssbox-gallery {
-	display: flex;
+.panel-generic {
+	background: var(--bg-transcluscent);
+	background-image: var(--pattern-bricks);
+	margin: 2em;
+	padding: 1em;
+	box-shadow: 0.25em 0.25em 0.5em var(--shadow);
+}
+
+.bigbutton-list {
+	list-style-type: none;
+	margin: 0;
+	padding: 1em 0;
+	display: flex;
+	justify-content: space-around;
+}
+
+.bigbutton {
+	display: inline-block;
+	
+	margin: 0;
+	padding: 0.35em 0.45em;
+	border: 0;
+	border-radius: 0.25em;
+	
+	background: var(--bg-alt);
+	
+	color: var(--text-bright);
+	font-size: 1.25em;
+	text-decoration: none;
+	text-align: center;
+	
+	box-shadow: 0 0 0.5em var(--shadow);
+	
+	cursor: pointer;
+	transition: box-shadow 0.25s, transform 0.25s;
+}
+.bigbutton:hover {
+	box-shadow: 0 0.25em 0.65em var(--shadow);
+	transform: translateY(-0.25em);
+}
+.bigbutton:active {
+	box-shadow: 0 0 0.25em var(--shadow);
+	transform: translateY(0.1em);
+}
+.bigbutton.disabled {
+	filter: saturate(25%);
+	opacity: 0.75;
+	cursor: default;
+}
+
+.gallerybox {
+	background: var(--pattern-hex), var(--bg-transcluscent);
+}
+
+
+.command-list {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+	word-wrap: anywhere;
+}
+.command-list > li > a {
+	text-decoration: none;
+}
+.command-list code {
+	display: block;
+	padding: 0.5em;
+	box-sizing: border-box;
+	margin: 0.5em;
+}
+
+
+.contributor-list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+.contributor-list li {
+	padding: 0.5em;
+}
+.contributor-list a {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

.docs/images/github.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="250px" viewBox="0 0 256 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"/>
+    </g>
+</svg>

.docs/index.html

@@ -5,10 +5,18 @@ tags: navigable
 date: 2000-01-01
 ---
 
-<section class="bigbox" style="--bg: url({% image-url "images/banner-main.jpeg" %})">
+<section class="bigbox shadow-bottom" style="--bg: url({% image_url "images/banner-main.jpeg" %})">
+	<img src="{% image_urlpass '../worldeditadditions.png' %}" alt="" class="icon logo-large" />
 	<h1>WorldEditAdditions</h1>
+	<p>
+		<a href="https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/"><img src="https://img.shields.io/badge/dynamic/json?color=%23375a7f&amp;label=ContentDB&amp;query=downloads&amp;suffix=+downloads&amp;url=https%3A//content.minetest.net/api/packages/Starbeamrainbowlabs/worldeditadditions/" alt="WorldEditAdditions on ContentDB" /></a>
+		<a href="https://forum.minetest.net/viewtopic.php?f=11&t=24635"><img src="https://img.shields.io/badge/%F0%9F%92%AC-Forums-%2366D034" alt="WorldEditAdditions on the Minetest Forums" /></a>
+		<a href="https://github.com/sbrl/Minetest-WorldEditAdditions/releases/latest"><img src="https://img.shields.io/github/v/release/sbrl/Minetest-WorldEditAdditions?color=green&amp;label=latest%20release" alt="Latest release on GitHub" /></a>
+		<a href="/Changelog"><img src="https://img.shields.io/badge/%F0%9F%93%B0-Changelog-informational" alt="View the changelog" /></a>
+	</p>
 	<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>
+	<p><a href="#download" class="bigbutton">Get Started</a></p>
 </section>
 
 <section class="features-large">
@@ -41,7 +49,7 @@ date: 2000-01-01
 	
 	<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." />
+		<!-- <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>
 		</figcaption>
@@ -49,11 +57,55 @@ date: 2000-01-01
 </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 class="gallerybox shadow-vertical">
+	<section class="gallerybox-gallery">
+		{% gallerybox "images/gallery-a.jpeg" "image-first" "image-last" "image-b" %}
+			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.
+		{% endgallerybox %}
+		{% gallerybox "images/gallery-b.jpeg" "image-b" "image-first" "image-last" %}
+			The inside of a 3d maze made with <code>//maze3d</code>. Lighting was placed manually to improve screenshot quality.
+		{% endgallerybox %}
+		{% gallerybox "images/gallery-c.jpeg" "image-last" "image-b" "image-first" %}
+			A cliff made with <code>//layers</code> and <code>//erode</code>. A <code>//forest</code> has been applied on top with multiple sapling / tree types.
+		{% endgallerybox %}
+	</section>
+</section>
+
+<section>
+	<h2 id="download" class="shadow-text">Download</h2>
+	<div class="features-large">
+		<div class="features-item wide text-centre">
+			<h3>ContentDB</h3>
+			
+			<p><a href="https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/"><img class="icon-medium" src="{% image_urlpass 'images/contentdb.png' %}" alt="WorldEditAdditions on ContentDB" /></a></p>
+			
+			<p>Download from ContentDB, or from the <em>Content</em> tab in Minetest.</p>
+			
+			<p><a class="bigbutton" href="https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/">WorldEditAdditions on ContentDB</a></p>
+		</div>
+		<div class="features-item wide text-centre">
+			<h3>Git</h3>
+			<p>WorldEditAdditions is dependent on <a href="https://content.minetest.net/packages/sfan5/worldedit/">WorldEdit</a>. Clone using Git:</p>
+			
+			<pre><code>cd path/to/worldmods;
+git clone https://github.com/Uberi/Minetest-WorldEdit.git worldedit;
+git clone https://github.com/sbrl/Minetest-WorldEditAdditions.git worldeditadditions;</code></pre>
+			
+			<p><a class="bigbutton" href="https://github.com/sbrl/Minetest-WorldEditAdditions">Source code on GitHub</a></p>
+		</div>
+	</div>
+</section>
+
+<section>
+	<h2 class="shadow-text">Getting Started</h2>
+	
+	<div class="panel-generic">
+		<p>If you're familiar with WorldEdit already, then WorldEditAdditions will follow the existing expectations you're used to. For players new to WorldEdit / WorldEditAdditions, we have a tutorial that will get you up to speed in no time!</p>
+		
+		<ul class="bigbutton-list">
+			<li><a class="bigbutton" href="/Reference">Reference</a></li>
+			<li><a class="bigbutton" href="/Cookbook">Cookbook</a></li>
+			<li><a class="bigbutton" href="/Tutorial">Tutorial for Beginners</a></li>
+		</ul>
+	</div>
 </section>

.docs/lib/parse_sections.js

@@ -0,0 +1,28 @@
+const htmlentities = require("htmlentities");
+const markdown = require("markdown-it")({
+	xhtmlOut: true
+});
+
+module.exports = function parse_sections(source) {
+	const lines = source.split(/\r?\n/gi);
+	const result = [];
+	let acc = [];
+	for(let line of lines) {
+		if(line.startsWith(`#`) && !line.startsWith(`###`)) {
+			
+			if(acc.length > 0) {
+				let title = acc[0].match(/#+\s+(.+)\s*/)[1].replace(/^`*|`*$/g, "");
+				result.push({
+					title: htmlentities.encode(title),
+					slug: title.toLowerCase().replace(/[^a-z0-9-_\s]+/gi, "")
+						.replace(/\s+/g, "-"),
+					content: markdown.render(acc.slice(1).join("\n"))
+				});
+			}
+			acc = [ line ];
+		}
+		else
+			acc.push(line);
+	}
+	return result;
+}

.docs/package-lock.json

@@ -11,7 +11,8 @@
 			"devDependencies": {
 				"@11ty/eleventy": "^0.12.1",
 				"@11ty/eleventy-img": "^0.9.0",
-				"html-entities": "^2.3.2"
+				"html-entities": "^2.3.2",
+				"htmlentities": "^1.0.0"
 			}
 		},
 		"node_modules/@11ty/dependency-tree": {
@@ -1864,6 +1865,12 @@
 			"integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
 			"dev": true
 		},
+		"node_modules/htmlentities": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/htmlentities/-/htmlentities-1.0.0.tgz",
+			"integrity": "sha1-CTqMH7Cd/l4Wn8M9CVdIJdYeQKQ=",
+			"dev": true
+		},
 		"node_modules/http-errors": {
 			"version": "1.7.3",
 			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -6121,6 +6128,12 @@
 			"integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
 			"dev": true
 		},
+		"htmlentities": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/htmlentities/-/htmlentities-1.0.0.tgz",
+			"integrity": "sha1-CTqMH7Cd/l4Wn8M9CVdIJdYeQKQ=",
+			"dev": true
+		},
 		"http-errors": {
 			"version": "1.7.3",
 			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",

.docs/package.json

@@ -5,7 +5,8 @@
 	"main": "index.js",
 	"private": true,
 	"scripts": {
-		"test": "echo \"No tests have been implemented yet\""
+		"test": "echo \"No tests have been implemented yet\"",
+		"start": "npx @11ty/eleventy --serve"
 	},
 	"repository": {
 		"type": "git",
@@ -20,6 +21,7 @@
 	"devDependencies": {
 		"@11ty/eleventy": "^0.12.1",
 		"@11ty/eleventy-img": "^0.9.0",
-		"html-entities": "^2.3.2"
+		"html-entities": "^2.3.2",
+		"htmlentities": "^1.0.0"
 	}
 }

.gitmodules

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

CONTRIBUTORS.tsv

@@ -0,0 +1,3 @@
+github_handle	name
+sbrl	Starbeamrainbowlabs
+VorTechnix	VorTechnix

Chat-Command-Reference.md

@@ -481,6 +481,8 @@ Usage examples:
 ## `//count`
 Counts all the nodes in the defined region and returns the result along with calculated percentages (note that if the chat window used a monospace font, the returned result would be a perfect table. If someone has a ~~hack~~ solution to make the columns line up neatly, please [open an issue](https://github.com/sbrl/Minetest-WorldEditAdditions/issues/new) :D)
 
+**Note:** The output of `//count` can be rather long sometimes, and Minetest by default only shows the last few lines of chat. Press <kbd>F10</kbd> to show the full chat window that you can then scroll through to inspect the full output.
+
 ```
 //count
 ```

README.md

@@ -1,4 +1,4 @@
-# Minetest-WorldEditAdditions
+# ![](https://raw.githubusercontent.com/sbrl/Minetest-WorldEditAdditions/main/worldeditadditions-64.png) Minetest-WorldEditAdditions
 ![GitHub release (latest by date)](https://img.shields.io/github/v/release/sbrl/Minetest-WorldEditAdditions?color=green&label=latest%20release) [![View the changelog](https://img.shields.io/badge/%F0%9F%93%B0-Changelog-informational)](https://github.com/sbrl/Minetest-WorldEditAdditions/blob/main/CHANGELOG.md) [![ContentDB](https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/shields/downloads/)](https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/)
 
 > Extra tools and commands to extend WorldEdit for Minetest