astro-atmosphere-comments 0.2.0 → 0.4.0

package/lib/client/composer.ts

@@ -0,0 +1,232 @@
+// The comment box's behaviour: counting characters, @mention suggestions,
+// posting (as a reply, or a quote post), and the quote preview. Used by
+// AtmosphereComments (its main box and every reply box) and by the reply and
+// quote overlay of AtmosphereReactions. The markup is Composer.astro.
+
+export const MAX = 300; // Bluesky's limit for a post, in characters as people count them
+const graphemes = new Intl.Segmenter();
+export const count = (text: string) => [...graphemes.segment(text.trim())].length;
+
+export type Suggestion = { handle: string; displayName?: string; avatar?: string };
+export type Person = { did: string; handle: string; displayName?: string; avatar?: string };
+/** What the comment route answers with once something is posted. */
+export type Posted = {
+  uri: string;
+  url: string;
+  quote: boolean;
+  text: string;
+  createdAt: string;
+  parent: string | null;
+  author: Person;
+};
+
+export type ComposerContext = {
+  base: string;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+  /** The wording for an error code from the routes. */
+  message: (code: string) => string;
+  setAvatar: (slot: HTMLElement, name: string, src?: string) => void;
+};
+
+export type ComposerBehaviour = {
+  /** The post being replied to or quoted (the announcement, or another post by the site's accounts). */
+  root: () => string;
+  /** More for the comment route: { parent } for a reply to a comment, { quote: true } for a quote post. */
+  extra: () => Record<string, unknown>;
+  tell: (message: string) => void;
+  onPosted: (data: Posted) => void;
+  onError: (code: string, tell: (message: string) => void) => void;
+  onInput?: () => void;
+};
+
+export function setUpComposer(form: HTMLFormElement, ctx: ComposerContext, behaviour: ComposerBehaviour) {
+  const textarea = form.querySelector("textarea")!;
+  const counter = form.querySelector<HTMLElement>("[data-count]")!;
+  const submit = form.querySelector<HTMLButtonElement>("[data-submit]")!;
+  const suggestions = form.querySelector<HTMLUListElement>("[data-suggestions]")!;
+
+  const updateCount = () => {
+    const used = count(textarea.value);
+    counter.textContent = used > MAX - 50 ? ctx.t("composer.charactersLeft", { count: MAX - used }) : "";
+    counter.classList.toggle("is-over", used > MAX);
+  };
+
+  // @mention suggestions, as in the Bluesky app: typing @ and the start
+  // of a handle or name lists matching accounts to choose from.
+  let options: Suggestion[] = [];
+  let active = -1;
+  let lookup: number | undefined;
+  let latestQuery = "";
+  const mentionAtCaret = () => {
+    const before = textarea.value.slice(0, textarea.selectionStart);
+    const match = /(?:^|[\s(])@([a-zA-Z0-9.-]{1,64})$/.exec(before);
+    return match ? { query: match[1], start: before.length - match[1].length - 1 } : null;
+  };
+  const closeSuggestions = () => {
+    suggestions.hidden = true;
+    suggestions.replaceChildren();
+    options = [];
+    active = -1;
+    textarea.setAttribute("aria-expanded", "false");
+    textarea.removeAttribute("aria-activedescendant");
+  };
+  const highlight = (index: number) => {
+    active = index;
+    suggestions.querySelectorAll("li").forEach((item, i) => item.setAttribute("aria-selected", String(i === index)));
+    if (index >= 0) textarea.setAttribute("aria-activedescendant", `${suggestions.id}-option-${index}`);
+  };
+  const choose = (index: number) => {
+    const mention = mentionAtCaret();
+    const option = options[index];
+    if (!mention || !option) return closeSuggestions();
+    const after = textarea.value.slice(textarea.selectionStart);
+    textarea.value = `${textarea.value.slice(0, mention.start)}@${option.handle} ${after}`;
+    const caret = mention.start + option.handle.length + 2;
+    textarea.setSelectionRange(caret, caret);
+    closeSuggestions();
+    textarea.focus();
+    updateCount();
+    behaviour.onInput?.();
+  };
+  const showSuggestions = (found: Suggestion[]) => {
+    options = found;
+    if (!found.length) return closeSuggestions();
+    suggestions.replaceChildren(
+      ...found.map((option, index) => {
+        const item = document.createElement("li");
+        item.id = `${suggestions.id}-option-${index}`;
+        item.setAttribute("role", "option");
+        const avatar = document.createElement("span");
+        avatar.className = "atmo__avatar atmo__avatar--small";
+        ctx.setAvatar(avatar, option.displayName || option.handle, option.avatar);
+        const name = Object.assign(document.createElement("strong"), { textContent: option.displayName || option.handle });
+        const handle = Object.assign(document.createElement("span"), { textContent: `@${option.handle}` });
+        item.append(avatar, name, handle);
+        // mousedown keeps the focus in the text box.
+        item.addEventListener("mousedown", (event) => event.preventDefault());
+        item.addEventListener("click", () => choose(index));
+        return item;
+      }),
+    );
+    suggestions.hidden = false;
+    textarea.setAttribute("aria-expanded", "true");
+    highlight(0);
+  };
+  const lookUpMention = () => {
+    window.clearTimeout(lookup);
+    const mention = mentionAtCaret();
+    if (!mention) return closeSuggestions();
+    latestQuery = mention.query;
+    lookup = window.setTimeout(async () => {
+      const query = mention.query;
+      try {
+        const response = await fetch(`${ctx.base}/typeahead?q=${encodeURIComponent(query)}`, { credentials: "same-origin" });
+        const data = (await response.json()) as { actors?: Suggestion[] };
+        if (query === latestQuery) showSuggestions(data.actors ?? []);
+      } catch {
+        closeSuggestions();
+      }
+    }, 200);
+  };
+
+  textarea.addEventListener("input", () => {
+    updateCount();
+    behaviour.onInput?.();
+    lookUpMention();
+  });
+  textarea.addEventListener("keydown", (event) => {
+    if (suggestions.hidden) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      highlight((active + step + options.length) % options.length);
+    } else if (event.key === "Enter" || event.key === "Tab") {
+      event.preventDefault();
+      choose(Math.max(active, 0));
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      closeSuggestions();
+    }
+  });
+  textarea.addEventListener("blur", () => window.setTimeout(closeSuggestions, 150));
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const text = textarea.value.trim();
+    if (!text) return;
+    if (count(text) > MAX) return behaviour.tell(ctx.message("too-long"));
+    submit.disabled = true;
+    behaviour.tell(ctx.t("composer.posting"));
+    try {
+      const response = await fetch(`${ctx.base}/comment`, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ text, root: behaviour.root(), ...behaviour.extra() }),
+      });
+      const data = await response.json();
+      if (!response.ok) return behaviour.onError(data.error, behaviour.tell);
+      textarea.value = "";
+      updateCount();
+      behaviour.onPosted(data);
+    } catch {
+      behaviour.tell(ctx.message("error"));
+    } finally {
+      submit.disabled = false;
+    }
+  });
+
+  return { textarea, updateCount };
+}
+
+/**
+ * The quote preview inside a box: the reader's words as they type, with the
+ * post being quoted beneath, as Bluesky will show it. Call update() as they
+ * type and load(uri) when quoting starts.
+ */
+export function quotePreview(form: HTMLFormElement, textarea: HTMLTextAreaElement, ctx: ComposerContext) {
+  const $ = <T extends Element>(selector: string) => form.querySelector<T>(selector)!;
+  const previewText = $<HTMLElement>("[data-preview-text]");
+  let loaded = "";
+  const update = () => {
+    const words = textarea.value.trim();
+    previewText.textContent = words || ctx.t("composer.previewEmpty");
+    previewText.classList.toggle("is-placeholder", !words);
+  };
+  const load = async (uri: string) => {
+    update();
+    if (loaded === uri) return;
+    try {
+      const response = await fetch(`${ctx.base}/post?uri=${encodeURIComponent(uri)}`);
+      if (!response.ok) return;
+      const quoted = (await response.json()) as {
+        author: { handle: string; displayName?: string; avatar?: string };
+        text: string;
+        external?: { uri: string; title: string; description: string; thumb?: string };
+      };
+      loaded = uri;
+      const quotedName = quoted.author.displayName || quoted.author.handle;
+      $<HTMLElement>("[data-quoted-name]").textContent = quotedName;
+      ctx.setAvatar($<HTMLElement>("[data-quoted-avatar]"), quotedName, quoted.author.avatar);
+      $<HTMLElement>("[data-quoted-handle]").textContent = `@${quoted.author.handle}`;
+      $<HTMLElement>("[data-quoted-text]").textContent = quoted.text;
+      const card = $<HTMLElement>("[data-card]");
+      card.hidden = !quoted.external;
+      if (quoted.external) {
+        $<HTMLElement>("[data-card-title]").textContent = quoted.external.title;
+        $<HTMLElement>("[data-card-description]").textContent = quoted.external.description;
+        $<HTMLElement>("[data-card-domain]").textContent = new URL(quoted.external.uri).hostname;
+        const img = $<HTMLImageElement>("[data-card-image]");
+        img.hidden = true;
+        if (quoted.external.thumb) {
+          img.onload = () => (img.hidden = false);
+          img.onerror = () => (img.hidden = true);
+          img.src = quoted.external.thumb;
+        }
+      }
+    } catch {
+      // The preview is a nicety: quoting still works without it.
+    }
+  };
+  return { update, load };
+}

