Improve handling of PNGs, add background image

This commit is contained in:
Starbeamrainbowlabs 2021-06-14 01:36:13 +01:00
parent 4fff388656
commit 70b6adaa0d
No known key found for this signature in database
GPG Key ID: 1BE5172E637709C2
5 changed files with 34 additions and 46 deletions

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

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&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://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>
@ -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>