From 1a1014a60d2ae179f6fa44c15098dec9e7de12d2 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Thu, 5 Feb 2026 09:35:59 +0100
Subject: [PATCH] feat: differentiate post types in blog feed with icons and
 labels

Likes, bookmarks, reposts, replies, and photos now render with
distinct type icons, colored labels, target URLs, and proper
microformat classes (u-like-of, u-bookmark-of, etc.) instead of
all appearing as generic notes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 blog.njk | 223 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 220 insertions(+), 3 deletions(-)

diff --git a/blog.njk b/blog.njk
index ead51b1..9ce934b 100644
--- a/blog.njk
+++ b/blog.njk
@@ -19,8 +19,225 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
   <ul class="post-list">
     {% for post in paginatedPosts %}
     <li class="h-entry post-card">
-      {# Article with title #}
-      {% if post.data.title %}
+      {# 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 %}
+
+      {% if likedUrl %}
+      {# ── Like card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-red-600 dark:text-red-400">Liked</span>
+            <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 %}
+            </span>
+            {% endif %}
+          </div>
+          <p class="mt-2">
+            <a class="u-like-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ likedUrl }}">
+              {{ likedUrl }}
+            </a>
+          </p>
+          {% if post.templateContent %}
+          <div class="e-content 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>
+        </div>
+      </div>
+
+      {% elif bookmarkedUrl %}
+      {# ── Bookmark card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
+            <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 %}
+            </span>
+            {% endif %}
+          </div>
+          {% if post.data.title %}
+          <h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mt-2">
+            <a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
+          </h2>
+          {% endif %}
+          <p class="mt-2 text-sm">
+            <a class="u-bookmark-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ bookmarkedUrl }}">
+              {{ bookmarkedUrl }}
+            </a>
+          </p>
+          {% if post.templateContent %}
+          <div class="e-content 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>
+        </div>
+      </div>
+
+      {% elif repostedUrl %}
+      {# ── Repost card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-green-600 dark:text-green-400">Reposted</span>
+            <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 %}
+            </span>
+            {% endif %}
+          </div>
+          <p class="mt-2 text-sm">
+            <a class="u-repost-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ repostedUrl }}">
+              {{ repostedUrl }}
+            </a>
+          </p>
+          {% if post.templateContent %}
+          <div class="e-content 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>
+        </div>
+      </div>
+
+      {% elif replyToUrl %}
+      {# ── Reply card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-primary-600 dark:text-primary-400">In reply to</span>
+            <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 %}
+            </span>
+            {% endif %}
+          </div>
+          <p class="mt-2 text-sm">
+            <a class="u-in-reply-to text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ replyToUrl }}">
+              {{ replyToUrl }}
+            </a>
+          </p>
+          <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          <a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif hasPhotos %}
+      {# ── Photo card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-purple-600 dark:text-purple-400">Photo</span>
+            <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 %}
+            </span>
+            {% endif %}
+          </div>
+          <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>
+          {% 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>
+        </div>
+      </div>
+
+      {% elif post.data.title %}
+      {# ── Article card (unchanged) ── #}
       <div class="post-header">
         <h2 class="text-xl font-semibold mb-1">
           <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
@@ -51,8 +268,8 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
         Read more &rarr;
       </a>
 
-      {# Note without title #}
       {% else %}
+      {# ── Note card (unchanged) ── #}
       <div class="post-header">
         <a class="u-url" href="{{ post.url }}">
           <time class="dt-published text-sm text-primary-600 dark:text-primary-400 font-medium" datetime="{{ post.date | isoDate }}">