diff --git a/packages/cli/test.html b/packages/cli/test.html --- a/packages/cli/test.html +++ b/packages/cli/test.html @@ -35,9 +35,19 @@

This is a test page for the sequoia-comments web component.

The component will look for a <link rel="site.standard.document"> tag in the document head to find the AT Protocol document, then fetch and display Bluesky replies as comments.

+

Subscribe Buttons

+
+ + + + + +
+

Comments

+ diff --git a/packages/cli/src/components/sequoia-subscribe.js b/packages/cli/src/components/sequoia-subscribe.js --- a/packages/cli/src/components/sequoia-subscribe.js +++ b/packages/cli/src/components/sequoia-subscribe.js @@ -1,5 +1,5 @@ /** - * Sequoia Subscribe - A Bluesky-powered subscribe component + * Sequoia Subscribe - An AT Protocol-powered subscribe component * * A self-contained Web Component that lets users subscribe to a publication * via the AT Protocol by creating a site.standard.graph.subscription record. @@ -13,7 +13,9 @@ * Attributes: * - publication-uri: Override the publication AT URI (optional) * - callback-uri: Redirect URI after OAuth authentication (default: "https://sequoia.pub/subscribe") - * - label: Button label text (default: "Subscribe on Bluesky") + * - button-type: Branding style — "sequoia" (default), "bluesky", "blacksky", "atmosphere", or "plain" + * - label: Override the subscribe button label text + * - unsubscribe-label: Override the unsubscribe button label text * - hide: Set to "auto" to hide if no publication URI is detected * * CSS Custom Properties: @@ -23,6 +25,7 @@ * - --sequoia-accent-color: Accent/button color (default: #2563eb) * - --sequoia-secondary-color: Secondary text color (default: #6b7280) * - --sequoia-border-radius: Border radius (default: 8px) + * - --sequoia-icon-display: Icon display mode (default: inline-block) — set to "none" to hide * * Events: * - sequoia-subscribed: Fired when the subscription is created successfully. @@ -74,6 +77,7 @@ } .sequoia-subscribe-button svg { + display: var(--sequoia-icon-display, inline-block); width: 1rem; height: 1rem; flex-shrink: 0; @@ -109,6 +113,24 @@ const BLUESKY_ICON = ``; + +const BLACKSKY_ICON = ``; + +const SEQUOIA_ICON = ``; + +const ATMOSPHERE_ICON = ``; + +// ============================================================================ +// Button Type Configuration +// ============================================================================ + +const BUTTON_TYPES = { + sequoia: { icon: SEQUOIA_ICON, subscribe: "Subscribe on Sequoia", unsubscribe: "Unsubscribe" }, + bluesky: { icon: BLUESKY_ICON, subscribe: "Subscribe on Bluesky", unsubscribe: "Unsubscribe" }, + blacksky: { icon: BLACKSKY_ICON, subscribe: "Subscribe on Blacksky", unsubscribe: "Unsubscribe" }, + atmosphere: { icon: ATMOSPHERE_ICON, subscribe: "Subscribe on Atmosphere", unsubscribe: "Unsubscribe" }, + plain: { icon: "", subscribe: "Subscribe", unsubscribe: "Unsubscribe" }, +}; // ============================================================================ // DID Storage @@ -270,7 +292,7 @@ } static get observedAttributes() { - return ["publication-uri", "callback-uri", "label", "hide"]; + return ["publication-uri", "callback-uri", "label", "unsubscribe-label", "button-type", "hide"]; } connectedCallback() { @@ -298,7 +320,16 @@ } get label() { - return this.getAttribute("label") ?? "Subscribe on Bluesky"; + return this.getAttribute("label") ?? null; + } + + get unsubscribeLabel() { + return this.getAttribute("unsubscribe-label") ?? null; + } + + get buttonType() { + const val = this.getAttribute("button-type"); + return val && val in BUTTON_TYPES ? val : "sequoia"; } get hide() { @@ -441,12 +472,15 @@ } const isLoading = type === "loading"; + const config = BUTTON_TYPES[this.buttonType] ?? BUTTON_TYPES.sequoia; const icon = isLoading ? `` - : BLUESKY_ICON; + : config.icon; - const label = this.subscribed ? "Unsubscribe on Bluesky" : this.label; + const label = this.subscribed + ? (this.unsubscribeLabel ?? config.unsubscribe) + : (this.label ?? config.subscribe); const errorHtml = type === "error"