From a3271a94707b57069315b27c0fa2bd1b2f77e8dc Mon Sep 17 00:00:00 2001
From: David Peter <david.a.peter@gmail.com>
Date: Fri, 12 Jun 2020 13:12:15 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=92=EF=B8=8F=20Add=20optional=20category?=
 =?UTF-8?q?=20support=20for=20alt=20words.=20(#199)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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                                  |  4 +++
 .../components/definition-content.njk         | 36 +++++++++++++++----
 11ty/definitions/digital-blackface.md         |  5 +--
 11ty/definitions/dude.md                      | 22 ++++++------
 4 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index ce6add0e..7e285be7 100644
--- a/.eleventy.js
+++ b/.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) => {
diff --git a/11ty/_includes/components/definition-content.njk b/11ty/_includes/components/definition-content.njk
index 31cb5b15..73d6f720 100644
--- a/11ty/_includes/components/definition-content.njk
+++ b/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">
-        {% for word in alt_words %}
-          <li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
-        {% endfor %}
-      </ul>
+      {{ renderAltWords(alt_words, ["alt-words"]) }}
     </section>
   {% endif %}
   {%- if reading -%}
diff --git a/11ty/definitions/digital-blackface.md b/11ty/definitions/digital-blackface.md
index 8d2f4244..c1b96c2f 100644
--- a/11ty/definitions/digital-blackface.md
+++ b/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)
 
diff --git a/11ty/definitions/dude.md b/11ty/definitions/dude.md
index 24172859..f4efd4bc 100644
--- a/11ty/definitions/dude.md
+++ b/11ty/definitions/dude.md
@@ -5,16 +5,18 @@ defined: true
 flag:
   level: avoid
 alt_words:
-  - wow
-  - oh my word
-  - yikes
-  - y'all
-  - friend
-  - mate
-  - fam
-  - folks
-  - pal*
-  - buddy*
+  expression of astonishment:
+    - wow
+    - oh my word
+    - yikes
+  noun:
+    - y'all
+    - friend
+    - mate
+    - fam
+    - folks
+    - pal*
+    - buddy*
 reading:
   - text: Etymonline entry
     href: https://www.etymonline.com/word/dude