Make custom configurations more modular

This commit is contained in:
Helen Chong 2024-07-28 19:05:49 +08:00
parent 5755e5a368
commit dc014a60fb
6 changed files with 129 additions and 118 deletions

View File

@ -1,83 +1,43 @@
// Installed Plugins // Installed Plugins
import pluginRss from "@11ty/eleventy-plugin-rss"; import pluginRss from "@11ty/eleventy-plugin-rss";
import eleventyNavigationPlugin from "@11ty/eleventy-navigation"; import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
import embedEverything from "eleventy-plugin-embed-everything";
import metagen from 'eleventy-plugin-metagen'; import metagen from 'eleventy-plugin-metagen';
import emojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime"; 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) { 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 // Installed Plugins
eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(eleventyNavigationPlugin); eleventyConfig.addPlugin(eleventyNavigationPlugin);
eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
eleventyConfig.addPlugin(metagen); eleventyConfig.addPlugin(metagen);
eleventyConfig.addPlugin(emojiReadTime); 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 // Eleventy bundle plugin
eleventyConfig.addBundle("css"); eleventyConfig.addBundle("css");
eleventyConfig.addBundle("js", { toFileDirectory: "assets/js" }); 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 { return {
dir: { dir: {
input: "src" input: "src"

View File

@ -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();
});
}

9
src/_config/copy.js Normal file
View File

@ -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",
});
}

27
src/_config/filter.js Normal file
View File

@ -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);
});
}

View File

@ -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 // markdown-it plugins
import markdownIt from "markdown-it"; import markdownIt from "markdown-it";
import markdownItAnchor from "markdown-it-anchor"; import markdownItAnchor from "markdown-it-anchor";
@ -16,16 +7,13 @@ import markdownItBracketedSpans from 'markdown-it-bracketed-spans';
import markdownItDefList from "markdown-it-deflist"; import markdownItDefList from "markdown-it-deflist";
import markdownItFootnote from "markdown-it-footnote"; 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 // Configure slug filter
eleventyConfig.addFilter("slug", (str) => { eleventyConfig.addFilter("slug", (str) => {
if (!str) { if (!str) {
@ -74,7 +62,7 @@ export default function(eleventyConfig) {
}; };
/* Markdown Overrides */ /* Markdown Overrides */
let markdownLibrary = markdownIt({ markdownLibrary = markdownIt({
html: true, html: true,
linkify: 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 */ /* This is the part that tells 11ty to swap to our custom config */
eleventyConfig.setLibrary("md", markdownLibrary); eleventyConfig.setLibrary("md", markdownLibrary);
} }

51
src/_config/shortcodes.js Normal file
View File

@ -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>`;
});
}