From fa7bfb26ea8848869f7d476687fbd3d481b77993 Mon Sep 17 00:00:00 2001 From: rmdes Date: Sat, 21 Feb 2026 21:56:15 +0100 Subject: [PATCH] feat: add comment system components and recent comments widget - Comment area on post pages (IndieAuth sign-in, submit, display) - Alpine.js client-side component for auth flow and comment CRUD - Recent comments sidebar widget with build-time data fetching - Include comments.js in base layout, comments.njk before webmentions Co-Authored-By: Claude Opus 4.6 --- _data/recentComments.js | 24 +++ _includes/components/blog-sidebar.njk | 2 + _includes/components/comments.njk | 94 ++++++++++++ .../components/widgets/recent-comments.njk | 25 +++ _includes/layouts/base.njk | 2 + _includes/layouts/post.njk | 3 + js/comments.js | 143 ++++++++++++++++++ 7 files changed, 293 insertions(+) create mode 100644 _data/recentComments.js create mode 100644 _includes/components/comments.njk create mode 100644 _includes/components/widgets/recent-comments.njk create mode 100644 js/comments.js diff --git a/_data/recentComments.js b/_data/recentComments.js new file mode 100644 index 0000000..bdd1ede --- /dev/null +++ b/_data/recentComments.js @@ -0,0 +1,24 @@ +/** + * Recent Comments Data + * Fetches the 5 most recent comments at build time for the sidebar widget. + */ + +import EleventyFetch from "@11ty/eleventy-fetch"; + +const INDIEKIT_URL = process.env.SITE_URL || "https://example.com"; + +export default async function () { + try { + const url = `${INDIEKIT_URL}/comments/api/comments?limit=5`; + console.log(`[recentComments] Fetching: ${url}`); + const data = await EleventyFetch(url, { + duration: "15m", + type: "json", + }); + console.log(`[recentComments] Got ${(data.children || []).length} comments`); + return data.children || []; + } catch (error) { + console.log(`[recentComments] Unavailable: ${error.message}`); + return []; + } +} diff --git a/_includes/components/blog-sidebar.njk b/_includes/components/blog-sidebar.njk index 799b5aa..2ac1d85 100644 --- a/_includes/components/blog-sidebar.njk +++ b/_includes/components/blog-sidebar.njk @@ -32,6 +32,8 @@ {% include "components/widgets/feedland.njk" %} {% elif widget.type == "categories" %} {% include "components/widgets/categories.njk" %} + {% elif widget.type == "recent-comments" %} + {% include "components/widgets/recent-comments.njk" %} {% elif widget.type == "search" %}

Search

diff --git a/_includes/components/comments.njk b/_includes/components/comments.njk new file mode 100644 index 0000000..57e9b42 --- /dev/null +++ b/_includes/components/comments.njk @@ -0,0 +1,94 @@ +{# Comments section — shown on post pages before webmentions #} +{% set absoluteUrl = site.url + page.url %} + +
+ +

Comments

+ + {# Status messages #} +
+ +
+ + {# Sign-in form (shown when not authenticated) #} +
+

Sign in with your website to comment:

+
+
+ + +
+ +
+
+ + {# Comment form (shown when authenticated) #} +
+
+ Signed in as + + +
+ +
+ +
+ + +
+
+
+ + {# Comment list #} +
+ + + + + +
+
diff --git a/_includes/components/widgets/recent-comments.njk b/_includes/components/widgets/recent-comments.njk new file mode 100644 index 0000000..486c37e --- /dev/null +++ b/_includes/components/widgets/recent-comments.njk @@ -0,0 +1,25 @@ +{# Recent Comments Widget — sidebar #} +{% if recentComments and recentComments.length %} +
+

Recent Comments

+
    + {% for comment in recentComments %} +
  • +
    + {% if comment.author and comment.author.photo %} + {{ comment.author.name }} + {% endif %} +
    + {{ comment.author.name or "Anonymous" }} +

    {{ comment.content.text | truncate(80) }}

    + {% if comment["comment-target"] %} + View post + {% endif %} +
    +
    +
    • + {% endfor %} +
+
+{% endif %} diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 01a6785..56f192d 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -440,6 +440,8 @@ {# Client-side webmention fetcher - supplements build-time cache with real-time data #} + {# Client-side comments - IndieAuth login + comment submission #} + {# Admin auth detection - shows dashboard link + FAB when logged in #} diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index 318e2b8..9b54a0a 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -170,6 +170,9 @@ withBlogSidebar: true +{# Comments section #} +{% include "components/comments.njk" %} + {# Webmentions display - likes, reposts, replies #} {% include "components/webmentions.njk" %} diff --git a/js/comments.js b/js/comments.js new file mode 100644 index 0000000..bb00b6d --- /dev/null +++ b/js/comments.js @@ -0,0 +1,143 @@ +/** + * Client-side comments component (Alpine.js) + * Handles IndieAuth flow, comment submission, and display + */ + +function commentsSection(targetUrl) { + return { + targetUrl, + user: null, + meUrl: "", + commentText: "", + comments: [], + loading: true, + authLoading: false, + submitting: false, + statusMessage: "", + statusType: "info", + maxLength: 2000, + + async init() { + await this.checkSession(); + await this.loadComments(); + this.handleAuthReturn(); + }, + + async checkSession() { + try { + const res = await fetch("/comments/api/session", { + credentials: "include", + }); + if (res.ok) { + const data = await res.json(); + if (data.user) this.user = data.user; + } + } catch { + // No session + } + }, + + handleAuthReturn() { + const params = new URLSearchParams(window.location.search); + const authError = params.get("auth_error"); + if (authError) { + this.showStatus(`Authentication failed: ${authError}`, "error"); + window.history.replaceState({}, "", window.location.pathname + "#comments"); + } + }, + + async loadComments() { + this.loading = true; + try { + const url = `/comments/api/comments?target=${encodeURIComponent(this.targetUrl)}`; + const res = await fetch(url); + if (res.ok) { + const data = await res.json(); + this.comments = data.children || []; + } + } catch (e) { + console.error("[Comments] Load error:", e); + } finally { + this.loading = false; + } + }, + + async startAuth() { + this.authLoading = true; + try { + const res = await fetch("/comments/api/auth", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + me: this.meUrl, + returnUrl: window.location.pathname + "#comments", + }), + credentials: "include", + }); + + if (!res.ok) { + const data = await res.json(); + this.showStatus(data.error || "Auth failed", "error"); + return; + } + + const data = await res.json(); + if (data.authUrl) { + window.location.href = data.authUrl; + } + } catch { + this.showStatus("Failed to start authentication", "error"); + } finally { + this.authLoading = false; + } + }, + + async submitComment() { + if (!this.commentText.trim()) return; + this.submitting = true; + + try { + const res = await fetch("/comments/api/submit", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + content: this.commentText, + target: this.targetUrl, + }), + credentials: "include", + }); + + if (res.ok) { + const data = await res.json(); + if (data.comment) { + this.comments.unshift(data.comment); + } + this.commentText = ""; + this.showStatus("Comment posted!", "success"); + } else { + const data = await res.json(); + this.showStatus(data.error || "Failed to post", "error"); + } + } catch { + this.showStatus("Error posting comment", "error"); + } finally { + this.submitting = false; + } + }, + + signOut() { + document.cookie = + "comment_session=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; + this.user = null; + this.showStatus("Signed out", "info"); + }, + + showStatus(message, type = "info") { + this.statusMessage = message; + this.statusType = type; + setTimeout(() => { + this.statusMessage = ""; + }, 5000); + }, + }; +}