From 54e797cf4ebb69acbbc8473b720ac991e7a87d0c Mon Sep 17 00:00:00 2001
From: svemagie <869694+svemagie@users.noreply.github.com>
Date: Sun, 8 Mar 2026 17:59:59 +0100
Subject: [PATCH] fix(home): apply recent-posts redesign in fallback layout

---
 _includes/layouts/home.njk       | 59 +++++++++++++++++++++-----------
 theme/_includes/layouts/home.njk | 59 +++++++++++++++++++++-----------
 2 files changed, 78 insertions(+), 40 deletions(-)

diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
index 52b25b9..65742f4 100644
--- a/_includes/layouts/home.njk
+++ b/_includes/layouts/home.njk
@@ -72,34 +72,53 @@ withSidebar: true
 {% if collections.posts and collections.posts.length %}
 <section class="mb-8 sm:mb-12">
   <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Recent Posts</h2>
-  <div class="space-y-4">
+  <ul class="post-list">
     {% for post in collections.posts | head(10) %}
-      <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors shadow-sm">
-        {% set postTitle = ((post.data.title or post.data.name or "") | trim) %}
+      {% 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 borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+      {% 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-sky-400 dark:border-l-sky-500" %}
+      {% endif %}
+
+      {% set postTitle = ((post.data.title or post.data.name or "") | trim) %}
+      <li class="h-entry post-card {{ borderClass }}">
         {% if postTitle %}
-        <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
-          <a href="{{ post.url }}" class="hover:text-accent-600 dark:hover:text-accent-400">
+        <h3 class="text-xl font-semibold mb-1">
+          <a href="{{ post.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
             {{ postTitle }}
           </a>
         </h3>
         {% endif %}
-      {% if post.data.summary %}
-      <p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">{{ post.data.summary }}</p>
-      {% endif %}
-      <div class="flex items-center gap-3 text-xs text-surface-600 dark:text-surface-400">
-        <time class="font-mono" datetime="{{ post.data.published or post.date }}">
-          {{ (post.data.published or post.date) | date("MMM d, yyyy") }}
-        </time>
-          {% if not postTitle %}
-          <a href="{{ post.url }}" class="text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
-          {% endif %}
-        {% if post.data.postType %}
-        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded-full">{{ post.data.postType }}</span>
+
+        {% if post.data.summary %}
+        <p class="p-summary text-surface-700 dark:text-surface-300 mt-2 mb-2">
+          {{ post.data.summary }}
+        </p>
         {% endif %}
-      </div>
-    </article>
+
+        <div class="post-meta">
+          <time class="dt-published font-mono text-sm" datetime="{{ post.data.published or post.date }}">
+            {{ (post.data.published or post.date) | date("MMM d, yyyy") }}
+          </time>
+          {% if postTitle %}
+          <a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Read more &rarr;</a>
+          {% else %}
+          <a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
+          {% endif %}
+        </div>
+      </li>
     {% endfor %}
-  </div>
+  </ul>
   <a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
     View all posts
     <svg class="w-3 h-3" 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"/></svg>
diff --git a/theme/_includes/layouts/home.njk b/theme/_includes/layouts/home.njk
index ec0b06b..b66a90f 100644
--- a/theme/_includes/layouts/home.njk
+++ b/theme/_includes/layouts/home.njk
@@ -70,34 +70,53 @@ withSidebar: true
 {% if collections.posts and collections.posts.length %}
 <section class="mb-8 sm:mb-12">
   <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Recent Posts</h2>
-  <div class="space-y-4">
+  <ul class="post-list">
     {% for post in collections.posts | head(10) %}
-      <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
-        {% set postTitle = ((post.data.title or post.data.name or "") | trim) %}
+      {% 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 borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+      {% 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-sky-400 dark:border-l-sky-500" %}
+      {% endif %}
+
+      {% set postTitle = ((post.data.title or post.data.name or "") | trim) %}
+      <li class="h-entry post-card {{ borderClass }}">
         {% if postTitle %}
-        <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
-          <a href="{{ post.url }}" class="hover:text-accent-600 dark:hover:text-accent-400">
+        <h3 class="text-xl font-semibold mb-1">
+          <a href="{{ post.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
             {{ postTitle }}
           </a>
         </h3>
         {% endif %}
-      {% if post.data.summary %}
-      <p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">{{ post.data.summary }}</p>
-      {% endif %}
-      <div class="flex items-center gap-3 text-xs text-surface-500">
-        <time datetime="{{ post.data.published or post.date }}">
-          {{ (post.data.published or post.date) | date("MMM d, yyyy") }}
-        </time>
-          {% if not postTitle %}
-          <a href="{{ post.url }}" class="text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
-          {% endif %}
-        {% if post.data.postType %}
-        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded">{{ post.data.postType }}</span>
+
+        {% if post.data.summary %}
+        <p class="p-summary text-surface-700 dark:text-surface-300 mt-2 mb-2">
+          {{ post.data.summary }}
+        </p>
         {% endif %}
-      </div>
-    </article>
+
+        <div class="post-meta">
+          <time class="dt-published font-mono text-sm" datetime="{{ post.data.published or post.date }}">
+            {{ (post.data.published or post.date) | date("MMM d, yyyy") }}
+          </time>
+          {% if postTitle %}
+          <a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Read more &rarr;</a>
+          {% else %}
+          <a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
+          {% endif %}
+        </div>
+      </li>
     {% endfor %}
-  </div>
+  </ul>
   <a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
     View all posts
     <svg class="w-3 h-3" 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"/></svg>