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

....we'll have to reimplement Image.generateHTML :-/
This commit is contained in:
Starbeamrainbowlabs 2021-05-31 21:06:17 +01:00
parent 117002f9e9
commit 722912a0c2
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
12 changed files with 1695 additions and 12 deletions

View file

@ -1,4 +1,72 @@
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("images");
eleventyConfig.addPassthroughCopy("theme.css");
const path = require("path");
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);
}

1
.docs/.eleventyignore Normal file
View file

@ -0,0 +1 @@
css/

View file

@ -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>

5
.docs/css.njk Normal file
View file

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

1
.docs/css/CSSBox Submodule

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

View file

@ -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;
}

BIN
.docs/images/gallery-a.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 754 KiB

BIN
.docs/images/gallery-b.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

View file

@ -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>

1589
.docs/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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"
}
}

3
.gitmodules vendored Normal file
View file

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