highperfocused/lumina
1
0
Fork 0
mirror of https://github.com/lumina-rocks/lumina.git synced 2026-06-04 09:41:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
highperfocused
2025-05-04 21:57:20 +02:00
parent b7e70632eb
commit 6112f2c9c5
5 changed files with 30 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.env.example
View File

@@ -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
NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-umami-website-id
NEXT_PUBLIC_ENABLE_IMGPROXY=false
NEXT_PUBLIC_IMGPROXY_URL=https://your-imgproxy-url.com

16
components/KIND20Card.tsx
View File

@@ -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<KIND20CardProps> = ({
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 (
<>

16
components/TrendingImage.tsx
View File

@@ -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<TrendingImageProps> = ({ 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 (
<>

16
components/TrendingImageNew.tsx
View File

@@ -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<TrendingImageNewProps> = ({ 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;

19
utils/utils.ts
View File

@@ -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;
}
}