Add controlled tag taxonomy and filters

templates/section.html

@@ -1,5 +1,14 @@
 {% extends "base.html" %}
+{% from "macros/tag-links.html" import tag_links with context %}
 {% block body %}
+{% set filter_tags = namespace(values=[]) %}
+{% if this._id in ['blog', 'articles'] %}
+  {% for item in this.children %}
+    {% for tag in item.tags %}
+      {% if tag not in filter_tags.values %}{% set filter_tags.values = filter_tags.values + [tag] %}{% endif %}
+    {% endfor %}
+  {% endfor %}
+{% endif %}
 <section class="hero compact">
   <div class="shell narrow">
     <p class="eyebrow">{{ this.eyebrow }}</p>
@@ -8,18 +17,29 @@
 </section>
 <section class="activity-section">
   <div class="shell">
-    <div class="section-heading"><span>{{ this.title }}</span><span>{{ this.children.count() }} entries</span></div>
+    <div class="section-heading"><span>{{ this.title }}</span><span data-entry-count>{{ this.children.count() }} entries</span></div>
+    {% if filter_tags.values %}
+    <div class="tag-filter" data-tag-filter aria-label="Filter {{ this.title }} by tag">
+      <button class="tag-filter-button is-active" type="button" data-tag-value="" aria-pressed="true">All</button>
+      {% for tag in filter_tags.values|sort %}
+        {% set tag_record = site.get('/tags/' ~ tag) %}
+        {% if tag_record %}<button class="tag-filter-button" type="button" data-tag-value="{{ tag }}" aria-pressed="false">{{ tag_record.title }}</button>{% endif %}
+      {% endfor %}
+    </div>
+    <p class="filter-status" data-filter-status aria-live="polite"></p>
+    {% endif %}
     <div class="card-grid">
       {% for item in this.children %}
-        <article class="entry-card accent-{{ item.kicker|lower }}">
+        <article class="entry-card accent-{{ item.kicker|lower }}"{% if filter_tags.values %} data-filter-item data-tags="{{ item.tags|join(' ') }}"{% endif %}>
           <div class="entry-meta"><span class="label">{{ item.kicker }}</span><time>{{ item.date|dateformat('YYYY.MM.dd') }}</time></div>
           <h2><a href="{{ item|url }}">{{ item.title }}</a></h2>
           <p>{{ item.summary }}</p>
+          {% if item.tags %}<div class="entry-tags">{{ tag_links(item.tags) }}</div>{% endif %}
           <a class="read-more" href="{{ item|url }}">Read entry →</a>
         </article>
       {% endfor %}
     </div>
+    {% if filter_tags.values %}<p class="filter-empty" data-filter-empty hidden>No entries use this tag.</p>{% endif %}
   </div>
 </section>
 {% endblock %}
-