selfdefined/11ty/shortcodes/renderDefinitionContentNextEntries.js
Oscar 7f7943d2fc
🌓 Adds Dark Mode (#210)
* feat(dark mode): set up first set of colors

* feat(dark mode): define state colours

* 🧹

* feat(dark mode): variablify all teh wordz

* feat(dark mode): set colors on body

* feat(dark mode): replace hard coded color value

* feat(dark mode): 🌑

* feat(a11y): update link focus styles

- restores visible focus in windows high contrast mode
- increases visibility in boxes with bg colour

* feat(dark mode): enable postcss

* 💅

* feat(dark mode): add user control

* chore: use generic headline name

* feat(dark mode): hide switch until script loads

* feat(dark mode): increase link contrast

* add content warning to footer nav partial

* feat(dark mode): replace hard coded colour value in alertbox

* feat(dark mode): tone down text colour

* feat(dark mode): properly invert code elements

* 🧹 move box styles into own partial

* feat(dark mode): use darker colour as background for links
2020-08-26 03:10:24 -07:00

43 lines
1.5 KiB
JavaScript

const definitionPermalink = require('../helpers/definitionPermalink');
const findDefinitionContentNextItems = require('../helpers/findDefinitionContentNextItems');
const makeListItem = (item) =>
`<li><a href=${definitionPermalink(item.slug)}>${item.title}</a></li>`;
module.exports = function definitionContentNextEntries(
title,
slug,
collection
) {
if (!title) throw new Error('E_NO_TITLE');
if (!slug) throw new Error('E_NO_SLUG');
if (!collection) throw new Error('E_NO_COLLECTION');
const entry = { title, slug };
const { next, previous } = findDefinitionContentNextItems(entry, collection);
return `<section class="definition-navigation definition__further-definitions_nav">
<h2 class="visually-hidden">Browse</h2>
<div><h3 class="smcp-headline" id="context-nav-previous">Previous words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
${
previous.length
? `<ul class="definition-navigation__list">${previous
.map((item) => makeListItem(item))
.join('')}</ul>`
: ''
}</nav>
</div>
<div><h3 class="smcp-headline" id="context-nav-next">Next words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-next">${
next.length
? `<ul class="definition-navigation__list">${next
.map((item) => makeListItem(item))
.join('')}</ul>`
: ''
}</nav>
</div>
</section>`;
};