📄 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>

11ty/_includes/layouts/base.njk

@@ -4,12 +4,28 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>{{ renderData.title or title or metadata.title }}</title>
-    <meta name="description" content="{{ renderData.description or description or metadata.description }}">
+    {# Use title with path, or append a space to the page title to avoid collpasing with the meta title #}
+    {% set pageTitle = titleWithPath or title + ' ' or '' %}
+    <title>{{ pageTitle + metadata.title }}</title>
+    <meta
+      name="description"
+      content="{{ renderData.description or description or metadata.description }}"
+    >
 
     <link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
   </head>
   <body>
     {% block content %}{% endblock content %}
+    <footer class="site-footer">
+      <nav aria-label="Complimentary">
+        <ul class="navigation-list">
+          <li>
+            <a href="/documentation/">Documentation</a>
+          </li>
+        </ul>
+      </nav>
+    </footer>
+    {% block pageScript %}
+    {% endblock pageScript %}
   </body>
-</html>
+</html>

11ty/_includes/layouts/definition.njk

@@ -0,0 +1,19 @@
+{% extends 'layouts/base.njk' %}
+{% set pageType = 'Definition' %}
+{% set titleWithPath = title + ' « Definitions « ' %}
+{% set description = 'The definition of ' + title + ' in Self-Defined, a modern dictionary about us.'%}
+
+{% block content %}
+  <div class="wide-content">
+    {% include 'components/sub-page-header.njk' %}
+    <main>
+      <article class="definition">
+        <header class="definition__header">
+          {% definitionFlag flag %}
+          <h1 class="main-headline" >{{ title }}</h1>
+        </header>
+        {% include 'components/definition-content.njk' %}
+        {% renderDefinitionContentNextEntries title, slug, collections.definedWords %}
+      </article>
+    </main>
+{% endblock %}

11ty/_includes/layouts/documentation.njk

@@ -1,12 +1,10 @@
 {% extends 'layouts/base.njk' %}
 {% set pageType = 'Page' %}
+{% set titleWithPath = title + ' « Documentation « ' %}
 
 {% block content %}
-  <div class="small-left-grid">
-    <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>
+  <div class="article-content">
+    {% include 'components/sub-page-header.njk' %}
     <main class="page">
       {%- if parent -%}
         <div>
@@ -16,4 +14,4 @@
       <h1 class="title__thicc" >{{ title }}</h1>
       {{ content | safe }}
     </main>
-{% endblock %}
+  {% endblock %}

11ty/_includes/layouts/index.njk

@@ -1,19 +1,31 @@
 {% extends 'layouts/base.njk' %}
+{% set titleWithPath = 'Home « ' %}
 
 {% block content %}
   <main>
     {{ content | safe }}
     {% include 'components/table-of-content.njk' %}
-    <section>
-      <h2>Words</h2>
-      {% include 'components/defintions-list.njk' %}
-    </section>
+
   </main>
-  <footer class="site-footer">
-    <nav aria-label="">
-      <ul class="navigation-list">
-        <li><a href="/documentation/">Documentation</a></li>
-      </ul>
-    </nav>
-  </footer>
+
+{% endblock %}
+
+
+{% block pageScript%}
+<script>
+  // don't use es6+ here because it will not be transpiled
+  window.addEventListener('DOMContentLoaded', function() {
+    if (location.hash) {
+      var allLinks = Array.from(document.querySelectorAll('.toc__list-item > a'));
+
+      for (var i = 0; i < allLinks.length; i++) {
+        var link = allLinks[i]
+
+        if (link.href.includes(location.hash.replace('#', ''))) {
+          window.location = link.href
+        }
+      }
+    }
+  })
+</script>
 {% endblock %}