mirror of
https://github.com/sbrl/Minetest-WorldEditAdditions.git
synced 2024-08-20 21:44:06 +02:00
It's an absolutely *glorious* series of hacks :D Including, but certainly not limited to: - CSS Grids with only 1 cell - Flexboxes used for positioning text nodes - Element heights set indirectly with the width property - z-index abused to show the current image in the sequence it's undefined which image will be shown initially, but given the amount of effort this took I'm ok with that If anyone knows how to shift the <picture> element 0.25em upwards *without* moving the image so that I can remove the upper and lower borders, I'd lvoe to know. I've tried everything - including settingit's height to zero etc. In the end I've padded out the top to balance it out instead :P
70 lines
2.1 KiB
JavaScript
70 lines
2.1 KiB
JavaScript
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_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) {
|
|
// 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("gallerybox", shortcode_gallerybox);
|
|
}
|