eleventy-image-shortcode.js

const markdownIt = require("markdown-it")();

module.exports = (...data) => {
    const images = data.flatMap((arg, index) => {
        if (index === data.length - 1) {
            return [];
        }

        return [
            {
                url: arg.split(" ")[0],
                type: arg.split(" ")[1],
            },
        ];
    });

    const imgAttributes = JSON.parse(data[data.length - 1]);
    const imgCaptionHTML = imgAttributes.caption
        ? markdownIt.render(imgAttributes.caption)
        : null;

    const srcset = images.flatMap((image, index) => {
        if (index === images.length - 1) {
            return [];
        }
        return [`<source srcset="${image.url}" type="image/${image.type}">`];
    });

    return String.raw`
    <figure>
        <picture>${srcset.join("")}
            <img src="${images[images.length - 1].url}" alt="${
                imgAttributes.alt
            }" height="${imgAttributes.height}" width="${imgAttributes.width}">
        </picture>${
            imgAttributes.caption
                ? `<figcaption>${imgCaptionHTML}</figcaption>`
                : ""
        }
    </figure>
    `;
};