astro-atmosphere-comments 0.1.1 → 0.3.0

package/components/AtmosphereComments.astro

@@ -1,19 +1,22 @@
 ---
-// The comment box under a post: "Respond with your Atmosphere Account", then,
-// once signed in, Like, Repost and Quote buttons and a box to write a
+// The comment box under a post: a form to sign in with an Atmosphere account
+// (Bluesky or any other), then, once signed in, Like, Repost and Quote buttons and a box to write a
 // comment (a reply to the post's announcement, or to one of its comments).
 //
 // Props:
 //   post   the announcement's AT URI (at://did/app.bsky.feed.post/rkey).
-//   label   the small words on the button above "Atmosphere Account"
-//           (default "Respond with your").
+//   label   the sign-in form's heading
+//           (default "Sign in to leave a comment, like or repost").
+//   blueskyLink  "Rather not sign in here? Reply on Bluesky instead →" under the
+//           sign-in form (default true; false hides it).
 //   credit  a small "Powered by Atmosphere Comments for Astro" link under the
 //           comments (default true; false hides it).
 //
 // Quote shows a preview of the reader's post with the announcement quoted
 // inside, avatars and link-card picture included (passed on by this site).
 //
-// Typing @ and the start of a handle suggests accounts to mention.
+// Typing @ and the start of a handle suggests accounts to mention, and typing
+// in the sign-in box suggests matching accounts to sign in with.
 //
 // Comments: under every element on the page with a `data-atmosphere-uri`
 // attribute (a comment's AT URI) the component adds Reply, Like and Repost.
@@ -30,6 +33,8 @@
 // can show it straight away.
 import logo from "../assets/union.svg?url";
 import settings from "../lib/settings";
+import { messagesFor, pickLocale, translate, translateHtml } from "../lib/i18n";
+import { escapeHtml } from "../lib/translate";
 
 interface Props {
   /**
@@ -38,80 +43,127 @@ interface Props {
    * is used to find it.
    */
   post?: string;
+  /** The sign-in form's heading. */
   label?: string;
   /** The badge on comments by the site's own accounts. */
   authorLabel?: string;
   /** A small "Powered by Atmosphere Comments for Astro" link under the comments. Default true. */
   credit?: boolean;
+  /** "Rather not sign in here? Reply on Bluesky instead →" under the sign-in form. Default true. */
+  blueskyLink?: boolean;
+  /** The language of the wording, e.g. "fr". Overrides the integration's `locale`. */
+  locale?: string;
+  /** Your own wording for any line, by its key in locales/en.json. */
+  messages?: Record<string, string>;
 }
 
-const { post = "", label = "Respond with your", authorLabel = "Author", credit = true } = Astro.props;
+const { post = "", label, authorLabel, credit = true, blueskyLink = true } = Astro.props;
+// The wording: the language asked for (or Astro's i18n locale for the page),
+// with the site's own lines on top. The script gets the same, as JSON.
+const lang = pickLocale(Astro.props.locale, settings.locale, Astro.currentLocale);
+const messages = messagesFor(lang, {
+  ...settings.messages,
+  ...Astro.props.messages,
+  ...(label && { "signIn.heading": label }),
+  ...(authorLabel && { "comment.author": authorLabel }),
+});
+const t = (key: string, vars?: Record<string, string | number>) => translate(messages, lang, key, vars);
+const th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
+const link = (href: string | undefined, text: string, attributes = "") =>
+  `<a${href ? ` href="${escapeHtml(href)}"` : ""}${attributes}>${escapeHtml(text)}</a>`;
+// The announcement on bsky.app, when the page is given it (otherwise the
+// script fills it in once the thread has loaded).
+const atUri = post.match(/^at:\/\/([^/]+)\/app\.bsky\.feed\.post\/([^/]+)$/);
+const blueskyUrl = atUri
+  ? `https://bsky.app/profile/${atUri[1]}/post/${atUri[2]}`
+  : /^https:\/\/bsky\.app\/profile\/[^/]+\/post\/[^/]+$/.test(post)
+    ? post
+    : "";
 const CREDIT_URL = "https://saltedlolly.com/atmosphere-comments-for-astro/";
 const { base } = settings;
 const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 ---
 
-<atmosphere-comments class="atmo" id="atmosphere-comments" data-post={post} data-base={base} data-author-label={authorLabel}>
+<atmosphere-comments class="atmo" id="atmosphere-comments" data-post={post} data-base={base} data-locale={lang} data-messages={JSON.stringify(messages)}>
   <div class="atmo-reactions" data-reactions data-pagefind-ignore hidden></div>
 
   <div class="atmo__signed-out" data-view="signed-out" data-pagefind-ignore>
-    <button type="button" class="atmo__badge-button" data-open-login aria-expanded="false" aria-controls="atmo-login" hidden>
-      <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
-      <span class="atmo__badge-text">
-        <span class="atmo__badge-small">{label}</span>
-        <span class="atmo__badge-big">Atmosphere Account</span>
-      </span>
-    </button>
     <form class="atmo__login" id="atmo-login" method="post" action={`${base}/login`} data-login-form>
