🏡 eleventy@0.10.0

.eleventy.js

@@ -1,21 +1,21 @@
-const makeItemLink = (slug) => `#${slug}`;
-const findExistingDefinition = (word, collection) =>
-  collection.find((item) => item.data.title === word);
+const definitionPermalink = require('./11ty/helpers/definitionPermalink');
+const renderDefinitionContentNextEntries = require('./11ty/shortcodes/renderDefinitionContentNextEntries');
+const findExistingDefinition = require('./11ty/filters/helpers/findExistingDefinition');
 
 module.exports = function(config) {
   // Add a filter using the Config API
-  config.addFilter('linkTarget', makeItemLink);
+  config.addFilter('linkTarget', definitionPermalink);
 
   config.addFilter('linkIfExistsInCollection', (word, collection) => {
     const existingDefinition = findExistingDefinition(word, collection);
 
     if (existingDefinition) {
-      return `<a href="${makeItemLink(
+      return `<a href="${definitionPermalink(
         existingDefinition.data.slug
       )}">${word}</a>`;
     }
 
-    return word;
+    return `<span>${word}</span>`;
   });
 
   config.addFilter('linkSubTermIfDefined', (subTermData, collection) => {
@@ -25,7 +25,7 @@ module.exports = function(config) {
     );
 
     if (existingDefinition) {
-      return `<a href="${makeItemLink(
+      return `<a href="${definitionPermalink(
         existingDefinition.data.slug
       )}" aria-label="${subTermData.full_title}">${subTermData.text}</a>`;
     }
@@ -69,12 +69,17 @@ module.exports = function(config) {
       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="definition-content__signal definition-content__signal--${info.class}">${text}</p>`;
     }
 
-    return '<p class="word__signal"></p>';
+    return '<p class="definition-content__signal"></p>';
   });
 
+  config.addShortcode(
+    'renderDefinitionContentNextEntries',
+    renderDefinitionContentNextEntries
+  );
+
   // 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

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "ignorePatterns": ["node_modules/"],
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "node": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}

.github/workflows/main.yml

@@ -0,0 +1,21 @@
+name: Node CI
+
+on: [push]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - name: Cache node modules
+      uses: actions/cache@v1
+      with:
+        path: node_modules
+        key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+    - name: npm install, lint, and test
+      run: |
+        npm install
+        npm run lint
+        npm test
+      env:
+        CI: true

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 dist
 config.codekit3
-.cache
+.cache
+.sass-cache

.nvmrc

@@ -0,0 +1 @@
+12

.stylelintrc

@@ -0,0 +1,13 @@
+{
+  "extends": "stylelint-config-recommended-scss",
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/properties-alphabetical-order": true
+  }
+}

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

@@ -2,24 +2,30 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    >
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>{{ renderData.title or title or metadata.title }}</title>
+    {# 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 }}"
-    >
+    <link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
   </head>
   <body>
-    {% block content %}
-    {% endblock content %}
+    {% 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>

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/page.njk → 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 %}

11ty/definitions/ableism.md

@@ -9,11 +9,11 @@ a system that places value on people’s bodies and minds based on societally co
 
 — Talia "TL" Lewis
 
-#### Impact
+## Impact
 
 To paraphrase Lewis, ableism "leads to people and society determining who is valuable and worthy based on a person’s appearance and/or their ability to [...] produce, excel, and 'behave.'" You do not have to be disabled to experience ableism, and Disabled people can also reinforce ableism internally (manifesting as harm to themselves) and externally (harm to other disabled people).
 
-#### Further reading
+## Further reading
 
 - [Longmore Lecture: Context, Clarity & Grounding](https://www.talilalewis.com/blog/longmore-lecture-context-clarity-grounding)
 - [Ableism 2020: An Updated Definition](https://www.talilalewis.com/blog/ableism-2020-an-updated-definition)

11ty/definitions/barbaric.md

@@ -7,30 +7,31 @@ flag:
 defined: true
 speech: adjective
 reading:
-  - text: "is the word barbarian a slur?"
+  - text: 'is the word barbarian a slur?'
     href: https://seetobehumanityearth.wordpress.com/2015/07/16/is-the-term-barbarian-a-slur/
-  - text: "Barbarian wiki"
+  - text: 'Barbarian wiki'
     href: https://en.wikipedia.org/wiki/Barbarian
 alt_words:
   - cruel
   - vicious
   - obscene
   - feral
 ---
+
 something which is obscenely cruel; primitive; unsophisticated
 
-#### Issues
+## Issues
 
-Barbarian originates from the Greek word *bárbaros* meaning "babbler", to denote the "unintelligible sounds" (_"bar bar bar"_) made by foreign speakers.
-Similar words exist in many other languages, for the identical purpose labeling a "strange"/"foreign" person/culture. 
+Barbarian originates from the Greek word _bárbaros_ meaning "babbler", to denote the "unintelligible sounds" (_"bar bar bar"_) made by foreign speakers.
+Similar words exist in many other languages, for the identical purpose labeling a "strange"/"foreign" person/culture.
 
 In modern day usage, you can notice this rhetoric being employed almost always for the purpose of demonizing "foreign" (more often than not from the global south) cultures - cultures that need to be civilized;
-cultures that need to be colonized to rescue them from themselves. A perfect lingual weapon for warmongers and racists alike. Equally repulsive sibling of "savage". 
+cultures that need to be colonized to rescue them from themselves. A perfect lingual weapon for warmongers and racists alike. Equally repulsive sibling of "savage".
 
-#### Impact
+## Impact
 
-When you use words, that are in vogue primarily inside circles of bigots, with racist etymologies, it's a wilful act of violence, ignorance and an indication to the vilified and minoritised communities that their history of wounds and abuses are inconsequential to our words. 
+When you use words, that are in vogue primarily inside circles of bigots, with racist etymologies, it's a wilful act of violence, ignorance and an indication to the vilified and minoritised communities that their history of wounds and abuses are inconsequential to our words.
 
-#### Usage Tip
+## Usage Tip
 
-Avoid words that have obscene etymologies. There is almost always a better alternative: an inclusive and a less hurtful one. 
+Avoid words that have obscene etymologies. There is almost always a better alternative: an inclusive and a less hurtful one.

11ty/definitions/biromantic.md

@@ -14,8 +14,8 @@ reading:
 
 of, relating to, or characterised by being romantically attracted to more than one gender.
 
-#### Note
+## Note
 
-Biromantic does not imply any particular kind of sexual attraction, or sexual attraction at all. A biromantic person may be asexual, homosexual, heterosexual, [bisexual](#bisexual), [pansexual](#pan-sexual), etc.
+Biromantic does not imply any particular kind of sexual attraction, or sexual attraction at all. A biromantic person may be asexual, homosexual, heterosexual, [bisexual](/definitions/bisexual), [pansexual](/definitions/pan-sexual), etc.
 
-Biromantic does not preclude romantic attraction to [non-binary](#non-binary) or [transgender](#transgender) people.
+Biromantic does not preclude romantic attraction to [non-binary](/definitions/non-binary) or [transgender](/definitions/transgender) people.