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

fix: derive YouTube ID from URL in all listing templates
Build & Deploy / build-and-deploy (push) Successful in 1m49s
Details

Browse Source 
Listing pages (blog, frontpage, likes, bookmarks, reposts, replies,
featured) only checked post.data.youtubeVideoId from frontmatter.
Older posts without that field fell through to unfurl, which cannot
scrape YouTube and returns a text-only fallback — no thumbnail image.

Apply the same URL-derived fallback already used in reply-context.njk:

  {% set _ytId = post.data.youtubeVideoId or (likedUrl | youtubeId) %}

Frontmatter value still takes precedence; youtubeId filter handles
both youtube.com?v= and youtu.be/ formats.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
svemagie
2026-04-11 20:04:40 +02:00
parent 26ab9b82b3
commit fd866418bb
7 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/components/sections/featured-posts.njk
+12 -8
View File
@@ -59,9 +59,10 @@
{{ post.date | dateDisplay }} {{ post.date | dateDisplay }}
</time> </time>
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (likedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{{ likedUrl | unfurlCard | safe }} {{ likedUrl | unfurlCard | safe }}
@@ -98,9 +99,10 @@
<a class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400 hover:underline" href="{{ post.url }}">{{ post.data.title }}</a> <a class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400 hover:underline" href="{{ post.url }}">{{ post.data.title }}</a>
</h3> </h3>
{% endif %} {% endif %}
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (bookmarkedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{{ bookmarkedUrl | unfurlCard | safe }} {{ bookmarkedUrl | unfurlCard | safe }}
@@ -132,9 +134,10 @@
{{ post.date | dateDisplay }} {{ post.date | dateDisplay }}
</time> </time>
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (repostedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{{ repostedUrl | unfurlCard | safe }} {{ repostedUrl | unfurlCard | safe }}
@@ -166,9 +169,10 @@
{{ post.date | dateDisplay }} {{ post.date | dateDisplay }}
</time> </time>
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (replyToUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{{ replyToUrl | unfurlCard | safe }} {{ replyToUrl | unfurlCard | safe }}
_includes/components/sections/recent-posts.njk
+12 -8
View File
@@ -75,9 +75,10 @@
{% endif %} {% endif %}
{% include "components/garden-badge.njk" %} {% include "components/garden-badge.njk" %}
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (likedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{{ likedUrl | unfurlCard | safe }} {{ likedUrl | unfurlCard | safe }}
@@ -126,9 +127,10 @@
<a class="hover:text-amber-800 dark:hover:text-amber-400" href="{{ post.url }}">{{ post.data.title }}</a> <a class="hover:text-amber-800 dark:hover:text-amber-400" href="{{ post.url }}">{{ post.data.title }}</a>
</h3> </h3>
{% endif %} {% endif %}
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (bookmarkedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{{ bookmarkedUrl | unfurlCard | safe }} {{ bookmarkedUrl | unfurlCard | safe }}
@@ -172,9 +174,10 @@
{% endif %} {% endif %}
{% include "components/garden-badge.njk" %} {% include "components/garden-badge.njk" %}
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (repostedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{{ repostedUrl | unfurlCard | safe }} {{ repostedUrl | unfurlCard | safe }}
@@ -218,9 +221,10 @@
{% endif %} {% endif %}
{% include "components/garden-badge.njk" %} {% include "components/garden-badge.njk" %}
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (replyToUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{{ replyToUrl | unfurlCard | safe }} {{ replyToUrl | unfurlCard | safe }}
blog.njk
+12 -8
View File
@@ -83,9 +83,10 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %} {% endif %}
{% include "components/garden-badge.njk" %} {% include "components/garden-badge.njk" %}
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (likedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{% unfurl likedUrl %} {% unfurl likedUrl %}
@@ -136,9 +137,10 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
<a class="hover:text-[#b57614] dark:hover:text-[#d79921]" href="{{ post.url }}">{{ post.data.title }}</a> <a class="hover:text-[#b57614] dark:hover:text-[#d79921]" href="{{ post.url }}">{{ post.data.title }}</a>
</h2> </h2>
{% endif %} {% endif %}
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (bookmarkedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{% unfurl bookmarkedUrl %} {% unfurl bookmarkedUrl %}
@@ -184,9 +186,10 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %} {% endif %}
{% include "components/garden-badge.njk" %} {% include "components/garden-badge.njk" %}
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (repostedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{% unfurl repostedUrl %} {% unfurl repostedUrl %}
@@ -232,9 +235,10 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %} {% endif %}
{% include "components/garden-badge.njk" %} {% include "components/garden-badge.njk" %}
</div> </div>
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (replyToUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{% unfurl replyToUrl %} {% unfurl replyToUrl %}
bookmarks.njk
+3 -2
View File
@@ -55,9 +55,10 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #} {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
{% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %} {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
{% if bookmarkedUrl %} {% if bookmarkedUrl %}
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (bookmarkedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{% unfurl bookmarkedUrl %} {% unfurl bookmarkedUrl %}
likes.njk
+3 -2
View File
@@ -53,9 +53,10 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #} {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
{% set likedUrl = post.data.likeOf or post.data.like_of %} {% set likedUrl = post.data.likeOf or post.data.like_of %}
{% if likedUrl %} {% if likedUrl %}
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (likedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{% unfurl likedUrl %} {% unfurl likedUrl %}
replies.njk
+3 -2
View File
@@ -59,9 +59,10 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
{% set replyTo = post.data.inReplyTo or post.data.in_reply_to %} {% set replyTo = post.data.inReplyTo or post.data.in_reply_to %}
{% if replyTo %} {% if replyTo %}
{% set protocol = replyTo | protocolType %} {% set protocol = replyTo | protocolType %}
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (replyTo | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{% unfurl replyTo %} {% unfurl replyTo %}
reposts.njk
+3 -2
View File
@@ -58,9 +58,10 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #} {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
{% set repostedUrl = post.data.repostOf or post.data.repost_of %} {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
{% if repostedUrl %} {% if repostedUrl %}
{% if post.data.youtubeVideoId %} {% set _ytId = post.data.youtubeVideoId or (repostedUrl | youtubeId) %}
{% if _ytId %}
<div class="video-embed eleventy-plugin-youtube-embed not-prose my-4"> <div class="video-embed eleventy-plugin-youtube-embed not-prose my-4">
<lite-youtube videoid="{{ post.data.youtubeVideoId }}" style="background-image: url('https://i.ytimg.com/vi/{{ post.data.youtubeVideoId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube> <lite-youtube videoid="{{ _ytId }}" style="background-image: url('https://i.ytimg.com/vi/{{ _ytId }}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube>
</div> </div>
{% else %} {% else %}
{% unfurl repostedUrl %} {% unfurl repostedUrl %}