feat: add /featured/ collection page and "View all" link

- New featured.njk page with pagination, type-aware rendering
- "View all N featured posts" link appears when count exceeds maxItems

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d

_includes/components/sections/featured-posts.njk

@@ -247,5 +247,13 @@
     </article>
     {% endfor %}
   </div>
+
+  {% if collections.featuredPosts.length > maxItems %}
+  <div class="mt-4 text-center">
+    <a href="/featured/" class="inline-flex items-center gap-1 text-sm text-accent-600 dark:text-accent-400 hover:underline font-medium">
+      View all {{ collections.featuredPosts.length }} featured posts &rarr;
+    </a>
+  </div>
+  {% endif %}
 </section>
 {% endif %}

featured.njk

@@ -0,0 +1,186 @@
+---
+layout: layouts/base.njk
+title: Featured
+withSidebar: true
+pagination:
+  data: collections.featuredPosts
+  size: 20
+  alias: paginatedFeatured
+  generatePageOnEmptyData: true
+permalink: "featured/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 flex items-center gap-2">
+      <svg class="w-6 h-6 text-amber-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+      </svg>
+      Featured
+    </h1>
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Curated posts pinned as featured.
+    <span class="text-sm">({{ collections.featuredPosts.length }} total)</span>
+  </p>
+
+  {% if paginatedFeatured.length > 0 %}
+  <ul class="post-list">
+    {% for post in paginatedFeatured %}
+      {# Detect post type from frontmatter properties #}
+      {% set likedUrl = post.data.likeOf or post.data.like_of %}
+      {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+      {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
+      {% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
+      {% set hasPhotos = post.data.photo and post.data.photo.length %}
+
+      {# Determine border color by post type #}
+      {% if likedUrl %}
+        {% set borderClass = "border-l-red-400 dark:border-l-red-500" %}
+      {% elif bookmarkedUrl %}
+        {% set borderClass = "border-l-amber-400 dark:border-l-amber-500" %}
+      {% elif repostedUrl %}
+        {% set borderClass = "border-l-green-400 dark:border-l-green-500" %}
+      {% elif replyToUrl %}
+        {% set borderClass = "border-l-sky-400 dark:border-l-sky-500" %}
+      {% elif hasPhotos %}
+        {% set borderClass = "border-l-purple-400 dark:border-l-purple-500" %}
+      {% else %}
+        {% set borderClass = "border-l-amber-400 dark:border-l-amber-500" %}
+      {% endif %}
+
+    <li class="h-entry post-card border-l-[3px] {{ borderClass }}">
+
+      {% if likedUrl %}
+      {# ── Like ── #}
+      <div class="post-header">
+        <span class="text-xs font-medium text-red-600 dark:text-red-400">Liked</span>
+        <a class="u-url ml-2" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        </a>
+      </div>
+      <a class="u-like-of text-sm text-surface-600 dark:text-surface-400 hover:underline break-all mt-2 inline-block" href="{{ likedUrl }}">{{ likedUrl }}</a>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+
+      {% elif bookmarkedUrl %}
+      {# ── Bookmark ── #}
+      <div class="post-header">
+        <span class="text-xs font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
+        <time class="dt-published text-sm text-surface-500 dark:text-surface-400 ml-2" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+      </div>
+      {% if post.data.title %}
+      <h2 class="p-name text-lg font-semibold mt-2">
+        <a class="u-url text-surface-900 dark:text-surface-100 hover:underline" href="{{ post.url }}">{{ post.data.title }}</a>
+      </h2>
+      {% endif %}
+      <a class="u-bookmark-of text-sm text-surface-600 dark:text-surface-400 hover:underline break-all mt-1 inline-block" href="{{ bookmarkedUrl }}">{{ bookmarkedUrl }}</a>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+
+      {% elif repostedUrl %}
+      {# ── Repost ── #}
+      <div class="post-header">
+        <span class="text-xs font-medium text-green-600 dark:text-green-400">Reposted</span>
+        <a class="u-url ml-2" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        </a>
+      </div>
+      <a class="u-repost-of text-sm text-surface-600 dark:text-surface-400 hover:underline break-all mt-2 inline-block" href="{{ repostedUrl }}">{{ repostedUrl }}</a>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+
+      {% elif replyToUrl %}
+      {# ── Reply ── #}
+      <div class="post-header">
+        <span class="text-xs font-medium text-sky-600 dark:text-sky-400">In reply to</span>
+        <a class="u-url ml-2" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        </a>
+      </div>
+      <a class="u-in-reply-to text-sm text-surface-600 dark:text-surface-400 hover:underline break-all mt-2 inline-block" href="{{ replyToUrl }}">{{ replyToUrl }}</a>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+
+      {% elif post.data.title %}
+      {# ── Article/Page ── #}
+      <div class="post-header">
+        <h2 class="text-xl font-semibold mb-1 flex-1">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:underline" href="{{ post.url }}">{{ post.data.title }}</a>
+        </h2>
+      </div>
+      <div class="post-meta mt-2">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded text-xs ml-2">{{ post.data.postType }}</span>
+        {% endif %}
+      </div>
+      {% if post.templateContent %}
+      <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">{{ post.templateContent | striptags | truncate(250) }}</p>
+      {% endif %}
+      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">Read more &rarr;</a>
+
+      {% else %}
+      {# ── Note ── #}
+      <div class="post-header">
+        <a class="u-url" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400 font-medium" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        </a>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded text-xs ml-2">{{ post.data.postType }}</span>
+        {% endif %}
+      </div>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+      <div class="post-footer mt-3">
+        <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
+      </div>
+      {% endif %}
+
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Featured posts 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 %}
+  {% set postType = "featured" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>