From 6112f2c9c5f3c7fa16f22f3cf8cb3435cfd47349 Mon Sep 17 00:00:00 2001 From: highperfocused Date: Sun, 4 May 2025 21:57:20 +0200 Subject: [PATCH] feat: implement proxied image URL functionality in KIND20Card, TrendingImage, and TrendingImageNew components --- .env.example | 5 ++++- components/KIND20Card.tsx | 16 +++------------- components/TrendingImage.tsx | 16 +++------------- components/TrendingImageNew.tsx | 16 +++------------- utils/utils.ts | 19 +++++++++++++++++-- 5 files changed, 30 insertions(+), 42 deletions(-) diff --git a/.env.example b/.env.example index 33479bf..de165b7 100644 --- a/.env.example +++ b/.env.example @@ -2,4 +2,7 @@ NEXT_PUBLIC_SHOW_GEYSER_FUND=false NEXT_PUBLIC_ENABLE_UMAMI=false NEXT_PUBLIC_UMAMI_URL=https://your-umami-url.com -NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-umami-website-id \ No newline at end of file +NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-umami-website-id + +NEXT_PUBLIC_ENABLE_IMGPROXY=false +NEXT_PUBLIC_IMGPROXY_URL=https://your-imgproxy-url.com \ No newline at end of file diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx index 7666e64..44d9a35 100644 --- a/components/KIND20Card.tsx +++ b/components/KIND20Card.tsx @@ -14,6 +14,7 @@ import ViewCopyButton from "./ViewCopyButton" import type { Event as NostrEvent } from "nostr-tools" import ZapButton from "./ZapButton" import Image from "next/image" +import { getProxiedImageUrl } from "@/utils/utils" interface KIND20CardProps { pubkey: string @@ -49,20 +50,9 @@ const KIND20Card: React.FC = ({ const profileImageSrc = userData?.picture || "https://robohash.org/" + pubkey const uploadedVia = tags.find((tag) => tag[0] === "client")?.[1] - // Create proxied image URL - const getProxiedImageUrl = (url: string) => { - if (!url.startsWith("http")) return url; - try { - // Encode the URL to be used in the proxy - const encodedUrl = encodeURIComponent(url); - return `https://imgproxy.lumina.rocks/resize:fit:1200:800/plain/${encodedUrl}`; - } catch (error) { - console.error("Error creating proxied image URL:", error); - return url; - } - } + const useImgProxy = process.env.NEXT_PUBLIC_ENABLE_IMGPROXY === "true" - const proxiedImageUrl = getProxiedImageUrl(image); + const proxiedImageUrl = useImgProxy ? getProxiedImageUrl(image, 1200, 800) : image; return ( <> diff --git a/components/TrendingImage.tsx b/components/TrendingImage.tsx index 80dc510..213a9c4 100644 --- a/components/TrendingImage.tsx +++ b/components/TrendingImage.tsx @@ -13,6 +13,7 @@ import Image from 'next/image'; import Link from 'next/link'; import { Avatar } from './ui/avatar'; import { AvatarImage } from '@radix-ui/react-avatar'; +import { getProxiedImageUrl } from '@/utils/utils'; interface TrendingImageProps { eventId: string; @@ -47,20 +48,9 @@ const TrendingImage: React.FC = ({ eventId, pubkey }) => { const hrefNote = `/note/${nip19.noteEncode(eventId)}`; const profileImageSrc = userData?.picture || "https://robohash.org/" + pubkey; - // Create proxied image URL - const getProxiedImageUrl = (url: string) => { - if (!url || !url.startsWith("http")) return url; - try { - // Encode the URL to be used in the proxy - const encodedUrl = encodeURIComponent(url); - return `https://imgproxy.lumina.rocks/resize:fit:800:600/plain/${encodedUrl}`; - } catch (error) { - console.error("Error creating proxied image URL:", error); - return url; - } - } + const useImgProxy = process.env.NEXT_PUBLIC_ENABLE_IMGPROXY === "true"; - const proxiedImageSrc = imageSrc && imageSrc.length > 0 ? getProxiedImageUrl(imageSrc[0]) : null; + const proxiedImageSrc = useImgProxy && imageSrc && imageSrc.length > 0 ? getProxiedImageUrl(imageSrc[0], 800, 600) : imageSrc && imageSrc.length > 0 ? imageSrc[0] : null; return ( <> diff --git a/components/TrendingImageNew.tsx b/components/TrendingImageNew.tsx index 63f7f9b..a0970a9 100644 --- a/components/TrendingImageNew.tsx +++ b/components/TrendingImageNew.tsx @@ -10,6 +10,7 @@ import { import Link from 'next/link'; import { Avatar } from './ui/avatar'; import { AvatarImage } from '@radix-ui/react-avatar'; +import { getProxiedImageUrl } from '@/utils/utils'; interface TrendingImageNewProps { event: { @@ -39,20 +40,9 @@ const TrendingImageNew: React.FC = ({ event }) => { const imageUrl = event.tags.find(tag => tag[0] === 'imeta' && tag[1]?.startsWith('url ')) ?.slice(1)[0]?.replace('url ', ''); - // Create proxied image URL - const getProxiedImageUrl = (url: string) => { - if (!url || !url.startsWith("http")) return url; - try { - // Encode the URL to be used in the proxy - const encodedUrl = encodeURIComponent(url); - return `https://imgproxy.lumina.rocks/resize:fit:800:600/plain/${encodedUrl}`; - } catch (error) { - console.error("Error creating proxied image URL:", error); - return url; - } - } + const useImgProxy = process.env.NEXT_PUBLIC_ENABLE_IMGPROXY === "true"; - const proxiedImageUrl = imageUrl ? getProxiedImageUrl(imageUrl) : null; + const proxiedImageUrl = useImgProxy && imageUrl ? getProxiedImageUrl(imageUrl, 800, 600) : imageUrl; const hrefProfile = `/profile/${nip19.npubEncode(event.pubkey)}`; const hrefNote = `/note/${nip19.noteEncode(event.id)}`; const profileImageSrc = userData?.picture || "https://robohash.org/" + event.pubkey; diff --git a/utils/utils.ts b/utils/utils.ts index d22ee16..7759312 100644 --- a/utils/utils.ts +++ b/utils/utils.ts @@ -1,4 +1,4 @@ -import { Event as NostrEvent, finalizeEvent} from "nostr-tools"; +import { Event as NostrEvent, finalizeEvent } from "nostr-tools"; import { hexToBytes } from "@noble/hashes/utils" import { signEventWithBunker } from "./bunkerUtils"; @@ -26,7 +26,7 @@ export function extractDimensions(event: NostrEvent): { width: number; height: n } export async function signEvent(loginType: string | null, event: NostrEvent): Promise { - // Sign event + // Sign event let eventSigned: NostrEvent = { ...event, sig: '' }; if (loginType === 'extension') { eventSigned = await window.nostr.signEvent(event); @@ -54,4 +54,19 @@ export async function signEvent(loginType: string | null, event: NostrEvent): Pr } console.log(eventSigned); return eventSigned; +} + +// Create proxied image URL +export const getProxiedImageUrl = (url: string, width: number, height: number) => { + if (!url.startsWith("http")) return url; + try { + // Encode the URL to be used in the proxy + const encodedUrl = encodeURIComponent(url); + const imgproxyEnv = process.env.NEXT_PUBLIC_IMGPROXY_URL; + const imgproxyUrl = new URL(imgproxyEnv || "https://imgproxy.example.com"); + return `${imgproxyUrl}resize:fit:${width}:${height}/plain/${encodedUrl}`; + } catch (error) { + console.error("Error creating proxied image URL:", error); + return url; + } } \ No newline at end of file