-      <label for="atmo-handle">Sign in to leave a comment, like or repost</label>
-      <p class="atmo__hint">Any <a href="https://atmosphereaccount.com">Atmosphere account</a> works, including <a href="https://bsky.app">Bluesky</a>: one account for a whole network of open apps.</p>
+      <label for="atmo-handle">{t("signIn.heading")}</label>
+      <p
+        class="atmo__hint"
+        set:html={th("signIn.anyAccount", {
+          atmosphereAccount: link("https://atmosphereaccount.com", t("signIn.atmosphereAccount")),
+          bluesky: link("https://bsky.app", "Bluesky"),
+        })}
+      />
       <div class="atmo__row">
-        <input
+        <span class="atmo__handle">
+          <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
+          <input
           id="atmo-handle"
           name="handle"
           type="text"
           inputmode="url"
-          autocomplete="username"
+          data-1p-ignore
+          data-lpignore="true"
+          data-bwignore
+          data-form-type="other"
           autocapitalize="none"
           spellcheck="false"
           placeholder="alice.bsky.social"
           required
-        />
+          />
+          <ul class="atmo__suggestions" id="atmo-handle-suggestions" role="listbox" aria-label={t("signIn.matchingAccounts")} data-handle-suggestions hidden></ul>
+        </span>
         <input type="hidden" name="returnTo" value={returnTo} />
-        <button type="submit" class="atmo__button">Continue</button>
+        <button type="submit" class="atmo__button atmo__button--sign-in">
+          <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
+          {t("signIn.button")}
+        </button>
       </div>
