mirror of
https://github.com/sbrl/Minetest-WorldEditAdditions.git
synced 2024-09-12 08:08:30 +02:00
Improve handling of PNGs, add background image
This commit is contained in:
parent
4fff388656
commit
70b6adaa0d
@ -1,3 +1,4 @@
|
|||||||
|
const fs = require("fs");
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
|
|
||||||
const htmlentities = require("html-entities");
|
const htmlentities = require("html-entities");
|
||||||
@ -5,16 +6,18 @@ const Image = require("@11ty/eleventy-img");
|
|||||||
|
|
||||||
var nextid = 0;
|
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}`;
|
||||||
|
};
|
||||||
|
|
||||||
async function shortcode_image(src, alt, classes = "") {
|
async function shortcode_image(src, alt, classes = "") {
|
||||||
let metadata = await Image(src, {
|
let metadata = await Image(src, {
|
||||||
widths: [300, null],
|
widths: [300, null],
|
||||||
formats: ["avif", "jpeg"],
|
formats: ["avif", "jpeg"],
|
||||||
outputDir: `./_site/img/`,
|
outputDir: `./_site/img/`,
|
||||||
filenameFormat: (_id, src, width, format, _options) => {
|
filenameFormat: image_filename_format
|
||||||
const extension = path.extname(src);
|
|
||||||
const name = path.basename(src, extension);
|
|
||||||
return `${name}-${width}w.${format}`;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
console.log(metadata);
|
console.log(metadata);
|
||||||
|
|
||||||
@ -35,11 +38,7 @@ async function shortcode_image_url(src) {
|
|||||||
widths: [ null ],
|
widths: [ null ],
|
||||||
formats: [ "jpeg" ],
|
formats: [ "jpeg" ],
|
||||||
outputDir: `./_site/img/`,
|
outputDir: `./_site/img/`,
|
||||||
filenameFormat: (_id, src, width, format, _options) => {
|
filenameFormat: image_filename_format
|
||||||
const extension = path.extname(src);
|
|
||||||
const name = path.basename(src, extension);
|
|
||||||
return `${name}-${width}w.${format}`;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
console.log(metadata);
|
console.log(metadata);
|
||||||
|
|
||||||
@ -47,6 +46,17 @@ async function shortcode_image_url(src) {
|
|||||||
return data.url;
|
return data.url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function shortcode_image_urlpng(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) {
|
async function shortcode_gallerybox(content, src, idthis, idprev, idnext) {
|
||||||
return `<figure class="gallerybox-item" id="${idthis}">
|
return `<figure class="gallerybox-item" id="${idthis}">
|
||||||
<!-- ${await shortcode_image(src, "", "gallerybox-thumb", "300w")} -->
|
<!-- ${await shortcode_image(src, "", "gallerybox-thumb", "300w")} -->
|
||||||
@ -64,6 +74,7 @@ module.exports = function(eleventyConfig) {
|
|||||||
// eleventyConfig.addPassthroughCopy("css");
|
// eleventyConfig.addPassthroughCopy("css");
|
||||||
eleventyConfig.addShortcode("image", shortcode_image);
|
eleventyConfig.addShortcode("image", shortcode_image);
|
||||||
eleventyConfig.addJavaScriptFunction("image", shortcode_image);
|
eleventyConfig.addJavaScriptFunction("image", shortcode_image);
|
||||||
eleventyConfig.addShortcode("image-url", shortcode_image_url);
|
eleventyConfig.addShortcode("image_url", shortcode_image_url);
|
||||||
|
eleventyConfig.addNunjucksAsyncShortcode("image_urlpng", shortcode_image_urlpng);
|
||||||
eleventyConfig.addPairedShortcode("gallerybox", shortcode_gallerybox);
|
eleventyConfig.addPairedShortcode("gallerybox", shortcode_gallerybox);
|
||||||
}
|
}
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
</nav>
|
</nav>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
|
|
||||||
<footer>
|
<footer class="shadow-top">
|
||||||
<p>Built with ❤️ by <a href="https://starbeamrainbowlabs.com/">Starbeamrainbowlabs</a></p>
|
<p>Built with ❤️ by <a href="https://starbeamrainbowlabs.com/">Starbeamrainbowlabs</a></p>
|
||||||
<p>Tech: <a href="https://www.11ty.dev/">Eleventy</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>
|
<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>
|
||||||
|
@ -50,7 +50,8 @@ body
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: sans-serif; /* Serif is awful :( */
|
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_urlpng "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);
|
color: var(--text-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -170,37 +171,10 @@ footer {
|
|||||||
/* color: var(--text-bright); */
|
/* color: var(--text-bright); */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 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; }
|
|
||||||
|
|
||||||
.text-left { text-align: left; }
|
.text-left { text-align: left; }
|
||||||
.text-centre { text-align: center; }
|
.text-centre { text-align: center; }
|
||||||
.text-right { text-align: right; }
|
.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; }
|
.invisilink { text-decoration: none; color: inherit; }
|
||||||
.invisilist { list-style-type: none; margin: 5px; padding: 5px; }
|
.invisilist { list-style-type: none; margin: 5px; padding: 5px; }
|
||||||
|
|
||||||
@ -210,8 +184,10 @@ footer {
|
|||||||
.icon.medium { max-width: 2em; max-height: 2em; }
|
.icon.medium { max-width: 2em; max-height: 2em; }
|
||||||
.icon.large { max-width: 5em; max-height: 5em; }
|
.icon.large { max-width: 5em; max-height: 5em; }
|
||||||
|
|
||||||
.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); }
|
||||||
|
|
||||||
.bigbox {
|
.bigbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -241,6 +217,7 @@ footer {
|
|||||||
margin: 0.1em;
|
margin: 0.1em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
max-width: 15em;
|
max-width: 15em;
|
||||||
|
box-shadow: 0.25em 0.25em 0.5em var(--shadow);
|
||||||
}
|
}
|
||||||
.features-item.wide {
|
.features-item.wide {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
BIN
.docs/images/clouds.png
Normal file
BIN
.docs/images/clouds.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 25 KiB |
@ -5,7 +5,7 @@ tags: navigable
|
|||||||
date: 2000-01-01
|
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" %})">
|
||||||
<h1>WorldEditAdditions</h1>
|
<h1>WorldEditAdditions</h1>
|
||||||
<p>
|
<p>
|
||||||
<a href="https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/"><img src="https://img.shields.io/badge/dynamic/json?color=%23375a7f&label=ContentDB&query=downloads&suffix=+downloads&url=https%3A//content.minetest.net/api/packages/Starbeamrainbowlabs/worldeditadditions/" alt="WorldEditAdditions on ContentDB" /></a>
|
<a href="https://content.minetest.net/packages/Starbeamrainbowlabs/worldeditadditions/"><img src="https://img.shields.io/badge/dynamic/json?color=%23375a7f&label=ContentDB&query=downloads&suffix=+downloads&url=https%3A//content.minetest.net/api/packages/Starbeamrainbowlabs/worldeditadditions/" alt="WorldEditAdditions on ContentDB" /></a>
|
||||||
@ -47,7 +47,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." %}
|
{% 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>
|
<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>
|
<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>
|
</figcaption>
|
||||||
@ -55,7 +55,7 @@ date: 2000-01-01
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
|
<!-- Potentially we might want some inspiration from https://codepen.io/emared/pen/gWGBLR here -->
|
||||||
<section class="gallerybox">
|
<section class="gallerybox shadow-vertical">
|
||||||
<section class="gallerybox-gallery">
|
<section class="gallerybox-gallery">
|
||||||
{% gallerybox "images/gallery-a.jpeg" "image-first" "image-last" "image-b" %}
|
{% 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.
|
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.
|
||||||
@ -70,7 +70,7 @@ date: 2000-01-01
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Download</h2>
|
<h2 class="shadow-text">Download</h2>
|
||||||
<div class="features-large">
|
<div class="features-large">
|
||||||
<div class="features-item wide text-centre">
|
<div class="features-item wide text-centre">
|
||||||
<h3>ContentDB</h3>
|
<h3>ContentDB</h3>
|
||||||
|
Loading…
Reference in New Issue
Block a user