sbrl-github/Minetest-WorldEditAdditions
1
0
Fork 0
mirror of https://github.com/sbrl/Minetest-WorldEditAdditions.git synced 2024-11-22 15:33:00 +00:00
Code Issues Releases Wiki Activity

Improve handling of PNGs, add background image

Browse source
This commit is contained in:
Starbeamrainbowlabs 2021-06-14 01:36:13 +01:00
parent 4fff388656
commit 70b6adaa0d
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
5 changed files with 34 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
.docs/.eleventy.js
View file

@ -1,3 +1,4 @@
const fs = require("fs");
const path = require("path");
const htmlentities = require("html-entities");
@ -5,16 +6,18 @@ const Image = require("@11ty/eleventy-img");
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 = "") {
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}`;
}
filenameFormat: image_filename_format
});
console.log(metadata);
@ -35,11 +38,7 @@ async function shortcode_image_url(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}`;
}
filenameFormat: image_filename_format
});
console.log(metadata);
@ -47,6 +46,17 @@ async function shortcode_image_url(src) {
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) {
return `<figure class="gallerybox-item" id="${idthis}">
<!-- ${await shortcode_image(src, "", "gallerybox-thumb", "300w")} -->
@ -64,6 +74,7 @@ module.exports = function(eleventyConfig) {
// eleventyConfig.addPassthroughCopy("css");
eleventyConfig.addShortcode("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);
}

2
.docs/_includes/theme.njk
View file

@ -26,7 +26,7 @@
</nav>
{{ content | safe }}
<footer>
<footer class="shadow-top">
<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>

37
.docs/css/theme.css
View file

@ -50,7 +50,8 @@ body
margin: 0;
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);
}
@ -170,37 +171,10 @@ footer {
/* 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-centre { text-align: center; }
.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; }
.invisilist { list-style-type: none; margin: 5px; padding: 5px; }
@ -210,8 +184,10 @@ footer {
.icon.medium { max-width: 2em; max-height: 2em; }
.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 {
display: flex;
@ -241,6 +217,7 @@ footer {
margin: 0.1em;
padding: 1em;
max-width: 15em;
box-shadow: 0.25em 0.25em 0.5em var(--shadow);
}
.features-item.wide {
flex: 1;

BIN
.docs/images/clouds.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

8
.docs/index.html
View file

@ -5,7 +5,7 @@ tags: navigable
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>
<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>
@ -47,7 +47,7 @@ date: 2000-01-01
<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." />
<!-- <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>
</figcaption>
@ -55,7 +55,7 @@ date: 2000-01-01
</section>
<!-- 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">
{% 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.
@ -70,7 +70,7 @@ date: 2000-01-01
</section>
<section>
<h2>Download</h2>
<h2 class="shadow-text">Download</h2>
<div class="features-large">
<div class="features-item wide text-centre">
<h3>ContentDB</h3>