feat: implement proxied image URL functionality in KIND20Card, TrendingImage, and TrendingImageNew components

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<NostrEvent | null> {
-    // 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;
+  }
 }