quote embed tings

client/src/components/PostCard/NewThreadCard.tsx

@@ -6,7 +6,7 @@ import { minePow } from '../../utils/mine';
 import { publish } from '../../utils/relays';
 import NostrImg from '../../utils/ImgUpload';
 
-const difficulty = 25
+const difficulty = 20
 
 const NewThreadCard: React.FC = () => {
   const [comment, setComment] = useState("");

client/src/components/PostCard/PostCard.tsx

@@ -7,6 +7,8 @@ import { useEffect, useState } from 'react';
 import { subNote } from '../../utils/subscriptions';
 import { getMetadata, uniqBy } from '../../utils/utils';
 import { getLinkPreview } from 'link-preview-js';
+import { subNoteOnce } from '../../utils/subscriptions';
+import QuoteEmbed from './QuoteEmbed';
 
 const colorCombos = [
   'from-red-400 to-yellow-500',
@@ -59,7 +61,7 @@ const timeAgo = (unixTime: number) => {
 const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => {
     // Replace 10 with the actual number of comments for each post
     const numberOfComments = 10;
-    const { comment, file } = parseContent(event);
+    let { comment, file } = parseContent(event);
     const colorCombo = getColorFromHash(event.pubkey, colorCombos);
     const [isExpanded, setIsExpanded] = useState(false);
     const truncatedComment = comment.slice(0, 240);
@@ -70,6 +72,13 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
     }
 
     const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
+    const [quoteEvents, setQuoteEvents] = useState<Event[]>([]); // Initialize state
+
+        // Define your callback function for subGlobalFeed
+      const onEvent = (event: Event, relay: string) => {
+          setQuoteEvents((prevEvents) => [...prevEvents, event]);
+          console.log(event.id + ' ' + event.kind + ' ' + event.tags);
+      };
 
     useEffect(() => {
       const urls = comment.match(/\bhttps?:\/\/\S+/gi);
@@ -78,8 +87,25 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
           .then((preview) => setLinkPreview(preview as LinkPreview))
           .catch((error) => console.error(error));
       }
+
+      const match = comment.match(/\bnostr:([a-z0-9]+)/i);
+      const nostrQuoteID = match && match[1];
+      if (nostrQuoteID && nostrQuoteID.length > 0) {
+        let id_to_hex = String(nip19.decode(nostrQuoteID as string).data);
+        subNoteOnce(id_to_hex, onEvent);
+
+        comment = comment.replace(/\bnostr:[a-z0-9]+\b/i, '').trim();
+      }
     }, [comment]);
 
+    const getMetadataEvent = (event: Event) => {
+      const metadataEvent = quoteEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
+      if (metadataEvent) {
+          return metadataEvent;
+      }
+      return null;
+  }
+    
   return (
     <>
       <CardContainer>
@@ -122,6 +148,9 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
               </a>
             </div>
           )}
+          {quoteEvents[0] && quoteEvents.length > 0 && (
+            <QuoteEmbed event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
+          )}
           </div>
           {file !== "" && (
             <div className="file">

client/src/components/PostCard/QuoteEmbed.tsx

@@ -0,0 +1,152 @@
+import CardContainer from './CardContainer';
+import { FolderIcon } from '@heroicons/react/24/outline';
+import { parseContent } from '../../utils/content';
+import { Event } from 'nostr-tools';
+import { nip19 } from 'nostr-tools';
+import { useEffect, useState } from 'react';
+import { subNote } from '../../utils/subscriptions';
+import { getMetadata, uniqBy } from '../../utils/utils';
+import { getLinkPreview } from 'link-preview-js';
+import { subNoteOnce } from '../../utils/subscriptions';
+
+const colorCombos = [
+  'from-red-400 to-yellow-500',
+  'from-green-400 to-blue-500',
+  'from-purple-400 to-pink-500',
+  'from-yellow-400 to-orange-500',
+  'from-indigo-400 to-purple-500',
+  'from-pink-400 to-red-500',
+  'from-blue-400 to-indigo-500',
+  'from-orange-400 to-red-500',
+  'from-teal-400 to-green-500',
+  'from-cyan-400 to-teal-500',
+  'from-lime-400 to-green-500',
+  'from-amber-400 to-orange-500',
+  'from-rose-400 to-pink-500',
+  'from-violet-400 to-purple-500',
+  'from-sky-400 to-cyan-500'
+];
+
+const getColorFromHash = (id: string, colors: string[]): string => {
+  // Create a simple hash from the event.id
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = (hash << 5) - hash + id.charCodeAt(i);
+  }
+
+  // Use the hash to pick a color from the colors array
+  const index = Math.abs(hash) % colors.length;
+  return colors[index];
+};
+
+const timeAgo = (unixTime: number) => {
+  const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
+  
+  if (seconds < 60) return `now`;
+  
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+
+  const weeks = Math.floor(days / 7);
+  return `${weeks}w`;
+};
+
+const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}) => {
+    // Replace 10 with the actual number of comments for each post
+    const numberOfComments = 10;
+    const { comment, file } = parseContent(event);
+    const colorCombo = getColorFromHash(event.pubkey, colorCombos);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const truncatedComment = comment.slice(0, 240);
+
+    let metadataParsed = null;
+    if (metadata !== null) {
+        metadataParsed = getMetadata(metadata);
+    }
+
+    const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
+
+    useEffect(() => {
+      const urls = comment.match(/\bhttps?:\/\/\S+/gi);
+      if (urls && urls.length > 0) {
+        getLinkPreview(urls[0])
+          .then((preview) => setLinkPreview(preview as LinkPreview))
+          .catch((error) => console.error(error));
+      }
+    }, [comment]);
+    
+  return (
+    <div className="link-preview p-1 bg-gradient-to-r from-black to-neutral-900 rounded-lg border border-neutral-800">
+        <div className="flex flex-col">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center">
+            {metadataParsed ? 
+              <>
+              <img className={`h-5 w-5 rounded-full`} src={metadataParsed.picture} />
+              <div className="ml-2 text-sm font-semibold">{metadataParsed.name}</div>
+              </>
+              :
+              <>
+              <div className={`h-5 w-5 bg-gradient-to-r ${colorCombo} rounded-full`} />
+              <div className="ml-2 text-sm font-semibold">Anonymous</div>
+              </>
+            }
+            </div>
+          </div>
+          <div className="mr-2 flex flex-col break-words">
+          {isExpanded ? comment : truncatedComment}
+        {comment.length > 240 && (
+          <button className="text-gray-500">
+            ... Read more
+          </button>
+        )}
+            {linkPreview && linkPreview.images && linkPreview.images.length > 0 && (
+            <div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800">
+              <a href={linkPreview.url} target="_blank" rel="noopener noreferrer" className="">
+                <img src={linkPreview.images[0]} alt={linkPreview.title} className="rounded-lg"/>
+                <div className="font-semibold text-xs text-gray-300">
+                  {linkPreview.title}
+                </div>
+              </a>
+            </div>
+          )}
+          </div>
+          {file !== "" && (
+            <div className="file">
+                <img
+                  src={file}
+                  loading="lazy"
+                /> 
+            </div>
+           )}
+        </div>
+    </div>
+  );
+};
+
+interface LinkPreview {
+  url: string;
+  title: string;
+  siteName?: string;
+  description?: string;
+  mediaType: string;
+  contentType?: string;
+  images: string[];
+  videos: {
+    url?: string;
+    secureUrl?: string;
+    type?: string;
+    width?: string;
+    height?: string;
+    [key: string]: any;
+  }[];
+  [key: string]: any;
+}
+
+export default QuoteEmbed;

client/src/utils/subscriptions.ts

@@ -170,3 +170,37 @@ export const subNote = (
     });
   }, 200);
 };
+
+/** quick subscribe to a note id (nip-19) */
+export const subNoteOnce = (
+  eventId: string,
+  onEvent: SubCallback,
+) => {
+  const pubkeys = new Set<string>();
+  sub({
+    cb: (evt, relay) => {
+      pubkeys.add(evt.pubkey);
+      onEvent(evt, relay);
+    },
+    filter: {
+      ids: [eventId],
+      kinds: [1],
+      limit: 1,
+    },
+    unsub: true,
+  });
+
+  setTimeout(() => {
+    // get profile info
+    sub({
+      cb: onEvent,
+      filter: {
+        authors: Array.from(pubkeys),
+        kinds: [0],
+        limit: pubkeys.size,
+      },
+      unsub: true,
+    });
+    pubkeys.clear();
+  }, 2000);
+};