mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-06-10 21:01:41 +00:00
Code Issues Projects Releases Wiki Activity

📄 Add Detail Pages for Definitions (#75)

Browse Source 
* fix: untrack definitions in dist

* feat(detail pages): update item link

* feat(detail pages): add layout

* feat(detail pages): render whole definition content

* feat(detail pages): remove definitons from homepage

* 🧹 def list component

* feat(layout): render site footer in all pages

* feat(detail pages): rename definition root class && move css into partials

* chore: abstract further css into own files

* feat(detail pages): update headling level of definition content

* feat(styles): set box sizing

* feat(styles): add margin bottom utility

* feat(styles): selection

* feat(components): sub page header own component

* feat(detail pages): add sections

* feat(style): mian headline

* feat(page layout): rename page content grid

* feat(page layout): add wide content class

* feat(detail pages): set document title

* feat(detail pages): set uniform document title for docs and definitions

* feat(page title): add comment

* feat(detail pages): add meta description

* feat(detail pages): wrap def header in article tag

* chore: set up ava

* feat(filters): move permalink function into file, add test

* chore: rename _temp to _util, remove creation script

* feat(detail pages): helper function to find additional definitions

* chore: move helpers to single directory

* feat(detail pages): create shortcode for further definition navigation

* feat(detail pages): fix find defs function

* feat(detail pages): shortcode for browse nav markup

* chore: fix collection mock data

* feat(detail pages): render browse nav

* feat(detail pages): style browse nav, style improvements

* feat(detail pages): test redirect

* feat(detail pages): client side redirect

* feat(homepage): set title

* 💅

* feat(detail pages): incorporate design changes

* feat(detail pages): hide browse headlines

* feat(detail pages): label lists

* feat(footer): add aria label

* feat(detail pages): redice heading level in md

* feat(detail pages): spacing in browse nav

* feat(detail pages): reduce line height

* feat(detail pages): set max width w/o breaking homepage

* feat(detail pages): replace in-definition definition links

* 🧹

* feat(detail pages): recover spacing utility

* 🧹

* chore(packages): update ava

* config: specify nvm version

* 💅

* 💅
This commit is contained in:
Oscar
2020-03-09 23:47:06 +01:00
committed by GitHub
parent 6050307a78
commit bd88c18fd0
67 changed files with 1155 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js Normal file
View File

@ -0,0 +1,67 @@
import test from 'ava';
import testCollection from '../../../_util/_mocks/testCollection.json';
import renderDefinitionContentNextEntries from '../renderDefinitionContentNextEntries';
test('first item', (t) => {
const { title, slug } = testCollection[0].data;
t.is(
renderDefinitionContentNextEntries(title, slug, testCollection),
`<section class="definition-navigation definition__further-definitions_nav">
<h2 class="visually-hidden">Browse</h2>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
</nav>
</div>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-next"><ul class="definition-navigation__list"><li><a href=/definitions/ableism/>Ableism</a></li><li><a href=/definitions/barbaric/>Barbaric</a></li><li><a href=/definitions/biromantic/>Biromantic</a></li></ul></nav>
</div>
</section>`
);
});
test('last item', (t) => {
const { title, slug } = testCollection[testCollection.length - 1].data;
t.is(
renderDefinitionContentNextEntries(title, slug, testCollection),
`<section class="definition-navigation definition__further-definitions_nav">
<h2 class="visually-hidden">Browse</h2>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
<ul class="definition-navigation__list"><li><a href=/definitions/transgender/>Transgender</a></li><li><a href=/definitions/unreal/>unreal</a></li><li><a href=/definitions/white-fragility/>White Fragility</a></li></ul></nav>
</div>
<div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3>
<nav class="definition-navigation__nav" aria-labelledby="context-nav-next"></nav>
</div>
</section>`
);
});
test('throws if no title has been passed', (t) => {
const error = t.throws(() => {
renderDefinitionContentNextEntries();
});
t.is(error.message, 'E_NO_TITLE');
});
test('throws if no slug has been passed', (t) => {
const error = t.throws(() => {
renderDefinitionContentNextEntries('title');
});
t.is(error.message, 'E_NO_SLUG');
});
test('throws if no collection has been passed', (t) => {
const error = t.throws(() => {
renderDefinitionContentNextEntries(
testCollection[0].data.title,
testCollection[0].data.slug
);
});
t.is(error.message, 'E_NO_COLLECTION');
});

42
11ty/shortcodes/renderDefinitionContentNextEntries.js Normal file
View File

@ -0,0 +1,42 @@
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="definition-navigation__sub-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="definition-navigation__sub-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>`;
};