52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2455,"use client"; import { useCallback, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export interface GenerateBadgeOptions { /** Scale factor for output image (default: 1) */ scale?: number; /** Output format */ format?: "png" | "jpeg"; /** JPEG quality (0-1, default: 0.9) */ quality?: number; /** Background color for JPEG (transparent areas) */ backgroundColor?: string; } export interface UseGenerateBadgeReturn { /** Ref to attach to the badge SVG element */ badgeRef: React.RefObject; /** Generate and download the badge as an image */ generateAndDownload: ( filename?: string, options?: GenerateBadgeOptions, ) => Promise; /** Generate badge as a Blob */ generateBlob: (options?: GenerateBadgeOptions) => Promise; /** Generate badge as a data URL */ generateDataUrl: (options?: GenerateBadgeOptions) => Promise; /** Whether generation is in progress */ isGenerating: boolean; /** Error if generation failed */ error: Error | null; } /** * Convert an image URL to a base64 data URL */ async function imageUrlToBase64(url: string): Promise { // Skip if already a data URL if (url.startsWith("data:")) { return url; } try { // Try fetching through a proxy or directly const response = await fetch(url, { mode: "cors", credentials: "omit", }); if (!response.ok) { throw new Error(`Failed to fetch image: ${response.status}`); } const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result as string); reader.onerror = reject; reader.readAsDataURL(blob); }); } catch { // If CORS fails, try loading via canvas return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = "anonymous"; img.onload = () => { const canvas = document.createElement("canvas"); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; const ctx = canvas.getContext("2d"); if (!ctx) { reject(new Error("Could not get canvas context")); return; } ctx.drawImage(img, 0, 0); try { resolve(canvas.toDataURL("image/png")); } catch { // If tainted canvas, return original URL resolve(url); } }; img.onerror = () => { // Return original URL if all else fails resolve(url); }; img.src = url; }); } } /** * Embed all external images in SVG as base64 data URLs */ async function embedImagesInSvg(svg: SVGSVGElement): Promise { const clonedSvg = svg.cloneNode(true) as SVGSVGElement; const images = clonedSvg.querySelectorAll("image"); const embedPromises = Array.from(images).map(async (img) => { const href = img.getAttribute("href") || img.getAttributeNS("http://www.w3.org/1999/xlink", "href"); if (href && !href.startsWith("data:")) { try { const base64 = await imageUrlToBase64(href); img.setAttribute("href", base64); // Also set xlink:href for compatibility img.setAttributeNS("http://www.w3.org/1999/xlink", "href", base64); } catch (err) { console.warn("Failed to embed image:", href, err); } } }); await Promise.all(embedPromises); return clonedSvg; } /** * Hook for generating badge images from SVG */ export function useGenerateBadge(): UseGenerateBadgeReturn { const badgeRef = useRef(null); const [isGenerating, setIsGenerating] = useState(false); const [error, setError] = useState(null); const generateBlob = useCallback( async (options: GenerateBadgeOptions = {}): Promise => { const svg = badgeRef.current; if (!svg) { setError(new Error("Badge SVG ref not attached")); return null; } const { scale = 1, format = "png", quality = 0.9, backgroundColor, } = options; setIsGenerating(true); setError(null); try { // Get SVG dimensions const svgRect = svg.getBoundingClientRect(); const width = svg.viewBox.baseVal.width || svgRect.width; const height = svg.viewBox.baseVal.height || svgRect.height; // Clone SVG and embed all external images as base64 const clonedSvg = await embedImagesInSvg(svg); clonedSvg.setAttribute("width", String(width)); clonedSvg.setAttribute("height", String(height)); // Serialize SVG const serializer = new XMLSerializer(); const svgString = serializer.serializeToString(clonedSvg); const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8", }); const svgUrl = URL.createObjectURL(svgBlob); // Create canvas const canvas = document.createElement("canvas"); canvas.width = width * scale; canvas.height = height * scale; const ctx = canvas.getContext("2d"); if (!ctx) { throw new Error("Could not get canvas context"); } // Fill background if specified or format is JPEG if (backgroundColor || format === "jpeg") { ctx.fillStyle = backgroundColor || "#FFFFFF"; ctx.fillRect(0, 0, canvas.width, canvas.height); } // Scale context ctx.scale(scale, scale); // Load and draw SVG const img = new Image(); img.crossOrigin = "anonymous"; const blob = await new Promise((resolve, reject) => { img.onload = () => { ctx.drawImage(img, 0, 0); URL.revokeObjectURL(svgUrl); canvas.toBlob( (blob) => { resolve(blob); }, format === "jpeg" ? "image/jpeg" : "image/png", quality, ); }; img.onerror = () => { URL.revokeObjectURL(svgUrl); reject(new Error("Failed to load SVG as image")); }; img.src = svgUrl; }); return blob; } catch (err) { const error = err instanceof Error ? err : new Error("Failed to generate badge"); setError(error); return null; } finally { setIsGenerating(false); } }, [], ); const generateDataUrl = useCallback( async (options: GenerateBadgeOptions = {}): Promise => { const blob = await generateBlob(options); if (!blob) return null; return new Promise((resolve) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result as string); reader.onerror = () => resolve(null); reader.readAsDataURL(blob); }); }, [generateBlob], ); const generateAndDownload = useCallback( async ( filename: string = "badge", options: GenerateBadgeOptions = {}, ): Promise => { const blob = await generateBlob(options); if (!blob) return; const { format = "png" } = options; const extension = format === "jpeg" ? "jpg" : "png"; const finalFilename = filename.includes(".") ? filename : `${filename}.${extension}`; // Create download link const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = finalFilename; link.style.display = "none"; document.body.appendChild(link); link.click(); // Cleanup setTimeout(() => { document.body.removeChild(link); URL.revokeObjectURL(url); }, 100); }, [generateBlob], ); return { badgeRef, generateAndDownload, generateBlob, generateDataUrl, isGenerating, error, }; } export interface GenerateBadgeButtonProps extends React.ButtonHTMLAttributes { /** The generate badge hook return value */ badge: UseGenerateBadgeReturn; /** Filename for download (without extension) */ filename?: string; /** Generation options */ options?: GenerateBadgeOptions; /** Content to show while generating */ loadingContent?: React.ReactNode; } /** * Button component for downloading badge */ export function GenerateBadgeButton({ badge, filename = "badge", options, loadingContent = "Generating...", children = "Download Badge", className, disabled, ...props }: GenerateBadgeButtonProps) { const handleClick = async () => { await badge.generateAndDownload(filename, options); }; return ( ); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/default/blocks/badges/generate-badge/components/elements/generate-badge.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]