@threenine/nuxstr-comments 1.4.0 → 1.5.1

package/README.md

@@ -64,12 +64,19 @@ export default defineNuxtConfig({
   nuxstrComments: {
     relays: ['wss://relay.damus.io', 'wss://relay.nostr.band'],
     tagStrategy: 'path',
-    tagPrefix: 'content:',
+    tagPrefix: 'comment:',
   },
 })
 ```
+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 enable, and are also published as kind: 1111, as defined in [NIP-22](https://github.com/nostr-protocol/nips/blob/master/22.md)
 
-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.
 
 
 ## Contribution

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@threenine/nuxstr-comments",
   "configKey": "nuxstrComments",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "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.vue

@@ -7,13 +7,13 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="prose prose-sm prose-invert mt-2 mb-2">
+  <div class="mt-2 mb-2">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div
-      class="mb-4"
+      class="mb-1"
       v-html="marked.parse(props.content)"
     />
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <comment-command-bar :content-id="props.id" />
+    <ReplyButton :content-id="props.id" />
   </div>
 </template>

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,6 @@
 <script setup>
-import { useReplies } from "../composables/useReplies";
+import useReplies from "../composables/useReplies";
+import { ref } from "vue";
 const props = defineProps({
   rootId: { type: String, required: true }
 });
@@ -22,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
@@ -32,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,7 +9,7 @@ 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

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.4.0",
+  "version": "1.5.1",
   "description": "Nuxt module to enable Nostr Comments on Nuxt 4 based websites",
   "repository": "threenine/nuxstr-comments",
   "license": "MIT",