From 0279cfa97771c7def383712b45e2b49c206b54eb Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Tue, 24 Feb 2026 15:35:22 +0100
Subject: [PATCH] feat: add color-coded left borders to post cards by type

Each post card in the recent-posts section now has a 3px left border
colored by post type: red for likes, amber for bookmarks, green for
reposts, blue for replies, purple for photos, neutral for articles/notes.
---
 .../components/sections/recent-posts.njk      | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/_includes/components/sections/recent-posts.njk b/_includes/components/sections/recent-posts.njk
index 5bee174..c5c1bef 100644
--- a/_includes/components/sections/recent-posts.njk
+++ b/_includes/components/sections/recent-posts.njk
@@ -16,8 +16,6 @@
 
   <div class="space-y-4">
     {% for post in collections.posts | head(maxItems) %}
-    <article class="h-entry p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
-
       {# 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 %}
@@ -25,6 +23,24 @@
       {% 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 #}
+      {% set borderClass = "" %}
+      {% if likedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
+      {% elif bookmarkedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+      {% elif repostedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
+      {% elif replyToUrl %}
+        {% set borderClass = "border-l-[3px] border-l-primary-400 dark:border-l-primary-500" %}
+      {% elif hasPhotos %}
+        {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+      {% else %}
+        {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+      {% endif %}
+
+    <article class="h-entry p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors {{ borderClass }}">
+
       {% if likedUrl %}
       {# ── Like card ── #}
       <div class="flex items-start gap-3">