@threenine/nuxstr-comments 1.1.1 → 1.2.1

package/dist/module.json

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

package/dist/module.mjs

@@ -45,6 +45,14 @@ const module = defineNuxtModule({
       name: "NuxstrComments",
       filePath: resolver.resolve("./runtime/components/NuxstrComments.vue")
     });
+    addComponent({
+      name: "PostComment",
+      filePath: resolver.resolve("./runtime/components/PostComment.vue")
+    });
+    addComponent({
+      name: "ScaffoldComment",
+      filePath: resolver.resolve("./runtime/components/ScaffoldComment.vue")
+    });
   }
 });
 

package/dist/runtime/components/NuxstrComments.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { onMounted } from "vue";
 import { useNuxstr } from "../composables/useNuxstr";
 import { useNuxstrComments } from "../composables/useNuxstrComments";
 import { marked } from "marked";
@@ -7,16 +7,10 @@ const props = defineProps({
   contentId: { type: String, required: false }
 });
 const { login, isLoggedIn } = useNuxstr();
-const { comments, fetchComments, postComment, loading } = useNuxstrComments(props.contentId);
-const comment = ref("");
+const { comments, subscribeComments, loading } = useNuxstrComments(props.contentId);
 onMounted(() => {
-  fetchComments();
+  subscribeComments();
 });
-async function handlePost() {
-  if (!comment.value.trim()) return;
-  const ok = await postComment(comment.value);
-  if (ok) comment.value = "";
-}
 </script>
 
 <template>
@@ -25,78 +19,72 @@ async function handlePost() {
       <h3 class="text-lg font-semibold">
         Comments
       </h3>
-      <UButton
+
+      <div
         v-if="!isLoggedIn"
-        color="primary"
-        variant="solid"
-        leading-icon="game-icons:ostrich"
-        @click="login"
+        class="text-sm text-muted-foreground"
       >
-        Login
-      </UButton>
+        <UButton
+          color="primary"
+          variant="solid"
+          leading-icon="game-icons:ostrich"
+          @click="login"
+        >
+          Login
+        </UButton>
+      </div>
     </div>
-
     <div
-      v-if="loading"
-      class="text-sm"
+      v-if="isLoggedIn"
+      class="text-sm text-muted-foreground"
     >
-      Loading comments…
+      <PostComment :content-id="contentId" />
     </div>
 
-    <div
-      v-else
-      class="space-y-6"
-    >
+    <div class="space-y-4">
       <div
-        v-for="c in comments"
-        :key="c.id"
-        class="rounded border p-3 mt-2 mb-2"
+        v-if="loading"
       >
-        <div class="flex items-center gap-3 mb-3 mt-2">
-          <div
-            v-if="c.profile?.picture"
-            class="flex-shrink-0"
-          >
-            <UAvatar
-              :src="c.profile.picture"
-              :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>
+        <ScaffoldComment />
+      </div>
+      <div
+        v-else
+        class="space-y-6"
+      >
+        <div
+          v-for="c in comments"
+          :key="c.id"
+          class="rounded border 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>
         </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>
-      </div>
 
-      <div
-        v-if="isLoggedIn"
-        class="space-y-2 mt-5"
-      >
-        <UTextarea
-          v-model="comment"
-          class="w-full"
-          placeholder="Write a comment ...."
-          :rows="4"
+        <div
+          v-if="isLoggedIn"
+          class=" mt-5"
         />
-        <div class="flex justify-end">
-          <UButton
-            color="primary"
-            variant="solid"
-            :disabled="!comment.trim()"
-            @click="handlePost"
-          >
-            Post Comment
-          </UButton>
-        </div>
       </div>
     </div>
   </div>

package/dist/runtime/components/PostComment.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { ref } from "vue";
+import { useNuxstrComments } from "../composables/useNuxstrComments";
+const props = defineProps({
+  contentId: { type: String, required: false }
+});
+const EMPTY_COMMENT = "";
+const { postComment } = useNuxstrComments(props.contentId);
+const comment = ref(EMPTY_COMMENT);
+function isValidComment(commentText) {
+  return commentText.trim().length > 0;
+}
+function clearComment() {
+  comment.value = EMPTY_COMMENT;
+}
+async function handlePost() {
+  if (!isValidComment(comment.value)) return;
+  const wasPosted = await postComment(comment.value);
+  if (wasPosted) {
+    clearComment();
+  }
+}
+</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>
+  </div>
+</template>

package/dist/runtime/components/PostComment.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/ScaffoldComment.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</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>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/ScaffoldComment.vue.d.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/composables/useNuxstr.d.ts

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

package/dist/runtime/composables/useNuxstr.js

@@ -10,7 +10,8 @@ export function useNuxstr() {
       signer: null,
       pubkey: ref(null),
       isConnecting: ref(false),
-      isConnected: ref(false)
+      isConnected: ref(false),
+      userProfile: ref(null)
     };
   }
   const state = w.__nuxstr;
