bsky-comments 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Florian Schepp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,241 @@
+# bsky-comments
+
+A **zero-dependency Web Component** to embed Bluesky discussion threads on any website.
+
+- **Lightweight:** < 2kb (gzipped). No heavy SDKs.
+- **Universal:** Works with any framework — React, Vue, Svelte, Astro, or just plain HTML.
+- **Styleable:** Renders Light DOM (not Shadow DOM) for easy styling via CSS/Tailwind.
+
+## Why bsky-comments?
+
+Most Bluesky embed libraries fall into two categories: **React Wrappers** (which bundle the heavy official SDK) or **Shadow DOM Widgets** (which are hard to style).
+
+**bsky-comments is different:**
+
+| Feature | bsky-comments | Typical React Library | Standard Web Component |
+| :------ | :------------ | :-------------------- | :--------------------- |
+| **Input** | **Public URL** OR **AT-URI** | **AT-URI** Only | **AT-URI** Only |
+| **Styling** | **Light DOM** (Use Tailwind/CSS) | CSS Modules / Props | **Shadow DOM** (Locked) |
+| **Engine** | **Native Fetch** (<2kb) | **@atproto/api** (~60kb) | **Lit / Stencil** (~15kb) |
+| **Frameworks** | **All** (Universal) | React Only | All |
+
+### Key Differentiators
+
+1. **Dual Input Modes:**
+   - **Easy Mode:** Just paste the public `https://bsky.app/...` link. We handle the handle resolution automatically.
+   - **Direct Mode:** Pass the `at://did:plc...` URI to skip resolution for maximum performance (great for static builds).
+
+2. **Headless / Light DOM:**
+   We do not use Shadow DOM. This means your global CSS, **Tailwind classes**, and font settings apply immediately to the comments. No fighting against style encapsulation.
+
+3. **Zero Dependencies:**
+   We don't bundle the official AT Protocol SDK. We use lightweight, native HTTP requests to fetch only the data needed to render the thread.
+
+## Installation
+
+### npm / pnpm / yarn
+
+```bash
+npm install bsky-comments
+```
+
+### CDN (No Build Step)
+
+Drop this into any HTML page — no bundler required:
+
+```html
+<script type="module" src="https://unpkg.com/bsky-comments"></script>
+
+<bsky-comments post="https://bsky.app/profile/me.bsky.social/post/3lwt25ajsic2k"></bsky-comments>
+```
+
+## Usage
+
+### Option 1: The Easy Way (Web Link)
+
+Just copy the URL from your browser address bar. The component handles the resolution automatically.
+
+```html
+<bsky-comments
+  post="https://bsky.app/profile/me.bsky.social/post/3lwt25ajsic2k"
+></bsky-comments>
+```
+
+### Option 2: The Direct Way (AT-URI)
+
+If you are generating your site programmatically (e.g. Astro/Next.js) and already know the DID, use the URI to skip the resolution step for maximum performance.
+
+```html
+<bsky-comments
+  uri="at://did:plc:vb7cn66.../app.bsky.feed.post/3lwt25ajsic2k"
+></bsky-comments>
+```
+
+## Customizing Icons
+
+You can customize the Like and Reply icons in two ways:
+
+### 1. Via Attributes (SVG or Emoji)
+
+You can pass raw strings (or even SVG code) directly into the attributes.
+
+```html
+<bsky-comments
+  post="..."
+  icon-like="💙"
+  icon-reply="↩️"
+></bsky-comments>
+
+<!-- Using SVGs -->
+<bsky-comments
+  post="..."
+  icon-like='<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="..."/></svg>'
+></bsky-comments>
+```
+
+### 2. Via CSS (Recommended)
+
+Since we wrap icons in specific classes, you can hide the default icon and use CSS/Tailwind to add your own via background-image or pseudo-elements.
+
+```css
+/* Hide default text/emoji */
+.bsky-icon-like {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: transparent; /* Hide the emoji */
+  background-image: url('/heart-icon.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+```
+
+## API Reference
+
+| Attribute | Type | Default | Description |
+| :-------- | :--- | :------ | :---------- |
+| `post` | string | `null` | The public web URL (e.g., `https://bsky.app/...`). The component will automatically resolve the handle to a DID. |
+| `uri` | string | `null` | The internal AT-URI (e.g., `at://did:plc:...`). If provided, this takes precedence over `post`. |
+| `sort` | string | `asc` | Sort order for comments: `asc` (oldest first) or `desc` (newest first). |
+| `service` | string | `public.api.bsky.app` | The PDS endpoint. Use this for self-hosted instances. |
+| `icon-like` | string | `❤️` | Custom HTML/Text for the Like icon. |
+| `icon-reply` | string | `💬` | Custom HTML/Text for the Reply icon. |
+
+## Styling Reference
+
+This component renders **Semantic HTML** in the Light DOM. You can style it using standard CSS or Tailwind.
+
+### HTML Structure
+
+```html
+<div class="bsky-container">
+  <div class="bsky-header">
+    <span>Discussion found on <a>Bluesky</a></span>
+    <a class="bsky-reply-link">Reply to join discussion</a>
+  </div>
+  <div class="bsky-comment">
+    <div class="bsky-comment-header">
+      <img class="bsky-avatar" src="..." />
+      <div class="bsky-meta">
+        <a class="bsky-author">Display Name</a>
+        <span class="bsky-handle">@handle.bsky.social</span>
+        <a class="bsky-date">· Jan 5, 2026</a>
+      </div>
+    </div>
+    <div class="bsky-body">
+      <p>Comment text...</p>
+    </div>
+    <div class="bsky-actions">
+      <span class="bsky-like">
+        <span class="bsky-icon bsky-icon-like">❤️</span>
+        <span class="bsky-count">12</span>
+      </span>
+      <span class="bsky-reply">
+        <span class="bsky-icon bsky-icon-reply">💬</span>
+        <span class="bsky-count">2</span>
+      </span>
+    </div>
+
+    <!-- Nested Replies -->
+    <div class="bsky-replies">
+      <div class="bsky-comment">...</div>
+    </div>
+  </div>
+</div>
+```
+
+### Tailwind Example
+
+```html
+<div class="
+  [&_.bsky-comment]:border-l-2 [&_.bsky-comment]:border-gray-200 [&_.bsky-comment]:pl-4 [&_.bsky-comment]:mb-4
+  [&_.bsky-actions]:text-sm [&_.bsky-actions]:text-gray-500 [&_.bsky-actions]:flex [&_.bsky-actions]:gap-4
+">
+  <bsky-comments post="..." />
+</div>
+```
+
+## Framework Integration
+
+### React / Next.js
+
+```tsx
+import 'bsky-comments';
+
+export function BlogPost() {
+  return (
+    <div className="comments-section">
+      <bsky-comments post="https://bsky.app/profile/..." />
+    </div>
+  );
+}
+```
+
+### Vue / Nuxt
+
+```vue
+<script setup>
+import 'bsky-comments';
+</script>
+
+<template>
+  <bsky-comments :post="currentUrl" />
+</template>
+```
+
+### Svelte / SvelteKit
+
+```svelte
+<script>
+  import 'bsky-comments';
+</script>
+
+<bsky-comments post="https://bsky.app/profile/..." />
+```
+
+### Astro
+
+```astro
+---
+import 'bsky-comments';
+---
+
+<bsky-comments post="https://bsky.app/profile/..." />
+```
+
+Or use the CDN approach without an import:
+
+```astro
+---
+---
+
+<bsky-comments post="https://bsky.app/profile/..." />
+
+<script>
+  import 'bsky-comments';
+</script>
+```
+
+## License
+
+MIT

