diff --git a/.github/prompts/nostr-nip68.prompt.md b/.github/prompts/nostr-nip68.prompt.md new file mode 100644 index 0000000..918378a --- /dev/null +++ b/.github/prompts/nostr-nip68.prompt.md @@ -0,0 +1,92 @@ +NIP-68 +====== + +Picture-first feeds +------------------- + +`draft` `optional` + +This NIP defines event kind `20` for picture-first clients. Images must be self-contained. They are hosted externally and referenced using `imeta` tags. + +The idea is for this type of event to cater to Nostr clients resembling platforms like Instagram, Flickr, Snapchat, or 9GAG, where the picture itself takes center stage in the user experience. + +## Picture Events + +Picture events contain a `title` tag and description in the `.content`. + +They may contain multiple images to be displayed as a single post. + +```jsonc +{ + "id": <32-bytes lowercase hex-encoded SHA-256 of the the serialized event data>, + "pubkey": <32-bytes lowercase hex-encoded public key of the event creator>, + "created_at": , + "kind": 20, + "content": "", + "tags": [ + ["title", ""], + + // Picture Data + [ + "imeta", + "url https://nostr.build/i/my-image.jpg", + "m image/jpeg", + "blurhash eVF$^OI:${M{o#*0-nNFxakD-?xVM}WEWB%iNKxvR-oetmo#R-aen$", + "dim 3024x4032", + "alt A scenic photo overlooking the coast of Costa Rica", + "x ", + "fallback https://nostrcheck.me/alt1.jpg", + "fallback https://void.cat/alt1.jpg" + ], + [ + "imeta", + "url https://nostr.build/i/my-image2.jpg", + "m image/jpeg", + "blurhash eVF$^OI:${M{o#*0-nNFxakD-?xVM}WEWB%iNKxvR-oetmo#R-aen$", + "dim 3024x4032", + "alt Another scenic photo overlooking the coast of Costa Rica", + "x ", + "fallback https://nostrcheck.me/alt2.jpg", + "fallback https://void.cat/alt2.jpg", + + "annotate-user <32-bytes hex of a pubkey>::" // Tag users in specific locations in the picture + ], + + ["content-warning", ""], // if NSFW + + // Tagged users + ["p", "<32-bytes hex of a pubkey>", ""], + ["p", "<32-bytes hex of a pubkey>", ""], + + // Specify the media type for filters to allow clients to filter by supported kinds + ["m", "image/jpeg"], + + // Hashes of each image to make them queryable + ["x", ""] + + // Hashtags + ["t", ""], + ["t", ""], + + // location + ["location", ""], // city name, state, country + ["g", ""], + + // When text is written in the image, add the tag to represent the language + ["L", "ISO-639-1"], + ["l", "en", "ISO-639-1"] + ] +} +``` + +The `imeta` tag `annotate-user` places a user link in the specific position in the image. + +Only the following media types are accepted: +- `image/apng`: Animated Portable Network Graphics (APNG) +- `image/avif`: AV1 Image File Format (AVIF) +- `image/gif`: Graphics Interchange Format (GIF) +- `image/jpeg`: Joint Photographic Expert Group image (JPEG) +- `image/png`: Portable Network Graphics (PNG) +- `image/webp`: Web Picture format (WEBP) + +Picture events might be used with [NIP-71](71.md)'s kind `22` to display short vertical videos in the same feed. diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx index e4971a9..c0b75c7 100644 --- a/components/KIND20Card.tsx +++ b/components/KIND20Card.tsx @@ -1,7 +1,7 @@ import type React from "react" import { useProfile } from "nostr-react" import { nip19 } from "nostr-tools" -import { useState } from "react" +import { useState, useEffect } from "react" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel" @@ -16,10 +16,21 @@ import ZapButton from "./ZapButton" import Image from "next/image" import { renderTextWithLinkedTags } from "@/utils/textUtils" +// Function to extract all images from a kind 20 event's imeta tags +const extractImagesFromEvent = (tags: string[][]): string[] => { + return tags + .filter(tag => tag[0] === 'imeta') + .map(tag => { + const urlItem = tag.find(item => item.startsWith('url ')) + return urlItem ? urlItem.split(' ')[1] : null + }) + .filter(Boolean) as string[] +} + interface KIND20CardProps { pubkey: string text: string - image: string + image: string // keeping for backward compatibility eventId: string tags: string[][] event: NostrEvent @@ -38,9 +49,21 @@ const KIND20Card: React.FC = ({ const { data: userData } = useProfile({ pubkey, }) - const [imageError, setImageError] = useState(false); - - if (!image || !image.startsWith("http") || imageError) return null; + const [currentImage, setCurrentImage] = useState(0); + const [imageErrors, setImageErrors] = useState>({}); + const [api, setApi] = useState(null); + + // Extract all images from imeta tags + const imetaImages = extractImagesFromEvent(tags); + + // Use provided image as fallback if no imeta images are found + const allImages = imetaImages.length > 0 ? imetaImages : (image && image.startsWith("http") ? [image] : []); + + // Filter out images with errors + const validImages = allImages.filter(img => !imageErrors[img]); + + // If no valid images are available, don't render the card + if (validImages.length === 0) return null; const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey) @@ -49,6 +72,32 @@ const KIND20Card: React.FC = ({ const hrefProfile = `/profile/${nip19.npubEncode(pubkey)}` const profileImageSrc = userData?.picture || "https://robohash.org/" + pubkey const uploadedVia = tags.find((tag) => tag[0] === "client")?.[1] + + // Handle image error by marking that specific image as having an error + const handleImageError = (errorImage: string) => { + setImageErrors(prev => ({ + ...prev, + [errorImage]: true + })); + } + + // Update current image index when carousel slides + useEffect(() => { + if (!api) return; + + const onSelect = () => { + setCurrentImage(api.selectedScrollSnap()); + }; + + api.on('select', onSelect); + + // Initial selection + onSelect(); + + return () => { + api.off('select', onSelect); + }; + }, [api]); return ( <> @@ -79,21 +128,45 @@ const KIND20Card: React.FC = ({
-
-
- {text} setImageError(true)} - loading="lazy" - style={{ - maxHeight: "80vh", - margin: "auto" - }} - /> -
-
+ {validImages.length > 0 && ( + + + {validImages.map((imageUrl, index) => ( + +
+
+ {text} handleImageError(imageUrl)} + loading="lazy" + style={{ + maxHeight: "80vh", + margin: "auto" + }} + /> +
+
+ + ))} + + {validImages.length > 1 && ( + <> + + +
+
+ {`${currentImage + 1} / ${validImages.length}`} +
+
+ + )} + + )}
{renderTextWithLinkedTags(text, tags)}