/** * Cloudflare Images variant utilities * Generates properly formatted URLs for Cloudflare Image variants */ export type CloudflareVariant = | 'avatar' | 'banner' | 'bannermobile' | 'card' | 'cardthumb' | 'logo' | 'public'; /** * Build a Cloudflare image URL with specified variant * Uses CDN proxy for branded URLs */ export function getCloudflareImageUrl( imageId: string | undefined, variant: CloudflareVariant = 'public' ): string | undefined { if (!imageId) return undefined; return `https://cdn.thrillwiki.com/images/${imageId}/${variant}`; } /** * Generate responsive image srcset for card images * Useful for elements */ export function getCloudflareImageSrcSet(imageId: string | undefined): string | undefined { if (!imageId) return undefined; return [ `${getCloudflareImageUrl(imageId, 'cardthumb')} 600w`, `${getCloudflareImageUrl(imageId, 'card')} 1200w`, `${getCloudflareImageUrl(imageId, 'public')} 1366w` ].join(', '); } /** * Get responsive banner URLs for mobile and desktop */ export function getBannerUrls(imageId: string | undefined) { if (!imageId) return { mobile: undefined, desktop: undefined }; return { mobile: getCloudflareImageUrl(imageId, 'bannermobile'), desktop: getCloudflareImageUrl(imageId, 'banner') }; } /** * Extract Cloudflare image ID from various URL formats * Supports both old imagedelivery.net and new CDN URLs */ export function extractCloudflareImageId(url: string): string | null { // Match old imagedelivery.net URLs const deliveryMatch = url.match(/imagedelivery\.net\/[^\/]+\/([a-f0-9-]+)\//i); if (deliveryMatch) return deliveryMatch[1]; // Match new cdn.thrillwiki.com URLs const cdnMatch = url.match(/cdn\.thrillwiki\.com\/images\/([a-f0-9-]+)\//i); return cdnMatch ? cdnMatch[1] : null; }