@pixelated-tech/components 3.14.4 → 3.15.0

package/dist/components/admin/site-health/site-health-core-web-vitals.integration.js

@@ -1,6 +1,8 @@
 "use server";
 const debug = false;
 import { getFullPixelatedConfig } from '../../config/config';
+import { smartFetch } from '../../general/smartfetch';
+import { buildUrl } from '../../general/urlbuilder';
 const psiCache = new Map();
 const CACHE_TTL_SUCCESS = 60 * 60 * 1000; // 1 hour for successful results
 const CACHE_TTL_ERROR = 5 * 60 * 1000; // 5 minutes for error results
@@ -86,12 +88,20 @@ export async function performCoreWebVitalsAnalysis(url, siteName, useCache = tru
     }
 }
 export async function fetchPSIData(url) {
-    // Require the API key from the unified pixelated.config.json. No environment fallback.
-    const apiKey = getFullPixelatedConfig()?.google?.api_key;
+    // Require the PSI API key from the unified pixelated.config.json. No environment fallback.
+    const apiKey = getFullPixelatedConfig()?.googlePSI?.api_key;
     if (!apiKey) {
-        throw new Error('Google API key is not set; set google.api_key in pixelated.config.json');
+        throw new Error('Google PSI API key is not set; set googlePSI.api_key in pixelated.config.json');
     }
-    const psiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url)}&key=${apiKey}&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo`;
+    const psiUrl = buildUrl({
+        baseUrl: 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed',
+        params: {
+            url,
+            key: apiKey,
+            strategy: 'mobile',
+            category: 'performance,accessibility,best-practices,seo'
+        }
+    });
     const fetchWithRetry = async (url, maxRetries = 2) => {
         for (let attempt = 0; attempt <= maxRetries; attempt++) {
             try {
@@ -100,10 +110,13 @@ export async function fetchPSIData(url) {
                 const controller = new AbortController();
                 const timeoutId = setTimeout(() => controller.abort(), 60000); // 60 second timeout
                 const start = Date.now();
-                const response = await fetch(url, {
-                    signal: controller.signal,
-                    headers: {
-                        'User-Agent': 'Mozilla/5.0 (compatible; SiteHealthMonitor/1.0)'
+                const response = await smartFetch(url, {
+                    responseType: 'ok',
+                    requestInit: {
+                        signal: controller.signal,
+                        headers: {
+                            'User-Agent': 'Mozilla/5.0 (compatible; SiteHealthMonitor/1.0)'
+                        }
                     }
                 });
                 const elapsed = Date.now() - start;

package/dist/components/admin/site-health/site-health-github.integration.js

@@ -1,5 +1,6 @@
 "use server";
 import { getFullPixelatedConfig } from '../../config/config';
+import { buildUrl } from '../../general/urlbuilder';
 import path from 'path';
 // Debug logging is off by default. Set to true/false here (do not use env vars).
 const debug = false;
@@ -61,12 +62,11 @@ export async function analyzeGitHealth(siteConfig, startDate, endDate, httpFetch
             'Accept': 'application/vnd.github+json',
             'Authorization': `token ${token}`
         };
-        const params = new URLSearchParams();
-        if (since)
-            params.set('since', since);
-        if (until)
-            params.set('until', until);
-        const commitsUrl = `https://api.github.com/repos/${owner}/${repo}/commits?${params.toString()}`;
+        const commitsUrl = buildUrl({
+            baseUrl: 'https://api.github.com',
+            pathSegments: ['repos', owner, repo, 'commits'],
+            params: { ...(since && { since }), ...(until && { until }) }
+        });
         const fetcher = httpFetch || globalThis.fetch;
         const commitsRes = await fetcher(commitsUrl, { headers });
         if (!commitsRes.ok) {

package/dist/components/admin/site-health/site-health-on-site-seo.integration.js

@@ -8,6 +8,7 @@ import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import puppeteer from 'puppeteer';
+import { smartFetch } from '../../general/smartfetch';
 import { EXCLUDED_URL_PATTERNS, EXCLUDED_FILE_EXTENSIONS, EXCLUDED_DIRECTORY_NAMES } from './seo-constants';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -373,10 +374,13 @@ function calculateFacetedNavigationScore(data) {
  */
 async function collectBrowserCachingData(url) {
     try {
-        const response = await fetch(url, {
-            method: 'HEAD', // Use HEAD to get headers without downloading the full content
-            headers: {
-                'User-Agent': 'Mozilla/5.0 (compatible; SEO Analysis Bot)'
+        const response = await smartFetch(url, {
+            responseType: 'ok',
+            requestInit: {
+                method: 'HEAD',
+                headers: {
+                    'User-Agent': 'Mozilla/5.0 (compatible; SEO Analysis Bot)'
+                }
             }
         });
         if (!response.ok) {
@@ -486,11 +490,14 @@ function calculateBrowserCachingScore(data) {
  */
 async function collectGzipCompressionData(url) {
     try {
-        const response = await fetch(url, {
-            method: 'GET', // Changed from HEAD to GET to properly detect compression
-            headers: {
-                'User-Agent': 'Mozilla/5.0 (compatible; SEO Analysis Bot)',
-                'Accept-Encoding': 'gzip, deflate' // Added Accept-Encoding like browsers
+        const response = await smartFetch(url, {
+            responseType: 'ok',
+            requestInit: {
+                method: 'GET',
+                headers: {
+                    'User-Agent': 'Mozilla/5.0 (compatible; SEO Analysis Bot)',
+                    'Accept-Encoding': 'gzip, deflate'
+                }
             }
         });
         if (!response.ok) {
@@ -733,8 +740,11 @@ async function crawlSite(baseUrl, maxPages = 10) {
             visited.add(currentUrl);
             discovered.push(currentUrl);
             try {
-                const response = await fetch(currentUrl, {
-                    headers: { 'User-Agent': 'Mozilla/5.0 (compatible; SEO Analysis Bot)' }
+                const response = await smartFetch(currentUrl, {
+                    responseType: 'ok',
+                    requestInit: {
+                        headers: { 'User-Agent': 'Mozilla/5.0 (compatible; SEO Analysis Bot)' }
+                    }
                 });
                 if (!response.ok)
                     continue;
@@ -1018,7 +1028,9 @@ async function performSiteWideAudits(baseUrl) {
                 case 'robots-txt':
                     try {
                         const robotsUrl = `${protocol}//${baseDomain}/robots.txt`;
-                        const robotsResponse = await fetch(robotsUrl);
+                        const robotsResponse = await smartFetch(robotsUrl, {
+                            responseType: 'ok'
+                        });
                         score = robotsResponse.ok ? 1 : 0;
                         displayValue = score ? 'Robots.txt accessible' : 'Robots.txt not found or inaccessible';
                     }
@@ -1030,7 +1042,9 @@ async function performSiteWideAudits(baseUrl) {
                 case 'sitemap-xml':
                     try {
                         const sitemapUrl = `${protocol}//${baseDomain}/sitemap.xml`;
-                        const sitemapResponse = await fetch(sitemapUrl);
+                        const sitemapResponse = await smartFetch(sitemapUrl, {
+                            responseType: 'ok'
+                        });
                         score = sitemapResponse.ok ? 1 : 0;
                         displayValue = score ? 'Sitemap.xml accessible' : 'Sitemap.xml not found or inaccessible';
                     }
@@ -1054,7 +1068,9 @@ async function performSiteWideAudits(baseUrl) {
                 case 'manifest-file':
                     try {
                         const manifestUrl = `${protocol}//${baseDomain}/manifest.webmanifest`;
-                        const manifestResponse = await fetch(manifestUrl);
+                        const manifestResponse = await smartFetch(manifestUrl, {
+                            responseType: 'ok'
+                        });
                         score = manifestResponse.ok ? 1 : 0;
                         displayValue = score ? 'Manifest.webmanifest accessible' : 'Manifest.webmanifest not found or inaccessible';
                     }
@@ -1129,7 +1145,9 @@ async function getUrlsFromSitemap(baseUrl) {
         const candidates = [`${baseUrl}/sitemap.xml`, `${baseUrl}/sitemap_index.xml`];
         // Attempt to parse robots.txt for sitemap directives
         try {
-            const robotsResp = await fetch(`${baseUrl}/robots.txt`);
+            const robotsResp = await smartFetch(`${baseUrl}/robots.txt`, {
+                responseType: 'ok'
+            });
             if (robotsResp.ok) {
                 const robotsText = await robotsResp.text();
                 const sitemapRegex = /^sitemap:\s*(.+)$/gim;
@@ -1150,7 +1168,9 @@ async function getUrlsFromSitemap(baseUrl) {
         for (const sitemapUrl of candidates) {
             triedUrls.push(sitemapUrl);
             try {
-                const response = await fetch(sitemapUrl);
+                const response = await smartFetch(sitemapUrl, {
+                    responseType: 'ok'
+                });
                 if (!response.ok) {
                     console.warn(`Sitemap URL ${sitemapUrl} returned status ${response.status}`);
                     continue;

package/dist/components/admin/site-health/site-health-template.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { PageGridItem } from '../../general/semantic';
+import { smartFetch } from '../../general/smartfetch';
 import "./site-health.css";
 import { useSiteHealthMockData } from './site-health-mock-context';
 /**
@@ -73,13 +74,16 @@ export function SiteHealthTemplate(props) {
         if (!useCache) {
             url.searchParams.set('cache', 'false');
         }
-        const response = await fetch(url.toString(), {
-            method,
-            headers: {
-                'Content-Type': 'application/json',
-                ...headers,
+        const response = await smartFetch(url.toString(), {
+            responseType: 'ok',
+            requestInit: {
+                method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...headers,
+                },
+                body: body ? JSON.stringify(body) : undefined,
             },
-            body: body ? JSON.stringify(body) : undefined,
         });
         if (!response.ok) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);

package/dist/components/config/config.types.js

@@ -29,6 +29,18 @@ export const SECRET_CONFIG_KEYS = {
         github: [
             'token'
         ],
+        google: [
+            'api_key',
+            'client_id',
+            'client_secret',
+            'refresh_token'
+        ],
+        googlePSI: [
+            'api_key'
+        ],
+        googleGemini: [
+            'api_key'
+        ],
         instagram: [
             'accessToken'
         ],

package/dist/components/general/markdown.js

@@ -1,8 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+/* https://randyperkins2k.medium.com/writing-a-simple-markdown-parser-using-javascript-1f2e9449a558 */
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { SmartImage } from "./smartimage";
 import { usePixelatedConfig } from "../config/config.client";
+import { smartFetch } from "./smartfetch";
 import "./markdown.css";
 /* ========== MARKDOWN ========== */
 /**
@@ -43,3 +46,35 @@ export function Markdown(props) {
     }
     return (_jsx("div", { className: "section-container", children: _jsx("div", { className: "markdown", dangerouslySetInnerHTML: { __html: markdownParser(props.markdowndata) } }) }));
 }
+/* ========== HOOK: useFileData ========== */
+/**
+ * useFileData — Load markdown or JSON files from /data/ directory
+ *
+ * @param {string} filePath - Path to file (e.g., '/data/readme.md')
+ * @param {string} responseType - 'text' or 'json' (default: 'text')
+ * @returns {Object} { data, loading, error }
+ */
+export function useFileData(filePath, responseType = 'text') {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const result = await smartFetch(filePath, { responseType: responseType });
+                setData(result);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to load file');
+                setData(null);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, [filePath, responseType]);
+    return { data, loading, error };
+}

package/dist/components/general/nerdjoke.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
+import { smartFetch } from '../general/smartfetch';
 import "../../css/pixelated.grid.scss";
 import "./nerdjoke.css";
 const debug = false;
@@ -61,10 +62,7 @@ export function NerdJoke(props) {
         const myURLProps = { command: "%2Fnerdjokes", text: "getjokejson" };
         try {
             const url = myURL + "command=" + myURLProps.command + "&text=" + myURLProps.text;
-            const response = await fetch(url);
-            if (!response.ok)
-                throw new Error(`HTTP error! status: ${response.status}`);
-            const jokeData = await response.json();
+            const jokeData = await smartFetch(url);
             setJoke(jokeData);
         }
         catch (error) {

package/dist/components/general/proxy-handler.js

@@ -46,12 +46,12 @@ export function handlePixelatedProxy(req) {
         "default-src 'self'",
         `script-src ${scriptSrc}`,
         `script-src-elem ${scriptSrc}`,
-        "connect-src 'self' https: https://*.hubspot.com https://proxy.pixelated.tech https://sendmail.pixelated.tech https://*.google-analytics.com https://*.analytics.google.com https://cdn.jsdelivr.net",
+        "connect-src 'self' https: https://*.hubspot.com https://*.pixelated.tech https://*.google-analytics.com https://*.analytics.google.com https://cdn.jsdelivr.net https://*.gravatar.com",
         "img-src 'self' data: https: https://*.gravatar.com https://*.staticflickr.com https://*.ctfassets.net https://res.cloudinary.com https://*.ebayimg.com",
         "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://*.google.com https://www.paypalobjects.com https://cdn.curator.io",
         "font-src 'self' data: https://fonts.gstatic.com",
         "media-src 'self' https://*.ctfassets.net",
-        "frame-src 'self' https://*.hubspot.com https://*.googletagmanager.com https://*.adtrafficquality.google https://*.google.com https://calendly.com https://*.calendly.com https://*.hsforms.net https://www.paypal.com https://www.paypalobjects.com",
+        "frame-src 'self' https://calendly.com https://*.hubspot.com https://*.googletagmanager.com https://*.adtrafficquality.google https://*.google.com https://*.calendly.com https://*.hsforms.net https://www.paypal.com https://www.paypalobjects.com https://syndicatedsearch.goog",
         "frame-ancestors 'none'",
         "object-src 'none'",
     ].join("; ");

package/dist/components/general/sitemap.js

@@ -7,6 +7,7 @@ import { getEbayAppToken, getEbayItemsSearch } from "../shoppingcart/ebay.functi
 import { getFullPixelatedConfig } from '../config/config';
 import { CacheManager } from '../general/cache-manager';
 import { getDomain } from './utilities';
+import { smartFetch } from './smartfetch';
 /**
  * Helper to construct an origin string from a Next-like headers() object or plain values.
  * Accepts an object with `get(key)` method, or `undefined` and falls back to localhost origin.
@@ -166,10 +167,7 @@ export async function createImageURLsFromJSON(origin, jsonPath = 'public/site-im
             urlPath = urlPath.slice('public/'.length);
         if (!urlPath.startsWith('/'))
             urlPath = `/${urlPath}`;
-        const resp = await fetch(`${origin}${urlPath}`);
-        if (!resp.ok)
-            return sitemap;
-        const json = await resp.json();
+        const json = await smartFetch(`${origin}${urlPath}`);
         let imgs = [];
         if (Array.isArray(json)) {
             imgs = json;

package/dist/components/general/smartfetch.js

@@ -0,0 +1,211 @@
+/**
+ * smartFetch - Intelligent fetch wrapper with caching, retries, proxy, and timeout support
+ *
+ * Features:
+ * - Multiple response types (json, text, blob)
+ * - Automatic proxy fallback on CORS errors
+ * - Retry with exponential backoff
+ * - Request timeout handling
+ * - Dual caching: Next.js fetch cache + CacheManager
+ * - Enhanced error messages with domain info
+ * - Optional callbacks (onSuccess, onError, onComplete)
+ * - Debug logging
+ *
+ * @example
+ * // Simple JSON fetch with caching
+ * const data = await smartFetch('https://api.example.com/user/123', {
+ *   responseType: 'json',
+ *   cache: cacheManager,
+ *   cacheKey: 'user:123'
+ * });
+ *
+ * @example
+ * // With proxy fallback on CORS
+ * const data = await smartFetch('https://api.external.com/data', {
+ *   responseType: 'json',
+ *   proxy: {
+ *     url: 'https://proxy.pixelated.tech/',
+ *     fallbackOnCors: true
+ *   },
+ *   retries: 2
+ * });
+ *
+ * @example
+ * // Server-side with Next.js caching
+ * const data = await smartFetch(url, {
+ *   cacheStrategy: 'next',
+ *   nextCache: { revalidate: 3600 } // 1 hour
+ * });
+ */
+/**
+ * Extract domain from URL for enhanced error messages
+ */
+function getDomain(url) {
+    try {
+        return new URL(url).hostname;
+    }
+    catch {
+        return 'unknown';
+    }
+}
+/**
+ * Check if error is CORS-related
+ */
+function isCorsError(error) {
+    const message = error.message.toLowerCase();
+    return (message.includes('cors') ||
+        message.includes('cross-origin') ||
+        message.includes('network') ||
+        message.includes('failed to fetch'));
+}
+/**
+ * Intelligent fetch with caching, retries, proxy fallback, and timeout
+ */
+export async function smartFetch(url, options = {}) {
+    const { responseType = 'json', proxy, cacheStrategy = typeof window === 'undefined' ? 'next' : 'local', nextCache, cache, cacheKey, retries = 1, timeout = 10000, requestInit = {}, debug = false, onSuccess, onError, onComplete, } = options;
+    const domain = getDomain(url);
+    try {
+        // Step 1: Check CacheManager first (fastest, cross-request)
+        if ((cacheStrategy === 'local' || cacheStrategy === 'both') && cache && cacheKey) {
+            const cached = cache.get(cacheKey);
+            if (cached) {
+                if (debug)
+                    console.log(`[smartFetch] ${domain}: Cache hit (${cacheKey})`);
+                onSuccess?.(cached);
+                onComplete?.();
+                return cached;
+            }
+        }
+        // Step 2: Determine fetch URL (direct or via proxy)
+        let fetchUrl = url;
+        let tryDirect = !proxy?.forceProxy;
+        if (proxy?.forceProxy) {
+            fetchUrl = proxy.url + encodeURIComponent(url);
+            tryDirect = false;
+            if (debug)
+                console.log(`[smartFetch] ${domain}: Using proxy (force)`);
+        }
+        // Step 3: Fetch with retry loop
+        let lastError;
+        for (let attempt = 0; attempt <= retries; attempt++) {
+            try {
+                if (debug && attempt > 0) {
+                    console.log(`[smartFetch] ${domain}: Retry attempt ${attempt + 1}/${retries + 1}`);
+                }
+                // Attempt direct fetch
+                if (tryDirect) {
+                    try {
+                        if (debug)
+                            console.log(`[smartFetch] ${domain}: Fetching (direct)`);
+                        // Set up timeout for this fetch attempt
+                        const controller = new AbortController();
+                        const timeoutId = setTimeout(() => controller.abort(), timeout);
+                        const response = await fetch(url, {
+                            signal: controller.signal,
+                            ...requestInit,
+                            ...(cacheStrategy === 'next' || cacheStrategy === 'both'
+                                ? { next: nextCache }
+                                : {}),
+                        });
+                        clearTimeout(timeoutId);
+                        if (!response.ok) {
+                            throw new Error(`HTTP ${response.status} ${response.statusText}`);
+                        }
+                        // If responseType is 'ok' or 'status', return the raw Response object
+                        if (responseType === 'ok' || responseType === 'status') {
+                            if (debug)
+                                console.log(`[smartFetch] ${domain}: Success (returning Response object)`);
+                            onSuccess?.(response);
+                            onComplete?.();
+                            return response;
+                        }
+                        const data = await response[responseType]();
+                        // Cache in CacheManager
+                        if ((cacheStrategy === 'local' || cacheStrategy === 'both') && cache && cacheKey) {
+                            cache.set(cacheKey, data);
+                        }
+                        if (debug)
+                            console.log(`[smartFetch] ${domain}: Success`);
+                        onSuccess?.(data);
+                        onComplete?.();
+                        return data;
+                    }
+                    catch (error) {
+                        // On CORS error, try proxy if available
+                        if (proxy?.fallbackOnCors && isCorsError(error)) {
+                            if (debug)
+                                console.log(`[smartFetch] ${domain}: CORS error, falling back to proxy`);
+                            tryDirect = false;
+                            fetchUrl = proxy.url + encodeURIComponent(url);
+                            // Fall through to proxy attempt below
+                        }
+                        else {
+                            throw error;
+                        }
+                    }
+                }
+                // Attempt via proxy (if set or after direct CORS failure)
+                if (!tryDirect) {
+                    if (debug)
+                        console.log(`[smartFetch] ${domain}: Fetching (proxy)`);
+                    // Set up timeout for this fetch attempt
+                    const controller = new AbortController();
+                    const timeoutId = setTimeout(() => controller.abort(), timeout);
+                    const response = await fetch(fetchUrl, {
+                        signal: controller.signal,
+                        ...requestInit,
+                        ...(cacheStrategy === 'next' || cacheStrategy === 'both'
+                            ? { next: nextCache }
+                            : {}),
+                    });
+                    clearTimeout(timeoutId);
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status} ${response.statusText}`);
+                    }
+                    // If responseType is 'ok' or 'status', return the raw Response object
+                    if (responseType === 'ok' || responseType === 'status') {
+                        if (debug)
+                            console.log(`[smartFetch] ${domain}: Success (via proxy, returning Response object)`);
+                        onSuccess?.(response);
+                        onComplete?.();
+                        return response;
+                    }
+                    const data = await response[responseType]();
+                    // Cache in CacheManager
+                    if ((cacheStrategy === 'local' || cacheStrategy === 'both') && cache && cacheKey) {
+                        cache.set(cacheKey, data);
+                    }
+                    if (debug)
+                        console.log(`[smartFetch] ${domain}: Success (via proxy)`);
+                    onSuccess?.(data);
+                    onComplete?.();
+                    return data;
+                }
+            }
+            catch (error) {
+                lastError = error;
+                // If we have retries left, wait before retrying
+                if (attempt < retries) {
+                    const delay = Math.pow(2, attempt) * 100; // Exponential backoff: 100ms, 200ms, 400ms...
+                    if (debug)
+                        console.log(`[smartFetch] ${domain}: Waiting ${delay}ms before retry`);
+                    await new Promise(resolve => setTimeout(resolve, delay));
+                }
+            }
+        }
+        // If we got here, all attempts failed
+        const errorMessage = `[smartFetch] ${domain}: ${lastError?.message || 'Unknown error'}`;
+        const error = new Error(errorMessage);
+        if (debug)
+            console.error(errorMessage);
+        onError?.(error);
+        onComplete?.();
+        throw error;
+    }
+    catch (error) {
+        const err = error;
+        onError?.(err);
+        onComplete?.();
+        throw err;
+    }
+}

package/dist/components/general/tiles.js

@@ -83,7 +83,7 @@ function Tile(props) {
     const config = usePixelatedConfig();
     const imgClick = props.imgClick;
     const captionText = (props.bodyText && props.bodyText.length > 0) ? props.bodyText : (props.imageAlt ?? "");
-    const tileBody = _jsxs("div", { className: "tile-image" + (imgClick ? " clickable" : ""), children: [_jsx(SmartImage, { src: props.image, title: props?.imageAlt ?? undefined, alt: props?.imageAlt ?? "", onClick: imgClick ? (event) => imgClick(event, props.image) : undefined, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined }), _jsx("div", { className: "tile-image-overlay", children: _jsxs("div", { className: "tile-image-overlay-text", children: [_jsx("div", { className: "tile-image-overlay-title", children: props.imageAlt }), _jsx("div", { className: "tile-image-overlay-body", children: props.bodyText })] }) })] });
+    const tileBody = _jsxs("div", { className: "tile-image" + (imgClick ? " clickable" : ""), children: [_jsx(SmartImage, { src: props.image, aboveFold: (props.index === 0) ? true : undefined, title: props?.imageAlt ?? undefined, alt: props?.imageAlt ?? "", onClick: imgClick ? (event) => imgClick(event, props.image) : undefined, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined }), _jsx("div", { className: "tile-image-overlay", children: _jsxs("div", { className: "tile-image-overlay-text", children: [_jsx("div", { className: "tile-image-overlay-title", children: props.imageAlt }), _jsx("div", { className: "tile-image-overlay-body", children: props.bodyText })] }) })] });
     const rootClass = `tile${(props.variant) ? ' ' + props.variant : ''}`;
     return (_jsx("div", { className: rootClass, id: 'tile-' + props.index, suppressHydrationWarning: true, children: props.link ?
             _jsx("a", { href: props.link, className: "tile-link", children: tileBody })

package/dist/components/general/urlbuilder.js

@@ -0,0 +1,74 @@
+/**
+ * buildUrl - Unified URL builder supporting multiple patterns from the codebase
+ *
+ * Handles:
+ * - Simple query parameters (Google Places, Instagram style)
+ * - Path segments + query params (Contentful style)
+ * - Proxy wrapping with encoding
+ * - Proper URL encoding of parameter values
+ *
+ * @example
+ * // Simple query params
+ * buildUrl({
+ *   baseUrl: 'https://api.example.com/search',
+ *   params: { q: 'test', limit: 10 }
+ * });
+ * // → 'https://api.example.com/search?q=test&limit=10'
+ *
+ * @example
+ * // With path segments (Contentful style)
+ * buildUrl({
+ *   baseUrl: 'https://api.contentful.com',
+ *   pathSegments: ['spaces', 'abc123', 'environments', 'master', 'entries'],
+ *   params: { access_token: 'xxx' }
+ * });
+ * // → 'https://api.contentful.com/spaces/abc123/environments/master/entries?access_token=xxx'
+ *
+ * @example
+ * // With proxy wrapping (Flickr style)
+ * buildUrl({
+ *   baseUrl: 'https://www.flickr.com/services/rest',
+ *   params: { method: 'flickr.photos.search', api_key: 'xxx' },
+ *   proxyUrl: 'https://proxy.pixelated.tech/'
+ * });
+ * // → 'https://proxy.pixelated.tech/https%3A%2F%2Fwww.flickr.com%2Fservices%2Frest%3Fmethod%3Dflickr.photos.search%26api_key%3Dxxx'
+ */
+/**
+ * Build a URL with optional path segments and query parameters
+ */
+export function buildUrl(options) {
+    const { baseUrl, pathSegments, params, proxyUrl } = options;
+    // Step 1: Start with base URL
+    let url = baseUrl;
+    // Step 2: Append path segments (no encoding needed - they're IDs/identifiers)
+    if (pathSegments && pathSegments.length > 0) {
+        const segmentPath = pathSegments
+            .map(segment => String(segment).replace(/^\/+|\/+$/g, '')) // Remove leading/trailing slashes
+            .filter(Boolean) // Remove empty strings
+            .join('/');
+        // Ensure single slash between base and path
+        if (!url.endsWith('/')) {
+            url += '/';
+        }
+        url += segmentPath;
+    }
+    // Step 3: Append query parameters (values ARE encoded)
+    if (params && Object.keys(params).length > 0) {
+        const searchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            // Skip null/undefined values
+            if (value !== null && value !== undefined) {
+                searchParams.append(key, String(value));
+            }
+        });
+        const queryString = searchParams.toString();
+        if (queryString) {
+            url += (url.includes('?') ? '&' : '?') + queryString;
+        }
+    }
+    // Step 4: Wrap with proxy if provided
+    if (proxyUrl) {
+        return proxyUrl + encodeURIComponent(url);
+    }
+    return url;
+}