svemagie.net/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix(home): apply recent-posts redesign in fallback layout

Browse Source
This commit is contained in:
svemagie
2026-03-08 17:59:59 +01:00
parent 797992c68c
commit 54e797cf4e
2 changed files with 78 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/layouts/home.njk
+39 -20
View File
@@ -72,34 +72,53 @@ withSidebar: true
{% if collections.posts and collections.posts.length %} {% if collections.posts and collections.posts.length %}
<section class="mb-8 sm:mb-12"> <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> <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) %} {% 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 likedUrl = post.data.likeOf or post.data.like_of %}
{% set postTitle = ((post.data.title or post.data.name or "") | trim) %} {% 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 %} {% if postTitle %}
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1"> <h3 class="text-xl font-semibold mb-1">
<a href="{{ post.url }}" class="hover:text-accent-600 dark:hover:text-accent-400"> <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 }} {{ postTitle }}
</a> </a>
</h3> </h3>
{% endif %} {% 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> {% if post.data.summary %}
{% endif %} <p class="p-summary text-surface-700 dark:text-surface-300 mt-2 mb-2">
<div class="flex items-center gap-3 text-xs text-surface-600 dark:text-surface-400"> {{ post.data.summary }}
<time class="font-mono" datetime="{{ post.data.published or post.date }}"> </p>
{{ (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>
{% endif %} {% 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 %} {% 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"> <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 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> <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>
theme/_includes/layouts/home.njk
+39 -20
View File
@@ -70,34 +70,53 @@ withSidebar: true
{% if collections.posts and collections.posts.length %} {% if collections.posts and collections.posts.length %}
<section class="mb-8 sm:mb-12"> <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> <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) %} {% 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 likedUrl = post.data.likeOf or post.data.like_of %}
{% set postTitle = ((post.data.title or post.data.name or "") | trim) %} {% 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 %} {% if postTitle %}
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1"> <h3 class="text-xl font-semibold mb-1">
<a href="{{ post.url }}" class="hover:text-accent-600 dark:hover:text-accent-400"> <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 }} {{ postTitle }}
</a> </a>
</h3> </h3>
{% endif %} {% 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> {% if post.data.summary %}
{% endif %} <p class="p-summary text-surface-700 dark:text-surface-300 mt-2 mb-2">
<div class="flex items-center gap-3 text-xs text-surface-500"> {{ post.data.summary }}
<time datetime="{{ post.data.published or post.date }}"> </p>
{{ (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>
{% endif %} {% 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 %} {% 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"> <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 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> <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>