astro-atmosphere-comments 0.5.0 → 0.6.0

package/components/AtmosphereReactions.astro

@@ -18,6 +18,14 @@
 // second press unfollows. Only
 // `allowedAuthors` can be followed through your site.
 //
+// With the integration's `standardSite` option, a button marked
+// `data-atmosphere-subscribe` (and `hidden`, as it needs JavaScript) becomes
+// Subscribe / ✓ Subscribed for the site's publication. Anyone not signed in is
+// offered the sign-in form first, and subscribed once they're back. Its label
+// goes in an element inside it marked `data-atmosphere-subscribe-label`;
+// without one it keeps its own content (style it by `aria-pressed`).
+// (AtmosphereComments has its own panel for this under each post.)
+//
 // Signed-in readers like and repost from your page. Anyone else who presses
 // Like or Repost is offered the sign-in form in an overlay, and the like or
 // repost is done once they're back. Only posts by the integration's
@@ -25,7 +33,8 @@
 //
 // Props: locale, messages (as for AtmosphereComments).
 import settings from "../lib/settings";
-import { messagesFor, pickLocale, translate } from "../lib/i18n";
+import { messagesFor, pickLocale, translate, translateHtml } from "../lib/i18n";
+import { escapeHtml } from "../lib/translate";
 import SignInForm from "./SignInForm.astro";
 import Composer from "./Composer.astro";
 import "./atmosphere.css";
@@ -47,6 +56,14 @@ const { base } = settings;
   <dialog class="atmo atmo-signin" aria-label={t("dialog.heading")} data-signin-dialog>
     <button type="button" class="atmo-signin__close" aria-label={t("dialog.close")} data-close>×</button>
     <SignInForm id="atmo-dialog" returnTo={Astro.url.pathname} messages={messages} lang={lang} heading={t("dialog.heading")} />
+    <p
+      class="atmo__elsewhere"
+      data-dialog-elsewhere
+      hidden
+      set:html={translateHtml(messages, lang, "elsewhere.text", {
+        link: `<a target="_blank" rel="noopener" class="atmo__elsewhere-link">${escapeHtml(t("elsewhere.link"))}</a>`,
+      })}
+    />
     <p class="atmo-signin__status" role="status" data-dialog-status></p>
   </dialog>
   {/* Before asking the reader's account host for one more permission: what it's for. */}
@@ -77,6 +94,7 @@ const { base } = settings;
   import { enhanceHandleBox } from "../lib/client/handle-suggestions";
   import { MAX, quotePreview, setUpComposer, type Posted } from "../lib/client/composer";
   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";
 
   const HEART = '<path d="M12 20.5s-7.5-4.4-7.5-10.1A4.4 4.4 0 0 1 12 7.6a4.4 4.4 0 0 1 7.5 2.8c0 5.7-7.5 10.1-7.5 10.1Z" />';
@@ -232,14 +250,28 @@ const { base } = settings;
         return element;
       };
 
