Compare commits
6 Commits
c657a2d55e
...
d6276067a5
Author | SHA1 | Date |
---|---|---|
Helen Chong | d6276067a5 | |
Helen Chong | 45ec6b9780 | |
Helen Chong | 6dc3afe000 | |
Helen Chong | dc014a60fb | |
Helen Chong | 5755e5a368 | |
Helen Chong | 81605fff84 |
|
@ -1,82 +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 pluginEleventyNavigation from "@11ty/eleventy-navigation";
|
||||||
import metagen from 'eleventy-plugin-metagen';
|
import pluginEmbedEverything from "eleventy-plugin-embed-everything";
|
||||||
import emojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime";
|
import pluginMetagen from "eleventy-plugin-metagen";
|
||||||
|
import pluginEmojiReadTime 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";
|
||||||
export default function (eleventyConfig) {
|
import filterConfig from "./src/_config/filter.js";
|
||||||
// Copy files
|
import shortCodesConfig from "./src/_config/shortcodes.js";
|
||||||
eleventyConfig.addPassthroughCopy("./src/assets/");
|
|
||||||
eleventyConfig.addWatchTarget("./src/assets/");
|
|
||||||
eleventyConfig.addPassthroughCopy({
|
|
||||||
"node_modules/@zachleat/details-utils/details-utils.js": "assets/js/details-utils.js",
|
|
||||||
});
|
|
||||||
|
|
||||||
// Custom Plugins
|
|
||||||
eleventyConfig.addPlugin(markdownPlugin);
|
|
||||||
|
|
||||||
|
export default function(eleventyConfig) {
|
||||||
// Installed Plugins
|
// Installed Plugins
|
||||||
eleventyConfig.addPlugin(pluginRss);
|
eleventyConfig.addPlugin(pluginRss);
|
||||||
eleventyConfig.addPlugin(eleventyNavigationPlugin);
|
eleventyConfig.addPlugin(pluginEleventyNavigation);
|
||||||
eleventyConfig.addPlugin(metagen);
|
eleventyConfig.addPlugin(pluginEmbedEverything, { add: ['soundcloud'] });
|
||||||
eleventyConfig.addPlugin(emojiReadTime);
|
eleventyConfig.addPlugin(pluginMetagen);
|
||||||
|
eleventyConfig.addPlugin(pluginEmojiReadTime);
|
||||||
|
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"
|
||||||
|
|
|
@ -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
|
// 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);
|
||||||
}
|
}
|
|
@ -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>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Custom container
|
||||||
|
eleventyConfig.addPairedShortcode('container', (children, el, className) => {
|
||||||
|
const classMarkup = className ? ` class="${className}"` : "";
|
||||||
|
const content = markdownLibrary.render(children);
|
||||||
|
return `<${el}${classMarkup}>${content}</${el}>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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