package/lib/client/handle-suggestions.ts

@@ -0,0 +1,112 @@
+// Matching accounts under a sign-in form's 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.
+// Used by AtmosphereComments and AtmosphereReactions (see SignInForm.astro).
+
+type Suggestion = { handle: string; displayName?: string; avatar?: string };
+
+const make = <K extends keyof HTMLElementTagNameMap>(tag: K, className = "", text?: string) => {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text !== undefined) element.textContent = text;
+  return element;
+};
+
+// An avatar picture, or the name's first letter if there isn't one.
+const setAvatar = (slot: HTMLElement, name: string, src?: string) => {
+  slot.textContent = name.trim().charAt(0).toUpperCase();
+  if (!src) return;
+  const img = Object.assign(document.createElement("img"), { src, alt: "" });
+  img.onload = () => slot.replaceChildren(img);
+};
+
+/** Adds the suggestions to a SignInForm's handle box. `base` is where the integration's routes live. */
+export function enhanceHandleBox(form: HTMLFormElement, base: string) {
+  const input = form.querySelector<HTMLInputElement>('input[name="handle"]')!;
+  const list = form.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();
+    form.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));
+}

package/lib/i18n.ts

@@ -0,0 +1,32 @@
+// The component's wording in each language. The files in locales/ are
+// i18next JSON (v4): flat keys, {{placeholders}}, and plural forms as
+// key_one, key_other (and key_few, key_many… where a language needs them).
+// English is the source; translations are made in Weblate, which commits them
+// back to the repository. Any key a language lacks falls back to English.
+
+import type { Messages } from "./translate";
+
+export type { Messages } from "./translate";
+export { translate, translateHtml } from "./translate";
+
+const files = import.meta.glob<Messages>("../locales/*.json", { eager: true, import: "default" });
+const LOCALES: Record<string, Messages> = Object.fromEntries(
+  Object.entries(files).map(([path, messages]) => [path.replace(/^.*\/|\.json$/g, ""), messages]),
+);
+
+/** The best language we have for `wanted` ("pt-BR" → "pt-BR", else "pt", else "en"). */
+export function pickLocale(...wanted: Array<string | undefined>): string {
+  for (const tag of wanted) {
+    if (!tag) continue;
+    const exact = Object.keys(LOCALES).find((code) => code.toLowerCase() === tag.toLowerCase());
+    if (exact) return exact;
+    const base = tag.split("-")[0].toLowerCase();
+    if (LOCALES[base]) return base;
+  }
+  return "en";
+}
+
+/** English, with the language's own wording on top, then the site's overrides. */
+export function messagesFor(locale: string, overrides: Messages = {}): Messages {
+  return { ...LOCALES.en, ...(LOCALES[locale] ?? {}), ...overrides };
+}

