astro-atmosphere-comments 0.4.2 → 0.6.0

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. */
@@ -610,3 +854,24 @@ dialog.atmo:not([open]) {
 .atmo-comment-action[data-kind="like"][aria-pressed="true"] svg {
   fill: currentColor;
 }
+
+/* "One more permission" under posts, for readers who signed in only to like
+   and repost. */
+.atmo__permission {
+  display: grid;
+  gap: 8px;
+  max-width: 560px;
+  margin-top: 14px;
+}
+
+.atmo__permission p {
+  margin: 0;
+}
+
+/* In place of a comment whose author asks not to be shown to logged-out people. */
+:where(.atmo-comment__withheld) {
+  margin: 0;
+  color: var(--atmo-muted, inherit);
+  font-size: 0.9em;
+  font-style: italic;
+}

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

@@ -4,44 +4,39 @@
 // replies to the post's announcement, written to the reader's own account, so
 // they can delete them there at any time.
 //
-// Sign-in uses AT Protocol OAuth straight to the reader's own account host:
-// no third-party login service is involved. This site only ever holds a
-// grant to create posts and to create and delete likes and reposts, plus, if
-// a reader allows it when they first delete a comment, to delete posts (see
-// SCOPE and DELETE_SCOPE in lib/oauth.ts).
+// Sign-in uses AT Protocol OAuth straight to the reader's own account host,
+// as a browser client: the sign-in is kept only in the reader's browser, and
+// the site's server never sees it, so the server can't act for anyone.
+// Signing out cancels it at the reader's host. See lib/client/account.ts.
 //
 // It adds /oauth-client-metadata.json at the site's root (what account hosts
-// read to know the site), and these routes under `base` (default /atmosphere):
-//   jwks.json                        the public half of the site's signing key
-//   login (POST)                     starts sign-in with the reader's handle
-//   callback                         where the reader's host sends them back
-//   logout (POST)                    signs out and revokes the site's grant
-//   me                               who's signed in (for the comment box)
-//   comment (POST)                   posts a comment (or quote post) as the reader
-//   state                            whether the reader has liked or reposted
-//   react (POST)                     likes or reposts, or undoes that
-//   post                             the announcement, for the Quote preview
-//   media                            avatars and link-card pictures, via this site
-//   typeahead                        @mention suggestions as the reader types
-//   thread                           the comments, likes and reposts to show
-// and a component, AtmosphereComments.astro, to put under each post.
+// read to know the site), and these routes under `base` (default /atmosphere),
+// none of which act for a reader:
+//   callback       the page readers come back to after approving
+//   identity       looks up an account for signing in
+//   profile        a reader's public profile, for the comment box
+//   richtext       links, @mentions and #hashtags in a comment, before it's posted
+//   following      whether an account follows one of the site's accounts
+//   post           the announcement, for the Quote preview
+//   media          avatars and link-card pictures, via this site
+//   typeahead      account suggestions as the reader types
+//   thread         the comments, likes and reposts to show
+// and two components: AtmosphereComments.astro under each post, and
+// AtmosphereReactions.astro once in the layout.
 //
 // It needs an on-demand (server) adapter such as @astrojs/node.
 import { fileURLToPath } from "node:url";
 
 const VIRTUAL_ID = "virtual:atmosphere-comments/settings";
+// The settings that are safe for readers' browsers (lib/public-settings.ts).
+const PUBLIC_ID = "virtual:atmosphere-comments/public-settings";
 
 const ROUTES = {
-  "jwks.json": "jwks.json.ts",
-  login: "login.ts",
-  callback: "callback.ts",
-  logout: "logout.ts",
-  me: "me.ts",
-  comment: "comment.ts",
-  state: "state.ts",
-  react: "react.ts",
-  delete: "delete.ts",
-  follow: "follow.ts",
+  callback: "callback.astro",
+  identity: "identity.ts",
+  profile: "profile.ts",
+  richtext: "richtext.ts",
+  following: "following.ts",
   post: "post.ts",
   media: "media.ts",
   typeahead: "typeahead.ts",
@@ -49,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
@@ -62,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",
@@ -80,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 ?? {},
@@ -102,14 +103,34 @@ export default function atmosphereComments(options) {
           });
         }
 
-        // The routes and component read the settings from a virtual module.
+        const publicSettings = {
+          clientName: settings.clientName,
+          allowedAuthors,
+          base,
+          site: settings.site,
+          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",
-                resolveId: (id) => (id === VIRTUAL_ID ? `\0${VIRTUAL_ID}` : undefined),
-                load: (id) => (id === `\0${VIRTUAL_ID}` ? `export default ${JSON.stringify(settings)};` : undefined),
+                resolveId: (id) => (id === VIRTUAL_ID || id === PUBLIC_ID ? `\0${id}` : undefined),
+                load: (id) =>
+                  id === `\0${VIRTUAL_ID}`
+                    ? `export default ${JSON.stringify(settings)};`
+                    : id === `\0${PUBLIC_ID}`
+                      ? `export default ${JSON.stringify(publicSettings)};`
+                      : undefined,
               },
             ],
           },