git.stevedylan.dev

chore: updated comments 43133da2

Steve · 2026-02-07 16:35 2 file(s) · +112 −15

docs/docs/pages/comments.mdx +111 −15

# Comments

Sequoia has a small UI trick up its sleve that lets you easily display comments on your blog posts through Bluesky posts. This is the general flow: 
Sequoia has a small UI trick up its sleeve that lets you easily display comments on your blog posts through Bluesky posts. This is the general flow:

1. Setup your blog with `sequoia init`, and when prompted at the end to enable BlueSky posts, select `yes`. 
2. When you run `sequoia pubish` the CLI will publish a BlueSky post and link it to your `site.standard.document` record for your post. 
3. As people reply to the BlueSky post, the replies can be rendered as comments below your post using the Sequoia UI web component. 
1. Setup your blog with `sequoia init`, and when prompted at the end to enable BlueSky posts, select `yes`.
2. When you run `sequoia publish` the CLI will publish a BlueSky post and link it to your `site.standard.document` record for your post.
3. As people reply to the BlueSky post, the replies can be rendered as comments below your post using the Sequoia UI web component.

## Setup


sequoia add sequoia-comments
```

Then in your HTML or blog post template, import the component with a script tag or module import.
The web component will look for the `<link rel="site.standard.document" href="atUri"/>` in your HTML head, then using the `atUri` fetch the post and the replies.

```html
::::tip
For more information on the `<link>` tags, check out the [verification guide](/verifying)
::::

## Usage

Since `sequoia-comments` is a standard Web Component, it works with any framework. Choose your setup below:

:::code-group

```html [HTML]
<body>
  <h1>Blog Post Title</h1>
  <!--Content-->
  <h2>Comments</h2>
  
  <sequoia-comments></sequoia-comments> // [!code focus]
  <script type="module" src="./src/components/sequoia-comments.js"></script> // [!code focus]
  

  <sequoia-comments></sequoia-comments>
  <script type="module" src="./src/components/sequoia-comments.js"></script>
</body>
</html>
```

```tsx [React]
// Import the component (registers the custom element)
import './components/sequoia-comments.js';

function BlogPost() {
  return (
    <article>
      <h1>Blog Post Title</h1>
      {/* Content */}
      <h2>Comments</h2>
      <sequoia-comments />
    </article>
  );
}
```

The web components will look for the `<link rel="site.standard.document" href="atUri"/>` in your HTML head, then using the `atUri` fetch the post and the replies. 
```vue [Vue]
<script setup>
import './components/sequoia-comments.js';
</script>

::::tip
For more information on the `<link>` tags, check out the [verification guide](/verifying)
::::
<template>
  <article>
    <h1>Blog Post Title</h1>
    <!-- Content -->
    <h2>Comments</h2>
    <sequoia-comments />
  </article>
</template>
```

```svelte [Svelte]
<script>
  import './components/sequoia-comments.js';
</script>

<article>
  <h1>Blog Post Title</h1>
  <!-- Content -->
  <h2>Comments</h2>
  <sequoia-comments />
</article>
```

```astro [Astro]
<article>
  <h1>Blog Post Title</h1>
  <!-- Content -->
  <h2>Comments</h2>
  <sequoia-comments />
  <script>
    import './components/sequoia-comments.js';
  </script>
</article>
```

:::

### TypeScript Support

If you're using TypeScript with React, add this type declaration to avoid JSX errors:

```ts [custom-elements.d.ts]
declare namespace JSX {
  interface IntrinsicElements {
    'sequoia-comments': React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement> & {
        'document-uri'?: string;
        depth?: string | number;
      },
      HTMLElement
    >;
  }
}
```

### Vue Configuration

For Vue, you may need to configure the compiler to recognize custom elements:

```ts [vite.config.ts]
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'sequoia-comments'
        }
      }
    })
  ]
});
```

## Configuration


docs/vocs.config.ts +1 −0

			items: [
				{ text: "Setup", link: "/setup" },
				{ text: "Publishing", link: "/publishing" },
				{ text: "Comments", link: "/comments" },
				{ text: "Verifying", link: "/verifying" },
				{ text: "Workflows", link: "/workflows" },
			],

1	1		# Comments
2	2
3		-	Sequoia has a small UI trick up its sleve that lets you easily display comments on your blog posts through Bluesky posts. This is the general flow:
	3	+	Sequoia has a small UI trick up its sleeve that lets you easily display comments on your blog posts through Bluesky posts. This is the general flow:
4	4
5		-	1. Setup your blog with `sequoia init`, and when prompted at the end to enable BlueSky posts, select `yes`.
6		-	2. When you run `sequoia pubish` the CLI will publish a BlueSky post and link it to your `site.standard.document` record for your post.
7		-	3. As people reply to the BlueSky post, the replies can be rendered as comments below your post using the Sequoia UI web component.
	5	+	1. Setup your blog with `sequoia init`, and when prompted at the end to enable BlueSky posts, select `yes`.
	6	+	2. When you run `sequoia publish` the CLI will publish a BlueSky post and link it to your `site.standard.document` record for your post.
	7	+	3. As people reply to the BlueSky post, the replies can be rendered as comments below your post using the Sequoia UI web component.
