Implement keen-slider since the current one seemed to be a bit broken

...and also not scalable given what we want to do

.docs/.eleventy.js

@@ -54,16 +54,15 @@ async function shortcode_image_urlpass(src) {
 	return `/img/${filename}`;
 }
 
-async function shortcode_gallerybox(content, src, id_this, id_prev, id_next) {
+async function shortcode_gallerybox(content, src) {
-	return `<figure class="gallerybox-item" id="${id_this}">
+	return `<div class="keen-slider__slide"><figure class="gallery-item">
 <!-- ${await shortcode_image(src, "", "gallerybox-thumb", "300w")} -->
 	${await shortcode_image(src, "", "", "1920w")}
 	
 	<figcaption>${content}</figcaption>
-	
+</figure></div>`;
-<a class="gallerybox-prev" href="#${id_prev}">❰</a>
+	// <a class="gallerybox-prev" href="#${id_prev}">❰</a>
-<a class="gallerybox-next" href="#${id_next}">❱</a>
+	// <a class="gallerybox-next" href="#${id_next}">❱</a>
-</figure>`;
 }
 
 async function fetch(url) {
@@ -137,4 +136,8 @@ module.exports = function(eleventyConfig) {
 	eleventyConfig.addAsyncShortcode("image_urlpass", shortcode_image_urlpass);
 	eleventyConfig.addNunjucksAsyncShortcode("image_urlpass", shortcode_image_urlpass);
 	eleventyConfig.addPairedShortcode("gallerybox", shortcode_gallerybox);
+	
+	eleventyConfig.addPassthroughCopy({
+		"node_modules/keen-slider/keen-slider.es.js": "."
+	});
 }

.docs/css.njk

@@ -4,9 +4,10 @@ permalink: theme.css
 
 {% include "css/patterns.css" %}
 {% include "css/theme.css" %}
-{% include "css/gallerybox.css" %}
+{% include "css/gallery.css" %}
 {% include "css/smallscreens.css" %}
 {% include "css/prism-custom.css" %}
+{% include "node_modules/keen-slider/keen-slider.css" %}
 
 {# {% fetch "https://unpkg.com/prismjs/themes/prism-okaidia.css" %} #}
 {# {% fetch "https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-shades-of-purple.css" %} #}

.docs/css/gallery.css

@@ -0,0 +1,45 @@
+/*
+ ██████   █████  ██      ██      ███████ ██████  ██    ██ ██████   ██████  ██   ██
+██       ██   ██ ██      ██      ██      ██   ██  ██  ██  ██   ██ ██    ██  ██ ██
+██   ███ ███████ ██      ██      █████   ██████    ████   ██████  ██    ██   ███
+██    ██ ██   ██ ██      ██      ██      ██   ██    ██    ██   ██ ██    ██  ██ ██
+ ██████  ██   ██ ███████ ███████ ███████ ██   ██    ██    ██████   ██████  ██   ██
+
+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
+ */
+
+:root {
+	--gallerybox-bg: hsla(0, 0%, 95%, 0.75);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--gallerybox-bg: hsla(0, 0%, 30%, 0.75);
+	}
+}
+
+.gallery {
+	position: relative; /* to make the figcaption snap to the right place */
+	/*
+	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: 1em 0;
+}
+
+.gallery-item {
+	margin: 0;
+}
+
+.gallery-item > figcaption {
+	background: var(--gallerybox-bg);
+	position: absolute;
+	bottom: 0.25em; left: 0; right: 0;
+	padding: 0.75em 1em;
+	text-align: center;
+}

.docs/css/gallerybox.css

@@ -1,139 +0,0 @@
-/*
- ██████   █████  ██      ██      ███████ ██████  ██    ██ ██████   ██████  ██   ██
-██       ██   ██ ██      ██      ██      ██   ██  ██  ██  ██   ██ ██    ██  ██ ██
-██   ███ ███████ ██      ██      █████   ██████    ████   ██████  ██    ██   ███
-██    ██ ██   ██ ██      ██      ██      ██   ██    ██    ██   ██ ██    ██  ██ ██
- ██████  ██   ██ ███████ ███████ ███████ ██   ██    ██    ██████   ██████  ██   ██
-
-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
- */
-
-:root {
-	--gallerybox-bg: hsla(0, 0%, 95%, 0.75);
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--gallerybox-bg: hsla(0, 0%, 30%, 0.75);
-	}
-}
-
-@media (orientation: landscape) {
-	.gallerybox-gallery {
-		max-width: 95vw;
-	}
-}
-
-
-.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: var(--gallerybox-bg);
-	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/theme.css

@@ -398,7 +398,7 @@ footer {
 	cursor: default;
 }
 
-.gallerybox {
+.gallery {
 	background: var(--pattern-hex), var(--bg-transcluscent);
 }
 

.docs/index.html

@@ -60,26 +60,42 @@ date: 2000-01-01
 </section>
 
 <!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
-<section class="gallerybox shadow-vertical">
+
-	<section class="gallerybox-gallery">
+<script type="module">
-		{% gallerybox "images/gallery-a.jpeg" "image-first" "image-last" "image-b" %}
+	import KeenSlider from './keen-slider.es.js';
+	const slider_creations = new KeenSlider("#gallery-creations", {
+		loop: true,
+		mode: "free-snap",
+		slides: {
+			origin: "center",
+			perView: 1.5,
+			spacing: 15
+		},
+		created: () => {
+			console.log(`[MAIN] Slider initialised`);
+		}
+	});
+</script>
+<section id="gallery-creations" class="gallery shadow-vertical">
+	<section class="keen-slider">
+		{% gallerybox "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.
 		{% endgallerybox %}
-		{% gallerybox "images/gallery-b.jpeg" "image-b" "image-first" "image-c" %}
+		{% gallerybox "images/gallery-b.jpeg" %}
 			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-c" "image-b" "image-d" %}
+		{% gallerybox "images/gallery-c.jpeg" %}
 			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 %}
-		{% gallerybox "images/gallery-d.jpeg" "image-d" "image-c" "image-e" %}
+		{% gallerybox "images/gallery-d.jpeg" %}
 			A small mountain made with <code>//layers</code> and <code>//erode</code>, using the new optional <code>//layers</code> slope constraints in WorldEditAdditions v1.13.
 		{% endgallerybox %}
-		{% gallerybox "images/gallery-e.jpeg" "image-e" "image-d" "image-f" %}
+		{% gallerybox "images/gallery-e.jpeg" %}
 			A small mesa canyons terrain scene made with <code>//erode</code>, the new optional <code>//layers</code> slope contraints, and <code>//noiseapply2d</code> - the latter 2 of which are new in WorldEditAdditions v1.13. Minimal manual tuning was required.
 		{% endgallerybox %}
-		{% gallerybox "images/gallery-f.jpeg" "image-last" "image-e" "image-first" %}
+		<!-- {% gallerybox "images/gallery-f.jpeg" "image-last" "image-e" "image-first" %}
 			A stack of slices of the terrain, made with <code>//many</code> (WorldEditAdditions v1.9+) and <code>//multi</code>. By <a href="https://github.com/VorTechnix">@VorTechnix</a>.
-		{% endgallerybox %}
+		{% endgallerybox %} -->
 	</section>
 </section>
 

.docs/package-lock.json

@@ -17,11 +17,13 @@
 				"html-entities": "^2.4.0",
 				"html-minifier-terser": "^7.0.0-beta.0",
 				"imagickal": "^5.0.1",
+				"keen-slider": "^6.8.6",
 				"markdown-it-github-alerts": "^0.1.2",
 				"markdown-it-prism": "^2.3.0",
 				"p-memoize": "^7.1.1",
 				"p-queue": "^7.3.4",
 				"phin": "^3.7.0",
+				"photoswipe": "^5.4.3",
 				"pretty-ms": "^7.0.1"
 			}
 		},
@@ -1413,6 +1415,11 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/keen-slider": {
+			"version": "6.8.6",
+			"resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz",
+			"integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w=="
+		},
 		"node_modules/kind-of": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -1892,6 +1899,14 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/photoswipe": {
+			"version": "5.4.3",
+			"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.3.tgz",
+			"integrity": "sha512-9UC6oJBK4oXFZ5HcdlcvGkfEHsVrmE4csUdCQhEjHYb3PvPLO3PG7UhnPuOgjxwmhq5s17Un5NUdum01LgBDng==",
+			"engines": {
+				"node": ">= 0.12.0"
+			}
+		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -3574,6 +3589,11 @@
 			"resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
 			"integrity": "sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI="
 		},
