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>
This commit is contained in:
Ricardo
223
blog.njk
223
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 →
|
||||
</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 }}">
|
||||
|
||||
Reference in New Issue
Block a user