-      // Not signed in: the sign-in form, coming back to finish this like or repost.
-      const askToSignIn = (kind: Kind, uri: string, problem = "") => {
-        form.querySelector<HTMLInputElement>("[data-return-to]")!.value =
-          `${location.pathname}${location.search}#atmo-react=${kind}:${encodeURIComponent(uri)}`;
+      // The sign-in overlay: says what it's for, and comes back to `hash`,
+      // where what the reader pressed is finished.
+      const dialogHeading = form.querySelector("label")!;
+      const dialogElsewhere = dialog.querySelector<HTMLElement>("[data-dialog-elsewhere]")!;
+      const openSignIn = (heading: string, hash: string, problem = "", blueskyUrl = "") => {
+        dialogHeading.textContent = heading;
+        dialog.setAttribute("aria-label", heading);
+        form.querySelector<HTMLInputElement>("[data-return-to]")!.value = `${location.pathname}${location.search}${hash}`;
         status.textContent = problem;
+        dialogElsewhere.hidden = !blueskyUrl;
+        if (blueskyUrl) dialogElsewhere.querySelector("a")!.href = blueskyUrl;
         if (!dialog.open) dialog.showModal();
         form.querySelector<HTMLInputElement>('input[name="handle"]')!.focus();
       };
+      const blueskyUrlOf = (uri: string) => posts().find((post) => post.dataset.atmospherePost === uri)?.dataset.atmosphereUrl ?? "";
+      const SIGN_IN_HEADINGS = { like: "signInFirst.likePost", repost: "signInFirst.repostPost", reply: "signInFirst.reply", quote: "signInFirst.quotePost" };
+      // Not signed in: the overlay, coming back to finish this like or repost.
+      const askToSignIn = (kind: Kind, uri: string, problem = "") =>
+        openSignIn(t(SIGN_IN_HEADINGS[kind]), `#atmo-react=${kind}:${encodeURIComponent(uri)}`, problem, blueskyUrlOf(uri));
+      // The same for Reply and Quote, coming back to the comment box.
+      const askToSignInToCompose = (mode: "reply" | "quote", uri: string, problem = "") =>
+        openSignIn(t(SIGN_IN_HEADINGS[mode]), `#atmo-compose=${mode}:${encodeURIComponent(uri)}`, problem, blueskyUrlOf(uri));
 
 
       const icon = (paths: string) => `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
@@ -308,7 +340,8 @@ const { base } = settings;
       };
 
       // Reply and Quote: the comment box in an overlay for signed-in readers,
-      // otherwise the post on Bluesky (as also with ⌘-click or a middle click).
+      // otherwise the sign-in overlay. ⌘-click or a middle click opens the post
+      // on Bluesky.
       // Icons only, as on Bluesky, with their names for screen readers and as
       // tooltips.
       const bskyLink = (post: HTMLElement, paths: string) => {
@@ -321,8 +354,9 @@ const { base } = settings;
         labelLink(link);
         link.innerHTML = icon(paths);
         link.addEventListener("click", (event) => {
-          if (!signedIn || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
           event.preventDefault();
+          if (!signedIn) return askToSignInToCompose(mode, post.dataset.atmospherePost!);
           // A sign-in without posting (from an older version): asked for first.
           if (!can("post")) return void askPermission("post", `#atmo-compose=${mode}:${encodeURIComponent(post.dataset.atmospherePost!)}`);
           openCompose(post, mode);
@@ -439,6 +473,14 @@ const { base } = settings;
         }
       };
 