8	8
9	9		## Setup
10	10

14	14		sequoia add sequoia-comments
15	15		```
16	16
17		-	Then in your HTML or blog post template, import the component with a script tag or module import.
	17	+	The web component will look for the `<link rel="site.standard.document" href="atUri"/>` in your HTML head, then using the `atUri` fetch the post and the replies.
18	18
19		-	```html
	19	+	::::tip
	20	+	For more information on the `<link>` tags, check out the [verification guide](/verifying)
	21	+	::::
	22	+
	23	+	## Usage
	24	+
	25	+	Since `sequoia-comments` is a standard Web Component, it works with any framework. Choose your setup below:
	26	+
	27	+	:::code-group
	28	+
	29	+	```html [HTML]
20	30		<body>
21	31		<h1>Blog Post Title</h1>
22	32		<!--Content-->
23	33		<h2>Comments</h2>
24		-
25		-	<sequoia-comments></sequoia-comments> // [!code focus]
26		-	<script type="module" src="./src/components/sequoia-comments.js"></script> // [!code focus]
27		-
	34	+
	35	+	<sequoia-comments></sequoia-comments>
	36	+	<script type="module" src="./src/components/sequoia-comments.js"></script>
28	37		</body>
29		-	</html>
	38	+	```
	39	+
	40	+	```tsx [React]
	41	+	// Import the component (registers the custom element)
	42	+	import './components/sequoia-comments.js';
	43	+
	44	+	function BlogPost() {
	45	+	return (
	46	+	<article>
	47	+	<h1>Blog Post Title</h1>
	48	+	{/* Content */}
	49	+	<h2>Comments</h2>
	50	+	<sequoia-comments />
	51	+	</article>
	52	+	);
	53	+	}
30	54		```
31	55
32		-	The web components will look for the `<link rel="site.standard.document" href="atUri"/>` in your HTML head, then using the `atUri` fetch the post and the replies.
	56	+	```vue [Vue]
	57	+	<script setup>
	58	+	import './components/sequoia-comments.js';
	59	+	</script>
33	60
34		-	::::tip
35		-	For more information on the `<link>` tags, check out the [verification guide](/verifying)
36		-	::::
	61	+	<template>
	62	+	<article>
	63	+	<h1>Blog Post Title</h1>
	64	+	<!-- Content -->
	65	+	<h2>Comments</h2>
	66	+	<sequoia-comments />
	67	+	</article>
	68	+	</template>
	69	+	```
	70	+
	71	+	```svelte [Svelte]
	72	+	<script>
	73	+	import './components/sequoia-comments.js';
	74	+	</script>
	75	+
	76	+	<article>
	77	+	<h1>Blog Post Title</h1>
	78	+	<!-- Content -->
	79	+	<h2>Comments</h2>
	80	+	<sequoia-comments />
	81	+	</article>
	82	+	```
	83	+
	84	+	```astro [Astro]
	85	+	<article>
	86	+	<h1>Blog Post Title</h1>
	87	+	<!-- Content -->
	88	+	<h2>Comments</h2>
	89	+	<sequoia-comments />
	90	+	<script>
	91	+	import './components/sequoia-comments.js';
	92	+	</script>
	93	+	</article>
	94	+	```
	95	+
	96	+	:::
	97	+
	98	+	### TypeScript Support
	99	+
	100	+	If you're using TypeScript with React, add this type declaration to avoid JSX errors:
	101	+
	102	+	```ts [custom-elements.d.ts]
	103	+	declare namespace JSX {
	104	+	interface IntrinsicElements {
	105	+	'sequoia-comments': React.DetailedHTMLProps<
	106	+	React.HTMLAttributes<HTMLElement> & {
	107	+	'document-uri'?: string;
	108	+	depth?: string \| number;
	109	+	},
	110	+	HTMLElement
	111	+	>;
	112	+	}
	113	+	}
	114	+	```
	115	+
	116	+	### Vue Configuration
	117	+
	118	+	For Vue, you may need to configure the compiler to recognize custom elements:
	119	+
	120	+	```ts [vite.config.ts]
	121	+	export default defineConfig({
	122	+	plugins: [
	123	+	vue({
	124	+	template: {
	125	+	compilerOptions: {
	126	+	isCustomElement: (tag) => tag === 'sequoia-comments'
	127	+	}
	128	+	}
	129	+	})
	130	+	]
	131	+	});
	132	+	```
37	133
38	134		## Configuration
39	135

34	34		items: [
35	35		{ text: "Setup", link: "/setup" },
36	36		{ text: "Publishing", link: "/publishing" },
	37	+	{ text: "Comments", link: "/comments" },
37	38		{ text: "Verifying", link: "/verifying" },
38	39		{ text: "Workflows", link: "/workflows" },
39	40		],