astro-atmosphere-comments 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.8.0 (8 November 2026)
+
+- **New `AtmosphereFollow` component:** "Follow @handle on Bluesky →", a link to the account's profile that becomes a Follow / ✓ Following button for signed-in readers (with `AtmosphereReactions` in the layout). Signed out it stays a link, so nobody is asked to sign in just to follow. Props, all optional: `account` (handle or DID; default the `standardSite` publication's account), `label`, `class`. The handle and DID are looked up when the page is built, with a warning if the account can't be found or isn't in `allowedAuthors`. The Subscribe menu's "Follow on Bluesky" uses it. New key `follow.link`.
+- **New `AtmosphereSubscribe` component:** the Subscribe button and its ⌄ menu, to place anywhere, such as at the top of a blog's list of posts (with `AtmosphereReactions` in the layout, which works the button and offers signing in). Props, all optional: `align` (`"end"` opens the menu leftwards, for a button near the right-hand edge), `copyUrl` (what Copy link copies), `links` (extra menu items, e.g. "Add to Feedly") and `bluesky` (adds "View on Bluesky"; under a post, it's the post's thread). Shows nothing without `standardSite`. `AtmosphereComments` uses it for the one under each post, so the two can't drift apart; the menu's script moved into it.
+- **"View on Leaflet"** in the menu (`https://leaflet.pub/lish/<did>/<rkey>`), which shows any Standard.site publication, not only ones made with Leaflet. New key `subscribe.leaflet`.
+- **The menu says what Subscribe is for, and offers following.** Its note now reads "Subscribe to read new blog posts in apps such as Leaflet or Standard Reader, or follow the feed in any feed reader. To see everything @handle posts, follow it on Bluesky." (the feed part only with `feed`; the handle is the publication's account, looked up when the page is built). Under it, "Follow on Bluesky →" links to that account's profile, and `AtmosphereReactions` turns it into a Follow / Following button for signed-in readers. Subscribing still never follows. Keys: `subscribe.panelText` changed; new `subscribe.panelTextFeed`, `subscribe.followNote`, `subscribe.follow`. The note's line height is 1.5.
+- **Several Follow buttons for one account stay in step** (say, one in a toolbar and one in the Subscribe menu): before, only the first link for an account became a button.
+- **A clear "Liked" or "Reposted" after signing in.** When a reader presses Like or Repost while signed out, it's finished once they're back from signing in. Now a small bubble pops up over the button, with its icon enlarged and the word, then fades, so it's clear it went through. It appears only once the account host has accepted it, and readers who ask for less motion get a plain fade. In both components, for posts and comments. New `lib/client/done.ts`; styles `.atmo-done`; buttons are marked `data-busy` while their request runs.
+- **Replying from `AtmosphereReactions` shows the post being replied to** above the box, as the Quote preview does, because the reply won't appear on that page. The post comes through the site's `post` route (as the Quote preview's does), and also gives "Replying to" its author's handle. The preview's markup is now a shared `PostPreview` component (`.atmo__parent` for this one).
+- **"Replying to" never shows a DID.** In `AtmosphereReactions`, a post whose `data-atmosphere-url` names its author by DID (`https://bsky.app/profile/did:plc:…/post/…`) used to show "Replying to @did:plc:…". It now shows "Replying to someone" until the post being replied to has loaded (see above), then its author's `@handle`. If that fails, it stays "someone". Addresses with a handle are shown straight away, as before.
+- **Clearer sign-in overlay wording.** The link for readers who'd rather not sign in now says "Respond on Bluesky →" (was "Reply on Bluesky instead →", even when they'd pressed Like or Repost), after "Rather not sign in here?". "How does signing in work?" is now one short paragraph, and no longer says the site "can't post for you", which overstated it: it says the sign-in is kept in the browser and that the site (named by its address, from `site`) can use it only for what the reader approved. "No account? Create one for free" has a line of its own. The overlay's small text has its own line height (1.7 for the two lines about accounts, 1.5 for the paragraph) rather than the site's body text's. Keys: new `signIn.noAccount` and `signIn.thisSite`; `signIn.access` removed; `signIn.anyAccount`, `signIn.privacy`, `elsewhere.text` and `elsewhere.link` changed; all eight languages.
+
 ## 0.7.0 (8 November 2026)
 
 **Comments from people who show their posts only to signed-in readers.** Those accounts use Bluesky's "Discourage apps from showing my account to logged-out users".

package/README.md

@@ -25,7 +25,7 @@ See it on [saltedlolly.com](https://saltedlolly.com/2005/07/13/summer-jam-party-
 3. **The sign-in stays in the reader's browser.** Your server never sees it: comments, likes and reposts go from the reader's browser straight to their own account host. So your server has no way to post for anyone, a copy of your server's files holds nothing about your readers, and when a reader signs out, the sign-in is cancelled at their host and deleted from their browser. That's it: nothing is left anywhere.
 4. Your site asks, in one approval, only for what readers can do on it: to create posts, to like and repost, to delete their comments and to follow your accounts (and, when one of your own accounts signs in, to hide comments; with the `standardSite` option, to subscribe and recommend). Each is used only on your posts, the comments under them and your accounts. Readers can see and cancel it all at their account host.
 
-Everyone sees Like, Repost, Quote and a box to write a comment. Pressing any of them signed out opens an overlay to sign in, and what they pressed is finished once they're back. Readers who'd rather not sign in can use the **Reply on Bluesky instead** link in the overlay.
+Everyone sees Like, Repost, Quote and a box to write a comment. Pressing any of them signed out opens an overlay to sign in, and what they pressed is finished once they're back. Readers who'd rather not sign in can use the **Respond on Bluesky** link in the overlay.
 
 Images (avatars, link-card pictures), account searches (the suggestions under the sign-in box and for @mentions) and account lookups when signing in go through your server, so readers' browsers contact only their own account host, never Bluesky's other servers.
 
@@ -101,9 +101,21 @@ import AtmosphereReactions from "astro-atmosphere-comments/AtmosphereReactions.a
 <AtmosphereReactions />
 ```
 
-Each marked post gets a row of icons: Reply, Repost, Quote and Like, with counts for Repost and Like. Readers already signed in on your site like and repost straight away, and Reply and Quote open the comment box in an overlay (with the quote preview); what they post goes to Bluesky, not your page, and the overlay says so with a link to it. Anyone else is offered the sign-in form in an overlay when they press Like or Repost (their like or repost is done when they come back), and Reply and Quote open the post on Bluesky. It works with posts from loaders such as [`@ascorbic/bluesky-loader`](https://www.npmjs.com/package/@ascorbic/bluesky-loader) or embeds such as [`@astro-community/astro-embed-bluesky`](https://www.npmjs.com/package/@astro-community/astro-embed-bluesky) (wrap the embed in the marked element). Only posts by your `allowedAuthors` can be liked or reposted through your site.
+Give `data-atmosphere-url` with the author's handle, as above. An address with a DID instead (`/profile/did:plc:…/post/…`) works too: the reply box then shows "Replying to someone" until the post has loaded through your site, then the handle, and never the DID.
 
-A "follow me" link can become a **Follow** button for signed-in readers: mark it with the account's DID and handle. It shows "Following" once they do (a second press unfollows, as on Bluesky). Only your `allowedAuthors` can be followed through your site, and the account's owner (who can't follow themselves) keeps the plain link.
+Each marked post gets a row of icons: Reply, Repost, Quote and Like, with counts for Repost and Like. Readers already signed in on your site like and repost straight away, and Reply and Quote open the comment box in an overlay (Reply with the post being replied to above the box, Quote with the quote preview); what they post goes to Bluesky, not your page, and the overlay says so with a link to it. Anyone else is offered the sign-in form in an overlay when they press Like or Repost (their like or repost is done when they come back, with a brief "Liked" or "Reposted" over the button), and Reply and Quote open the post on Bluesky. It works with posts from loaders such as [`@ascorbic/bluesky-loader`](https://www.npmjs.com/package/@ascorbic/bluesky-loader) or embeds such as [`@astro-community/astro-embed-bluesky`](https://www.npmjs.com/package/@astro-community/astro-embed-bluesky) (wrap the embed in the marked element). Only posts by your `allowedAuthors` can be liked or reposted through your site.
+
+A **Follow** button: `AtmosphereFollow` shows "Follow @you.bsky.social on Bluesky →", a link to the account's Bluesky profile, and for signed-in readers it becomes a Follow button, showing "Following" once they do (a second press unfollows, as on Bluesky). Readers who aren't signed in just follow on Bluesky: they're never asked to sign in here for it.
+
+```astro
+---
+import AtmosphereFollow from "astro-atmosphere-comments/AtmosphereFollow.astro";
+---
+
+<AtmosphereFollow account="you.bsky.social" />
+```
+
+`account` takes a handle or a DID (default: your `standardSite` publication's account), `label` replaces the wording and `class` styles the link; the handle and DID are looked up when the page is built. Only your `allowedAuthors` can be followed through your site (others stay a link, with a warning in the build), and the account's owner, who can't follow themselves, keeps the plain link. It needs `AtmosphereReactions` in your layout. A link of your own works too, marked with the account's DID and handle:
 
 ```astro
 <a href="https://bsky.app/profile/you.bsky.social"
@@ -112,7 +124,25 @@ A "follow me" link can become a **Follow** button for signed-in readers: mark it
 
 **Publishing to Standard.site:** [Atmosphere Publishing for Astro](https://github.com/saltedlolly/astro-atmosphere-publishing) is the companion integration made to work with this one. It publishes your posts' Standard.site records, announces new posts on Bluesky and adds each page's `<link rel="site.standard.document">` tag, so the comment box finds each post's announcement without a `post` prop. Its `publicationFromState()` helper gives the `standardSite` option your publication (below). Other publishers work too, as long as they add that tag and set the record's `bskyPostRef`, as [Sequoia](https://sequoia.pub) does.
 
-If you publish [Standard.site](https://standard.site) records, set the integration's `standardSite` option. Readers can then **subscribe** to your publication from your site, and read new posts in apps such as Leaflet or Standard Reader. `AtmosphereComments` shows a Subscribe button under each post, with Like and Repost. To put a button anywhere else (with `AtmosphereReactions` in your layout), mark it as below; it stays hidden without the option or JavaScript. Anyone not signed in is offered the sign-in form, and subscribed once they're back; a second press unsubscribes.
+If you publish [Standard.site](https://standard.site) records, set the integration's `standardSite` option. Readers can then **subscribe** to your publication from your site, and read new posts in apps such as Leaflet or Standard Reader. `AtmosphereComments` shows a Subscribe button under each post, with Like and Repost, and a ⌄ menu of more ways to follow your site: a note on what subscribing does with a Follow on Bluesky link, Copy link, your feed (the option's `feed`), View on Bluesky (the post's thread), View on Standard Reader and View on Leaflet.
+
+The same button and menu can go anywhere, such as at the top of your blog's list of posts, with `AtmosphereSubscribe` (and `AtmosphereReactions` in your layout, which works the button and offers signing in):
+
+```astro
+---
+import AtmosphereSubscribe from "astro-atmosphere-comments/AtmosphereSubscribe.astro";
+---
+
+<AtmosphereSubscribe
+  align="end"
+  copyUrl="https://example.com/blog/"
+  links={[{ label: "Add to Feedly", href: "https://feedly.com/i/subscription/feed%2Fhttps%3A%2F%2Fexample.com%2Ffeed%2F" }]}
+/>
+```
+
+All its props are optional. `align="end"` lines the menu up with the button's right-hand edge, for a button near the right of the page (the default, `"start"`, lines it up on the left). `copyUrl` is what Copy link copies (default: your site's address). `links` adds items to the end of the menu. `bluesky` adds a View on Bluesky item going there (under each post it's the post's thread). The menu's note also suggests following your publication's account on Bluesky, with a link to its profile that becomes a Follow / Following button for signed-in readers; subscribing itself never follows. It shows nothing without the `standardSite` option, and needs JavaScript.
+
+For a button of your own design instead (with `AtmosphereReactions` in your layout), mark it as below; it stays hidden without the option or JavaScript. Anyone not signed in is offered the sign-in form, and subscribed once they're back; a second press unsubscribes.
 
 ```astro
 <button type="button" data-atmosphere-subscribe hidden>
@@ -159,7 +189,7 @@ Locally the integration uses the protocol's development mode, so it works withou
 | `post` | The announcement: bsky.app address or AT URI. Optional with Standard.site (above). |
 | `label` | The sign-in overlay's heading when commenting. Default "Sign in to leave a comment". |
 | `authorLabel` | The badge on your own comments. Default "Author". |
-| `blueskyLink` | "Rather not sign in here? Reply on Bluesky instead →" in the sign-in overlay, linking to the announcement (with `u-syndication`, so microformats readers learn it's the post's copy on Bluesky). Default `true`; `blueskyLink={false}` hides it. |
+| `blueskyLink` | "Rather not sign in here? Respond on Bluesky →" in the sign-in overlay, linking to the announcement (with `u-syndication`, so microformats readers learn it's the post's copy on Bluesky). Default `true`; `blueskyLink={false}` hides it. |
 | `locale`, `messages` | The same as the integration's options, for this one component. |
 | `locale`, `messages` (also on `AtmosphereReactions`) | See Languages. |
 | `credit` | A small "Powered by Atmosphere Comments for Astro" link at the end. Default `true`; set `credit={false}` to hide it. |

package/components/AtmosphereComments.astro

@@ -7,7 +7,7 @@
 // Props:
 //   post   the announcement's AT URI (at://did/app.bsky.feed.post/rkey).
 //   label   the sign-in overlay's heading when commenting (default "Sign in to leave a comment").
-//   blueskyLink  "Rather not sign in here? Reply on Bluesky instead →" in the
+//   blueskyLink  "Rather not sign in here? Respond on Bluesky →" in the
 //           sign-in overlay (default true; false hides it).
 //   credit  a small "Powered by Atmosphere Comments for Astro" link under the
 //           comments (default true; false hides it).
@@ -38,6 +38,7 @@
 import settings from "../lib/settings";
 import SignInForm from "./SignInForm.astro";
 import Composer from "./Composer.astro";
+import AtmosphereSubscribe from "./AtmosphereSubscribe.astro";
 import "./atmosphere.css";
 import { messagesFor, pickLocale, translate, translateHtml } from "../lib/i18n";
 import { escapeHtml } from "../lib/translate";
@@ -56,7 +57,7 @@ interface Props {
   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 →" in the sign-in overlay. Default true. */
+  /** "Rather not sign in here? Respond on Bluesky →" in the sign-in overlay. Default true. */
   blueskyLink?: boolean;
   /** The language of the wording, e.g. "fr". Overrides the integration's `locale`. */
   locale?: string;
@@ -110,31 +111,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         <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>{t("actions.quote")}</span>
       </button>
-      {/* With the `standardSite` option. */}
-        {settings.standardSite && (
-      <div class="atmo-subscribe" 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>
-          <p
-            class="atmo-subscribe__note"
-            set:html={th("subscribe.panelText", {
-              leaflet: link("https://leaflet.pub", "Leaflet"),
-              standardReader: link("https://standard-reader.app", "Standard Reader"),
-            })}
-          />
-          <button type="button" data-subscribe-copy={settings.site} 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>
-          {settings.standardSite.feed && <a href={settings.standardSite.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={blueskyUrl || undefined} hidden={!blueskyUrl} 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/${settings.standardSite.publication.split("/")[2]}/${settings.standardSite.publication.split("/")[4]}`} 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>
-        </div>
-      </div>
-    )}
+      {/* With the `standardSite` option: Subscribe and its ⌄ menu. "View on Bluesky" is this post's thread. */}
+      <AtmosphereSubscribe bluesky={blueskyUrl || undefined} locale={lang} messages={messages} />
     </div>
 
     {/* A sign-in from before posting was asked for: one more permission. */}
@@ -195,6 +173,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
   import { translate } from "../lib/translate";
   import { enhanceHandleBox } from "../lib/client/handle-suggestions";
   import { MAX, quotePreview, setUpComposer, type ComposerBehaviour, type Posted } from "../lib/client/composer";
+  import { showDoneWhenPressed } from "../lib/client/done";
   import { handleSignInForm, me as whoIsSignedIn, send, signIn, signOut, state, withheldPosts } from "../lib/client/account";
   import publicSettings from "../lib/public-settings";
   import { segments } from "../lib/richtext";
@@ -669,43 +648,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const askToSubscribe = (problem?: string) => openSignIn(t("subscribe.signIn"), "#atmo-subscribe", problem);
       if (subscribePanel) addSubscribeButtons([...subscribePanel.querySelectorAll<HTMLButtonElement>("[data-atmosphere-subscribe]")], t, askToSubscribe);
 
-      // The ⌄ menu beside Subscribe: more ways to follow the site.
-      const moreButton = subscribePanel?.querySelector<HTMLButtonElement>("[data-subscribe-more]");
-      const moreMenu = subscribePanel?.querySelector<HTMLElement>("[data-subscribe-menu]");
-      if (subscribePanel && moreButton && moreMenu) {
-        const setMenu = (open: boolean) => {
-          moreMenu.hidden = !open;
-          moreButton.setAttribute("aria-expanded", String(open));
-        };
-        moreButton.addEventListener("click", () => {
-          setMenu(moreMenu.hidden);
-          if (!moreMenu.hidden) moreMenu.querySelector<HTMLElement>("[data-subscribe-copy]")?.focus();
-        });
-        document.addEventListener("click", (event) => {
-          if (!subscribePanel.contains(event.target as Node)) setMenu(false);
-        });
-        subscribePanel.addEventListener("keydown", (event) => {
-          if (event.key === "Escape" && !moreMenu.hidden) {
-            setMenu(false);
-            moreButton.focus();
-          }
-        });
-        const copy = moreMenu.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.
-          }
-        });
-      }
+      // The ⌄ menu beside Subscribe is worked by AtmosphereSubscribe itself.
 
       // What the reader has liked or reposted, by post (filled in by loadState).
       let known: Record<string, { liked: boolean; reposted: boolean }> = {};