+      // Subscribe buttons the site places (the comments look after their own).
+      const askToSubscribe = (problem = "") => openSignIn(t("subscribe.signIn"), "#atmo-subscribe", problem);
+      addSubscribeButtons(
+        [...document.querySelectorAll<HTMLButtonElement>("[data-atmosphere-subscribe]")].filter((button) => !button.closest("atmosphere-comments")),
+        t,
+        askToSubscribe,
+      );
+
       // Back from approving following: follow as they asked.
       const finishPendingFollow = async () => {
         const pending = location.hash.match(/^#atmo-follow=(.+)$/);
@@ -477,16 +519,28 @@ const { base } = settings;
         if (button && button.getAttribute("aria-pressed") !== "true") await react(post, button, kind as Kind, true);
       };
 
-      // Back from allowing posting: open the Reply or Quote box they pressed.
-      const finishPendingCompose = () => {
+      // Back from signing in or allowing posting: open the Reply or Quote box they pressed.
+      const finishPendingCompose = async () => {
         const pending = location.hash.match(/^#atmo-compose=(reply|quote):(.+)$/);
         if (!pending) return;
         const url = new URL(location.href);
+        const problem = url.searchParams.get("atmosphere") ?? "";
         if (!document.querySelector("atmosphere-comments")) url.searchParams.delete("atmosphere");
-        history.replaceState(history.state, "", `${url.pathname}${url.search}`);
         const uri = decodeURIComponent(pending[2]);
+        const mode = pending[1] as "reply" | "quote";
+        // The page may still be loading its posts (a server island, say).
+        for (let tries = 0; tries < 40 && !posts().some((post) => post.dataset.atmospherePost === uri); tries++) {
+          await new Promise((resolve) => setTimeout(resolve, 250));
+        }
+        history.replaceState(history.state, "", `${url.pathname}${url.search}`);
         const post = posts().find((candidate) => candidate.dataset.atmospherePost === uri);
-        if (post && signedIn && can("post")) openCompose(post, pending[1] as "reply" | "quote");
+        if (!post) return;
+        post.scrollIntoView({ block: "center" });
+        if (!signedIn) {
+          if (SIGN_IN_PROBLEMS[problem]) askToSignInToCompose(mode, uri, t(SIGN_IN_PROBLEMS[problem]));
+        } else if (can("post")) {
+          openCompose(post, mode);
+        }
       };
 
       // The reader's avatar wherever the page marks data-atmosphere-account,
@@ -566,11 +620,13 @@ const { base } = settings;
           addActions();
           await loadState();
           await finishPending();
-          finishPendingCompose();
+          await finishPendingCompose();
           if (signedIn) {
             await setUpFollow();
             await finishPendingFollow();
+            await loadSubscribed();
           }
+          await finishPendingSubscribe(t, askToSubscribe);
         });
 
       // Posts that arrive later (a server island, say) get buttons too.
@@ -587,18 +643,6 @@ const { base } = settings;
 </script>
 
 <style>
-  .atmo-signin {
-    /* Centred on the screen, whatever margin a site gives .atmo. */
-    margin: auto;
-    width: min(92vw, 520px);
-    padding: 22px 22px 18px;
-    border: 1px solid var(--atmo-border, #8886);
-    border-radius: calc(var(--atmo-radius, 10px) + 6px);
-    background: var(--atmo-dialog-bg, var(--atmo-menu-bg, Canvas));
-    color: var(--atmo-text, CanvasText);
-    box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
-  }
-
   .atmo-permission p {
     margin: 0 0 10px;
   }
@@ -609,28 +653,6 @@ const { base } = settings;
     font-weight: 700;
   }
 
-  .atmo-signin::backdrop {
-    background: rgb(0 0 0 / 0.55);
-  }
-
-  .atmo-signin :global(.atmo__login) {
-    margin-top: 0;
-  }
-
-  .atmo-signin__close {
-    position: absolute;
-    top: 8px;
-    right: 10px;
-    padding: 4px 8px;
-    border: 0;
-    background: none;
-    color: var(--atmo-muted, inherit);
-    font: inherit;
-    font-size: 1.4em;
-    line-height: 1;
-    cursor: pointer;
-  }
-
   .atmo-compose {
     width: min(92vw, 600px);
   }
@@ -643,16 +665,6 @@ const { base } = settings;
     margin: 0 0 12px;
   }
 
