mirror of
https://github.com/sbrl/Minetest-WorldEditAdditions.git
synced 2024-10-31 21:33:02 +00:00
Improve handling of PNGs, add background image
This commit is contained in:
parent
4fff388656
commit
70b6adaa0d
5 changed files with 34 additions and 46 deletions
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
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
|
||||
---
|
||||
|
||||
<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&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>
|
||||
{% 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>
|
||||
|
|
Loading…
Reference in a new issue