mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
0fe6ab0195
- Add .wm-reply-btn button and .wm-owner-reply-slot to dynamically created reply elements (parity with build-time Nunjucks template) - Extract wireReplyButtons() so buttons are wired both on owner:detected and after dynamic replies are appended (fixes timing gap) - Use data-wired attribute to prevent double-wiring - Show comment form for site owner (isOwner) not just IndieAuth users - Fix "Signed in as" display to use ownerProfile when user is null Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
168 lines
9.9 KiB
Plaintext
168 lines
9.9 KiB
Plaintext
{# Comments section — shown on post pages before webmentions #}
|
|
{# Collapsed when empty, auto-opens when comments exist #}
|
|
{% set absoluteUrl = site.url + page.url %}
|
|
|
|
<is-land on:visible>
|
|
<section class="comments mt-8 pt-8 border-t border-surface-200 dark:border-surface-700" id="comments"
|
|
x-data="commentsSection('{{ absoluteUrl }}')"
|
|
x-init="init()">
|
|
|
|
<details class="group" x-bind:open="comments.length > 0 || showForm">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none [&::-webkit-details-marker]:hidden" @click="showForm = true">
|
|
<h2 class="text-lg font-semibold text-surface-700 dark:text-surface-300">
|
|
Comments
|
|
<span x-show="comments.length > 0" x-text="'(' + comments.length + ')'" class="text-sm font-normal" x-cloak></span>
|
|
</h2>
|
|
<svg class="w-4 h-4 text-surface-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</summary>
|
|
|
|
<div class="mt-4">
|
|
{# Status messages #}
|
|
<div x-show="statusMessage" x-cloak
|
|
role="alert"
|
|
x-bind:class="statusType === 'error' ? 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400' :
|
|
statusType === 'success' ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400' :
|
|
'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400'"
|
|
class="p-3 rounded-lg mb-4 text-sm">
|
|
<span x-text="statusMessage"></span>
|
|
</div>
|
|
|
|
{# Sign-in form (shown when not authenticated) #}
|
|
<div x-show="!user && !isOwner" x-cloak>
|
|
<p class="text-sm text-surface-600 dark:text-surface-400 mb-3">Sign in with your website to comment:</p>
|
|
<form x-on:submit.prevent="startAuth()" class="flex gap-2 items-end flex-wrap">
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label for="comment-me" class="block text-sm font-medium mb-1">Your website</label>
|
|
<input id="comment-me" type="url" x-model="meUrl"
|
|
placeholder="https://yourdomain.com" required
|
|
class="w-full px-3 py-2 border rounded-lg dark:bg-surface-800 dark:border-surface-700 dark:text-surface-100">
|
|
</div>
|
|
<button type="submit" class="button" x-bind:disabled="authLoading">
|
|
<span x-show="!authLoading">Sign In</span>
|
|
<span x-show="authLoading" x-cloak>Signing in...</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{# Comment form (shown when authenticated via IndieAuth OR as site owner) #}
|
|
<div x-show="user || isOwner" x-cloak>
|
|
<div class="flex items-center gap-2 mb-3 text-sm text-surface-600 dark:text-surface-400">
|
|
<span>Signed in as</span>
|
|
<a x-bind:href="user?.url || ownerProfile?.url" class="font-medium hover:underline"
|
|
x-text="user?.name || ownerProfile?.name || user?.url || 'Owner'" target="_blank" rel="noopener"></a>
|
|
<button x-show="user" x-on:click="signOut()" class="text-xs underline hover:no-underline">Sign out</button>
|
|
</div>
|
|
|
|
<form x-on:submit.prevent="submitComment()">
|
|
<label for="comment-text" class="sr-only">Your comment</label>
|
|
<textarea id="comment-text" x-model="commentText" rows="4" required
|
|
placeholder="Share your thoughts... (supports **bold**, *italic*, and [links](url))"
|
|
class="w-full px-3 py-2 border rounded-lg mb-2 dark:bg-surface-800 dark:border-surface-700 dark:text-surface-100"
|
|
x-bind:maxlength="maxLength"></textarea>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-surface-600 dark:text-surface-400" x-text="commentText.length + '/' + maxLength"></span>
|
|
<button type="submit" class="button" x-bind:disabled="submitting">
|
|
<span x-show="!submitting">Post Comment</span>
|
|
<span x-show="submitting" x-cloak>Posting...</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{# Comment list #}
|
|
<div class="mt-6 space-y-4">
|
|
<template x-if="loading">
|
|
<p class="text-sm text-surface-600 dark:text-surface-400">Loading comments...</p>
|
|
</template>
|
|
|
|
<template x-for="comment in comments.filter(c => !c.parent_id)" x-bind:key="comment._id || comment.published">
|
|
<div>
|
|
{# Parent comment #}
|
|
<div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
|
|
<div class="flex items-start gap-3">
|
|
<template x-if="comment.author?.photo">
|
|
<img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name"
|
|
class="w-8 h-8 rounded-full flex-shrink-0" loading="lazy">
|
|
</template>
|
|
<template x-if="!comment.author?.photo">
|
|
<div class="w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 flex-shrink-0 flex items-center justify-center text-xs font-bold"
|
|
x-text="(comment.author?.name || '?')[0].toUpperCase()">
|
|
</div>
|
|
</template>
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener"
|
|
x-text="comment.author?.name || comment.author?.url"></a>
|
|
<span x-show="comment.is_owner || (ownerProfile && comment.author?.url === ownerProfile.url)"
|
|
class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full">
|
|
Author
|
|
</span>
|
|
<time class="text-xs text-surface-600 dark:text-surface-400 font-mono" x-bind:datetime="comment.published"
|
|
x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
|
|
</div>
|
|
<div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div>
|
|
<div class="mt-2" x-show="isOwner && !(comment.is_owner || (ownerProfile && comment.author?.url === ownerProfile.url))">
|
|
<button class="text-xs text-primary-600 dark:text-primary-400 hover:underline"
|
|
@click="startReply(comment._id, 'comment', null, null)">
|
|
Reply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Inline reply form #}
|
|
<div x-show="replyingTo && replyingTo.commentId === comment._id && replyingTo.platform === 'comment'"
|
|
class="ml-8 mt-2 p-3 bg-surface-100 dark:bg-surface-900 rounded-lg border-l-2 border-primary-400" x-cloak>
|
|
<textarea x-model="replyText" rows="3" placeholder="Write your reply..."
|
|
class="w-full px-3 py-2 border rounded-lg text-sm dark:bg-surface-800 dark:border-surface-700 dark:text-surface-100"></textarea>
|
|
<div class="flex gap-2 mt-2">
|
|
<button class="button text-sm" @click="submitReply()" x-bind:disabled="replySubmitting">
|
|
<span x-show="!replySubmitting">Send Reply</span>
|
|
<span x-show="replySubmitting" x-cloak>Sending...</span>
|
|
</button>
|
|
<button class="text-xs text-surface-500 hover:underline" @click="cancelReply()">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
{# Threaded child replies #}
|
|
<template x-for="reply in comments.filter(c => c.parent_id === comment._id)" x-bind:key="reply._id || reply.published">
|
|
<div class="ml-8 mt-2 p-3 bg-surface-100 dark:bg-surface-900 rounded-lg border-l-2 border-amber-400 dark:border-amber-600">
|
|
<div class="flex items-start gap-2">
|
|
<template x-if="reply.author?.photo">
|
|
<img x-bind:src="reply.author.photo" x-bind:alt="reply.author.name"
|
|
class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy">
|
|
</template>
|
|
<template x-if="!reply.author?.photo">
|
|
<div class="w-6 h-6 rounded-full bg-amber-100 dark:bg-amber-900 flex-shrink-0 flex items-center justify-center text-xs font-bold"
|
|
x-text="(reply.author?.name || '?')[0].toUpperCase()">
|
|
</div>
|
|
</template>
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<span class="font-medium text-sm" x-text="reply.author?.name || 'Owner'"></span>
|
|
<span class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full">
|
|
Author
|
|
</span>
|
|
<time class="text-xs text-surface-600 dark:text-surface-400 font-mono" x-bind:datetime="reply.published"
|
|
x-text="new Date(reply.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
|
|
</div>
|
|
<div class="mt-1 text-sm prose dark:prose-invert" x-html="reply.content?.html || reply.content?.text"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="!loading && comments.length === 0">
|
|
<p class="text-sm text-surface-600 dark:text-surface-400">No comments yet. Be the first to share your thoughts!</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</is-land>
|