@threenine/nuxstr-comments 1.2.2 → 1.3.0

package/README.md

@@ -14,7 +14,7 @@ Find and replace all on all files (CMD+SHIFT+F):
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Nuxstr Comments for doing amazing things.
+Enable [nostr protocol](https://nostr.com/) based comment system on your Nuxt 4 based applications.
 
 - [✨  Release Notes](/CHANGELOG.md)
 <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/@threenine/nuxstr-comments?file=playground%2Fapp.vue) -->
@@ -103,6 +103,19 @@ When a user attempts to post, they will be prompted to log in with their Nostr b
 
 </details>
 
+## Support
+⚡️ lightning address: 
+
+```
+threenine@getalby.com
+```
+
+<br/>
+<div align="center">
+<a href="https://www.buymeacoffee.com/xbhtjcric" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+
+</div>
+
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@threenine/nuxstr-comments/latest.svg?style=flat&colorA=020420&colorB=00DC82

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@threenine/nuxstr-comments",
   "configKey": "nuxstrComments",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -8,7 +8,7 @@ const module = defineNuxtModule({
   },
   // Default configuration options of the Nuxt module
   defaults: {
-    relays: ["wss://relay.damus.io", "wss://relay.primal.net", "wss://a.nos.lol", "wss://freelay.sovbit.host", "wss://nos.lol", "wss://nostr.dodge.me.uk"],
+    relays: ["wss://relay.damus.io", "wss://purplepag.es/"],
     tagStrategy: "path",
     tagPrefix: "comment:"
   },
@@ -39,7 +39,8 @@ const module = defineNuxtModule({
     addPlugin(resolver.resolve("./runtime/plugin"));
     addImports([
       { name: "useNuxstr", as: "useNuxstr", from: resolver.resolve("./runtime/composables/useNuxstr") },
-      { name: "useNuxstrComments", as: "useNuxstrComments", from: resolver.resolve("./runtime/composables/useNuxstrComments") }
+      { name: "useComments", as: "useComments", from: resolver.resolve("./runtime/composables/useComments") },
+      { name: "useReplies", as: "useReplies", from: resolver.resolve("./runtime/composables/useReplies") }
     ]);
     addComponent({
       name: "NuxstrComments",
@@ -53,6 +54,26 @@ const module = defineNuxtModule({
       name: "ScaffoldComment",
       filePath: resolver.resolve("./runtime/components/ScaffoldComment.vue")
     });
+    addComponent({
+      name: "CommentCommandBar",
+      filePath: resolver.resolve("./runtime/components/CommentCommandBar.vue")
+    });
+    addComponent({
+      name: "CommentView",
+      filePath: resolver.resolve("./runtime/components/CommentView.vue")
+    });
+    addComponent({
+      name: "CommentAuthor",
+      filePath: resolver.resolve("./runtime/components/CommentAuthor.vue")
+    });
+    addComponent({
+      name: "PostReply",
+      filePath: resolver.resolve("./runtime/components/PostReply.vue")
+    });
+    addComponent({
+      name: "ReplyView",
+      filePath: resolver.resolve("./runtime/components/ReplyView.vue")
+    });
   }
 });
 

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    profile: Profile;
+    createdAt: number;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/CommentAuthor.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  profile: { type: null, required: true },
+  createdAt: { type: Number, required: true }
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <div
+      v-if="props.profile.image"
+      class="flex-shrink-0"
+    >
+      <img
+        :src="props.profile.image"
+        :alt="props.profile.name || props.profile.display_name || 'User avatar'"
+        class="w-6 h-6 rounded-full object-cover"
+      >
+    </div>
+    <div class="flex-1 min-w-0 mb-3">
+      <div class="truncate">
+        {{ props.profile.display_name || props.profile.name || `${props.profile.pubkey.slice(0, 8)}\u2026` }}
+        <span class="text-xs">{{ new Date(props.createdAt * 1e3).toLocaleString() }}</span>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    profile: Profile;
+    createdAt: number;
+};
+declare const _default: 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>;
+export default _default;

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    contentId: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/CommentCommandBar.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { useNuxstr } from "../composables/useNuxstr";
+import { useReplies } from "../composables/useReplies";
+import { onMounted } from "vue";
+const props = defineProps({
+  contentId: { type: String, required: true }
+});
+const { replies, subscribeReplies } = useReplies(props.contentId);
+const { isLoggedIn } = useNuxstr();
+const open = ref(false);
+function toggleReply() {
+  open.value = !open.value;
+}
+onMounted(() => {
+  subscribeReplies();
+});
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center gap-4 mx-auto mt-4 mb-4">
+      <u-chip
+        :text="replies.length"
+        size="3xl"
+        inset
+      >
+        <u-button
+          variant="ghost"
+          icon="mdi:message-reply-text-outline"
+          title="Reply"
+          square
+          class="rounded-full hover:bg-gray-900"
+          @click="toggleReply"
+        />
+      </u-chip>
+    </div>
+    <UCollapsible
+      class="flex flex-col gap-2 w-48 p-16"
+      :open
+    >
+      <template #content>
+        <div>
+          <reply-view :replies="replies" />
+        </div>
+
+        <div
+          v-if="isLoggedIn"
+          class="mt-4"
+        >
+          <post-reply :root-id="props.contentId" />
+        </div>
+      </template>
+    </UCollapsible>
+  </div>
+</template>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    contentId: string;
+};
+declare const _default: 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>;
+export default _default;

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+    id?: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/CommentView.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { marked } from "marked";
+const props = defineProps({
+  content: { type: String, required: true },
+  id: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div class="prose prose-sm prose-invert mt-2 mb-2">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div
+      class="mb-4"
+      v-html="marked.parse(props.content)"
+    />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <comment-command-bar :content-id="props.id" />
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+    id?: string;
+};
+declare const _default: 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>;
+export default _default;

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    contentId?: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/NuxstrComments.vue

@@ -1,13 +1,12 @@
 <script setup>
 import { onMounted } from "vue";
 import { useNuxstr } from "../composables/useNuxstr";
-import { useNuxstrComments } from "../composables/useNuxstrComments";
-import { marked } from "marked";
+import { useComments } from "../composables/useComments";
 const props = defineProps({
   contentId: { type: String, required: false }
 });
 const { login, isLoggedIn } = useNuxstr();
-const { comments, subscribeComments, loading } = useNuxstrComments(props.contentId);
+const { comments, subscribeComments, loading } = useComments(props.contentId);
 onMounted(() => {
   subscribeComments();
 });
@@ -16,9 +15,9 @@ onMounted(() => {
 <template>
   <div class="nuxstr-comments space-y-4">
     <div class="flex items-center justify-between">
-      <h3 class="text-lg font-semibold">
+      <span class="text-lg font-semibold text-primary">
         Comments
-      </h3>
+      </span>
 
       <div
         v-if="!isLoggedIn"
@@ -30,7 +29,7 @@ onMounted(() => {
           leading-icon="game-icons:ostrich"
           @click="login"
         >
-          Login
+          Sign in
         </UButton>
       </div>
     </div>
@@ -47,41 +46,30 @@ onMounted(() => {
         <div
           v-if="loading"
         >
-          <ScaffoldComment />
+          <scaffold-comment />
         </div>
 
         <div
           v-else
           class="space-y-6"
         >
+          <div v-if="comments.length === 0">
+            <scaffold-comment />
+          </div>
           <div
             v-for="c in comments"
+            v-else
             :key="c.id"
-            class="rounded border p-3 mt-2 mb-2"
+            class="rounded border border-gray-900 p-3 mt-2 mb-2"
           >
-            <div class="flex items-center gap-3 mb-3 mt-2">
-              <div
-                v-if="c.profile?.image"
-                class="flex-shrink-0"
-              >
-                <UAvatar
-                  :src="c.profile.image"
-                  :alt="c.profile.name || c.profile.display_name || 'User avatar'"
-                  class="w-8 h-8 rounded-full object-cover"
-                />
-              </div>
-              <div class="flex-1 min-w-0">
-                <div class="truncate">
-                  {{ c.profile?.display_name || c.profile?.name || `${c.pubkey.slice(0, 8)}\u2026` }}
-                  <span class="text-xs">{{ new Date(c.created_at * 1e3).toLocaleString() }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="prose prose-sm prose-invert mt-2 mb-2">
-              <!-- eslint-disable-next-line vue/no-v-html -->
-              <div v-html="marked.parse(c.content)" />
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            </div>
+            <comment-author
+              :profile="c.profile"
+              :created-at="c.created_at"
+            />
+            <comment-view
+              :id="c.id"
+              :content="c.content"
+            />
           </div>
 
           <div
@@ -91,9 +79,6 @@ onMounted(() => {
         </div>
       </div>
     </ClientOnly>
+    <client-only />
   </div>
 </template>
-
-<style scoped>
-.nuxstr-comments :deep(pre){white-space:pre-wrap}
-</style>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    contentId?: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/PostComment.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { ref } from "vue";
-import { useNuxstrComments } from "../composables/useNuxstrComments";
+import { useComments } from "../composables/useComments";
 const props = defineProps({
   contentId: { type: String, required: false }
 });
 const EMPTY_COMMENT = "";
-const { postComment } = useNuxstrComments(props.contentId);
+const { postComment } = useComments(props.contentId);
 const comment = ref(EMPTY_COMMENT);
 function isValidComment(commentText) {
   return commentText.trim().length > 0;
@@ -23,22 +23,27 @@ async function handlePost() {
 </script>
 
 <template>
-  <div class="text-sm text-muted-foreground border border-green mt-16">
-    <UTextarea
-      v-model="comment"
-      class="w-full"
-      placeholder="Write a comment ...."
-      :rows="4"
-    />
-    <div class="flex justify-end">
-      <UButton
-        color="primary"
-        variant="solid"
-        :disabled="!comment.trim()"
-        @click="handlePost"
-      >
-        Post Comment
-      </UButton>
+  <div class="text-sm text-muted-foreground border border-green mt-4 p-6">
+    <div class="flex gap-2">
+      <div class="flex-1">
+        <UTextarea
+          v-model="comment"
+          class="w-full mb-4"
+          placeholder="Write a comment ...."
+          :rows="4"
+        />
+      </div>
+      <div class="flex flex-col justify-center items-center p-2">
+        <UButton
+          icon="mingcute:send-line"
+          color="primary"
+          variant="solid"
+          :disabled="!comment.trim()"
+          class=""
+          size="xl"
+          @click="handlePost"
+        />
+      </div>
     </div>
   </div>
 </template>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    rootId: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/PostReply.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useReplies } from "../composables/useReplies";
+const props = defineProps({
+  rootId: { type: String, required: true }
+});
+const { reply } = useReplies(props.rootId);
+const EMPTY_COMMENT = "";
+const content = ref(EMPTY_COMMENT);
+function isValidComment(commentText) {
+  return commentText.trim().length > 0;
+}
+function clearComment() {
+  content.value = EMPTY_COMMENT;
+}
+async function postReply(comment) {
+  if (!isValidComment(comment)) return;
+  const wasPosted = await reply(comment);
+  if (wasPosted) {
+    clearComment();
+  }
+}
+</script>
+
+<template>
+  <div class="text-sm text-muted-foreground  mt-16 p-6">
+    <div class="flex gap-2">
+      <div class="flex-1">
+        <UTextarea
+          v-model="content"
+          class="w-full mb-4 rounded-xl"
+          placeholder="Write a reply to this comment ...."
+          :rows="4"
+        />
+      </div>
+      <div class="flex flex-col justify-center items-center p-2">
+        <UButton
+          icon="mingcute:send-line"
+          size="xl"
+          color="primary"
+          variant="solid"
+          class="mb-4 mr-2"
+          @click="postReply(content)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    rootId: string;
+};
+declare const _default: 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>;
+export default _default;

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    replies: Comment[];
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/ReplyView.vue

@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  replies: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <div class="px-10 py-4">
+    <div
+      v-for="reply in props.replies"
+      :key="reply.id"
+      class="rounded border border-gray-900 p-3 mt-2 mb-2"
+    >
+      <div>
+        <comment-author
+          :profile="reply.profile"
+          :created-at="reply.created_at"
+        />
+        <p>{{ reply.content }}</p>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    replies: Comment[];
+};
+declare const _default: 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>;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/ScaffoldComment.vue

@@ -3,12 +3,17 @@
 </script>
 
 <template>
-  <div class="flex items-center gap-4">
-    <USkeleton class="h-12 w-12 rounded-full animate-pulse rounded-md bg-elevated" />
-
-    <div class="grid gap-2">
-      <USkeleton class="h-4 w-[500px]" />
-      <USkeleton class="h-4 w-[500px]" />
+  <div>
+    <p class="text-xs">
+      No comments available
+    </p>
+    <div class="rounded border p-3 mt-2 mb-2">
+      <div class="flex gap-2 mb-3 items-center">
+        <span><USkeleton class="h-4 w-5 rounded-full" /></span><USkeleton class="h-4" />
+      </div>
+      <div class="mt-3">
+        <USkeleton class="h-4" />
+      </div>
     </div>
   </div>
 </template>

package/dist/runtime/composables/{useNuxstrComments.d.ts → useComments.d.ts}

@@ -1,5 +1,5 @@
 import type { Comment } from '~/src/runtime/types';
-export declare function useNuxstrComments(customContentId?: string): {
+export declare function useComments(customContentId?: string): {
     loading: import("vue").Ref<boolean, boolean>;
     error: import("vue").Ref<string | null, string | null>;
     comments: import("vue").Ref<{

package/dist/runtime/composables/{useNuxstrComments.js → useComments.js}

@@ -2,8 +2,8 @@ import { computed, ref } from "vue";
 import { useRoute, useRuntimeConfig, useRequestURL } from "#imports";
 import { useNuxstr } from "./useNuxstr.js";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
-export function useNuxstrComments(customContentId) {
-  const { ndk, connect, isLoggedIn, mapProfile, mapComment } = useNuxstr();
+export function useComments(customContentId) {
+  const { ndk, connect, isLoggedIn, mapComment, pubkey, fetchProfile } = useNuxstr();
   const route = useRoute();
   const config = useRuntimeConfig();
   const opts = config.public?.nuxstrComments || {};
@@ -22,19 +22,12 @@ export function useNuxstrComments(customContentId) {
     const url = useRequestURL();
     return `${url.protocol}//${url.host}`;
   }
-  async function fetchProfile(pubkey) {
-    try {
-      const user = ndk.getUser({ pubkey });
-      const profile = await user.fetchProfile();
-      return mapProfile(profile);
-    } catch (error2) {
-      console.error("Failed to fetch profile for", pubkey, error2);
-      return void 0;
-    }
+  function fullUrl(path) {
+    return `${siteUrl()}${path}`;
   }
   async function subscribeComments() {
     await connect();
-    const filter = { kinds: [NDKKind.GenericReply], ["#t"]: [tagValue()], limit: 100, ["#k"]: [siteUrl()] };
+    const filter = { kinds: [NDKKind.GenericReply], ["#t"]: [tagValue()], limit: 100, ["#k"]: ["web"], ["#A"]: [fullUrl(contentId.value)] };
     const sub = await ndk.subscribe(filter);
     sub.on("event", async (event) => {
       const comment = mapComment(event);
@@ -44,17 +37,30 @@ export function useNuxstrComments(customContentId) {
   }
   async function postComment(comment) {
     await connect();
-    const e = new NDKEvent(ndk);
-    e.kind = NDKKind.GenericReply;
-    e.content = comment;
-    e.tags = [
-      ["t", tagValue()],
-      ["k", siteUrl()]
-    ];
-    return await e.publish().then(() => true).catch((err) => {
+    const ndkEvent = await createCommentEvent(comment);
+    return await ndkEvent.publish().then(() => true).catch((err) => {
       error.value = err?.message || String(err);
       return false;
     });
   }
+  async function createCommentEvent(comment) {
+    const event = new NDKEvent(ndk);
+    event.kind = NDKKind.GenericReply;
+    event.content = comment;
+    event.tags = [
+      ["A", fullUrl(contentId.value)],
+      ["a", fullUrl(contentId.value)],
+      ["I", fullUrl(contentId.value)],
+      //
+      ["i", fullUrl(contentId.value)],
+      ["t", tagValue()],
+      ["k", "web"],
+      // Defined NIP 73
+      ["K", "web"],
+      // Defined NIP 73,
+      ["p", pubkey.value]
+    ];
+    return event;
+  }
   return { loading, error, comments, isLoggedIn, subscribeComments, postComment };
 }

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

@@ -1,5 +1,5 @@
 import NDK, { type NDKEvent } from '@nostr-dev-kit/ndk';
-import type { Profile, Comment } from '../types/index.js';
+import type { Comment, Profile } from '../types/index.js';
 export declare function useNuxstr(): {
     readonly ndk: NDK;
     connect: () => Promise<NDK>;
@@ -9,4 +9,5 @@ export declare function useNuxstr(): {
     pubkey: import("vue").Ref<string | null | undefined, string | null | undefined>;
     mapProfile: (profile: NDKUserProfile) => Profile;
     mapComment: (event: NDKEvent) => Comment;
+    fetchProfile: (pubkey: string) => Promise<Profile | undefined>;
 };

package/dist/runtime/composables/useNuxstr.js

@@ -19,7 +19,9 @@ export function useNuxstr() {
   const opts = config.public?.nuxstrComments || {};
   function initializeNDK() {
     if (!state.ndk) {
-      state.ndk = new NDK({ explicitRelayUrls: opts.relays || [] });
+      state.ndk = new NDK({
+        explicitRelayUrls: opts.relays || []
+      });
     }
     return state.ndk;
   }
@@ -56,12 +58,8 @@ export function useNuxstr() {
       state.signer = signer;
       state.pubkey.value = user.pubkey;
       await connect();
-      const profile = ndk.getUser({ pubkey: user.pubkey });
-      profile.fetchProfile().then((profile2) => {
-        state.userProile = mapProfile(profile2);
-      }).catch((err) => {
-        console.error("Failed to fetch profile", err);
-      });
+      const profile = await ndk.getUser({ pubkey: user.pubkey });
+      state.userProfile.value = mapProfile(profile);
     }
   }
   function mapComment(event) {
@@ -73,6 +71,16 @@ export function useNuxstr() {
       profile: null
     };
   }
+  async function fetchProfile(pubkey) {
+    try {
+      const user = state.ndk.getUser({ pubkey });
+      const profile = await user.fetchProfile();
+      return mapProfile(profile);
+    } catch (error) {
+      console.error("Failed to fetch profile for", pubkey, error);
+      return void 0;
+    }
+  }
   function mapProfile(profile) {
     return {
       display_name: profile.displayName,
@@ -98,6 +106,7 @@ export function useNuxstr() {
     isLoggedIn,
     pubkey: state.pubkey,
     mapProfile,
-    mapComment
+    mapComment,
+    fetchProfile
   };
 }

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

@@ -0,0 +1,21 @@
+export declare function useReplies(rootCommentId?: string): {
+    subscribeReplies: () => Promise<void>;
+    replies: import("vue").ComputedRef<{
+        id: string;
+        pubkey: string;
+        created_at: number;
+        content: string;
+        profile?: {
+            pubkey: string;
+            display_name?: string | undefined;
+            about?: string | undefined;
+            image?: string | undefined;
+            nip05?: string | undefined;
+            lud06?: string | undefined;
+            lud16?: string | undefined;
+            website?: string | undefined;
+        } | undefined;
+    }[]>;
+    reply: (comment: string) => Promise<boolean>;
+    count: import("vue").ComputedRef<Promise<string>>;
+};

package/dist/runtime/composables/useReplies.js

@@ -0,0 +1,48 @@
+import { computed, ref } from "vue";
+import { useNuxstr } from "./useNuxstr.js";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+export function useReplies(rootCommentId) {
+  const { ndk, connect, mapComment, pubkey, fetchProfile } = useNuxstr();
+  const repliesData = ref([]);
+  const error = ref(null);
+  const replies = computed(() => {
+    return repliesData.value.slice().sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+  });
+  async function subscribeReplies() {
+    await connect();
+    const filter = { kinds: [NDKKind.GenericReply], limit: 100, ["#e"]: [rootCommentId] };
+    const sub = await ndk.subscribe(filter);
+    sub.on("event", async (event) => {
+      const reply2 = mapComment(event);
+      reply2.profile = await fetchProfile(event.pubkey);
+      repliesData.value.push(reply2);
+    });
+  }
+  async function reply(comment) {
+    const ndkEvent = await createReplyEvent(comment);
+    return await ndkEvent.publish().then(() => true).catch((err) => {
+      error.value = err?.message || String(err);
+      return false;
+    });
+  }
+  async function createReplyEvent(comment) {
+    const event = new NDKEvent(ndk);
+    event.kind = NDKKind.GenericReply;
+    event.content = comment;
+    event.tags = [
+      ["e", `${rootCommentId}`],
+      ["k", `${NDKKind.GenericReply}`],
+      // The parent kind
+      ["p", pubkey.value]
+    ];
+    return event;
+  }
+  const count = computed(async () => {
+    await connect();
+    const filter = { kinds: [NDKKind.GenericReply], limit: 100, ["#e"]: [rootCommentId] };
+    const events = await ndk.fetchEvents(filter);
+    console.log(events);
+    return `${Array.from(events).length}`;
+  });
+  return { subscribeReplies, replies, reply, count };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@threenine/nuxstr-comments",
-  "version": "1.2.2",
-  "description": "Nuxstr Comments",
+  "version": "1.3.0",
+  "description": "Nuxt module to enable Nostr Comments on Nuxt 4 based websites",
   "repository": "threenine/nuxstr-comments",
   "license": "MIT",
   "type": "module",
@@ -33,7 +33,7 @@
     "@nuxt/eslint": "1.9.0",
     "@nuxt/eslint-config": "^1.9.0",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.0.3",
+    "@nuxt/schema": "^4.1.1",
     "@nuxt/scripts": "0.11.10",
     "@nuxt/test-utils": "^3.19.2",
     "@nuxt/ui": "^3.3.3",
@@ -41,9 +41,9 @@
     "@testing-library/vue": "^8.1.0",
     "@unhead/vue": "^2.0.14",
     "changelogen": "^0.6.2",
-    "eslint": "^9.33.0",
+    "eslint": "^9.35.0",
     "jsdom": "^26.1.0",
-    "nuxt": "^4.0.3",
+    "nuxt": "^4.1.2",
     "typescript": "~5.9.2",
     "vitest": "^3.2.4",
     "vue-tsc": "^3.0.6",