@@ -728,6 +671,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           if (!isSignedIn) return askToSignIn(kind === "like" ? "comment-like" : "comment-repost", comment.dataset.atmosphereUri);
           const on = button.getAttribute("aria-pressed") !== "true";
           const before = Number(button.dataset.count || 0);
+          // Busy until the account host answers (lib/client/done.ts waits for it).
+          button.dataset.busy = "";
           button.setAttribute("aria-pressed", String(on));
           setCount(Math.max(0, before + (on ? 1 : -1)));
           try {
@@ -738,6 +683,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             setCount(before);
             const { error, permission } = (problem ?? {}) as { error?: string; permission?: string };
             handleError(error ?? "error", say, permission);
+          } finally {
+            delete button.dataset.busy;
           }
         });
         return button;
@@ -943,8 +890,11 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           return;
         }
         const comment = uri ? document.querySelector<HTMLElement>(`[data-atmosphere-uri="${CSS.escape(uri)}"]`) : null;
+        // Pressed for them, with a brief "Liked" or "Reposted" once it's gone through.
         const press = (button: HTMLElement | null | undefined) => {
-          if (button?.getAttribute("aria-pressed") !== "true") button?.click();
+          if (!button || button.getAttribute("aria-pressed") === "true") return;
+          showDoneWhenPressed(button, t(kind.endsWith("like") ? "actions.liked" : "actions.reposted"));
+          button.click();
         };
         (comment ?? this).scrollIntoView({ block: "center" });
         if (kind === "like" || kind === "repost") press(reactButton(kind));
