Add Comments UI Component #19

This PR adds a new UI sequoia-comments web component that can render comments for a site.standard.document if the bskyPostRef exists in the record. By default the web component will look for the atUri of the document in the <link> tags used for verification. It can also take the URI as a parameter:

<!-- Use attributes for explicit control -->
<sequoia-comments
  document-uri="at://did:plc:example/site.standard.document/abc123"
  depth="10">
</sequoia-comments>

The component can also be customized with the following CSS variables

:root {
  --sequoia-accent-color: #3A5A40;
  --sequoia-border-radius: 12px;
  --sequoia-bg-color: #1a1a1a;
  --sequoia-fg-color: #F5F3EF;
  --sequoia-border-color: #333;
  --sequoia-secondary-color: #8B7355;
}

The PR includes updates to the docs with the command to add the component, and a new page for how the components work and can be configured.

+7 -7

16 changed files

Interdiff #0 → #1

expand all

.gitignore

docs

pages

blog

introducing-sequoia.mdx

cli-reference.mdx

comments.mdx

config.mdx

publishing.mdx

public

sequoia-comments.js

styles.css

sequoia.json

vocs.config.ts

packages

cli

package.json

src

commands

add.ts

components

sequoia-comments.js

index.ts

lib

types.ts

test.html

.gitignore

This file has not been changed.

docs/docs/pages/blog/introducing-sequoia.mdx

This file has not been changed.

docs/docs/pages/cli-reference.mdx

This file has not been changed.

docs/docs/pages/comments.mdx

This file has not been changed.

docs/docs/pages/config.mdx

This file has not been changed.

docs/docs/pages/publishing.mdx

This file has not been changed.

docs/docs/public/sequoia-comments.js

This file has not been changed.

docs/docs/styles.css

This file has not been changed.

docs/sequoia.json

This file has not been changed.

docs/vocs.config.ts

This file has not been changed.

packages/cli/package.json

This file has not been changed.

+5 -5

packages/cli/src/commands/add.ts

··· 3 3 import * as path from "node:path"; 4 4 import { command, positional, string } from "cmd-ts"; 5 5 import { intro, outro, text, spinner, log, note } from "@clack/prompts"; 6 - import { fileURLToPath } from "url"; 7 - import { dirname } from "path"; 6 + import { fileURLToPath } from "node:url"; 7 + import { dirname } from "node:path"; 8 8 import { findConfig, loadConfig } from "../lib/config"; 9 9 import type { PublisherConfig } from "../lib/types"; 10 10 ··· 83 83 await fs.writeFile( 84 84 configPath, 85 85 JSON.stringify(existingConfig, null, 2), 86 - "utf-8" 86 + "utf-8", 87 87 ); 88 88 s.stop("Updated sequoia.json with UI configuration"); 89 89 } catch (error) { ··· 100 100 await fs.writeFile( 101 101 path.join(process.cwd(), "sequoia.json"), 102 102 JSON.stringify(minimalConfig, null, 2), 103 - "utf-8" 103 + "utf-8", 104 104 ); 105 105 s.stop("Created sequoia.json with UI configuration"); 106 106 } ··· 149 149 `<${componentName}></${componentName}>\n\n` + 150 150 `The component will automatically read the document URI from:\n` + 151 151 `<link rel="site.standard.document" href="at://...">`, 152 - "Usage" 152 + "Usage", 153 153 ); 154 154 155 155 outro(`${componentName} added successfully!`);

+2 -2

packages/cli/src/components/sequoia-comments.js

··· 800 800 * Render a single comment 801 801 * @param {any} post - Post data 802 802 * @param {boolean} showThreadLine - Whether to show the connecting thread line 803 - * @param {number} index - Index in the flattened thread (0 = top-level) 803 + * @param {number} _index - Index in the flattened thread (0 = top-level) 804 804 */ 805 - renderComment(post, showThreadLine = false, index = 0) { 805 + renderComment(post, showThreadLine = false, _index = 0) { 806 806 const author = post.author; 807 807 const displayName = author.displayName || author.handle; 808 808 const avatarHtml = author.avatar

packages/cli/src/index.ts

This file has not been changed.

packages/cli/src/lib/types.ts

This file has not been changed.

packages/cli/test.html

This file has not been changed.

History

2 rounds 0 comments

stevedylan.dev submitted #1 6w

diff

8 commits

expand

042f49ef

feat: initial ui components

4f7cabe4

chore: small updates

e7ed2e22

chore: refactored package into existing cli

223d5847

chore: tested comments in docs

8b61b21d

chore: updated thread style and added test.html

0b34f1ed

chore: update docs

76057599

chore: updated comments

a59e77fd

chore: lint

1/1 success

expand

lint.yml

success 4s

expand 0 comments

pull request successfully merged

stevedylan.dev submitted #0 6w

diff

7 commits

expand

042f49ef

feat: initial ui components

4f7cabe4

chore: small updates

e7ed2e22

chore: refactored package into existing cli

223d5847

chore: tested comments in docs

8b61b21d

chore: updated thread style and added test.html

0b34f1ed

chore: update docs

76057599

chore: updated comments

1/1 failed

expand

lint.yml

failed 9s

expand 0 comments