A CLI for publishing standard.site documents to ATProto sequoia.pub
standard site lexicon cli publishing
55
fork

Configure Feed

Select the types of activity you want to include in your feed.

add slot to overwrite buttons, but needs post-uri

authored by

Pascal Hertleif and committed by
Tangled
a0ddd6f9 6a07b10c

+28 -16
+28 -16
packages/cli/src/components/sequoia-comments.js
··· 11 11 * 1. The `document-uri` attribute on the element 12 12 * 2. A <link rel="site.standard.document" href="at://..."> tag in the document head 13 13 * 14 + * Custom reply button: 15 + * Place any element with slot="reply-button" to replace the default Bluesky/Blacksky buttons. 16 + * It stays in the light DOM, so your page CSS applies to it normally. 17 + * Only practical with post-uri, since that's the only time the URL is known at authoring time: 18 + * <sequoia-comments post-uri="https://bsky.app/profile/.../post/..."> 19 + * <a slot="reply-button" href="https://bsky.app/profile/.../post/...">Reply</a> 20 + * </sequoia-comments> 21 + * 14 22 * Attributes: 15 23 * - post-uri: Bluesky post as AT-URI (at://...) or bsky.app URL — skips PDS document lookup 16 24 * - document-uri: AT Protocol URI for the document (optional if link tag exists) ··· 853 861 this.commentsContainer.innerHTML = ` 854 862 <div class="sequoia-comments-header"> 855 863 <h3 class="sequoia-comments-title">Comments</h3> 856 - <div> 857 - <a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky"> 858 - ${BLUESKY_ICON} 859 - </a> 860 - <a href="${this.state.blackskyPostUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky"> 861 - ${BLACKSKY_ICON} 862 - </a> 863 - </div> 864 + <div>${this.renderReplyButtons(this.state.postUrl, this.state.blackskyPostUrl)}</div> 864 865 </div> 865 866 <div class="sequoia-empty"> 866 867 No comments yet. Be the first to reply on Bluesky! ··· 893 894 this.commentsContainer.innerHTML = ` 894 895 <div class="sequoia-comments-header"> 895 896 <h3 class="sequoia-comments-title">${titleText}</h3> 896 - <div> 897 - <a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky"> 898 - ${BLUESKY_ICON} 899 - </a> 900 - <a href="${this.state.blackskyPostUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky"> 901 - ${BLACKSKY_ICON} 902 - </a> 903 - </div> 897 + <div>${this.renderReplyButtons(this.state.postUrl, this.state.blackskyPostUrl)}</div> 904 898 </div> 905 899 <div class="sequoia-comments-list"> 906 900 ${threadsHtml} ··· 932 926 } 933 927 934 928 return result; 929 + } 930 + 931 + /** 932 + * Render the reply-button slot. Any element with slot="reply-button" in the 933 + * light DOM is projected here and remains styleable by external CSS. 934 + * The default Bluesky/Blacksky buttons are used as fallback content. 935 + */ 936 + renderReplyButtons(postUrl, blackskyPostUrl) { 937 + return ` 938 + <slot name="reply-button"> 939 + <a href="${escapeHtml(postUrl)}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky"> 940 + ${BLUESKY_ICON} 941 + </a> 942 + <a href="${escapeHtml(blackskyPostUrl)}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky"> 943 + ${BLACKSKY_ICON} 944 + </a> 945 + </slot> 946 + `; 935 947 } 936 948 937 949 /**