fix(home): apply recent-posts redesign in fallback layout
This commit is contained in:
svemagie
+33
-14
@@ -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 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>
|
||||
<p class="p-summary text-surface-700 dark:text-surface-300 mt-2 mb-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 }}">
|
||||
|
||||
<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 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 postTitle %}
|
||||
<a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Read more →</a>
|
||||
{% else %}
|
||||
<a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
</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>
|
||||
|
||||
@@ -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 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>
|
||||
<p class="p-summary text-surface-700 dark:text-surface-300 mt-2 mb-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 }}">
|
||||
|
||||
<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 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 postTitle %}
|
||||
<a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Read more →</a>
|
||||
{% else %}
|
||||
<a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user