Add tags collection

This commit:

- Adds a tags collection
  - Adds a slugify package - not the same one 11ty uses, because that package is incompatible with CommonJS inclusion, and we'd have to switch everything to ESM.
- Removes the unused tagList collection
- Moves all collection creation functions into config/collections.js
- Creates tag pages
- Fixes tag index page, and changes it from a layout to a page
- Refactors featured topics/tags data - now it looks up the tag name from the slug, instead of hardcoding a duplicate name

.eleventy.js

@@ -24,6 +24,7 @@ const { readableDate
       , oembed
       , asRelativeUrl
       , matchPosts } = require('./config/filters');
+const { postsCollection, servicesCollection, tagsCollection } = require('./config/collections');
 const { headingLinks } = require('./config/headingLinks');
 const { contrastRatio, humanReadableContrastRatio } = require('./config/wcagColorContrast');
 const privateLinks = require ('./config/privateLinksList');
@@ -141,18 +142,9 @@ module.exports = function (config) {
   // TODO: Not sure this is returning exactly the right string, re: datetimes
   config.addFilter('date_to_xmlschema', (date) => dateObject(date).toISOString());
 
-  // Create an array of all tags
-  config.addCollection('tagList', (collection) => {
-    const tagSet = new Set();
-    collection.getAll().forEach((item) => {
-      (item.data.tags || []).forEach((tag) => tagSet.add(tag));
-    });
-
-    return filterTagList([...tagSet]);
-  });
-
-  config.addCollection('posts', (collection) => collection.getFilteredByGlob('content/posts/*.md'));
-  config.addCollection('services', (collection) => collection.getFilteredByGlob('content/pages/projects/services/*.md'));
+  config.addCollection('posts', postsCollection);
+  config.addCollection('services', servicesCollection);
+  config.addCollection('tags', tagsCollection);
 
   // Customize Markdown library and settings
   const markdownLibrary = markdownIt({

_data/featured.yml

@@ -0,0 +1,14 @@
+blog:
+  tags:
+    - acquisition-services
+    - agile
+    - culture-change
+    - how-we-work
+    - lessons-learned
+case_studies:
+  - agency: U.S. Forest Service
+  - agency: Alaska Department of Health and Social Services
+  - agency: Department of Justice
+  - agency: U.S. Tax Court
+  - agency: Department of the Treasury
+  - agency: Department of State

_includes/back-to-blog.html

@@ -0,0 +1,2 @@
+<a href="{{ "/blog/" | url }}" class="display-flex flex-align-center"><span class="usa-sr-only">Back to</span>{%- include "svg/icons/arrow-left.svg" -%}<span class="margin-left-05">18F Blog </span> </a>
+{% assign post_count = tag.data.posts | size %}

_includes/layouts/blog-page.html

@@ -39,9 +39,10 @@ <h2 class="font-sans-md text-bold border-top-05-primary-dark padding-y-2">
       Browse by topic
       </h2>
       <ul class="usa-sidenav margin-bottom-6">
-        {% for item in featured_blog_content.topics %}
+        {% for slug in featured.blog.tags %}
+          {% assign tag = collections.tags | where: "fileSlug", slug | first %}
           <li class="usa-sidenav__item">
-            <a href="/tags/{{ item.tag }}">{{ item.topic }}</a>
+            <a href="{{ tag.url }}">{{ tag.data.name | capitalize }}</a>
           </li>
         {% endfor %}
       </ul>

_includes/layouts/tag-results.html

@@ -6,19 +6,14 @@
 {% endcomment %}
 <section class="usa-section section-padding-sm">
   <div class="grid-container">
-    <a href="{{ "/blog/" | url }}" class="display-flex flex-align-center"><span class="usa-sr-only">Back to</span>{%- include svg/icons/arrow-left.svg -%}<span class="margin-left-05">18F Blog </span> </a>
-    {% assign numberof = page.posts | size %}
-    <h1 class="margin-top-2">{{ numberof }} {% if numberof == 1 %}post{% else %}posts{% endif %} tagged with "{{ page.title }}" </h1>
+    {% include "back-to-blog.html" %}
+    <h1 class="margin-top-2">{{ tag.data.posts_count }} {% if tag.data.posts_count == 1 %}post{% else %}posts{% endif %} tagged with "{{ tag.data.name }}" </h1>
   </div>
 </section>
 
 <section class="padding-sm page-tag-results">
   <div class="grid-container">
     <hr class="hr-1-dark margin-y-0">
-    {%
-      include "post-previews.html",
-      posts: page.posts,
-      tags: page.tags
-    %}
+    {% include "post-previews.html", posts: tag.data.posts %}
   </div>
 </section>

config/collections.js

@@ -0,0 +1,56 @@
+// smell: This is not the slugify library used by 11ty
+// However, that library requires ESM and this project is CommonJS.
+// The best thing to do would be to import the slugify filter, but I'm not quite
+// sure how to do that from this separate file — perhaps dependency injection
+// in .eleventy.js?
+const slugify = require('slugify');
+
+slugify.extend({'.': '-'})
+
+const postsCollection = (collection) => collection.getFilteredByGlob('content/posts/*.md');
+const servicesCollection = (collection) => collection.getFilteredByGlob('content/pages/projects/services/*.md');
+
+// Create a collection of all tags across all posts
+// Each tag has a `name` property, as well as a `posts` array with all the posts with that tag
+const tagsCollection = (collection) => {
+  const tagMap = new Map();
+
+  collection.getAll().forEach((post) => {
+    (post.data.tags || []).forEach((tag) => {
+      if (!tagMap.has(tag)) {
+        tagMap.set(tag, [])
+      };
+      tagMap.get(tag).push(post)
+    });
+  });
+
+  // Alpha-sorts by key, so that we don't have to do any sorting to get the tag index
+  // displaying tags in alphabetical order
+  const sortedMap = new Map([...tagMap].sort((a, b) => String(a[0]).localeCompare(b[0])))
+
+  // Creates the data object with the right keys
+  const tags = []
+  sortedMap.forEach((posts, name) => {
+    const slug = slugify(name, { lower: true, strict: true });
+    tags.push({
+      data: {
+        name,
+        posts,
+        posts_count: posts.length
+      },
+      date: null,
+      fileSlug: slug,
+      inputPath: null,
+      url: `/tags/${ slug }/`,
+    })
+  })
+  return tags;
+  // I commented this out — it's not clear what it's doing and it doesn't seem important.
+  // return filterTagList([...tagSet]);
+};
+
+module.exports = {
+  postsCollection,
+  servicesCollection,
+  tagsCollection,
+};

content/pages/tags.html

@@ -1,7 +1,14 @@
 ---
 title: Tags
-layout: tag-index
+layout: styled-container
 permalink: /tags/
 ---
 
 <p>Click through to read our posts about the following topics:</p>
+
+{% for tag in collections.tags %}
+<p>
+  <a href="{{ tag.url | url }}/" >{{ tag.data.name }}</a>
+  — {{ tag.data.posts_count }}
+</p>
+{% endfor %}

content/pages/tags.liquid

@@ -0,0 +1,8 @@
+---
+pagination:
+  data: collections.tags
+  size: 1
+  alias: tag
+permalink: "{{ tag.url }}"
+layout: "tag-results"
+---