···32323333Use this as an alternative to `login` when OAuth isn't available or for CI environments.
34343535+## `add`
3636+3737+```bash [Terminal]
3838+sequoia add <component>
3939+> Add a UI component to your project
4040+4141+ARGUMENTS:
4242+ component - The name of the component to add
4343+4444+FLAGS:
4545+ --help, -h - show help [optional]
4646+```
4747+4848+Available components:
4949+- `sequoia-comments` - Display Bluesky replies as comments on your blog posts
5050+5151+The component will be installed to the directory specified in `ui.components` (default: `src/components`). See the [Comments guide](/comments) for usage details.
5252+3553## `init`
36543755```bash [Terminal]
+83
docs/docs/pages/comments.mdx
···11+# Comments
22+33+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:
44+55+1. Setup your blog with `sequoia init`, and when prompted at the end to enable BlueSky posts, select `yes`.
66+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.
77+3. As people reply to the BlueSky post, the replies can be rendered as comments below your post using the Sequoia UI web component.
88+99+## Setup
1010+1111+Run the following command in your project to install the comments web component. It will ask you where you would like to store the component file.
1212+1313+```bash [Terminal]
1414+sequoia add sequoia-comments
1515+```
1616+1717+Then in your HTML or blog post template, import the component with a script tag or module import.
1818+1919+```html
2020+<body>
2121+ <h1>Blog Post Title</h1>
2222+ <!--Content-->
2323+ <h2>Comments</h2>
2424+2525+ <sequoia-comments></sequoia-comments> // [!code focus]
2626+ <script type="module" src="./src/components/sequoia-comments.js"></script> // [!code focus]
2727+2828+</body>
2929+</html>
3030+```
3131+3232+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.
3333+3434+::::tip
3535+For more information on the `<link>` tags, check out the [verification guide](/verifying)
3636+::::
3737+3838+## Configuration
3939+4040+The comments web component has several configuration options available.
4141+4242+### Attributes
4343+4444+The `<sequoia-comments>` component accepts the following attributes:
4545+4646+| Attribute | Type | Default | Description |
4747+|-----------|------|---------|-------------|
4848+| `document-uri` | `string` | - | AT Protocol URI for the document. Optional if a `<link rel="site.standard.document">` tag exists in the page head. |
4949+| `depth` | `number` | `6` | Maximum depth of nested replies to fetch. |
5050+5151+```html
5252+<!-- Use attributes for explicit control -->
5353+<sequoia-comments
5454+ document-uri="at://did:plc:example/site.standard.document/abc123"
5555+ depth="10">
5656+</sequoia-comments>
5757+```
5858+5959+### Styling
6060+6161+The component uses CSS custom properties for theming. Set these in your `:root` or parent element to customize the appearance:
6262+6363+| CSS Property | Default | Description |
6464+|--------------|---------|-------------|
6565+| `--sequoia-fg-color` | `#1f2937` | Text color |
6666+| `--sequoia-bg-color` | `#ffffff` | Background color |
6767+| `--sequoia-border-color` | `#e5e7eb` | Border color |
6868+| `--sequoia-accent-color` | `#2563eb` | Accent/link color |
6969+| `--sequoia-secondary-color` | `#6b7280` | Secondary text color (handles, timestamps) |
7070+| `--sequoia-border-radius` | `8px` | Border radius for cards and buttons |
7171+7272+### Example: Dark Theme
7373+7474+```css
7575+:root {
7676+ --sequoia-accent-color: #3A5A40;
7777+ --sequoia-border-radius: 12px;
7878+ --sequoia-bg-color: #1a1a1a;
7979+ --sequoia-fg-color: #F5F3EF;
8080+ --sequoia-border-color: #333;
8181+ --sequoia-secondary-color: #8B7355;
8282+}
8383+```
+6-1
docs/docs/pages/config.mdx
···1919| `removeIndexFromSlug` | `boolean` | No | `false` | Remove `/index` or `/_index` suffix from slugs |
2020| `stripDatePrefix` | `boolean` | No | `false` | Remove `YYYY-MM-DD-` date prefixes from slugs (Jekyll-style) |
2121| `bluesky` | `object` | No | - | Bluesky posting configuration |
2222-| `bluesky.enabled` | `boolean` | No | `false` | Post to Bluesky when publishing documents |
2222+| `bluesky.enabled` | `boolean` | No | `false` | Post to Bluesky when publishing documents (also enables [comments](/comments)) |
2323| `bluesky.maxAgeDays` | `number` | No | `30` | Only post documents published within this many days |
2424+| `ui` | `object` | No | - | UI components configuration |
2525+| `ui.components` | `string` | No | `"src/components"` | Directory where UI components are installed |
24262527### Example
2628···4143 "bluesky": {
4244 "enabled": true,
4345 "maxAgeDays": 30
4646+ },
4747+ "ui": {
4848+ "components": "src/components"
4449 }
4550}
4651```
+6
docs/docs/pages/publishing.mdx
···6666}
6767```
68686969+## Comments
7070+7171+When Bluesky posting is enabled, Sequoia links each published document to its corresponding Bluesky post. This enables comments on your blog posts through Bluesky replies.
7272+7373+To display comments on your site, use the `sequoia-comments` web component. See the [Comments guide](/comments) for setup instructions.
7474+6975## Troubleshooting
70767177- If you have files in your markdown directory that should be ignored, use the [`ignore` array in the config](/config#ignoring-files).