eleventy.config.js

import "dotenv/config";

import * as fs from "fs";
import path from "path";
import { hash } from "crypto";

import { HtmlBasePlugin } from "@11ty/eleventy";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import EleventyPluginOgImage from 'eleventy-plugin-og-image';
import { eleventyUmamiTransformPlugin } from "eleventy-plugin-umami-analytics";

const isProduction = process.env.ELEVENTY_ENV === "production";
const siteUrl = isProduction ? process.env.PROD_SITE_URL : process.env.DEV_SITE_URL
const siteHost = new URL(siteUrl).host;

const config = {
    markdownTemplateEngine: "njk",
    htmlTemplateEngine: "njk",

    templateFormats: [
        "html",
        "njk",
        "md",
        "11ty.js"
    ],

    dir: {
        input: "src",
        output: "_site",

        includes: "_includes",
        layouts: "_includes/layout",

        data: "_data"
    }
};

// site is custom config
const site = {
    isProduction: isProduction,
    url: siteUrl,
    host: siteHost,

    dir: {
        apps: "apps",
        config: "_config",
        ...config.dir // save relative paths
    },

    umami: {
        scriptUrl: process.env.UMAMI_SCRIPT_URL,
        websiteId: process.env.UMAMI_WEBSITE_ID
    }
}

// ignore these files from apps
const ignored = [
    ".11tydata.js",

    "README",
    "LICENSE",
    "CHANGELOG",

    "node_modules",

    "package.json",
    "package-lock.json",
    "pnpm-lock.yaml",
    "yarn.lock",

    ".html",
]

// dynamic path, so dynamic importing
const configDir = `./${site.dir.input}/${site.dir.config}`;

const { default: pluginAddHtmlHead } = await import(`${configDir}/add-html-head.js`);
const { default: pluginBase64Image } = await import(`${configDir}/base64-image.js`);
const { default: pluginGenFavicons } = await import(`${configDir}/gen-favicons.js`);
const { default: CustomOgImage } = await import(`${configDir}/custom-og-image.js`);

function normalizeSlashes(path) {
    return path.replaceAll("\\", "/");
}

// convert an url-safe base64 hash to hex
function base64HashToHex(hash) {
    // replace urlsafe characters
    let base64 = hash
        .replace(/-/g, "+")
        .replace(/_/g, "/");

    // restore padding
    while (base64.length % 4 !== 0) {
        base64 += "=";
    }
    
    const binary = atob(base64);

    // convert to hex
    return Array.from(binary, c =>
        c.charCodeAt(0).toString(16).padStart(2, "0")
    ).join("");
}

// main config function
async function eleventyConfiguration(eleventyConfig) {
    // refresh when .env changes
    if (!site.isProduction) eleventyConfig.addWatchTarget(".env");

    // process files in .gitignore
    eleventyConfig.setUseGitIgnore(false);

    // expose "site" to templates
    eleventyConfig.addGlobalData("site", site);

    const appPaths = new Set();
    eleventyConfig.addCollection("apps", (collectionApi) => {
        const items = collectionApi.getFilteredByTag("app");
        
        // save urls
        for (const item of items) appPaths.add(item.inputPath);
        return items;
    });

    // pass assets
    const assetsPath = normalizeSlashes(path.join(config.dir.input, "assets"));
    eleventyConfig.addPassthroughCopy(assetsPath);

    // pass app assets (source/apps/abc -> output/abc)
    const appsPath = normalizeSlashes(path.join(config.dir.input, site.dir.apps));
    eleventyConfig.addPassthroughCopy({ [appsPath]: "./" }, {
        filter: (path) => {
            const normalized = normalizeSlashes(path);
            const parts = normalized.split("/");

            // ignore hidden files and directories
            if (parts.some((part) => part.startsWith("."))) {
                return false;
            }

            return ignored.every((s) => !normalized.includes(s));
        }
    });

    // custom plugins
    eleventyConfig.addPlugin(pluginBase64Image);
    eleventyConfig.addPlugin(pluginAddHtmlHead);
    eleventyConfig.addPlugin(pluginGenFavicons);
    
    // @11ty plugins
    eleventyConfig.addPlugin(HtmlBasePlugin);
    eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
        formats: ["svg", "webp", "png"],
        urlPath: "/assets/img",
        hashLength: 43, // always 43 characters long: 32 (sha256) -> 44 (base64 encoded) -> 43 (stripped "=")
        filenameFormat: function (id, src, width, format, options) {
            // reverse the sha256 hash and turn it into hex
            const hashHex = base64HashToHex(id);
            const truncated = hashHex.substring(0, 8);

            return `${truncated}.${width}.${format}`
        },
        transformOnRequest: false
    });

    // eleventy-plugin-og-image plugin
    const fontPath = normalizeSlashes(path.join(config.dir.input, config.dir.includes, "/og-image/BitstreamVera/VeraMono.ttf"));
    eleventyConfig.addPlugin(EleventyPluginOgImage, {
        OgImage: CustomOgImage,
        satoriOptions: {
            fonts: [{
                name: "Vera Mono",
                data: fs.readFileSync(fontPath),
                weight: 400,
                style: "normal"
            }]
        },
        shortcodeOutput: async (ogImage) => await ogImage.outputUrl(),
        outputDir: "/assets/img/social",
        previewMode: false
    });

    // eleventy-plugin-umami-analytics plugin
    site.isProduction && eleventyConfig.addPlugin(eleventyUmamiTransformPlugin, {
        umami: {
            url: site.umami.scriptUrl,
            websiteId: site.umami.websiteId,
        },
    });
}

export { config, site, eleventyConfiguration as default };