Adding Nostr Comments Sections

The project includes a complete commenting system using NIP-22 (kind 1111) comments that can be added to any Nostr event or URL. The CommentsSection component provides a full-featured commenting interface with threaded replies, user authentication, and real-time updates.

Basic Usage

import { CommentsSection } from "@/components/comments/CommentsSection";

function ArticlePage({ article }: { article: NostrEvent }) {
  return (
    <div className="space-y-6">
      {/* Your article content */}
      <div>{/* article content */}</div>

      {/* Comments section */}
      <CommentsSection root={article} />
    </div>
  );
}

Props and Customization

The CommentsSection component accepts the following props:

• •root (required): The root event or URL to comment on. Can be a NostrEvent or URL object.
• •title: Custom title for the comments section (default: "Comments")
• •emptyStateMessage: Message shown when no comments exist (default: "No comments yet")
• •emptyStateSubtitle: Subtitle for empty state (default: "Be the first to share your thoughts!")
• •className: Additional CSS classes for styling
• •limit: Maximum number of comments to load (default: 500)

<CommentsSection
  root={event}
  title="Discussion"
  emptyStateMessage="Start the conversation"
  emptyStateSubtitle="Share your thoughts about this post"
  className="mt-8"
  limit={100}
/>

Commenting on URLs

The comments system also supports commenting on external URLs, making it useful for web pages, articles, or any online content:

<CommentsSection
  root={new URL("https://example.com/article")}
  title="Comments on this article"
/>