apoena.dev
forked from
stevedylan.dev/sequoia
A CLI for publishing standard.site documents to ATProto
chore: update docs
authored by
+18
docs/docs/pages/cli-reference.mdx
+18
docs/docs/pages/cli-reference.mdx
···
32
32
33
33
Use this as an alternative to `login` when OAuth isn't available or for CI environments.
34
34
35
+
## `add`
36
+
37
+
```bash [Terminal]
38
+
sequoia add <component>
39
+
> Add a UI component to your project
40
+
41
+
ARGUMENTS:
42
+
component - The name of the component to add
43
+
44
+
FLAGS:
45
+
--help, -h - show help [optional]
46
+
```
47
+
48
+
Available components:
49
+
- `sequoia-comments` - Display Bluesky replies as comments on your blog posts
50
+
51
+
The component will be installed to the directory specified in `ui.components` (default: `src/components`). See the [Comments guide](/comments) for usage details.
52
+
35
53
## `init`
36
54
37
55
```bash [Terminal]
+83
docs/docs/pages/comments.mdx
+83
docs/docs/pages/comments.mdx
···
1
+
# Comments
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:
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.
8
+
9
+
## Setup
10
+
11
+
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.
12
+
13
+
```bash [Terminal]
14
+
sequoia add sequoia-comments
15
+
```
16
+
17
+
Then in your HTML or blog post template, import the component with a script tag or module import.
18
+
19
+
```html
20
+
<body>
21
+
<h1>Blog Post Title</h1>
22
+
<!--Content-->
23
+
<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
+
28
+
</body>
29
+
</html>
30
+
```
31
+
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.
33
+
34
+
::::tip
35
+
For more information on the `<link>` tags, check out the [verification guide](/verifying)
36
+
::::
37
+
38
+
## Configuration
39
+
40
+
The comments web component has several configuration options available.
41
+
42
+
### Attributes
43
+
44
+
The `<sequoia-comments>` component accepts the following attributes:
45
+
46
+
| Attribute | Type | Default | Description |
47
+
|-----------|------|---------|-------------|
48
+
| `document-uri` | `string` | - | AT Protocol URI for the document. Optional if a `<link rel="site.standard.document">` tag exists in the page head. |
49
+
| `depth` | `number` | `6` | Maximum depth of nested replies to fetch. |
50
+
51
+
```html
52
+
<!-- Use attributes for explicit control -->
53
+
<sequoia-comments
54
+
document-uri="at://did:plc:example/site.standard.document/abc123"
55
+
depth="10">
56
+
</sequoia-comments>
57
+
```
58
+
59
+
### Styling
60
+
61
+
The component uses CSS custom properties for theming. Set these in your `:root` or parent element to customize the appearance:
62
+
63
+
| CSS Property | Default | Description |
64
+
|--------------|---------|-------------|
65
+
| `--sequoia-fg-color` | `#1f2937` | Text color |
66
+
| `--sequoia-bg-color` | `#ffffff` | Background color |
67
+
| `--sequoia-border-color` | `#e5e7eb` | Border color |
68
+
| `--sequoia-accent-color` | `#2563eb` | Accent/link color |
69
+
| `--sequoia-secondary-color` | `#6b7280` | Secondary text color (handles, timestamps) |
70
+
| `--sequoia-border-radius` | `8px` | Border radius for cards and buttons |
71
+
72
+
### Example: Dark Theme
73
+
74
+
```css
75
+
:root {
76
+
--sequoia-accent-color: #3A5A40;
77
+
--sequoia-border-radius: 12px;
78
+
--sequoia-bg-color: #1a1a1a;
79
+
--sequoia-fg-color: #F5F3EF;
80
+
--sequoia-border-color: #333;
81
+
--sequoia-secondary-color: #8B7355;
82
+
}
83
+
```
+6
-1
docs/docs/pages/config.mdx
+6
-1
docs/docs/pages/config.mdx
···
19
19
| `removeIndexFromSlug` | `boolean` | No | `false` | Remove `/index` or `/_index` suffix from slugs |
20
20
| `stripDatePrefix` | `boolean` | No | `false` | Remove `YYYY-MM-DD-` date prefixes from slugs (Jekyll-style) |
21
21
| `bluesky` | `object` | No | - | Bluesky posting configuration |
22
-
| `bluesky.enabled` | `boolean` | No | `false` | Post to Bluesky when publishing documents |
22
+
| `bluesky.enabled` | `boolean` | No | `false` | Post to Bluesky when publishing documents (also enables [comments](/comments)) |
23
23
| `bluesky.maxAgeDays` | `number` | No | `30` | Only post documents published within this many days |
24
+
| `ui` | `object` | No | - | UI components configuration |
25
+
| `ui.components` | `string` | No | `"src/components"` | Directory where UI components are installed |
24
26
25
27
### Example
26
28
···
41
43
"bluesky": {
42
44
"enabled": true,
43
45
"maxAgeDays": 30
46
+
},
47
+
"ui": {
48
+
"components": "src/components"
44
49
}
45
50
}
46
51
```
+6
docs/docs/pages/publishing.mdx
+6
docs/docs/pages/publishing.mdx
···
66
66
}
67
67
```
68
68
69
+
## Comments
70
+
71
+
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.
72
+
73
+
To display comments on your site, use the `sequoia-comments` web component. See the [Comments guide](/comments) for setup instructions.
74
+
69
75
## Troubleshooting
70
76
71
77
- If you have files in your markdown directory that should be ignored, use the [`ignore` array in the config](/config#ignoring-files).