Add new front matter element: excerpt (#227)

* This commit adds the excerpt front matter element, to show an
abbreviated version of the definition in social previews. This
also includes the documentation updates to support this change.

* This commit adds @olvb's suggestion to use 'set' to define the
alert & preview combo, to avoid repetitive code

* This commit updates the preview text to only include the flag if
it's "avoid" – if the flag is "warning" or there is no flag, it
will not appear at the beginning of the preview text.

Co-authored-by: Kathryn Grayson Nanz <kathryn@Kathryns-MacBook-Air.local>
Co-authored-by: Oscar <ovlb@users.noreply.github.com>
Co-authored-by: Kathryn <>

11ty/_includes/layouts/base.njk

@@ -9,10 +9,30 @@
     <link rel="dns-prefetch" href="https://p.typekit.net/">
     {# 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 '' %}
+
+    {% if flag.level == "avoid" %}
+      {%  set alert = flag.level + ": " %}
+    {% else %}
+      {% set alert = '' %}
+    {% endif %}
+    {% set preview = excerpt or renderData.description or description or metadata.description %}
+    {% set fullExcerpt = alert + preview  %}
+
     <title>{{ pageTitle + metadata.title }}</title>
+    <meta
+      name="twitter:description"
+      content="{{ fullExcerpt }}"
+    >
+    <meta name="twitter:card" content="summary"/>
+    <meta name="twitter:title" content="{{ pageTitle }}"/>
+    <meta
+      name="og:description"
+      content="{{ fullExcerpt }}"
+    >
+    <meta name="og:title" content="{{ pageTitle }}"/>
     <meta
       name="description"
-      content="{{ renderData.description or description or metadata.description }}"
+      content="{{ fullExcerpt }}"
     >
     <link rel="stylesheet" href="https://use.typekit.net/qlo3dpu.css">
     <link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">

11ty/definitions/-misia.md

@@ -3,6 +3,7 @@ title: -misia
 slug: -misia
 speech: noun
 defined: true
+excerpt: from Greek for hate or hatred
 sub_terms:
   - text: Fat
     full_title: fatmisia

11ty/definitions/ableism.md

@@ -2,6 +2,7 @@
 title: Ableism
 slug: ableism
 defined: true
+excerpt: a system that places value on people’s bodies and minds based on societally constructed ideas of normalcy, intelligence, excellence, and productivity. These constructed ideas are deeply rooted in anti-Blackness, eugenics, colonialism, and capitalism.
 speech: noun
 flag:
   level: warning

11ty/definitions/barbaric.md

@@ -5,6 +5,7 @@ flag:
   text: 'Neo-Colonial/Racist slur'
   level: 'avoid'
 defined: true
+excerpt: something which is obscenely cruel; primitive; unsophisticated.
 speech: adjective
 reading:
   - text: 'is the word barbarian a slur?'

11ty/documentation/examples/basic.md

@@ -13,6 +13,7 @@ title: Example Word
 slug: 'example-word'
 speech: noun
 defined: true
+excerpt: This is a definition.
 ---
 
 This is a sentence. It describes a word. This definition is written in Markdown. So you can do stuff. [Including links](/link), for example.

11ty/documentation/examples/flagged-word.md

@@ -21,6 +21,7 @@ flag:
   text: 'Ableist Slur'
   level: avoid
 defined: true
+excerpt: mentally deranged; demented; insane.
 speech: noun
 alt_words:
   - abundant
@@ -65,6 +66,7 @@ This example is the definition of [performative allyship](/definitions/performat
 title: performative allyship
 slug: performative-allyship
 defined: true
+excerpt: when an individual or group of power/majority/privilege loudly profess(es) their actions in the name of 'allyship,' while actively conducting harm to the group they claim to support
 speech: noun
 flag:
   level: tool

11ty/documentation/front-matter.md

@@ -53,6 +53,20 @@ Whether or not the definition of this word is finished and should be displayed p
 defined: true
 ```
 
+## Excerpt
+
+| Key     | Type    | required |
+| ------- | ------- | -------- |
+| excerpt | String  | true     |
+
+An abbreviated version of the definition that will appear in social media previews. In the social preview, the excerpt will be prefaced with the flag level.
+
+### Example
+
+```yaml
+excerpt: This is the short version of the definition that will appear in social previews.
+```
+
 ## Speech
 
 | Key    | Type   | required |