astro-atmosphere-comments 0.7.0 → 0.8.0

package/components/AtmosphereSubscribe.astro

@@ -0,0 +1,135 @@
+---
+// Subscribe to the site's Standard.site publication, with a ⌄ menu of more
+// ways to follow it (Copy link, the feed, Bluesky, Standard Reader, Leaflet
+// and any links of the site's own). Shown only with the integration's
+// `standardSite` option, and only with JavaScript (the menu needs it).
+//
+// Placed anywhere, such as a blog's list of posts. The Subscribe button
+// itself is worked by AtmosphereReactions, which offers signing in, so put
+// that in the layout too. AtmosphereComments uses this component for the one
+// under each post, and works that button itself.
+//
+// Props:
+//   align     which edge the menu lines up with: "start" (default) or "end"
+//             (for a button near the right-hand edge, so the menu opens leftwards)
+//   copyUrl   what Copy link copies (default: the site's address)
+//   links     more menu items, after the built-in ones: [{ label, href }]
+//   bluesky   adds "View on Bluesky", going here (under a post: its thread)
+//
+// The menu's note ends by suggesting following the publication's account on
+// Bluesky, with AtmosphereFollow: a link to its profile, which AtmosphereReactions
+// turns into a Follow / Following button for signed-in readers.
+//   locale, messages  as for AtmosphereComments
+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";
+import { profileFor } from "../lib/profile";
+import AtmosphereFollow from "./AtmosphereFollow.astro";
+import "./atmosphere.css";
+
+interface Props {
+  align?: "start" | "end";
+  copyUrl?: string;
+  links?: { label: string; href: string }[];
+  bluesky?: string;
+  locale?: string;
+  messages?: Record<string, string>;
+}
+
+const { align = "start", copyUrl = settings.site, links = [] } = Astro.props;
+const lang = pickLocale(Astro.props.locale, settings.locale, Astro.currentLocale);
+const messages = messagesFor(lang, { ...settings.messages, ...Astro.props.messages });
+const t = (key: string) => translate(messages, lang, key);
+const th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
+const link = (href: string, text: string) => `<a href="${escapeHtml(href)}" target="_blank" rel="noopener">${escapeHtml(text)}</a>`;
+
+const publication = settings.standardSite?.publication ?? "";
+const feed = settings.standardSite?.feed;
+// at://<did>/site.standard.publication/<rkey>
+const [, , did = "", , rkey = ""] = publication.split("/");
+const bluesky = Astro.props.bluesky ?? "";
+// The publication's account, by handle, for the note and the Follow link
+// (looked up when the page is built; without it, the note leaves that part out).
+const account = did ? await profileFor(did).catch(() => null) : null;
+const accountHandle = account && account.handle !== did ? account.handle : "";
+---
+
+{publication && (
+  <atmosphere-subscribe class:list={["atmo-subscribe", align === "end" && "atmo-subscribe--end"]} data-subscribe-panel data-pagefind-ignore hidden>
+    <button type="button" class="atmo__action atmo-subscribe__button" data-atmosphere-subscribe hidden>
+      <span class="atmo-subscribe__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
+      <span data-atmosphere-subscribe-label>{t("subscribe.subscribe")}</span>
+    </button>
+    <button type="button" class="atmo__action atmo-subscribe__more" aria-label={t("subscribe.more")} title={t("subscribe.more")} aria-expanded="false" data-subscribe-more>
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+    </button>
+    <div class="atmo-subscribe__menu" data-subscribe-menu hidden>
+      <div class="atmo-subscribe__note">
+        <p
+          set:html={th(feed ? "subscribe.panelTextFeed" : "subscribe.panelText", {
+            leaflet: link("https://leaflet.pub", "Leaflet"),
+            standardReader: link("https://standard-reader.app", "Standard Reader"),
+          }) + (accountHandle ? ` ${escapeHtml(translate(messages, lang, "subscribe.followNote", { handle: `@${accountHandle}` }))}` : "")}
+        />
+        {accountHandle && <AtmosphereFollow account={did} label={t("subscribe.follow")} class="atmo-subscribe__follow" locale={lang} messages={messages} />}
+      </div>
+      <button type="button" data-subscribe-copy={copyUrl} data-copied={t("subscribe.copied")}><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1" /></svg><span data-copy-label>{t("subscribe.copyLink")}</span></button>
+      {feed && <a href={feed}><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 11a8 8 0 0 1 8 8M5 5a14 14 0 0 1 14 14" /><circle cx="6" cy="18" r="1" /></svg><span>{t("subscribe.feed")}</span></a>}
+      <a href={bluesky || undefined} hidden={!bluesky} data-subscribe-bluesky target="_blank" rel="noopener"><svg class="atmo-subscribe__filled" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" /></svg><span>{t("subscribe.viewBluesky")}</span></a>
+      <a href={`https://standard-reader.app/p/${did}/${rkey}`} target="_blank" rel="noopener"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4" /></svg><span>{t("subscribe.standardReader")}</span></a>
+      <a href={`https://leaflet.pub/lish/${did}/${rkey}`} target="_blank" rel="noopener"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4" /></svg><span>{t("subscribe.leaflet")}</span></a>
+      {links.map(({ label, href }) => (
+        <a href={href} target="_blank" rel="noopener"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 5h5v5M19 5l-8 8M18 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4" /></svg><span>{label}</span></a>
+      ))}
+    </div>
+  </atmosphere-subscribe>
+)}
+
+<script>
+  // The ⌄ menu: opens and closes (click, a click elsewhere, Escape) and Copy
+  // link. Shows itself once this runs, except under a post, where
+  // AtmosphereComments shows it when the comments are ready.
+  class AtmosphereSubscribe extends HTMLElement {
+    connectedCallback() {
+      const more = this.querySelector<HTMLButtonElement>("[data-subscribe-more]");
+      const menu = this.querySelector<HTMLElement>("[data-subscribe-menu]");
+      if (!more || !menu || this.dataset.ready !== undefined) return;
+      this.dataset.ready = "";
+      if (!this.closest("atmosphere-comments")) this.hidden = false;
+      const setMenu = (open: boolean) => {
+        menu.hidden = !open;
+        more.setAttribute("aria-expanded", String(open));
+      };
+      more.addEventListener("click", () => {
+        setMenu(menu.hidden);
+        if (!menu.hidden) menu.querySelector<HTMLElement>("[data-subscribe-copy]")?.focus();
+      });
+      document.addEventListener("click", (event) => {
+        if (!this.contains(event.target as Node)) setMenu(false);
+      });
+      this.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && !menu.hidden) {
+          setMenu(false);
+          more.focus();
+        }
+      });
+      const copy = menu.querySelector<HTMLButtonElement>("[data-subscribe-copy]")!;
+      const copyText = copy.querySelector<HTMLElement>("[data-copy-label]")!;
+      const copyLabel = copyText.textContent;
+      copy.addEventListener("click", async () => {
+        try {
+          await navigator.clipboard.writeText(copy.dataset.subscribeCopy!);
+          copyText.textContent = copy.dataset.copied!;
+          window.setTimeout(() => {
+            copyText.textContent = copyLabel;
+            setMenu(false);
+          }, 1200);
+        } catch {
+          // Clipboard refused: the button stays as it was.
+        }
+      });
+    }
+  }
+  if (!customElements.get("atmosphere-subscribe")) customElements.define("atmosphere-subscribe", AtmosphereSubscribe);
+</script>

