diff --git a/packages/cli/src/components/sequoia-comments.js b/packages/cli/src/components/sequoia-comments.js index 7639bed..3b6ea0a 100644 --- a/packages/cli/src/components/sequoia-comments.js +++ b/packages/cli/src/components/sequoia-comments.js @@ -11,6 +11,14 @@ * 1. The `document-uri` attribute on the element * 2. A tag in the document head * + * Custom reply button: + * Place any element with slot="reply-button" to replace the default Bluesky/Blacksky buttons. + * It stays in the light DOM, so your page CSS applies to it normally. + * Only practical with post-uri, since that's the only time the URL is known at authoring time: + * + * Reply + * + * * Attributes: * - post-uri: Bluesky post as AT-URI (at://...) or bsky.app URL — skips PDS document lookup * - document-uri: AT Protocol URI for the document (optional if link tag exists) @@ -853,14 +861,7 @@ class SequoiaComments extends BaseElement { this.commentsContainer.innerHTML = `

Comments

-
- - ${BLUESKY_ICON} - - - ${BLACKSKY_ICON} - -
+
${this.renderReplyButtons(this.state.postUrl, this.state.blackskyPostUrl)}
No comments yet. Be the first to reply on Bluesky! @@ -893,14 +894,7 @@ class SequoiaComments extends BaseElement { this.commentsContainer.innerHTML = `

${titleText}

-
- - ${BLUESKY_ICON} - - - ${BLACKSKY_ICON} - -
+
${this.renderReplyButtons(this.state.postUrl, this.state.blackskyPostUrl)}
${threadsHtml} @@ -934,6 +928,24 @@ class SequoiaComments extends BaseElement { return result; } + /** + * Render the reply-button slot. Any element with slot="reply-button" in the + * light DOM is projected here and remains styleable by external CSS. + * The default Bluesky/Blacksky buttons are used as fallback content. + */ + renderReplyButtons(postUrl, blackskyPostUrl) { + return ` + + + ${BLUESKY_ICON} + + + ${BLACKSKY_ICON} + + + `; + } + /** * Render a complete thread (top-level comment + all nested replies) */