package/dist/bsky-comments.d.ts

@@ -0,0 +1,53 @@
+/**
+ * <bsky-comments> Web Component
+ */
+export declare class BskyComments extends HTMLElement {
+    private _post;
+    private _uri;
+    private _service;
+    private _iconLike;
+    private _iconReply;
+    private _sortOrder;
+    private _depth;
+    private _data;
+    private _loading;
+    private _error;
+    private _connected;
+    private _abortController;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private init;
+    private resolveUrlToUri;
+    private fetchThread;
+    private escapeHtml;
+    private renderRichText;
+    private formatDate;
+    private sortReplies;
+    private renderComment;
+    private render;
+}
+export interface BskyCommentsAttributes {
+    post?: string;
+    uri?: string;
+    sort?: 'asc' | 'desc';
+    service?: string;
+    'icon-like'?: string;
+    'icon-reply'?: string;
+    depth?: number | string;
+    children?: unknown;
+    class?: string;
+    id?: string;
+    style?: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bsky-comments': BskyComments;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'bsky-comments': BskyCommentsAttributes;
+        }
+    }
+}

package/dist/bsky-comments.js

@@ -0,0 +1,187 @@
+var u = Object.defineProperty;
+var _ = (d, l, e) => l in d ? u(d, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[l] = e;
+var o = (d, l, e) => _(d, typeof l != "symbol" ? l + "" : l, e);
+const m = "https://public.api.bsky.app/xrpc";
+class v extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    o(this, "_post", null);
+    o(this, "_uri", null);
+    o(this, "_service", m);
+    o(this, "_iconLike", "❤️");
+    o(this, "_iconReply", "💬");
+    o(this, "_sortOrder", "asc");
+    o(this, "_depth", 10);
+    o(this, "_data", null);
+    o(this, "_loading", !1);
+    o(this, "_error", null);
+    o(this, "_connected", !1);
+    o(this, "_abortController", null);
+  }
+  static get observedAttributes() {
+    return ["post", "uri", "service", "icon-like", "icon-reply", "sort", "depth"];
+  }
+  attributeChangedCallback(e, s, t) {
+    if (s !== t) {
+      switch (e) {
+        case "post":
+          this._post = t;
+          break;
+        case "uri":
+          this._uri = t;
+          break;
+        case "service":
+          this._service = t || m;
+          break;
+        case "icon-like":
+          this._iconLike = t || "❤️";
+          break;
+        case "icon-reply":
+          this._iconReply = t || "💬";
+          break;
+        case "sort":
+          this._sortOrder = t === "desc" ? "desc" : "asc";
+          break;
+        case "depth":
+          this._depth = Math.max(1, parseInt(t, 10) || 10);
+          break;
+      }
+      this._connected && (["post", "uri", "service"].includes(e) ? (this._post || this._uri) && this.init() : this.render());
+    }
+  }
+  connectedCallback() {
+    this._connected = !0, (this._post || this._uri) && this.init();
+  }
+  disconnectedCallback() {
+    var e;
+    this._connected = !1, (e = this._abortController) == null || e.abort(), this._abortController = null;
+  }
+  async init() {
+    var s;
+    (s = this._abortController) == null || s.abort(), this._abortController = new AbortController();
+    const { signal: e } = this._abortController;
+    this._loading = !0, this._error = null, this.render();
+    try {
+      let t = this._uri;
+      if (!t && this._post && (t = await this.resolveUrlToUri(this._post, e)), e.aborted) return;
+      t ? await this.fetchThread(t, e) : this._data = null;
+    } catch (t) {
+      if (e.aborted) return;
+      this._error = t.message;
+    } finally {
+      e.aborted || (this._loading = !1, this.render());
+    }
+  }
+  async resolveUrlToUri(e, s) {
+    const t = e.match(/profile\/([^\/]+)\/post\/([^\/]+)/);
+    if (!t) throw new Error("Invalid Bluesky URL");
+    const [, r, i] = t;
+    if (r.startsWith("did:")) return `at://${r}/app.bsky.feed.post/${i}`;
+    const n = await fetch(`${this._service}/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(r)}`, { signal: s });
+    if (!n.ok) throw new Error("Could not resolve handle");
+    const p = await n.json();
+    if (!p.did) throw new Error("No DID found");
+    return `at://${p.did}/app.bsky.feed.post/${i}`;
+  }
+  async fetchThread(e, s) {
+    var i;
+    const t = await fetch(`${this._service}/app.bsky.feed.getPostThread?uri=${encodeURIComponent(e)}&depth=${this._depth}`, { signal: s });
+    if (!t.ok) throw new Error("Failed to fetch thread");
+    const r = await t.json();
+    ((i = r.thread) == null ? void 0 : i.$type) === "app.bsky.feed.defs#threadViewPost" ? this._data = r.thread : this._data = null;
+  }
+  escapeHtml(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
+  renderRichText(e) {
+    const { text: s, facets: t } = e;
+    if (!t || t.length === 0) return this.escapeHtml(s);
+    const r = new TextEncoder(), i = new TextDecoder(), n = r.encode(s), p = [...t].sort((y, h) => y.index.byteStart - h.index.byteStart);
+    let c = "", f = 0;
+    for (const y of p) {
+      const { byteStart: h, byteEnd: k } = y.index;
+      if (h < f || k > n.length) continue;
+      c += this.escapeHtml(i.decode(n.slice(f, h)));
+      const b = this.escapeHtml(i.decode(n.slice(h, k))), a = y.features[0];
+      a ? a.$type === "app.bsky.richtext.facet#link" && a.uri ? c += `<a href="${this.escapeHtml(a.uri)}" target="_blank" rel="noopener noreferrer">${b}</a>` : a.$type === "app.bsky.richtext.facet#mention" && a.did ? c += `<a href="https://bsky.app/profile/${encodeURIComponent(a.did)}" target="_blank" rel="noopener noreferrer">${b}</a>` : a.$type === "app.bsky.richtext.facet#tag" && a.tag ? c += `<a href="https://bsky.app/hashtag/${encodeURIComponent(a.tag)}" target="_blank" rel="noopener noreferrer">${b}</a>` : c += b : c += b, f = k;
+    }
+    return c += this.escapeHtml(i.decode(n.slice(f))), c;
+  }
+  formatDate(e) {
+    return "· " + new Date(e).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+  }
+  sortReplies(e) {
+    return [...e].sort((s, t) => {
+      const r = new Date(s.post.indexedAt).getTime(), i = new Date(t.post.indexedAt).getTime();
+      return this._sortOrder === "asc" ? r - i : i - r;
+    });
+  }
+  renderComment(e) {
+    if (!e.post) return "";
+    const { post: s, replies: t } = e, r = s.uri.split("/").pop() || "", i = `https://bsky.app/profile/${encodeURIComponent(s.author.handle)}/post/${encodeURIComponent(r)}`, n = t && t.length > 0 ? `<div class="bsky-replies">
+           ${this.sortReplies(t).map((p) => this.renderComment(p)).join("")}
+         </div>` : "";
+    return `
+      <div class="bsky-comment">
+        <div class="bsky-comment-header">
+          ${s.author.avatar ? `<img src="${this.escapeHtml(s.author.avatar)}" alt="${this.escapeHtml(s.author.handle)}" class="bsky-avatar" loading="lazy" />` : '<div class="bsky-avatar-placeholder"></div>'}
+          <div class="bsky-meta">
+            <a href="https://bsky.app/profile/${encodeURIComponent(s.author.handle)}" target="_blank" rel="noopener noreferrer" class="bsky-author">
+              ${this.escapeHtml(s.author.displayName || s.author.handle)}
+            </a>
+            <span class="bsky-handle">@${this.escapeHtml(s.author.handle)}</span>
+            <a href="${i}" target="_blank" rel="noopener noreferrer" class="bsky-date">
+              ${this.formatDate(s.indexedAt)}
+            </a>
+          </div>
+        </div>
+        <div class="bsky-body"><p>${this.renderRichText(s.record)}</p></div>
+        <div class="bsky-actions">
+          <span class="bsky-like"><span class="bsky-icon bsky-icon-like">${this._iconLike}</span>${s.likeCount ?? 0}</span>
+          <span class="bsky-reply"><span class="bsky-icon bsky-icon-reply">${this._iconReply}</span>${s.replyCount ?? 0}</span>
+        </div>
+        ${n}
+      </div>
+    `;
+  }
+  render() {
+    if (this._loading) {
+      this.innerHTML = '<div class="bsky-loading">Loading comments...</div>';
+      return;
+    }
+    if (this._error) {
+      this.innerHTML = `<div class="bsky-error">Error: ${this.escapeHtml(this._error)}</div>`;
+      return;
+    }
+    if (!this._uri && !this._post) {
+      this.innerHTML = "";
+      return;
+    }
+    if (!this._data) {
+      this.innerHTML = `
+        <div class="bsky-empty">
+          <p class="bsky-empty-text">No discussion found for this post.</p>
+        </div>
+      `;
+      return;
+    }
+    const e = `https://bsky.app/profile/${encodeURIComponent(this._data.post.author.handle)}/post/${encodeURIComponent(this._data.post.uri.split("/").pop() || "")}`, t = (this._data.replies ? this.sortReplies(this._data.replies) : []).map((r) => this.renderComment(r)).join("") || "";
+    this.innerHTML = `
+      <div class="bsky-container">
+        <div class="bsky-header">
+            <span class="bsky-header-text">
+                Discussion found on <a href="${e}" target="_blank" rel="noopener noreferrer">Bluesky</a>
+            </span>
+            <a href="${e}" target="_blank" rel="noopener noreferrer" class="bsky-reply-btn">
+                Reply to join discussion
+            </a>
+        </div>
+        ${t || '<div class="bsky-no-replies">No replies yet. Be the first to comment!</div>'}
+      </div>
+    `;
+  }
+}
+customElements.get("bsky-comments") || customElements.define("bsky-comments", v);
+export {
+  v as BskyComments
+};

