From 7aed7e3b9099a91b714556b0479870392456b47e Mon Sep 17 00:00:00 2001
From: Derek Murr <derekmurr@gmail.com>
Date: Tue, 1 Sep 2020 15:39:23 -0400
Subject: [PATCH] Include flag context in excerpt (#294)

* Added avoid flag text to meta descriptions

* Moved meta description logic to a shortcode

* Fixing nunjucks syntax error in base template head

Co-authored-by: Oscar <ovlb@users.noreply.github.com>
---
 .eleventy.js                                  |  3 ++
 11ty/_includes/layouts/base.njk               | 12 ++----
 .../__tests__/metaDescriptionWithFlag.spec.js | 43 +++++++++++++++++++
 11ty/shortcodes/metaDescriptionWithFlag.js    | 16 +++++++
 package.json                                  |  2 +-
 5 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 11ty/shortcodes/__tests__/metaDescriptionWithFlag.spec.js
 create mode 100644 11ty/shortcodes/metaDescriptionWithFlag.js

diff --git a/.eleventy.js b/.eleventy.js
index eda76520..38a0ffcf 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,5 +1,6 @@
 const definitionPermalink = require('./11ty/helpers/definitionPermalink');
 const renderDefinitionContentNextEntries = require('./11ty/shortcodes/renderDefinitionContentNextEntries');
+const metaDescriptionWithFlag = require('./11ty/shortcodes/metaDescriptionWithFlag');
 const findExistingDefinition = require('./11ty/filters/helpers/findExistingDefinition');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 
@@ -94,6 +95,8 @@ module.exports = function(config) {
     renderDefinitionContentNextEntries
   );
 
+  config.addShortcode('metaDescriptionWithFlag', metaDescriptionWithFlag);
+
   // 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
diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk
index f3a4dc96..4ced7a22 100644
--- a/11ty/_includes/layouts/base.njk
+++ b/11ty/_includes/layouts/base.njk
@@ -10,29 +10,23 @@
     {# 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 }}"
+      content="{% metaDescriptionWithFlag  preview, flag %}"
     >
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:title" content="{{ pageTitle }}"/>
     <meta
       name="og:description"
-      content="{{ fullExcerpt }}"
+      content="{% metaDescriptionWithFlag  preview, flag %}"
     >
     <meta name="og:title" content="{{ pageTitle }}"/>
     <meta
       name="description"
-      content="{{ fullExcerpt }}"
+      content="{% metaDescriptionWithFlag  preview, flag %}"
     >
     <link rel="stylesheet" href="https://use.typekit.net/qlo3dpu.css">
     <link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
diff --git a/11ty/shortcodes/__tests__/metaDescriptionWithFlag.spec.js b/11ty/shortcodes/__tests__/metaDescriptionWithFlag.spec.js
new file mode 100644
index 00000000..22b585ef
--- /dev/null
+++ b/11ty/shortcodes/__tests__/metaDescriptionWithFlag.spec.js
@@ -0,0 +1,43 @@
+import test from 'ava';
+
+import metaDescriptionWithFlag from '../metaDescriptionWithFlag';
+
+test('renders with flag.level = avoid and flag.text present', (t) => {
+  const flag = {
+    level: 'avoid',
+    text: 'ableist slur'
+  };
+  const preview = 'here is some preview text';
+
+  t.is(
+    metaDescriptionWithFlag(preview, flag),
+    'Avoid: ableist slur. Here is some preview text'
+  );
+});
+
+test('renders with flag.level = avoid and no flag.text', (t) => {
+  const flag = {
+    level: 'avoid'
+  };
+  const preview = 'here is some preview text';
+
+  t.is(
+    metaDescriptionWithFlag(preview, flag),
+    'Avoid: here is some preview text'
+  );
+});
+
+test('renders with flag.level != avoid', (t) => {
+  const flag = {
+    level: 'warning'
+  };
+  const preview = 'here is some preview text';
+
+  t.is(metaDescriptionWithFlag(preview, flag), 'Here is some preview text');
+});
+
+test('renders with no flag present', (t) => {
+  const preview = 'here is some preview text';
+
+  t.is(metaDescriptionWithFlag(preview), 'Here is some preview text');
+});
diff --git a/11ty/shortcodes/metaDescriptionWithFlag.js b/11ty/shortcodes/metaDescriptionWithFlag.js
new file mode 100644
index 00000000..cbedfc08
--- /dev/null
+++ b/11ty/shortcodes/metaDescriptionWithFlag.js
@@ -0,0 +1,16 @@
+module.exports = function(preview, flag = {}) {
+  const initialCap = function(text) {
+    return `${text[0].toUpperCase()}${text.slice(1)}`;
+  };
+
+  if (flag && flag.level === 'avoid') {
+    if (flag.text) {
+      return `${initialCap(
+        flag.level
+      )}: ${flag.text.toLowerCase()}. ${initialCap(preview)}`;
+    }
+    return `${initialCap(flag.level)}: ${preview}`;
+  }
+
+  return initialCap(preview);
+};
diff --git a/package.json b/package.json
index 57da579d..a95a501c 100644
--- a/package.json
+++ b/package.json
@@ -83,4 +83,4 @@
   "engines": {
     "node": "12"
   }
-}
\ No newline at end of file
+}