⚒️ Add optional category support for alt words. (#199)

* Add optional category support for alt words.

In the frontmatter for Markdown word definitions, the `alt_words` key
now supports any number of categories, though it functionally only
supports one level in the look & feel of the website.

If we wish to use multi-level categories, we can add a class to the <ul>
in order to cleanly style nested lists.

Resolves #170

* Fix: Digital Blackface lint issues.

.eleventy.js

@@ -39,6 +39,10 @@ module.exports = function(config) {
     console.log(post);
   });
 
+  config.addFilter('isArray', function(thing) {
+    return Array.isArray(thing);
+  });
+
   config.addPlugin(pluginRss);
 
   config.addShortcode('definitionFlag', (flag) => {

11ty/_includes/components/definition-content.njk

@@ -1,16 +1,40 @@
+{% macro renderAltWords(words, labels) %}
+  {%- if words | isArray -%}
+    {# Array #}
+    <ul
+      class="list-semicolon"
+      {% if labels %}aria-labelledby="{{ labels | join(' ') }}"{% endif %}
+    >
+      {%- for word in words -%}
+        <li>
+          {{ word | linkIfExistsInCollection(collections.definedWords) | safe }}
+        </li>
+      {%- endfor -%}
+    </ul>
+  {%- else -%}
+    {# Object #}
+    {# With class="", the list loses padding via the CSS reset style. #}
+    {# For multi-level category support, we may want an actual class. #}
+    <ul class="">
+      {%- for category, list in words -%}
+        <li>
+          {% set categoryId = ("alt-words-" + category) | replace(' ', '-') %}
+          <strong id="{{ categoryId }}">{{ category }}</strong>
+          {{ renderAltWords(list, labels.concat(categoryId)) }}
+        </li>
+      {%- endfor -%}
+    </ul>
+  {%- endif -%}
+{% endmacro %}
+
 <section class="definition-content">
   <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">
+      {{ renderAltWords(alt_words, ["alt-words"]) }}
-        {% for word in alt_words %}
-          <li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
-        {% endfor %}
-      </ul>
     </section>
   {% endif %}
   {%- if reading -%}

11ty/definitions/digital-blackface.md

@@ -22,14 +22,15 @@ Digital Blackface is also an issue of representation and culture appropriation:
 
 - Online personas: It can go further than appropration. Falsified personas are easy to spot as they almost always use terms like "as a black woman..." [sic] and resort to incorrect and illegitimate use of African American Vernacular English (AAVE).[1](https://www.buzzfeednews.com/article/ryanhatesthis/your-slip-is-showing-4chan-trolls-operation-lollipop)
 
-"On Twitter lie countless handles featuring a Black person’s image, run by users who are most assuredly not Black. These accounts, which often include a “ghetto” name — the formula prefix “La+” is a favored trope — are riddled with poor attempts at Black vernacular, and feature stereotypes from the minstrel stage." [2](https://www.theawl.com/2014/08/memes-and-misogynoir/)
+  "On Twitter lie countless handles featuring a Black person’s image, run by users who are most assuredly not Black. These accounts, which often include a “ghetto” name — the formula prefix “La+” is a favored trope — are riddled with poor attempts at Black vernacular, and feature stereotypes from the minstrel stage." [2](https://www.theawl.com/2014/08/memes-and-misogynoir/)
 
 - Gifs
+
   "For while reaction GIFs can and do every feeling under the sun, white and nonblack users seem to especially prefer GIFs with black people when it comes to emitting their most exaggerated emotions. Extreme joy, annoyance, anger and occasions for drama and gossip are a magnet for images of black people, especially black femmes." [1](https://www.teenvogue.com/story/digital-blackface-reaction-gifs)
 
 - Emojis (using a darker-than-your-own skin-tone, especially when you are white)[1](https://www.npr.org/sections/codeswitch/2018/03/21/425573955/white-skin-black-emojis)[2](https://techcrunch.com/2017/10/01/thoughts-on-white-people-using-dark-skinned-emoji/)
 
-Simple actions like using dark toned emoji in text or social media posts
+- Simple actions like using dark toned emoji in text or social media posts
 
 ## What To Do (instead)
 

11ty/definitions/dude.md

@@ -5,9 +5,11 @@ defined: true
 flag:
   level: avoid
 alt_words:
+  expression of astonishment:
     - wow
     - oh my word
     - yikes
+  noun:
     - y'all
     - friend
     - mate