git.stevedylan.dev

Adding Blacksky as a comment option along with style changes to make it cleaner. 0911231a

Anuj Ahooja · 2026-03-10 21:57 1 file(s) · +51 −14

packages/cli/src/components/sequoia-comments.js +51 −14

	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	background: var(--sequoia-accent-color, #2563eb);
	color: #ffffff;
	border: none;
	border-radius: var(--sequoia-border-radius, 8px);
	border-radius: var(--sequoia-border-radius, 15px);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
	margin-left:10px;
}

.sequoia-reply-button:hover {
.sequoia-reply-bluesky {
	background: var(--sequoia-accent-color, #2563eb);
	color: #ffffff;
}

.sequoia-reply-blacksky {
	background: var(--sequoia-accent-color, #6060E9);
	color: #ffffff;
}

.sequoia-reply-bluesky:hover {
	background: color-mix(in srgb, var(--sequoia-accent-color, #2563eb) 85%, black);
}

.sequoia-reply-blacksky:hover {
	background: color-mix(in srgb, var(--sequoia-accent-color, #5252c3) 85%, black);
}

.sequoia-reply-button svg {

}

/**
 * Build a Blacksky app URL for a post
 * @param {string} postUri - AT Protocol URI for the post
 * @returns {string} Blacksky app URL
 */
function buildBlackskyAppUrl(postUri) {
	const parsed = parseAtUri(postUri);
	if (!parsed) {
		throw new Error(`Invalid post URI: ${postUri}`);
	}

	return `https://blacksky.community/profile/${parsed.did}/post/${parsed.rkey}`;
}

/**
 * Type guard for ThreadViewPost
 * @param {any} post - Post to check
 * @returns {boolean} True if post is a ThreadViewPost

const BLUESKY_ICON = `<svg class="sequoia-bsky-logo" viewBox="0 0 600 530" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"/>
</svg>`;
const BLACKSKY_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.0620117 0.348442 87.9941 74.9653"><path d="M41.9565 74.9643L24.0161 74.9653L41.9565 74.9643ZM63.8511 74.9653H45.9097L63.8501 74.9643V57.3286H63.8511V74.9653ZM45.9097 44.5893C45.9099 49.2737 49.7077 53.0707 54.3921 53.0707H63.8501V57.3286H54.3921C49.7077 57.3286 45.9099 61.1257 45.9097 65.81V74.9643H41.9565V65.81C41.9563 61.1258 38.1593 57.3287 33.4751 57.3286H24.0161V53.0707H33.4741C38.1587 53.0707 41.9565 49.2729 41.9565 44.5883V35.1303H45.9097V44.5893ZM63.8511 53.0707H63.8501V35.1303H63.8511V53.0707Z" fill="white"></path><path d="M52.7272 9.83198C49.4148 13.1445 49.4148 18.5151 52.7272 21.8275L59.4155 28.5158L56.4051 31.5262L49.7169 24.8379C46.4044 21.5254 41.0338 21.5254 37.7213 24.8379L31.2482 31.3111L28.4527 28.5156L34.9259 22.0424C38.2383 18.7299 38.2383 13.3594 34.9259 10.0469L28.2378 3.35883L31.2482 0.348442L37.9365 7.03672C41.2489 10.3492 46.6195 10.3492 49.932 7.03672L56.6203 0.348442L59.4155 3.14371L52.7272 9.83198Z" fill="white"/><path d="M24.3831 23.2335C23.1706 27.7584 25.8559 32.4095 30.3808 33.6219L39.5172 36.07L38.4154 40.182L29.2793 37.734C24.7544 36.5215 20.1033 39.2068 18.8909 43.7317L16.5215 52.5745L12.7028 51.5513L15.0721 42.7088C16.2846 38.1839 13.5993 33.5328 9.07434 32.3204L-0.0620117 29.8723L1.03987 25.76L10.1762 28.2081C14.7011 29.4206 19.3522 26.7352 20.5647 22.2103L23.0127 13.074L26.8311 14.0971L24.3831 23.2335Z" fill="white"/><path d="M67.3676 22.0297C68.5801 26.5546 73.2311 29.2399 77.756 28.0275L86.8923 25.5794L87.9941 29.6914L78.8578 32.1394C74.3329 33.3519 71.6476 38.003 72.86 42.5279L75.2294 51.3707L71.411 52.3938L69.0417 43.5513C67.8293 39.0264 63.1782 36.3411 58.6533 37.5535L49.5169 40.0016L48.415 35.8894L57.5514 33.4413C62.0763 32.2288 64.7616 27.5778 63.5492 23.0528L61.1011 13.9165L64.9195 12.8934L67.3676 22.0297Z" fill="white"/></svg>';

// ============================================================================
// Web Component

			}

			const postUrl = buildBskyAppUrl(document.bskyPostRef.uri);
			const blackskyPostUrl = buildBlackskyAppUrl(document.bskyPostRef.uri);

			// Fetch the post thread
			const thread = await getPostThread(document.bskyPostRef.uri, this.depth);

			// Check if there are any replies
			const replies = thread.replies?.filter(isThreadViewPost) ?? [];
			if (replies.length === 0) {
				this.state = { type: "empty", postUrl };
				this.state = { type: "empty", postUrl, blackskyPostUrl };
				this.render();
				return;
			}

			this.state = { type: "loaded", thread, postUrl };
			this.state = { type: "loaded", thread, postUrl, blackskyPostUrl };
			this.render();
		} catch (error) {
			const message =

				this.commentsContainer.innerHTML = `
					<div class="sequoia-comments-header">
						<h3 class="sequoia-comments-title">Comments</h3>
						<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
							${BLUESKY_ICON}
							Reply on Bluesky
						</a>
						<div>
							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
								${BLUESKY_ICON}
							</a>
							<a href="${this.state.blackskyPostUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky">
								${BLACKSKY_ICON}
							</a>
						</div>
					</div>
					<div class="sequoia-empty">
						No comments yet. Be the first to reply on Bluesky!

				this.commentsContainer.innerHTML = `
					<div class="sequoia-comments-header">
						<h3 class="sequoia-comments-title">${commentCount} Comment${commentCount !== 1 ? "s" : ""}</h3>
						<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
							${BLUESKY_ICON}
							Reply on Bluesky
						</a>
						<div>
							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
								${BLUESKY_ICON}
							</a>
							<a href="${this.state.blackskyPostUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky">
								${BLACKSKY_ICON}
							</a>
						</div>
					</div>
					<div class="sequoia-comments-list">
						${threadsHtml}

113	113		align-items: center;
114	114		gap: 0.375rem;
115	115		padding: 0.5rem 1rem;
116		-	background: var(--sequoia-accent-color, #2563eb);
117		-	color: #ffffff;
118	116		border: none;
119		-	border-radius: var(--sequoia-border-radius, 8px);
	117	+	border-radius: var(--sequoia-border-radius, 15px);
120	118		font-size: 0.875rem;
121	119		font-weight: 500;
122	120		cursor: pointer;
123	121		text-decoration: none;
124	122		transition: background-color 0.15s ease;
	123	+	margin-left:10px;
125	124		}
126	125
127		-	.sequoia-reply-button:hover {
	126	+	.sequoia-reply-bluesky {
	127	+	background: var(--sequoia-accent-color, #2563eb);
	128	+	color: #ffffff;
	129	+	}
	130	+
	131	+	.sequoia-reply-blacksky {
	132	+	background: var(--sequoia-accent-color, #6060E9);
	133	+	color: #ffffff;
	134	+	}
	135	+
	136	+	.sequoia-reply-bluesky:hover {
128	137		background: color-mix(in srgb, var(--sequoia-accent-color, #2563eb) 85%, black);
	138	+	}
	139	+
	140	+	.sequoia-reply-blacksky:hover {
	141	+	background: color-mix(in srgb, var(--sequoia-accent-color, #5252c3) 85%, black);
129	142		}
130	143
131	144		.sequoia-reply-button svg {

548	561		}
549	562
550	563		/**
	564	+	* Build a Blacksky app URL for a post
	565	+	* @param {string} postUri - AT Protocol URI for the post
	566	+	* @returns {string} Blacksky app URL
	567	+	*/
	568	+	function buildBlackskyAppUrl(postUri) {
	569	+	const parsed = parseAtUri(postUri);
	570	+	if (!parsed) {
	571	+	throw new Error(`Invalid post URI: ${postUri}`);
	572	+	}
	573	+
	574	+	return `https://blacksky.community/profile/${parsed.did}/post/${parsed.rkey}`;
	575	+	}
	576	+
	577	+	/**
551	578		* Type guard for ThreadViewPost
552	579		* @param {any} post - Post to check
553	580		* @returns {boolean} True if post is a ThreadViewPost

563	590		const BLUESKY_ICON = `<svg class="sequoia-bsky-logo" viewBox="0 0 600 530" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
564	591		<path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"/>
565	592		</svg>`;
	593	+	const BLACKSKY_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.0620117 0.348442 87.9941 74.9653"><path d="M41.9565 74.9643L24.0161 74.9653L41.9565 74.9643ZM63.8511 74.9653H45.9097L63.8501 74.9643V57.3286H63.8511V74.9653ZM45.9097 44.5893C45.9099 49.2737 49.7077 53.0707 54.3921 53.0707H63.8501V57.3286H54.3921C49.7077 57.3286 45.9099 61.1257 45.9097 65.81V74.9643H41.9565V65.81C41.9563 61.1258 38.1593 57.3287 33.4751 57.3286H24.0161V53.0707H33.4741C38.1587 53.0707 41.9565 49.2729 41.9565 44.5883V35.1303H45.9097V44.5893ZM63.8511 53.0707H63.8501V35.1303H63.8511V53.0707Z" fill="white"></path><path d="M52.7272 9.83198C49.4148 13.1445 49.4148 18.5151 52.7272 21.8275L59.4155 28.5158L56.4051 31.5262L49.7169 24.8379C46.4044 21.5254 41.0338 21.5254 37.7213 24.8379L31.2482 31.3111L28.4527 28.5156L34.9259 22.0424C38.2383 18.7299 38.2383 13.3594 34.9259 10.0469L28.2378 3.35883L31.2482 0.348442L37.9365 7.03672C41.2489 10.3492 46.6195 10.3492 49.932 7.03672L56.6203 0.348442L59.4155 3.14371L52.7272 9.83198Z" fill="white"/><path d="M24.3831 23.2335C23.1706 27.7584 25.8559 32.4095 30.3808 33.6219L39.5172 36.07L38.4154 40.182L29.2793 37.734C24.7544 36.5215 20.1033 39.2068 18.8909 43.7317L16.5215 52.5745L12.7028 51.5513L15.0721 42.7088C16.2846 38.1839 13.5993 33.5328 9.07434 32.3204L-0.0620117 29.8723L1.03987 25.76L10.1762 28.2081C14.7011 29.4206 19.3522 26.7352 20.5647 22.2103L23.0127 13.074L26.8311 14.0971L24.3831 23.2335Z" fill="white"/><path d="M67.3676 22.0297C68.5801 26.5546 73.2311 29.2399 77.756 28.0275L86.8923 25.5794L87.9941 29.6914L78.8578 32.1394C74.3329 33.3519 71.6476 38.003 72.86 42.5279L75.2294 51.3707L71.411 52.3938L69.0417 43.5513C67.8293 39.0264 63.1782 36.3411 58.6533 37.5535L49.5169 40.0016L48.415 35.8894L57.5514 33.4413C62.0763 32.2288 64.7616 27.5778 63.5492 23.0528L61.1011 13.9165L64.9195 12.8934L67.3676 22.0297Z" fill="white"/></svg>';
566	594
567	595		// ============================================================================
568	596		// Web Component

660	688		}
661	689
662	690		const postUrl = buildBskyAppUrl(document.bskyPostRef.uri);
	691	+	const blackskyPostUrl = buildBlackskyAppUrl(document.bskyPostRef.uri);
663	692
664	693		// Fetch the post thread
665	694		const thread = await getPostThread(document.bskyPostRef.uri, this.depth);

667	696		// Check if there are any replies
668	697		const replies = thread.replies?.filter(isThreadViewPost) ?? [];
669	698		if (replies.length === 0) {
670		-	this.state = { type: "empty", postUrl };
	699	+	this.state = { type: "empty", postUrl, blackskyPostUrl };
671	700		this.render();
672	701		return;
673	702		}
674	703
675		-	this.state = { type: "loaded", thread, postUrl };
	704	+	this.state = { type: "loaded", thread, postUrl, blackskyPostUrl };
676	705		this.render();
677	706		} catch (error) {
678	707		const message =

716	745		this.commentsContainer.innerHTML = `
717	746		<div class="sequoia-comments-header">
718	747		<h3 class="sequoia-comments-title">Comments</h3>
719		-	<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
720		-	${BLUESKY_ICON}
721		-	Reply on Bluesky
722		-	</a>
	748	+	<div>
	749	+	<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
	750	+	${BLUESKY_ICON}
	751	+	</a>
	752	+	<a href="${this.state.blackskyPostUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky">
	753	+	${BLACKSKY_ICON}
	754	+	</a>
	755	+	</div>
723	756		</div>
724	757		<div class="sequoia-empty">
725	758		No comments yet. Be the first to reply on Bluesky!

746	779		this.commentsContainer.innerHTML = `
747	780		<div class="sequoia-comments-header">
748	781		<h3 class="sequoia-comments-title">${commentCount} Comment${commentCount !== 1 ? "s" : ""}</h3>
749		-	<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button">
750		-	${BLUESKY_ICON}
751		-	Reply on Bluesky
752		-	</a>
	782	+	<div>
	783	+	<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
	784	+	${BLUESKY_ICON}
	785	+	</a>
	786	+	<a href="${this.state.blackskyPostUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky">
	787	+	${BLACKSKY_ICON}
	788	+	</a>
	789	+	</div>
753	790		</div>
754	791		<div class="sequoia-comments-list">
755	792		${threadsHtml}