-      <p class="atmo__hint">
-        You'll approve this on your account's own site (Bluesky's, for most people); your password
-        is never shared here.
-        No account yet? <a href="https://atmosphereaccount.com">Create a free Atmosphere account</a>.
-      </p>
+      <p
+        class="atmo__hint"
+        set:html={th("signIn.privacy", { createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")) })}
+      />
     </form>
+    {blueskyLink && (
+      <p
+        class="atmo__elsewhere"
+        data-elsewhere
+        hidden={!blueskyUrl}
+        set:html={th("elsewhere.text", {
+          // u-syndication: microformats readers learn this is the post's copy on Bluesky.
+          link: link(blueskyUrl || undefined, t("elsewhere.link"), ' class="atmo__elsewhere-link u-syndication" data-elsewhere-link'),
+        })}
+      />
+    )}
   </div>
 
   <div class="atmo__signed-in" data-view="signed-in" data-pagefind-ignore hidden>
-    <div class="atmo__actions" role="group" aria-label="Respond to this post">
+    <div class="atmo__actions" role="group" aria-label={t("actions.label")}>
       <button type="button" class="atmo__action" data-react="like" aria-pressed="false">
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.4-7.5-10.1A4.4 4.4 0 0 1 12 7.6a4.4 4.4 0 0 1 7.5 2.8c0 5.7-7.5 10.1-7.5 10.1Z" /></svg>
-        <span data-label-off>Like</span><span data-label-on>Liked</span>
+        <span data-label-off>{t("actions.like")}</span><span data-label-on>{t("actions.liked")}</span>
       </button>
       <button type="button" class="atmo__action" data-react="repost" aria-pressed="false">
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 8h10l-3-3M17 16H7l3 3M5 13V9.5A1.5 1.5 0 0 1 6.5 8M19 11v3.5a1.5 1.5 0 0 1-1.5 1.5" /></svg>
-        <span data-label-off>Repost</span><span data-label-on>Reposted</span>
+        <span data-label-off>{t("actions.repost")}</span><span data-label-on>{t("actions.reposted")}</span>
       </button>
       <button type="button" class="atmo__action" data-quote>
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 18h5v-5H6.5A4.5 4.5 0 0 1 11 8.5V7a6 6 0 0 0-6 6Zm9 0h5v-5h-3.5A4.5 4.5 0 0 1 20 8.5V7a6 6 0 0 0-6 6Z" /></svg>
-        <span>Quote</span>
+        <span>{t("actions.quote")}</span>
       </button>
     </div>
 
     <form class="atmo__composer" data-composer>
       <p class="atmo__context" data-context hidden>
         <span data-context-text></span>
-        <button type="button" class="atmo__link-button" data-cancel-context>Cancel</button>
+        <button type="button" class="atmo__link-button" data-cancel-context>{t("composer.cancel")}</button>
       </p>
       <label for="atmo-text" class="atmo__as">
         <span class="atmo__avatar atmo__avatar--me" data-me-avatar aria-hidden="true"></span>
-        <span><span data-verb>Comment</span> as <strong data-handle></strong></span>
+        <span set:html={th("composer.commentAs", { verb: `<span data-verb>${escapeHtml(t("composer.comment"))}</span>`, handle: "<strong data-handle></strong>" })} />
       </label>
       <div class="atmo__field">
         <textarea
@@ -122,14 +174,14 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           aria-autocomplete="list"
           aria-controls="atmo-suggestions"
           aria-expanded="false"></textarea>
-        <ul class="atmo__suggestions" id="atmo-suggestions" role="listbox" aria-label="Accounts to mention" data-suggestions hidden></ul>
+        <ul class="atmo__suggestions" id="atmo-suggestions" role="listbox" aria-label={t("composer.mentions")} data-suggestions hidden></ul>
       </div>
       <figure class="atmo__preview" data-preview hidden>
-        <figcaption>How your post will look</figcaption>
+        <figcaption>{t("composer.previewCaption")}</figcaption>
         <div class="atmo__preview-post">
           <span class="atmo__avatar" data-preview-avatar aria-hidden="true"></span>
           <div class="atmo__preview-body">
-            <p class="atmo__preview-author"><strong data-preview-name></strong> <span data-preview-handle></span> <span>· now</span></p>
+            <p class="atmo__preview-author"><strong data-preview-name></strong> <span data-preview-handle></span> <span>· {t("composer.now")}</span></p>
             <p class="atmo__preview-text" data-preview-text></p>
             <div class="atmo__quoted">
               <p class="atmo__preview-author">
@@ -151,8 +203,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       </figure>
       <div class="atmo__row atmo__row--end">
         <span class="atmo__count" data-count aria-live="polite"></span>
-        <button type="button" class="atmo__link-button" data-sign-out>Sign out</button>
-        <button type="submit" class="atmo__button" data-submit>Post comment</button>
+        <button type="button" class="atmo__link-button" data-sign-out>{t("composer.signOut")}</button>
+        <button type="submit" class="atmo__button" data-submit>{t("composer.postComment")}</button>
       </div>
     </form>
   </div>
@@ -168,27 +220,31 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
   <slot />
 
   {credit && (
-    <p class="atmo__credit" data-credit data-pagefind-ignore>
-      Powered by <a href={CREDIT_URL}>Atmosphere Comments for Astro</a>
-    </p>
+    <p class="atmo__credit" data-credit data-pagefind-ignore set:html={th("credit", { link: link(CREDIT_URL, "Atmosphere Comments for Astro") })} />
   )}
 </atmosphere-comments>
 
 <script>
+  import { translate } from "../lib/translate";
+
   const MAX = 300;
   const graphemes = new Intl.Segmenter();
   const count = (text: string) => [...graphemes.segment(text.trim())].length;
 
-  const MESSAGES: Record<string, string> = {
-    "signed-in": "You're signed in. You can comment, like or repost above.",
-    "sign-in-failed": "Signing in didn't finish. Please try again.",
-    "account-not-found": "We couldn't find that account. Check the handle and try again.",
-    "invalid-handle": "That doesn't look like a handle. It's usually something like alice.bsky.social.",
-    "signed-out": "You've been signed out. Please sign in again.",
-    "new-permissions": "This site can now also like and repost for you, so it needs your permission again. Please sign in again.",
-    "too-long": `Posts can be up to ${MAX} characters.`,
-    "too-many": "You're going quickly. Please wait a minute and try again.",
-    error: "That didn't work. Please try again.",
+  // The error and status codes the routes and the sign-in round trip send,
+  // and the wording for each (in locales/*.json).
+  const MESSAGE_KEYS: Record<string, string> = {
+    "signed-in": "messages.signedIn",
+    "sign-in-failed": "messages.signInFailed",
+    "account-not-found": "messages.accountNotFound",
+    "invalid-handle": "messages.invalidHandle",
+    "signed-out": "messages.signedOut",
+    "needs-permission": "messages.needsPermission",
+    "not-allowed": "messages.notAllowed",
+    "new-permissions": "messages.newPermissions",
+    "too-long": "messages.tooLong",
+    "too-many": "messages.tooMany",
+    error: "messages.error",
   };
 
   type Posted = { uri: string; url: string; quote: boolean };
@@ -197,6 +253,11 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
   class AtmosphereComments extends HTMLElement {
     connectedCallback() {
       const base = this.dataset.base ?? "/atmosphere";
+      // The wording, in the page's language, from the server.
+      const lang = this.dataset.locale || "en";
+      const wording = JSON.parse(this.dataset.messages || "{}") as Record<string, string>;
+      const t = (key: string, vars?: Record<string, string | number>) => translate(wording, lang, key, vars);
+      const message = (code: string) => t(MESSAGE_KEYS[code] ?? MESSAGE_KEYS.error, { max: MAX });
       // The announcement's AT URI. A bsky.app address or the page's
       // Standard.site record is turned into one when the thread loads.
       let post = this.dataset.post?.startsWith("at://") ? this.dataset.post : "";
@@ -206,7 +267,6 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const composer = $<HTMLFormElement>("[data-composer]");
       // A clean copy of the comment box, for reply boxes under comments.
       const template = composer.cloneNode(true) as HTMLFormElement;
-      const loginButton = $<HTMLButtonElement>("[data-open-login]");
       const loginForm = $<HTMLFormElement>("[data-login-form]");
       const status = $<HTMLElement>("[data-status]");
       let isSignedIn = false;
@@ -245,13 +305,13 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         likeCount: number;
         repostCount: number;
       };
-      type Thread = { uri: string; likeCount: number; repostCount: number; likes: Person[]; reposts: Person[]; replies: Reply[] };
+      type Thread = { uri: string; url: string; likeCount: number; repostCount: number; likes: Person[]; reposts: Person[]; replies: Reply[] };
       let thread: Thread | null = null;
       const reactionsBox = $<HTMLElement>("[data-reactions]");
       const repliesList = $<HTMLOListElement>("[data-replies]");
-      const authorLabel = this.dataset.authorLabel || "Author";
+      const authorLabel = t("comment.author");
       const nameOf = (person: Pick<Person, "handle" | "displayName">) => person.displayName || `@${person.handle}`;
-      const dates = new Intl.DateTimeFormat(document.documentElement.lang || undefined, {
+      const dates = new Intl.DateTimeFormat(lang, {
         day: "numeric",
         month: "long",
         year: "numeric",
@@ -280,7 +340,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           ...groups.map(({ kind, count, people }) => {
             const group = make("div", "atmo-reactions__group");
             group.dataset.reaction = kind;
-            group.append(make("p", "atmo-reactions__count", `${count} ${kind}${count === 1 ? "" : "s"}`));
+            group.append(make("p", "atmo-reactions__count", t(kind === "like" ? "reactions.likes" : "reactions.reposts", { count })));
             const faces = make("ul", "atmo-facepile");
             for (const person of people) {
               const link = Object.assign(make("a"), { href: person.url, title: nameOf(person), rel: "ugc nofollow noopener" });
@@ -313,7 +373,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         if (reply.byAuthor) who.append(make("span", "atmo-comment__badge", authorLabel));
         const date = Object.assign(make("a", "atmo-comment__date"), { href: reply.url, rel: "ugc nofollow noopener" });
         const time = Object.assign(make("time"), { dateTime: reply.createdAt, textContent: reply.createdAt ? dates.format(new Date(reply.createdAt)) : "" });
-        date.append(time, make("span", "", " · view on Bluesky"));
+        date.append(time, make("span", "", ` · ${t("comment.viewOnBluesky")}`));
         const names = make("div");
         names.append(who, date);
         const header = make("header", "atmo-comment__header");
@@ -359,6 +419,11 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           }
           thread = data.thread;
           post = thread.uri;
+          const elsewhere = this.querySelector<HTMLElement>("[data-elsewhere]");
+          if (elsewhere && thread.url) {
+            elsewhere.querySelector("a")!.href = thread.url;
+            elsewhere.hidden = false;
+          }
           renderReactions();
           repliesList.replaceChildren(...thread.replies.map(replyElement));
         } catch {
@@ -404,19 +469,100 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         renderReactions();
       };
 
-      // With JavaScript, the handle form opens from the Atmosphere button.
-      loginButton.hidden = false;
-      loginForm.hidden = true;
-      const openLogin = () => {
-        loginForm.hidden = false;
-        loginButton.setAttribute("aria-expanded", "true");
-        loginForm.querySelector("input")?.focus();
-      };
-      loginButton.addEventListener("click", () => {
-        if (loginForm.hidden) return openLogin();
-        loginForm.hidden = true;
-        loginButton.setAttribute("aria-expanded", "false");
-      });
+      const openLogin = () => loginForm.querySelector("input")?.focus({ preventScroll: true });
+
+      // Matching accounts under the handle box as the reader types, with their
+      // avatars, so they can see they've found the right one. Picking one signs
+      // in with it. Without JavaScript the box works as a plain text box.
+      {
+        const input = loginForm.querySelector<HTMLInputElement>("#atmo-handle")!;
+        const list = loginForm.querySelector<HTMLUListElement>("[data-handle-suggestions]")!;
+        let found: Suggestion[] = [];
+        let active = -1;
+        let latest = "";
+        let timer: number | undefined;
+        input.setAttribute("role", "combobox");
+        input.setAttribute("aria-autocomplete", "list");
+        input.setAttribute("aria-controls", list.id);
+        input.setAttribute("aria-expanded", "false");
+
+        const close = () => {
+          list.hidden = true;
+          list.replaceChildren();
+          found = [];
+          active = -1;
+          input.setAttribute("aria-expanded", "false");
+          input.removeAttribute("aria-activedescendant");
+        };
+        const highlight = (index: number) => {
+          active = index;
+          list.querySelectorAll("li").forEach((item, i) => item.setAttribute("aria-selected", String(i === index)));
+          if (index >= 0) input.setAttribute("aria-activedescendant", `${list.id}-option-${index}`);
+          else input.removeAttribute("aria-activedescendant");
+        };
+        const choose = (index: number) => {
+          const option = found[index];
+          if (!option) return;
+          input.value = option.handle;
+          close();
+          loginForm.requestSubmit();
+        };
+        const show = (actors: Suggestion[]) => {
+          found = actors.slice(0, 5);
+          if (!found.length || document.activeElement !== input) return close();
+          list.replaceChildren(
+            ...found.map((option, index) => {
+              const item = make("li");
+              item.id = `${list.id}-option-${index}`;
+              item.setAttribute("role", "option");
+              const avatar = make("span", "atmo__avatar atmo__avatar--small");
+              avatar.setAttribute("aria-hidden", "true");
+              setAvatar(avatar, option.displayName || option.handle, option.avatar);
+              item.append(avatar, make("strong", "", option.displayName || option.handle), make("span", "", `@${option.handle}`));
+              // mousedown keeps the focus in the handle box.
+              item.addEventListener("mousedown", (event) => event.preventDefault());
+              item.addEventListener("click", () => choose(index));
+              return item;
+            }),
+          );
+          list.hidden = false;
+          input.setAttribute("aria-expanded", "true");
+          // Nothing is picked until the reader chooses, so Enter still signs in
+          // with exactly what they typed.
+          highlight(-1);
+        };
+
+        input.addEventListener("input", () => {
+          window.clearTimeout(timer);
+          const query = input.value.trim().replace(/^@/, "");
+          latest = query;
+          if (query.length < 2 || query.startsWith("did:") || /\s/.test(query)) return close();
+          timer = window.setTimeout(async () => {
+            try {
+              const response = await fetch(`${base}/typeahead?q=${encodeURIComponent(query)}`, { credentials: "same-origin" });
+              const data = (await response.json()) as { actors?: Suggestion[] };
+              if (query === latest) show(data.actors ?? []);
+            } catch {
+              close();
+            }
+          }, 250);
+        });
+        input.addEventListener("keydown", (event) => {
+          if (list.hidden) return;
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            const step = event.key === "ArrowDown" ? 1 : -1;
+            highlight(active < 0 && step < 0 ? found.length - 1 : (active + step + found.length) % found.length);
+          } else if (event.key === "Enter" && active >= 0) {
+            event.preventDefault();
+            choose(active);
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            close();
+          }
+        });
+        input.addEventListener("blur", () => window.setTimeout(close, 150));
+      }
 
       // An avatar picture, or the name's first letter if there isn't one.
       const setAvatar = (slot: HTMLElement, name: string, src?: string) => {
@@ -429,13 +575,13 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 
       const handleError = (error: string, tell: (message: string) => void = say) => {
         if (error === "signed-out" || error === "new-permissions") void show(false);
-        tell(MESSAGES[error] ?? MESSAGES.error);
+        tell(message(error));
       };
 
       const postedMessage = (where: HTMLElement, data: Posted) =>
         where.replaceChildren(
-          data.quote ? "Your quote post is on Bluesky. " : "Your comment is posted. ",
-          Object.assign(document.createElement("a"), { href: data.url, textContent: "See it on Bluesky →" }),
+          `${t(data.quote ? "posted.quote" : "posted.comment")} `,
+          Object.assign(document.createElement("a"), { href: data.url, textContent: t("posted.see") }),
         );
 
       // Everything a comment box does: counting characters, @mention
@@ -456,7 +602,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 
         const updateCount = () => {
           const used = count(textarea.value);
-          counter.textContent = used > MAX - 50 ? `${MAX - used} left` : "";
+          counter.textContent = used > MAX - 50 ? t("composer.charactersLeft", { count: MAX - used }) : "";
           counter.classList.toggle("is-over", used > MAX);
         };
 
@@ -563,9 +709,9 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           event.preventDefault();
           const text = textarea.value.trim();
           if (!text) return;
-          if (count(text) > MAX) return behaviour.tell(MESSAGES["too-long"]);
+          if (count(text) > MAX) return behaviour.tell(message("too-long"));
           submit.disabled = true;
-          behaviour.tell("Posting…");
+          behaviour.tell(t("composer.posting"));
           try {
             const response = await send("comment", { text, root: post, ...behaviour.extra() });
             const data = await response.json();
@@ -576,7 +722,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             showPosted(data);
             this.dispatchEvent(new CustomEvent("atmosphere:commented", { detail: data, bubbles: true }));
           } catch {
-            behaviour.tell(MESSAGES.error);
+            behaviour.tell(message("error"));
           } finally {
             submit.disabled = false;
           }
@@ -592,7 +738,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       let quotedLoaded = false;
       const updatePreviewText = () => {
         const words = main.textarea.value.trim();
-        previewText.textContent = words || "Your words appear here.";
+        previewText.textContent = words || t("composer.previewEmpty");
         previewText.classList.toggle("is-placeholder", !words);
       };
       const loadQuoted = async () => {
@@ -634,9 +780,9 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         mainMode = next;
         const quoting = next === "quote";
         $<HTMLElement>("[data-context]").hidden = !quoting;
-        $<HTMLElement>("[data-context-text]").textContent = quoting ? "Quoting this post on your own account" : "";
-        $<HTMLElement>("[data-verb]").textContent = quoting ? "Quote" : "Comment";
-        $<HTMLElement>("[data-submit]").textContent = quoting ? "Post quote" : "Post comment";
+        $<HTMLElement>("[data-context-text]").textContent = quoting ? t("composer.quoting") : "";
+        $<HTMLElement>("[data-verb]").textContent = t(quoting ? "composer.quote" : "composer.comment");
+        $<HTMLElement>("[data-submit]").textContent = t(quoting ? "composer.postQuote" : "composer.postComment");
         preview.hidden = !quoting;
         if (quoting) void loadQuoted();
       };
@@ -677,8 +823,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         suggestions.id = `${id}-suggestions`;
         textarea.setAttribute("aria-controls", suggestions.id);
         form.querySelector<HTMLElement>("[data-context]")!.hidden = false;
-        form.querySelector("[data-context-text]")!.textContent = `Replying to ${author}`;
-        form.querySelector("[data-verb]")!.textContent = "Reply";
+        form.querySelector("[data-context-text]")!.textContent = t("composer.replyingTo", { name: author });
+        form.querySelector("[data-verb]")!.textContent = t("comment.reply");
         form.querySelector("[data-submit]")!.textContent = "Post reply";
         form.querySelector("[data-handle]")!.textContent = me.handle ? `@${me.handle}` : "";
         setAvatar(form.querySelector<HTMLElement>("[data-me-avatar]")!, me.displayName || me.handle || "?", me.avatar);
@@ -717,8 +863,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         button.dataset.kind = kind;
         const seen = known[comment.dataset.atmosphereUri!];
         button.setAttribute("aria-pressed", String(!!(kind === "like" ? seen?.liked : seen?.reposted)));
-        const author = comment.dataset.atmosphereAuthor || "this comment";
-        button.setAttribute("aria-label", `${kind === "like" ? "Like" : "Repost"} ${author}'s comment`);
+        const author = comment.dataset.atmosphereAuthor || t("comment.someone");
+        button.setAttribute("aria-label", t(kind === "like" ? "comment.likeLabel" : "comment.repostLabel", { name: author }));
         const count = Number(comment.dataset[kind === "like" ? "atmosphereLikes" : "atmosphereReposts"] || 0);
         button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${kind === "like" ? HEART : ARROWS}</svg><span></span>`;
         const setCount = (value: number) => {
@@ -727,7 +873,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         };
         setCount(count);
         button.addEventListener("click", async () => {
-          if (!isSignedIn) return signInFirst(`Sign in to ${kind} comments.`);
+          if (!isSignedIn) return signInFirst(t(kind === "like" ? "signInFirst.like" : "signInFirst.repost"));
           const on = button.getAttribute("aria-pressed") !== "true";
           const before = Number(button.dataset.count || 0);
           button.setAttribute("aria-pressed", String(on));
@@ -751,23 +897,103 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           if (comment.querySelector(":scope .atmo-comment-actions")) return;
           added += 1;
           const actions = Object.assign(document.createElement("div"), { className: "atmo-comment-actions" });
-          const author = comment.dataset.atmosphereAuthor || "this comment";
+          const author = comment.dataset.atmosphereAuthor || t("comment.someone");
           const reply = Object.assign(document.createElement("button"), {
             type: "button",
             className: "atmo-comment-action",
-            textContent: "Reply",
+            textContent: t("comment.reply"),
           });
-          reply.setAttribute("aria-label", `Reply to ${author}`);
+          reply.setAttribute("aria-label", t("comment.replyTo", { name: author }));
           reply.addEventListener("click", () => {
-            if (!isSignedIn) return signInFirst("Sign in to reply.");
+            if (!isSignedIn) return signInFirst(t("signInFirst.reply"));
             openReply(comment, author);
           });
           actions.append(reply, commentButton("like", comment), commentButton("repost", comment));
           (comment.querySelector("article") ?? comment).append(actions);
         });
+        addDeleteButtons();
         return added;
       };
 
+      // Delete, under the signed-in reader's own comments only.
+      const isMine = (comment: HTMLElement) => !!me.did && !!comment.dataset.atmosphereUri?.startsWith(`at://${me.did}/`);
+
+      const deleteComment = async (comment: HTMLElement, panel: HTMLElement) => {
+        const uri = comment.dataset.atmosphereUri!;
+        panel.replaceChildren(make("span", "atmo-comment-delete__text", t("comment.deleting")));
+        try {
+          const response = await send("delete", { post: uri });
+          const data = (await response.json()) as { error?: string };
+          if (response.ok) {
+            comment.remove();
+            say(t("comment.deleted"));
+            this.dispatchEvent(new CustomEvent("atmosphere:deleted", { detail: { uri }, bubbles: true }));
+            return;
+          }
+          if (data.error === "needs-permission") return askDeletePermission(comment, panel);
+          panel.remove();
+          handleError(data.error ?? "error");
+        } catch {
+          panel.remove();
+          say(message("error"));
+        }
+      };
+
+      // Deleting posts isn't part of signing in, so the first delete asks the
+      // reader's account host for it, then carries on when they come back.
+      const askDeletePermission = (comment: HTMLElement, panel: HTMLElement) => {
+        const form = Object.assign(document.createElement("form"), { method: "post", action: `${base}/login` });
+        const field = (name: string, value: string) =>
+          form.append(Object.assign(document.createElement("input"), { type: "hidden", name, value }));
+        field("handle", me.did!);
+        field("permission", "delete");
+        field("returnTo", `${location.pathname}#atmo-delete=${encodeURIComponent(comment.dataset.atmosphereUri!)}`);
+        const go = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", t("comment.continue")), { type: "submit" });
+        const cancel = Object.assign(make("button", "atmo-comment-action", t("comment.cancel")), { type: "button" });
+        cancel.addEventListener("click", () => panel.remove());
+        form.append(go, cancel);
+        panel.replaceChildren(
+          make(
+            "span",
+            "atmo-comment-delete__text",
+            t("comment.deletePermission"),
+          ),
+          form,
+        );
+        go.focus();
+      };
+
+      const deleteButton = (comment: HTMLElement) => {
+        const button = Object.assign(make("button", "atmo-comment-action atmo-comment-action--delete", t("comment.delete")), { type: "button" });
+        button.setAttribute("aria-label", t("comment.deleteLabel"));
+        button.addEventListener("click", () => {
+          const actions = button.parentElement!;
+          if (actions.nextElementSibling?.matches(".atmo-comment-delete")) return;
+          const panel = make("div", "atmo-comment-delete");
+          const yes = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", t("comment.delete")), { type: "button" });
+          const no = Object.assign(make("button", "atmo-comment-action", t("comment.cancel")), { type: "button" });
+          yes.addEventListener("click", () => deleteComment(comment, panel));
+          no.addEventListener("click", () => {
+            panel.remove();
+            button.focus();
+          });
+          panel.append(make("span", "atmo-comment-delete__text", t("comment.deleteConfirm")), yes, no);
+          panel.setAttribute("role", "group");
+          panel.setAttribute("aria-label", t("comment.deleteLabel"));
+          actions.after(panel);
+          no.focus();
+        });
+        return button;
+      };
+
+      const addDeleteButtons = () => {
+        document.querySelectorAll<HTMLElement>("[data-atmosphere-uri]").forEach((comment) => {
+          const actions = comment.querySelector<HTMLElement>(":scope .atmo-comment-actions");
+          if (!actions || actions.querySelector(".atmo-comment-action--delete")) return;
+          if (isSignedIn && isMine(comment)) actions.append(deleteButton(comment));
+        });
+      };
+
       // Which of the post and its comments the reader has already liked or reposted.
       const loadState = async () => {
         if (!post) return;
@@ -809,16 +1035,33 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         isSignedIn = signed;
         signedOut.hidden = signed;
         signedIn.hidden = !signed;
-        if (!signed) return closeReplies();
+        if (!signed) {
+          document.querySelectorAll(".atmo-comment-action--delete, .atmo-comment-delete").forEach((part) => part.remove());
+          return closeReplies();
+        }
         addCommentActions();
         await loadState();
+        // Back from approving the delete permission: finish the delete they asked for.
+        const pending = location.hash.match(/^#atmo-delete=(.+)$/);
+        if (pending) {
+          history.replaceState(history.state, "", `${location.pathname}${location.search}#atmosphere-comments`);
+          const uri = decodeURIComponent(pending[1]);
+          const comment = document.querySelector<HTMLElement>(`[data-atmosphere-uri="${CSS.escape(uri)}"]`);
+          const actions = comment?.querySelector<HTMLElement>(":scope .atmo-comment-actions");
+          if (comment && actions && isMine(comment)) {
+            const panel = make("div", "atmo-comment-delete");
+            actions.after(panel);
+            comment.scrollIntoView({ block: "center" });
+            await deleteComment(comment, panel);
+          }
+        }
       };
 
       // A message from the sign-in round trip (?atmosphere=…), then tidy the address.
       const url = new URL(location.href);
       const result = url.searchParams.get("atmosphere");
       if (result) {
-        say(MESSAGES[result] ?? "");
+        say(MESSAGE_KEYS[result] ? message(result) : "");
         url.searchParams.delete("atmosphere");
         history.replaceState(history.state, "", url);
       }
@@ -857,7 +1100,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
               setPressed(kind, !on);
               return handleError((await response.json()).error);
             }
-            say(on ? (kind === "like" ? "Liked." : "Reposted.") : kind === "like" ? "Like removed." : "Repost removed.");
+            say(t(on ? (kind === "like" ? "status.liked" : "status.reposted") : kind === "like" ? "status.likeRemoved" : "status.repostRemoved"));
             showReaction(kind, on);
             this.dispatchEvent(
               new CustomEvent("atmosphere:reacted", {
@@ -867,7 +1110,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             );
           } catch {
             setPressed(kind, !on);
-            say(MESSAGES.error);
+            say(message("error"));
           }
         });
       }
@@ -876,7 +1119,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         await fetch(`${base}/logout`, { method: "POST", credentials: "same-origin" }).catch(() => undefined);
         void show(false);
         setMainMode("comment");
-        say("You're signed out.");
+        say(t("status.signedOut"));
       });
     }
   }
@@ -900,50 +1143,49 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     display: none !important;
   }
 
-  /* The button follows the Atmosphere Account sign-in badge: the logo, then
-     two lines of monospaced text, in a rounded outline. */
-  .atmo__badge-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    padding: 9px 16px 9px 12px;
-    border: 2px solid currentColor;
-    border-radius: 12px;
-    background: none;
-    color: var(--atmo-text, currentColor);
-    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-    text-align: left;
-    cursor: pointer;
+  /* The Atmosphere Account logo inside the handle box, on the left, and at
+     the start of the sign-in button. It is single-colour, so it is drawn in
+     the muted text colour in the box and the button's text colour on it. */
+  .atmo__handle {
+    position: relative;
+    display: flex;
+    flex: 1 1 220px;
+    min-width: 0;
   }
 
-  .atmo__badge-button:hover,
-  .atmo__badge-button:focus-visible,
-  .atmo__badge-button[aria-expanded="true"] {
-    color: var(--atmo-accent, #1185fe);
+  /* Matching accounts sit under the handle box, as wide as it. */
+  .atmo__handle .atmo__suggestions {
+    width: 100%;
   }
 
-  /* The logo is single-colour, so it is drawn in the text colour. */
-  .atmo__logo {
-    flex: none;
-    width: 40px;
-    height: 40px;
-    background-color: currentColor;
+  .atmo__handle .atmo__logo {
+    position: absolute;
+    top: 50%;
+    left: 11px;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    background-color: var(--atmo-muted, currentColor);
     mask: var(--atmo-logo) center / contain no-repeat;
+    pointer-events: none;
   }
 
-  .atmo__badge-text {
-    display: grid;
-    line-height: 1.15;
+  .atmo .atmo__handle input[type="text"] {
+    padding-left: 40px;
   }
 
-  .atmo__badge-small {
-    font-size: 13px;
+  .atmo__button--sign-in {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
   }
 
-  .atmo__badge-big {
-    font-size: 19px;
-    font-weight: 700;
-    white-space: nowrap;
+  .atmo__button--sign-in .atmo__logo {
+    flex: none;
+    width: 20px;
+    height: 20px;
+    background-color: currentColor;
+    mask: var(--atmo-logo) center / contain no-repeat;
   }
 
   /* The comment box when it sits under a comment being replied to. */
@@ -955,6 +1197,16 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     margin-top: 10px;
   }
 
+  .atmo__elsewhere {
+    max-width: 560px;
+    margin: 14px 0 0;
+    font-size: 0.9em;
+  }
+
+  .atmo__elsewhere :global(.atmo__elsewhere-link) {
+    font-weight: 700;
+  }
+
   .atmo__login,
   .atmo__composer {
     display: grid;
@@ -1111,7 +1363,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     opacity: 0.8;
   }
 
-  .atmo__credit a {
+  .atmo__credit :global(a) {
     color: inherit;
   }
 
@@ -1459,6 +1711,24 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     margin-top: 8px;
   }
 
+  :global(.atmo-comment-delete) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 12px;
+    margin-top: 8px;
+    font-size: 0.9em;
+  }
+
+  :global(.atmo-comment-delete form) {
+    display: contents;
+  }
+
+  :global(.atmo-comment-delete__text) {
+    color: var(--atmo-muted, inherit);
+  }
+
+
   :global(.atmo-comment-action) {
     display: inline-flex;
     align-items: center;
@@ -1473,6 +1743,15 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     cursor: pointer;
   }
 
+  :global(.atmo-comment-action--delete) {
+    margin-left: auto;
+  }
+
+  :global(.atmo-comment-action--danger) {
+    color: var(--atmo-danger, #c0392b);
+    font-weight: 700;
+  }
+
   :global(.atmo-comment-action:hover),
   :global(.atmo-comment-action:focus-visible),
   :global(.atmo-comment-action[aria-pressed="true"]) {