package/lib/oauth.ts

@@ -36,8 +36,12 @@ export const SCOPE = [
 // is only used on the reader's own comments under the site's posts.)
 export const DELETE_SCOPE = "repo:app.bsky.feed.post?action=delete";
 
+// Following (and unfollowing) the site's own accounts is asked for the same
+// way, the first time a reader presses Follow.
+export const FOLLOW_SCOPE = "repo:app.bsky.graph.follow?action=create&action=delete";
+
 // Everything the site may ask for, which its client metadata has to list.
-const ALL_SCOPES = `${SCOPE} ${DELETE_SCOPE}`;
+const ALL_SCOPES = `${SCOPE} ${DELETE_SCOPE} ${FOLLOW_SCOPE}`;
 
 const KEY_ID = "atmosphere-comments-1";
 

package/lib/settings.ts

@@ -13,6 +13,8 @@ export type AtmosphereSettings = {
   policyUri?: string;
   tosUri?: string;
   hidden?: string[];
+  locale?: string;
+  messages?: Record<string, string>;
 };
 
 export default settings as AtmosphereSettings;

package/lib/translate.ts

@@ -0,0 +1,36 @@
+// Filling in the component's wording: placeholders and plural forms. Kept
+// apart from lib/i18n.ts so the browser script can use it without bundling
+// every language.
+
+export type Messages = Record<string, string>;
+
+/**
+ * One piece of wording: `vars` fill its {{placeholders}}, and a `count`
+ * picks the plural form the language needs. Placeholders not given are
+ * left as they are (the component fills some with links).
+ */
+export function translate(messages: Messages, locale: string, key: string, vars: Record<string, string | number> = {}): string {
+  let text = messages[key];
+  if (typeof vars.count === "number") {
+    const form = new Intl.PluralRules(locale).select(vars.count);
+    text = messages[`${key}_${form}`] ?? messages[`${key}_other`] ?? text;
+  }
+  text ??= key;
+  return text.replace(/\{\{\s*(\w+)\s*\}\}/g, (match, name: string) => (name in vars ? String(vars[name]) : match));
+}
+
+export const escapeHtml = (text: string) =>
+  text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]!);
+
+/** Like translate, for markup: the wording is escaped, and `html` fills placeholders with markup (links, say). */
+export function translateHtml(
+  messages: Messages,
+  locale: string,
+  key: string,
+  html: Record<string, string>,
+  vars: Record<string, string | number> = {},
+): string {
+  return escapeHtml(translate(messages, locale, key, vars)).replace(/\{\{\s*(\w+)\s*\}\}/g, (match, name: string) =>
+    name in html ? html[name] : match,
+  );
+}