package/dist/bsky-comments.umd.cjs

@@ -0,0 +1,40 @@
+(function(n,i){typeof exports=="object"&&typeof module<"u"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(n=typeof globalThis<"u"?globalThis:n||self,i(n.BskyComments=n.BskyComments||{}))})(this,function(n){"use strict";var k=Object.defineProperty;var _=(n,i,p)=>i in n?k(n,i,{enumerable:!0,configurable:!0,writable:!0,value:p}):n[i]=p;var a=(n,i,p)=>_(n,typeof i!="symbol"?i+"":i,p);const i="https://public.api.bsky.app/xrpc";class p extends HTMLElement{constructor(){super(...arguments);a(this,"_post",null);a(this,"_uri",null);a(this,"_service",i);a(this,"_iconLike","❤️");a(this,"_iconReply","💬");a(this,"_sortOrder","asc");a(this,"_depth",10);a(this,"_data",null);a(this,"_loading",!1);a(this,"_error",null);a(this,"_connected",!1);a(this,"_abortController",null)}static get observedAttributes(){return["post","uri","service","icon-like","icon-reply","sort","depth"]}attributeChangedCallback(t,s,e){if(s!==e){switch(t){case"post":this._post=e;break;case"uri":this._uri=e;break;case"service":this._service=e||i;break;case"icon-like":this._iconLike=e||"❤️";break;case"icon-reply":this._iconReply=e||"💬";break;case"sort":this._sortOrder=e==="desc"?"desc":"asc";break;case"depth":this._depth=Math.max(1,parseInt(e,10)||10);break}this._connected&&(["post","uri","service"].includes(t)?(this._post||this._uri)&&this.init():this.render())}}connectedCallback(){this._connected=!0,(this._post||this._uri)&&this.init()}disconnectedCallback(){var t;this._connected=!1,(t=this._abortController)==null||t.abort(),this._abortController=null}async init(){var s;(s=this._abortController)==null||s.abort(),this._abortController=new AbortController;const{signal:t}=this._abortController;this._loading=!0,this._error=null,this.render();try{let e=this._uri;if(!e&&this._post&&(e=await this.resolveUrlToUri(this._post,t)),t.aborted)return;e?await this.fetchThread(e,t):this._data=null}catch(e){if(t.aborted)return;this._error=e.message}finally{t.aborted||(this._loading=!1,this.render())}}async resolveUrlToUri(t,s){const e=t.match(/profile\/([^\/]+)\/post\/([^\/]+)/);if(!e)throw new Error("Invalid Bluesky URL");const[,r,o]=e;if(r.startsWith("did:"))return`at://${r}/app.bsky.feed.post/${o}`;const c=await fetch(`${this._service}/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(r)}`,{signal:s});if(!c.ok)throw new Error("Could not resolve handle");const h=await c.json();if(!h.did)throw new Error("No DID found");return`at://${h.did}/app.bsky.feed.post/${o}`}async fetchThread(t,s){var o;const e=await fetch(`${this._service}/app.bsky.feed.getPostThread?uri=${encodeURIComponent(t)}&depth=${this._depth}`,{signal:s});if(!e.ok)throw new Error("Failed to fetch thread");const r=await e.json();((o=r.thread)==null?void 0:o.$type)==="app.bsky.feed.defs#threadViewPost"?this._data=r.thread:this._data=null}escapeHtml(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}renderRichText(t){const{text:s,facets:e}=t;if(!e||e.length===0)return this.escapeHtml(s);const r=new TextEncoder,o=new TextDecoder,c=r.encode(s),h=[...e].sort((m,f)=>m.index.byteStart-f.index.byteStart);let d="",b=0;for(const m of h){const{byteStart:f,byteEnd:u}=m.index;if(f<b||u>c.length)continue;d+=this.escapeHtml(o.decode(c.slice(b,f)));const y=this.escapeHtml(o.decode(c.slice(f,u))),l=m.features[0];l?l.$type==="app.bsky.richtext.facet#link"&&l.uri?d+=`<a href="${this.escapeHtml(l.uri)}" target="_blank" rel="noopener noreferrer">${y}</a>`:l.$type==="app.bsky.richtext.facet#mention"&&l.did?d+=`<a href="https://bsky.app/profile/${encodeURIComponent(l.did)}" target="_blank" rel="noopener noreferrer">${y}</a>`:l.$type==="app.bsky.richtext.facet#tag"&&l.tag?d+=`<a href="https://bsky.app/hashtag/${encodeURIComponent(l.tag)}" target="_blank" rel="noopener noreferrer">${y}</a>`:d+=y:d+=y,b=u}return d+=this.escapeHtml(o.decode(c.slice(b))),d}formatDate(t){return"· "+new Date(t).toLocaleDateString(void 0,{month:"short",day:"numeric",year:"numeric"})}sortReplies(t){return[...t].sort((s,e)=>{const r=new Date(s.post.indexedAt).getTime(),o=new Date(e.post.indexedAt).getTime();return this._sortOrder==="asc"?r-o:o-r})}renderComment(t){if(!t.post)return"";const{post:s,replies:e}=t,r=s.uri.split("/").pop()||"",o=`https://bsky.app/profile/${encodeURIComponent(s.author.handle)}/post/${encodeURIComponent(r)}`,c=e&&e.length>0?`<div class="bsky-replies">
+           ${this.sortReplies(e).map(h=>this.renderComment(h)).join("")}
+         </div>`:"";return`
+      <div class="bsky-comment">
+        <div class="bsky-comment-header">
+          ${s.author.avatar?`<img src="${this.escapeHtml(s.author.avatar)}" alt="${this.escapeHtml(s.author.handle)}" class="bsky-avatar" loading="lazy" />`:'<div class="bsky-avatar-placeholder"></div>'}
+          <div class="bsky-meta">
+            <a href="https://bsky.app/profile/${encodeURIComponent(s.author.handle)}" target="_blank" rel="noopener noreferrer" class="bsky-author">
+              ${this.escapeHtml(s.author.displayName||s.author.handle)}
+            </a>
+            <span class="bsky-handle">@${this.escapeHtml(s.author.handle)}</span>
+            <a href="${o}" target="_blank" rel="noopener noreferrer" class="bsky-date">
+              ${this.formatDate(s.indexedAt)}
+            </a>
+          </div>
+        </div>
+        <div class="bsky-body"><p>${this.renderRichText(s.record)}</p></div>
+        <div class="bsky-actions">
+          <span class="bsky-like"><span class="bsky-icon bsky-icon-like">${this._iconLike}</span>${s.likeCount??0}</span>
+          <span class="bsky-reply"><span class="bsky-icon bsky-icon-reply">${this._iconReply}</span>${s.replyCount??0}</span>
+        </div>
+        ${c}
+      </div>
+    `}render(){if(this._loading){this.innerHTML='<div class="bsky-loading">Loading comments...</div>';return}if(this._error){this.innerHTML=`<div class="bsky-error">Error: ${this.escapeHtml(this._error)}</div>`;return}if(!this._uri&&!this._post){this.innerHTML="";return}if(!this._data){this.innerHTML=`
+        <div class="bsky-empty">
+          <p class="bsky-empty-text">No discussion found for this post.</p>
+        </div>
+      `;return}const t=`https://bsky.app/profile/${encodeURIComponent(this._data.post.author.handle)}/post/${encodeURIComponent(this._data.post.uri.split("/").pop()||"")}`,e=(this._data.replies?this.sortReplies(this._data.replies):[]).map(r=>this.renderComment(r)).join("")||"";this.innerHTML=`
+      <div class="bsky-container">
+        <div class="bsky-header">
+            <span class="bsky-header-text">
+                Discussion found on <a href="${t}" target="_blank" rel="noopener noreferrer">Bluesky</a>
+            </span>
+            <a href="${t}" target="_blank" rel="noopener noreferrer" class="bsky-reply-btn">
+                Reply to join discussion
+            </a>
+        </div>
+        ${e||'<div class="bsky-no-replies">No replies yet. Be the first to comment!</div>'}
+      </div>
+    `}}customElements.get("bsky-comments")||customElements.define("bsky-comments",p),n.BskyComments=p,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "bsky-comments",
+  "version": "1.0.0",
+  "description": "A zero-dependency Web Component to embed Bluesky discussion threads on any website.",
+  "type": "module",
+  "main": "./dist/bsky-comments.umd.cjs",
+  "module": "./dist/bsky-comments.js",
+  "types": "./dist/bsky-comments.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/bsky-comments.d.ts",
+      "import": "./dist/bsky-comments.js",
+      "require": "./dist/bsky-comments.umd.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "jsdom": "^28.1.0",
+    "typescript": "^5.2.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vitest": "^4.0.18"
+  },
+  "keywords": [
+    "web-component",
+    "bluesky",
+    "comments",
+    "at-protocol",
+    "social",
+    "embed",
+    "bsky"
+  ],
+  "license": "MIT",
+  "author": "Florian Schepp",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/florianschepp/bsky-comments.git"
+  },
+  "homepage": "https://github.com/florianschepp/bsky-comments#readme",
+  "bugs": {
+    "url": "https://github.com/florianschepp/bsky-comments/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test": "vitest run"
+  }
+}