git.stevedylan.dev

chore: updated docs 6788c7d2

Steve · 2026-03-11 19:15 1 file(s) · +37 −5

docs/docs/pages/subscribe.mdx +37 −5

# Subscribe

Sequoia provides a subscribe button web component that lets your readers subscribe to your publication directly from your site using their Bluesky account.
Sequoia provides a subscribe button web component that lets your readers subscribe to your publication directly from your site using their AT Protocol account.

## Setup


      React.HTMLAttributes<HTMLElement> & {
        'publication-uri'?: string;
        'callback-uri'?: string;
        'button-type'?: 'sequoia' | 'bluesky' | 'blacksky' | 'atmosphere' | 'plain';
        label?: string;
        'unsubscribe-label'?: string;
        hide?: string;
      },
      HTMLElement

|-----------|------|---------|-------------|
| `publication-uri` | `string` | - | AT Protocol URI for the publication. Optional if a `/.well-known/site.standard.publication` endpoint exists on the host site. |
| `callback-uri` | `string` | `https://sequoia.pub/subscribe` | Redirect URI used for the OAuth authentication flow. |
| `label` | `string` | `Subscribe on Bluesky` | Button label text. |
| `button-type` | `string` | `sequoia` | Branding style for the button. Accepted values: `sequoia`, `bluesky`, `blacksky`, `atmosphere`, `plain`. |
| `label` | `string` | - | Override the subscribe button label text. Defaults to the `button-type` label (e.g. "Subscribe on Sequoia"). |
| `unsubscribe-label` | `string` | `Unsubscribe` | Override the unsubscribe button label text. |
| `hide` | `string` | - | Set to `"auto"` to hide the component if no publication URI is detected. |

#### Button Types

The `button-type` attribute controls which icon and default label the button uses:

| Type | Icon | Default Label |
|------|------|---------------|
| `sequoia` | Sequoia tree | Subscribe on Sequoia |
| `bluesky` | Bluesky butterfly | Subscribe on Bluesky |
| `blacksky` | Blacksky star | Subscribe on Blacksky |
| `atmosphere` | Atmosphere @ | Subscribe on Atmosphere |
| `plain` | None | Subscribe |

```html
<!-- Use attributes for explicit control -->
<!-- Default Sequoia branding -->
<sequoia-subscribe></sequoia-subscribe>

<!-- Bluesky branding -->
<sequoia-subscribe button-type="bluesky"></sequoia-subscribe>

<!-- Blacksky branding -->
<sequoia-subscribe button-type="blacksky"></sequoia-subscribe>

<!-- Atmosphere branding -->
<sequoia-subscribe button-type="atmosphere"></sequoia-subscribe>

<!-- Plain text, no icon -->
<sequoia-subscribe button-type="plain"></sequoia-subscribe>

<!-- Custom labels -->
<sequoia-subscribe
  publication-uri="at://did:plc:example/site.standard.publication/abc123"
  label="Follow on Bluesky">
  label="Follow this publication"
  unsubscribe-label="Stop following">
</sequoia-subscribe>
```


| `--sequoia-accent-color` | `#2563eb` | Button background color |
| `--sequoia-secondary-color` | `#6b7280` | Secondary text color |
| `--sequoia-border-radius` | `8px` | Border radius for the button |
| `--sequoia-icon-display` | `inline-block` | Set to `none` to hide the button icon |

### Example: Match Site Theme


1	1		# Subscribe
2	2
3		-	Sequoia provides a subscribe button web component that lets your readers subscribe to your publication directly from your site using their Bluesky account.
	3	+	Sequoia provides a subscribe button web component that lets your readers subscribe to your publication directly from your site using their AT Protocol account.
4	4
5	5		## Setup
6	6

93	93		React.HTMLAttributes<HTMLElement> & {
94	94		'publication-uri'?: string;
95	95		'callback-uri'?: string;
	96	+	'button-type'?: 'sequoia' \| 'bluesky' \| 'blacksky' \| 'atmosphere' \| 'plain';
96	97		label?: string;
	98	+	'unsubscribe-label'?: string;
97	99		hide?: string;
98	100		},
99	101		HTMLElement

132	134		\|-----------\|------\|---------\|-------------\|
133	135		\| `publication-uri` \| `string` \| - \| AT Protocol URI for the publication. Optional if a `/.well-known/site.standard.publication` endpoint exists on the host site. \|
134	136		\| `callback-uri` \| `string` \| `https://sequoia.pub/subscribe` \| Redirect URI used for the OAuth authentication flow. \|
135		-	\| `label` \| `string` \| `Subscribe on Bluesky` \| Button label text. \|
	137	+	\| `button-type` \| `string` \| `sequoia` \| Branding style for the button. Accepted values: `sequoia`, `bluesky`, `blacksky`, `atmosphere`, `plain`. \|
	138	+	\| `label` \| `string` \| - \| Override the subscribe button label text. Defaults to the `button-type` label (e.g. "Subscribe on Sequoia"). \|
	139	+	\| `unsubscribe-label` \| `string` \| `Unsubscribe` \| Override the unsubscribe button label text. \|
136	140		\| `hide` \| `string` \| - \| Set to `"auto"` to hide the component if no publication URI is detected. \|
137	141
	142	+	#### Button Types
	143	+
	144	+	The `button-type` attribute controls which icon and default label the button uses:
	145	+
	146	+	\| Type \| Icon \| Default Label \|
	147	+	\|------\|------\|---------------\|
	148	+	\| `sequoia` \| Sequoia tree \| Subscribe on Sequoia \|
	149	+	\| `bluesky` \| Bluesky butterfly \| Subscribe on Bluesky \|
	150	+	\| `blacksky` \| Blacksky star \| Subscribe on Blacksky \|
	151	+	\| `atmosphere` \| Atmosphere @ \| Subscribe on Atmosphere \|
	152	+	\| `plain` \| None \| Subscribe \|
	153	+
138	154		```html
139		-	<!-- Use attributes for explicit control -->
	155	+	<!-- Default Sequoia branding -->
	156	+	<sequoia-subscribe></sequoia-subscribe>
	157	+
	158	+	<!-- Bluesky branding -->
	159	+	<sequoia-subscribe button-type="bluesky"></sequoia-subscribe>
	160	+
	161	+	<!-- Blacksky branding -->
	162	+	<sequoia-subscribe button-type="blacksky"></sequoia-subscribe>
	163	+
	164	+	<!-- Atmosphere branding -->
	165	+	<sequoia-subscribe button-type="atmosphere"></sequoia-subscribe>
	166	+
	167	+	<!-- Plain text, no icon -->
	168	+	<sequoia-subscribe button-type="plain"></sequoia-subscribe>
	169	+
	170	+	<!-- Custom labels -->
140	171		<sequoia-subscribe
141		-	publication-uri="at://did:plc:example/site.standard.publication/abc123"
142		-	label="Follow on Bluesky">
	172	+	label="Follow this publication"
	173	+	unsubscribe-label="Stop following">
143	174		</sequoia-subscribe>
144	175		```
145	176

176	207		\| `--sequoia-accent-color` \| `#2563eb` \| Button background color \|
177	208		\| `--sequoia-secondary-color` \| `#6b7280` \| Secondary text color \|
178	209		\| `--sequoia-border-radius` \| `8px` \| Border radius for the button \|
	210	+	\| `--sequoia-icon-display` \| `inline-block` \| Set to `none` to hide the button icon \|
179	211
180	212		### Example: Match Site Theme
181	213