Make custom configurations more modular
This commit is contained in:
Helen Chong
parent
5755e5a368
commit
dc014a60fb
|
|
@ -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";
|
||||
|
||||
import markdownPlugin from "./eleventy.config.md.js";
|
||||
// Custom Configurations
|
||||
import markdownItConfig from "./src/_config/markdown-it.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"
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
|
@ -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",
|
||||
});
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
|
@ -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) {
|
||||
// Installed Plugins
|
||||
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'] });
|
||||
// Configure slug filter
|
||||
import slugify from "slugify";
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>`;
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue