astro-atmosphere-comments 0.6.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # 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".
+
+- **Signed-in readers see them:** the reader's browser fetches those comments through the reader's own sign-in (`app.bsky.feed.getPosts`, already part of the approval, so nobody has to sign in again). They then show as normal comments, with Reply, Like and Repost. Signing out puts the placeholders back. The server still never sends their names, pictures or words; the page holds only each comment's address (its AT URI).
+- **Signed-out readers get a clearer placeholder:** a blurred stand-in made of grey bars (never the real comment), with "Comment hidden" and a line saying to sign in to see it. Clicking it opens the sign-in overlay, and the page scrolls to the comment once they're back. The replies under it stay, as before. Styles: `.atmo-comment--withheld`, `.atmo-withheld__ghost`, `.atmo-withheld__cover`; `.atmo-comment__withheld` is gone.
+- **Like and repost counts match the faces:** those accounts are no longer left out of the faces. Signed out, they show as a faceless silhouette (`.atmo-avatar-anonymous`) with no name or link; signed in, their real face, looked up through the site's `profile` route. The thread data gives only their DID (`withheld: true`).
+- A broken avatar picture now falls back to the person's initial.
+- New wording keys `comment.withheldTitle`, `comment.withheldSignedIn`, `signInFirst.view`, `reactions.hiddenPerson`; `comment.withheld` changed. Draft translations in all eight languages.
+
 ## 0.6.1 (7 November 2026)
 
 - Uses the current AT Protocol library (`@atproto/api` 0.30, was 0.25), the same version as Atmosphere Publishing for Astro, so a site using both installs it once.

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. |
@@ -223,7 +253,7 @@ The component fires (bubbling):
 - **What's checked before anything is sent** (by the browser code, `lib/client/account.ts`): only your announcements and the comments under them can be replied to, liked, reposted or quoted; only a reader's own replies under your announcements can be deleted; only your `standardSite` publication can be subscribed to, and only documents in its account recommended; only your `allowedAuthors` can be followed; only an announcement's author can hide comments under it.
 - **What your server does:** it shows the threads, looks up accounts and suggestions, finds the links and mentions in a comment before it's posted, and passes on avatars and link pictures it has just shown. None of it needs to know who a reader is. Each route that calls Bluesky is rate-limited per address, with an overall cap; requests that aren't simple reads must come from your own pages (checked by `Origin`). Readers' addresses are used only for those limits, never stored.
 - **Trade-off:** account hosts trust browser sign-ins less than ones kept on a server, so they last less long (Bluesky's currently last about two weeks), and there's no way for a site to sign everyone out at once. For a reader who'd rather not trust your server, that's the point.
-- **People who'd rather not be shown publicly:** Bluesky's setting "Discourage apps from showing my account to logged-out users" is respected, as your page is public. A comment from such an account shows only as "Not shown here…" (no name, picture or words reach the page), the replies under it stay, and the account is left out of the faces of who liked and reposted.
+- **People who'd rather not be shown publicly:** Bluesky's setting "Discourage apps from showing my account to logged-out users" is respected, as your page is public. For readers who aren't signed in, a comment from such an account shows as a blurred "Comment hidden" placeholder (made-up grey bars: no name, picture or words reach the page, only the comment's address), the replies under it stay, and the account appears in the faces of who liked and reposted as a faceless silhouette, so the counts still add up. Clicking the placeholder offers sign-in. Signed-in readers see these comments and faces as normal: their own browser fetches them with their own sign-in.
 - **Moderation:** comments appear automatically. Hide one with Hide under it (signed in as the account that posted the announcement) or in the Bluesky app; it disappears here too. Show it again in the Bluesky app. You can also block the account, or add it to `hidden`.
 
 ## Limitations (for now)

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,7 +173,10 @@ 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 { handleSignInForm, me as whoIsSignedIn, send, signIn, signOut, state } from "../lib/client/account";
+  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";
   import { addSubscribeButtons, finishPendingSubscribe, forgetSubscribed, loadSubscribed } from "../lib/client/subscribe";
   import type { Permission } from "../lib/permissions";
   import { authorOf } from "../lib/uris";
@@ -268,7 +249,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 
       // The thread: likes and reposts above the comment box, and the comments
       // below it, read through this site (routes/thread.ts).
