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

@@ -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>

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 %}

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">
+  {% include "components/post-type-nav.njk" %}
-    <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>
   <ul class="post-list">
     {% for post in paginatedPosts %}
     {# Detect post type from frontmatter properties #}

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 %}

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 %}

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 %}

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 %}

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 %}

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 %}