mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
a9b4300d7b
Two bugs fixed: 1. Reply buttons stayed hidden despite owner being detected. The alpine:initialized event fires before the async checkOwner() fetch resolves, so isOwner was always false when the handler ran. Fix: dispatch custom owner:detected event from init() after both owner check and owner replies are loaded. 2. Client-side webmentions not rendering on pages with zero build-time webmentions. createWebmentionsSection() looked for .webmention-form but the <details> element lacked that class, so the insertion point was never found. Fix: add webmention-form class to the details element. Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
225 lines
9.1 KiB
Plaintext
225 lines
9.1 KiB
Plaintext
{# Webmentions Component #}
|
|
{# Displays likes, reposts, and replies for a post #}
|
|
{# Also checks legacy URLs from micro.blog and old blog for historical webmentions #}
|
|
{# Client-side JS supplements build-time data with real-time fetches #}
|
|
|
|
{% set mentions = webmentions | webmentionsForUrl(page.url, urlAliases, conversationMentions) %}
|
|
{% set absoluteUrl = site.url + page.url %}
|
|
{% set buildTimestamp = "" | timestamp %}
|
|
|
|
{# Data container for client-side JS to fetch new webmentions #}
|
|
<div data-webmentions
|
|
data-target="{{ absoluteUrl }}"
|
|
data-domain="{{ site.webmentions.domain }}"
|
|
data-buildtime="{{ buildTimestamp }}"
|
|
class="hidden"></div>
|
|
|
|
{% if mentions.length %}
|
|
<section class="webmentions mt-8 pt-8 border-t border-surface-200 dark:border-surface-700" id="webmentions">
|
|
<h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-6">
|
|
Webmentions ({{ mentions.length }})
|
|
</h2>
|
|
|
|
{# Likes #}
|
|
{% set likes = mentions | webmentionsByType('likes') %}
|
|
{% if likes.length %}
|
|
<div class="webmention-likes mb-6">
|
|
<h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
|
|
{{ likes.length }} Like{% if likes.length != 1 %}s{% endif %}
|
|
</h3>
|
|
<is-land on:visible>
|
|
<ul class="facepile" role="list">
|
|
{% for like in likes %}
|
|
<li class="inline" data-wm-source="{{ like['wm-source'] if like['wm-source'] else '' }}" data-author-url="{{ like.author.url }}">
|
|
<a href="{{ like.author.url }}"
|
|
class="facepile-avatar"
|
|
aria-label="{{ like.author.name }} (opens in new tab)"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<img
|
|
src="{{ like.author.photo or '/images/default-avatar.svg' }}"
|
|
alt=""
|
|
class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
|
|
loading="lazy"
|
|
>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</is-land>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Reposts #}
|
|
{% set reposts = mentions | webmentionsByType('reposts') %}
|
|
{% if reposts.length %}
|
|
<div class="webmention-reposts mb-6">
|
|
<h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
|
|
{{ reposts.length }} Repost{% if reposts.length != 1 %}s{% endif %}
|
|
</h3>
|
|
<is-land on:visible>
|
|
<ul class="facepile" role="list">
|
|
{% for repost in reposts %}
|
|
<li class="inline" data-wm-source="{{ repost['wm-source'] if repost['wm-source'] else '' }}" data-author-url="{{ repost.author.url }}">
|
|
<a href="{{ repost.author.url }}"
|
|
class="facepile-avatar"
|
|
aria-label="{{ repost.author.name }} (opens in new tab)"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<img
|
|
src="{{ repost.author.photo or '/images/default-avatar.svg' }}"
|
|
alt=""
|
|
class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
|
|
loading="lazy"
|
|
>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</is-land>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Bookmarks #}
|
|
{% set bookmarks = mentions | webmentionsByType('bookmarks') %}
|
|
{% if bookmarks.length %}
|
|
<div class="webmention-bookmarks mb-6">
|
|
<h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
|
|
{{ bookmarks.length }} Bookmark{% if bookmarks.length != 1 %}s{% endif %}
|
|
</h3>
|
|
<is-land on:visible>
|
|
<ul class="facepile" role="list">
|
|
{% for bookmark in bookmarks %}
|
|
<li class="inline" data-wm-source="{{ bookmark['wm-source'] if bookmark['wm-source'] else '' }}" data-author-url="{{ bookmark.author.url }}">
|
|
<a href="{{ bookmark.author.url }}"
|
|
class="facepile-avatar"
|
|
aria-label="{{ bookmark.author.name }} (opens in new tab)"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<img
|
|
src="{{ bookmark.author.photo or '/images/default-avatar.svg' }}"
|
|
alt=""
|
|
class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
|
|
loading="lazy"
|
|
>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</is-land>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Replies #}
|
|
{% set replies = mentions | webmentionsByType('replies') %}
|
|
{% if replies.length %}
|
|
<div class="webmention-replies">
|
|
<h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-4">
|
|
{{ replies.length }} Repl{% if replies.length != 1 %}ies{% else %}y{% endif %}
|
|
</h3>
|
|
<ul class="space-y-4">
|
|
{% for reply in replies %}
|
|
<li class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm"
|
|
data-wm-url="{{ reply.url }}"
|
|
data-wm-source="{{ reply['wm-source'] if reply['wm-source'] else '' }}"
|
|
data-author-url="{{ reply.author.url }}">
|
|
<div class="flex gap-3">
|
|
<a href="{{ reply.author.url }}" target="_blank" rel="noopener">
|
|
<img
|
|
src="{{ reply.author.photo or '/images/default-avatar.svg' }}"
|
|
alt="{{ reply.author.name }}"
|
|
class="w-10 h-10 rounded-full"
|
|
loading="lazy"
|
|
>
|
|
</a>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1 flex-wrap">
|
|
<a href="{{ reply.author.url }}"
|
|
class="font-semibold text-surface-900 dark:text-surface-100 hover:underline"
|
|
target="_blank"
|
|
rel="noopener">
|
|
{{ reply.author.name }}
|
|
</a>
|
|
<span class="wm-provenance-badge" data-detect="true"></span>
|
|
<a href="{{ reply.url }}"
|
|
class="text-xs text-surface-600 dark:text-surface-400 hover:underline"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<time class="font-mono" datetime="{{ reply.published }}">
|
|
{{ reply.published | date("MMM d, yyyy") }}
|
|
</time>
|
|
</a>
|
|
</div>
|
|
<div class="text-surface-700 dark:text-surface-300 prose dark:prose-invert prose-sm max-w-none">
|
|
{{ reply.content.html | safe if reply.content.html else reply.content.text }}
|
|
</div>
|
|
<button class="wm-reply-btn hidden text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2"
|
|
data-reply-url="{{ reply.url }}"
|
|
data-platform="">
|
|
Reply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="wm-owner-reply-slot ml-13 mt-2"></div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Other mentions #}
|
|
{% set otherMentions = mentions | webmentionsByType('mentions') %}
|
|
{% if otherMentions.length %}
|
|
<div class="webmention-mentions mt-6">
|
|
<h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
|
|
{{ otherMentions.length }} Mention{% if otherMentions.length != 1 %}s{% endif %}
|
|
</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
{% for mention in otherMentions %}
|
|
<li>
|
|
<a href="{{ mention.url }}"
|
|
class="text-accent-600 dark:text-accent-400 hover:underline"
|
|
target="_blank"
|
|
rel="noopener">
|
|
{{ mention.author.name }} mentioned this on <time class="font-mono" datetime="{{ mention.published }}">{{ mention.published | date("MMM d, yyyy") }}</time>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endif %}
|
|
|
|
{# Webmention send form — collapsed by default #}
|
|
<details class="webmention-form mt-8">
|
|
<summary class="text-sm font-semibold text-surface-600 dark:text-surface-400 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300 transition-colors list-none [&::-webkit-details-marker]:hidden flex items-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5 transition-transform [[open]>&]:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
Send a Webmention
|
|
</summary>
|
|
<div class="mt-3 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
|
|
<p class="text-xs text-surface-600 dark:text-surface-400 mb-3">
|
|
Have you written a response to this post? Send a webmention by entering your post URL below.
|
|
</p>
|
|
<form action="https://webmention.io/{{ site.webmentions.domain }}/webmention" method="post" class="flex gap-2">
|
|
<input type="hidden" name="target" value="{{ site.url }}{{ page.url }}">
|
|
<label for="webmention-source" class="sr-only">Your post URL</label>
|
|
<input
|
|
id="webmention-source"
|
|
type="url"
|
|
name="source"
|
|
placeholder="https://your-site.com/response"
|
|
required
|
|
class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded"
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-accent-600 hover:bg-accent-700 rounded transition-colors">
|
|
Send
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</details>
|