indiekit-blog/_includes/components/post-navigation.njk

{# Post Navigation - Previous/Next (image-first, inspired by zachleat.com) #}
{% set _prevPost = collections.posts | previousInCollection(page) %}
{% set _nextPost = collections.posts | nextInCollection(page) %}

{% if _prevPost or _nextPost %}
<nav class="post-navigation mt-8 pt-6 border-t border-surface-200 dark:border-surface-700" aria-label="Post navigation">
  <div class="grid grid-cols-2 gap-3 sm:gap-4">

    {# ── Previous Post ── #}
    {% if _prevPost %}
    {% set _prevOgSlug = _prevPost.url | ogSlug %}
    {% set _prevHasOg = _prevOgSlug | hasOgImage %}
    {% set _prevTitle = _prevPost.data.title or _prevPost.data.name %}

    {# Derive display text for non-article post types #}
    {% set _likedUrl = _prevPost.data.likeOf or _prevPost.data.like_of %}
    {% set _bookmarkedUrl = _prevPost.data.bookmarkOf or _prevPost.data.bookmark_of %}
    {% set _repostedUrl = _prevPost.data.repostOf or _prevPost.data.repost_of %}
    {% set _replyToUrl = _prevPost.data.inReplyTo or _prevPost.data.in_reply_to %}
    {% if not _prevTitle %}
      {% if _likedUrl %}
        {% set _prevTitle = "Liked " + (_likedUrl | replace("https://", "") | truncate(40)) %}
      {% elif _bookmarkedUrl %}
        {% set _prevTitle = "Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(35)) %}
      {% elif _repostedUrl %}
        {% set _prevTitle = "Reposted " + (_repostedUrl | replace("https://", "") | truncate(35)) %}
      {% elif _replyToUrl %}
        {% set _prevTitle = "Reply to " + (_replyToUrl | replace("https://", "") | truncate(35)) %}
      {% else %}
        {% set _prevTitle = (_prevPost.templateContent | striptags | truncate(60)) or "Note" %}
      {% endif %}
    {% endif %}

    <a href="{{ _prevPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors shadow-sm">
      {% if _prevHasOg %}
      <img src="/og/{{ _prevOgSlug }}.png" alt="{{ _prevTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore>
      <span class="absolute top-2 left-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded">
        &larr; Previous
      </span>
      {% else %}
      <div class="p-4 sm:p-5">
        <span class="text-[10px] sm:text-xs font-semibold uppercase tracking-wide text-surface-600 dark:text-surface-400 block mb-2">&larr; Previous</span>
        <span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors">
          {{ _prevTitle }}
        </span>
        <time class="text-xs text-surface-600 dark:text-surface-400 mt-1 block font-mono" datetime="{{ _prevPost.date | isoDate }}">{{ _prevPost.date | dateDisplay }}</time>
      </div>
      {% endif %}
    </a>

    {% else %}
    <div class="rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200/50 dark:border-surface-700/50" aria-hidden="true"></div>
    {% endif %}

    {# ── Next Post ── #}
    {% if _nextPost %}
    {% set _nextOgSlug = _nextPost.url | ogSlug %}
    {% set _nextHasOg = _nextOgSlug | hasOgImage %}
    {% set _nextTitle = _nextPost.data.title or _nextPost.data.name %}

    {# Derive display text for non-article post types #}
    {% set _likedUrl = _nextPost.data.likeOf or _nextPost.data.like_of %}
    {% set _bookmarkedUrl = _nextPost.data.bookmarkOf or _nextPost.data.bookmark_of %}
    {% set _repostedUrl = _nextPost.data.repostOf or _nextPost.data.repost_of %}
    {% set _replyToUrl = _nextPost.data.inReplyTo or _nextPost.data.in_reply_to %}
    {% if not _nextTitle %}
      {% if _likedUrl %}
        {% set _nextTitle = "Liked " + (_likedUrl | replace("https://", "") | truncate(40)) %}
      {% elif _bookmarkedUrl %}
        {% set _nextTitle = "Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(35)) %}
      {% elif _repostedUrl %}
        {% set _nextTitle = "Reposted " + (_repostedUrl | replace("https://", "") | truncate(35)) %}
      {% elif _replyToUrl %}
        {% set _nextTitle = "Reply to " + (_replyToUrl | replace("https://", "") | truncate(35)) %}
      {% else %}
        {% set _nextTitle = (_nextPost.templateContent | striptags | truncate(60)) or "Note" %}
      {% endif %}
    {% endif %}

    <a href="{{ _nextPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors shadow-sm">
      {% if _nextHasOg %}
      <img src="/og/{{ _nextOgSlug }}.png" alt="{{ _nextTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore>
      <span class="absolute top-2 right-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded">
        Next &rarr;
      </span>
      {% else %}
      <div class="p-4 sm:p-5 text-right">
        <span class="text-[10px] sm:text-xs font-semibold uppercase tracking-wide text-surface-600 dark:text-surface-400 block mb-2">Next &rarr;</span>
        <span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors">
          {{ _nextTitle }}
        </span>
        <time class="text-xs text-surface-600 dark:text-surface-400 mt-1 block font-mono" datetime="{{ _nextPost.date | isoDate }}">{{ _nextPost.date | dateDisplay }}</time>
      </div>
      {% endif %}
    </a>

    {% else %}
    <div class="rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200/50 dark:border-surface-700/50" aria-hidden="true"></div>
    {% endif %}

  </div>
</nav>
{% endif %}