astro-atmosphere-comments 0.3.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/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/locales/de.json

@@ -71,5 +71,25 @@
   "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

@@ -71,5 +71,25 @@
   "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}}"
 }

package/locales/es.json

@@ -74,5 +74,25 @@
   "messages.tooLong": "Las publicaciones pueden tener hasta {{max}} caracteres.",
   "messages.tooMany": "Vas muy rápido. Espera un minuto e inténtalo de nuevo.",
   "messages.error": "No ha funcionado. Inténtalo de nuevo.",
+  "postActions.replyLabel": "Responder en Bluesky",
+  "postActions.quoteLabel": "Citar en Bluesky",
+  "postActions.likeLabel": "Dar me gusta a esta publicación",
+  "postActions.repostLabel": "Compartir esta publicación",
+  "postActions.likeAs": "Dar me gusta como {{handle}}",
+  "postActions.repostAs": "Compartir como {{handle}}",
+  "dialog.heading": "Inicia sesión para dar me gusta o compartir",
+  "dialog.close": "Cerrar",
+  "account.signedInAs": "Sesión iniciada como {{handle}}",
+  "account.signedInAsLabel": "Sesión iniciada como",
+  "account.signOut": "Cerrar sesión",
+  "composer.postReply": "Publicar respuesta",
+  "posted.reply": "Tu respuesta está publicada.",
+  "posted.notHere": "No aparecerá en esta página, pero está en Bluesky.",
+  "postActions.replyAs": "Responder como {{handle}}",
+  "postActions.quoteAs": "Citar como {{handle}}",
+  "follow.follow": "Seguir a {{handle}}",
+  "follow.following": "Siguiendo",
+  "follow.followAs": "Seguir a {{handle}} como {{me}}",
+  "follow.followingLabel": "Sigues a {{handle}}",
   "credit": "Funciona con {{link}}"
 }

package/locales/fr.json

@@ -74,5 +74,25 @@
   "messages.tooLong": "Les publications peuvent contenir jusqu'à {{max}} caractères.",
   "messages.tooMany": "Tu vas un peu vite. Attends une minute et réessaie.",
   "messages.error": "Ça n'a pas marché. Réessaie.",
+  "postActions.replyLabel": "Répondre sur Bluesky",
+  "postActions.quoteLabel": "Citer sur Bluesky",
+  "postActions.likeLabel": "Aimer cette publication",
+  "postActions.repostLabel": "Republier cette publication",
+  "postActions.likeAs": "Aimer en tant que {{handle}}",
+  "postActions.repostAs": "Republier en tant que {{handle}}",
+  "dialog.heading": "Connecte-toi pour aimer ou republier",
+  "dialog.close": "Fermer",
+  "account.signedInAs": "Connecté en tant que {{handle}}",
+  "account.signedInAsLabel": "Connecté en tant que",
+  "account.signOut": "Se déconnecter",
+  "composer.postReply": "Publier la réponse",
+  "posted.reply": "Ta réponse est publiée.",
+  "posted.notHere": "Elle ne s'affichera pas sur cette page, mais elle est sur Bluesky.",
+  "postActions.replyAs": "Répondre en tant que {{handle}}",
+  "postActions.quoteAs": "Citer en tant que {{handle}}",
+  "follow.follow": "Suivre {{handle}}",
+  "follow.following": "Abonné",
+  "follow.followAs": "Suivre {{handle}} en tant que {{me}}",
+  "follow.followingLabel": "Tu suis {{handle}}",
   "credit": "Propulsé par {{link}}"
 }

package/locales/it.json

@@ -74,5 +74,25 @@
   "messages.tooLong": "I post possono avere fino a {{max}} caratteri.",
   "messages.tooMany": "Stai andando un po' veloce. Aspetta un minuto e riprova.",
   "messages.error": "Non ha funzionato. Riprova.",
+  "postActions.replyLabel": "Rispondi su Bluesky",
+  "postActions.quoteLabel": "Cita su Bluesky",
+  "postActions.likeLabel": "Metti mi piace a questo post",
+  "postActions.repostLabel": "Ripubblica questo post",
+  "postActions.likeAs": "Metti mi piace come {{handle}}",
+  "postActions.repostAs": "Ripubblica come {{handle}}",
+  "dialog.heading": "Accedi per mettere mi piace o ripubblicare",
+  "dialog.close": "Chiudi",
+  "account.signedInAs": "Accesso effettuato come {{handle}}",
+  "account.signedInAsLabel": "Accesso effettuato come",
+  "account.signOut": "Esci",
+  "composer.postReply": "Pubblica risposta",
+  "posted.reply": "La tua risposta è pubblicata.",
+  "posted.notHere": "Non comparirà in questa pagina, ma è su Bluesky.",
+  "postActions.replyAs": "Rispondi come {{handle}}",
+  "postActions.quoteAs": "Cita come {{handle}}",
+  "follow.follow": "Segui {{handle}}",
+  "follow.following": "Segui già",
+  "follow.followAs": "Segui {{handle}} come {{me}}",
+  "follow.followingLabel": "Segui {{handle}}",
   "credit": "Realizzato con {{link}}"
 }

package/locales/ja.json

@@ -68,5 +68,25 @@
   "messages.tooLong": "投稿は{{max}}文字までです。",
   "messages.tooMany": "操作が早すぎます。1分待ってから、もう一度お試しください。",
   "messages.error": "うまくいきませんでした。もう一度お試しください。",
