astro-atmosphere-comments 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.4.2 (4 November 2026)
+
+- Links open in a new tab: those in the sign-in form, "Reply on Bluesky instead", the credit, and the thread's names, dates, faces and links in comments, so readers don't lose their place (and a half-written comment).
+
+## 0.4.1 (4 November 2026)
+
+- Fixed: the sign-in and reply overlays of `AtmosphereReactions` showed at the bottom of the page instead of staying hidden until opened (the shared stylesheet made every `.atmo` element a block, dialogs included).
+
 ## 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.

package/components/AtmosphereComments.astro

@@ -71,8 +71,9 @@ const messages = messagesFor(lang, {
 });
 const t = (key: string, vars?: Record<string, string | number>) => translate(messages, lang, key, vars);
 const th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
+// Links lead off the page, so they open in a new tab.
 const link = (href: string | undefined, text: string, attributes = "") =>
-  `<a${href ? ` href="${escapeHtml(href)}"` : ""}${attributes}>${escapeHtml(text)}</a>`;
+  `<a${href ? ` href="${escapeHtml(href)}"` : ""} target="_blank" rel="noopener"${attributes}>${escapeHtml(text)}</a>`;
 // The announcement on bsky.app, when the page is given it (otherwise the
 // script fills it in once the thread has loaded).
 const atUri = post.match(/^at:\/\/([^/]+)\/app\.bsky\.feed\.post\/([^/]+)$/);
@@ -254,7 +255,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             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) {
-              const link = Object.assign(make("a"), { href: person.url, title: nameOf(person), rel: "ugc nofollow noopener" });
+              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"));
               const item = make("li");
@@ -278,11 +279,12 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         const author = Object.assign(make("a", "atmo-comment__author", nameOf(reply.author)), {
           href: reply.author.url,
           rel: "ugc nofollow noopener",
+          target: "_blank",
         });
         const who = make("div", "atmo-comment__who");
         who.append(author);
         if (reply.byAuthor) who.append(make("span", "atmo-comment__badge", authorLabel));
-        const date = Object.assign(make("a", "atmo-comment__date"), { href: reply.url, rel: "ugc nofollow noopener" });
+        const date = Object.assign(make("a", "atmo-comment__date"), { href: reply.url, rel: "ugc nofollow noopener", target: "_blank" });
         const time = Object.assign(make("time"), { dateTime: reply.createdAt, textContent: reply.createdAt ? dates.format(new Date(reply.createdAt)) : "" });
         date.append(time, make("span", "", ` · ${t("comment.viewOnBluesky")}`));
         const names = make("div");
@@ -293,7 +295,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         const paragraph = make("p");
         for (const piece of reply.text) {
           paragraph.append(
-            piece.href ? Object.assign(make("a", "", piece.text), { href: piece.href, rel: "ugc nofollow noopener" }) : piece.text,
+            piece.href ? Object.assign(make("a", "", piece.text), { href: piece.href, rel: "ugc nofollow noopener", target: "_blank" }) : piece.text,
           );
         }
         body.append(paragraph);
@@ -401,7 +403,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const postedMessage = (where: HTMLElement, data: Posted) =>
         where.replaceChildren(
           `${t(data.quote ? "posted.quote" : "posted.comment")} `,
-          Object.assign(document.createElement("a"), { href: data.url, textContent: t("posted.see") }),
+          Object.assign(document.createElement("a"), { href: data.url, textContent: t("posted.see"), target: "_blank", rel: "noopener noreferrer" }),
         );
 
       // The comment box (lib/client/composer.ts): posts as a reply to the

package/components/SignInForm.astro

@@ -26,7 +26,9 @@ const { id, returnTo, messages, lang, heading } = Astro.props;
 const { base } = settings;
 const t = (key: string) => translate(messages, lang, key);
 const th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
-const link = (href: string, text: string) => `<a href="${escapeHtml(href)}">${escapeHtml(text)}</a>`;
+// Links lead off the page, so they open in a new tab.
+const link = (href: string, text: string) =>
+  `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(text)}</a>`;
 ---
 
 <form class="atmo__login" id={`${id}-login`} method="post" action={`${base}/login`} data-login-form>

package/components/atmosphere.css

@@ -6,10 +6,19 @@
    form has its own styles, in SignInForm.astro. */
 
 .atmo {
-  display: block;
   color: var(--atmo-text, currentColor);
 }
 
+/* The components are blocks; their overlays (dialogs, also .atmo) stay hidden
+   until opened. */
+.atmo:not(dialog) {
+  display: block;
+}
+
+dialog.atmo:not([open]) {
+  display: none;
+}
+
 /* Only the component's own parts wait for sign-in to be checked; the
    site's slot content shows straight away. */
 .atmo.is-loading > :is([data-view], [data-reactions], [data-replies]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-atmosphere-comments",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Atmosphere Comments for Astro: Bluesky comments, likes, reposts and quote posts for Astro sites; readers sign in with their Atmosphere (AT Protocol) account and respond without leaving the page.",
   "type": "module",
   "license": "MIT",