nuxt-bluesky-comments 0.1.0

package/README.md

@@ -0,0 +1,163 @@
+# nuxt-bluesky-comments
+
+[![npm version](https://img.shields.io/npm/v/nuxt-bluesky-comments.svg)](https://www.npmjs.com/package/nuxt-bluesky-comments)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A Nuxt module to display Bluesky post comments on your website. Perfect for adding a comments section to your blog powered by Bluesky discussions.
+
+## Features
+
+- 🦋 Display comments from any public Bluesky post
+- 🎨 Customizable via CSS variables
+- 🌙 Dark mode support
+- 🧵 Smart thread flattening for same-author replies
+- 📊 Engagement stats (likes, reposts, replies)
+- ♾️ Full thread depth support
+- 📱 Responsive design
+- 🖼️ Avatar fallback with author initials
+
+## Quick Start
+
+```bash
+pnpm add nuxt-bluesky-comments
+```
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['nuxt-bluesky-comments'],
+});
+```
+
+```vue
+<BlueskyComments url="https://bsky.app/profile/user.bsky.social/post/abc123" />
+```
+
+## Installation
+
+```bash
+# pnpm
+pnpm add nuxt-bluesky-comments
+
+# npm
+npm install nuxt-bluesky-comments
+
+# yarn
+yarn add nuxt-bluesky-comments
+```
+
+## Props
+
+| Prop                       | Type      | Default | Description                                       |
+| -------------------------- | --------- | ------- | ------------------------------------------------- |
+| `url`                      | `string`  | -       | Bluesky web URL of the post                       |
+| `uri`                      | `string`  | -       | AT Protocol URI (alternative to url)              |
+| `limit`                    | `number`  | `5`     | Top-level comments shown initially                |
+| `flattenSameAuthorThreads` | `boolean` | `true`  | Keep consecutive same-author replies at one level |
+
+## Composable
+
+For custom implementations:
+
+```vue
+<script setup>
+const { loading, error, comments, stats, postUrl, refresh } = useBlueskyComments(
+  'https://bsky.app/profile/user.bsky.social/post/abc123'
+);
+</script>
+```
+
+**Returns:** `loading`, `error`, `comments`, `stats`, `postUrl`, `refresh()`
+
+## Styling
+
+### CSS Variables
+
+Text colors inherit from your page automatically. Configure these variables:
+
+| Variable        | Description                   | Light     | Dark                    |
+| --------------- | ----------------------------- | --------- | ----------------------- |
+| `--bsky-bg`     | Background (for thread lines) | `#ffffff` | `#0a0a0a`               |
+| `--bsky-border` | Border/divider color          | `#e5e5e5` | `rgba(255,255,255,0.1)` |
+| `--bsky-link`   | Link color                    | `#2563eb` | `#38bdf8`               |
+
+> **Important:** `--bsky-bg` must match your page background for thread lines to render correctly.
+
+### Example
+
+```css
+/* Light theme */
+.bluesky-comments-wrapper {
+  --bsky-bg: #ffffff;
+  --bsky-border: #e5e7eb;
+  --bsky-link: #2563eb;
+}
+
+/* Dark theme */
+.dark .bluesky-comments-wrapper {
+  --bsky-bg: #0a0a0a;
+  --bsky-border: rgba(255, 255, 255, 0.1);
+  --bsky-link: #38bdf8;
+}
+```
+
+### Inline Styles
+
+```vue
+<BlueskyComments
+  url="https://bsky.app/profile/user.bsky.social/post/abc123"
+  :style="{
+    '--bsky-bg': '#fafafa',
+    '--bsky-border': '#e5e5e5',
+    '--bsky-link': '#0284c7',
+  }"
+/>
+```
+
+## Thread Flattening
+
+Consecutive replies from the same author stay at one visual level:
+
+```
+UserA: "Great post!"
+  └─ UserB: "Thanks!"
+  └─ UserB: "Also wanted to add..."   ← Same level, not nested deeper
+  └─ UserB: "One more thing..."
+```
+
+## Blog Integration
+
+Add `blueskyUrl` to your frontmatter:
+
+```markdown
+---
+title: My Blog Post
+blueskyUrl: https://bsky.app/profile/user.bsky.social/post/abc123
+---
+```
+
+```vue
+<template>
+  <article>
+    <ContentRenderer :value="page" />
+    <BlueskyComments v-if="page.blueskyUrl" :url="page.blueskyUrl" />
+  </article>
+</template>
+```
+
+## Development
+
+```bash
+pnpm install       # Install dependencies
+pnpm dev:prepare   # Prepare development
+pnpm dev           # Run playground
+pnpm prepack       # Build module
+```
+
+## Credits
+
+Inspired by Emily Liu's blog post [Using Bluesky posts as blog comments](https://emilyliu.me/blog/comments) — the idea that Bluesky's open network could power comment sections across the web.
+
+## License
+
+MIT License © Patryk Tomczyk

package/dist/module.d.mts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from '../dist/runtime/types.js';
+export { ModuleOptions } from '../dist/runtime/types.js';
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-bluesky-comments",
+  "configKey": "blueskyComments",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,31 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImports } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-bluesky-comments",
+    configKey: "blueskyComments",
+    compatibility: {
+      nuxt: ">=3.0.0"
+    }
+  },
+  defaults: {
+    apiService: "https://public.api.bsky.app"
+  },
+  async setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false,
+      prefix: "",
+      global: true
+    });
+    addImports({
+      name: "useBlueskyComments",
+      as: "useBlueskyComments",
+      from: resolver.resolve("./runtime/composables/useBlueskyComments")
+    });
+    nuxt.options.build.transpile.push("@atproto/api");
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/BlueskyComment.d.vue.ts

