@threenine/nuxstr-comments 1.5.0 → 1.5.2

package/README.md

@@ -38,38 +38,43 @@ npx nuxi module add @threenine/nuxstr-comments
 That's it! You can now use Nuxstr Comments in your Nuxt app ✨
 
 ### Usage
-
-1. Ensure @nuxt/content is enabled and your blog post pages use ContentDoc or render content files.
-2. Add the comments component where you want comments to appear (usually below a ContentDoc):
-
-```vue
-<template>
-  <div>
-    <ContentDoc />
-    <NuxstrComments />
-  </div>
-</template>
-```
-
 By default, the component tags comments by the current route path (e.g., content:/blog/my-post) and fetches them from configured relays.
 
-3. Configuration (nuxt.config.ts):
+1. Configuration (nuxt.config.ts):
 
 ```ts
 export default defineNuxtConfig({
   modules: [
-    '@nuxt/content',
     '@threenine/nuxstr-comments',
   ],
   nuxstrComments: {
     relays: ['wss://relay.damus.io', 'wss://relay.nostr.band'],
     tagStrategy: 'path',
-    tagPrefix: 'content:',
+    tagPrefix: 'comment:',
   },
 })
 ```
 
-When a user attempts to post, they will be prompted to log in with their Nostr browser extension (NIP-07). Comments are published as kind:1 notes tagged with a `t` tag containing the content tag (e.g., `content:/blog/my-post`). Rendering of comment bodies uses @nuxt/content's ContentRendererMarkdown component so users can write markdown.
+
+2. Add the comments component where you want comments to appear (usually below a ContentDoc):
+
+```vue
+<template>
+  <div>
+      <NuxstrComments />
+  </div>
+</template>
+```
+
+Select your preferred relays from the list of [relays](https://nostrwat.ch/) and configure the tag strategy and tag prefix.
+
+When a user attempts to post, they will be prompted to log in with their Nostr browser extension [NIP-07](https://github.com/nostr-protocol/nips/blob/master/07.md).
+
+Comments are published as kind: 1111  as defined in [NIP-22](https://github.com/nostr-protocol/nips/blob/master/22.md) 
+notes tagged with a `t` tag containing the content tag (e.g., `comment:/blog/my-post`). 
+
+Replys to comments are enabled, and are also published as kind: 1111, as defined in [NIP-22](https://github.com/nostr-protocol/nips/blob/master/22.md)
+
 
 
 ## Contribution
@@ -79,26 +84,26 @@ When a user attempts to post, they will be prompted to log in with their Nostr b
   
   ```bash
   # Install dependencies
-  npm install
+  pnpm install
   
   # Generate type stubs
-  npm run dev:prepare
+  pnpm run dev:prepare
   
   # Develop with the playground
-  npm run dev
+  pnpm run dev
   
   # Build the playground
-  npm run dev:build
+  pnpm run dev:build
   
   # Run ESLint
-  npm run lint
+  pnpm run lint
   
   # Run Vitest
-  npm run test
-  npm run test:watch
+  pnpm run test
+  pnpm run test:watch
   
   # Release new version
-  npm run release
+  pnpm run release
   ```
 
 </details>

package/dist/module.json

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

package/dist/module.mjs

@@ -55,8 +55,8 @@ const module = defineNuxtModule({
       filePath: resolver.resolve("./runtime/components/ScaffoldComment.vue")
     });
     addComponent({
-      name: "CommentCommandBar",
-      filePath: resolver.resolve("./runtime/components/CommentCommandBar.vue")
+      name: "ReplyButton",
+      filePath: resolver.resolve("./runtime/components/ReplyButton.vue")
     });
     addComponent({
       name: "CommentView",

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     content: string;
-    id?: 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

@@ -1,19 +1,23 @@
 <script setup>
+import { onMounted } from "vue";
 import { marked } from "marked";
 const props = defineProps({
   content: { type: String, required: true },
-  id: { type: String, required: false }
+  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="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 class="mt-2 mb-2">
+    <div id="comment-content" />
+    <ReplyButton :content-id="props.id" />
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     content: string;
-    id?: 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.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted } from "vue";
-import { useNuxstr } from "../composables/useNuxstr";
-import { useComments } from "../composables/useComments";
+import useNuxstr from "../composables/useNuxstr";
+import useComments from "../composables/useComments";
 const props = defineProps({
   contentId: { type: String, required: false }
 });

package/dist/runtime/components/PostComment.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import { useComments } from "../composables/useComments";
+import useComments from "../composables/useComments";
 const props = defineProps({
   contentId: { type: String, required: false }
 });

package/dist/runtime/components/PostReply.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useReplies } from "../composables/useReplies";
+import useReplies from "../composables/useReplies";
 import { ref } from "vue";
 const props = defineProps({
   rootId: { type: String, required: true }
@@ -23,7 +23,7 @@ async function postReply(comment) {
 </script>
 
 <template>
-  <div class="text-sm text-muted-foreground  mt-16 p-6">
+  <div class="text-sm text-muted-foreground  mt-4 p-6">
     <div class="flex gap-2">
       <div class="flex-1">
         <UTextarea
@@ -33,13 +33,13 @@ async function postReply(comment) {
           :rows="4"
         />
       </div>
-      <div class="flex flex-col justify-center items-center p-2">
+      <div class="flex flex-col justify-center items-centerp-2">
         <UButton
           icon="mingcute:send-line"
           size="xl"
           color="primary"
           variant="solid"
-          class="mb-4 mr-2"
+
           @click="postReply(content)"
         />
       </div>

package/dist/runtime/components/{CommentCommandBar.vue → ReplyButton.vue}

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

package/dist/runtime/components/ReplyView.vue

@@ -9,14 +9,16 @@ const props = defineProps({
     <div
       v-for="reply in props.replies"
       :key="reply.id"
-      class="rounded border border-gray-900 p-3 mt-2 mb-2"
+      class="rounded-md border p-3 mt-2 mb-2"
     >
       <div>
         <comment-author
           :profile="reply.profile"
           :created-at="reply.created_at"
         />
-        <p>{{ reply.content }}</p>
+        <p class="p-2 text-base">
+          {{ reply.content }}
+        </p>
       </div>
     </div>
   </div>

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

@@ -1,23 +1,8 @@
-import type { Comment } from '~/src/runtime/types';
-export declare function useComments(customContentId?: string): {
-    loading: import("vue").Ref<boolean, boolean>;
-    error: import("vue").Ref<string | null, string | null>;
-    comments: import("vue").Ref<{
-        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;
-    }[], Comment[] | {
+import { type Ref, type UnwrapRef } from 'vue';
+declare function useComments(customContentId?: string): {
+    loading: Ref<boolean, boolean>;
+    error: Ref<UnwrapRef<string | null>, UnwrapRef<string | null>>;
+    comments: import("vue").ComputedRef<{
         id: string;
         pubkey: string;
         created_at: number;
@@ -37,3 +22,4 @@ export declare function useComments(customContentId?: string): {
     subscribeComments: () => Promise<void>;
     postComment: (comment: string) => Promise<boolean>;
 };
+export default useComments;

package/dist/runtime/composables/useComments.js

@@ -1,15 +1,18 @@
 import { computed, ref } from "vue";
-import { useRoute, useRuntimeConfig, useRequestURL } from "#imports";
-import { useNuxstr } from "./useNuxstr.js";
+import { useRequestURL, useRoute, useRuntimeConfig } from "#imports";
+import useNuxstr from "./useNuxstr.js";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
-export function useComments(customContentId) {
+function useComments(customContentId) {
   const { ndk, connect, isLoggedIn, mapComment, pubkey, fetchProfile } = useNuxstr();
   const route = useRoute();
   const config = useRuntimeConfig();
   const opts = config.public?.nuxstrComments || {};
   const loading = ref(false);
   const error = ref(null);
-  const comments = ref([]);
+  const commentsData = ref([]);
+  const comments = computed(() => {
+    return commentsData.value.slice().sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+  });
   const contentId = computed(() => {
     if (customContentId) return customContentId;
     return route.path;
@@ -27,12 +30,18 @@ export function useComments(customContentId) {
   }
   async function subscribeComments() {
     await connect();
-    const filter = { kinds: [NDKKind.GenericReply], ["#t"]: [tagValue()], limit: 100, ["#k"]: ["web"], ["#A"]: [fullUrl(contentId.value)] };
-    const sub = await ndk.subscribe(filter);
+    const filter = {
+      kinds: [NDKKind.GenericReply],
+      ["#t"]: [tagValue()],
+      limit: 100,
+      ["#k"]: ["web"],
+      ["#A"]: [fullUrl(contentId.value)]
+    };
+    const sub = ndk.subscribe(filter);
     sub.on("event", async (event) => {
       const comment = mapComment(event);
       comment.profile = await fetchProfile(event.pubkey);
-      comments.value.push(comment);
+      commentsData.value.push(comment);
     });
   }
   async function postComment(comment) {
@@ -58,9 +67,10 @@ export function useComments(customContentId) {
       // Defined NIP 73
       ["K", "web"],
       // Defined NIP 73,
-      ["p", pubkey.value]
+      ["p", pubkey ?? ""]
     ];
     return event;
   }
   return { loading, error, comments, isLoggedIn, subscribeComments, postComment };
 }
+export default useComments;

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

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

package/dist/runtime/composables/useNuxstr.js

@@ -2,19 +2,21 @@ import { computed, ref } from "vue";
 import { useRuntimeConfig } from "#imports";
 import NDK, { NDKNip07Signer } from "@nostr-dev-kit/ndk";
 import { useToast } from "#ui/composables/useToast";
-export function useNuxstr() {
+function useNuxstr() {
+  const DEFAULT_PUBKEY = "";
   const w = globalThis;
   if (!w.__nuxstr) {
     w.__nuxstr = {
       ndk: null,
       signer: null,
-      pubkey: ref(null),
+      pubkey: ref(DEFAULT_PUBKEY),
       isConnecting: ref(false),
       isConnected: ref(false),
-      userProfile: ref(null)
+      userProfile: ref(void 0)
     };
   }
   const state = w.__nuxstr;
+  const DEFAULT_TIMESTAMP = 0;
   const config = useRuntimeConfig();
   const opts = config.public?.nuxstrComments || {};
   function initializeNDK() {
@@ -52,13 +54,14 @@ export function useNuxstr() {
   async function login() {
     if (await checkExtension()) {
       const ndk = initializeNDK();
+      await connect();
       const signer = new NDKNip07Signer();
       ndk.signer = signer;
-      const user = await signer.user();
+      const account = await signer.user();
       state.signer = signer;
-      state.pubkey.value = user.pubkey;
-      await connect();
-      const profile = await ndk.getUser({ pubkey: user.pubkey });
+      state.pubkey.value = account.pubkey;
+      const user = ndk.getUser({ pubkey: account.pubkey });
+      const profile = await user.fetchProfile();
       state.userProfile.value = mapProfile(profile);
     }
   }
@@ -66,14 +69,15 @@ export function useNuxstr() {
     return {
       id: event.id,
       pubkey: event.pubkey,
-      created_at: event.created_at || 0,
+      created_at: event.created_at || DEFAULT_TIMESTAMP,
       content: event.content,
-      profile: null
+      profile: void 0
     };
   }
   async function fetchProfile(pubkey) {
     try {
-      const user = state.ndk.getUser({ pubkey });
+      const ndk = initializeNDK();
+      const user = ndk.getUser({ pubkey });
       const profile = await user.fetchProfile();
       return mapProfile(profile);
     } catch (error) {
@@ -82,6 +86,7 @@ export function useNuxstr() {
     }
   }
   function mapProfile(profile) {
+    if (profile === null) return {};
     return {
       display_name: profile.displayName,
       about: profile.about,
@@ -94,7 +99,7 @@ export function useNuxstr() {
   }
   function logout() {
     state.signer = null;
-    state.pubkey.value = null;
+    state.pubkey.value = DEFAULT_PUBKEY;
   }
   return {
     get ndk() {
@@ -104,9 +109,10 @@ export function useNuxstr() {
     login,
     logout,
     isLoggedIn,
-    pubkey: state.pubkey,
+    pubkey: state.pubkey.value,
     mapProfile,
     mapComment,
     fetchProfile
   };
 }
+export default useNuxstr;

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

@@ -1,4 +1,4 @@
-export declare function useReplies(rootCommentId?: string): {
+declare function useReplies(rootCommentId: string): {
     subscribeReplies: () => Promise<void>;
     replies: import("vue").ComputedRef<{
         id: string;
@@ -17,5 +17,5 @@ export declare function useReplies(rootCommentId?: string): {
         } | undefined;
     }[]>;
     reply: (comment: string) => Promise<boolean>;
-    count: import("vue").ComputedRef<Promise<string>>;
 };
+export default useReplies;

package/dist/runtime/composables/useReplies.js

@@ -1,7 +1,7 @@
 import { computed, ref } from "vue";
-import { useNuxstr } from "./useNuxstr.js";
+import useNuxstr from "./useNuxstr.js";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
-export function useReplies(rootCommentId) {
+function useReplies(rootCommentId) {
   const { ndk, connect, mapComment, pubkey, fetchProfile } = useNuxstr();
   const repliesData = ref([]);
   const error = ref(null);
@@ -11,7 +11,7 @@ export function useReplies(rootCommentId) {
   async function subscribeReplies() {
     await connect();
     const filter = { kinds: [NDKKind.GenericReply], limit: 100, ["#e"]: [rootCommentId] };
-    const sub = await ndk.subscribe(filter);
+    const sub = ndk.subscribe(filter);
     sub.on("event", async (event) => {
       const reply2 = mapComment(event);
       reply2.profile = await fetchProfile(event.pubkey);
@@ -33,16 +33,10 @@ export function useReplies(rootCommentId) {
       ["e", `${rootCommentId}`],
       ["k", `${NDKKind.GenericReply}`],
       // The parent kind
-      ["p", pubkey.value]
+      ["p", pubkey ?? ""]
     ];
     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 };
+  return { subscribeReplies, replies, reply };
 }
+export default useReplies;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threenine/nuxstr-comments",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Nuxt module to enable Nostr Comments on Nuxt 4 based websites",
   "repository": "threenine/nuxstr-comments",
   "license": "MIT",
@@ -24,7 +24,6 @@
   ],
   "dependencies": {
     "@nostr-dev-kit/ndk": "^2.14.33",
-    "@nuxt/kit": "^4.0.3",
     "defu": "^6.1.4",
     "marked": "^16.2.1"
   },
@@ -32,13 +31,15 @@
     "@nuxt/devtools": "^2.6.2",
     "@nuxt/eslint": "1.9.0",
     "@nuxt/eslint-config": "^1.9.0",
+    "@nuxt/kit": "^4.1.2",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.1.1",
+    "@nuxt/schema": "^4.1.2",
     "@nuxt/scripts": "0.11.10",
     "@nuxt/test-utils": "^3.19.2",
     "@nuxt/ui": "^3.3.3",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/vue": "^8.1.0",
+    "@types/node": "latest",
     "@unhead/vue": "^2.0.14",
     "changelogen": "^0.6.2",
     "eslint": "^9.35.0",
@@ -46,8 +47,7 @@
     "nuxt": "^4.1.2",
     "typescript": "~5.9.2",
     "vitest": "^3.2.4",
-    "vue-tsc": "^3.0.6",
-    "@types/node": "latest"
+    "vue-tsc": "^3.0.6"
   },
   "scripts": {
     "dev": "pnpm run dev:prepare && nuxi dev playground",