📄 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/_includes/components/definition-content.njk

@@ -0,0 +1,32 @@
+<section class="definition-content">
+  <section class="u-margin-bottom-double" aria-labelledby="definition-speech">
+    <h2 id="definition-speech" class="visually-hidden">Speech</h2>
+    <p class="definition-content__speech">{{ speech }}</p>
+  </section>
+  <section class="definition-content__content">
+    {{ content | safe }}
+    {# <p>{{ alt_words }}</p> #}
+  </section>
+  {%- if alt_words -%}
+    <section class="definition-content__content">
+      <h2 id="alt-words">Alt Words</h2>
+      <ul class="list-semicolon" aria-labelledby="alt-words">
+        {% for word in alt_words %}
+          <li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  {% endif %}
+  {%- if reading -%}
+    <section class="definition-content__content">
+      <h2 id="further-reading">Further Reading</h2>
+      <ul class="list-semicolon" aria-labelledby="further-reading">
+        {% for link in reading %}
+          <li>
+            <a href="{{link.href}}">{{ link.text }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </section>
+  {% endif %}
+</section>

11ty/_includes/components/definition.njk

@@ -1,29 +0,0 @@
-<article id="{{ definition.data.slug }}" class="block__word word">
-  {% definitionFlag definition.data.flag %}
-  <h3 class="word__title">
-    {{ definition.data.title}}
-    <span class="word__speech">{{ definition.data.speech}}</span>
-  </h3>
-  <div class="word__content">
-    {{ definition.templateContent | safe }}
-    {# <p>{{ definition.data.alt_words }}</p> #}
-    {%- if definition.data.alt_words -%}
-      <h4>Alt Words</h4>
-      <ul class="list-semicolon">
-        {% for word in definition.data.alt_words %}
-          <li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-    {%- if definition.data.reading -%}
-      <h4>Further Reading</h4>
-      <ul class="list-semicolon">
-        {% for link in definition.data.reading %}
-          <li>
-            <a href="{{link.href}}">{{ link.text }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-  </div>
-</article>

11ty/_includes/components/defintions-list.njk

@@ -1,5 +0,0 @@
-<div class="auto-grid">
-  {% for definition in collections.definedWords %}
-    {% include 'components/definition.njk' %}
-  {% endfor %}
-</div>

11ty/_includes/components/sub-page-header.njk

@@ -0,0 +1,4 @@
+<div id="title">
+  <a href="/">Self-Defined</a>
+  <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
+</div>