+  "postActions.replyLabel": "Blueskyで返信",
+  "postActions.quoteLabel": "Blueskyで引用",
+  "postActions.likeLabel": "この投稿にいいね",
+  "postActions.repostLabel": "この投稿をリポスト",
+  "postActions.likeAs": "{{handle}}としていいね",
+  "postActions.repostAs": "{{handle}}としてリポスト",
+  "dialog.heading": "ログインしていいねやリポストをする",
+  "dialog.close": "閉じる",
+  "account.signedInAs": "{{handle}}としてログイン中",
+  "account.signedInAsLabel": "ログイン中のアカウント",
+  "account.signOut": "ログアウト",
+  "composer.postReply": "返信を投稿",
+  "posted.reply": "返信を投稿しました。",
+  "posted.notHere": "このページには表示されませんが、Blueskyに投稿されています。",
+  "postActions.replyAs": "{{handle}}として返信",
+  "postActions.quoteAs": "{{handle}}として引用",
+  "follow.follow": "{{handle}}をフォロー",
+  "follow.following": "フォロー中",
+  "follow.followAs": "{{me}}として{{handle}}をフォロー",
+  "follow.followingLabel": "{{handle}}をフォローしています",
   "credit": "{{link}}で動作しています"
 }

package/locales/nl.json

@@ -71,5 +71,25 @@
   "messages.tooLong": "Berichten mogen maximaal {{max}} tekens lang zijn.",
   "messages.tooMany": "Je gaat wel snel. Wacht een minuut en probeer het opnieuw.",
   "messages.error": "Dat is niet gelukt. Probeer het opnieuw.",
+  "postActions.replyLabel": "Reageren op Bluesky",
+  "postActions.quoteLabel": "Citeren op Bluesky",
+  "postActions.likeLabel": "Dit bericht liken",
+  "postActions.repostLabel": "Dit bericht reposten",
+  "postActions.likeAs": "Liken als {{handle}}",
+  "postActions.repostAs": "Reposten als {{handle}}",
+  "dialog.heading": "Log in om te liken of te reposten",
+  "dialog.close": "Sluiten",
+  "account.signedInAs": "Ingelogd als {{handle}}",
+  "account.signedInAsLabel": "Ingelogd als",
+  "account.signOut": "Uitloggen",
+  "composer.postReply": "Reactie plaatsen",
+  "posted.reply": "Je reactie is geplaatst.",
+  "posted.notHere": "Hij verschijnt niet op deze pagina, maar staat wel op Bluesky.",
+  "postActions.replyAs": "Reageren als {{handle}}",
+  "postActions.quoteAs": "Citeren als {{handle}}",
+  "follow.follow": "{{handle}} volgen",
+  "follow.following": "Volgend",
+  "follow.followAs": "{{handle}} volgen als {{me}}",
+  "follow.followingLabel": "Je volgt {{handle}}",
   "credit": "Mogelijk gemaakt door {{link}}"
 }

package/locales/pt.json

@@ -74,5 +74,25 @@
   "messages.tooLong": "As publicações podem ter até {{max}} caracteres.",
   "messages.tooMany": "Você está indo rápido demais. Espere um minuto e tente de novo.",
   "messages.error": "Não deu certo. Tente de novo.",
+  "postActions.replyLabel": "Responder no Bluesky",
+  "postActions.quoteLabel": "Citar no Bluesky",
+  "postActions.likeLabel": "Curtir esta publicação",
+  "postActions.repostLabel": "Repostar esta publicação",
+  "postActions.likeAs": "Curtir como {{handle}}",
+  "postActions.repostAs": "Repostar como {{handle}}",
+  "dialog.heading": "Entre para curtir ou repostar",
+  "dialog.close": "Fechar",
+  "account.signedInAs": "Conectado como {{handle}}",
+  "account.signedInAsLabel": "Conectado como",
+  "account.signOut": "Sair",
+  "composer.postReply": "Publicar resposta",
+  "posted.reply": "Sua resposta foi publicada.",
+  "posted.notHere": "Ela não aparece nesta página, mas está no Bluesky.",
+  "postActions.replyAs": "Responder como {{handle}}",
+  "postActions.quoteAs": "Citar como {{handle}}",
+  "follow.follow": "Seguir {{handle}}",
+  "follow.following": "Seguindo",
+  "follow.followAs": "Seguir {{handle}} como {{me}}",
+  "follow.followingLabel": "Você segue {{handle}}",
   "credit": "Feito com {{link}}"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-atmosphere-comments",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Atmosphere Comments for Astro: Bluesky comments, likes, reposts and quote posts for Astro sites; readers sign in with their Atmosphere (AT Protocol) account and respond without leaving the page.",
   "type": "module",
   "license": "MIT",
@@ -20,14 +20,18 @@
     "atmosphere",
     "comments",
     "likes",
-    "oauth"
+    "oauth",
+    "at-protocol",
+    "reposts",
+    "i18n"
   ],
   "exports": {
     ".": {
       "types": "./index.d.ts",
       "default": "./index.mjs"
     },
-    "./AtmosphereComments.astro": "./components/AtmosphereComments.astro"
+    "./AtmosphereComments.astro": "./components/AtmosphereComments.astro",
+    "./AtmosphereReactions.astro": "./components/AtmosphereReactions.astro"
   },
   "types": "./index.d.ts",
   "bin": {