ese-website/eleventy.config.js

const { EleventyHtmlBasePlugin, EleventyI18nPlugin } = require("@11ty/eleventy");
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
const pluginIcons = require('eleventy-plugin-icons');
const Image = require("@11ty/eleventy-img");
const yaml = require("js-yaml");
const fs = require('fs');

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
  eleventyConfig.addPlugin(eleventyNavigationPlugin);
  eleventyConfig.addPlugin(EleventyI18nPlugin, {
    defaultLanguage: "de",
  });
  eleventyConfig.addPlugin(bundlerPlugin);
  let fontawesomePath = "node_modules/@fortawesome/fontawesome-free/svgs";
  eleventyConfig.addPlugin(pluginIcons, {
    sources: [
      { name: "regular", path: `${fontawesomePath}/regular`, default: true },
      { name: "solid", path: `${fontawesomePath}/solid` },
      { name: "brands", path: `${fontawesomePath}/brands` },
    ],
    icon: {
      shortcode: "rawIcon",
    },
  });

  // override icon shortcode to make the SVGs accessible
  eleventyConfig.addAsyncShortcode("icon", async function(input, attrs) {
    let out;
    if (!attrs || !("title" in attrs)) {
      out = await eleventyConfig.nunjucksAsyncShortcodes.rawIcon(input, attrs);
    } else {
      const { title, ...newAttrs } = attrs;
      newAttrs.role = "img";
      const svgStr = await eleventyConfig.nunjucksAsyncShortcodes.rawIcon(input, newAttrs);
      const match = svgStr.match(/(<svg.*?>)(.*$)/s);
      out = match[1] + "<title>" + title + "</title>" + match[2];
    }
    // line breaks cause some issues
    return out.replaceAll("\n", "");
  });

  // responsive images
  eleventyConfig.addShortcode("image", async function(src, alt, sizes) {
    let metadata = await Image(src, {
      outputDir: "./_site/img/",
      widths: [480, 1024, 1920, 2560, "auto"],
    });
    let imageAttributes = {
      alt,
      sizes,
      loading: "lazy",
      decoding: "async",
    };
    return Image.generateHTML(metadata, imageAttributes);
  });

  // process the logo files
  eleventyConfig.addTemplateFormats("logo.svg");
  eleventyConfig.addExtension("logo.svg", {
    outputFileExtension: "svg",

    compile: async (inputContent) => {
      return async (data) => {
        // insert year
        let svg = inputContent.replace("{{ese.year}}", String(data.ese.year).slice(-2));
        // insert color
        svg = svg.replaceAll("{{ese.color}}", data.ese.color);

        // render text to path
        // TODO replace with ESM import once we switch to Eleventy v3
        const Session = (await import('svg-text-to-path')).default;
        let session = new Session(svg, {
          fonts: {
            "Aileron Thin": [{
              wght: 400,
              source: "./submodules/aileron/fonts/Aileron-Thin.ttf",
            }]
          }
        });
        await session.replaceAll();

        return session.getSvgString();
      };
    }
  });

  eleventyConfig.addDataExtension("yaml, yml", yaml.load);

  eleventyConfig.addFilter("pageLang", function(value) {
    return value.filter(item => item.page.lang === this.page.lang)
  });

  const md_link_open = function (tokens, idx, options, env, self) {
    const href = tokens[idx].attrGet('href');

    if (href.startsWith('http')) {
      tokens[idx].attrSet('target', '_blank');
      tokens[idx].attrSet('rel', 'noreferrer');
    } else {
      const newHref = eleventyConfig.javascriptFunctions.locale_url(href);
      tokens[idx].attrSet('href', newHref);
    }

    return self.renderToken(tokens, idx, options);
  };

  eleventyConfig.addAsyncFilter('mdInline', async function(value) {
    // TODO replace with ESM import once we switch to Eleventy v3
    const md = (await import('markdown-it/index.mjs')).default();

    // customize link rendering
    md.renderer.rules.link_open = md_link_open;

    return md.renderInline(value);
  });

  eleventyConfig.amendLibrary("md", mdLib => mdLib.renderer.rules.link_open = md_link_open);

  // copy aileron font
  eleventyConfig.addPassthroughCopy({'./submodules/aileron/fonts/*.(ttf|woff|woff2)': 'fonts'})
  eleventyConfig.addPassthroughCopy({'./submodules/aileron/aileron.lite.min.css': 'aileron.lite.min.css'})
  // copy static files
  eleventyConfig.addPassthroughCopy('./static')

  // copy german start page to root url
  eleventyConfig.on(
    "eleventy.after",
    async ({ dir, runMode, outputMode }) => {
      if (outputMode === "fs") {
        fs.copyFile(`${dir.output}/de/index.html`, `${dir.output}/index.html`, (err) => {
          if (err) console.log(err);
        });
      }
    }
  );

  const eseData = yaml.load(fs.readFileSync('./content/_data/ese.yaml'));

  return {
    dir: {
      input: "content",
      includes: "../_includes",
    },
    pathPrefix: `/${eseData.year}/`,
    markdownTemplateEngine: "njk",
  }
};