feat(images): display images within posts

src/components/displayEventCard.tsx

@@ -3,6 +3,7 @@ import { Filter, type Event, UnsignedEvent } from "nostr-tools";
 import { FcLike, FcDislike } from "react-icons/fc";
 import { FaRetweet } from "react-icons/fa";
 import { BsChatRightQuote } from "react-icons/bs";
+import { extractImageLinks } from "./../utils/parsing";
 import RepostEventCard from "./repostEventCard";
 
 
@@ -43,14 +44,15 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
 
 		return stats;
 	}
-
+	
 	const {data: userData} = useProfile({pubkey: props.event.pubkey});
 	const reactionEvents = useNostrEvents({
 			filter: {
 				"#e": [props.event.id],
 				kinds: [6, 7],
 			},
 	}).events;
+	const {txtContent, imgLinks} = extractImageLinks(props.event.content);
 
 	let {
 		nLikes, nDislikes, 
@@ -114,7 +116,16 @@ export default function DisplayEventCard(props: DisplayEventCardProps) {
   		</div>
   		<div className="px-4 py-5 sm:p-6">
   			<div className="mt-2">
-					<span className="text-lg text-gray-800 dark:text-gray-200">{props.event.content}</span>					
+					<span className="text-lg text-gray-800 dark:text-gray-200">{txtContent}</span>					
+					{imgLinks ? (
+						//image link found
+						imgLinks.map((imgLink, i) => {
+							return <img src={imgLink} key={i}></img>
+						})
+					):
+						// no img link found so just return nothing
+						null
+					}
   			</div>
   		</div>
   		<div 

src/components/repostEventCard.tsx

@@ -4,6 +4,7 @@ import { FcLike, FcDislike } from "react-icons/fc";
 import { FaRetweet } from "react-icons/fa";
 import { BsChatRightQuote } from "react-icons/bs";
 import RepostedEventCard from "./repostedEventCard"
+import { extractImageLinks } from "../utils/parsing";
 import { useEffect, useState } from "react";
 
 
@@ -48,6 +49,8 @@ export default function RepostEventCard(props: RepostEventCardProps) {
 	}
 
 	const [relevantEvent, setRelevantEvent] = useState<Event | null>(null);
+	const {txtContent, imgLinks} = extractImageLinks(props.event.content);
+
 	const {data: userData} = useProfile({pubkey: props.event.pubkey});
 	const reactionEvents = useNostrEvents({
 			filter: {
@@ -108,7 +111,14 @@ export default function RepostEventCard(props: RepostEventCardProps) {
 							<>
 								<FaRetweet className="inline-block h-5 w-5 text-green-700 dark:text-green-300 pb-1"/> <span className="underline decoration-green-700 dark:decoration-green-300">{userData?.name}</span> reposted:
 							</>		
-						) : <>{props.event.content}</>
+						) : <>
+								{txtContent}
+					  		{imgLinks ? (
+					  			imgLinks.map((imgLink, i) => {
+					  				return <img src={imgLink} key={i}></img>
+					  			})
+					  		): null}
+						</>
 						}	
 					</span>			
 

src/components/repostedEventCard.tsx

@@ -1,6 +1,8 @@
 import { useProfile } from "nostr-react";
 import { Filter, type Event, UnsignedEvent } from "nostr-tools";
 
+import { extractImageLinks } from "../utils/parsing";
+
 
 interface RepostedEventCardProps {
 	pk: string | null,
@@ -13,6 +15,7 @@ interface RepostedEventCardProps {
 
 export default function RepostedEventCard(props: RepostedEventCardProps) {
 	const {data: userData} = useProfile({pubkey: props.event.pubkey});
+	const {txtContent, imgLinks} = extractImageLinks(props.event.content);
 
 
 	return (
@@ -45,7 +48,12 @@ export default function RepostedEventCard(props: RepostedEventCardProps) {
   		<div className="px-4 py-5 sm:p-6 w-full">
   			<div className="mt-2 w-full">
 					<span className="inline-block w-full text-lg text-gray-800 dark:text-gray-200 text-start pl-2 pb-1">
-						{props.event.content}	
+						{txtContent}	
+					  {imgLinks ? (
+					  	imgLinks.map((imgLink, i) => {
+					  		return <img src={imgLink} key={i}></img>
+					  	})
+					  ): null}
 					</span>					
   			</div>
   		</div>

src/utils/parsing.ts

@@ -0,0 +1,33 @@
+export interface ExtractedImgLinks {
+	txtContent: string,
+	imgLinks: string[],
+}
+
+export function extractImageLinks(textContent: string): ExtractedImgLinks {
+	/* F(x) to extract image links within text content data */
+
+	const tmpTxtContent = textContent.replaceAll("\n", " ");
+	const imgExtensions = ["png", "jpg", "jpeg", "webp", "gif"];
+	const words = tmpTxtContent.split(" ");
+	let imgLinks: string[] = [];
+
+	for (let i = 0; i < words.length; i++) {
+		if (words[i].slice(0, 4) != "http") continue;
+
+		const subWords = words[i].split(".");
+		const ext = subWords[subWords.length - 1];
+
+		if (imgExtensions.includes(ext)) {
+			imgLinks.push(words[i]);
+		} else {
+			continue
+		};
+
+		textContent = textContent.replaceAll(words[i], "");
+	}
+
+	return {
+		txtContent: textContent,
+		imgLinks,
+	}
+}