feat: add consistent styling to all post type pages

- Add withSidebar, h-feed wrapper, pagination to all post type pages
- Add total count display
- Add post-card class for consistent styling
- Add category display
- Keep type-specific icons (heart for likes, reply arrow, repost icon)
- Keep photo gallery layout for photos page

All post type pages now match the articles/notes pattern.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

photos.njk

@@ -1,42 +1,97 @@
 ---
 layout: layouts/base.njk
 title: Photos
-permalink: /photos/
+withSidebar: true
+pagination:
+  data: collections.photos
+  size: 20
+  alias: paginatedPhotos
+permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
 ---
-<div class="page-header mb-6 sm:mb-8">
+<div class="h-feed">
   <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Photos</h1>
-  <p class="text-surface-600 dark:text-surface-400">Photo posts and images.</p>
-</div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Photo posts and images.
+    <span class="text-sm">({{ collections.photos.length }} total)</span>
+  </p>
 
-{% if collections.photos.length > 0 %}
-<ul class="post-list photo-list">
-  {% for post in collections.photos %}
-  <li class="h-entry">
-    <div class="post-meta">
-      <time class="dt-published" datetime="{{ post.date.toISOString() }}">
-        {{ post.date | dateDisplay }}
-      </time>
-    </div>
-    {# Render photo(s) from frontmatter - use eleventy:ignore to skip image transform #}
-    {% if post.data.photo %}
-      <div class="photo-gallery">
-        {% for img in post.data.photo %}
-          {% set photoUrl = img.url %}
-          {% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
-            {% set photoUrl = '/' + photoUrl %}
+  {% if paginatedPhotos.length > 0 %}
+  <ul class="post-list photo-list">
+    {% for post in paginatedPhotos %}
+    <li class="h-entry post-card">
+      <div class="post-meta">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">
+          {{ post.date | dateDisplay }}
+        </time>
+        {% if post.data.category %}
+        <span class="post-categories">
+          {% if post.data.category is string %}
+          <span class="p-category">{{ post.data.category }}</span>
+          {% else %}
+          {% for cat in post.data.category %}
+          <span class="p-category">{{ cat }}</span>
+          {% endfor %}
           {% endif %}
-          <a href="{{ post.url }}" class="photo-link">
-            <img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo" loading="lazy" eleventy:ignore>
-          </a>
-        {% endfor %}
+        </span>
+        {% endif %}
       </div>
-    {% endif %}
-    {% if post.templateContent %}
-    <div class="e-content photo-caption">{{ post.templateContent | safe }}</div>
-    {% endif %}
-  </li>
-  {% endfor %}
-</ul>
-{% else %}
-<p>No photos yet.</p>
-{% endif %}
+      {# Render photo(s) from frontmatter - use eleventy:ignore to skip image transform #}
+      {% if post.data.photo %}
+        <div class="photo-gallery mt-3">
+          {% for img in post.data.photo %}
+            {% set photoUrl = img.url %}
+            {% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
+              {% set photoUrl = '/' + photoUrl %}
+            {% endif %}
+            <a href="{{ post.url }}" class="photo-link">
+              <img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo" loading="lazy" eleventy:ignore>
+            </a>
+          {% endfor %}
+        </div>
+      {% endif %}
+      {% if post.templateContent %}
+      <div class="e-content photo-caption prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+      <a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Photos pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  <p class="text-surface-600 dark:text-surface-400">No photos yet.</p>
+  {% endif %}
+</div>