package/components/Composer.astro

@@ -12,6 +12,7 @@
 //   cancel   show a Cancel button that closes an overlay (default false)
 import { translate, translateHtml } from "../lib/i18n";
 import { escapeHtml } from "../lib/translate";
+import PostPreview from "./PostPreview.astro";
 
 interface Props {
   id: string;
@@ -31,6 +32,10 @@ const th = (key: string, html: Record<string, string>) => translateHtml(messages
     <span data-context-text></span>
     <button type="button" class="atmo__link-button" data-cancel-context>{t("composer.cancel")}</button>
   </p>
+  <!-- The post being replied to, when it won't be on this page (AtmosphereReactions). -->
+  <div class="atmo__quoted atmo__parent" data-parent hidden>
+    <PostPreview />
+  </div>
   <label for={`${id}-text`} class="atmo__as">
     <span class="atmo__avatar atmo__avatar--me" data-me-avatar aria-hidden="true"></span>
     <span set:html={th("composer.commentAs", { verb: `<span data-verb>${escapeHtml(t("composer.comment"))}</span>`, handle: "<strong data-handle></strong>" })} />
@@ -53,23 +58,8 @@ const th = (key: string, html: Record<string, string>) => translateHtml(messages
       <div class="atmo__preview-body">
         <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">
-            <span class="atmo__avatar atmo__avatar--small" data-quoted-avatar aria-hidden="true"></span>
-            <strong data-quoted-name></strong> <span data-quoted-handle></span> <span data-quoted-age></span>
-          </p>
-          <p class="atmo__preview-text" data-quoted-text></p>
-          <div class="atmo__card" data-card hidden>
-            <img data-card-image alt="" hidden />
-            <div>
-              <strong data-card-title></strong>
-              <span data-card-description></span>
-              <span class="atmo__card-domain">
-                <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9s1.3-6.5 3.8-9Z" /></svg>
-                <span data-card-domain></span>
-              </span>
-            </div>
-          </div>
+        <div class="atmo__quoted" data-quoted-post>
+          <PostPreview />
         </div>
       </div>
     </div>

package/components/PostPreview.astro

@@ -0,0 +1,24 @@
+---
+// A Bluesky post as the composer shows it: author (avatar, name, handle,
+// age), its words and its link card. Empty here, filled in by showPost() in
+// lib/client/composer.ts. Used inside the Quote preview (the post being
+// quoted) and above the box when replying from AtmosphereReactions (the post
+// being replied to); not meant to be used on its own.
+---
+
+<p class="atmo__preview-author">
+  <span class="atmo__avatar atmo__avatar--small" data-quoted-avatar aria-hidden="true"></span>
+  <strong data-quoted-name></strong> <span data-quoted-handle></span> <span data-quoted-age></span>
+</p>
+<p class="atmo__preview-text" data-quoted-text></p>
+<div class="atmo__card" data-card hidden>
+  <img data-card-image alt="" hidden />
+  <div>
+    <strong data-card-title></strong>
+    <span data-card-description></span>
+    <span class="atmo__card-domain">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9s1.3-6.5 3.8-9Z" /></svg>
+      <span data-card-domain></span>
+    </span>
+  </div>
+</div>

package/components/SignInForm.astro

@@ -30,7 +30,14 @@ interface Props {
 
 const { id, returnTo, messages, lang, heading, permissions = [] } = Astro.props;
 const { policyUri } = settings;
-const t = (key: string) => translate(messages, lang, key);
+const t = (key: string, vars?: Record<string, string>) => translate(messages, lang, key, vars);
+// The site's name in "… can use it only for what you approved", e.g. saltedlolly.com.
+let siteName = "";
+try {
+  siteName = new URL(settings.site).hostname;
+} catch {
+  siteName = "";
+}
 const th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
 // Links lead off the page, so they open in a new tab.
 const link = (href: string, text: string) =>
@@ -40,12 +47,13 @@ const link = (href: string, text: string) =>
 <form class="atmo__login" id={`${id}-login`} data-login-form>
   <label for={`${id}-handle`}>{heading ?? t("signIn.heading")}</label>
   <p
-    class="atmo__hint"
+    class="atmo__hint atmo__hint--accounts"
     set:html={th("signIn.anyAccount", {
       atmosphereAccount: link("https://atmosphereaccount.com", t("signIn.atmosphereAccount")),
       bluesky: link("https://bsky.app", "Bluesky"),
-      createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")),
-    })}
+    }) +
+      "<br>" +
+      th("signIn.noAccount", { createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")) })}
   />
   <div class="atmo__row">
     <span class="atmo__handle">
@@ -84,9 +92,8 @@ const link = (href: string, text: string) =>
   {/* The detail, for anyone who wants it. */}
   <details class="atmo__details">
     <summary>{t("signIn.more")}</summary>
-    <p class="atmo__hint">{t("signIn.privacy")}</p>
     <p class="atmo__hint">
-      {t("signIn.access")}
+      {t("signIn.privacy", { site: siteName || t("signIn.thisSite") })}
       {policyUri && <Fragment> <a href={policyUri} target="_blank" rel="noopener">{t("signIn.policy")}</a></Fragment>}
     </p>
   </details>
@@ -108,6 +115,11 @@ const link = (href: string, text: string) =>
     font-weight: 700;
   }
 
+  /* The two lines about accounts, above the box: a little more room. */
+  .atmo__hint.atmo__hint--accounts {
+    line-height: 1.7;
+  }
+
   .atmo__details summary {
     width: fit-content;
     color: var(--atmo-muted, inherit);
@@ -123,6 +135,8 @@ const link = (href: string, text: string) =>
     margin: 0;
     color: var(--atmo-muted, inherit);
     font-size: 0.9em;
+    /* Tighter than a site's body text, which is often set for long reading. */
+    line-height: 1.5;
   }
 
   .atmo__row {

package/components/atmosphere.css

@@ -276,6 +276,12 @@ dialog.atmo.atmo-signin:has(> .atmo__login) {
   box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);
 }
 
+/* <AtmosphereSubscribe align="end">: near the right-hand edge, the menu opens leftwards. */
+.atmo-subscribe--end .atmo-subscribe__menu {
+  right: 0;
+  left: auto;
+}
+
 .atmo-subscribe__menu[hidden] {
   display: none;
 }
@@ -286,6 +292,23 @@ dialog.atmo.atmo-signin:has(> .atmo__login) {
   border-bottom: 1px solid var(--atmo-border, #8886);
   color: var(--atmo-muted, inherit);
   font-size: 0.85em;
+  line-height: 1.5;
+}
+
+.atmo-subscribe__note p {
+  margin: 0;
+}
+
+/* "Follow on Bluesky →" under the note, which AtmosphereReactions turns into
+   a Follow / Following button for signed-in readers. */
+.atmo-subscribe__follow {
+  display: inline-block;
+  margin-top: 8px;
+  font-weight: 700;
+}
+
+.atmo-subscribe__note .atmo-follow {
+  margin-top: 8px;
 }
 
 .atmo-subscribe__menu > a[hidden] {
@@ -562,6 +585,7 @@ dialog.atmo.atmo-signin:has(> .atmo__login) {
 }
 
 .atmo__preview-post p,
+.atmo__quoted p,
 .atmo__card span {
   margin: 0;
 }
@@ -944,3 +968,72 @@ dialog.atmo.atmo-signin:has(> .atmo__login) {
     radial-gradient(ellipse 34% 26% at 50% 88%, color-mix(in srgb, var(--atmo-muted, #888) 70%, transparent) 0 99%, transparent 100%),
     var(--atmo-field-bg, #8882);
 }
+
+/* "Liked" / "Reposted" over a button, when something pressed before signing
+   in is finished once the reader is back (lib/client/done.ts): the button's
+   icon, enlarged, pops in above it with the word, then floats up and fades. */
+.atmo-has-done {
+  position: relative;
+}
+
+.atmo-done {
+  position: absolute;
+  z-index: 30;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  display: grid;
+  justify-items: center;
+  gap: 2px;
+  padding: 8px 14px 6px;
+  border: 1px solid var(--atmo-border, #8886);
+  border-radius: var(--atmo-radius, 10px);
+  background: var(--atmo-dialog-bg, var(--atmo-menu-bg, Canvas));
+  box-shadow: 0 10px 28px rgb(0 0 0 / 0.25);
+  color: var(--atmo-accent, #1185fe);
+  font-size: 0.85rem;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  pointer-events: none;
+  transform: translateX(-50%);
+  animation: atmo-done 1.8s ease-out forwards;
+}
+
+/* Specific enough to beat a button's own icon size; its colours still apply. */
+.atmo-has-done .atmo-done svg.atmo-done__icon {
+  width: 34px;
+  height: 34px;
+  animation: atmo-done-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
+}
+
+.atmo-done__label {
+  color: var(--atmo-text, CanvasText);
+}
+
+@keyframes atmo-done {
+  0% { opacity: 0; transform: translate(-50%, 6px); }
+  12% { opacity: 1; transform: translate(-50%, 0); }
+  75% { opacity: 1; transform: translate(-50%, 0); }
+  100% { opacity: 0; transform: translate(-50%, -10px); }
+}
+
+@keyframes atmo-done-pop {
+  0% { transform: scale(0.3); }
+  60% { transform: scale(1.25); }
+  100% { transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .atmo-done {
+    animation-name: atmo-done-fade;
+  }
+
+  .atmo-has-done .atmo-done svg.atmo-done__icon {
+    animation: none;
+  }
+
+  @keyframes atmo-done-fade {
+    0%, 100% { opacity: 0; }
+    12%, 75% { opacity: 1; }
+  }
+}

package/lib/client/composer.ts

@@ -190,14 +190,59 @@ function postAge(when: string): string {
   return date.toLocaleDateString(lang, { month: "short", day: "numeric", ...(!thisYear && { year: "numeric" }) });
 }
 
+/** A post as the site's `post` route gives it (routes/post.ts). */
+export type ShownPost = {
+  author: { handle: string; displayName?: string; avatar?: string };
+  text: string;
+  indexedAt?: string;
+  external?: { uri: string; title: string; description: string; thumb?: string };
+};
+
+/** Fetches one of the site's posts through the site, or null if it can't. */
+export async function fetchPost(base: string, uri: string): Promise<ShownPost | null> {
+  try {
+    const response = await fetch(`${base}/post?uri=${encodeURIComponent(uri)}`);
+    return response.ok ? ((await response.json()) as ShownPost) : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Fills a PostPreview (components/PostPreview.astro) inside `container` with `post`. */
+export function showPost(container: HTMLElement, post: ShownPost, ctx: ComposerContext) {
+  const $ = <T extends Element>(selector: string) => container.querySelector<T>(selector)!;
+  const name = post.author.displayName || post.author.handle;
+  $<HTMLElement>("[data-quoted-name]").textContent = name;
+  ctx.setAvatar($<HTMLElement>("[data-quoted-avatar]"), name, post.author.avatar);
+  $<HTMLElement>("[data-quoted-handle]").textContent = `@${post.author.handle}`;
+  $<HTMLElement>("[data-quoted-age]").textContent = post.indexedAt ? `· ${postAge(post.indexedAt)}` : "";
+  $<HTMLElement>("[data-quoted-text]").textContent = post.text;
+  $<HTMLElement>("[data-quoted-text]").hidden = !post.text;
+  const card = $<HTMLElement>("[data-card]");
+  card.hidden = !post.external;
+  if (post.external) {
+    $<HTMLElement>("[data-card-title]").textContent = post.external.title;
+    $<HTMLElement>("[data-card-description]").textContent = post.external.description;
+    $<HTMLElement>("[data-card-domain]").textContent = new URL(post.external.uri).hostname;
+    const img = $<HTMLImageElement>("[data-card-image]");
+    img.hidden = true;
+    img.removeAttribute("src");
+    if (post.external.thumb) {
+      img.onload = () => (img.hidden = false);
+      img.onerror = () => (img.hidden = true);
+      img.src = post.external.thumb;
+    }
+  }
+}
+
 /**
  * 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]");
+  const previewText = form.querySelector<HTMLElement>("[data-preview-text]")!;
+  const quoted = form.querySelector<HTMLElement>("[data-quoted-post]")!;
   let loaded = "";
   const update = () => {
     const words = textarea.value.trim();
@@ -207,39 +252,11 @@ export function quotePreview(form: HTMLFormElement, textarea: HTMLTextAreaElemen
   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;
-        indexedAt?: 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-age]").textContent = quoted.indexedAt ? `· ${postAge(quoted.indexedAt)}` : "";
-      $<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.
-    }
+    // The preview is a nicety: quoting still works without it.
+    const post = await fetchPost(ctx.base, uri);
+    if (!post) return;
+    loaded = uri;
+    showPost(quoted, post, ctx);
   };
   return { update, load };
 }

package/lib/client/done.ts

@@ -0,0 +1,54 @@
+// A brief "Liked" or "Reposted" over a button, with its icon enlarged and
+// popping, when something the reader pressed before signing in is finished
+// once they're back: otherwise the only sign is a small change of colour,
+// easy to miss after a trip to their account host. Styles: .atmo-done in
+// atmosphere.css (with a plain fade for readers who ask for less motion).
+
+/** Shows the bubble over `button` now. */
+export function showDone(button: HTMLElement, label: string) {
+  button.querySelector(":scope > .atmo-done")?.remove();
+  const bubble = document.createElement("span");
+  bubble.className = "atmo-done";
+  // Screen readers already hear the component's own status line.
+  bubble.setAttribute("aria-hidden", "true");
+  const icon = button.querySelector("svg")?.cloneNode(true) as SVGElement | undefined;
+  if (icon) {
+    icon.removeAttribute("class");
+    icon.classList.add("atmo-done__icon");
+    bubble.append(icon);
+  }
+  bubble.append(Object.assign(document.createElement("span"), { className: "atmo-done__label", textContent: label }));
+  button.classList.add("atmo-has-done");
+  button.append(bubble);
+  const finish = () => {
+    bubble.remove();
+    if (!button.querySelector(":scope > .atmo-done")) button.classList.remove("atmo-has-done");
+  };
+  bubble.addEventListener("animationend", (event) => {
+    if (event.target === bubble) finish();
+  });
+  // In case animations don't run (a hidden tab, say).
+  window.setTimeout(finish, 3000);
+}
+
+/**
+ * Shows the bubble after `button` is pressed, once its request has finished
+ * (the component marks it `data-busy` meanwhile) and only if it's still
+ * pressed (aria-pressed="true"), so it appears only when the like or repost
+ * actually went through. Call it just before pressing. Gives up after
+ * `timeout` milliseconds.
+ */
+export function showDoneWhenPressed(button: HTMLElement, label: string, timeout = 20000) {
+  let started = false;
+  const observer = new MutationObserver(() => {
+    if ("busy" in button.dataset) {
+      started = true;
+      return;
+    }
+    if (!started) return;
+    observer.disconnect();
+    if (button.getAttribute("aria-pressed") === "true") showDone(button, label);
+  });
+  observer.observe(button, { attributes: true, attributeFilter: ["data-busy", "aria-pressed"] });
+  window.setTimeout(() => observer.disconnect(), timeout);
+}

package/lib/resolve.ts

@@ -12,7 +12,8 @@ async function getJson<T>(url: string): Promise<T> {
   return (await response.json()) as T;
 }
 
-async function resolveHandle(handle: string): Promise<string> {
+/** A handle → its DID, through Bluesky's public service. */
+export async function resolveHandle(handle: string): Promise<string> {
   const { did } = await getJson<{ did: string }>(
     `${APPVIEW}com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}`,
   );

package/locales/de.json

@@ -1,13 +1,15 @@
 {
   "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.anyAccount": "Nutze dein {{bluesky}}-Konto oder ein anderes {{atmosphereAccount}}.",
+  "signIn.noAccount": "Noch kein Konto? {{createAccount}}.",
   "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.privacy": "Du meldest dich auf der Seite deines eigenen Kontos an (für die meisten die von Bluesky). Deine Anmeldung bleibt in diesem Browser. {{site}} kann sie nur für das nutzen, was du erlaubt hast, und wenn du dich hier abmeldest, endet sie.",
+  "signIn.thisSite": "Diese Website",
   "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 →",
+  "elsewhere.text": "Lieber nicht hier anmelden? {{link}}",
+  "elsewhere.link": "Auf Bluesky reagieren →",
   "actions.label": "Auf diesen Beitrag reagieren",
   "actions.like": "Gefällt mir",
   "actions.liked": "Gefällt dir",
@@ -90,9 +92,9 @@
   "follow.following": "Folge ich",
   "follow.followAs": "{{handle}} als {{me}} folgen",
   "follow.followingLabel": "Du folgst {{handle}}",
+  "follow.link": "{{handle}} auf Bluesky folgen",
   "credit": "Bereitgestellt von {{link}}",
   "callback.signingIn": "Anmeldung läuft …",
-  "signIn.access": "Deine Anmeldung bleibt in diesem Browser: Der Server dieser Seite sieht sie nie und kann nicht für dich posten, und beim Abmelden wird sie aufgehoben.",
   "signIn.policy": "Wie diese Seite mit deinen Daten umgeht",
   "composer.needsPermission": "Um hier als {{handle}} zu kommentieren, braucht diese Seite eine weitere Erlaubnis von deinem Atmosphere-Konto.",
   "comment.hide": "Ausblenden",
@@ -111,5 +113,10 @@
   "comment.withheldTitle": "Kommentar ausgeblendet",
   "comment.withheldSignedIn": "Er konnte gerade nicht geladen werden. Lade die Seite neu.",
   "signInFirst.view": "Melde dich an, um ausgeblendete Kommentare zu sehen",
-  "reactions.hiddenPerson": "Jemand, der sein Konto nur angemeldeten Leuten zeigt"
+  "reactions.hiddenPerson": "Jemand, der sein Konto nur angemeldeten Leuten zeigt",
+  "subscribe.panelText": "Abonniere, um neue Blogbeiträge in Apps wie {{leaflet}} oder {{standardReader}} zu lesen.",
+  "subscribe.panelTextFeed": "Abonniere, um neue Blogbeiträge in Apps wie {{leaflet}} oder {{standardReader}} zu lesen, oder folge dem Feed in einem beliebigen Feedreader.",
+  "subscribe.followNote": "Um alles zu sehen, was {{handle}} postet, folge dem Konto auf Bluesky.",
+  "subscribe.follow": "Auf Bluesky folgen",
+  "subscribe.leaflet": "Auf Leaflet ansehen"
 }

package/locales/en.json

@@ -1,14 +1,16 @@
 {
   "signIn.heading": "Sign in to leave a comment",
-  "signIn.anyAccount": "Use {{bluesky}} or any other {{atmosphereAccount}}. {{createAccount}}",
+  "signIn.anyAccount": "Use your {{bluesky}} account, or any other {{atmosphereAccount}}.",
+  "signIn.noAccount": "No account? {{createAccount}}.",
   "signIn.atmosphereAccount": "Atmosphere account",
   "signIn.more": "How does signing in work?",
   "signIn.button": "Sign in with Atmosphere",
   "signIn.matchingAccounts": "Matching accounts",
-  "signIn.privacy": "You sign in on your account's own site (Bluesky's, for most people) and approve what this site can do. Your password is never shared here.",
+  "signIn.privacy": "You sign in on your account's own site (Bluesky's, for most people). Your sign-in is kept in this browser. {{site}} can use it only for what you approved, and signing out here ends it.",
+  "signIn.thisSite": "This site",
   "signIn.createAccount": "Create one for free",
-  "elsewhere.text": "Rather not sign in? {{link}}",
-  "elsewhere.link": "Reply on Bluesky instead →",
+  "elsewhere.text": "Rather not sign in here? {{link}}",
+  "elsewhere.link": "Respond on Bluesky →",
   "actions.label": "Respond to this post",
   "actions.likeAndRecommend": "Like on Bluesky, and recommend in apps such as Leaflet",
   "actions.like": "Like",
@@ -97,6 +99,7 @@
   "follow.following": "Following",
   "follow.followAs": "Follow {{handle}} as {{me}}",
   "follow.followingLabel": "You follow {{handle}}",
+  "follow.link": "Follow {{handle}} on Bluesky",
   "subscribe.subscribe": "Subscribe",
   "subscribe.subscribed": "✓ Subscribed",
   "subscribe.subscribeLabel": "Subscribe with your Atmosphere account, to read new posts in apps such as Leaflet or Standard Reader",
@@ -108,10 +111,13 @@
   "subscribe.feed": "RSS feed",
   "subscribe.viewBluesky": "View on Bluesky",
   "subscribe.standardReader": "View on Standard Reader",
-  "subscribe.panelText": "Read new posts in apps such as {{leaflet}} or {{standardReader}}.",
+  "subscribe.leaflet": "View on Leaflet",
+  "subscribe.panelText": "Subscribe to read new blog posts in apps such as {{leaflet}} or {{standardReader}}.",
+  "subscribe.panelTextFeed": "Subscribe to read new blog posts in apps such as {{leaflet}} or {{standardReader}}, or follow the feed in any feed reader.",
+  "subscribe.followNote": "To see everything {{handle}} posts, follow it on Bluesky.",
+  "subscribe.follow": "Follow on Bluesky",
   "credit": "Powered by {{link}}",
   "callback.signingIn": "Signing you in…",
-  "signIn.access": "Your sign-in is kept only in this browser. This site's server never sees it, so it can't post for you. Signing out here cancels it.",
   "signIn.policy": "How this site handles your data",
   "composer.needsPermission": "To comment here as {{handle}}, this site needs one more permission from your Atmosphere account.",
   "comment.hide": "Hide",