.eleventy.js

/**
 *
 *
 * IMPORTS
 */
const highlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const rss = require("@11ty/eleventy-plugin-rss");
const sitemap = require("@quasibit/eleventy-plugin-sitemap");
const navigation = require("@11ty/eleventy-navigation");
const lazyImages = require("eleventy-plugin-lazyimages");
const md = require("markdown-it");
const mdClass = require("@toycode/markdown-it-class");
const mdAnchor = require("markdown-it-anchor");
const moment = require("moment");
const CleanCSS = require("clean-css");
const { join } = require("path");

/**
 *
 *
 * CONSTANTS
 */

// Make dates look like "April 5th, 1993"
const DATE_FORMAT_YEAR = "MMMM Do, YYYY";
const DATE_FORMAT_NO_YEAR = "MMMM Do";
const DATE_FORMAT_JUST_MONTH = "MMMM";
const DATE_FORMAT_MONTH_AND_YEAR = "MMMM, YYYY";
// Markdown-it options
const mdOptions = {
    // Allow HTML inline in markdown
    html: true,
    // Smart quotes, symbols, em dashes, etc.
    typographer: true,
    // Allows closing tags with single /
    xhtmlOut: false,
};
// Add classes to elements generated by markdown
const mdClassOptions = {
    p: "f5 mb3 lh-copy banana-black measure measure-wide-ns",
    ul: "f5 mb4 lh-copy o-90",
    h2: "mt5",
    li: "mb2",
    a: "black link underline hover-bg-black-90 hover-yellow",
    img: "lazy-load",
    code: ["bg-banana-black", "white", "br2"],
};
// Add anchors to headers
const mdAnchorOptions = {
    // Add links next to titles
    permalink: true,
    // But put the link before the title
    permalinkBefore: true,
    // And only do this for titles of level h2 and lower
    level: 2,
    // And put these classes on the link
    permalinkClass:
        "f4 black link hover-bg-black-90 hover-yellow fl relative mr1 top-2px",
    // And use this symbol.
    permalinkSymbol: "#",
};

// Style tags with classes

/**
 *
 *
 * FUNCTIONS / FILTERS / ETC
 */

/**
 * A shortcode that takes an image, a caption, and optionally some alt text
 * and spits out a figure element. If alt text is ommitted, it is set to the caption.
 * https://gist.github.com/dirtystylus/d488ea82fec9ebda8308a288015d019b
 * @param {string} image
 * @param {string} caption
 * @param {string?} altText
 * @returns string
 */
const figureShortcode = (image, caption, altText, classes) => {
    const alt = altText ? altText : caption;
    const classString = classes ? " " + classes : "";
    const captionMarkup = caption
        ? `<figcaption class="f6 mt2 i tc db">${caption}</figcaption>`
        : "";
    return `<figure class="mt4 mb4 center${classString}">
            <a href="${image}">
                <img class="lazy img border-box ba bw1 b--black br1 w-100 h-auto" src="${image}" alt="${alt}"/>
                <noscript>
                    <img class="img border-box ba bw1 b--black br1 w-100 h-auto" src="${image}" alt="${alt}"/>
                </noscript>
            </a>
            ${captionMarkup}
        </figure>`;
};

module.exports = function (eleventyConfig) {
    // md (to html) and images get copied into the destination folder
    eleventyConfig.setTemplateFormats(["md", "png", "jpg", "njk"]);

    // Add navigation support
    eleventyConfig.addPlugin(navigation);

    // Export an rss feed
    eleventyConfig.addPlugin(rss);

    // Export a sitemap
    eleventyConfig.addPlugin(sitemap, {
        sitemap: { hostname: "https://salem.io" },
    });

    // Lazy load images
    eleventyConfig.addPlugin(lazyImages, {
        // Let's mean it
        imgSelector: ".lazy",
        // We put the init script in _includes/partials/scripts.njk
        appendInitScript: false,
        // This plugin thinks that paths in generated files are
        // relative to this file (.eleventy.js), so we have to let it
        // know that they're actually relative to the `articles`
        // directory.
        transformImgPath: (imgPath) => {
            return join("./articles", imgPath);
        },
        preferNativeLazyLoad: false,
    });

    // BUILD-TIME SYNTAX HIGHLIGHTING WOOOO
    eleventyConfig.addPlugin(highlight);

    // Grab the CSS from the root and put it in the output
    eleventyConfig.addPassthroughCopy("css");

    // Minify our CSS
    eleventyConfig.addFilter("cssmin", function (code) {
        return new CleanCSS({}).minify(code).styles;
    });

    // Format our dates like "April 5th, 1993"
    eleventyConfig.addFilter("formatDate", function (date) {
        const parsedDate = moment(date);
        // Ignore the year if the date is this year.
        if (parsedDate.year() === moment().year()) {
            return parsedDate.format(DATE_FORMAT_NO_YEAR);
        }
        return parsedDate.format(DATE_FORMAT_YEAR);
    });

    eleventyConfig.addFilter("getMonthHeader", function (post, oldPost) {
        const postDate = moment(post.date);
        // This makes more sense if I post more regularly, but given I post like 
        // once every handful of months, having a section called "November" and a 
        // section called "November, 2021" immediately below it isn't doing anyone
        // any favors.
        // const format =
        //     postDate.year() == moment().year()
        //         ? DATE_FORMAT_JUST_MONTH
        //         : DATE_FORMAT_MONTH_AND_YEAR;
        const format = DATE_FORMAT_MONTH_AND_YEAR;

        if (!oldPost) {
            return postDate.format(format);
        }
        const oldPostDate = moment(oldPost.date);

        if (postDate.month() !== oldPostDate.month() || postDate.year() !== oldPostDate.year()) {
            return postDate.format(format);
        }
        return "";
    });

    // Figure shortcodes for Nice Images™.
    eleventyConfig.addShortcode("figure", figureShortcode);

    // Let us set classes on the elements that the markdown generator
    eleventyConfig.setLibrary(
        "md",
        md(mdOptions)
            .use(mdClass, mdClassOptions)
            .use(mdAnchor, mdAnchorOptions)
    );

    return {
        passthroughFileCopy: true,
        dir: {
            input: "articles",
            output: "dist",
            data: "_data",
            includes: "_includes",
        },
    };
};