package/locales/de.json

@@ -0,0 +1,95 @@
+{
+  "signIn.heading": "Melde dich an, um zu kommentieren, zu liken oder zu reposten",
+  "signIn.anyAccount": "Jedes {{atmosphereAccount}} funktioniert, auch {{bluesky}}: ein Konto für ein ganzes Netzwerk offener Apps.",
+  "signIn.atmosphereAccount": "Atmosphere-Konto",
+  "signIn.button": "Mit Atmosphere anmelden",
+  "signIn.matchingAccounts": "Passende Konten",
+  "signIn.privacy": "Du bestätigst das auf der Seite deines eigenen Kontos (für die meisten bei Bluesky); dein Passwort wird hier nie weitergegeben. Noch kein Konto? {{createAccount}}.",
+  "signIn.createAccount": "Erstelle ein kostenloses Atmosphere-Konto",
+  "elsewhere.text": "Du möchtest dich hier lieber nicht anmelden? {{link}} Deine Antwort erscheint hier genauso, ebenso Likes und Reposts.",
+  "elsewhere.link": "Antworte stattdessen auf Bluesky →",
+  "actions.label": "Auf diesen Beitrag reagieren",
+  "actions.like": "Gefällt mir",
+  "actions.liked": "Gefällt dir",
+  "actions.repost": "Reposten",
+  "actions.reposted": "Repostet",
+  "actions.quote": "Zitieren",
+  "composer.commentAs": "{{verb}} als {{handle}}",
+  "composer.comment": "Kommentieren",
+  "composer.quote": "Zitieren",
+  "composer.mentions": "Konten zum Erwähnen",
+  "composer.previewCaption": "So sieht dein Beitrag aus",
+  "composer.now": "jetzt",
+  "composer.previewEmpty": "Dein Text erscheint hier.",
+  "composer.quoting": "Du zitierst diesen Beitrag mit deinem eigenen Konto",
+  "composer.replyingTo": "Antwort an {{name}}",
+  "composer.cancel": "Abbrechen",
+  "composer.signOut": "Abmelden",
+  "composer.postComment": "Kommentar posten",
+  "composer.postQuote": "Zitat posten",
+  "composer.charactersLeft_one": "Noch {{count}} Zeichen",
+  "composer.charactersLeft_other": "Noch {{count}} Zeichen",
+  "composer.posting": "Wird gepostet…",
+  "posted.comment": "Dein Kommentar ist gepostet.",
+  "posted.quote": "Dein Zitat ist auf Bluesky.",
+  "posted.see": "Auf Bluesky ansehen →",
+  "reactions.likes_one": "{{count}} Like",
+  "reactions.likes_other": "{{count}} Likes",
+  "reactions.reposts_one": "{{count}} Repost",
+  "reactions.reposts_other": "{{count}} Reposts",
+  "comment.author": "Autor",
+  "comment.viewOnBluesky": "auf Bluesky ansehen",
+  "comment.someone": "diesen Kommentar",
+  "comment.reply": "Antworten",
+  "comment.replyTo": "{{name}} antworten",
+  "comment.likeLabel": "Den Kommentar von {{name}} liken",
+  "comment.repostLabel": "Den Kommentar von {{name}} reposten",
+  "comment.delete": "Löschen",
+  "comment.deleteLabel": "Deinen Kommentar löschen",
+  "comment.deleteConfirm": "Diesen Kommentar von Bluesky löschen?",
+  "comment.deleting": "Wird gelöscht…",
+  "comment.deleted": "Dein Kommentar wurde gelöscht.",
+  "comment.deletePermission": "Um hier Kommentare zu löschen, braucht diese Seite eine weitere Erlaubnis von deinem Konto. Du kannst ihn auch in jeder Bluesky-App löschen.",
+  "comment.continue": "Weiter zur Bestätigung",
+  "comment.cancel": "Abbrechen",
+  "signInFirst.reply": "Melde dich an, um zu antworten.",
+  "signInFirst.like": "Melde dich an, um Kommentare zu liken.",
+  "signInFirst.repost": "Melde dich an, um Kommentare zu reposten.",
+  "status.liked": "Geliked.",
+  "status.likeRemoved": "Like entfernt.",
+  "status.reposted": "Repostet.",
+  "status.repostRemoved": "Repost entfernt.",
+  "status.signedOut": "Du bist abgemeldet.",
+  "messages.signedIn": "Du bist angemeldet. Du kannst oben kommentieren, liken oder reposten.",
+  "messages.signInFailed": "Die Anmeldung wurde nicht abgeschlossen. Bitte versuche es noch einmal.",
+  "messages.accountNotFound": "Dieses Konto wurde nicht gefunden. Prüfe den Handle und versuche es noch einmal.",
+  "messages.invalidHandle": "Das sieht nicht wie ein Handle aus. Meist ist es etwas wie alice.bsky.social.",
+  "messages.signedOut": "Du wurdest abgemeldet. Bitte melde dich erneut an.",
+  "messages.needsPermission": "Um hier Kommentare zu löschen, braucht diese Seite eine weitere Erlaubnis von deinem Konto.",
+  "messages.notAllowed": "Das ist hier nicht möglich.",
+  "messages.newPermissions": "Diese Seite kann jetzt auch für dich liken und reposten und braucht deshalb erneut deine Erlaubnis. Bitte melde dich erneut an.",
+  "messages.tooLong": "Beiträge können bis zu {{max}} Zeichen lang sein.",
+  "messages.tooMany": "Du bist ziemlich schnell. Bitte warte eine Minute und versuche es noch einmal.",
+  "messages.error": "Das hat nicht geklappt. Bitte versuche es noch einmal.",
+  "postActions.replyLabel": "Auf Bluesky antworten",
+  "postActions.quoteLabel": "Auf Bluesky zitieren",
+  "postActions.likeLabel": "Diesen Beitrag liken",
+  "postActions.repostLabel": "Diesen Beitrag reposten",
+  "postActions.likeAs": "Als {{handle}} liken",
+  "postActions.repostAs": "Als {{handle}} reposten",
+  "dialog.heading": "Melde dich an, um zu liken oder zu reposten",
+  "dialog.close": "Schließen",
+  "account.signedInAs": "Angemeldet als {{handle}}",
+  "account.signedInAsLabel": "Angemeldet als",
+  "account.signOut": "Abmelden",
+  "composer.postReply": "Antwort posten",
+  "posted.reply": "Deine Antwort ist gepostet.",
+  "posted.notHere": "Sie erscheint nicht auf dieser Seite, aber auf Bluesky.",
+  "postActions.replyAs": "Als {{handle}} antworten",
+  "postActions.quoteAs": "Als {{handle}} zitieren",
+  "follow.follow": "{{handle}} folgen",
+  "follow.following": "Folge ich",
+  "follow.followAs": "{{handle}} als {{me}} folgen",
+  "follow.followingLabel": "Du folgst {{handle}}",
+  "credit": "Bereitgestellt von {{link}}"
+}

