@threenine/nuxstr-comments 1.6.0 → 1.7.0

package/README.md

@@ -6,7 +6,7 @@ Find and replace all on all files (CMD+SHIFT+F):
 - Package name: @threenine/nuxstr-comments
 - Description: Nuxstr Comments
 -->
-
+![Nuxt Fathom module](https://res.cloudinary.com/threenine-co-uk/image/upload/v1733252921/nuxstr-comments_rk7pig.png)
 # Nuxstr Comments
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -14,6 +14,7 @@ Find and replace all on all files (CMD+SHIFT+F):
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
+![]()
 Enable [nostr protocol](https://nostr.com/) based comment system on your Nuxt 4 based applications.
 
 - [✨  Release Notes](/CHANGELOG.md)

package/dist/module.json

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

package/dist/module.mjs

@@ -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-tools", "defu");
+      nitroConfig.externals.inline.push("nostr-tools", "defu");
     });
     nuxt.options.build.transpile = nuxt.options.build.transpile || [];
-    nuxt.options.build.transpile.push("tseep", "nostr-tools", "defu");
+    nuxt.options.build.transpile.push("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

@@ -5,7 +5,7 @@ export declare class NostrManager {
     private relays;
     private constructor();
     static getInstance(relays: string[]): NostrManager;
-    subscribe(filter: Filter, onEvent: (event: NToolEvent) => void): import("nostr-tools/abstract-pool").SubCloser;
+    subscribe(filter: Filter, onEvent: (event: NToolEvent) => void, onEose?: () => 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

@@ -19,12 +19,15 @@ export class NostrManager {
     }
     return NostrManager.instance;
   }
-  subscribe(filter, onEvent) {
+  subscribe(filter, onEvent, onEose) {
     return this.pool.subscribeMany(this.relays, filter, {
       onevent(event) {
         if (verifyEvent(event)) {
           onEvent(event);
         }
+      },
+      oneose() {
+        if (onEose) onEose();
       }
     });
   }

package/dist/runtime/components/CommentView.vue

@@ -22,7 +22,7 @@ defineProps({
         class="w-full"
         :ui="{ base: 'p-0 resize-none' }"
       />
-    </ucard>
+    </UCard>
     <ReplyButton :content-id="id" />
   </div>
 </template>

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

@@ -1,6 +1,14 @@
 type __VLS_Props = {
     contentId?: string;
 };
-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>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    querying: (...args: any[]) => void;
+    completed: (...args: any[]) => void;
+    "no-comments": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onQuerying?: ((...args: any[]) => any) | undefined;
+    onCompleted?: ((...args: any[]) => any) | undefined;
+    "onNo-comments"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/NuxstrComments.vue

@@ -1,12 +1,25 @@
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, ref, watch } from "vue";
 import useNuxstr from "../composables/useNuxstr";
 import useComments from "../composables/useComments";
+import SignInModal from "./SignInModal.vue";
 const props = defineProps({
   contentId: { type: String, required: false }
 });
-const { login, isLoggedIn } = useNuxstr();
+const emit = defineEmits(["querying", "completed", "no-comments"]);
+const { isLoggedIn } = useNuxstr();
 const { comments, subscribeComments, loading } = useComments(props.contentId);
+const isSignInModalOpen = ref(false);
+watch(loading, (isLoading) => {
+  if (isLoading) {
+    emit("querying");
+  } else {
+    emit("completed");
+    if (comments.value.length === 0) {
+      emit("no-comments");
+    }
+  }
+});
 onMounted(() => {
   subscribeComments();
 });
@@ -23,66 +36,73 @@ onMounted(() => {
         v-if="!isLoggedIn"
         class="text-sm text-muted-foreground"
       >
-        <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>
+        <UButton
+          color="primary"
+          variant="solid"
+          leading-icon="game-icons:ostrich"
+          @click="isSignInModalOpen = true"
+        >
+          Sign in
+        </UButton>
+
+        <SignInModal v-model:open="isSignInModalOpen" />
       </div>
     </div>
-    <ClientOnly>
+
+    <div
+      v-if="isLoggedIn"
+      class="text-sm text-muted-foreground"
+    >
+      <PostComment :content-id="contentId" />
+    </div>
+
+    <div class="space-y-4">
       <div
-        v-if="isLoggedIn"
-        class="text-sm text-muted-foreground"
+        v-if="loading"
+        class="space-y-4"
       >
-        <PostComment :content-id="contentId" />
+        <scaffold-comment
+          v-for="n in 3"
+          :key="n"
+        />
       </div>
-    </ClientOnly>
-    <ClientOnly>
-      <div class="space-y-4">
-        <div
-          v-if="loading"
-        >
-          <scaffold-comment />
-        </div>
 
-        <div
-          v-else
-          class="space-y-6"
-        >
-          <div v-if="comments.length === 0">
-            <scaffold-comment />
-          </div>
-          <UCard
-            v-for="c in comments"
-            v-else
-            :key="c.id"
+      <div
+        v-else
+        class="space-y-6"
+      >
+        <div v-if="comments.length === 0">
+          <UEmpty
+            icon="i-lucide-message-square-off"
+            title="No comments yet"
+            description="Be the first to share your thoughts!"
             variant="subtle"
-            class="mt-auto"
-            :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
-          >
-            <comment-author
-              :profile="c.profile"
-              :created-at="c.created_at"
-            />
-            <comment-view
-              :id="c.id"
-              :content="c.content"
-            />
-          </UCard>
-
-          <div
-            v-if="isLoggedIn"
-            class=" mt-5"
+            size="sm"
           />
         </div>
+        <UCard
+          v-for="c in comments"
+          v-else
+          :key="c.id"
+          variant="subtle"
+          class="mt-auto"
+          :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
+        >
+          <comment-author
+            :profile="c.profile"
+            :created-at="c.created_at"
+          />
+          <comment-view
+            :id="c.id"
+            :content="c.content"
+          />
+        </UCard>
+
+        <div
+          v-if="isLoggedIn"
+          class=" mt-5"
+        />
       </div>
-    </ClientOnly>
-    <client-only />
+    </div>
   </div>
 </template>

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

@@ -1,6 +1,14 @@
 type __VLS_Props = {
     contentId?: string;
 };
-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>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    querying: (...args: any[]) => void;
+    completed: (...args: any[]) => void;
+    "no-comments": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onQuerying?: ((...args: any[]) => any) | undefined;
+    onCompleted?: ((...args: any[]) => any) | undefined;
+    "onNo-comments"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ScaffoldComment.vue

@@ -3,21 +3,19 @@
 </script>
 
 <template>
-  <div>
-    <p class="text-xs">
-      No comments available
-    </p>
-    <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>
-    </UCard>
-  </div>
+  <UCard
+    variant="subtle"
+    class="mt-auto"
+    :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
+  >
+    <div class="flex items-center gap-1.5">
+      <USkeleton class="h-4 w-5 rounded-full" /><USkeleton class="h-4" />
+    </div>
+
+    <div class="mt-3 space-y-2">
+      <USkeleton class="h-4" />
+    </div>
+  </UCard>
 </template>
 
 <style scoped>

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/SignInModal.vue

@@ -0,0 +1,53 @@
+<script setup>
+import Extension from "./signin/Extension.vue";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+function handleSuccess() {
+  open.value = false;
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    title="Sign in to Comment"
+    description="Choose your preferred way to sign in with Nostr."
+  >
+    <template #body>
+      <div class="space-y-6">
+        <!-- Nostr Education -->
+        <div class="p-4 rounded-lg bg-muted/50">
+          <div class="flex items-center gap-2 mb-2 text-sm font-semibold">
+            <UIcon
+              name="i-lucide-help-circle"
+              class="w-4 h-4"
+            />
+            What is Nostr?
+          </div>
+          <p class="text-xs leading-relaxed text-muted-foreground">
+            Nostr is a decentralized protocol for social media. Instead of a username and password, you use a cryptographic key pair.
+            Your "public key" is your identity, and your "private key" is used to sign messages.  <a
+              href="https://threenine.blog/posts/what-is-nostr"
+              target="_blank"
+              class="underline hover:text-primary text-primary"
+            >Learn more...</a>
+          </p>
+        </div>
+
+        <!-- Sign-in Options -->
+        <div class="space-y-4">
+          <Extension @login-success="handleSuccess" />
+        </div>
+
+        <!-- Footer Info -->
+        <div class="pt-4 border-t border-border">
+          <p class="text-[10px] text-center text-muted-foreground uppercase tracking-wider font-medium">
+            Privacy First
+          </p>
+          <p class="mt-1 text-xs text-center text-muted-foreground">
+            We never see your private key. Signing happens directly in your browser or extension.
+          </p>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/signin/Extension.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "login-success": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onLogin-success"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/signin/Extension.vue

@@ -0,0 +1,56 @@
+<script setup>
+import useNuxstr from "../../composables/useNuxstr";
+const { login } = useNuxstr();
+const emit = defineEmits(["login-success"]);
+async function handleLogin() {
+  await login();
+  emit("login-success");
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-start gap-3 p-4 border rounded-lg border-primary/20 bg-primary/5">
+      <UIcon
+        name="i-lucide-info"
+        class="w-5 h-5 mt-0.5 text-primary"
+      />
+      <div class="text-sm">
+        <p class="font-medium text-primary">
+          Browser Extension (NIP-07)
+        </p>
+        <p class="mt-1 text-muted-foreground">
+          Use a browser extension like Diogel, Alby or nos2x. This is the most secure way to sign in without sharing your private key.
+        </p>
+      </div>
+    </div>
+
+    <UButton
+      block
+      color="primary"
+      size="lg"
+      icon="game-icons:ostrich"
+      label="Sign in with Extension"
+      @click="handleLogin"
+    />
+
+    <p class="text-xs text-center text-muted-foreground">
+      Don't have an extension?
+      <a
+        href="https://threenine.io/products/diogel"
+        target="_blank"
+        class="underline hover:text-primary"
+      >Diogel</a> or
+      <a
+        href="https://getalby.com/"
+        target="_blank"
+        class="underline hover:text-primary"
+      >Get Alby</a> or
+      <a
+        href="https://github.com/fiatjaf/nos2x"
+        target="_blank"
+        class="underline hover:text-primary"
+      >nos2x</a>
+    </p>
+  </div>
+</template>

package/dist/runtime/components/signin/Extension.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "login-success": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onLogin-success"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useComments.js

@@ -33,24 +33,31 @@ function useComments(customContentId) {
     return `${siteUrl()}${path}`;
   }
   async function subscribeComments() {
+    loading.value = true;
     const filter = {
       kinds: [1111],
       // NDKKind.GenericReply is 22
       ["#t"]: [tagValue()],
       limit: 100
     };
-    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);
-    });
+    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);
+      },
+      () => {
+        loading.value = false;
+      }
+    );
   }
   async function postComment(comment) {
     const { publish } = useNostr();

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

@@ -2,7 +2,7 @@ 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;
+    subscribe: (filter: Filter, onEvent: (event: Event) => void, onEose?: () => 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

@@ -5,8 +5,8 @@ export const useNostr = (relays) => {
   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 subscribe = (filter, onEvent, onEose) => {
+    return nostrManager.subscribe(filter, onEvent, onEose);
   };
   const publish = (event) => {
     console.log("publishing Comment", event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threenine/nuxstr-comments",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Nuxt module to enable Nostr Comments on Nuxt 4 based websites",
   "repository": "threenine/nuxstr-comments",
   "license": "MIT",
@@ -30,12 +30,12 @@
     "@nuxt/devtools": "^2.6.2",
     "@nuxt/eslint": "1.9.0",
     "@nuxt/eslint-config": "^1.9.0",
-    "@nuxt/kit": "^4.2.1",
+    "@nuxt/kit": "^4.3.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.2.1",
     "@nuxt/scripts": "0.11.10",
     "@nuxt/test-utils": "^3.19.2",
-    "@nuxt/ui": "^4.3.0",
+    "@nuxt/ui": "^4.5.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/vue": "^8.1.0",
     "@types/node": "latest",
@@ -43,7 +43,7 @@
     "changelogen": "^0.6.2",
     "eslint": "^9.35.0",
     "jsdom": "^26.1.0",
-    "nuxt": "^4.2.1",
+    "nuxt": "^4.3.1",
     "typescript": "~5.9.2",
     "vitest": "^3.2.4",
     "vue-tsc": "^3.0.6"