astro-atmosphere-comments 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.4.0 (4 November 2026)
+
+- **`AtmosphereReactions`:** likes and reposts on your other Bluesky posts (a feed of your latest posts, say). Mark each post with `data-atmosphere-post` (and its bsky.app address and counts) and put the component once in your layout: each post gets Reply and Quote (opening it on Bluesky), and Repost and Like with counts. Readers who aren't signed in get the sign-in form in an overlay, and their like or repost is done once they're back. Only posts by `allowedAuthors` can be liked or reposted.
+- **Which account you're using:** `AtmosphereReactions` fills any element marked `data-atmosphere-account` with the signed-in reader's avatar, opening a menu with "Signed in as @handle" and Sign out.
+- **Reply and Quote in an overlay:** for signed-in readers, Reply and Quote under those posts open the comment box (with the quote preview) in an overlay; once posted it says it's on Bluesky, not on this page, with a link. Signed out (or with ⌘-click), they open the post on Bluesky.
+- **Follow:** a link marked `data-atmosphere-follow` (an account's DID) becomes a Follow / Following button for signed-in readers (a second press unfollows, as on Bluesky, without inviting it: no "Unfollow" on hover). Permission to follow is asked for only on the first follow, and only `allowedAuthors` can be followed. Asking for a new permission keeps the ones a reader already gave.
+- "Post reply" in reply boxes under comments is now translated (it was always English).
+- The Like and Repost buttons say whose account they use ("Like as @handle") when the reader is signed in.
+- The sign-in form (`SignInForm.astro`) and the comment box (`Composer.astro`, with `lib/client/composer.ts`) are now components of their own, shared by the comments and the overlays, and the comment box's styles are a shared stylesheet (`atmosphere.css`, global, every class starting `atmo`). Nothing changes for sites, unless they relied on those styles being scoped.
+- New wording keys for the overlay and the post actions, in all eight languages.
+
 ## 0.3.0 (4 November 2026)
 
 - **Languages:** the wording now comes from language files (`locales/*.json`, i18next JSON) in English, French, German, Spanish, Portuguese, Italian, Dutch and Japanese, picked from the component's `locale` prop, the integration's `locale` option or Astro's locale for the page, then English. Dates and plurals ("1 like", "2 likes") follow the language. The translations are drafts for native speakers to check; translation is being set up on Weblate.

package/README.md

@@ -20,7 +20,7 @@ See it on [saltedlolly.com](https://saltedlolly.com/2005/07/13/summer-jam-party-
 
 1. You announce each post on Bluesky (a post linking to it). That post's thread is the comment section.
 2. A reader signs in with **AT Protocol OAuth, straight to their own account host** (Bluesky's, for most people), which asks them to approve your site, named by its address (example.com). There is no third-party login service in between, and your site never sees a password.
-3. Your site asks only for what commenting needs: to create posts, to create and delete likes and reposts, and to see which posts the reader has already liked or reposted. Permission to delete posts is asked for separately, only the first time a reader deletes one of their comments on your site, and the site only ever uses it on their own comments under your posts. Readers can revoke it all at any time in their Bluesky settings.
+3. Your site asks only for what commenting needs: to create posts, to create and delete likes and reposts, and to see which posts the reader has already liked or reposted. Permission to delete posts is asked for separately, only the first time a reader deletes one of their comments on your site, and the site only ever uses it on their own comments under your posts. Permission to follow is asked for the same way, the first time a reader presses Follow, and only your own accounts can be followed through it. Readers can revoke it all at any time in their Bluesky settings.
 4. Your server keeps each reader's sign-in (a random cookie in their browser; their tokens on your server), and posts on their behalf when they press a button.
 
 Readers who'd rather not sign in can use the **Reply on Bluesky instead** link under the form.
@@ -86,6 +86,42 @@ import AtmosphereComments from "astro-atmosphere-comments/AtmosphereComments.ast
 
 `post` can be the announcement's **bsky.app address** or its **AT URI**. Leave it out and the component uses the page's **Standard.site** record instead: if your page has `<link rel="site.standard.document" href="at://…">` and that record's `bskyPostRef` points to the announcement (as Standard.site publishers do), it just works. With no announcement to respond to, the component shows nothing (apart from your slot content).
 
+### 4. Optional: likes and reposts on your other Bluesky posts
+
+If your pages show your Bluesky posts elsewhere (a "latest posts" feed on your homepage, say), readers can like and repost them there too. Put `AtmosphereReactions` once in your layout, and mark each post's element:
+
+```astro
+---
+import AtmosphereReactions from "astro-atmosphere-comments/AtmosphereReactions.astro";
+---
+
+<article
+  data-atmosphere-post="at://did:plc:…/app.bsky.feed.post/…"
+  data-atmosphere-url="https://bsky.app/profile/you.bsky.social/post/…"
+  data-atmosphere-likes="3"
+  data-atmosphere-reposts="1"
+>
+  …the post…
+</article>
+
+<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.
+
+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). The first follow asks the reader's account host for one more permission. Only your `allowedAuthors` can be followed through your site, and the account's owner (who can't follow themselves) keeps the plain link.
+
+```astro
+<a href="https://bsky.app/profile/you.bsky.social"
+   data-atmosphere-follow="did:plc:…" data-atmosphere-follow-handle="you.bsky.social">Follow me on Bluesky</a>
+```
+
+So readers can see which account they're using, `AtmosphereReactions` also fills any element marked `data-atmosphere-account` (in your header, say) with the signed-in reader's avatar. Clicking it opens a small menu: "Signed in as @handle" and Sign out. When nobody's signed in it stays empty, so give it `hidden`:
+
+```astro
+<span data-atmosphere-account hidden></span>
+```
+
 ### Trying it on your own computer
 
 Run the dev server on `127.0.0.1` and open the site there, not at `localhost`:
@@ -118,6 +154,7 @@ Locally the integration uses the protocol's development mode, so no key is neede
 | `authorLabel` | The badge on your own comments. Default "Author". |
 | `blueskyLink` | "Rather not sign in here? Reply on Bluesky instead →" under the sign-in form, 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. |
 
 **Slots:** `after-box` goes between the comment box and the comments (a note about other ways to respond, say); the default slot goes after the comments (other responses, older comments).
@@ -156,11 +193,12 @@ It has a plain default look and takes your text colour. Colours come from CSS cu
   --atmo-menu-bg: #fff;       /* account and @mention suggestions */
   --atmo-ring: #fff;          /* the outline round faces */
   --atmo-danger: #c0392b;     /* Delete, when confirming */
+  --atmo-dialog-bg: #fff;     /* the sign-in overlay (defaults to --atmo-menu-bg) */
   --atmo-radius: 10px;
 }
 ```
 
-The likes and comments are drawn with classes you can style directly (`.atmo-reactions`, `.atmo-facepile`, `.atmo-comments`, `.atmo-comment`, `.atmo-comment--nested`, `.atmo-comment--author`, `.atmo-comment__header`, `__avatar`, `__author`, `__badge`, `__date`, `__body`, and `.atmo-comment-actions` for Reply, Like and Repost). Their defaults carry no CSS weight, so your rules always win.
+The likes and comments are drawn with classes you can style directly (`.atmo-reactions`, `.atmo-facepile`, `.atmo-comments`, `.atmo-comment`, `.atmo-comment--nested`, `.atmo-comment--author`, `.atmo-comment__header`, `__avatar`, `__author`, `__badge`, `__date`, `__body`, and `.atmo-comment-actions` for Reply, Like and Repost, and `.atmo-post-actions` / `.atmo-post-action` for the row `AtmosphereReactions` adds). Their defaults carry no CSS weight, so your rules always win.
 
 ## Events