ese-website/eleventy.config.js

import { EleventyHtmlBasePlugin, EleventyI18nPlugin } from "@11ty/eleventy";
import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
import Image from "@11ty/eleventy-img";

import faviconsPlugin from "eleventy-plugin-gen-favicons";
import pluginIcons from 'eleventy-plugin-icons';
import SvgTextToPath from 'svg-text-to-path';
import markdownIt from 'markdown-it';
import yaml from "js-yaml";
import fs from 'fs';

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
  eleventyConfig.addPlugin(eleventyNavigationPlugin);
  eleventyConfig.addPlugin(EleventyI18nPlugin, {
    defaultLanguage: "de",
  });
  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",
    },
  });
  eleventyConfig.addPlugin(faviconsPlugin, {});

  eleventyConfig.addBundle("css", {
    toFileDirectory: "bundle",
  });
  eleventyConfig.addBundle("js");

  // 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.universal.shortcodes.rawIcon(input, attrs);
    } else {
      const { title, ...newAttrs } = attrs;
      newAttrs.role = "img";
      const svgStr = await eleventyConfig.universal.shortcodes.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
        let session = new SvgTextToPath(svg, {
          fonts: {
            "Aileron Thin": [{
              wght: 400,
              source: "./submodules/aileron/fonts/Aileron-Thin.ttf",
            }]
          }
        });
        await session.replaceAll();

        let finalSvg = session.getSvgString();

        // no idea why this gets mangled
        finalSvg = finalSvg.replaceAll("svg:svg", "svg");
        finalSvg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n' + finalSvg;

        return finalSvg;
      };
    }
  });

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

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

  // translations
  eleventyConfig.addFilter("localized", function(item) {
    if (typeof item === "string") return item;
    return item[this.ctx.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');
    }
    // this would be useful but it's broken
    // 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) {
    const md = markdownIt();

    // 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 && err.code !== 'ENOENT') console.log(err);
        });
      }
    }
  );

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

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