📄 Add Detail Pages for Definitions (#75)

* 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

* 💅

* 💅

11ty/helpers/__tests__/definitionPermalink.spec.js

@@ -0,0 +1,7 @@
+import test from 'ava';
+
+import definitionPermalink from '../definitionPermalink';
+
+test('constructs correct detail link', (t) => {
+  t.is(definitionPermalink('test-slug'), '/definitions/test-slug/');
+});

11ty/helpers/__tests__/findDefinitionContentNextItems.spec.js

@@ -0,0 +1,122 @@
+import test from 'ava';
+
+import testCollection from '../../../_util/_mocks/testCollection.json';
+
+import findDefinitionContentNextItems from '../findDefinitionContentNextItems';
+
+test('finds no previous previous elements for the first item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[0].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, []);
+});
+
+test('finds one previous element for the second item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[1].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, [testCollection[0].data]);
+});
+
+test('finds two previous elements for the third item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[2].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, [testCollection[0].data, testCollection[1].data]);
+});
+
+test('finds three previous elements for the fourth item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[3].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, [
+    testCollection[0].data,
+    testCollection[1].data,
+    testCollection[2].data
+  ]);
+});
+
+test('finds three previous elements for the eigth item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[7].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, [
+    testCollection[4].data,
+    testCollection[5].data,
+    testCollection[6].data
+  ]);
+});
+
+test('finds three next elements for the eigth item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[7].data,
+    testCollection
+  );
+
+  t.deepEqual(next, [
+    testCollection[8].data,
+    testCollection[9].data,
+    testCollection[10].data
+  ]);
+});
+
+test('finds three next elements for the fourth to last item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[testCollection.length - 4].data,
+    testCollection
+  );
+
+  t.deepEqual(next, [
+    testCollection[testCollection.length - 3].data,
+    testCollection[testCollection.length - 2].data,
+    testCollection[testCollection.length - 1].data
+  ]);
+});
+
+test('finds two next elements for the third to last item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[testCollection.length - 3].data,
+    testCollection
+  );
+
+  t.deepEqual(next, [
+    testCollection[testCollection.length - 2].data,
+    testCollection[testCollection.length - 1].data
+  ]);
+});
+
+test('finds one next elements for the second to last item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[testCollection.length - 2].data,
+    testCollection
+  );
+
+  t.deepEqual(next, [testCollection[testCollection.length - 1].data]);
+});
+
+test('finds no next elements for the last item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[testCollection.length - 1].data,
+    testCollection
+  );
+
+  t.deepEqual(next, []);
+});
+
+test('throws if no slug has been given', (t) => {
+  const error = t.throws(() =>
+    findDefinitionContentNextItems({ test: 'no-slug' })
+  );
+
+  t.is(error.message, 'E_NO_SLUG');
+});

11ty/helpers/definitionPermalink.js

@@ -0,0 +1,3 @@
+module.exports = function(slug) {
+  return `/definitions/${slug}/`;
+};

11ty/helpers/findDefinitionContentNextItems.js

@@ -0,0 +1,31 @@
+module.exports = function findDefinitionContentNextItems({ slug }, collection) {
+  if (!slug) throw new Error('E_NO_SLUG');
+
+  let previous = [];
+  let next = [];
+
+  const flattenedCollection = collection.map((d) => d.data);
+  const index = flattenedCollection.findIndex((def) => def.slug === slug);
+
+  // make this a no-op if we are at the beginning
+  if (index > 0) {
+    // a negative start index would start searching at the end of the array
+    // stop at zero to avoid this
+    const start = Math.max(0, index - 3);
+    // never get more than three items
+    const end = start + Math.min(index, 3);
+
+    previous = flattenedCollection.slice(start, end);
+  }
+
+  // make this a no-op if we are at the end
+  if (index < collection.length - 1) {
+    const start = index + 1;
+    // end overflow doesn't matter too much, cap it still because it feels right
+    const end = Math.min(start + 3, collection.length);
+
+    next = flattenedCollection.slice(start, end);
+  }
+
+  return { previous, next };
+};