-      type Person = { did: string; handle: string; displayName?: string; avatar?: string; url: string };
+      type Person = { did: string; handle: string; displayName?: string; avatar?: string; url: string; withheld?: true };
       type Reply = {
         uri: string;
         url: string;
@@ -283,6 +264,9 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       };
       type Thread = { uri: string; url: string; likeCount: number; repostCount: number; likes: Person[]; reposts: Person[]; replies: Reply[] };
       let thread: Thread | null = null;
+      // Withheld comments and faces, as a signed-in reader sees them (by AT URI and DID).
+      const revealedReplies = new Map<string, Reply>();
+      const revealedPeople = new Map<string, Person>();
       const reactionsBox = $<HTMLElement>("[data-reactions]");
       const repliesList = $<HTMLOListElement>("[data-replies]");
       const authorLabel = t("comment.author");
@@ -298,12 +282,24 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         if (text !== undefined) element.textContent = text;
         return element;
       };
-      const avatarOf = (person: Pick<Person, "handle" | "displayName" | "avatar">, className: string) => {
-        if (person.avatar) return Object.assign(make("img", className), { src: person.avatar, alt: "", loading: "lazy" as const });
+      const initialOf = (person: Pick<Person, "handle" | "displayName">, className: string) => {
         const initial = make("span", `${className} atmo-avatar-initial`, nameOf(person).replace("@", "").charAt(0).toUpperCase());
         initial.setAttribute("aria-hidden", "true");
         return initial;
       };
+      // A faceless avatar, for someone who asks not to be shown to people who aren't signed in.
+      const anonymousAvatar = (className: string) => {
+        const face = make("span", `${className} atmo-avatar-anonymous`);
+        face.setAttribute("aria-hidden", "true");
+        return face;
+      };
+      const avatarOf = (person: Pick<Person, "handle" | "displayName" | "avatar"> & { withheld?: true }, className: string) => {
+        if (person.withheld) return anonymousAvatar(className);
+        if (!person.avatar) return initialOf(person, className);
+        const img = Object.assign(make("img", className), { src: person.avatar, alt: "", loading: "lazy" as const });
+        img.addEventListener("error", () => img.replaceWith(initialOf(person, className)), { once: true });
+        return img;
+      };
 
       const renderReactions = () => {
         if (!thread) return;
@@ -318,7 +314,16 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             group.dataset.reaction = kind;
             group.append(make("p", "atmo-reactions__count", t(kind === "like" ? "reactions.likes" : "reactions.reposts", { count })));
             const faces = make("ul", "atmo-facepile");
-            for (const person of people) {
+            for (const shown of people) {
+              const person = (shown.withheld && revealedPeople.get(shown.did)) || shown;
+              if (person.withheld) {
+                // Counted, but not identified: signed out, or not yet looked up.
+                const item = make("li");
+                item.title = t("reactions.hiddenPerson");
+                item.append(anonymousAvatar("atmo-facepile__avatar"));
+                faces.append(item);
+                continue;
+              }
               const link = Object.assign(make("a"), { href: person.url, title: nameOf(person), rel: "ugc nofollow noopener", target: "_blank" });
               link.setAttribute("aria-label", nameOf(person));
               link.append(avatarOf(person, "atmo-facepile__avatar"));
@@ -339,9 +344,30 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         // Its author asks not to be shown to logged-out people: a placeholder,
         // keeping the replies under it in place. (No AT URI, so no actions.)
         if (reply.withheld) {
+          const revealed = revealedReplies.get(reply.uri);
+          if (revealed) return replyElement({ ...revealed, depth: reply.depth });
           item.classList.add("atmo-comment--withheld");
+          if (reply.uri) item.dataset.withheldUri = reply.uri;
+          // A blurred, made-up comment (never the real one) under the explanation.
           const article = make("article");
-          article.append(make("p", "atmo-comment__withheld", t("comment.withheld")));
+          const ghost = make("div", "atmo-withheld__ghost");
+          ghost.setAttribute("aria-hidden", "true");
+          const ghostHeader = make("div", "atmo-comment__header");
+          const bar = (width: string) => Object.assign(make("span", "atmo-withheld__bar"), { style: `width: ${width}` });
+          const ghostNames = make("div", "atmo-withheld__names");
+          ghostNames.append(bar("9em"), bar("13em"));
+          ghostHeader.append(anonymousAvatar("atmo-comment__avatar"), ghostNames);
+          const ghostText = make("div", "atmo-withheld__text");
+          ghostText.append(bar("100%"), bar("92%"), bar("60%"));
+          ghost.append(ghostHeader, ghostText);
+          const cover = make("button", "atmo-withheld__cover");
+          cover.type = "button";
+          cover.append(make("strong", "", t("comment.withheldTitle")), make("span", "", t(isSignedIn ? "comment.withheldSignedIn" : "comment.withheld")));
+          cover.disabled = isSignedIn;
+          cover.addEventListener("click", () => {
+            if (!isSignedIn) askToSignIn("view", reply.uri || undefined);
+          });
+          article.append(ghost, cover);
           item.append(article);
           return item;
         }
@@ -487,6 +513,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         reply: "signInFirst.reply",
         "comment-like": "signInFirst.like",
         "comment-repost": "signInFirst.repost",
+        view: "signInFirst.view",
       };
       const askToSignIn = (kind: string, uri?: string, problem?: string) =>
         openSignIn(t(SIGN_IN_HEADINGS[kind]), `#atmo-do=${kind}${uri ? `:${encodeURIComponent(uri)}` : ""}`, problem);
@@ -621,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 }> = {};
@@ -680,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 {
@@ -690,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;
@@ -895,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));
@@ -907,6 +905,53 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         else if (kind === "comment-repost" && comment) press(comment.querySelector<HTMLElement>(".atmo-comment-action[data-kind='repost']"));
       };
 