+		"keen-slider": {
+			"version": "6.8.6",
+			"resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz",
+			"integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w=="
+		},
 		"kind-of": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -3918,6 +3938,11 @@
 				"centra": "^2.6.0"
 			}
 		},
+		"photoswipe": {
+			"version": "5.4.3",
+			"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.3.tgz",
+			"integrity": "sha512-9UC6oJBK4oXFZ5HcdlcvGkfEHsVrmE4csUdCQhEjHYb3PvPLO3PG7UhnPuOgjxwmhq5s17Un5NUdum01LgBDng=="
+		},
 		"picomatch": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",

.docs/package.json

@@ -28,11 +28,13 @@
 		"html-entities": "^2.4.0",
 		"html-minifier-terser": "^7.0.0-beta.0",
 		"imagickal": "^5.0.1",
+		"keen-slider": "^6.8.6",
 		"markdown-it-github-alerts": "^0.1.2",
 		"markdown-it-prism": "^2.3.0",
 		"p-memoize": "^7.1.1",
 		"p-queue": "^7.3.4",
 		"phin": "^3.7.0",
+		"photoswipe": "^5.4.3",
 		"pretty-ms": "^7.0.1"
 	}
 }

package-lock.json

@@ -0,0 +1,17 @@
+{
+  "name": "WorldEditAdditions",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "keen-slider": "^6.8.6"
+      }
+    },
+    "node_modules/keen-slider": {
+      "version": "6.8.6",
+      "resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz",
+      "integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w=="
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "keen-slider": "^6.8.6"
+  }
+}