svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add unfurl cards to reply context (likes, bookmarks, replies, reposts)

Browse Source 
The target URL in likes, bookmarks, replies, and reposts now renders
as a rich OpenGraph card via the unfurl shortcode instead of a bare
link. The raw URL remains below the card for h-cite microformat
compatibility. Results are cached in .cache/unfurl/ for 1 week.
This commit is contained in:
Ricardo
2026-02-20 12:01:55 +01:00
parent 897daca686
commit 9ab4ebb84a
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
_includes/components/reply-context.njk
View File

@@ -1,6 +1,7 @@
{# Reply Context Component #} {# Reply Context Component #}
{# Displays rich context for replies, likes, reposts, and bookmarks #} {# Displays rich context for replies, likes, reposts, and bookmarks #}
{# Uses h-cite microformat for citing external content #} {# Uses h-cite microformat for citing external content #}
{# Includes unfurl card for rich link preview (OpenGraph metadata) #}
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #} {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
{% set replyTo = inReplyTo or in_reply_to %} {% set replyTo = inReplyTo or in_reply_to %}
@@ -9,7 +10,7 @@
{% set bookmarkedUrl = bookmarkOf or bookmark_of %} {% set bookmarkedUrl = bookmarkOf or bookmark_of %}
{% if replyTo or likedUrl or repostedUrl or bookmarkedUrl %} {% if replyTo or likedUrl or repostedUrl or bookmarkedUrl %}
<aside class="reply-context p-4 mb-6 bg-surface-100 dark:bg-surface-800 rounded-lg border-l-4 border-primary-500"> <aside class="reply-context mb-6">
{% if replyTo %} {% if replyTo %}
<div class="u-in-reply-to h-cite"> <div class="u-in-reply-to h-cite">
<p class="text-sm text-surface-500 dark:text-surface-400 mb-2 flex items-center gap-2"> <p class="text-sm text-surface-500 dark:text-surface-400 mb-2 flex items-center gap-2">
@@ -18,7 +19,8 @@
</svg> </svg>
<span>In reply to:</span> <span>In reply to:</span>
</p> </p>
<a class="u-url font-medium text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ replyTo }}"> {% unfurl replyTo %}
<a class="u-url text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ replyTo }}">
{{ replyTo }} {{ replyTo }}
</a> </a>
</div> </div>
@@ -32,7 +34,8 @@
</svg> </svg>
<span>Liked:</span> <span>Liked:</span>
</p> </p>
<a class="u-url font-medium text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ likedUrl }}"> {% unfurl likedUrl %}
<a class="u-url text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ likedUrl }}">
{{ likedUrl }} {{ likedUrl }}
</a> </a>
</div> </div>
@@ -46,7 +49,8 @@
</svg> </svg>
<span>Reposted:</span> <span>Reposted:</span>
</p> </p>
<a class="u-url font-medium text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ repostedUrl }}"> {% unfurl repostedUrl %}
<a class="u-url text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ repostedUrl }}">
{{ repostedUrl }} {{ repostedUrl }}
</a> </a>
</div> </div>
@@ -60,7 +64,8 @@
</svg> </svg>
<span>Bookmarked:</span> <span>Bookmarked:</span>
</p> </p>
<a class="u-url font-medium text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ bookmarkedUrl }}"> {% unfurl bookmarkedUrl %}
<a class="u-url text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ bookmarkedUrl }}">
{{ bookmarkedUrl }} {{ bookmarkedUrl }}
</a> </a>
</div> </div>