diff --git a/src/components/nostr/kinds/ArticleDetailRenderer.tsx b/src/components/nostr/kinds/ArticleDetailRenderer.tsx index 8fe7fe8..6e512aa 100644 --- a/src/components/nostr/kinds/ArticleDetailRenderer.tsx +++ b/src/components/nostr/kinds/ArticleDetailRenderer.tsx @@ -7,6 +7,7 @@ import { getArticleTitle, getArticleSummary, getArticlePublished, + getArticleImage, } from "applesauce-core/helpers/article"; import { UserName } from "../UserName"; import { EmbeddedEvent } from "../EmbeddedEvent"; @@ -126,6 +127,7 @@ export function Kind30023DetailRenderer({ event }: { event: NostrEvent }) { const title = useMemo(() => getArticleTitle(event), [event]); const summary = useMemo(() => getArticleSummary(event), [event]); const published = useMemo(() => getArticlePublished(event), [event]); + const imageUrl = useMemo(() => getArticleImage(event), [event]); // Get canonical URL from "r" tag to resolve relative URLs const canonicalUrl = useMemo(() => { @@ -163,6 +165,9 @@ export function Kind30023DetailRenderer({ event }: { event: NostrEvent }) { }) : null; + // Resolve article image URL + const resolvedImageUrl = imageUrl ? resolveUrl(imageUrl) : null; + return (
{/* Article Header */} @@ -170,6 +175,16 @@ export function Kind30023DetailRenderer({ event }: { event: NostrEvent }) { {/* Title */} {title &&

{title}

} + {/* Featured Image */} + {resolvedImageUrl && ( + + )} + {/* Summary */} {summary &&

{summary}

}