+      // Draws the comments and faces again (after revealing, or signing out).
+      const redrawThread = () => {
+        if (!thread) return;
+        renderReactions();
+        repliesList.replaceChildren(...thread.replies.map(replyElement));
+      };
+      // Signed in: the comments and faces of people who ask not to be shown to
+      // people who aren't signed in, fetched as the reader and shown.
+      const revealWithheld = async () => {
+        if (!thread) return;
+        const uris = thread.replies.filter((reply) => reply.withheld && reply.uri && !revealedReplies.has(reply.uri)).map((reply) => reply.uri);
+        const dids = [...new Set([...thread.likes, ...thread.reposts].filter((person) => person.withheld && person.did && !revealedPeople.has(person.did)).map((person) => person.did))].slice(0, 20);
+        if (!uris.length && !dids.length) return;
+        const [posts, people] = await Promise.all([
+          withheldPosts(uris),
+          Promise.all(
+            dids.map((did) =>
+              fetch(`${base}/profile?did=${encodeURIComponent(did)}`)
+                .then((response) => (response.ok ? (response.json() as Promise<Pick<Person, "did" | "handle" | "displayName" | "avatar">>) : null))
+                .catch(() => null),
+            ),
+          ),
+        ]);
+        if (!isSignedIn) return;
+        for (const found of posts) {
+          const handle = found.author.handle;
+          const profileUrl = `https://bsky.app/profile/${encodeURIComponent(handle)}`;
+          revealedReplies.set(found.uri, {
+            uri: found.uri,
+            url: `${profileUrl}/post/${found.uri.split("/").pop()}`,
+            author: { did: found.author.did, handle, displayName: found.author.displayName, avatar: `${base}/media?avatar=${encodeURIComponent(found.author.did)}`, url: profileUrl },
+            byAuthor: publicSettings.allowedAuthors.includes(found.author.did),
+            createdAt: found.record.createdAt ?? "",
+            text: segments(found.record.text ?? "", found.record.facets),
+            depth: 0,
+            likeCount: found.likeCount,
+            repostCount: found.repostCount,
+          });
+        }
+        for (const found of people) {
+          if (found?.did && found.handle && found.handle !== found.did) {
+            revealedPeople.set(found.did, { ...found, url: `https://bsky.app/profile/${encodeURIComponent(found.handle)}` });
+          }
+        }
+        redrawThread();
+      };
+
       const show = async (signed: boolean, handle?: string, displayName?: string, avatar?: string) => {
         if (handle) {
           $<HTMLElement>("[data-preview-name]").textContent = displayName || handle;
@@ -931,6 +976,11 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           permissionPanel.hidden = true;
           setPressed("like", false);
           setPressed("repost", false);
+          if (revealedReplies.size || revealedPeople.size) {
+            revealedReplies.clear();
+            revealedPeople.clear();
+            redrawThread();
+          }
           resumePending(false);
           return closeReplies();
         }
@@ -940,6 +990,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         permissionPanel.hidden = can("post");
         // Which account, as they may have more than one.
         $<HTMLElement>("[data-permission-text]").textContent = t("composer.needsPermission", { handle: handle ? `@${handle}` : "" });
+        await revealWithheld().catch(() => undefined);
         addCommentActions();
         addDeleteButtons();
         await loadState();
@@ -1000,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.
@@ -1021,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>
+)}