@@ -1101,6 +1051,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         reactButton(kind).addEventListener("click", async () => {
           if (!isSignedIn) return askToSignIn(kind);
           const on = reactButton(kind).getAttribute("aria-pressed") !== "true";
+          // Busy until the account host answers (lib/client/done.ts waits for it).
+          reactButton(kind).dataset.busy = "";
           setPressed(kind, on);
           try {
             // Liking the post also recommends the page's Standard.site record, if it has one.
@@ -1122,6 +1074,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           } catch {
             setPressed(kind, !on);
             say(message("error"));
+          } finally {
+            delete reactButton(kind).dataset.busy;
           }
         });
       }

package/components/AtmosphereFollow.astro

@@ -0,0 +1,63 @@
+---
+// "Follow @handle on Bluesky →": a link to the account's Bluesky profile,
+// which AtmosphereReactions (in the layout) turns into a Follow / ✓ Following
+// button for signed-in readers. Signed out it stays a link, so readers follow
+// on Bluesky itself: nobody is asked to sign in here just to follow.
+//
+// Props (all optional):
+//   account   the account to follow, by DID or handle (default: the
+//             `standardSite` publication's account). Must be one of the
+//             integration's `allowedAuthors` for the button to work.
+//   label     the link's text, instead of "Follow @handle on Bluesky"
+//   class     classes for the link
+//   locale, messages  as for AtmosphereComments
+import settings from "../lib/settings";
+import { messagesFor, pickLocale, translate } from "../lib/i18n";
+import { profileFor } from "../lib/profile";
+import { resolveHandle } from "../lib/resolve";
+
+interface Props {
+  account?: string;
+  label?: string;
+  class?: string;
+  locale?: string;
+  messages?: Record<string, string>;
+}
+
+const lang = pickLocale(Astro.props.locale, settings.locale, Astro.currentLocale);
+const messages = messagesFor(lang, { ...settings.messages, ...Astro.props.messages });
+
+// The DID and handle, looked up when the page is built.
+const given = (Astro.props.account ?? settings.standardSite?.publication?.split("/")[2] ?? "").replace(/^@/, "");
+let did = "";
+let handle = "";
+if (given.startsWith("did:")) {
+  did = given;
+  const profile = await profileFor(did).catch(() => null);
+  if (profile && profile.handle !== did) handle = profile.handle;
+} else if (given) {
+  handle = given;
+  did = await resolveHandle(given).catch(() => "");
+}
+if (given && !did) {
+  console.warn(`[atmosphere-comments] AtmosphereFollow: couldn't find the account ${given}, so it's a plain link.`);
+} else if (did && !settings.allowedAuthors.includes(did)) {
+  console.warn(
+    `[atmosphere-comments] AtmosphereFollow: ${handle || did} isn't in allowedAuthors, so it stays a link for everyone.`,
+  );
+}
+const label =
+  Astro.props.label ??
+  (handle ? translate(messages, lang, "follow.link", { handle: `@${handle}` }) : translate(messages, lang, "subscribe.follow"));
+---
+
+{(did || handle) && (
+  <a
+    class:list={["atmo-follow-link", Astro.props.class]}
+    href={`https://bsky.app/profile/${handle || did}`}
+    target="_blank"
+    rel="noopener"
+    data-atmosphere-follow={did && settings.allowedAuthors.includes(did) ? did : undefined}
+    data-atmosphere-follow-handle={handle || undefined}
+  >{label} →</a>
+)}

