feat(eleventy): split table of content into sub sections

.eleventy.js

@@ -21,15 +21,68 @@ module.exports = function (config) {
 
   config.addPassthroughCopy({'_site/css/': 'assets/css/'})
 
-  // Add collections here
+
+  // 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('definitions', collection => {
-    return collection
+    const allItems = 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.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 } = 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('definedWords', collection => {

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

@@ -0,0 +1,19 @@
+{% set renderedName %}
+  {{ definition.data.title}}
+  {%- if
+    definition.data.flag and
+    definition.data.flag.type 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>

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

@@ -1,27 +1,16 @@
 <section>
-  <nav class="auto-grid list" aria-label="Definitions">
+  <nav class="" aria-label="Definitions">
-    <ul>
+    <ol class="auto-grid list">
-      {% for definition in collections.definitions %}
+    {% for section in collections.definitions %}
-        {% set renderedName %}
+      <li>
-          {{ definition.data.title}}
+        <span class="sub-headline">{{ section.title }}</span>
-          {%- if
+        <ol>
-            definition.data.flag and
+          {% for definition in section.definitions %}
-            definition.data.flag.type and
+            {% include 'components/table-of-content-item.njk' %}
-            (definition.data.flag.level == 'avoid') -%}
+          {% endfor %}
-            <span class="flag__red">{{ definition.data.flag.type }}</span>
+        </ol>
-          {% endif %}
+      </li>
-        {% endset %}
+    {% endfor %}
-        <li>
+    </ol>
-          {%- if definition.data.defined -%}
-            <a
-              href={{ definition.data.slug | linkTarget | url }}
-              class="word__link"
-            >{{ renderedName | safe }}</a>
-          {%- else -%}
-            {{ renderedName | safe }}
-          {% endif %}
-        </li>
-      {% endfor %}
-    </ul>
   </nav>
 </section>

_site/css/base.css

@@ -1 +1 @@
-@import url("https://use.typekit.net/qlo3dpu.css");:root{--auto-grid-min-size: 17rem}body{border-top:1rem solid red;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:20px;padding:2rem;margin:0}h1{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:700}p{margin:0.75rem 0;font-size:1.25rem;line-height:1.25}a{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif;margin:1rem 0}a:hover{border-bottom:red solid 0.1rem}.subtitle{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:400;letter-spacing:0.1;grid-column:span 2}.summary{grid-column:span 2}.small{font-size:0.75em}.title__thicc{font-size:8vh;line-height:0.75;padding:0;margin:0.5rem 0rem;grid-column:span 2}.help{margin:1rem 0}.help li{margin:0.75rem 0}.grid{display:grid;grid-template-columns:repeat(4, [col] 1fr [col]);grid-template-rows:fit-content, fit-content, auto;grid-row-gap:10rem;grid-column-gap:4rem}.auto-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));grid-gap:1rem}.box{background:black;color:white;padding:1rem;margin:1rem 0.5rem;height:auto}.box a{color:white}.list ul{padding:0 0 0 1em;margin:0}.list li{list-style:none;padding-bottom:0.5em}.list li.subterm{padding-left:10px}.list li:last-child{padding:0}.list li.subterm:before{content:'\21B3 ';padding-right:5px}.style__italics{font-style:italic}.word__title{font-family:orpheuspro,Palatino,Times,serif;font-weight:900;font-size:2.5rem;line-height:1.25;margin-bottom:1rem;margin-top:0}.word__content{align-items:stretch}@supports (display: grid){.word__content{display:grid;grid-template-columns:1fr 4fr;grid-gap:1rem}.word__content>*{margin:0}}.word__content>p{grid-column:1 / -1;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:1.5rem}.word__content h4{grid-column:1;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;font-weight:normal;flex:0 1 auto;text-transform:uppercase;transform:translateY(0.4em)}@supports (display: grid){.word__content h4{text-align:right}}.word__content h4,.word__content h4+*{margin-top:1rem}.word__content h4 ~ p,.word__content h4 ~ ul{grid-column:2;font-size:inherit}.word__speech{font-size:0.5em;font-family:monotype-grotesque,"Lucida Sans",sans-serif}.word__signal{border-top:1px solid currentcolor;display:inline-block;font-family:monotype-grotesque-extended,Arial Black,sans-serif;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.15rem;padding:0.5rem 0.75rem}.word__signal__avoid{color:red}.word__signal__avoid:before{content:'🚨';margin-left:-2.15rem}.word__signal__better{color:green}.word__signal__better:before{content:'🚨';margin-left:-2.15rem}.word__signal__tool{color:black}.word__signal__tool:before{content:'🧰';margin-left:-2.15rem}.block__dictionary{max-width:50rem;margin-left:auto;margin-right:auto;padding:0 1rem}.block__word{grid-column:span 2;display:flex;flex-direction:column;margin:1rem}.block__type{display:grid;grid-template-columns:1fr 4fr;align-items:flex-start}.word__type{text-align:right;padding-right:1rem;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;text-transform:uppercase}.word__link{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif}.word__breakdown{font-family:monotype-grotesque,"Lucida Sans",sans-serif;border-left:0.1rem solid lightgrey;padding-left:1rem}.flag__red{background-color:pink;font-size:0.9rem;font-weight:bold;border-radius:1rem;padding:0.45rem 0.65rem;margin:0.25rem 0.75rem;text-transform:lowercase}.flag__red:before{content:'🚨';margin-right:0.35rem}.list-semicolon{margin:0;padding:0;list-style:none}.list-semicolon>li{display:inline}.list-semicolon>li:not(:last-child)::after{content:'; '}
+@import url("https://use.typekit.net/qlo3dpu.css");:root{--auto-grid-min-size: 17rem}body{border-top:1rem solid red;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:20px;padding:2rem;margin:0}h1{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:700}p{margin:0.75rem 0;font-size:1.25rem;line-height:1.25}a{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif;margin:1rem 0}a:hover{border-bottom:red solid 0.1rem}.subtitle{font-family:monotype-grotesque-extended,Arial Black,sans-serif;font-weight:400;letter-spacing:0.1;grid-column:span 2}.summary{grid-column:span 2}.small{font-size:0.75em}.title__thicc{font-size:8vh;line-height:0.75;padding:0;margin:0.5rem 0rem;grid-column:span 2}.help{margin:1rem 0}.help li{margin:0.75rem 0}.grid{display:grid;grid-template-columns:repeat(4, [col] 1fr [col]);grid-template-rows:fit-content, fit-content, auto;grid-row-gap:10rem;grid-column-gap:4rem}.auto-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));grid-gap:1rem}.box{background:black;color:white;padding:1rem;margin:1rem 0.5rem;height:auto}.box a{color:white}.sub-headline{font-weight:bold;font-size:1.25rem}.list ol{padding:0 0 0 1em;margin:0}.list li{list-style:none;padding-bottom:0.5em}.list li.subterm{padding-left:10px}.list li:last-child{padding:0}.list li.subterm:before{content:'\21B3 ';padding-right:5px}.style__italics{font-style:italic}.word__title{font-family:orpheuspro,Palatino,Times,serif;font-weight:900;font-size:2.5rem;line-height:1.25;margin-bottom:1rem;margin-top:0}.word__content{align-items:stretch}@supports (display: grid){.word__content{display:grid;grid-template-columns:1fr 4fr;grid-gap:1rem}.word__content>*{margin:0}}.word__content>p{grid-column:1 / -1;font-family:monotype-grotesque,"Lucida Sans",sans-serif;font-size:1.5rem}.word__content h4{grid-column:1;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;font-weight:normal;flex:0 1 auto;text-transform:uppercase;transform:translateY(0.4em)}@supports (display: grid){.word__content h4{text-align:right}}.word__content h4,.word__content h4+*{margin-top:1rem}.word__content h4 ~ p,.word__content h4 ~ ul{grid-column:2;font-size:inherit}.word__speech{font-size:0.5em;font-family:monotype-grotesque,"Lucida Sans",sans-serif}.word__signal{border-top:1px solid currentcolor;display:inline-block;font-family:monotype-grotesque-extended,Arial Black,sans-serif;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.15rem;padding:0.5rem 0.75rem}.word__signal__avoid{color:red}.word__signal__avoid:before{content:'🚨';margin-left:-2.15rem}.word__signal__better{color:green}.word__signal__better:before{content:'🚨';margin-left:-2.15rem}.word__signal__tool{color:black}.word__signal__tool:before{content:'🧰';margin-left:-2.15rem}.block__dictionary{max-width:50rem;margin-left:auto;margin-right:auto;padding:0 1rem}.block__word{grid-column:span 2;display:flex;flex-direction:column;margin:1rem}.block__type{display:grid;grid-template-columns:1fr 4fr;align-items:flex-start}.word__type{text-align:right;padding-right:1rem;font-family:monotype-grotesque-condensed,Arial Narrow,sans-serif;font-size:0.85rem;text-transform:uppercase}.word__link{text-decoration:none;color:black;border-bottom:darkgrey solid 0.1em;font-family:monotype-grotesque-extended,Arial Black,sans-serif}.word__breakdown{font-family:monotype-grotesque,"Lucida Sans",sans-serif;border-left:0.1rem solid lightgrey;padding-left:1rem}.flag__red{background-color:pink;font-size:0.9rem;font-weight:bold;border-radius:1rem;padding:0.45rem 0.65rem;margin:0.25rem 0.75rem;text-transform:lowercase}.flag__red:before{content:'🚨';margin-right:0.35rem}.list-semicolon{margin:0;padding:0;list-style:none}.list-semicolon>li{display:inline}.list-semicolon>li:not(:last-child)::after{content:'; '}

_site/scss/base.scss

@@ -147,8 +147,13 @@ a {
   }
 }
 
+.sub-headline {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
 .list {
-  ul {
+  ol {
     padding: 0 0 0 1em;
     margin: 0;
   }