indiekit-blog/featured.njk

---
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-rose-400 dark:border-l-rose-500" %}
      {% elif bookmarkedUrl %}
        {% set borderClass = "border-l-amber-400 dark:border-l-amber-500" %}
      {% elif repostedUrl %}
        {% set borderClass = "border-l-rose-400 dark:border-l-rose-500" %}
      {% elif replyToUrl %}
        {% set borderClass = "border-l-rose-400 dark:border-l-rose-500" %}
      {% elif hasPhotos %}
        {% set borderClass = "border-l-purple-400 dark:border-l-purple-500" %}
      {% else %}
        {% set borderClass = "border-l-surface-300 dark:border-l-surface-600" %}
      {% 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-rose-600 dark:text-rose-400">Liked</span>
        <a class="u-url ml-2" href="{{ post.url }}">
          <time class="dt-published text-sm text-surface-600 dark:text-surface-400 font-mono" 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-600 dark:text-surface-400 ml-2 font-mono" 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-rose-600 dark:text-rose-400">Reposted</span>
        <a class="u-url ml-2" href="{{ post.url }}">
          <time class="dt-published text-sm text-surface-600 dark:text-surface-400 font-mono" 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-rose-600 dark:text-rose-400">In reply to</span>
        <a class="u-url ml-2" href="{{ post.url }}">
          <time class="dt-published text-sm text-surface-600 dark:text-surface-400 font-mono" 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 font-mono text-sm" 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-600 dark:text-surface-400 font-medium font-mono" 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" aria-label="Permalink: {{ post.data.title or ('Post from ' + (post.date | dateDisplay)) }}">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" aria-disabled="true">
        <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" aria-disabled="true">
        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>