giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Activity

feat: add unfurl cards to blog page and homepage recent posts

Browse Source 
Use two-strategy approach to work around async shortcode limitation
in deeply nested Nunjucks includes:

- blog.njk: async {% unfurl %} shortcode (top-level, works fine)
- recent-posts.njk: sync {{ url | unfurlCard | safe }} filter
  (reads from pre-populated disk cache)

eleventy.before hook scans content files and pre-fetches all
interaction URLs before templates render, ensuring the sync filter
always has data — even on first build.
This commit is contained in:
Ricardo
2026-02-20 16:10:25 +01:00
parent ec02afb611
commit 36f17d1a1f
4 changed files with 127 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
_includes/components/sections/recent-posts.njk
View File

@@ -40,11 +40,10 @@
{{ post.date | dateDisplay }}
</time>
</div>
<p class="mt-1">
<a class="u-like-of text-sm text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ likedUrl }}">
{{ likedUrl }}
</a>
</p>
{{ likedUrl | unfurlCard | safe }}
<a class="u-like-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ likedUrl }}">
{{ likedUrl }}
</a>
{% if post.templateContent %}
<div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
{{ post.templateContent | safe }}
@@ -74,11 +73,10 @@
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
</h3>
{% endif %}
<p class="mt-1 text-sm">
<a class="u-bookmark-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ bookmarkedUrl }}">
{{ bookmarkedUrl }}
</a>
</p>
{{ bookmarkedUrl | unfurlCard | safe }}
<a class="u-bookmark-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ bookmarkedUrl }}">
{{ bookmarkedUrl }}
</a>
{% if post.templateContent %}
<div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
{{ post.templateContent | safe }}
@@ -103,11 +101,10 @@
{{ post.date | dateDisplay }}
</time>
</div>
<p class="mt-1 text-sm">
<a class="u-repost-of text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ repostedUrl }}">
{{ repostedUrl }}
</a>
</p>
{{ repostedUrl | unfurlCard | safe }}
<a class="u-repost-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ repostedUrl }}">
{{ repostedUrl }}
</a>
{% if post.templateContent %}
<div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
{{ post.templateContent | safe }}
@@ -132,11 +129,10 @@
{{ post.date | dateDisplay }}
</time>
</div>
<p class="mt-1 text-sm">
<a class="u-in-reply-to text-primary-600 dark:text-primary-400 hover:underline break-all" href="{{ replyToUrl }}">
{{ replyToUrl }}
</a>
</p>
{{ replyToUrl | unfurlCard | safe }}
<a class="u-in-reply-to text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ replyToUrl }}">
{{ replyToUrl }}
</a>
{% if post.templateContent %}
<div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
{{ post.templateContent | safe }}