Make custom configurations more modular

eleventy.config.js

@@ -1,83 +1,43 @@
 // Installed Plugins
 import pluginRss from "@11ty/eleventy-plugin-rss";
 import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
+import embedEverything from "eleventy-plugin-embed-everything";
 import metagen from 'eleventy-plugin-metagen';
 import emojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime";
+import pluginTOC from '@uncenter/eleventy-plugin-toc';
 
-import slugify from "slugify";
+// Custom Configurations
-
+import markdownItConfig from "./src/_config/markdown-it.js";
-import markdownPlugin from "./eleventy.config.md.js";
+import copyConfig from "./src/_config/copy.js";
+import collectionsConfig from "./src/_config/collections.js";
+import filterConfig from "./src/_config/filter.js";
+import shortCodesConfig from "./src/_config/shortcodes.js";
 
 export default function(eleventyConfig) {
-    // Copy files
-    eleventyConfig.addPassthroughCopy("./src/assets/");
-    eleventyConfig.addWatchTarget("./src/assets/");
-    eleventyConfig.addWatchTarget("./src/_bundle/");
-    eleventyConfig.addPassthroughCopy({
-        "node_modules/@zachleat/details-utils/details-utils.js": "assets/js/details-utils.js",
-    });
-
-    // Custom Plugins
-    eleventyConfig.addPlugin(markdownPlugin);
-
     // Installed Plugins
     eleventyConfig.addPlugin(pluginRss);
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
+    eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
     eleventyConfig.addPlugin(metagen);
     eleventyConfig.addPlugin(emojiReadTime);
+    eleventyConfig.addPlugin(pluginTOC, {
+        tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
+        wrapper: function (toc) {
+            return `<nav class="toc" aria-labelledby="toc-heading">${toc}</nav>`;
+        },
+    });
+
+    // Custom Configurations
+    eleventyConfig.addPlugin(markdownItConfig);
+    eleventyConfig.addPlugin(copyConfig);
+    eleventyConfig.addPlugin(collectionsConfig);
+    eleventyConfig.addPlugin(filterConfig);
+    eleventyConfig.addPlugin(shortCodesConfig);
 
     // Eleventy bundle plugin
     eleventyConfig.addBundle("css");
     eleventyConfig.addBundle("js", { toFileDirectory: "assets/js" });
 
-    // Add content categories to a collection
-    eleventyConfig.addCollection("categories", function(collectionApi) {
-        let categories = new Set();
-        let contents = collectionApi.getFilteredByTag('contents');
-        contents.forEach(p => {
-            let cats = p.data.categories;
-            cats.forEach(c => categories.add(c));
-        });
-        return Array.from(categories).sort();
-    });
-
-    // Filter contents by category
-    eleventyConfig.addFilter("filterByCategory", function(contents, cat) {
-        cat = cat.toLowerCase();
-        let result = contents.filter(item => {
-            let cats = item.data.categories.map(c => c.toLowerCase());
-            return cats.includes(cat);
-        });
-        return result;
-    });
-
-    // Filter: Format dates
-    const dateOptions = {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-    };
-    const dateTimeLocale = new Intl.DateTimeFormat("en-GB", dateOptions);
-    eleventyConfig.addFilter("formatDate", function(date) {
-        return dateTimeLocale.format(date);
-    });
-
-    // Filter: Limit number of items displayed
-    eleventyConfig.addFilter("itemLimit", function(array, itemLimit) {
-        return array.slice(0, itemLimit);
-    });
-
-    // Shortcode: <cite> tag
-    eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`);
-
-    // Paired shortcode: Manual heading anchor
-    eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id=slugify(title)) => {
-        return `<div class="heading-wrapper h${hLevel}">
-            <h${hLevel} id="${id}">${title}</h${hLevel}>
-            <a class="heading-anchor" href="#${id}" aria-labelledby="${id}"><span hidden="">#</span></a>
-        </div>`;
-    });
-
     return {
         dir: {
             input: "src"

src/_config/collections.js

@@ -0,0 +1,12 @@
+export default function(eleventyConfig) {
+    // Add content categories to a collection
+    eleventyConfig.addCollection("categories", function(collectionApi) {
+        let categories = new Set();
+        let contents = collectionApi.getFilteredByTag('contents');
+        contents.forEach(p => {
+            let cats = p.data.categories;
+            cats.forEach(c => categories.add(c));
+        });
+        return Array.from(categories).sort();
+    });
+}

src/_config/copy.js

@@ -0,0 +1,9 @@
+// Passthrough File Copy
+export default function(eleventyConfig) {
+    eleventyConfig.addPassthroughCopy("./src/assets/");
+    eleventyConfig.addWatchTarget("./src/assets/");
+    eleventyConfig.addWatchTarget("./src/_bundle/");
+    eleventyConfig.addPassthroughCopy({
+        "node_modules/@zachleat/details-utils/details-utils.js": "assets/js/details-utils.js",
+    });
+}

src/_config/filter.js

@@ -0,0 +1,27 @@
+export default function(eleventyConfig) {
+    // Filter contents by category
+    eleventyConfig.addFilter("filterByCategory", function(contents, cat) {
+        cat = cat.toLowerCase();
+        let result = contents.filter(item => {
+            let cats = item.data.categories.map(c => c.toLowerCase());
+            return cats.includes(cat);
+        });
+        return result;
+    });
+
+    // Format dates
+    const dateOptions = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    };
+    const dateTimeLocale = new Intl.DateTimeFormat("en-GB", dateOptions);
+    eleventyConfig.addFilter("formatDate", function(date) {
+        return dateTimeLocale.format(date);
+    });
+
+    // Limit number of items displayed
+    eleventyConfig.addFilter("itemLimit", function(array, itemLimit) {
+        return array.slice(0, itemLimit);
+    });
+}

src/_config/markdown-it.js

@@ -1,12 +1,3 @@
-/* CONFIGURATION FOR MARKDOWN TEMPLATES */
-
-// Installed Plugins
-import pluginTOC from '@uncenter/eleventy-plugin-toc';
-import embedEverything from "eleventy-plugin-embed-everything";
-
-// Configure slug filter
-import slugify from "slugify";
-
 // markdown-it plugins
 import markdownIt from "markdown-it";
 import markdownItAnchor from "markdown-it-anchor";
@@ -16,16 +7,13 @@ import markdownItBracketedSpans from 'markdown-it-bracketed-spans';
 import markdownItDefList from "markdown-it-deflist";
 import markdownItFootnote from "markdown-it-footnote";
 
-export default function(eleventyConfig) {
+// Configure slug filter
-    // Installed Plugins
+import slugify from "slugify";
-    eleventyConfig.addPlugin(pluginTOC, {
-        tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
-        wrapper: function (toc) {
-            return `<nav class="toc" aria-labelledby="toc-heading">${toc}</nav>`;
-        },
-    });
-    eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
 
+// Enable exporting markdown-it library to another module
+export let markdownLibrary;
+
+export default function(eleventyConfig) {
     // Configure slug filter
     eleventyConfig.addFilter("slug", (str) => {
         if (!str) {
@@ -74,7 +62,7 @@ export default function(eleventyConfig) {
     };
 
     /* Markdown Overrides */
-    let markdownLibrary = markdownIt({
+    markdownLibrary = markdownIt({
         html: true,
         linkify: true,
     })
@@ -118,42 +106,6 @@ export default function(eleventyConfig) {
         }
     });
 
-    // Paired shortcode: custom container
-    eleventyConfig.addPairedShortcode('container', (children, el, className) => {
-        const classMarkup = className ? ` class="${className}"` : "";
-        const content = markdownLibrary.render(children);
-        return `<${el}${classMarkup}>${content}</${el}>`;
-    });
-
-    // Paired shortcode: image figure and figcaption
-    eleventyConfig.addPairedShortcode('imgFigure', (caption, img, alt=caption, enableLazyLoading=true) => {
-        const figcaption = markdownLibrary.renderInline(caption);
-        return `<figure>
-            <img src="${img}" alt="${alt}"${enableLazyLoading ? ' loading="lazy"' : ''}>
-            <figcaption>${figcaption}</figcaption>
-        </figure>`;
-    });
-
-    // Paired shorcode: Content accordion
-    eleventyConfig.addPairedShortcode('accordion', (content, summary) => {
-        const summaryMarkup = markdownLibrary.renderInline(summary);
-        const contentMarkup = markdownLibrary.render(content);
-        return `<details class="content-accordion">
-            <summary class="content-accordion__summary">${summaryMarkup}</summary>
-            <div class="content-accordion__content">${contentMarkup}</div>
-        </details>`;
-    });
-
-    // Paired shorcode: Content warning accordion
-    eleventyConfig.addPairedShortcode('contentWarning', (content, warning) => {
-        const warningMarkup = markdownLibrary.renderInline(warning);
-        const contentMarkup = markdownLibrary.render(content);
-        return `<details class="contnet-warning">
-            <summary class="contnet-warning__warning"><strong><span aria-hidden="true">⚠️</span> Content Warning:</strong> ${warningMarkup}</summary>
-            <div class="contnet-warning__content">${contentMarkup}</div>
-        </details>`;
-    });
-
     /* This is the part that tells 11ty to swap to our custom config */
     eleventyConfig.setLibrary("md", markdownLibrary);
 }

src/_config/shortcodes.js

@@ -0,0 +1,51 @@
+import slugify from "slugify";
+import { markdownLibrary } from "./markdown-it.js";
+
+export default function(eleventyConfig) {
+    // <cite> tag
+    eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`);
+
+    // Manual heading anchor
+    eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id=slugify(title)) => {
+        return `<div class="heading-wrapper h${hLevel}">
+            <h${hLevel} id="${id}">${title}</h${hLevel}>
+            <a class="heading-anchor" href="#${id}" aria-labelledby="${id}"><span hidden="">#</span></a>
+        </div>`;
+    });
+
+    // Paired shortcode: custom container
+    eleventyConfig.addPairedShortcode('container', (children, el, className) => {
+        const classMarkup = className ? ` class="${className}"` : "";
+        const content = markdownLibrary.render(children);
+        return `<${el}${classMarkup}>${content}</${el}>`;
+    });
+
+    // Paired shortcode: image figure and figcaption
+    eleventyConfig.addPairedShortcode('imgFigure', (caption, img, alt=caption, enableLazyLoading=true) => {
+        const figcaption = markdownLibrary.renderInline(caption);
+        return `<figure>
+            <img src="${img}" alt="${alt}"${enableLazyLoading ? ' loading="lazy"' : ''}>
+            <figcaption>${figcaption}</figcaption>
+        </figure>`;
+    });
+
+    // Paired shorcode: Content accordion
+    eleventyConfig.addPairedShortcode('accordion', (content, summary) => {
+        const summaryMarkup = markdownLibrary.renderInline(summary);
+        const contentMarkup = markdownLibrary.render(content);
+        return `<details class="content-accordion">
+            <summary class="content-accordion__summary">${summaryMarkup}</summary>
+            <div class="content-accordion__content">${contentMarkup}</div>
+        </details>`;
+    });
+
+    // Paired shorcode: Content warning accordion
+    eleventyConfig.addPairedShortcode('contentWarning', (content, warning) => {
+        const warningMarkup = markdownLibrary.renderInline(warning);
+        const contentMarkup = markdownLibrary.render(content);
+        return `<details class="contnet-warning">
+            <summary class="contnet-warning__warning"><strong><span aria-hidden="true">⚠️</span> Content Warning:</strong> ${warningMarkup}</summary>
+            <div class="contnet-warning__content">${contentMarkup}</div>
+        </details>`;
+    });
+}