👷‍♀️ Add Build Process for Definitions

.eleventy.js

@@ -1,38 +1,151 @@
+const makeItemLink = (slug) => `#${slug}`
+const findExistingDefinition = (word, collection) => collection.find(item => item.data.title === word)
+
 module.exports = function (config) {
   // Add a filter using the Config API
-  config.addFilter('linkTarget', (slug) => `#${slug}`);
+  config.addFilter('linkTarget', makeItemLink);
+
+  config.addFilter('linkIfExistsInCollection', (word, collection) => {
+    const existingDefinition = findExistingDefinition(word, collection)
+
+    if (existingDefinition) {
+      return `<a href="${makeItemLink(existingDefinition.data.slug)}">${word}</a>`
+    }
+
+    return word
+  })
+
+  config.addFilter('linkSubTermIfDefined', (subTermData, collection) => {
+    const existingDefinition = findExistingDefinition(subTermData.full_title, collection)
+
+    if (existingDefinition) {
+      return `<a href="${makeItemLink(existingDefinition.data.slug)}" aria-label="${subTermData.full_title}">${subTermData.text}</a>`
+    }
+
+    return subTermData.text
+  })
 
+  // just a debug filter to lazily inspect the content of anything in a template
   config.addFilter('postInspect', function (post) {
     console.log(post);
-
   })
 
   config.addPassthroughCopy({'_site/css/': 'assets/css/'})
 
-  // Add collections here
-  config.addCollection('definitions', collection => {
-    return [
-      ...collection
-        .getFilteredByGlob('./11ty/definitions/*.md')
-        .sort((a, b) => {
-          // `toLowerCase()` is just a safety measure, slugs should be lower case anyway
-          // `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
-          return a.data.slug.toLowerCase().localeCompare(b.data.slug.toLowerCase())
-        })]
+  config.addShortcode('definitionFlag', (flag) => {
+    const cleanText = new Map([
+      ['avoid', {
+        class: 'avoid',
+        text: 'Avoid'
+      }],
+      ['better-alternative', {
+        class: 'better',
+        text: 'Better alternate'
+      }],
+      ['tool', {
+        class: 'tool',
+        text: ''
+      }]
+    ])
+
+    if (flag) {
+      const info = cleanText.get(flag.level)
+
+      const sep = flag.text && info.text ? '—' : ''
+      const text = flag.text ? [info.text, flag.text].join(sep) : info.text
+
+      return `<p class="word__signal word__signal--${info.class}">${text}</p>`
+    }
+
+    return '<p class="word__signal"></p>'
+  });
+
+
+  // NOTE (ovlb): this will not be remembered as the best code i’ve written. if anyone seeing this has a better solution then the following to achieve sub groups of the definitions: i am happy to get rid of it
+  config.addCollection('tableOfContent', collection => {
+    const allItems = collection
+      .getFilteredByGlob('./11ty/definitions/*.md')
+      .filter(word => !word.data.skip_in_table_of_content)
+      .sort((a, b) => {
+        // `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+        return a.data.title.toLowerCase().localeCompare(b.data.title.toLowerCase())
+      })
+
+    const split = {
+      notLetters: {
+        title: '#',
+        definitions: []
+      },
+      aToE: {
+        title: 'A–E',
+        definitions: []
+      },
+      fToL: {
+        title: 'F–L',
+        definitions: []
+      },
+      mToS: {
+        title: 'M–S',
+        definitions: []
+      },
+      tToZ: {
+        title: 'T–Z',
+        definitions: []
+      }
+    }
+
+    allItems.forEach(word => {
+      const { title, skip_in_table_of_content } = word.data
+      const { notLetters, aToE, fToL, mToS, tToZ } = split
+
+      if (/^[a-e]/gmi.test(title)) {
+        return aToE.definitions.push(word)
+      }
+
+      if (/^[f-l]/i.test(title)) {
+        return fToL.definitions.push(word)
+      }
+
+      if (/^[m-s]/i.test(title)) {
+        return mToS.definitions.push(word)
+      }
+
+      if (/^[t-z]/i.test(title)) {
+        return tToZ.definitions.push(word)
+      }
+
+      // no reg ex as the fallback to avoid testing for emojis and numbers
+      notLetters.definitions.push(word)
+    })
+
+    return Object.keys(split).map(key => {
+      const { title, definitions } = split[key]
+
+      return { title, definitions }
+    })
   })
 
-  config.addCollection('definedDefinitions', collection => {
-    return [
-      ...collection
+  config.addCollection('definedWords', collection => {
+    return collection
         .getFilteredByGlob('./11ty/definitions/*.md')
         .filter(word => word.data.defined)
         .sort((a, b) => {
-          // `toLowerCase()` is just a safety measure, slugs should be lower case anyway
           // `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
-          return a.data.slug.toLowerCase().localeCompare(b.data.slug.toLowerCase())
-        })]
+          return a.data.title.toLowerCase().localeCompare(b.data.title.toLowerCase())
+        })
   })
 
+  const mdIt = require('markdown-it')({
+    html: true
+  })
+  const prism = require('markdown-it-prism')
+  const anchor = require('markdown-it-anchor')
+
+  mdIt.use(prism)
+  mdIt.use(anchor)
+
+  config.setLibrary('md', mdIt);
+
   // You can return your Config object (optional).
   return {
     dir: {

11ty/_includes/components/definition.njk

@@ -1,16 +1,29 @@
-<article id={{ definition.data.slug }} class="block__word word">
+<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>
-  {{ 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 }}</li>
-      {% endfor %}
-    </ul>
-  {% endif %}
+  <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 +1,5 @@
 <div class="auto-grid">
-  {% for definition in collections.definedDefinitions %}
+  {% for definition in collections.definedWords %}
     {% include 'components/definition.njk' %}
   {% endfor %}
 </div>

11ty/_includes/components/table-of-content-item.njk

@@ -0,0 +1,18 @@
+<li>
+  {{ definition.data.title | linkIfExistsInCollection(collections.definedWords) | safe  }}
+  {%- if
+    definition.data.flag and
+    definition.data.flag.text and
+    (definition.data.flag.level == 'avoid') -%}
+    <span class="flag__red">{{ definition.data.flag.text }}</span>
+  {% endif %}
+  {%- if definition.data.sub_terms -%}
+    <ul class="sub-terms">
+      {% for term in definition.data.sub_terms %}
+        <li
+          class="subterm"
+        >{{ term | linkSubTermIfDefined(collections.definedWords) | safe }}</li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+</li>

11ty/_includes/components/table-of-content.njk

@@ -0,0 +1,16 @@
+<section>
+  <nav class="" aria-label="Definitions">
+    <ol class="auto-grid list">
+    {% for section in collections.tableOfContent %}
+      <li>
+        <span class="sub-headline">{{ section.title }}</span>
+        <ol>
+          {% for definition in section.definitions %}
+            {% include 'components/table-of-content-item.njk' %}
+          {% endfor %}
+        </ol>
+      </li>
+    {% endfor %}
+    </ol>
+  </nav>
+</section>

11ty/_includes/layouts/base.njk

@@ -15,40 +15,11 @@
 
     <link
       rel="stylesheet"
-      href="{{ 'assets/css/base.css' | url }}"
+      href="{{ '/assets/css/base.css' | url }}"
     >
   </head>
   <body>
-    <main>
-      {{ content | safe }}
-      <section>
-        <h2>Table of Content</h2>
-        <div class="auto-grid list">
-          <ul>
-            {% for definition in collections.definitions %}
-              {% set renderedName %}
-                {{ definition.data.title}}
-                {%- if definition.data.flag and (definition.data.flag.level == 'avoid') -%}
-                  <span class="flag__red">{{ definition.data.flag.type }}</span>
-                {% endif %}
-              {% endset %}
-              <li>
-                {%- if definition.data.defined -%}
-                  <a
-                    href={{ definition.data.slug | linkTarget | url }}
-                    class="word__link"
-                  >{{ renderedName | safe }}</a>
-                {%- else -%}
-                  {{ renderedName | safe }}
-                {% endif %}
-              </li>
-            {% endfor %}
-          </ul>
-        </div>
-      </section>
-      <section>
-        <h2>Words</h2>
-        {% include 'components/defintions-list.njk' %}
-      </section>
-    </main>
+    {% block content %}
+    {% endblock content %}
   </body>
+</html>

11ty/_includes/layouts/index.njk

@@ -0,0 +1,19 @@
+{% extends 'layouts/base.njk' %}
+
+{% 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
+      </ul>
+    </nav>
+  </footer>
+{% endblock %}

11ty/_includes/layouts/page.njk

@@ -0,0 +1,19 @@
+{% extends 'layouts/base.njk' %}
+{% set pageType = 'Page' %}
+
+{% 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>
+    <main class="page">
+      {%- if parent -%}
+        <div>
+          <a href={{ parent.href }}>{{ parent.title }}</a>
+        </div>
+      {% endif %}
+      <h1 class="title__thicc" >{{ title }}</h1>
+      {{ content | safe }}
+    </main>
+{% endblock %}

11ty/definitions/bisexual.md

@@ -7,8 +7,6 @@ defined: true
 
 of, relating to, or characterised by being sexually attracted to more than one gender.
 
----
-
 #### Note
 
 Bisexuality does not preclude attraction to [non-binary](#non-binary) or [transgender](#transgender) people.

11ty/definitions/cisgender.md

@@ -0,0 +1,10 @@
+---
+title: Cisgender
+slug: cisgender
+speech: adj
+defined: true
+---
+
+of, relating to, or characterised by being a gender that matches the gender they were assigned at birth.
+
+The opposite of [transgender](/#transgender).

11ty/definitions/crazy.md

@@ -2,7 +2,7 @@
 title: crazy
 slug: crazy
 flag:
-  type: ableist-slur
+  text: 'Ableist Slur'
   level: avoid
 defined: true
 speech: noun

11ty/definitions/english-as-second-language.md

@@ -0,0 +1,25 @@
+---
+title: English as Second Language (ESL)
+slug: english-as-second-language
+flag:
+  level: avoid
+defined: true
+speech: noun
+alt_words:
+  - English as learning-language (ELL)
+  - or non-native
+  - or omit (because do you really know, for sure?)
+reading:
+  - href: https://benchmarkeducation.com/best-practices-library/supporting-english-language-learners-in-reading-writing.html#section_2
+    text: ELL Glossary by Benchmark Education
+---
+
+the teaching of English to people who speak a different language and who live in a country where English is the main language spoken
+
+#### Issues
+
+Monolinguist, English-only speakers often refer to people who don't speak English natively as "ESL" or say they are learning a "second language". More often than not, this is not true, as many people are multi-lingual with 3 or more languages
+
+#### Impact
+
+It makes false assumptions about English learners, centres English as the "default" or "expected" first language, ignoring that many people learn multiple (>3), non-English languages first.