From 43133da246b4dd4ddec6d7814fa9b458153581a7 Mon Sep 17 00:00:00 2001 From: Steve Date: Sat, 07 Feb 2026 21:35:56 +0000 Subject: [PATCH] chore: updated comments --- docs/vocs.config.ts | 1 + docs/docs/pages/comments.mdx | 136 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------- 2 file(s) changed, 117 insertion(s)(+), 20 deletion(s)(-) diff --git a/docs/vocs.config.ts b/docs/vocs.config.ts --- a/docs/vocs.config.ts +++ b/docs/vocs.config.ts @@ -34,6 +34,7 @@ items: [ { text: "Setup", link: "/setup" }, { text: "Publishing", link: "/publishing" }, + { text: "Comments", link: "/comments" }, { text: "Verifying", link: "/verifying" }, { text: "Workflows", link: "/workflows" }, ], diff --git a/docs/docs/pages/comments.mdx b/docs/docs/pages/comments.mdx --- a/docs/docs/pages/comments.mdx +++ b/docs/docs/pages/comments.mdx @@ -1,10 +1,10 @@ # 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 @@ -14,26 +14,122 @@ sequoia add sequoia-comments ``` -Then in your HTML or blog post template, import the component with a script tag or module import. - -```html - -

Blog Post Title

- -

Comments

- - // [!code focus] - // [!code focus] - - - -``` - -The web components will look for the `` in your HTML head, then using the `atUri` fetch the post and the replies. +The web component will look for the `` in your HTML head, then using the `atUri` fetch the post and the replies. ::::tip For more information on the `` 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] + +

Blog Post Title

+ +

Comments

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

Blog Post Title

+ {/* Content */} +

Comments

+ +
+ ); +} +``` + +```vue [Vue] + + + +``` + +```svelte [Svelte] + + +
+

Blog Post Title

+ +

Comments

+ +
+``` + +```astro [Astro] +
+

Blog Post Title

+ +

Comments

+ + +
+``` + +::: + +### 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 & { + '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 -- tangled.sh