{post.data.title}
+ +
+
+
+ + {handle} + · {followerCount} {followerCount === 1 ? "follower" : "followers"} +
+ ... +` tags rather than the full body) + - **`url`** — the canonical URL of the HTML page (same as `id` in our case) + - **`published`** — the publication date as a `Temporal.Instant` + +### Adding the posts table + +Open *src/lib/db.ts* and add the `posts` table at the end: + +~~~~ typescript twoslash [src/lib/db.ts] +// @noErrors +import { Database } from "bun:sqlite"; + +const db = new Database("blog.db"); + +db.run(` + CREATE TABLE IF NOT EXISTS key_pairs ( + identifier TEXT NOT NULL, + algorithm TEXT NOT NULL, + private_key BLOB NOT NULL, + public_key BLOB NOT NULL, + PRIMARY KEY (identifier, algorithm) + ) +`); + +db.run(` + CREATE TABLE IF NOT EXISTS followers ( + actor_id TEXT PRIMARY KEY, + inbox_url TEXT NOT NULL + ) +`); +// ---cut-before--- +db.run(` + CREATE TABLE IF NOT EXISTS posts ( + id TEXT PRIMARY KEY, + title TEXT NOT NULL, + url TEXT NOT NULL, + content_hash TEXT NOT NULL, + published_at TEXT NOT NULL + ) +`); + +export default db; +~~~~ + +The `id` column stores the Astro content collection slug (e.g., +`hello-fediverse`). `url` is the ActivityPub ID of the Article—it doubles +as the HTML page URL since we'll share the path `/posts/{slug}` between Astro +and Fedify via content negotiation. `content_hash` is a SHA-256 digest of the +title and body, used to detect edits. + +### Adding `@js-temporal/polyfill` + +The `Article` object uses `Temporal.Instant` from the [TC39 Temporal proposal] +polyfill. Although `@fedify/vocab` already depends on this package, you should +list it directly in your project so the version stays under your control: + +~~~~ sh +bun add @js-temporal/polyfill +~~~~ + +[TC39 Temporal proposal]: https://tc39.es/proposal-temporal/ + +### Adding an article object dispatcher + +When a remote server receives a `Create(Article)` activity, it will +dereference the `Article.id` URL to fetch the full object. Without an object +dispatcher, Fedify would return 404. + +Add the following dispatcher to *src/federation.ts* (just before +`export default federation`): + +~~~~ typescript twoslash [src/federation.ts] +// @noErrors +import { getCollection } from "astro:content"; +import { + createFederation, + generateCryptoKeyPair, + InProcessMessageQueue, + MemoryKvStore, +} from "@fedify/fedify"; +import { + Accept, + Article, + Endpoints, + Follow, + Person, + Undo, +} from "@fedify/vocab"; +import { Temporal } from "@js-temporal/polyfill"; +import { getLogger } from "@logtape/logtape"; +import { + addFollower, + getFollowers, + getKeyPairs, + removeFollower, + saveKeyPairs, +} from "./lib/store.ts"; + +const logger = getLogger("astro-blog"); + +export const BLOG_IDENTIFIER = "blog"; +export const BLOG_NAME = "Fedify Blog Example"; +export const BLOG_SUMMARY = + "A sample federated blog powered by Fedify and Astro."; + +const federation = createFederation({ + kv: new MemoryKvStore(), + queue: new InProcessMessageQueue(), +}); + +federation + .setActorDispatcher("/users/{identifier}", async (ctx, identifier) => { + if (identifier !== BLOG_IDENTIFIER) { + logger.debug("Unknown actor identifier: {identifier}", { identifier }); + return null; + } + const kp = await ctx.getActorKeyPairs(identifier); + return new Person({ + id: ctx.getActorUri(identifier), + preferredUsername: identifier, + name: BLOG_NAME, + summary: BLOG_SUMMARY, + url: new URL("/", ctx.url), + inbox: ctx.getInboxUri(identifier), + endpoints: new Endpoints({ + sharedInbox: ctx.getInboxUri(), + }), + followers: ctx.getFollowersUri(identifier), + publicKey: kp[0].cryptographicKey, + assertionMethods: kp.map((k) => k.multikey), + }); + }) + .setKeyPairsDispatcher(async (_ctx, identifier) => { + if (identifier !== BLOG_IDENTIFIER) return []; + const stored = await getKeyPairs(identifier); + if (stored) return stored; + const [rsaKey, ed25519Key] = await Promise.all([ + generateCryptoKeyPair("RSASSA-PKCS1-v1_5"), + generateCryptoKeyPair("Ed25519"), + ]); + const kp = [rsaKey, ed25519Key]; + await saveKeyPairs(identifier, kp); + return kp; + }); + +federation + .setInboxListeners("/users/{identifier}/inbox", "/inbox") + .on(Follow, async (ctx, follow) => { + if (follow.id == null || follow.actorId == null) return; + const parsed = ctx.parseUri(follow.objectId); + if (parsed?.type !== "actor" || parsed.identifier !== BLOG_IDENTIFIER) { + return; + } + const follower = await follow.getActor(ctx); + if (follower == null || follower.id == null || follower.inboxId == null) { + return; + } + addFollower(follower.id.href, follower.inboxId.href); + logger.info("New follower: {follower}", { follower: follower.id.href }); + await ctx.sendActivity( + { identifier: BLOG_IDENTIFIER }, + follower, + new Accept({ + id: new URL( + `#accepts/${follower.id.href}`, + ctx.getActorUri(BLOG_IDENTIFIER), + ), + actor: ctx.getActorUri(BLOG_IDENTIFIER), + object: follow, + }), + ); + }) + .on(Undo, async (ctx, undo) => { + const object = await undo.getObject(ctx); + if (!(object instanceof Follow)) return; + if (object.objectId?.href !== ctx.getActorUri(BLOG_IDENTIFIER).href) return; + if (undo.actorId == null) return; + removeFollower(undo.actorId.href); + logger.info("Unfollowed: {actor}", { actor: undo.actorId.href }); + }); + +federation.setFollowersDispatcher( + "/users/{identifier}/followers", + (_ctx, identifier) => { + if (identifier !== BLOG_IDENTIFIER) return null; + return { items: getFollowers() }; + }, +); +// ---cut-before--- +federation.setObjectDispatcher( + Article, + "/posts/{slug}", + async (ctx, { slug }) => { + const allPosts = await getCollection("posts"); + const post = allPosts.find((p) => p.id === slug && !p.data.draft); + if (!post) return null; + return new Article({ + id: ctx.getObjectUri(Article, { slug }), + attribution: ctx.getActorUri(BLOG_IDENTIFIER), + name: post.data.title, + summary: post.data.description, + content: `
${post.data.description}
`, + url: new URL(`/posts/${slug}`, ctx.url), + published: Temporal.Instant.from(post.data.pubDate.toISOString()), + }); + }, +); + +export default federation; +~~~~ + +`setObjectDispatcher` registers a path pattern (`/posts/{slug}`) and a +callback that returns the ActivityPub object for that path. The `{ slug }` +destructuring extracts the path parameter. + +`ctx.getObjectUri(Article, { slug })` generates the canonical ActivityPub +ID for the Article, e.g. `https://example.com/posts/hello-fediverse`. This +is the same URL as the HTML page—content negotiation (via the `Accept` header) +determines which representation is served: + + - Browser sends `Accept: text/html, */*` → Astro renders the HTML page + - ActivityPub client sends `Accept: application/activity+json` → Fedify + returns JSON-LD + +The `@fedify/astro` middleware handles this negotiation automatically. + +### Creating the publish module + +Create *src/lib/publish.ts*: + +~~~~ typescript twoslash [src/lib/publish.ts] +// @noErrors +import type { RequestContext } from "@fedify/fedify"; +import { Article, Create, Delete, Update } from "@fedify/vocab"; +import { Temporal } from "@js-temporal/polyfill"; +import { getCollection } from "astro:content"; +import { BLOG_IDENTIFIER } from "../federation.ts"; +import db from "./db.ts"; + +async function hashPost( + title: string, + description: string, + body: string, +): Promise${post.data.description}
`, + url: new URL(`/posts/${slug}`, ctx.url), + published: Temporal.Instant.from(post.data.pubDate.toISOString()), + }); + + if (!stored.has(slug)) { + await ctx.sendActivity( + { identifier: BLOG_IDENTIFIER }, + "followers", + new Create({ + id: new URL(`#create-${Date.now()}`, articleId), + actor: actorUri, + to: AS_PUBLIC, + object: article, + }), + ); + db.run( + `INSERT INTO posts (id, title, url, content_hash, published_at) + VALUES (?, ?, ?, ?, ?)`, + [ + slug, + post.data.title, + articleId.href, + contentHash, + post.data.pubDate.toISOString(), + ], + ); + } else if (stored.get(slug)?.content_hash !== contentHash) { + await ctx.sendActivity( + { identifier: BLOG_IDENTIFIER }, + "followers", + new Update({ + id: new URL(`#update-${Date.now()}`, articleId), + actor: actorUri, + to: AS_PUBLIC, + object: article, + }), + ); + db.run( + `UPDATE posts SET title = ?, content_hash = ?, published_at = ? + WHERE id = ?`, + [post.data.title, contentHash, post.data.pubDate.toISOString(), slug], + ); + } + } + + for (const [slug, row] of stored) { + if (!currentIds.has(slug)) { + await ctx.sendActivity( + { identifier: BLOG_IDENTIFIER }, + "followers", + new Delete({ + id: new URL(`#delete-${slug}-${Date.now()}`, actorUri), + actor: actorUri, + to: AS_PUBLIC, + object: new URL(row.url), + }), + ); + db.run("DELETE FROM posts WHERE id = ?", [slug]); + } + } +} +~~~~ + +A few things to unpack here: + +**`hashPost`** computes a SHA-256 digest of the title, description, and body +concatenated together. Any change to those fields will produce a different +hash, triggering an `Update(Article)` activity. + +**`AS_PUBLIC`** is the ActivityPub [public addressing] URL. Activities +addressed `to` this URL are publicly visible on fediverse clients. + +**`"followers"`** passed as the recipients argument tells Fedify to look up +the blog's followers collection and fan the activity out to all of them. +Fedify calls the followers dispatcher you registered earlier, so you no +longer need to call `getFollowers()` manually here. When the followers list +is empty, Fedify simply sends nothing. + +**The loop** iterates over current non-draft posts and checks the SQLite +table: + + - `!stored.has(slug)` → new post → `Create(Article)` + - `stored.get(slug)?.content_hash !== contentHash` → changed post → + `Update(Article)` + - Remaining slugs in `stored` that are not in `current` → deleted post → + `Delete(Article)` + +[public addressing]: https://www.w3.org/TR/activitypub/#public-addressing + +### Triggering the sync on startup + +Modify *src/middleware.ts* to call `syncPosts` once, on the first HTTP +request, right after the `X-Forwarded-Proto`/`X-Forwarded-Host` rewrite: + +~~~~ typescript twoslash [src/middleware.ts] +// @noErrors +import { fedifyMiddleware } from "@fedify/astro"; +import type { MiddlewareHandler } from "astro"; +import federation from "./federation.ts"; +import { syncPosts } from "./lib/publish.ts"; +import "./logging.ts"; + +let synced = false; + +export const onRequest: MiddlewareHandler = (context, next) => { + // Rewrite the request URL based on X-Forwarded-Proto / X-Forwarded-Host + // when running behind a reverse proxy or tunnel (e.g. `fedify tunnel`). + const proto = context.request.headers.get("x-forwarded-proto"); + const host = context.request.headers.get("x-forwarded-host"); + const url = new URL(context.request.url); + if (proto != null && url.protocol !== `${proto}:`) url.protocol = proto; + if (host != null && url.host !== host) url.host = host; + if (proto != null || host != null) { + context.request = new Request(url.toString(), context.request); + } + if (!synced && context.request.headers.get("x-forwarded-host") != null) { + synced = true; + const ctx = federation.createContext(context.request, undefined); + syncPosts(ctx).catch((err) => { + console.error("Failed to sync posts:", err); + synced = false; + }); + } + return fedifyMiddleware(federation, (_ctx) => undefined)(context, next); +}; +~~~~ + +`federation.createContext(request, contextData)` creates a Fedify +[`RequestContext`] from the current HTTP request. The context knows the +server's public URL (including scheme and host), which it uses to generate +correct ActivityPub IDs for the activities it sends. Because the +`X-Forwarded-Proto`/`X-Forwarded-Host` rewrite already runs before this +point, `context.request` always carries the correct public URL when the +request arrives through the tunnel. + +`syncPosts(ctx)` is fired and *not* awaited, so it runs in the background +while the response is served immediately. The `synced` flag guards against +double-firing: it is set on the first request that arrives with an +`X-Forwarded-Host` header (i.e., the first tunnel request), and reset to +`false` if `syncPosts` throws so that a transient failure does not +permanently suppress activity delivery. + +> [!TIP] +> In production you could also trigger `syncPosts` from a startup script or a +> deploy hook. The fire-and-forget pattern shown here is simplest for a +> development tutorial. + +[`RequestContext`]: https://jsr.io/@fedify/fedify/doc/~/RequestContext + +### Testing + +Follow the blog from ActivityPub.Academy (tunnel still required). +Then add a new post file to *src/content/posts/*: + +~~~~ markdown [src/content/posts/new-post.md] +--- +title: "A new post" +pubDate: 2025-04-01 +description: "This post appears in followers' timelines." +--- + +Hello, followers! This is a new post sent via ActivityPub. +~~~~ + +Restart the dev server: + +~~~~ sh +bun run dev +~~~~ + +Then open your tunnel URL in a browser (e.g. +`https://your-tunnel-url.trycloudflare.com/`) so that the first request +arrives with the correct `X-Forwarded-Host` header and Fedify generates +the right public URLs for the activities it sends. + +Within seconds you should see a log line like: + +~~~~ console +18:42:02.456 INF @fedify/fedify Sent activity Create to ... +~~~~ + +Check your ActivityPub.Academy timeline—the new post should appear there. +The blog title and description are shown (we include the description as +`content`). + +To test updates, change the title or description of the new post and +restart. To test deletion, remove the file and restart. + + +Receiving and displaying comments +--------------------------------- + +Followers can now read our posts in their fediverse timelines. In this chapter +we'll make the conversation two-way: when someone replies to one of our posts +from Mastodon or another fediverse server, we'll store the reply and display it +below the post. + +### Adding the comments table + +Open *src/lib/db.ts* and append a `comments` table: + +~~~~ typescript twoslash [src/lib/db.ts] +// @noErrors +import { Database } from "bun:sqlite"; + +const db = new Database("blog.db"); + +db.run(`CREATE TABLE IF NOT EXISTS key_pairs ( + identifier TEXT NOT NULL, algorithm TEXT NOT NULL, + private_key BLOB NOT NULL, public_key BLOB NOT NULL, + PRIMARY KEY (identifier, algorithm))`); +db.run(`CREATE TABLE IF NOT EXISTS followers ( + actor_id TEXT PRIMARY KEY, inbox_url TEXT NOT NULL)`); +db.run(`CREATE TABLE IF NOT EXISTS posts ( + id TEXT PRIMARY KEY, title TEXT NOT NULL, url TEXT NOT NULL, + content_hash TEXT NOT NULL, published_at TEXT NOT NULL)`); +// ---cut-before--- +db.run(` + CREATE TABLE IF NOT EXISTS comments ( + id TEXT PRIMARY KEY, + post_id TEXT NOT NULL, + author_url TEXT NOT NULL, + author_name TEXT NOT NULL, + content TEXT NOT NULL, + published_at TEXT NOT NULL + ) +`); + +export default db; +~~~~ + +Each row represents one fediverse reply. `id` is the ActivityPub object ID +of the remote `Note`, and `post_id` is the slug of the local post it replies +to. + +### Adding comment helpers to the store + +Extend *src/lib/store.ts* with the comment CRUD functions that the inbox +handlers will call: + +~~~~ typescript twoslash [src/lib/store.ts] +// @noErrors +import db from "./db.ts"; +// ---cut-before--- +export interface Comment { + id: string; + postId: string; + authorUrl: string; + authorName: string; + content: string; + publishedAt: string; +} + +export function addComment(comment: Comment): void { + db.run( + `INSERT OR REPLACE INTO comments + (id, post_id, author_url, author_name, content, published_at) + VALUES (?, ?, ?, ?, ?, ?)`, + [ + comment.id, + comment.postId, + comment.authorUrl, + comment.authorName, + comment.content, + comment.publishedAt, + ], + ); +} + +export function updateComment( + id: string, + authorName: string, + content: string, +): void { + db.run( + `UPDATE comments SET author_name = ?, content = ? WHERE id = ?`, + [authorName, content, id], + ); +} + +export function getCommentAuthorUrl(id: string): string | null { + return ( + db + .query<{ author_url: string }, [string]>( + `SELECT author_url FROM comments WHERE id = ?`, + ) + .get(id)?.author_url ?? null + ); +} + +export function deleteComment(id: string): void { + db.run(`DELETE FROM comments WHERE id = ?`, [id]); +} + +export function getCommentsByPost(postId: string): Comment[] { + return db + .query< + { + id: string; + author_url: string; + author_name: string; + content: string; + published_at: string; + }, + [string] + >( + `SELECT id, author_url, author_name, content, published_at + FROM comments WHERE post_id = ? ORDER BY published_at`, + ) + .all(postId) + .map((r) => ({ + id: r.id, + postId, + authorUrl: r.author_url, + authorName: r.author_name, + content: r.content, + publishedAt: r.published_at, + })); +} +~~~~ + +`addComment` uses `INSERT OR REPLACE` so that receiving the same activity +twice (e.g., retries) is idempotent. + +`getCommentAuthorUrl` is a small helper used by the `Update` and `Delete` +handlers to verify that the actor performing the operation is the original +author. + +### Handling inbox activities + +Open *src/federation.ts* and update the imports and inbox listeners to handle +`Create(Note)`, `Update(Note)`, and `Delete(Note)`: + +~~~~ typescript twoslash [src/federation.ts] +// @noErrors +import { getCollection } from "astro:content"; +import { + createFederation, + generateCryptoKeyPair, + InProcessMessageQueue, + MemoryKvStore, +} from "@fedify/fedify"; +import { + Accept, + Article, + Create, + Delete, + Endpoints, + Follow, + Note, + Person, + Undo, + Update, +} from "@fedify/vocab"; +import { Temporal } from "@js-temporal/polyfill"; +import { getLogger } from "@logtape/logtape"; +import { + addComment, + addFollower, + deleteComment, + getCommentAuthorUrl, + getFollowers, + getKeyPairs, + removeFollower, + saveKeyPairs, + updateComment, +} from "./lib/store.ts"; + +const logger = getLogger("astro-blog"); + +export const BLOG_IDENTIFIER = "blog"; +export const BLOG_NAME = "Fedify Blog Example"; +export const BLOG_SUMMARY = + "A sample federated blog powered by Fedify and Astro."; + +const federation = createFederation({ + kv: new MemoryKvStore(), + queue: new InProcessMessageQueue(), +}); + +federation + .setActorDispatcher("/users/{identifier}", async (ctx, identifier) => { + if (identifier !== BLOG_IDENTIFIER) { + logger.debug("Unknown actor identifier: {identifier}", { identifier }); + return null; + } + const kp = await ctx.getActorKeyPairs(identifier); + return new Person({ + id: ctx.getActorUri(identifier), + preferredUsername: identifier, + name: BLOG_NAME, + summary: BLOG_SUMMARY, + url: new URL("/", ctx.url), + inbox: ctx.getInboxUri(identifier), + endpoints: new Endpoints({ + sharedInbox: ctx.getInboxUri(), + }), + followers: ctx.getFollowersUri(identifier), + publicKey: kp[0].cryptographicKey, + assertionMethods: kp.map((k) => k.multikey), + }); + }) + .setKeyPairsDispatcher(async (_ctx, identifier) => { + if (identifier !== BLOG_IDENTIFIER) return []; + const stored = await getKeyPairs(identifier); + if (stored) return stored; + const [rsaKey, ed25519Key] = await Promise.all([ + generateCryptoKeyPair("RSASSA-PKCS1-v1_5"), + generateCryptoKeyPair("Ed25519"), + ]); + const kp = [rsaKey, ed25519Key]; + await saveKeyPairs(identifier, kp); + return kp; + }); + +federation + .setInboxListeners("/users/{identifier}/inbox", "/inbox") + .on(Follow, async (ctx, follow) => { + if (follow.id == null || follow.actorId == null) return; + const parsed = ctx.parseUri(follow.objectId); + if (parsed?.type !== "actor" || parsed.identifier !== BLOG_IDENTIFIER) { + return; + } + const follower = await follow.getActor(ctx); + if (follower == null || follower.id == null || follower.inboxId == null) { + return; + } + addFollower(follower.id.href, follower.inboxId.href); + logger.info("New follower: {follower}", { follower: follower.id.href }); + await ctx.sendActivity( + { identifier: BLOG_IDENTIFIER }, + follower, + new Accept({ + id: new URL( + `#accepts/${follower.id.href}`, + ctx.getActorUri(BLOG_IDENTIFIER), + ), + actor: ctx.getActorUri(BLOG_IDENTIFIER), + object: follow, + }), + ); + }) + .on(Undo, async (ctx, undo) => { + const object = await undo.getObject(ctx); + if (!(object instanceof Follow)) return; + if (object.objectId?.href !== ctx.getActorUri(BLOG_IDENTIFIER).href) return; + if (undo.actorId == null) return; + removeFollower(undo.actorId.href); + logger.info("Unfollowed: {actor}", { actor: undo.actorId.href }); + }) + .on(Create, async (ctx, create) => { + const object = await create.getObject(ctx); + if (!(object instanceof Note)) return; + if (object.id == null || create.actorId == null) return; + const replyTargetId = object.replyTargetId; + if (replyTargetId == null) return; + const parsed = ctx.parseUri(replyTargetId); + if (parsed?.type !== "object" || parsed.class !== Article) return; + const { slug } = parsed.values; + const allPosts = await getCollection("posts"); + if (!allPosts.some((p) => p.id === slug && !p.data.draft)) return; + const author = await create.getActor(ctx); + if (author == null || author.id == null) return; + const authorName = + author.name?.toString() ?? + author.preferredUsername?.toString() ?? + author.id.host; + addComment({ + id: object.id.href, + postId: slug, + authorUrl: author.id.href, + authorName, + content: object.content?.toString() ?? "", + publishedAt: ( + object.published ?? Temporal.Now.instant() + ).toString(), + }); + logger.info("New comment on /{slug} by {author}", { + slug, + author: author.id.href, + }); + }) + .on(Update, async (ctx, update) => { + const object = await update.getObject(ctx); + if (!(object instanceof Note)) return; + if (object.id == null || update.actorId == null) return; + const existing = getCommentAuthorUrl(object.id.href); + if (existing == null || existing !== update.actorId.href) return; + const author = await update.getActor(ctx); + const authorName = + author?.name?.toString() ?? + author?.preferredUsername?.toString() ?? + update.actorId.host; + updateComment( + object.id.href, + authorName, + object.content?.toString() ?? "", + ); + }) + .on(Delete, async (_ctx, delete_) => { + if (delete_.actorId == null) return; + const objectId = delete_.objectId; + if (objectId == null) return; + const existing = getCommentAuthorUrl(objectId.href); + if (existing == null || existing !== delete_.actorId.href) return; + deleteComment(objectId.href); + }); + +federation.setFollowersDispatcher( + "/users/{identifier}/followers", + (_ctx, identifier) => { + if (identifier !== BLOG_IDENTIFIER) return null; + return { items: getFollowers() }; + }, +); + +federation.setObjectDispatcher( + Article, + "/posts/{slug}", + async (ctx, { slug }) => { + const allPosts = await getCollection("posts"); + const post = allPosts.find((p) => p.id === slug && !p.data.draft); + if (!post) return null; + return new Article({ + id: ctx.getObjectUri(Article, { slug }), + attribution: ctx.getActorUri(BLOG_IDENTIFIER), + name: post.data.title, + summary: post.data.description, + content: `${post.data.description}
`, + url: new URL(`/posts/${slug}`, ctx.url), + published: Temporal.Instant.from(post.data.pubDate.toISOString()), + }); + }, +); + +export default federation; +~~~~ + +Let's walk through the three new handlers: + +`Create` +: Called when someone sends a reply: + + 1. Fetch the activity's `object` and verify it's a `Note`. + 2. Check `note.replyTargetId` (the `inReplyTo` URL) and parse it with + `ctx.parseUri`. If it matches our Article dispatcher pattern, we + get back `{ type: "object", class: Article, values: { slug: "…" } }`. + 3. Fetch the author actor to get their display name. + 4. Store the comment with `addComment`. + +`Update` +: Called when the author edits their reply: + + 1. Verify the note exists in our database. + 2. Verify the actor matches the stored `authorUrl` (no one else can + edit someone else's comment). + 3. Update the name and content. + +`Delete` +: Called when the author deletes their reply: + + 1. Check that the actor matches the stored author. + 2. Delete the row. + +The `Undo` handler ignores non-`Follow` objects, so it won't accidentally +remove comments when a follower unfollows. + +> [!WARNING] +> The `content` field on `Note` is HTML sent by a remote server. Storing +> and rendering it verbatim exposes your visitors to XSS attacks. See +> [*Security: sanitizing comment HTML*](#security-sanitizing-comment-html) for +> guidance on sanitization. + +### Displaying comments on the post page + +Replace *src/pages/posts/\[slug].astro* with the following: + +~~~~ astro +--- +import { getCollection, render } from "astro:content"; +import Layout from "../../layouts/Layout.astro"; +import { getCommentsByPost } from "../../lib/store.ts"; + +const { slug } = Astro.params; +const posts = await getCollection("posts"); +const post = posts.find((p) => p.id === slug); + +if (!post || post.data.draft) { + return new Response(null, { status: 404, statusText: "Not Found" }); +} + +const { Content } = await render(post); +const comments = getCommentsByPost(post.id); +--- + +
{comments.length} {comments.length === 1 ? "comment" : "comments"}
+ { + comments.length === 0 ? ( +No comments yet.
+ ) : ( ++ {comments.map((comment) => ( +-
+
+
+ {comment.authorName}
+
+
+
+ {/* Note: comment.content is HTML from remote servers.
+ Sanitize before rendering in production! */}
+
+
+ ))}
+
+ ) + } +