diff --git a/packages/cli/src/components/sequoia-subscribe.js b/packages/cli/src/components/sequoia-subscribe.js
index d8615eb..02e7928 100644
--- 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 @@ const styles = `
}
.sequoia-subscribe-button svg {
+ display: var(--sequoia-icon-display, inline-block);
width: 1rem;
height: 1rem;
flex-shrink: 0;
@@ -110,6 +114,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 @@ class SequoiaSubscribe extends BaseElement {
}
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 @@ class SequoiaSubscribe extends BaseElement {
}
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 @@ class SequoiaSubscribe extends BaseElement {
}
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"
diff --git a/packages/cli/test.html b/packages/cli/test.html
index 8cf70ec..8f5f282 100644
--- 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.