apoena.dev
this repo has no description
chore: updated comments
authored by
+112
-15
+111
-15
docs/docs/pages/comments.mdx
+111
-15
docs/docs/pages/comments.mdx
···
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