selfdefined/.eleventy.js
Kate Sowles 2a8f1014b8
Feature/rss feed (#192)
* installed @11ty/eleventy-plugin-rss package and added it to the config

* adding default rss template from the 11ty documentation

* using 'definedWords' as a collection, not 'posts'

* added a link to the feed in the html head, on the homepage so it's co-located with the other means of engagement, and in the feed itself (permalink is now part of metadata too)

* metadata.description is what we want to show as the feed subtitle, and made the author name safe as part of the metadata json; can't use the safe filter otherwise xml blows up

* removed redundant --- from right below the frontmatter, which md turns into a <hr>, which makes xml blow up

* made indentation consistent

* removing subscribe link from the CTA box, adding it to the footer next to Documentation link with bullet delimiter; updated site footer's ul style to show list items as display-block elements

* on definition pages, the footer is constrained to have the max width of the sidebar (160px). set grid-column: 1 / -1 to give it the full width to match the home/toc page

* created a new collection for sorting only defined words via their .date value (should be created date unless otherwise specified)

* RSS feed now shows posts in the order used by new definedWordsChronological collection

* reversed sort order as requested

* re-prettier-ifying eleventy.js

Co-authored-by: Oscar <ovlb@users.noreply.github.com>
2020-06-12 11:21:37 +02:00

208 lines
5.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

const definitionPermalink = require('./11ty/helpers/definitionPermalink');
const renderDefinitionContentNextEntries = require('./11ty/shortcodes/renderDefinitionContentNextEntries');
const findExistingDefinition = require('./11ty/filters/helpers/findExistingDefinition');
const pluginRss = require('@11ty/eleventy-plugin-rss');
module.exports = function(config) {
// Add a filter using the Config API
config.addFilter('linkTarget', definitionPermalink);
config.addFilter('linkIfExistsInCollection', (word, collection) => {
const existingDefinition = findExistingDefinition(word, collection);
if (existingDefinition) {
return `<a href="${definitionPermalink(
existingDefinition.data.slug
)}">${word}</a>`;
}
return `<span>${word}</span>`;
});
config.addFilter('linkSubTermIfDefined', (subTermData, collection) => {
const existingDefinition = findExistingDefinition(
subTermData.full_title,
collection
);
if (existingDefinition) {
return `<a href="${definitionPermalink(existingDefinition.data.slug)}">${
subTermData.text
}</a>`;
}
return `<span>${subTermData.text}</span>`;
});
// just a debug filter to lazily inspect the content of anything in a template
config.addFilter('postInspect', function(post) {
console.log(post);
});
config.addPlugin(pluginRss);
config.addShortcode('definitionFlag', (flag) => {
const cleanText = new Map([
[
'avoid',
{
class: 'avoid',
text: 'Avoid'
}
],
[
'better-alternative',
{
class: 'better',
text: 'Better alternate'
}
],
[
'tool',
{
class: 'tool',
text: ''
}
],
[
'warning',
{
class: 'warning',
text: ''
}
]
]);
if (flag) {
const info = cleanText.get(flag.level.toLowerCase());
const sep = flag.text && info.text ? '—' : '';
const text = flag.text ? [info.text, flag.text].join(sep) : info.text;
return `<p class="definition-content__signal definition-content__signal--${info.class}">${text}</p>`;
}
return '<p class="definition-content__signal"></p>';
});
config.addShortcode(
'renderDefinitionContentNextEntries',
renderDefinitionContentNextEntries
);
// NOTE (ovlb): this will not be remembered as the best code ive written. if anyone seeing this has a better solution then the following to achieve sub groups of the definitions: i am happy to get rid of it
config.addCollection('tableOfContent', (collection) => {
const allItems = collection
.getFilteredByGlob('./11ty/definitions/*.md')
.filter((word) => !word.data.skip_in_table_of_content)
.sort((a, b) => {
const { title: firstTitle } = a.data;
const { title: secondTitle } = b.data;
const sortA = firstTitle.toLowerCase().replace(/^-/, '');
const sortB = secondTitle.toLowerCase().replace(/^-/, '');
// `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
return sortA.localeCompare(sortB);
});
const split = {
notLetters: {
title: '#',
definitions: []
},
aToE: {
title: 'AE',
definitions: []
},
fToL: {
title: 'FL',
definitions: []
},
mToS: {
title: 'MS',
definitions: []
},
tToZ: {
title: 'TZ',
definitions: []
}
};
allItems.forEach((word) => {
const { title } = word.data;
const { notLetters, aToE, fToL, mToS, tToZ } = split;
const sortableTitle = title.replace(/^-/, '');
if (/^[a-e]/gim.test(sortableTitle)) {
return aToE.definitions.push(word);
}
if (/^[f-l]/i.test(sortableTitle)) {
return fToL.definitions.push(word);
}
if (/^[m-s]/i.test(sortableTitle)) {
return mToS.definitions.push(word);
}
if (/^[t-z]/i.test(sortableTitle)) {
return tToZ.definitions.push(word);
}
// no reg ex as the fallback to avoid testing for emojis and numbers
notLetters.definitions.push(word);
});
return Object.keys(split).map((key) => {
const { title, definitions } = split[key];
return { title, definitions };
});
});
config.addCollection('definedWords', (collection) => {
return collection
.getFilteredByGlob('./11ty/definitions/*.md')
.filter((word) => word.data.defined)
.sort((a, b) => {
// `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
return a.data.title
.toLowerCase()
.localeCompare(b.data.title.toLowerCase());
});
});
config.addCollection('definedWordsChronological', (collection) => {
return collection
.getFilteredByGlob('./11ty/definitions/*.md')
.filter((word) => word.data.defined)
.sort((a, b) => {
if (a.date > b.date) return -1;
if (a.date < b.date) return 1;
return 0;
});
});
const mdIt = require('markdown-it')({
html: true
});
const prism = require('markdown-it-prism');
const anchor = require('markdown-it-anchor');
mdIt.use(prism);
mdIt.use(anchor);
config.setLibrary('md', mdIt);
// You can return your Config object (optional).
return {
dir: {
input: '11ty',
output: 'dist'
},
templateFormats: ['njk', 'md'],
htmlTemplateEngine: 'njk',
markdownTemplateEngine: 'njk'
};
};