package/locales/en.json

@@ -0,0 +1,95 @@
+{
+  "signIn.heading": "Sign in to leave a comment, like or repost",
+  "signIn.anyAccount": "Any {{atmosphereAccount}} works, including {{bluesky}}: one account for a whole network of open apps.",
+  "signIn.atmosphereAccount": "Atmosphere account",
+  "signIn.button": "Sign in with Atmosphere",
+  "signIn.matchingAccounts": "Matching accounts",
+  "signIn.privacy": "You'll approve this on your account's own site (Bluesky's, for most people); your password is never shared here. No account yet? {{createAccount}}.",
+  "signIn.createAccount": "Create a free Atmosphere account",
+  "elsewhere.text": "Rather not sign in here? {{link}} It shows up here just the same, as do likes and reposts.",
+  "elsewhere.link": "Reply on Bluesky instead →",
+  "actions.label": "Respond to this post",
+  "actions.like": "Like",
+  "actions.liked": "Liked",
+  "actions.repost": "Repost",
+  "actions.reposted": "Reposted",
+  "actions.quote": "Quote",
+  "composer.commentAs": "{{verb}} as {{handle}}",
+  "composer.comment": "Comment",
+  "composer.quote": "Quote",
+  "composer.mentions": "Accounts to mention",
+  "composer.previewCaption": "How your post will look",
+  "composer.now": "now",
+  "composer.previewEmpty": "Your words appear here.",
+  "composer.quoting": "Quoting this post on your own account",
+  "composer.replyingTo": "Replying to {{name}}",
+  "composer.cancel": "Cancel",
+  "composer.signOut": "Sign out",
+  "composer.postComment": "Post comment",
+  "composer.postQuote": "Post quote",
+  "composer.charactersLeft_one": "{{count}} left",
+  "composer.charactersLeft_other": "{{count}} left",
+  "composer.posting": "Posting…",
+  "posted.comment": "Your comment is posted.",
+  "posted.quote": "Your quote post is on Bluesky.",
+  "posted.see": "See it on Bluesky →",
+  "reactions.likes_one": "{{count}} like",
+  "reactions.likes_other": "{{count}} likes",
+  "reactions.reposts_one": "{{count}} repost",
+  "reactions.reposts_other": "{{count}} reposts",
+  "comment.author": "Author",
+  "comment.viewOnBluesky": "view on Bluesky",
+  "comment.someone": "this comment",
+  "comment.reply": "Reply",
+  "comment.replyTo": "Reply to {{name}}",
+  "comment.likeLabel": "Like {{name}}'s comment",
+  "comment.repostLabel": "Repost {{name}}'s comment",
+  "comment.delete": "Delete",
+  "comment.deleteLabel": "Delete your comment",
+  "comment.deleteConfirm": "Delete this comment from Bluesky?",
+  "comment.deleting": "Deleting…",
+  "comment.deleted": "Your comment was deleted.",
+  "comment.deletePermission": "To delete comments here, this site needs one more permission from your account. You can also delete it in any Bluesky app.",
+  "comment.continue": "Continue to approve",
+  "comment.cancel": "Cancel",
+  "signInFirst.reply": "Sign in to reply.",
+  "signInFirst.like": "Sign in to like comments.",
+  "signInFirst.repost": "Sign in to repost comments.",
+  "status.liked": "Liked.",
+  "status.likeRemoved": "Like removed.",
+  "status.reposted": "Reposted.",
+  "status.repostRemoved": "Repost removed.",
+  "status.signedOut": "You're signed out.",
+  "messages.signedIn": "You're signed in. You can comment, like or repost above.",
+  "messages.signInFailed": "Signing in didn't finish. Please try again.",
+  "messages.accountNotFound": "We couldn't find that account. Check the handle and try again.",
+  "messages.invalidHandle": "That doesn't look like a handle. It's usually something like alice.bsky.social.",
+  "messages.signedOut": "You've been signed out. Please sign in again.",
+  "messages.needsPermission": "To delete comments here, this site needs one more permission from your account.",
+  "messages.notAllowed": "That can't be done here.",
+  "messages.newPermissions": "This site can now also like and repost for you, so it needs your permission again. Please sign in again.",
+  "messages.tooLong": "Posts can be up to {{max}} characters.",
+  "messages.tooMany": "You're going quickly. Please wait a minute and try again.",
+  "messages.error": "That didn't work. Please try again.",
+  "postActions.replyLabel": "Reply on Bluesky",
+  "postActions.quoteLabel": "Quote on Bluesky",
+  "postActions.likeLabel": "Like this post",
+  "postActions.repostLabel": "Repost this post",
+  "postActions.likeAs": "Like as {{handle}}",
+  "postActions.repostAs": "Repost as {{handle}}",
+  "dialog.heading": "Sign in to like or repost",
+  "dialog.close": "Close",
+  "account.signedInAs": "Signed in as {{handle}}",
+  "account.signedInAsLabel": "Signed in as",
+  "account.signOut": "Sign out",
+  "composer.postReply": "Post reply",
+  "posted.reply": "Your reply is posted.",
+  "posted.notHere": "It won't show on this page, but it's on Bluesky.",
+  "postActions.replyAs": "Reply as {{handle}}",
+  "postActions.quoteAs": "Quote as {{handle}}",
+  "follow.follow": "Follow {{handle}}",
+  "follow.following": "Following",
+  "follow.followAs": "Follow {{handle}} as {{me}}",
+  "follow.followingLabel": "You follow {{handle}}",
+  "credit": "Powered by {{link}}"
+}