@@ -0,0 +1,14 @@
+import type { FlattenedComment } from "../types.js";
+type __VLS_Props = {
+    comment: FlattenedComment;
+    depth?: number;
+    parentAuthorDid?: string;
+    /**
+     * True when this comment is the last *indented* sibling at its depth.
+     * Used to visually terminate the parent thread line (so it doesn't look like it continues).
+     */
+    isLastSibling?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/BlueskyComment.vue

@@ -0,0 +1,388 @@
+<script setup>
+import { ref, computed, provide, inject } from "vue";
+const props = defineProps({
+  comment: { type: Object, required: true },
+  depth: { type: Number, required: false, default: 0 },
+  parentAuthorDid: { type: String, required: false },
+  isLastSibling: { type: Boolean, required: false, default: false }
+});
+const collapsed = ref(false);
+const avatarError = ref(false);
+function handleAvatarError() {
+  avatarError.value = true;
+}
+const avatarLetter = computed(() => {
+  const handle = props.comment.author.handle || props.comment.author.displayName || "?";
+  return handle.charAt(0).toUpperCase();
+});
+const isSameAuthor = computed(
+  () => props.parentAuthorDid === props.comment.author.did
+);
+const shouldIndent = computed(() => props.depth > 0 && !isSameAuthor.value);
+const HIDE_GLOBE_FOR_HANDLE_SUFFIXES = [".bsky.social"];
+const shouldShowHandleGlobe = computed(() => {
+  const handle = props.comment.author.handle?.toLowerCase() ?? "";
+  return !HIDE_GLOBE_FOR_HANDLE_SUFFIXES.some(
+    (suffix) => handle.endsWith(suffix)
+  );
+});
+const hasReplies = computed(
+  () => props.comment.replies && props.comment.replies.length > 0
+);
+const isNested = computed(() => props.depth > 0 && shouldIndent.value);
+const replyItems = computed(() => {
+  const replies = props.comment.replies || [];
+  let lastIndentedIndex = -1;
+  for (let i = replies.length - 1; i >= 0; i -= 1) {
+    const reply = replies[i];
+    if (reply && reply.author.did !== props.comment.author.did) {
+      lastIndentedIndex = i;
+      break;
+    }
+  }
+  return replies.map((reply, index) => ({
+    reply,
+    isLastIndentedSibling: index === lastIndentedIndex && reply.author.did !== props.comment.author.did
+  }));
+});
+const isMainBranchHovered = ref(false);
+const parentHoverState = inject(
+  "parentThreadState",
+  null
+);
+if (hasReplies.value) {
+  provide("parentThreadState", {
+    isHovered: isMainBranchHovered,
+    toggleCollapse
+  });
+}
+const isConnectedHovered = computed(() => {
+  if (isNested.value && parentHoverState) {
+    return parentHoverState.isHovered.value;
+  }
+  return isMainBranchHovered.value;
+});
+function countAllReplies(comment) {
+  let count = comment.replies?.length || 0;
+  for (const reply of comment.replies || []) {
+    count += countAllReplies(reply);
+  }
+  return count;
+}
+const totalNestedReplies = computed(() => countAllReplies(props.comment));
+function toggleCollapse() {
+  collapsed.value = !collapsed.value;
+}
+function handleConnectionClick() {
+  if (parentHoverState) {
+    parentHoverState.toggleCollapse();
+  }
+}
+const shouldCutParentThreadLine = computed(() => {
+  return isNested.value && props.isLastSibling;
+});
+function formatRelativeTime(dateString) {
+  const date = new Date(dateString);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1e3);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+  const diffYears = Math.floor(diffDays / 365);
+  if (diffYears > 0) return `${diffYears}y`;
+  if (diffMonths > 0) return `${diffMonths}mo`;
+  if (diffWeeks > 0) return `${diffWeeks}w`;
+  if (diffDays > 0) return `${diffDays}d`;
+  if (diffHours > 0) return `${diffHours}h`;
+  if (diffMins > 0) return `${diffMins}m`;
+  return "now";
+}
+function getCommentUrl(comment) {
+  const match = comment.uri.match(
+    /at:\/\/([^/]+)\/app\.bsky\.feed\.post\/([^/?#]+)/
+  );
+  if (!match) return "";
+  const [, did, rkey] = match;
+  const identifier = comment.author.handle || did;
+  return `https://bsky.app/profile/${identifier}/post/${rkey}`;
+}
+const commentUrl = getCommentUrl(props.comment);
+const relativeTime = formatRelativeTime(props.comment.createdAt);
+</script>
+
+<template>
+  <div class="bsky-comment" :class="{ 'nested': isNested }">
+    <!-- Connection line from nested comment to main branch - overlays without causing indentation -->
+    <div
+      v-if="isNested"
+      class="connection-line-wrapper"
+      @click="handleConnectionClick"
+      @mouseenter="() => {
+  if (parentHoverState) parentHoverState.isHovered.value = true;
+}"
+      @mouseleave="() => {
+  if (parentHoverState) parentHoverState.isHovered.value = false;
+}"
+    >
+      <svg
+        class="connection-svg"
+        :class="{ 'hovered': isConnectedHovered }"
+        width="100%"
+        height="100%"
+        viewBox="0 0 29 32"
+        preserveAspectRatio="none"
+      >
+        <!-- Rounded "L" connector (vertical + horizontal) with avatar-like corner radius -->
+        <!-- Kept within avatar height (32px) so it never goes above the avatar -->
+        <!-- Use a true quarter-circle arc for the elbow (radius = 16px) -->
+        <!-- SVG width is tuned so the horizontal segment ends exactly at the avatar's left edge -->
+        <!-- Inset by 1px to avoid stroke clipping (keeps thickness consistent with 2px rails) -->
+        <path
+          d="M 1 1 V 15 A 16 16 0 0 0 17 31"
+          fill="none"
+          :stroke="isConnectedHovered ? '#2563eb' : '#d1d5db'"
+          stroke-width="2"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+
+    <!-- Mask to terminate the parent thread line for the last sibling at this depth -->
+    <div v-if="shouldCutParentThreadLine" class="thread-line-cut" aria-hidden="true" />
+
+    <div class="comment-row">
+      <!-- Grid column 1: avatar -->
+      <div class="avatar-cell">
+        <a
+          :href="`https://bsky.app/profile/${comment.author.handle}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="avatar-link"
+        >
+          <img
+            v-if="comment.author.avatar && !avatarError"
+            :src="comment.author.avatar"
+            :alt="`${comment.author.displayName || comment.author.handle}'s avatar`"
+            class="avatar-img"
+            @error="handleAvatarError"
+          />
+          <div v-else class="avatar-placeholder">
+            <span class="avatar-letter">{{ avatarLetter }}</span>
+          </div>
+        </a>
+      </div>
+
+      <!-- Grid column 1: rail spans below avatar -->
+      <div v-if="hasReplies" class="thread-line-wrapper" aria-hidden="true">
+        <div
+          v-if="!collapsed"
+          class="thread-line"
+          :class="{ 'hovered': isMainBranchHovered }"
+          @click="toggleCollapse"
+          @mouseenter="isMainBranchHovered = true"
+          @mouseleave="isMainBranchHovered = false"
+        />
+      </div>
+
+      <!-- Grid column 1: toggle button in the SAME grid row as stats-row -->
+      <button
+        v-if="hasReplies"
+        class="thread-toggle-btn"
+        :class="{ 'collapsed': collapsed }"
+        :title="collapsed ? 'Expand replies' : 'Collapse replies'"
+        @click="toggleCollapse"
+      >
+        <svg
+          v-if="collapsed"
+          class="toggle-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+        </svg>
+        <svg
+          v-else
+          class="toggle-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />
+        </svg>
+      </button>
+
+      <!-- Grid column 2: author -->
+      <div class="author-row">
+        <div class="author-meta">
+          <a
+            :href="`https://bsky.app/profile/${comment.author.handle}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="author-name"
+          >
+            {{ comment.author.displayName || comment.author.handle }}
+          </a>
+          <div class="author-handle-row">
+            <a
+              :href="`https://bsky.app/profile/${comment.author.handle}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="author-handle"
+            >
+              @{{ comment.author.handle }}
+            </a>
+            <a
+              v-if="shouldShowHandleGlobe"
+              class="author-handle-site"
+              :href="`https://${comment.author.handle}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              :aria-label="`Open ${comment.author.handle} website`"
+              :title="`Open website of ${comment.author.handle}`"
+            >
+              <svg
+                class="globe-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9-9 4.03-9 9 4.03 9 9 9z"
+                />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.6 9h16.8" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.6 15h16.8" />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 3c2.2 2.7 3.5 5.7 3.5 9s-1.3 6.3-3.5 9c-2.2-2.7-3.5-5.7-3.5-9S9.8 5.7 12 3z"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <a
+          :href="commentUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="timestamp"
+          :title="new Date(comment.createdAt).toLocaleString()"
+        >
+          {{ relativeTime }}
+        </a>
+      </div>
+
+      <!-- Grid column 2: text -->
+      <div class="comment-text">
+        {{ comment.text }}
+      </div>
+
+      <!-- Grid column 2: stats (link to this comment on Bluesky) -->
+      <a
+        class="stats-row stats-row-link"
+        :href="commentUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Open this comment on Bluesky to reply"
+        title="Open this comment on Bluesky to reply"
+      >
+        <span class="stat">
+          <svg
+            class="stat-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              d="M12 21l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.18L12 21z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          {{ comment.likeCount }}
+        </span>
+        <span class="stat">
+          <svg
+            class="stat-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M17 1l4 4-4 4M21 5H10a4 4 0 00-4 4v1"
+            />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M7 23l-4-4 4-4M3 19h11a4 4 0 004-4v-1"
+            />
+          </svg>
+          {{ comment.repostCount }}
+        </span>
+        <span class="stat">
+          <svg
+            class="stat-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          {{ comment.replyCount }}
+        </span>
+        <svg
+          class="stats-link-indicator"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M7 17L17 7" />
+          <path stroke-linecap="round" stroke-linejoin="round" d="M10 7h7v7" />
+        </svg>
+      </a>
+
+      <!-- Grid column 2: collapsed indicator -->
+      <div v-if="collapsed && hasReplies" class="collapsed-info">
+        <button class="collapsed-link" @click="toggleCollapse">
+          {{ totalNestedReplies }} more {{ totalNestedReplies === 1 ? "reply" : "replies" }}
+        </button>
+      </div>
+
+      <!-- Grid column 2: replies -->
+      <div v-if="!collapsed && hasReplies" class="replies-list">
+        <BlueskyComment
+          v-for="item in replyItems"
+          :key="item.reply.id"
+          :comment="item.reply"
+          :depth="depth + 1"
+          :parent-author-did="comment.author.did"
+          :is-last-sibling="item.isLastIndentedSibling"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bsky-comment{padding-top:8px;position:relative;--bsky-avatar-size:32px;--bsky-avatar-center:16px;--bsky-connector-top:0px}.bsky-comment.nested{padding-top:12px}.bsky-comment.nested .comment-row{margin-left:-9px}.comment-row{align-items:start;-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto auto auto auto}.avatar-cell{display:flex;grid-column:1;grid-row:1;justify-content:center}.author-row{grid-column:2;grid-row:1}.comment-text{grid-column:2;grid-row:2}.stats-row{grid-column:2;grid-row:3}.collapsed-info{grid-column:2;grid-row:4}.replies-list{grid-column:2;grid-row:5}.avatar-link{color:inherit;display:block;flex-shrink:0;text-decoration:none}.avatar-img{-o-object-fit:cover;object-fit:cover}.avatar-img,.avatar-placeholder{background:var(--bsky-border,#e5e5e5);border-radius:50%;height:32px;width:32px}.avatar-placeholder{align-items:center;display:flex;justify-content:center}.avatar-letter{color:inherit;font-size:14px;font-weight:500;line-height:1;text-transform:uppercase}.thread-line-wrapper{align-self:stretch;display:flex;grid-column:1;grid-row:2/6;justify-content:center;margin-top:4px}.thread-line{background:#d1d5db;border-radius:1px;cursor:pointer;height:100%;min-height:20px;transition:background-color .15s;width:2px}.thread-line.hovered,.thread-line:hover{background:#2563eb}.connection-line-wrapper{cursor:pointer;height:var(--bsky-avatar-size);left:-27px;overflow:visible;pointer-events:all;position:absolute;top:var(--bsky-connector-top);width:29px;z-index:1}.thread-line-cut{background:var(--bsky-bg,#fff);border-radius:999px;bottom:0;left:-25px;pointer-events:none;position:absolute;top:calc(var(--bsky-connector-top) + var(--bsky-avatar-center));transform:translateX(-50%);width:14px;z-index:0}.connection-svg{display:block;height:100%;overflow:visible;pointer-events:all;transition:opacity .15s;width:100%}.connection-svg path{transition:stroke .15s}.thread-toggle-btn{align-items:center;align-self:center;background:transparent;border:1px solid var(--bsky-toggle-border,rgba(17,24,39,.18));border-radius:50%;box-shadow:0 0 0 2px var(--bsky-bg,#fff),0 2px 8px rgba(0,0,0,.18);color:var(--bsky-toggle-icon,#111827);cursor:pointer;display:flex;grid-column:1;grid-row:3;height:22px;isolation:isolate;justify-content:center;justify-self:center;position:relative;transition:all .15s;width:22px;z-index:2}.thread-toggle-btn:before{background:var(--bsky-bg,#fff);z-index:-2}.thread-toggle-btn:after,.thread-toggle-btn:before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.thread-toggle-btn:after{background:var(--bsky-toggle-surface,rgba(229,231,235,.85));z-index:-1}.thread-toggle-btn:hover{--bsky-toggle-surface:rgba(37,99,235,.95);--bsky-toggle-border:hsla(0,0%,100%,.85);--bsky-toggle-icon:#fff}.thread-toggle-btn.collapsed{--bsky-toggle-surface:rgba(219,234,254,.75);--bsky-toggle-border:rgba(37,99,235,.28);--bsky-toggle-icon:#2563eb}.thread-toggle-btn.collapsed:hover{--bsky-toggle-surface:rgba(37,99,235,.95);--bsky-toggle-border:hsla(0,0%,100%,.85);--bsky-toggle-icon:#fff}.toggle-icon{height:14px;width:14px}.content-column{flex:1;min-width:0}.author-row{align-items:flex-start;display:flex;font-size:14px;gap:10px;justify-content:space-between;line-height:20px}.author-meta{display:flex;flex-direction:column;min-width:0}.author-name{color:inherit;font-weight:500}.author-name:hover{text-decoration:underline}.author-handle{color:inherit;font-size:12px;line-height:14px;opacity:.6;text-decoration:none}.author-handle-row{align-items:center;display:flex;gap:6px}.author-handle-site{align-items:center;color:inherit;display:inline-flex;justify-content:center;opacity:.5;text-decoration:none}.author-handle-site:hover{color:var(--bsky-link,#2563eb)}.globe-icon{height:12px;width:12px}.author-handle:hover{color:var(--bsky-link,#2563eb);text-decoration:underline}.timestamp{color:inherit;opacity:.6}.timestamp:hover{color:var(--bsky-link,#2563eb);text-decoration:underline}.comment-text{color:inherit;font-size:14px;line-height:20px;margin-top:4px;opacity:.85;white-space:pre-wrap;word-break:break-word}.stats-row{align-items:center;color:inherit;display:flex;font-size:12px;gap:12px;margin-top:6px;min-height:18px;opacity:.6}.stats-row-link{text-decoration:none}.stats-row-link:hover{color:var(--bsky-link,#2563eb)}.stats-link-indicator{height:14px;margin-left:2px;opacity:.65;width:14px}.stats-row-link:hover .stats-link-indicator{opacity:1}.stat{align-items:center;display:flex;gap:4px}.stat-icon{height:14px;width:14px}.collapsed-info{margin-top:4px}.collapsed-link{background:none;border:none;color:var(--bsky-link,#2563eb);cursor:pointer;font-size:12px;padding:0}.collapsed-link:hover{text-decoration:underline}.replies-list{margin-top:0}.dark .thread-toggle-btn,.dark-theme .thread-toggle-btn,:root.dark .thread-toggle-btn{--bsky-toggle-surface:rgba(55,65,81,.82);--bsky-toggle-border:hsla(0,0%,100%,.14);--bsky-toggle-icon:#e5e7eb}.dark .thread-toggle-btn:hover,.dark-theme .thread-toggle-btn:hover,:root.dark .thread-toggle-btn:hover{--bsky-toggle-surface:rgba(59,130,246,.95);--bsky-toggle-border:hsla(0,0%,100%,.85);--bsky-toggle-icon:#fff}.dark .thread-toggle-btn.collapsed,.dark-theme .thread-toggle-btn.collapsed,:root.dark .thread-toggle-btn.collapsed{--bsky-toggle-surface:rgba(30,58,95,.75);--bsky-toggle-border:rgba(96,165,250,.35);--bsky-toggle-icon:#60a5fa}.dark .thread-line,.dark-theme .thread-line,:root.dark .thread-line{background:#4b5563}.dark .thread-line.hovered,.dark .thread-line:hover,.dark-theme .thread-line.hovered,.dark-theme .thread-line:hover,:root.dark .thread-line.hovered,:root.dark .thread-line:hover{background:#3b82f6}.dark .connection-line,.dark-theme .connection-line,:root.dark .connection-line{background:#4b5563}.dark .connection-line.hovered,.dark .connection-line:hover,.dark-theme .connection-line.hovered,.dark-theme .connection-line:hover,:root.dark .connection-line.hovered,:root.dark .connection-line:hover{background:#3b82f6}.dark .connection-svg path,.dark-theme .connection-svg path,:root.dark .connection-svg path{stroke:#4b5563}.dark .connection-svg.hovered path,.dark-theme .connection-svg.hovered path,:root.dark .connection-svg.hovered path{stroke:#3b82f6}
+</style>

package/dist/runtime/components/BlueskyComment.vue.d.ts

@@ -0,0 +1,14 @@
+import type { FlattenedComment } from "../types.js";
+type __VLS_Props = {
+    comment: FlattenedComment;
+    depth?: number;
+    parentAuthorDid?: string;
+    /**
+     * True when this comment is the last *indented* sibling at its depth.
+     * Used to visually terminate the parent thread line (so it doesn't look like it continues).
+     */
+    isLastSibling?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/BlueskyComments.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /**
+     * AT Protocol URI of the post
+     */
+    uri?: string;
+    /**
+     * Bluesky web URL of the post
+     */
+    url?: string;
+    /**
+     * Maximum number of top-level comments to show initially
+     */
+    limit?: number;
+    /**
+     * Render same-author continuation replies at the same visual level (no nested wrapping).
+     */
+    flattenSameAuthorThreads?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/BlueskyComments.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useBlueskyComments } from "../composables/useBlueskyComments";
+import BlueskyComment from "./BlueskyComment.vue";
+const props = defineProps({
+  uri: { type: String, required: false },
+  url: { type: String, required: false },
+  limit: { type: Number, required: false, default: 5 },
+  flattenSameAuthorThreads: { type: Boolean, required: false, default: true }
+});
+const postIdentifier = computed(() => {
+  if (props.uri) return props.uri;
+  if (props.url) return props.url;
+  return "";
+});
+const hasIdentifier = computed(() => !!postIdentifier.value);
+const { loading, error, comments, stats, postUrl, refresh } = hasIdentifier.value ? useBlueskyComments(postIdentifier.value, {
+  flattenSameAuthorThreads: props.flattenSameAuthorThreads
+}) : {
+  loading: ref(false),
+  error: ref("No Bluesky post URL or URI provided"),
+  comments: ref([]),
+  stats: ref({ likeCount: 0, repostCount: 0, replyCount: 0, quoteCount: 0 }),
+  postUrl: ref(""),
+  refresh: async () => {
+  }
+};
+const showAll = ref(false);
+const visibleComments = computed(() => {
+  if (showAll.value) return comments.value;
+  return comments.value.slice(0, props.limit);
+});
+const hasMoreComments = computed(() => {
+  return comments.value.length > props.limit && !showAll.value;
+});
+const remainingCount = computed(() => {
+  return comments.value.length - props.limit;
+});
+function showMoreComments() {
+  showAll.value = true;
+}
+function formatCount(count) {
+  if (count >= 1e6) {
+    return `${(count / 1e6).toFixed(1)}M`;
+  }
+  if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}K`;
+  }
+  return count.toString();
+}
+</script>
+
+<template>
+  <div
+    class="bsky-comments"
+    style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--bsky-border, #e5e5e5);"
+  >
+    <!-- Stats bar -->
+    <a
+      v-if="postUrl && stats.likeCount + stats.repostCount + stats.replyCount > 0"
+      :href="postUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="bsky-stats-bar"
+    >
+      <span v-if="stats.likeCount > 0" class="bsky-stat">
+        <svg class="bsky-stat-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+          />
+        </svg>
+        {{ formatCount(stats.likeCount) }} {{ stats.likeCount === 1 ? "like" : "likes" }}
+      </span>
+      <span v-if="stats.repostCount > 0" class="bsky-stat">
+        <svg class="bsky-stat-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+          />
+        </svg>
+        {{ formatCount(stats.repostCount) }} {{ stats.repostCount === 1 ? "repost" : "reposts" }}
+      </span>
+      <span v-if="stats.replyCount > 0" class="bsky-stat">
+        <svg class="bsky-stat-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+          />
+        </svg>
+        {{ formatCount(stats.replyCount) }} {{ stats.replyCount === 1 ? "reply" : "replies" }}
+      </span>
+    </a>
+
+    <!-- Section header -->
+    <h2 class="bsky-heading">Comments</h2>
+
+    <!-- CTA to comment -->
+    <p class="bsky-cta">
+      Reply on Bluesky
+      <a v-if="postUrl" :href="postUrl" target="_blank" rel="noopener noreferrer" class="bsky-link"
+        >here</a
+      >
+      to join the conversation.
+    </p>
+
+    <!-- Loading state -->
+    <div v-if="loading" class="bsky-loading">
+      <svg class="bsky-spinner" fill="none" viewBox="0 0 24 24">
+        <circle
+          style="opacity: 0.25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        />
+        <path
+          style="opacity: 0.75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+      Loading comments...
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="bsky-state-message">
+      <p>{{ error }}</p>
+      <button v-if="hasIdentifier" class="bsky-link bsky-button" @click="refresh">Try again</button>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="comments.length === 0" class="bsky-state-message">
+      <p>No comments yet. Be the first to reply!</p>
+    </div>
+
+    <!-- Comments list -->
+    <div v-else class="bsky-comments-list">
+      <BlueskyComment
+        v-for="comment in visibleComments"
+        :key="comment.id"
+        :comment="comment"
+        :depth="0"
+      />
+    </div>
+
+    <!-- Show more button -->
+    <div v-if="hasMoreComments" class="bsky-show-more">
+      <button class="bsky-link bsky-button" @click="showMoreComments">
+        {{ remainingCount }} more {{ remainingCount === 1 ? "comment" : "comments" }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bsky-stats-bar{align-items:center;color:inherit;display:inline-flex;font-size:.875rem;gap:1rem;margin-bottom:1rem;opacity:.6;text-decoration:none;transition:opacity .2s}.bsky-stats-bar:hover{color:var(--bsky-link,#2563eb);opacity:1}.bsky-stat{align-items:center;display:flex;gap:.25rem}.bsky-stat-icon{height:1rem;width:1rem}.bsky-heading{color:inherit;font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.bsky-cta{font-size:.875rem;margin-bottom:1.5rem;opacity:.6}.bsky-link{color:var(--bsky-link,#2563eb);text-decoration:none}.bsky-link:hover{text-decoration:underline}.bsky-button{background:transparent;border:none;cursor:pointer;font-size:.875rem;padding:0}.bsky-loading{align-items:center;display:flex;justify-content:center;opacity:.6;padding:2rem 0}.bsky-spinner{animation:bsky-spin 1s linear infinite;height:1.5rem;margin-right:.5rem;width:1.5rem}@keyframes bsky-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.bsky-state-message{opacity:.6;padding:2rem 0;text-align:center}.bsky-show-more{margin-top:1rem}
+</style>

package/dist/runtime/components/BlueskyComments.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /**
+     * AT Protocol URI of the post
+     */
+    uri?: string;
+    /**
+     * Bluesky web URL of the post
+     */
+    url?: string;
+    /**
+     * Maximum number of top-level comments to show initially
+     */
+    limit?: number;
+    /**
+     * Render same-author continuation replies at the same visual level (no nested wrapping).
+     */
+    flattenSameAuthorThreads?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/blueskyComments.logic.d.ts

@@ -0,0 +1,26 @@
+import { AppBskyFeedDefs } from "@atproto/api";
+import type { FlattenedComment } from "../types.js";
+/**
+ * Parse a Bluesky web URL into handle/DID and rkey.
+ */
+export declare function parseBlueskyUrl(url: string): {
+    identifier: string;
+    rkey: string;
+} | null;
+/**
+ * Convert an AT Protocol URI to a Bluesky web URL.
+ */
+export declare function uriToUrl(uri: string, handle?: string): string;
+/**
+ * Process thread replies into flattened comments.
+ * Handles same-author consecutive reply flattening and engagement sorting.
+ */
+export type ProcessRepliesOptions = {
+    /**
+     * When true, same-author continuation replies are promoted to the same level as their parent comment
+     * (so they don't render as nested wrappers).
+     * @default true
+     */
+    flattenSameAuthorThreads?: boolean;
+};
+export declare function processReplies(replies: AppBskyFeedDefs.ThreadViewPost["replies"], parentAuthorDid?: string, depth?: number, options?: ProcessRepliesOptions): FlattenedComment[];

package/dist/runtime/composables/blueskyComments.logic.js

@@ -0,0 +1,74 @@
+import { AppBskyFeedDefs } from "@atproto/api";
+export function parseBlueskyUrl(url) {
+  const match = url.match(/https?:\/\/bsky\.app\/profile\/([^/]+)\/post\/([^/?#]+)/);
+  if (!match) return null;
+  const [, identifier, rkey] = match;
+  return { identifier, rkey };
+}
+export function uriToUrl(uri, handle) {
+  const match = uri.match(/at:\/\/([^/]+)\/app\.bsky\.feed\.post\/([^/?#]+)/);
+  if (!match) return "";
+  const [, did, rkey] = match;
+  const identifier = handle || did;
+  return `https://bsky.app/profile/${identifier}/post/${rkey}`;
+}
+export function processReplies(replies, parentAuthorDid, depth = 0, options = {}) {
+  if (!replies || replies.length === 0) return [];
+  const flattenSameAuthorThreads = options.flattenSameAuthorThreads ?? true;
+  const groups = [];
+  for (const reply of replies) {
+    if (!AppBskyFeedDefs.isThreadViewPost(reply)) continue;
+    const post = reply.post;
+    const author = post.author;
+    const record = post.record;
+    const isSameAuthor = parentAuthorDid === author.did;
+    const comment = {
+      id: post.cid,
+      uri: post.uri,
+      author: {
+        did: author.did,
+        handle: author.handle,
+        displayName: author.displayName,
+        avatar: author.avatar
+      },
+      text: record?.text || "",
+      createdAt: record?.createdAt || post.indexedAt,
+      likeCount: post.likeCount || 0,
+      replyCount: post.replyCount || 0,
+      repostCount: post.repostCount || 0,
+      depth: isSameAuthor ? depth : depth,
+      replies: [],
+      parentAuthorDid
+    };
+    if (reply.replies && reply.replies.length > 0) {
+      const nestedReplies = processReplies(reply.replies, author.did, depth + 1, options);
+      if (flattenSameAuthorThreads) {
+        const continuations = [];
+        const nestedUnderComment = [];
+        for (const nestedReply of nestedReplies) {
+          if (nestedReply.author.did === author.did) {
+            continuations.push({
+              ...nestedReply,
+              depth,
+              // Preserve "continuation" semantics for avatar/indent logic
+              parentAuthorDid: author.did
+            });
+          } else {
+            nestedUnderComment.push(nestedReply);
+          }
+        }
+        comment.replies = nestedUnderComment;
+        groups.push({ head: comment, continuations });
+        continue;
+      }
+      comment.replies = nestedReplies;
+    }
+    groups.push({ head: comment, continuations: [] });
+  }
+  groups.sort((a, b) => {
+    const scoreA = a.head.likeCount + a.head.replyCount;
+    const scoreB = b.head.likeCount + b.head.replyCount;
+    return scoreB - scoreA;
+  });
+  return groups.flatMap((g) => [g.head, ...g.continuations]);
+}

package/dist/runtime/composables/useBlueskyComments.d.ts

@@ -0,0 +1,6 @@
+import type { BlueskyCommentsResult } from "../types.js";
+import { type ProcessRepliesOptions } from "./blueskyComments.logic.js";
+/**
+ * Composable to fetch and manage Bluesky comments
+ */
+export declare function useBlueskyComments(uriOrUrl: string, options?: Pick<ProcessRepliesOptions, "flattenSameAuthorThreads">): BlueskyCommentsResult;

package/dist/runtime/composables/useBlueskyComments.js

@@ -0,0 +1,89 @@
+import { ref, computed } from "vue";
+import { AtpAgent, AppBskyFeedDefs } from "@atproto/api";
+import {
+  parseBlueskyUrl,
+  processReplies,
+  uriToUrl
+} from "./blueskyComments.logic.js";
+const agent = new AtpAgent({
+  service: "https://public.api.bsky.app"
+});
+export function useBlueskyComments(uriOrUrl, options = {}) {
+  const loading = ref(true);
+  const error = ref(null);
+  const post = ref(null);
+  const comments = ref([]);
+  const stats = ref({
+    likeCount: 0,
+    repostCount: 0,
+    replyCount: 0,
+    quoteCount: 0
+  });
+  const postUrl = ref("");
+  async function resolveUri(input) {
+    if (input.startsWith("at://")) {
+      return input;
+    }
+    const parsed = parseBlueskyUrl(input);
+    if (!parsed) {
+      throw new Error("Invalid Bluesky URL format");
+    }
+    const { identifier, rkey } = parsed;
+    if (identifier.startsWith("did:")) {
+      return `at://${identifier}/app.bsky.feed.post/${rkey}`;
+    }
+    const { data } = await agent.resolveHandle({ handle: identifier });
+    return `at://${data.did}/app.bsky.feed.post/${rkey}`;
+  }
+  async function fetchComments() {
+    loading.value = true;
+    error.value = null;
+    try {
+      const uri = await resolveUri(uriOrUrl);
+      const response = await agent.getPostThread({
+        uri,
+        depth: 1e3,
+        // Fetch full depth
+        parentHeight: 0
+        // We don't need parent context
+      });
+      if (!response.success) {
+        throw new Error(`Failed to fetch post: ${uri}`);
+      }
+      const { data } = response;
+      if (!AppBskyFeedDefs.isThreadViewPost(data.thread)) {
+        if (AppBskyFeedDefs.isBlockedPost(data.thread)) {
+          throw new Error("This post is from a blocked account");
+        }
+        if (AppBskyFeedDefs.isNotFoundPost(data.thread)) {
+          throw new Error(`Post not found: ${uri}`);
+        }
+        throw new Error("Post not found or not accessible");
+      }
+      const thread = data.thread;
+      post.value = thread.post;
+      stats.value = {
+        likeCount: thread.post.likeCount || 0,
+        repostCount: thread.post.repostCount || 0,
+        replyCount: thread.post.replyCount || 0,
+        quoteCount: thread.post.quoteCount || 0
+      };
+      postUrl.value = uriToUrl(uri, thread.post.author.handle);
+      comments.value = processReplies(thread.replies, thread.post.author.did, 0, options);
+    } catch (e) {
+      error.value = e instanceof Error ? `Failed to load comments from ${uriOrUrl}: ${e.message}` : "Failed to load comments";
+    } finally {
+      loading.value = false;
+    }
+  }
+  fetchComments();
+  return {
+    loading: computed(() => loading.value),
+    error: computed(() => error.value),
+    post: computed(() => post.value),
+    comments: computed(() => comments.value),
+    stats: computed(() => stats.value),
+    postUrl: computed(() => postUrl.value),
+    refresh: fetchComments
+  };
+}

package/dist/runtime/types.d.ts

@@ -0,0 +1,104 @@
+import type { AppBskyFeedDefs, AppBskyFeedPost, AppBskyActorDefs } from "@atproto/api";
+import type { ComputedRef, Ref } from "vue";
+/**
+ * Module configuration options
+ */
+export interface ModuleOptions {
+    /**
+     * Default Bluesky API service URL
+     * @default 'https://public.api.bsky.app'
+     */
+    apiService?: string;
+}
+/**
+ * Props for the BlueskyComments component
+ */
+export interface BlueskyCommentsProps {
+    /**
+     * AT Protocol URI of the post (e.g., at://did:plc:.../app.bsky.feed.post/...)
+     */
+    uri?: string;
+    /**
+     * Bluesky web URL of the post (e.g., https://bsky.app/profile/user.bsky.social/post/abc123)
+     * Will be converted to URI internally
+     */
+    url?: string;
+    /**
+     * Maximum number of top-level comments to show initially
+     * @default 5
+     */
+    limit?: number;
+    /**
+     * Render same-author continuation replies at the same level (no nested wrapping).
+     * @default true
+     */
+    flattenSameAuthorThreads?: boolean;
+}
+/**
+ * Represents a flattened comment for display
+ */
+export interface FlattenedComment {
+    /** Unique comment ID (CID) */
+    id: string;
+    /** AT Protocol URI of the comment */
+    uri: string;
+    /** Author information */
+    author: {
+        did: string;
+        handle: string;
+        displayName?: string;
+        avatar?: string;
+    };
+    /** Comment text content */
+    text: string;
+    /** Timestamp when the comment was created */
+    createdAt: string;
+    /** Number of likes */
+    likeCount: number;
+    /** Number of replies */
+    replyCount: number;
+    /** Number of reposts */
+    repostCount: number;
+    /** Nesting depth level (0 = top level reply to main post) */
+    depth: number;
+    /** Child comments (flattened for same-author threads) */
+    replies: FlattenedComment[];
+    /** Parent comment author DID (for flattening logic) */
+    parentAuthorDid?: string;
+}
+/**
+ * Post engagement statistics
+ */
+export interface PostStats {
+    likeCount: number;
+    repostCount: number;
+    replyCount: number;
+    quoteCount: number;
+}
+/**
+ * Result from useBlueskyComments composable
+ */
+export type MaybeRef<T> = Ref<T> | ComputedRef<T>;
+export interface BlueskyCommentsResult {
+    /** Loading state */
+    loading: MaybeRef<boolean>;
+    /** Error message if any */
+    error: MaybeRef<string | null>;
+    /** The main post data */
+    post: MaybeRef<AppBskyFeedDefs.PostView | null>;
+    /** Flattened and processed comments */
+    comments: MaybeRef<FlattenedComment[]>;
+    /** Post engagement stats */
+    stats: MaybeRef<PostStats>;
+    /** URL to the post on Bluesky */
+    postUrl: MaybeRef<string>;
+    /** Refresh comments */
+    refresh: () => Promise<void>;
+}
+/**
+ * Re-export useful types from @atproto/api
+ */
+export type ThreadViewPost = AppBskyFeedDefs.ThreadViewPost;
+export type PostView = AppBskyFeedDefs.PostView;
+export type PostRecord = AppBskyFeedPost.Record;
+export type ProfileViewBasic = AppBskyActorDefs.ProfileViewBasic;

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { type ModuleOptions } from '../dist/runtime/types.js'
+
+export { default } from './module.mjs'

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "nuxt-bluesky-comments",
+  "version": "0.1.0",
+  "description": "Nuxt module to display Bluesky post comments on your website",
+  "keywords": [
+    "atproto",
+    "bluesky",
+    "comments",
+    "nuxt",
+    "nuxt-module",
+    "social"
+  ],
+  "license": "MIT",
+  "author": "Patryk Tomczyk <patzick.dev>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/patzick/nuxt-bluesky-comments.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "dependencies": {
+    "@atproto/api": "0.18.8",
+    "@nuxt/kit": "4.2.2"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/schema": "4.2.2",
+    "@types/node": "24.3.0",
+    "@unocss/nuxt": "66.5.10",
+    "nuxt": "4.2.2",
+    "oxfmt": "0.21.0",
+    "oxlint": "1.36.0",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16",
+    "vue-tsc": "3.2.1"
+  },
+  "peerDependencies": {
+    "@unocss/nuxt": ">=66.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@unocss/nuxt": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "dev": "pnpm -C playground dev",
+    "dev:build": "pnpm -C playground build",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && (cd playground && nuxi prepare)",
+    "release": "npm run prepack && npm publish",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint --fix",
+    "format": "oxfmt",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}