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

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

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 }}">

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');
+});

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);
+};