Add tag filtered view to blog list

static/src/scss/_content.scss

@@ -41,3 +41,14 @@ section.content {
     max-width: calc(99% - ($column-gap * 2));
   }
 }
+
+.blog-filter {
+  &,
+  .tag {
+    font-size: 1.25rem;
+  }
+
+  .tag {
+    font-family: $family-code;
+  }
+}

website/blog/models.py

@@ -57,6 +57,12 @@ class BlogListPage(BaseContentMixin, BasePage):  # type: ignore[misc]
             .prefetch_related("tags")
             .order_by("-date")
         )
+        if tag := request.GET.get("tag"):
+            tag = BlogPostTag.objects.filter(slug=tag).first()
+            if tag:
+                context["filtering_by_tag"] = tag
+                context["no_table_of_contents"] = True
+                context["child_pages"] = context["child_pages"].filter(tags=tag)
         return context
 
 
@@ -69,6 +75,13 @@ class BlogPostTag(TagBase):
         verbose_name = "blog tag"
         verbose_name_plural = "blog tags"
 
+    def get_absolute_url(self) -> str:
+        return (
+            BlogListPage.objects.live().defer_streamfields().first().get_url()  # type: ignore[attr-defined]
+            + "?tag="
+            + self.slug
+        )
+
 
 class TaggedBlog(ItemBase):
     tag = models.ForeignKey(

website/blog/templates/blog/blog_list_page.html

@@ -1,16 +1,32 @@
 {% extends "wagtail_base.html" %}
 
+{% load wagtailcore_tags %}
+
 {% block content %}
 
 {% include "common/hero.html" %}
 
+{% if filtering_by_tag %}
+  <section class="container blog-filter">
+    <p>
+      Showing only:
+      <span class="tag is-light is-medium">
+        #{{ filtering_by_tag.name }}
+        <a class="delete is-small" href="{% pageurl page %}"></a>
+      </span>
+    </p>
+  </section>
+{% endif %}
+
 <section class="container">
   {% for page in child_pages %}
-    {% ifchanged %}
-      <time datetime="{{ page.date|date:'c' }}" title='{{ page.date|date:"F Y" }}'>
-        <h3 id="{{ page.date|date:'Y-m' }}" class="date-header">{{ page.date|date:"Y-m" }}</h3>
-      </time>
-    {% endifchanged %}
+    {% if not filtering_by_tag %}
+      {% ifchanged %}
+        <time datetime="{{ page.date|date:'c' }}" title='{{ page.date|date:"F Y" }}'>
+          <h3 id="{{ page.date|date:'Y-m' }}" class="date-header">{{ page.date|date:"Y-m" }}</h3>
+        </time>
+      {% endifchanged %}
+    {% endif %}
 
     {% include "common/listing-item.html" %}
   {% endfor %}

website/common/templates/common/content-details.html

@@ -1,3 +1,5 @@
+
+
 <div class="content-details field is-grouped is-grouped-multiline {{extra_classes}}">
 
   {% if page.date %}
@@ -23,7 +25,7 @@
       <div class="tags has-addons">
         <span class="tag is-dark"><i class="fas fa-tags"></i></span>
         {% for tag in page.tags.all %}
-          <span class="tag is-white"><a title="{{ tag.name }}">#{{ tag.slug }}</a></span>
+          <span class="tag is-white"><a title="{{ tag.name }}" href="{{ tag.get_absolute_url }}">#{{ tag.slug }}</a></span>
         {% endfor %}
       </div>
     </div>

website/common/templates/common/hero.html

@@ -16,7 +16,7 @@
           {% include "common/content-details.html" %}
         </div>
         <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
-          {% if page.table_of_contents %}
+          {% if not no_table_of_contents and page.table_of_contents %}
             <div class="dropdown is-hoverable is-right" id="table-of-contents">
               <div class="dropdown-trigger">
                 <button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu">