73 lines
2.2 KiB
JavaScript
73 lines
2.2 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_cssbox(content, src) {
|
|
let idprev = `image-${nextid}`;
|
|
nextid += 1;
|
|
let idthis = `image-${nextid}`;
|
|
let idnext = `image-${nextid + 1}`;
|
|
return `<div class="cssbox">
|
|
<a id="${idthis}" href="#${idthis}">${await shortcode_image(src, content, "cssbox_thumb", "300w")}
|
|
<span class="cssbox_full">${await shortcode_image(src, content, "", "1920w")}</span>
|
|
</a>
|
|
<a class="cssbox_close" href="#void"></a>
|
|
<a class="cssbox_prev" href="#${idprev}"><</a>
|
|
<a class="cssbox_next" href="#${idnext}">></a>
|
|
</div>`;
|
|
}
|
|
|
|
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("cssbox", shortcode_cssbox);
|
|
}
|