@@ -55,8 +56,34 @@ 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);
+      });
     }
   }
+  function mapComment(event) {
+    return {
+      id: event.id,
+      pubkey: event.pubkey,
+      created_at: event.created_at || 0,
+      content: event.content,
+      profile: null
+    };
+  }
+  function mapProfile(profile) {
+    return {
+      display_name: profile.displayName,
+      about: profile.about,
+      image: profile.picture,
+      nip05: profile.nip05,
+      lud06: profile.lud06,
+      lud16: profile.lud16,
+      website: profile.website
+    };
+  }
   function logout() {
     state.signer = null;
     state.pubkey.value = null;
@@ -69,6 +96,8 @@ export function useNuxstr() {
     login,
     logout,
     isLoggedIn,
-    pubkey: state.pubkey
+    pubkey: state.pubkey,
+    mapProfile,
+    mapComment
   };
 }

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

@@ -1,4 +1,4 @@
-import type { NuxstrComment } from '~/src/runtime/types';
+import type { Comment } from '~/src/runtime/types';
 export declare function useNuxstrComments(customContentId?: string): {
     loading: import("vue").Ref<boolean, boolean>;
     error: import("vue").Ref<string | null, string | null>;
@@ -8,26 +8,32 @@ export declare function useNuxstrComments(customContentId?: string): {
         created_at: number;
         content: string;
         profile?: {
-            name?: string | undefined;
+            pubkey: string;
             display_name?: string | undefined;
             about?: string | undefined;
-            picture?: string | undefined;
+            image?: string | undefined;
             nip05?: string | undefined;
+            lud06?: string | undefined;
+            lud16?: string | undefined;
+            website?: string | undefined;
         } | undefined;
-    }[], NuxstrComment[] | {
+    }[], Comment[] | {
         id: string;
         pubkey: string;
         created_at: number;
         content: string;
         profile?: {
-            name?: string | undefined;
+            pubkey: string;
             display_name?: string | undefined;
             about?: string | undefined;
-            picture?: string | undefined;
+            image?: string | undefined;
             nip05?: string | undefined;
+            lud06?: string | undefined;
+            lud16?: string | undefined;
+            website?: string | undefined;
         } | undefined;
     }[]>;
     isLoggedIn: import("vue").ComputedRef<boolean>;
-    fetchComments: () => Promise<void>;
+    subscribeComments: () => Promise<void>;
     postComment: (comment: string) => Promise<boolean>;
 };

package/dist/runtime/composables/useNuxstrComments.js

@@ -3,7 +3,7 @@ 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 } = useNuxstr();
+  const { ndk, connect, isLoggedIn, mapProfile, mapComment } = useNuxstr();
   const route = useRoute();
   const config = useRuntimeConfig();
   const opts = config.public?.nuxstrComments || {};
