@threenine/nuxstr-comments 1.5.3 → 1.6.0

package/README.md

@@ -23,12 +23,37 @@ Enable [nostr protocol](https://nostr.com/) based comment system on your Nuxt 4
 ## Features
 
 - Nostr-powered comments for Nuxt Content blog posts
-- NIP-07 login prompt if user is not authenticated
-- Comments are written in Markdown and rendered via @nuxt/content's ContentRendererMarkdown
+- [NIP-07](https://github.com/nostr-protocol/nips/blob/master/07.md) Browser Extension login prompt if user is not authenticated
+- [NIP-22](https://github.com/nostr-protocol/nips/blob/master/22.md) Plain Text Content - (no HTML, Markdown, or other formatting)
 - Configurable relay list and tagging strategy
+- Comments are published as kind:1111 as Website Url
+```json
+{
+  "kind": 1111,
+  "content": "Nice article!",
+  "tags": [
+    // referencing the root url
+    ["I", "https://abc.com/articles/1"],
+    // the root "kind": for an url
+    ["K", "web"],
+
+    // the parent reference (same as root for top-level comments)
+    ["i", "https://abc.com/articles/1"],
+    // the parent "kind": for an url
+    ["k", "web"]
+  ]
+  // other fields
+}
+```
 
-## Quick Setup
 
+> [!WARNING]
+> NuxstrComments [NIP-22] MUST NOT be used to reply to kind 1 notes.  
+> NIP-10 should instead be followed.
+
+
+## Quick Setup
+  
 Install the module to your Nuxt application with one command:
 
 ```bash

package/dist/module.json

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

package/dist/module.mjs

@@ -8,7 +8,7 @@ const module$1 = defineNuxtModule({
   },
   // Default configuration options of the Nuxt module
   defaults: {
-    relays: ["wss://relay.damus.io", "wss://purplepag.es/"],
+    relays: ["wss://relay.threenine.services"],
     tagStrategy: "path",
     tagPrefix: "comment:"
   },
@@ -17,9 +17,9 @@ const module$1 = defineNuxtModule({
     nuxt.hook("vite:extendConfig", (config) => {
       config.optimizeDeps = config.optimizeDeps || {};
       config.optimizeDeps.include = config.optimizeDeps.include || [];
-      config.optimizeDeps.include.push("tseep", "@nostr-dev-kit/ndk", "nostr-tools", "defu");
+      config.optimizeDeps.include.push("tseep", "nostr-tools", "defu");
       config.ssr = config.ssr || {};
-      const packagesToInclude = ["tseep", "@nostr-dev-kit/ndk", "nostr-tools", "defu"];
+      const packagesToInclude = ["tseep", "nostr-tools", "defu"];
       if (!config.ssr.noExternal) {
         config.ssr.noExternal = packagesToInclude;
       } else if (Array.isArray(config.ssr.noExternal)) {
@@ -31,10 +31,10 @@ const module$1 = defineNuxtModule({
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.externals = nitroConfig.externals || {};
       nitroConfig.externals.inline = nitroConfig.externals.inline || [];
-      nitroConfig.externals.inline.push("tseep", "@nostr-dev-kit/ndk", "nostr-tools", "defu");
+      nitroConfig.externals.inline.push("tseep", "nostr-tools", "defu");
     });
     nuxt.options.build.transpile = nuxt.options.build.transpile || [];
-    nuxt.options.build.transpile.push("tseep", "@nostr-dev-kit/ndk", "nostr-tools", "defu");
+    nuxt.options.build.transpile.push("tseep", "nostr-tools", "defu");
     nuxt.options.runtimeConfig.public.nuxstrComments = defu(nuxt.options.runtimeConfig.public.nuxstrComments || {}, options);
     addPlugin(resolver.resolve("./runtime/plugin"));
     addImports([

package/dist/runtime/classes/NostrManager.d.ts

@@ -0,0 +1,12 @@
+import type { Event as NToolEvent, Filter } from 'nostr-tools';
+export declare class NostrManager {
+    private static instance;
+    private pool;
+    private relays;
+    private constructor();
+    static getInstance(relays: string[]): NostrManager;
+    subscribe(filter: Filter, onEvent: (event: NToolEvent) => void): import("nostr-tools/abstract-pool").SubCloser;
+    publish(event: NToolEvent): Promise<void>;
+    getEvent(filter: Filter): Promise<NToolEvent | null>;
+    close(): Promise<void>;
+}

package/dist/runtime/classes/NostrManager.js

@@ -0,0 +1,40 @@
+import { SimplePool, verifyEvent } from "nostr-tools";
+export class NostrManager {
+  static instance;
+  pool;
+  relays;
+  constructor(relays) {
+    this.pool = new SimplePool();
+    this.relays = relays;
+  }
+  static getInstance(relays) {
+    if (!NostrManager.instance) {
+      NostrManager.instance = new NostrManager(relays);
+    } else {
+      relays.forEach((relay) => {
+        if (!NostrManager.instance.relays.includes(relay)) {
+          NostrManager.instance.relays.push(relay);
+        }
+      });
+    }
+    return NostrManager.instance;
+  }
+  subscribe(filter, onEvent) {
+    return this.pool.subscribeMany(this.relays, filter, {
+      onevent(event) {
+        if (verifyEvent(event)) {
+          onEvent(event);
+        }
+      }
+    });
+  }
+  async publish(event) {
+    await this.pool.publish(this.relays, event);
+  }
+  async getEvent(filter) {
+    return await this.pool.get(this.relays, filter);
+  }
+  async close() {
+    this.pool.close(this.relays);
+  }
+}

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

@@ -1,5 +1,6 @@
+import type { Profile } from '../types/index.js';
 type __VLS_Props = {
-    profile: Profile;
+    profile?: Profile;
     createdAt: number;
 };
 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>;

package/dist/runtime/components/CommentAuthor.vue

@@ -1,25 +1,28 @@
 <script setup>
 const props = defineProps({
-  profile: { type: null, required: true },
+  profile: { type: Object, required: false },
   createdAt: { type: Number, required: true }
 });
 </script>
 
 <template>
-  <div class="flex items-center gap-3">
+  <div
+    v-if="props.profile"
+    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'"
+        :alt="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="flex gap-6 items-center">
-        <span class="text-sm mr-6">{{ props.profile.display_name || props.profile.name || `${props.profile.pubkey.slice(0, 8)}\u2026` }}</span>
+        <span class="text-sm mr-6">{{ props.profile.display_name || `${props.profile.pubkey.slice(0, 8)}\u2026` }}</span>
         <span class="text-xs text-muted-foreground ml-3">&nbsp;&nbsp;</span>
         <span class="text-xs text-primary ml-3">{{ new Date(props.createdAt * 1e3).toLocaleString() }}</span>
       </div>

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

@@ -1,5 +1,6 @@
+import type { Profile } from '../types/index.js';
 type __VLS_Props = {
-    profile: Profile;
+    profile?: Profile;
     createdAt: number;
 };
 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>;

package/dist/runtime/components/CommentView.vue

@@ -1,23 +1,28 @@
 <script setup>
-import { onMounted } from "vue";
-import { marked } from "marked";
-const props = defineProps({
+defineProps({
   content: { type: String, required: true },
   id: { type: String, required: true }
 });
-async function renderMarkdown(md) {
-  return marked.parse(md);
-}
-onMounted(async () => {
-  const targetEl = document.getElementById("comment-content");
-  if (!targetEl) return;
-  targetEl.innerHTML = await renderMarkdown(props.content);
-});
 </script>
 
 <template>
   <div class="mt-2 mb-2">
-    <div id="comment-content" />
-    <ReplyButton :content-id="props.id" />
+    <UCard
+      variant="subtle"
+      class="mt-auto"
+      :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
+    >
+      <UTextarea
+        :model-value="content"
+        color="neutral"
+        variant="none"
+        autoresize
+        readonly
+        :rows="4"
+        class="w-full"
+        :ui="{ base: 'p-0 resize-none' }"
+      />
+    </ucard>
+    <ReplyButton :content-id="id" />
   </div>
 </template>

package/dist/runtime/components/NuxstrComments.vue

@@ -23,14 +23,16 @@ onMounted(() => {
         v-if="!isLoggedIn"
         class="text-sm text-muted-foreground"
       >
-        <UButton
-          color="primary"
-          variant="solid"
-          leading-icon="game-icons:ostrich"
-          @click="login"
-        >
-          Sign in
-        </UButton>
+        <u-tooltip text="Sign in with NIP07 browser extension like Alby or nos2fx to comment">
+          <UButton
+            color="primary"
+            variant="solid"
+            leading-icon="game-icons:ostrich"
+            @click="login"
+          >
+            Sign in
+          </UButton>
+        </u-tooltip>
       </div>
     </div>
     <ClientOnly>
@@ -56,11 +58,13 @@ onMounted(() => {
           <div v-if="comments.length === 0">
             <scaffold-comment />
           </div>
-          <div
+          <UCard
             v-for="c in comments"
             v-else
             :key="c.id"
-            class="rounded border border-gray-900 p-3 mt-2 mb-2"
+            variant="subtle"
+            class="mt-auto"
+            :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
           >
             <comment-author
               :profile="c.profile"
@@ -70,7 +74,7 @@ onMounted(() => {
               :id="c.id"
               :content="c.content"
             />
-          </div>
+          </UCard>
 
           <div
             v-if="isLoggedIn"

package/dist/runtime/components/PostComment.vue

@@ -23,27 +23,34 @@ async function handlePost() {
 </script>
 
 <template>
-  <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"
-        />
+  <UCard
+    variant="subtle"
+    class="mt-auto"
+    :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
+  >
+    <form @submit.prevent="handlePost">
+      <UTextarea
+        v-model="comment"
+        color="neutral"
+        variant="none"
+        required
+        autoresize
+        placeholder="Write your comment..."
+        :rows="4"
+        class="w-full"
+        :ui="{ base: 'p-0 resize-none' }"
+      />
+
+      <div class="flex items-center justify-end">
+        <div class="flex items-center justify-end gap-2">
+          <UButton
+            type="submit"
+            color="primary"
+            label="Comment"
+            icon="i-lucide-send"
+          />
+        </div>
       </div>
-    </div>
-  </div>
+    </form>
+  </UCard>
 </template>

package/dist/runtime/components/PostReply.vue

@@ -23,25 +23,32 @@ async function postReply(comment) {
 </script>
 
 <template>
-  <div class="text-sm text-muted-foreground  mt-4 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">
+  <UCard
+    variant="subtle"
+    class="mt-auto"
+    :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
+  >
+    <UTextarea
+      v-model="content"
+      color="neutral"
+      variant="none"
+      required
+      autoresize
+      placeholder="Write your comment..."
+      :rows="4"
+      class="w-full"
+      :ui="{ base: 'p-0 resize-none' }"
+    />
+    <div class="flex items-center justify-end">
+      <div class="flex items-center justify-end gap-2">
         <UButton
-          icon="mingcute:send-line"
-          size="xl"
+          type="submit"
           color="primary"
-          variant="solid"
+          label="Reply"
+          icon="i-lucide-send"
           @click="postReply(content)"
         />
       </div>
     </div>
-  </div>
+  </UCard>
 </template>

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

@@ -1,3 +1,4 @@
+import type { Comment } from '../types/index.js';
 type __VLS_Props = {
     replies: Comment[];
 };

package/dist/runtime/components/ReplyView.vue

@@ -6,10 +6,12 @@ const props = defineProps({
 
 <template>
   <div class="px-10 py-4">
-    <div
+    <UCard
       v-for="reply in props.replies"
       :key="reply.id"
-      class="rounded-md border p-3 mt-2 mb-2"
+      variant="subtle"
+      class="mt-auto mb-3"
+      :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
     >
       <div>
         <comment-author
@@ -20,6 +22,6 @@ const props = defineProps({
           {{ reply.content }}
         </p>
       </div>
-    </div>
+    </UCard>
   </div>
 </template>

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

@@ -1,3 +1,4 @@
+import type { Comment } from '../types/index.js';
 type __VLS_Props = {
     replies: Comment[];
 };

package/dist/runtime/components/ScaffoldComment.vue

@@ -7,14 +7,16 @@
     <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>
+    <UCard
+      variant="subtle"
+      class="mt-auto"
+      :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
+    >
+      <span><USkeleton class="h-4 w-5 rounded-full" /></span><USkeleton class="h-4" />
       <div class="mt-3">
         <USkeleton class="h-4" />
       </div>
-    </div>
+    </UCard>
   </div>
 </template>
 

package/dist/runtime/composables/useComments.js

@@ -1,9 +1,10 @@
 import { computed, ref } from "vue";
 import { useRequestURL, useRoute, useRuntimeConfig } from "#imports";
 import useNuxstr from "./useNuxstr.js";
-import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useNostr } from "./useNostr.js";
 function useComments(customContentId) {
-  const { ndk, connect, isLoggedIn, mapComment, pubkey, fetchProfile } = useNuxstr();
+  const { isLoggedIn, pubkey, fetchProfile } = useNuxstr();
+  const { subscribe } = useNostr();
   const route = useRoute();
   const config = useRuntimeConfig();
   const opts = config.public?.nuxstrComments || {};
@@ -22,54 +23,60 @@ function useComments(customContentId) {
     return `${prefix}${contentId.value}`;
   }
   function siteUrl() {
-    const url = useRequestURL();
-    return `${url.protocol}//${url.host}`;
+    if (import.meta.server) {
+      const url = useRequestURL();
+      return `${url.protocol}//${url.host}`;
+    }
+    return window.location.origin;
   }
   function fullUrl(path) {
     return `${siteUrl()}${path}`;
   }
   async function subscribeComments() {
-    await connect();
     const filter = {
-      kinds: [NDKKind.GenericReply],
+      kinds: [1111],
+      // NDKKind.GenericReply is 22
       ["#t"]: [tagValue()],
-      limit: 100,
-      ["#k"]: ["web"],
-      ["#A"]: [fullUrl(contentId.value)]
+      limit: 100
     };
-    const sub = ndk.subscribe(filter);
-    sub.on("event", async (event) => {
-      const comment = mapComment(event);
+    subscribe(filter, async (event) => {
+      if (commentsData.value.some((c) => c.id === event.id)) return;
+      const comment = {
+        id: event.id,
+        pubkey: event.pubkey,
+        created_at: event.created_at,
+        content: event.content,
+        profile: void 0
+      };
       comment.profile = await fetchProfile(event.pubkey);
       commentsData.value.push(comment);
     });
   }
   async function postComment(comment) {
-    await connect();
-    const ndkEvent = await createCommentEvent(comment);
-    return await ndkEvent.publish().then(() => true).catch((err) => {
+    const { publish } = useNostr();
+    try {
+      const event = await createCommentEvent(comment);
+      const signedEvent = await window.nostr.signEvent(event);
+      await publish(signedEvent);
+      return 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 ?? ""]
-    ];
-    return event;
+    return {
+      kind: 1111,
+      // GenericReply
+      created_at: Math.floor(Date.now() / 1e3),
+      content: comment,
+      tags: [
+        ["A", fullUrl(contentId.value)],
+        ["t", tagValue()],
+        ["k", "web"],
+        ["p", pubkey ?? ""]
+      ]
+    };
   }
   return { loading, error, comments, isLoggedIn, subscribeComments, postComment };
 }

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

@@ -0,0 +1,8 @@
+import type { Filter, Event } from 'nostr-tools';
+import { NostrManager } from '../classes/NostrManager.js';
+export declare const useNostr: (relays?: string[]) => {
+    nostrManager: NostrManager;
+    subscribe: (filter: Filter, onEvent: (event: Event) => void) => import("nostr-tools/abstract-pool").SubCloser;
+    publish: (event: Event) => Promise<void>;
+    getEvent: (filter: Filter) => Promise<import("nostr-tools").NostrEvent | null>;
+};

package/dist/runtime/composables/useNostr.js

@@ -0,0 +1,24 @@
+import { useRuntimeConfig } from "#imports";
+import { NostrManager } from "../classes/NostrManager.js";
+export const useNostr = (relays) => {
+  const config = useRuntimeConfig();
+  const opts = config.public?.nuxstrComments || {};
+  const effectiveRelays = relays || opts.relays || [];
+  const nostrManager = NostrManager.getInstance(effectiveRelays);
+  const subscribe = (filter, onEvent) => {
+    return nostrManager.subscribe(filter, onEvent);
+  };
+  const publish = (event) => {
+    console.log("publishing Comment", event);
+    return nostrManager.publish(event);
+  };
+  const getEvent = (filter) => {
+    return nostrManager.getEvent(filter);
+  };
+  return {
+    nostrManager,
+    subscribe,
+    publish,
+    getEvent
+  };
+};

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

@@ -1,14 +1,10 @@
-import NDK, { type NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
-import type { Comment, Profile } from '../types/index.js';
+import type { Profile } from '../types/index.js';
 declare function useNuxstr(): {
-    readonly ndk: NDK;
-    connect: () => Promise<NDK>;
     login: () => Promise<void>;
     logout: () => void;
     isLoggedIn: import("vue").ComputedRef<boolean>;
     pubkey: string | undefined;
-    mapProfile: (profile: NDKUserProfile | null) => Profile;
-    mapComment: (event: NDKEvent) => Comment;
+    userProfile: import("vue").ComputedRef<Profile | null | undefined>;
     fetchProfile: (pubkey: string) => Promise<Profile | undefined>;
 };
 export default useNuxstr;

package/dist/runtime/composables/useNuxstr.js

@@ -1,48 +1,23 @@
 import { computed, ref } from "vue";
-import { useRuntimeConfig } from "#imports";
-import NDK, { NDKNip07Signer } from "@nostr-dev-kit/ndk";
 import { useToast } from "#ui/composables/useToast";
+import { useNostr } from "./useNostr.js";
 function useNuxstr() {
   const DEFAULT_PUBKEY = "";
   const w = globalThis;
   if (!w.__nuxstr) {
     w.__nuxstr = {
-      ndk: null,
-      signer: null,
       pubkey: ref(DEFAULT_PUBKEY),
       isConnecting: ref(false),
       isConnected: ref(false),
-      userProfile: ref(void 0)
+      userProfile: ref(null)
     };
   }
   const state = w.__nuxstr;
-  const DEFAULT_TIMESTAMP = 0;
-  const config = useRuntimeConfig();
-  const opts = config.public?.nuxstrComments || {};
-  function initializeNDK() {
-    if (!state.ndk) {
-      state.ndk = new NDK({
-        explicitRelayUrls: opts.relays || []
-      });
-    }
-    return state.ndk;
-  }
+  const { getEvent } = useNostr();
   const isLoggedIn = computed(() => !!state.pubkey.value);
-  async function connect() {
-    const ndk = initializeNDK();
-    if (state.isConnected.value) return ndk;
-    if (state.isConnecting.value) return ndk;
-    state.isConnecting.value = true;
-    try {
-      await ndk.connect();
-      state.isConnected.value = true;
-      return ndk;
-    } finally {
-      state.isConnecting.value = false;
-    }
-  }
+  const userProfile = computed(() => state.userProfile.value);
   async function checkExtension() {
-    if ("nostr" in window) return true;
+    if (typeof window !== "undefined" && "nostr" in window) return true;
     const toast = useToast();
     toast.add({
       title: "Nostr extension not found",
@@ -53,42 +28,39 @@ function useNuxstr() {
   }
   async function login() {
     if (await checkExtension()) {
-      const ndk = initializeNDK();
-      await connect();
-      const signer = new NDKNip07Signer();
-      ndk.signer = signer;
-      const account = await signer.user();
-      state.signer = signer;
-      state.pubkey.value = account.pubkey;
-      const user = ndk.getUser({ pubkey: account.pubkey });
-      const profile = await user.fetchProfile();
-      state.userProfile.value = mapProfile(profile);
+      try {
+        const pubkey = await window.nostr.getPublicKey();
+        state.pubkey.value = pubkey;
+        const profile = await fetchProfile(pubkey);
+        if (profile) {
+          state.userProfile.value = profile;
+        }
+      } catch (e) {
+        console.error("Failed to login", e);
+      }
     }
   }
-  function mapComment(event) {
-    return {
-      id: event.id,
-      pubkey: event.pubkey,
-      created_at: event.created_at || DEFAULT_TIMESTAMP,
-      content: event.content,
-      profile: void 0
-    };
-  }
   async function fetchProfile(pubkey) {
     try {
-      const ndk = initializeNDK();
-      const user = ndk.getUser({ pubkey });
-      const profile = await user.fetchProfile();
-      return mapProfile(profile);
+      const filter = {
+        kinds: [0],
+        authors: [pubkey]
+      };
+      const event = await getEvent(filter);
+      if (event) {
+        const content = JSON.parse(event.content);
+        return mapProfile(content, pubkey);
+      }
+      return void 0;
     } catch (error) {
       console.error("Failed to fetch profile for", pubkey, error);
       return void 0;
     }
   }
-  function mapProfile(profile) {
-    if (profile === null) return {};
+  function mapProfile(profile, pubkey) {
     return {
-      display_name: profile.displayName,
+      pubkey,
+      display_name: profile.display_name || profile.name,
       about: profile.about,
       image: profile.picture,
       nip05: profile.nip05,
@@ -98,20 +70,15 @@ function useNuxstr() {
     };
   }
   function logout() {
-    state.signer = null;
     state.pubkey.value = DEFAULT_PUBKEY;
+    state.userProfile.value = null;
   }
   return {
-    get ndk() {
-      return initializeNDK();
-    },
-    connect,
     login,
     logout,
     isLoggedIn,
     pubkey: state.pubkey.value,
-    mapProfile,
-    mapComment,
+    userProfile,
     fetchProfile
   };
 }

package/dist/runtime/composables/useReplies.js

@@ -1,41 +1,54 @@
 import { computed, ref } from "vue";
 import useNuxstr from "./useNuxstr.js";
-import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useNostr } from "./useNostr.js";
 function useReplies(rootCommentId) {
-  const { ndk, connect, mapComment, pubkey, fetchProfile } = useNuxstr();
+  const { pubkey, fetchProfile } = useNuxstr();
+  const { subscribe } = useNostr();
   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 = ndk.subscribe(filter);
-    sub.on("event", async (event) => {
-      const reply2 = mapComment(event);
+    const filter = { kinds: [1111], limit: 100, ["#e"]: [rootCommentId] };
+    subscribe(filter, async (event) => {
+      if (repliesData.value.some((r) => r.id === event.id)) return;
+      const reply2 = {
+        id: event.id,
+        pubkey: event.pubkey,
+        created_at: event.created_at,
+        content: event.content,
+        profile: void 0
+      };
       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) => {
+    const { publish } = useNostr();
+    try {
+      const event = await createReplyEvent(comment);
+      const signedEvent = await window.nostr.signEvent(event);
+      await publish(signedEvent);
+      return 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 ?? ""]
-    ];
-    return event;
+    return {
+      kind: 1111,
+      // GenericReply
+      created_at: Math.floor(Date.now() / 1e3),
+      content: comment,
+      tags: [
+        ["e", rootCommentId],
+        ["k", "1111"],
+        // The parent kind
+        ["p", pubkey ?? ""]
+      ]
+    };
   }
   return { subscribeReplies, replies, reply };
 }

package/dist/runtime/types/index.d.ts

@@ -1,3 +1,29 @@
+import type { Event } from 'nostr-tools'
+
+export interface Nip07 {
+  getPublicKey: () => Promise<string>
+  signEvent: (event: Event) => Promise<Event>
+  getRelays?: () => Promise<Record<string, { read: boolean, write: boolean }>>
+  nip04?: {
+    encrypt: (pubkey: string, plaintext: string) => Promise<string>
+    decrypt: (pubkey: string, ciphertext: string) => Promise<string>
+  }
+  nip44?: {
+    encrypt: (pubkey: string, plaintext: string) => Promise<string>
+    decrypt: (pubkey: string, ciphertext: string) => Promise<string>
+  }
+}
+
+declare global {
+  interface Window {
+    nostr: Nip07
+  }
+}
+
+export const enum EventKind {
+  Metadata = 0,
+  GenericReply = 1111,
+}
 export type NuxstrProfile = {
   name?: string
   display_name?: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threenine/nuxstr-comments",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Nuxt module to enable Nostr Comments on Nuxt 4 based websites",
   "repository": "threenine/nuxstr-comments",
   "license": "MIT",
@@ -23,9 +23,8 @@
     "dist"
   ],
   "dependencies": {
-    "@nostr-dev-kit/ndk": "^2.18.1",
     "defu": "^6.1.4",
-    "marked": "^16.2.1"
+    "nostr-tools": "^2.19.4"
   },
   "devDependencies": {
     "@nuxt/devtools": "^2.6.2",
@@ -36,7 +35,7 @@
     "@nuxt/schema": "^4.2.1",
     "@nuxt/scripts": "0.11.10",
     "@nuxt/test-utils": "^3.19.2",
-    "@nuxt/ui": "^4.2.1",
+    "@nuxt/ui": "^4.3.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/vue": "^8.1.0",
     "@types/node": "latest",