From 0916b1e691b52d4f6eb88d015858d2ba19734486 Mon Sep 17 00:00:00 2001
From: svemagie <869694+svemagie@users.noreply.github.com>
Date: Mon, 20 Apr 2026 19:00:21 +0200
Subject: [PATCH] Add post-type filter nav to all section pages

Extracted blog.njk's filter bubbles into a reusable
_includes/components/post-type-nav.njk component with active-state
highlighting, then included it in articles, notes, photos, bookmarks,
likes, reposts, and replies pages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 _includes/components/post-type-nav.njk | 9 +++++++++
 articles.njk                           | 3 +++
 blog.njk                               | 8 +-------
 bookmarks.njk                          | 3 +++
 likes.njk                              | 3 +++
 notes.njk                              | 3 +++
 photos.njk                             | 3 +++
 replies.njk                            | 3 +++
 reposts.njk                            | 3 +++
 9 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 _includes/components/post-type-nav.njk

diff --git a/_includes/components/post-type-nav.njk b/_includes/components/post-type-nav.njk
new file mode 100644
index 0000000..c5b46e3
--- /dev/null
+++ b/_includes/components/post-type-nav.njk
@@ -0,0 +1,9 @@
+<nav class="flex flex-wrap gap-2 mb-6" aria-label="Filter by post type">
+  {% set allActive = not activePostType or activePostType == "all" %}
+  <a href="/blog/" class="px-3 py-1.5 text-sm font-medium rounded-full transition-colors {% if allActive %}bg-accent-600 text-white dark:bg-accent-700{% else %}bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200 dark:border-surface-700{% endif %}">All Posts <span class="opacity-75">({{ collections.listedPosts.length }})</span></a>
+  {% for pt in enabledPostTypes %}
+  {% set collName = pt.label | lower %}
+  {% set isActive = activePostType and (pt.label | lower) == activePostType %}
+  <a href="{{ pt.path }}" class="px-3 py-1.5 text-sm font-medium rounded-full transition-colors {% if isActive %}bg-accent-600 text-white dark:bg-accent-700{% else %}bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200 dark:border-surface-700{% endif %}">{{ pt.label }}{% if collections[collName] %} <span class="opacity-75">({{ collections[collName].length }})</span>{% endif %}</a>
+  {% endfor %}
+</nav>
diff --git a/articles.njk b/articles.njk
index 8a8396d..20f1b1d 100644
--- a/articles.njk
+++ b/articles.njk
@@ -22,6 +22,9 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
     <span class="text-sm">({{ collections.articles.length }} total)</span>
   </p>
 
+  {% set activePostType = "articles" %}
+  {% include "components/post-type-nav.njk" %}
+
   {% if paginatedArticles.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedArticles %}
diff --git a/blog.njk b/blog.njk
index 21b4acb..ef8733a 100644
--- a/blog.njk
+++ b/blog.njk
@@ -22,13 +22,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
   </p>
 
   {% if paginatedPosts.length > 0 %}
-  <nav class="flex flex-wrap gap-2 mb-6" aria-label="Filter by post type">
-    <a href="/blog/" class="px-3 py-1.5 text-sm font-medium rounded-full bg-accent-600 text-white dark:bg-accent-700">All Posts <span class="opacity-75">({{ collections.listedPosts.length }})</span></a>
-    {% for pt in enabledPostTypes %}
-    {% set collName = pt.label | lower %}
-    <a href="{{ pt.path }}" class="px-3 py-1.5 text-sm font-medium rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200 dark:border-surface-700 transition-colors">{{ pt.label }}{% if collections[collName] %} <span class="text-surface-600 dark:text-surface-400">({{ collections[collName].length }})</span>{% endif %}</a>
-    {% endfor %}
-  </nav>
+  {% include "components/post-type-nav.njk" %}
   <ul class="post-list">
     {% for post in paginatedPosts %}
     {# Detect post type from frontmatter properties #}
diff --git a/bookmarks.njk b/bookmarks.njk
index 81c9261..c33e422 100644
--- a/bookmarks.njk
+++ b/bookmarks.njk
@@ -22,6 +22,9 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
     <span class="text-sm">({{ collections.bookmarks.length }} total)</span>
   </p>
 
+  {% set activePostType = "bookmarks" %}
+  {% include "components/post-type-nav.njk" %}
+
   {% if paginatedBookmarks.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedBookmarks %}
diff --git a/likes.njk b/likes.njk
index 90f6485..dc65db1 100644
--- a/likes.njk
+++ b/likes.njk
@@ -22,6 +22,9 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <span class="text-sm">({{ collections.likes.length }} total)</span>
   </p>
 
+  {% set activePostType = "likes" %}
+  {% include "components/post-type-nav.njk" %}
+
   {% if paginatedLikes.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedLikes %}
diff --git a/notes.njk b/notes.njk
index 74144a0..9fb4cb2 100644
--- a/notes.njk
+++ b/notes.njk
@@ -22,6 +22,9 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <span class="text-sm">({{ collections.listedNotes.length }} total)</span>
   </p>
 
+  {% set activePostType = "notes" %}
+  {% include "components/post-type-nav.njk" %}
+
   {% if paginatedNotes.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedNotes %}
diff --git a/photos.njk b/photos.njk
index f6af5ee..ef0d79f 100644
--- a/photos.njk
+++ b/photos.njk
@@ -22,6 +22,9 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
     <span class="text-sm">({{ collections.photos.length }} total)</span>
   </p>
 
+  {% set activePostType = "photos" %}
+  {% include "components/post-type-nav.njk" %}
+
   {% if paginatedPhotos.length > 0 %}
   <ul class="post-list photo-list">
     {% for post in paginatedPhotos %}
diff --git a/replies.njk b/replies.njk
index 1010d6c..6f5a138 100644
--- a/replies.njk
+++ b/replies.njk
@@ -22,6 +22,9 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
     <span class="text-sm">({{ collections.replies.length }} total)</span>
   </p>
 
+  {% set activePostType = "replies" %}
+  {% include "components/post-type-nav.njk" %}
+
   {% if paginatedReplies.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedReplies %}
diff --git a/reposts.njk b/reposts.njk
index 7b6358c..462e162 100644
--- a/reposts.njk
+++ b/reposts.njk
@@ -22,6 +22,9 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
     <span class="text-sm">({{ collections.reposts.length }} total)</span>
   </p>
 
+  {% set activePostType = "reposts" %}
+  {% include "components/post-type-nav.njk" %}
+
   {% if paginatedReposts.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedReposts %}