feat: Add filtering for blog posts by tag and author

This commit introduces filtering functionality to the blog page, allowing users to filter posts by tags and authors. It also includes a 'Featured Posts' section.

- Adds dropdown menus for tag and author selection.
- Uses URL query parameters to apply filters.
- Defines 'tags' and 'authors' as taxonomies in the site configuration.

Author: google-labs-jules[bot]

config.toml

@@ -16,6 +16,10 @@ enableRobotsTXT = false
   filename = "sitemap.xml"
   priority = 0.5
 
+[taxonomies]
+  tag = "tags"
+  author = "authors"
+
 [params]
   # In most cases you will only want to set the google_analytics_id OR the google_tag_manager_id.
   # If you have Google Analytics included in your GTM tags don't put your GA ID here.

content/blog/aws-ecs-fargate-vs-self-managed-ec2.md

@@ -1,10 +1,12 @@
 ---
 title: "AWS ECS: FARGATE vs self-managed EC2"
 authorIds: ["saumitra"]
+authors: ["saumitra"]
 date: 2024-08-13
 draft: false
 featured: true
 weight: 1
+tags: ["aws", "ecs", "fargate", "ec2"]
 ---
 
 Cooking Up Cloud: Fargate or EC2—Which Kitchen Suits You?

content/blog/building-internal-tools.md

@@ -1,13 +1,15 @@
 ---
 title: "Building internal tooling in legacy systems"
 authorIds: ["abhishek"]
+authors: ["abhishek"]
 date: 2024-04-11
 draft: false
 featured: true
 weight: 1
 sitemap:
 changefreq: 'monthly'
 priority: 1
+tags: ["engineering", "legacy-systems"]
 ---
 
 

hugo.log

@@ -0,0 +1,5 @@
+port 1313 already in use, attempting to use an available port
+Watching for changes in /app/{assets,content,data,layouts,static}
+Watching for config changes in /app/config.toml
+Start building sites …
+hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended linux/amd64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio

layouts/blog/list.html

@@ -1,6 +1,8 @@
 {{ define "body_classes" }}page-services-list{{ end }}
 
 {{ define "main" }}
+{{ .Scratch.Set "tag" (.Param "tag") }}
+{{ .Scratch.Set "author" (.Param "author") }}
 <div class="container">
   <div class="row">
     <div class="col-12 text-center mt-8">
@@ -10,8 +12,59 @@
 </div>
 
 <div class="container pt-6 pb-6">
+  <div class="row mb-4">
+    <div class="col-12">
+      <div class="d-flex justify-content-center">
+        <div class="mx-2">
+          <select id="tag-filter" class="form-select" onchange="filterPosts()">
+            <option value="">All Tags</option>
+            {{ range .Site.Taxonomies.tags.ByCount }}
+              <option value="{{ .Name | urlize }}" {{ if (eq ($.Scratch.Get "tag") (.Name | urlize)) }}selected{{ end }}>{{ .Name }} ({{ .Count }})</option>
+            {{ end }}
+          </select>
+        </div>
+        <div class="mx-2">
+          <select id="author-filter" class="form-select" onchange="filterPosts()">
+            <option value="">All Authors</option>
+            {{ range .Site.Taxonomies.authors.ByCount }}
+              <option value="{{ .Name | urlize }}" {{ if (eq ($.Scratch.Get "author") (.Name | urlize)) }}selected{{ end }}>{{ .Page.Title }} ({{ .Count }})</option>
+            {{ end }}
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {{ $pages := .Pages }}
+  {{ $featured := where $pages "Params.featured" "eq" true }}
+  {{ $regular := where $pages "Params.featured" "ne" true }}
+
+  {{ $tag := .Scratch.Get "tag" }}
+  {{ $author := .Scratch.Get "author" }}
+
+  {{ if $tag }}
+    {{ $regular = where $regular "Params.tags" "intersect" (slice $tag) }}
+  {{ end }}
+  {{ if $author }}
+    {{ $regular = where $regular "Params.authors" "intersect" (slice $author) }}
+  {{ end }}
+
+  {{ if $featured }}
+  <div class="featured-posts">
+    <h2 class="text-center mb-4">Featured Posts</h2>
+    <div class="row">
+      {{ range $featured }}
+      <div class="col-12">
+        <div>{{ .Render "summary" }}</div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+  <hr class="my-5" />
+  {{ end }}
+
   <div class="row">
-    {{ $paginator := .Paginate .Pages }}
+    {{ $paginator := .Paginate $regular }}
     {{ range $paginator.Pages }}
     <div class="col-12">
       <div>{{ .Render "summary" }}</div>
@@ -22,4 +75,36 @@
     {{ partial "pagination.html" . }}
   </div>
 </div>
-{{ end }}
+
+<script>
+  function filterPosts() {
+    const tag = document.getElementById('tag-filter').value;
+    const author = document.getElementById('author-filter').value;
+    let url = '/blog/';
+    const params = new URLSearchParams();
+    if (tag) {
+      params.append('tag', tag);
+    }
+    if (author) {
+      params.append('author', author);
+    }
+    const queryString = params.toString();
+    if (queryString) {
+      url += `?${queryString}`;
+    }
+    window.location.href = url;
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const params = new URLSearchParams(window.location.search);
+    const tag = params.get('tag');
+    const author = params.get('author');
+    if (tag) {
+      document.getElementById('tag-filter').value = tag;
+    }
+    if (author) {
+      document.getElementById('author-filter').value = author;
+    }
+  });
+</script>
+{{ end }}