package/components/AtmosphereReactions.astro

@@ -92,7 +92,8 @@ const { base } = settings;
 <script>
   import { translate } from "../lib/translate";
   import { enhanceHandleBox } from "../lib/client/handle-suggestions";
-  import { MAX, quotePreview, setUpComposer, type Posted } from "../lib/client/composer";
+  import { MAX, fetchPost, quotePreview, setUpComposer, showPost, type Posted, type ShownPost } from "../lib/client/composer";
+  import { showDone } from "../lib/client/done";
   import { following, handleSignInForm, me as whoIsSignedIn, send as act, signIn, signOut as endSignIn, state } from "../lib/client/account";
   import { addSubscribeButtons, finishPendingSubscribe, loadSubscribed } from "../lib/client/subscribe";
   import type { Permission } from "../lib/permissions";
@@ -211,13 +212,45 @@ const { base } = settings;
       const quote = quotePreview(composeForm, composer.textarea, composerContext);
       $c<HTMLElement>("[data-cancel-context]").hidden = true;
 
+      // The post being replied to, shown above the box, since the reply won't
+      // appear on this page: fetched through the site once per post.
+      const parent = $c<HTMLElement>("[data-parent]");
+      const fetched = new Map<string, Promise<ShownPost | null>>();
+      const postFor = (uri: string) => {
+        if (!fetched.has(uri)) fetched.set(uri, fetchPost(base, uri));
+        return fetched.get(uri)!;
+      };
+      // A handle, never a DID: a post's address may name its author either way
+      // (Bluesky accepts both), and a lookup that fails gives back the DID.
+      const shownHandle = (handle?: string | null) =>
+        handle && !handle.startsWith("did:") && handle !== "handle.invalid" ? handle : null;
+      const replyingTo = (handle?: string | null) =>
+        t("composer.replyingTo", { name: shownHandle(handle) ? `@${handle}` : t("comment.someone") });
+
       const openCompose = (post: HTMLElement, mode: "reply" | "quote") => {
         composeRoot = post.dataset.atmospherePost!;
         composeMode = mode;
-        const author = post.dataset.atmosphereUrl?.match(/\/profile\/([^/]+)\//)?.[1];
+        // From the bsky.app address until the post itself arrives.
+        let author: string | undefined;
+        try {
+          author = decodeURIComponent(post.dataset.atmosphereUrl?.match(/\/profile\/([^/]+)\//)?.[1] ?? "");
+        } catch {
+          author = undefined;
+        }
+        const context = $c<HTMLElement>("[data-context-text]");
         $c<HTMLElement>("[data-context]").hidden = false;
-        $c<HTMLElement>("[data-context-text]").textContent =
-          mode === "quote" ? t("composer.quoting") : t("composer.replyingTo", { name: author ? `@${author}` : t("comment.someone") });
+        parent.hidden = true;
+        if (mode === "quote") context.textContent = t("composer.quoting");
+        else {
+          context.textContent = replyingTo(author);
+          const root = composeRoot;
+          void postFor(root).then((shown) => {
+            if (!shown || composeRoot !== root || composeMode !== "reply") return;
+            showPost(parent, shown, composerContext);
+            parent.hidden = false;
+            if (shownHandle(shown.author.handle)) context.textContent = replyingTo(shown.author.handle);
+          });
+        }
         $c<HTMLElement>("[data-verb]").textContent = t(mode === "quote" ? "composer.quote" : "comment.reply");
         $c<HTMLElement>("[data-submit]").textContent = t(mode === "quote" ? "composer.postQuote" : "composer.postReply");
         $c<HTMLElement>("[data-preview]").hidden = mode !== "quote";
@@ -407,7 +440,16 @@ const { base } = settings;
       // Follow buttons in place of links marked data-atmosphere-follow, for
       // signed-in readers: "Follow @handle", then "Following" (a second press
       // unfollows, as on Bluesky, without inviting it).
-      const followButtons = new Map<string, { following: boolean; set: (on: boolean) => void; press: () => Promise<void> }>();
+      // One entry per account, however many links for it the page has (say,
+      // one in a toolbar and one in the Subscribe menu): they all agree.
+      type FollowState = {
+        following: boolean;
+        buttons: HTMLButtonElement[];
+        renders: (() => void)[];
+        set: (on: boolean) => void;
+        press: () => Promise<void>;
+      };
+      const followButtons = new Map<string, FollowState>();
       // Following isn't part of signing in: the first follow asks the
       // reader's account host for it, then carries on when they're back.
       const askFollowPermission = (subject: string, who: string) =>
@@ -415,19 +457,47 @@ const { base } = settings;
       const setUpFollow = async () => {
         for (const link of document.querySelectorAll<HTMLElement>("[data-atmosphere-follow]")) {
           const subject = link.dataset.atmosphereFollow!;
-          if (followButtons.has(subject) || link.nextElementSibling?.matches(".atmo-follow")) continue;
+          if (link.nextElementSibling?.matches(".atmo-follow")) continue;
           // Nobody can follow themselves: the account's owner keeps the link.
           if (subject === me.did) continue;
           const who = link.dataset.atmosphereFollowHandle ? `@${link.dataset.atmosphereFollowHandle}` : t("comment.someone");
+          let state = followButtons.get(subject);
+          const isNew = !state;
+          if (!state) {
+            const created: FollowState = {
+              following: false,
+              buttons: [],
+              renders: [],
+              set: (on) => {
+                created.following = on;
+                created.renders.forEach((render) => render());
+              },
+              press: async () => {
+                created.buttons.forEach((each) => (each.disabled = true));
+                try {
+                  const response = await act("follow", { subject, on: !created.following });
+                  const data = (await response.json().catch(() => ({}))) as { following?: boolean; error?: string };
+                  if (response.ok) return created.set(!!data.following);
+                  if (data.error === "needs-permission") return void askFollowPermission(subject, who);
+                  if (data.error === "signed-out") location.reload();
+                } finally {
+                  created.buttons.forEach((each) => (each.disabled = false));
+                }
+              },
+            };
+            state = created;
+            followButtons.set(subject, state);
+          }
           const button = make("button", "atmo-follow");
           button.type = "button";
-          let isFollowing = false;
           // The account's avatar, through the site (its own accounts' are always served).
           const avatar = make("img", "atmo-follow__avatar");
           avatar.src = `${base}/media?avatar=${encodeURIComponent(subject)}`;
           avatar.alt = "";
           avatar.onerror = () => avatar.remove();
+          const current = state;
           const render = () => {
+            const isFollowing = current.following;
             button.setAttribute("aria-pressed", String(isFollowing));
             // The butterfly, then "Follow" with the account's avatar beside its
             // handle (wherever the language puts the handle), or the avatar
@@ -444,32 +514,19 @@ const { base } = settings;
             button.title = isFollowing ? t("follow.followingLabel", { handle: who }) : t("follow.followAs", { handle: who, me: handle });
             button.setAttribute("aria-label", button.title);
           };
-          const set = (on: boolean) => {
-            isFollowing = on;
-            render();
-          };
-          const press = async () => {
-            button.disabled = true;
-            try {
-              const response = await act("follow", { subject, on: !isFollowing });
-              const data = (await response.json().catch(() => ({}))) as { following?: boolean; error?: string };
-              if (response.ok) return set(!!data.following);
-              if (data.error === "needs-permission") return void askFollowPermission(subject, who);
-              if (data.error === "signed-out") location.reload();
-            } finally {
-              button.disabled = false;
-            }
-          };
-          button.addEventListener("click", () => void press());
-          followButtons.set(subject, { get following() { return isFollowing; }, set, press });
+          button.addEventListener("click", () => void current.press());
+          current.buttons.push(button);
+          current.renders.push(render);
           render();
           // The button takes the link's place. (Inline, as a site's own style
           // for the link could otherwise keep it showing.)
           link.hidden = true;
           link.style.display = "none";
           link.after(button);
-          const known = await following(subject);
-          if (known !== null) set(known);
+          if (isNew) {
+            const known = await following(subject);
+            if (known !== null) current.set(known);
+          }
         }
       };
 
@@ -516,7 +573,11 @@ const { base } = settings;
           return;
         }
         const button = post.querySelector<HTMLButtonElement>(`.atmo-post-action[data-kind='${kind}']`);
-        if (button && button.getAttribute("aria-pressed") !== "true") await react(post, button, kind as Kind, true);
+        if (button && button.getAttribute("aria-pressed") !== "true") {
+          await react(post, button, kind as Kind, true);
+          // A brief "Liked" or "Reposted", so it's clear it went through.
+          if (button.getAttribute("aria-pressed") === "true") showDone(button, t(kind === "like" ? "actions.liked" : "actions.reposted"));
+        }
       };
 
       // Back from signing in or allowing posting: open the Reply or Quote box they pressed.