-  .atmo-signin__status {
-    margin: 10px 0 0;
-    color: var(--atmo-muted, inherit);
-    font-size: 0.9em;
-  }
-
-  .atmo-signin__status:empty {
-    display: none;
-  }
-
   /* The row under each post. Defaults carry no weight, so a site's own
      rules always win. */
   :global(:where(.atmo-post-actions)) {

package/components/Composer.astro

@@ -56,7 +56,7 @@ const th = (key: string, html: Record<string, string>) => translateHtml(messages
         <div class="atmo__quoted">
           <p class="atmo__preview-author">
             <span class="atmo__avatar atmo__avatar--small" data-quoted-avatar aria-hidden="true"></span>
-            <strong data-quoted-name></strong> <span data-quoted-handle></span>
+            <strong data-quoted-name></strong> <span data-quoted-handle></span> <span data-quoted-age></span>
           </p>
           <p class="atmo__preview-text" data-quoted-text></p>
           <div class="atmo__card" data-card hidden>
@@ -64,7 +64,10 @@ const th = (key: string, html: Record<string, string>) => translateHtml(messages
             <div>
               <strong data-card-title></strong>
               <span data-card-description></span>
-              <span class="atmo__card-domain" data-card-domain></span>
+              <span class="atmo__card-domain">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9s1.3-6.5 3.8-9Z" /></svg>
+                <span data-card-domain></span>
+              </span>
             </div>
           </div>
         </div>

package/components/SignInForm.astro

@@ -44,6 +44,7 @@ const link = (href: string, text: string) =>
     set:html={th("signIn.anyAccount", {
       atmosphereAccount: link("https://atmosphereaccount.com", t("signIn.atmosphereAccount")),
       bluesky: link("https://bsky.app", "Bluesky"),
+      createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")),
     })}
   />
   <div class="atmo__row">
@@ -76,17 +77,19 @@ const link = (href: string, text: string) =>
     {permissions.map((permission) => <input type="hidden" name="permission" value={permission} />)}
     <button type="submit" class="atmo__button atmo__button--sign-in">
       <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
+      <span class="atmo__spinner" aria-hidden="true"></span>
       {t("signIn.button")}
     </button>
   </div>
-  <p
-    class="atmo__hint"
-    set:html={th("signIn.privacy", { createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")) })}
-  />
-  <p class="atmo__hint">
-    {t("signIn.access")}
-    {policyUri && <Fragment> <a href={policyUri} target="_blank" rel="noopener">{t("signIn.policy")}</a></Fragment>}
-  </p>
+  {/* The detail, for anyone who wants it. */}
+  <details class="atmo__details">
+    <summary>{t("signIn.more")}</summary>
+    <p class="atmo__hint">{t("signIn.privacy")}</p>
+    <p class="atmo__hint">
+      {t("signIn.access")}
+      {policyUri && <Fragment> <a href={policyUri} target="_blank" rel="noopener">{t("signIn.policy")}</a></Fragment>}
+    </p>
+  </details>
 </form>
 
 <style>
@@ -105,6 +108,17 @@ const link = (href: string, text: string) =>
     font-weight: 700;
   }
 
+  .atmo__details summary {
+    width: fit-content;
+    color: var(--atmo-muted, inherit);
+    font-size: 0.85em;
+    cursor: pointer;
+  }
+
+  .atmo__details .atmo__hint {
+    margin-top: 6px;
+  }
+
   .atmo__hint {
     margin: 0;
     color: var(--atmo-muted, inherit);
@@ -165,6 +179,39 @@ const link = (href: string, text: string) =>
     cursor: pointer;
   }
 
+  /* While signing in, a spinner takes the logo's place, so the button keeps its size. */
+  .atmo__spinner {
+    display: none;
+    flex: none;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: atmo-spin 700ms linear infinite;
+  }
+
+  [data-signing-in] .atmo__spinner {
+    display: inline-block;
+  }
+
+  [data-signing-in] .atmo__button .atmo__logo {
+    display: none;
+  }
+
+  @keyframes atmo-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .atmo__spinner {
+      animation-duration: 2.5s;
+    }
+  }
+
   .atmo__button .atmo__logo {
     flex: none;
     width: 20px;

package/components/atmosphere.css

@@ -118,6 +118,222 @@ dialog.atmo:not([open]) {
   gap: 8px;
 }
 
+/* The sign-in overlay, shared by both components. */
+dialog.atmo.atmo-signin {
+  /* Centred on the screen, whatever margin a site gives .atmo. */
+  margin: auto;
+  width: min(92vw, 520px);
+  padding: 22px 22px 18px;
+  border: 1px solid var(--atmo-border, #8886);
+  border-radius: calc(var(--atmo-radius, 10px) + 6px);
+  background: var(--atmo-dialog-bg, var(--atmo-menu-bg, Canvas));
+  color: var(--atmo-text, CanvasText);
+  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
+}
+
+/* The sign-in form is short, and its account suggestions can reach past the
+   overlay's edge. (The comment box's overlay can be tall, so it keeps scrolling.) */
+dialog.atmo.atmo-signin:has(> .atmo__login) {
+  overflow: visible;
+}
+
+/* As wide as the form, so names and handles fit on one line. */
+.atmo-signin .atmo__suggestions {
+  min-width: min(474px, calc(92vw - 46px));
+}
+
+.atmo-signin::backdrop {
+  background: rgb(0 0 0 / 0.55);
+}
+
+.atmo-signin .atmo__login {
+  margin-top: 0;
+}
+
+.atmo-signin__close {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  padding: 4px 8px;
+  border: 0;
+  background: none;
+  color: var(--atmo-muted, inherit);
+  font: inherit;
+  font-size: 1.4em;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.atmo-signin__status {
+  margin: 10px 0 0;
+  color: var(--atmo-muted, inherit);
+  font-size: 0.9em;
+}
+
+.atmo-signin__status:empty {
+  display: none;
+}
+
+/* Signed out: looks like the comment box, and opens the sign-in overlay. */
+.atmo__prompt-box {
+  display: grid;
+  gap: 8px;
+  max-width: 560px;
+  margin-top: 14px;
+}
+
+.atmo__prompt-box[hidden] {
+  display: none;
+}
+
+.atmo__prompt-box .atmo__button:disabled {
+  cursor: not-allowed;
+}
+
+.atmo__prompt {
+  /* A button centres its text; a text box starts at the top left. */
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-height: 84px;
+  padding: 12px 14px;
+  border: 1px solid var(--atmo-border, #8886);
+  border-radius: var(--atmo-radius, 10px);
+  background: var(--atmo-field-bg, transparent);
+  color: var(--atmo-muted, inherit);
+  font: inherit;
+  text-align: left;
+  vertical-align: top;
+  cursor: text;
+}
+
+.atmo__prompt:hover,
+.atmo__prompt:focus-visible {
+  border-color: var(--atmo-accent, #1185fe);
+}
+
+/* Subscribe and its menu: a split button, with Like and Repost once signed
+   in, or on its own above the sign-in form. */
+.atmo-subscribe {
+  position: relative;
+  display: inline-flex;
+}
+
+.atmo-subscribe[hidden] {
+  display: none;
+}
+
+.atmo-subscribe .atmo-subscribe__button {
+  border-radius: 999px 0 0 999px;
+}
+
+.atmo-subscribe__button[hidden] {
+  display: none;
+}
+
+.atmo-subscribe__button:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+.atmo-subscribe__logo {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  background-color: currentColor;
+  mask: var(--atmo-logo) center / contain no-repeat;
+}
+
+.atmo-subscribe .atmo-subscribe__more {
+  padding: 0 10px 0 8px;
+  border-left: 0;
+  border-radius: 0 999px 999px 0;
+}
+
+/* Subscribed: both halves look like one button. */
+.atmo-subscribe:has([aria-pressed="true"]) .atmo-subscribe__more {
+  border-color: color-mix(in srgb, var(--atmo-accent, #1185fe) 40%, transparent);
+  background: color-mix(in srgb, var(--atmo-accent, #1185fe) 8%, transparent);
+  color: var(--atmo-accent, #1185fe);
+}
+
+.atmo-subscribe .atmo-subscribe__more svg {
+  width: 15px;
+  height: 15px;
+}
+
+.atmo-subscribe__menu {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 6px);
+  left: 0;
+  display: grid;
+  width: min(260px, 80vw);
+  padding: 6px;
+  border: 1px solid var(--atmo-border, #8886);
+  border-radius: var(--atmo-radius, 10px);
+  background: var(--atmo-menu-bg, Canvas);
+  box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);
+}
+
+.atmo-subscribe__menu[hidden] {
+  display: none;
+}
+
+.atmo-subscribe__note {
+  margin: 0 0 6px;
+  padding: 6px 10px 10px;
+  border-bottom: 1px solid var(--atmo-border, #8886);
+  color: var(--atmo-muted, inherit);
+  font-size: 0.85em;
+}
+
+.atmo-subscribe__menu > a[hidden] {
+  display: none;
+}
+
+.atmo-subscribe__menu svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.atmo-subscribe__menu svg circle,
+.atmo-subscribe__menu svg.atmo-subscribe__filled {
+  fill: currentColor;
+  stroke: none;
+}
+
+.atmo-subscribe__menu > a,
+.atmo-subscribe__menu > button {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: calc(var(--atmo-radius, 10px) - 4px);
+  background: none;
+  color: var(--atmo-text, inherit);
+  font: inherit;
+  font-size: 0.9em;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.atmo-subscribe__menu > a:hover,
+.atmo-subscribe__menu > a:focus-visible,
+.atmo-subscribe__menu > button:hover,
+.atmo-subscribe__menu > button:focus-visible {
+  background: var(--atmo-field-bg, #8882);
+  color: var(--atmo-accent, #1185fe);
+}
+
 .atmo__action {
   display: inline-flex;
   align-items: center;
@@ -149,7 +365,9 @@ dialog.atmo:not([open]) {
 }
 
 .atmo__action[aria-pressed="true"] {
-  border-color: var(--atmo-accent, #1185fe);
+  /* Softer than the text, like the outlines of the buttons beside it. */
+  border-color: color-mix(in srgb, var(--atmo-accent, #1185fe) 40%, transparent);
+  background: color-mix(in srgb, var(--atmo-accent, #1185fe) 8%, transparent);
   color: var(--atmo-accent, #1185fe);
 }
 
@@ -358,6 +576,10 @@ dialog.atmo:not([open]) {
   overflow-wrap: anywhere;
 }
 
+.atmo__preview-text:empty {
+  display: none;
+}
+
 .atmo__preview-text.is-placeholder {
   color: var(--atmo-muted, inherit);
   font-style: italic;
@@ -386,6 +608,13 @@ dialog.atmo:not([open]) {
   padding: 10px 12px;
 }
 
+.atmo__card [data-card-title] {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .atmo__card [data-card-description] {
   display: -webkit-box;
   overflow: hidden;
@@ -393,10 +622,25 @@ dialog.atmo:not([open]) {
   -webkit-line-clamp: 2;
 }
 
-.atmo__card-domain {
+.atmo__card .atmo__card-domain {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--atmo-border, #8886);
   font-size: 0.85em;
 }
 
+.atmo__card-domain svg {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+}
+
 /* The likes and reposts, and the comments. These are drawn by the script,
    and wrapped in :where() so they carry no weight: any rule a site writes
    for these classes wins. */

package/index.d.ts

@@ -16,6 +16,17 @@ export type AtmosphereCommentsOptions = {
   /** Your privacy policy and terms, if you have them (absolute addresses). */
   policyUri?: string;
   tosUri?: string;
+  /**
+   * Your Standard.site publication, if you publish one. Turns on the Subscribe
+   * button, and makes Like under a post also recommend its Standard.site
+   * record. Readers are asked for this in the same approval as everything else.
+   */
+  standardSite?: {
+    /** The publication record's AT URI: at://did:…/site.standard.publication/… */
+    publication: string;
+    /** Your feed's address, for the menu beside Subscribe, e.g. "/feed/". */
+    feed?: string;
+  };
   /**
    * Comments never to show: bsky.app post or profile addresses, AT URIs,
    * handles or DIDs (on top of replies hidden on Bluesky and moderation labels).

package/index.mjs

@@ -44,6 +44,7 @@ const ROUTES = {
 };
 
 const DID = /^did:[a-z0-9]+:[a-zA-Z0-9._:%-]+$/;
+const PUBLICATION = /^at:\/\/did:[a-z0-9]+:[a-zA-Z0-9._:%-]+\/site\.standard\.publication\/[a-zA-Z0-9._~-]+$/;
 
 /**
  * @param {import("./index").AtmosphereCommentsOptions} options
@@ -57,6 +58,10 @@ export default function atmosphereComments(options) {
       "atmosphere-comments: `allowedAuthors` must list the DIDs (did:plc:… or did:web:…) of the accounts that post your announcements.",
     );
   }
+  const standardSite = options.standardSite;
+  if (standardSite && !PUBLICATION.test(standardSite.publication ?? "")) {
+    throw new Error("atmosphere-comments: `standardSite.publication` must be your publication's AT URI (at://did:…/site.standard.publication/…).");
+  }
   const base = `/${(options.base ?? "/atmosphere").replace(/^\/+|\/+$/g, "")}`;
   return {
     name: "atmosphere-comments",
@@ -75,6 +80,7 @@ export default function atmosphereComments(options) {
           logoUri: options.logoUri,
           policyUri: options.policyUri,
           tosUri: options.tosUri,
+          standardSite,
           hidden: options.hidden ?? [],
           locale: options.locale,
           messages: options.messages ?? {},
@@ -105,11 +111,16 @@ export default function atmosphereComments(options) {
           logoUri: settings.logoUri,
           policyUri: settings.policyUri,
           tosUri: settings.tosUri,
+          standardSite,
         };
 
         // The routes and components read the settings from virtual modules.
         updateConfig({
           vite: {
+            // Readers' browsers load the sign-in library only when needed, so
+            // Vite's dev server wouldn't find it to bundle it in advance, and
+            // the old-style modules it depends on then fail in the browser.
+            optimizeDeps: { include: ["astro-atmosphere-comments > @atproto/oauth-client-browser"] },
             plugins: [
               {
                 name: "atmosphere-comments-settings",