Merge pull request #31 from ovlb/feature/eleventy-build

👷‍♀️ Add Build Process for Definitions YAY

.eleventy.js

@@ -1,38 +1,157 @@
+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/'})
+  config.addPassthroughCopy({'assets/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) => {
+        const { title: firstTitle } = a.data
+        const { title: secondTitle } = b.data
+        const sortA = firstTitle.toLowerCase().replace(/^-/, '')
+        const sortB = secondTitle.toLowerCase().replace(/^-/, '')
+
+        // `localeCompare()` is super cool: http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+        return sortA.localeCompare(sortB)
+      })
+
+    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
+      const sortableTitle = title.replace(/^-/, '')
+
+      if (/^[a-e]/gmi.test(sortableTitle)) {
+        return aToE.definitions.push(word)
+      }
+
+      if (/^[f-l]/i.test(sortableTitle)) {
+        return fToL.definitions.push(word)
+      }
+
+      if (/^[m-s]/i.test(sortableTitle)) {
+        return mToS.definitions.push(word)
+      }
+
+      if (/^[t-z]/i.test(sortableTitle)) {
+        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: {

.gitignore

@@ -1,4 +1,4 @@
 .DS_Store
 node_modules
 dist
-config.codekit3
+config.codekit3

.sassrc

@@ -0,0 +1,3 @@
+{
+  "includePaths": ["node_modules"]
+}

11ty/_data/metadata.json

@@ -1,7 +1,7 @@
 {
-  "title": "selfdefined",
+  "title": "Self-Defined",
   "url": "https://www.selfdefined.app/",
-  "description": "A modern dictionary about us.",
+  "description": "A modern dictionary about us. We define our words, but they don't define us.",
   "author": {
     "name": "Tatiana & the Crew",
     "email": "info@selfdefined.app"

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="multi-column u-no-padding-left 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/-normative.md

@@ -0,0 +1,8 @@
+---
+title: -normative
+slug: -normative
+defined: false
+sub_terms:
+  - text: Hetero
+    full_title: heternormative
+---

11ty/definitions/-passing.md

@@ -0,0 +1,12 @@
+---
+title: -passing
+slug: -passing
+defined: false
+sub_terms:
+  - text: cis-
+    full_title: cis-passing
+  - text: female-
+    full_title: female-passing
+  - text: white-
+    full_title: white-passing
+---

11ty/definitions/-phile.md

@@ -0,0 +1,10 @@
+---
+title: -phile
+slug: -phile
+defined: false
+sub_terms:
+  - text: andro-
+    full_title: andro-phile
+  - text: gyne-
+    full_title: gyne-phile
+---