astro-atmosphere-comments 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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.
+- **Your own wording:** a `messages` option (and prop) changes any line, by its key in `locales/en.json`.
+- The `label` and `authorLabel` props still work, and win over `messages`.
+
 ## 0.2.0 (4 November 2026)
 
 - The sign-in form is shown straight away under each post: a handle box and a **Sign in with Atmosphere** button, both with the Atmosphere logo. The "Respond with your Atmosphere Account" button that opened it is gone.

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`:
@@ -106,6 +142,8 @@ Locally the integration uses the protocol's development mode, so no key is neede
 | `policyUri`, `tosUri` | | Your privacy policy and terms, shown on the sign-in screen. |
 | `hidden` | | Comments never to show: bsky.app post or profile addresses, AT URIs, handles or DIDs. Replies you hide in the Bluesky app, and posts with Bluesky's moderation labels (spam and so on), are left out anyway. |
 | `base` | | Where the integration's routes live. Default `/atmosphere`. |
+| `locale` | | The language of the wording, such as `"fr"` or `"pt-BR"` (see Languages). |
+| `messages` | | Your own wording for any line, by its key in [`locales/en.json`](locales/en.json). |
 
 ## The component
 
@@ -115,12 +153,30 @@ Locally the integration uses the protocol's development mode, so no key is neede
 | `label` | The sign-in form's heading. Default "Sign in to leave a comment, like or repost". |
 | `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).
 
 **Layout, top to bottom:** likes and reposts, the sign-in form and the "Reply on Bluesky instead" line (or, signed in, Like, Repost, Quote and the comment box), your `after-box` content, the comments, your default slot content.
 
+## Languages
+
+The wording comes in English, French, German, Spanish, Portuguese, Italian, Dutch and Japanese. The component uses, in order: its `locale` prop, the integration's `locale` option, Astro's own locale for the page (if you use [Astro's i18n routing](https://docs.astro.build/en/guides/internationalization/)), then English. A regional code falls back to its language (`pt-BR` uses `pt`), and any line a language lacks is shown in English. Dates follow the same language.
+
+To change any line, give its key from [`locales/en.json`](locales/en.json):
+
+```js
+atmosphereComments({
+  // …
+  locale: "fr",
+  messages: { "signIn.heading": "Connecte-toi pour rejoindre la conversation" },
+}),
+```
+
+The translations other than English started as drafts and need checking by native speakers. Translation is being set up on [Weblate](https://weblate.org), the open-source translation platform; until then, corrections and new languages are very welcome as [GitHub issues or pull requests](https://github.com/saltedlolly/astro-atmosphere-comments/issues). (Bluesky's own approval page is in the reader's language already.)
+
 ## Styling
 
 It has a plain default look and takes your text colour. Colours come from CSS custom properties, set on `.atmo`:
@@ -137,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
 
@@ -162,7 +219,6 @@ The component fires (bubbling):
 
 - Needs a Node server with a lasting disk (no serverless or edge hosts yet).
 - Rate limits are kept in memory, so they apply per server process.
-- The wording is English only.
 - Quoting individual comments isn't supported.
 
 If you only want readers to sign in with their Atmosphere account, without comments, see [AuthProto](https://www.npmjs.com/package/@fujocoded/authproto).