@@ -24,60 +24,23 @@ export function useNuxstrComments(customContentId) {
   }
   async function fetchProfile(pubkey) {
     try {
-      const filter = { kinds: [0], authors: [pubkey] };
-      const events = await ndk.fetchEvents(filter);
-      const latestEvent = Array.from(events).sort((a, b) => (b.created_at || 0) - (a.created_at || 0))[0];
-      if (!latestEvent?.content) return void 0;
-      const profileData = JSON.parse(latestEvent.content);
-      return {
-        name: profileData.name,
-        display_name: profileData.display_name,
-        about: profileData.about,
-        picture: profileData.picture,
-        nip05: profileData.nip05
-      };
+      const user = ndk.getUser({ pubkey });
+      const profile = await user.fetchProfile();
+      return mapProfile(profile);
     } catch (error2) {
-      console.warn("Failed to fetch profile for", pubkey, error2);
+      console.error("Failed to fetch profile for", pubkey, error2);
       return void 0;
     }
   }
-  async function getEventsByTag(tag) {
-    try {
-      await connect();
-      const filter = { kinds: [NDKKind.GenericReply], ["#t"]: [tag], limit: 30, ["#k"]: [siteUrl()] };
-      const events = await ndk.fetchEvents(filter);
-      console.log("events", events);
-      return Array.from(events);
-    } catch (error2) {
-      console.warn("Failed to fetch events by tag", tag, error2);
-      return [];
-    }
-  }
-  async function fetchComments() {
-    loading.value = true;
-    error.value = null;
-    try {
-      const events = await getEventsByTag(tagValue());
-      const list = Array.from(events).sort((a, b) => (a.created_at || 0) - (b.created_at || 0));
-      const pubkeys = [...new Set(list.map((e) => e.pubkey))];
-      const profilePromises = pubkeys.map(async (pubkey) => {
-        const profile = await fetchProfile(pubkey);
-        return { pubkey, profile };
-      });
-      const profileResults = await Promise.all(profilePromises);
-      const profileMap = new Map(profileResults.map((r) => [r.pubkey, r.profile]));
-      comments.value = list.map((e) => ({
-        id: e.id,
-        pubkey: e.pubkey,
-        created_at: e.created_at || 0,
-        content: e.content,
-        profile: profileMap.get(e.pubkey)
-      }));
-    } catch (e) {
-      error.value = e?.message || String(e);
-    } finally {
-      loading.value = false;
-    }
+  async function subscribeComments() {
+    await connect();
+    const filter = { kinds: [NDKKind.GenericReply], ["#t"]: [tagValue()], limit: 100, ["#k"]: [siteUrl()] };
+    const sub = await ndk.subscribe(filter);
+    sub.on("event", async (event) => {
+      const comment = mapComment(event);
+      comment.profile = await fetchProfile(event.pubkey);
+      comments.value.push(comment);
+    });
   }
   async function postComment(comment) {
     await connect();
@@ -88,14 +51,10 @@ export function useNuxstrComments(customContentId) {
       ["t", tagValue()],
       ["k", siteUrl()]
     ];
-    const ok = await e.publish().then(() => true).catch((err) => {
+    return await e.publish().then(() => true).catch((err) => {
       error.value = err?.message || String(err);
       return false;
     });
-    if (ok) {
-      await fetchComments();
-    }
-    return ok;
   }
-  return { loading, error, comments, isLoggedIn, fetchComments, postComment };
+  return { loading, error, comments, isLoggedIn, subscribeComments, postComment };
 }

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

@@ -14,6 +14,25 @@ export type NuxstrComment = {
   profile?: NuxstrProfile
 }
 
+export type Comment = {
+  id: string
+  pubkey: string
+  created_at: number
+  content: string
+  profile?: Profile
+}
+
+export type Profile = {
+  pubkey: string
+  display_name?: string
+  about?: string
+  image?: string
+  nip05?: string
+  lud06?: string
+  lud16?: string
+  website?: string
+}
+
 export interface ElementNode {
   type: 'element'
   tag: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threenine/nuxstr-comments",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Nuxstr Comments",
   "repository": "threenine/nuxstr-comments",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@nuxt/schema": "^4.0.3",
     "@nuxt/scripts": "0.11.10",
     "@nuxt/test-utils": "^3.19.2",
-    "@nuxt/ui": "3.3.2",
+    "@nuxt/ui": "^3.3.3",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/vue": "^8.1.0",
     "@unhead/vue": "^2.0.14",