@pixelated-tech/components 3.8.1 → 3.9.2

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

@@ -1,9 +1,12 @@
 "use server";
 import puppeteer from 'puppeteer';
+import fs from 'fs';
+import path from 'path';
+const debug = false;
 export async function performAxeCoreAnalysis(url) {
     try {
         // Run axe-core analysis
-        const axeResult = await runAxeCoreAnalysis(url);
+        const { result: axeResult, injectionSource } = await runAxeCoreAnalysis(url);
         // Calculate summary
         const summary = {
             violations: axeResult.violations.length,
@@ -22,6 +25,7 @@ export async function performAxeCoreAnalysis(url) {
             summary,
             timestamp: new Date().toISOString(),
             status: 'success',
+            injectionSource: injectionSource,
         };
     }
     catch (error) {
@@ -80,6 +84,38 @@ async function runAxeCoreAnalysis(url) {
         const page = await browser.newPage();
         // Set viewport for consistent results
         await page.setViewport({ width: 1280, height: 720 });
+        // Capture console messages from the page for debugging
+        if (debug) {
+            page.on('console', msg => {
+                try {
+                    console.info('PAGE CONSOLE:', msg.text());
+                }
+                catch (e) {
+                    console.warn('PAGE CONSOLE (error reading):', e);
+                }
+            });
+            // Capture failed requests (esp. script loads) and successful script responses
+            page.on('requestfailed', req => {
+                try {
+                    if (req.resourceType && req.resourceType() === 'script') {
+                        console.warn('PAGE REQUEST FAILED:', req.url(), req.failure()?.errorText);
+                    }
+                }
+                catch (e) {
+                    // ignore
+                }
+            });
+            page.on('response', resp => {
+                try {
+                    if (resp.request && resp.request().resourceType() === 'script') {
+                        console.info('PAGE SCRIPT RESPONSE:', resp.url(), resp.status());
+                    }
+                }
+                catch (e) {
+                    // ignore
+                }
+            });
+        }
         // Set user agent to avoid bot detection
         await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
         // Navigate to the page with timeout
@@ -89,27 +125,106 @@ async function runAxeCoreAnalysis(url) {
         });
         // Wait a bit for dynamic content to load
         await new Promise(resolve => setTimeout(resolve, 2000));
-        // Inject axe-core by adding the script tag
-        await page.addScriptTag({
-            url: 'https://cdn.jsdelivr.net/npm/axe-core@4.8.2/axe.min.js'
-        });
-        // Wait a bit for axe to load
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        // Run axe-core analysis
-        const result = await page.evaluate(async () => {
-            // Check if axe is available
-            if (typeof window.axe === 'undefined') {
-                throw new Error('axe-core not loaded');
+        // Try to inject axe-core via CDN first; if that fails (network restrictions), fall back to several local strategies
+        let injectionSource = 'none';
+        try {
+            await page.addScriptTag({ url: 'https://cdn.jsdelivr.net/npm/axe-core/axe.min.js' });
+            // Wait a bit for axe to load
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            injectionSource = 'cdn';
+        }
+        catch (err) {
+            let injected = false;
+            // Try common local node_modules locations relative to process.cwd() and __dirname
+            const possiblePaths = [
+                path.join(process.cwd(), 'node_modules', 'axe-core', 'axe.min.js'),
+                path.join(process.cwd(), '..', 'node_modules', 'axe-core', 'axe.min.js'),
+                path.join(__dirname, '..', '..', 'node_modules', 'axe-core', 'axe.min.js')
+            ];
+            for (const p of possiblePaths) {
+                try {
+                    if (fs.existsSync(p)) {
+                        const fileSrc = fs.readFileSync(p, 'utf8');
+                        await page.addScriptTag({ content: fileSrc });
+                        injected = true;
+                        injectionSource = 'local-inline';
+                        break;
+                    }
+                }
+                catch (e) {
+                    // ignore local file read errors
+                }
+            }
+            // Last resort: require.resolve
+            if (!injected) {
+                try {
+                    const axePath = require.resolve('axe-core/axe.min.js');
+                    const axeSrc = fs.readFileSync(axePath, 'utf8');
+                    await page.addScriptTag({ content: axeSrc });
+                    injected = true;
+                    injectionSource = 'require-resolve';
+                }
+                catch (e) {
+                    // ignore
+                }
+            }
+            if (!injected) {
+                throw new Error('Could not load axe-core via CDN or local inline injection');
             }
-            // Run axe with all rules enabled
-            const axeResults = await window.axe.run(document, {
-                rules: {}, // Run all rules
-                runOnly: undefined, // Don't restrict to specific rule sets
-                reporter: 'v2'
+        }
+        // Run axe-core analysis (poll across frames for availability after injection)
+        // Wait up to 10s total for window.axe to appear (check every 200ms across frames)
+        const timeoutMs = 10000;
+        const intervalMs = 200;
+        const start = Date.now();
+        let axeResults = null;
+        let frameWithAxe = null;
+        while (!frameWithAxe && Date.now() - start < timeoutMs) {
+            const frames = page.frames();
+            for (const f of frames) {
+                try {
+                    const hasAxe = await f.evaluate(() => typeof window.axe !== 'undefined').catch(() => false);
+                    if (hasAxe) {
+                        frameWithAxe = f;
+                        break;
+                    }
+                }
+                catch (e) {
+                    // ignore frame evaluation errors
+                }
+            }
+            if (!frameWithAxe)
+                await new Promise(resolve => setTimeout(resolve, intervalMs));
+        }
+        if (!frameWithAxe) {
+            // Collect some debug info to help identify why axe didn't attach
+            try {
+                const scripts = await page.evaluate(() => Array.from(document.querySelectorAll('script')).map(s => (s.src || (s.innerText || '').slice(0, 200))));
+                const csp = await page.evaluate(() => document.querySelector('meta[http-equiv="Content-Security-Policy"]')?.getAttribute('content') || null);
+                const pageDiag = await page.evaluate(() => ({ hasAxe: typeof window.axe !== 'undefined', axeKeys: Object.keys(window).filter(k => /axe/i.test(k)), windowHasAxeRun: typeof window.axe?.run === 'function' }));
+            }
+            catch (e) {
+                // ignore diagnostic errors
+            }
+            // Diagnostic: no axe found in any frame
+            throw new Error('axe-core not loaded');
+        }
+        // Run axe in the frame that has it
+        try {
+            axeResults = await frameWithAxe.evaluate(async () => {
+                return await window.axe.run(document, {
+                    rules: {},
+                    runOnly: undefined,
+                    reporter: 'v2'
+                });
             });
-            return axeResults;
-        });
-        return result;
+        }
+        catch (e) {
+            if (debug)
+                console.error('Axe run failed:', e);
+            throw e;
+        }
+        return { result: axeResults, injectionSource };
     }
     finally {
         if (browser) {

package/dist/components/admin/site-health/site-health-axe-core.integration.test.js

@@ -0,0 +1,79 @@
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+// We'll mock puppeteer and fs before importing the module under test to avoid ESM spy limitations
+describe('performAxeCoreAnalysis (CDN blocked -> local-inline fallback)', () => {
+    beforeEach(async () => {
+        vi.resetModules();
+        // Mock puppeteer browser and page
+        const page = {
+            setViewport: vi.fn().mockResolvedValue(undefined),
+            on: vi.fn().mockReturnValue(undefined),
+            setUserAgent: vi.fn().mockResolvedValue(undefined),
+            goto: vi.fn().mockResolvedValue(undefined),
+            addScriptTag: vi.fn().mockImplementation(async (opts) => {
+                if (opts && opts.url && opts.url.includes('cdn.jsdelivr')) {
+                    // Simulate CDN blocked
+                    throw new Error('CDN blocked');
+                }
+                // Otherwise pretend inline injection succeeded
+                return Promise.resolve(undefined);
+            }),
+            frames: vi.fn().mockReturnValue([{
+                    evaluate: vi.fn().mockImplementation(async (fn) => {
+                        const fnStr = fn.toString();
+                        if (fnStr.includes('typeof (window as any).axe') || fnStr.includes('typeof window.axe')) {
+                            return true; // axe is present after inline injection
+                        }
+                        if (fnStr.includes('axe.run') || fnStr.includes('window.axe.run')) {
+                            // return a minimal axe result shape
+                            return {
+                                violations: [],
+                                passes: [],
+                                incomplete: [],
+                                inapplicable: [],
+                                testEngine: { name: 'axe-core', version: 'test' },
+                                testRunner: { name: 'mock' },
+                                testEnvironment: { userAgent: 'mock', windowWidth: 1280, windowHeight: 720 },
+                                timestamp: new Date().toISOString(),
+                                url: 'http://example'
+                            };
+                        }
+                        return null;
+                    })
+                }])
+        };
+        const browser = {
+            newPage: vi.fn().mockResolvedValue(page),
+            close: vi.fn().mockResolvedValue(undefined)
+        };
+        // Mock puppeteer before importing the module to avoid ESM spy issues
+        vi.doMock('puppeteer', async (importOriginal) => {
+            // Provide a minimal mock that exposes launch as both default and named
+            return {
+                default: { launch: () => Promise.resolve(browser) },
+                launch: () => Promise.resolve(browser)
+            };
+        });
+        // Mock fs before importing the module (provide both default and named exports for interop)
+        vi.doMock('fs', () => ({
+            existsSync: () => true,
+            readFileSync: () => '/* fake axe content */',
+            default: {
+                existsSync: () => true,
+                readFileSync: () => '/* fake axe content */'
+            }
+        }));
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+        vi.clearAllMocks();
+        vi.resetModules();
+    });
+    it('falls back to local inline injection when CDN is blocked and reports injectionSource "local-inline"', async () => {
+        const { performAxeCoreAnalysis } = await import('./site-health-axe-core.integration');
+        const url = 'http://example.local';
+        const res = await performAxeCoreAnalysis(url);
+        expect(res).toBeDefined();
+        expect(res.status).toBe('success');
+        expect(res.injectionSource).toBe('local-inline');
+    });
+});

package/dist/components/admin/site-health/site-health-axe-core.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { getImpactIndicator, getIncompleteIndicator, getPassingIndicator } from './site-health-indicators';
@@ -10,6 +11,40 @@ export function SiteHealthAxeCore({ siteName }) {
     const getImpactColor = (impact) => {
         return getImpactIndicator(impact).color;
     };
+    // Ensure axe-core is available on the admin page so self-analysis and debugging are possible
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (window.axe)
+            return; // already loaded
+        const cdnSrc = 'https://cdn.jsdelivr.net/npm/axe-core/axe.min.js';
+        const apiFallback = '/api/axe-core';
+        function injectScript(src) {
+            const script = document.createElement('script');
+            script.src = src;
+            script.async = false; // preserve execution order
+            script.onload = () => console.info('axe-core loaded from', src);
+            script.onerror = async () => {
+                console.warn('Failed to load axe-core from', src);
+                if (src !== apiFallback) {
+                    // Try fallback to local API that serves the bundle
+                    injectScript(apiFallback);
+                }
+            };
+            document.head.appendChild(script);
+        }
+        // Try CDN first, then API fallback
+        try {
+            injectScript(cdnSrc);
+        }
+        catch (e) {
+            console.warn('Could not inject axe-core script:', e);
+            injectScript(apiFallback);
+        }
+        return () => {
+            // no cleanup: scripts persist on the page
+        };
+    }, []);
     const getImpactIcon = (impact) => {
         return getImpactIndicator(impact).icon;
     };

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

@@ -1,4 +1,5 @@
 "use server";
+import { getFullPixelatedConfig } from '../../config/config';
 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
@@ -83,10 +84,11 @@ export async function performCoreWebVitalsAnalysis(url, siteName, useCache = tru
         return errorResult;
     }
 }
-async function fetchPSIData(url) {
-    const apiKey = process.env.GOOGLE_API_KEY;
+export async function fetchPSIData(url) {
+    // Require the API key from the unified pixelated.config.json. No environment fallback.
+    const apiKey = getFullPixelatedConfig()?.google?.api_key;
     if (!apiKey) {
-        throw new Error('GOOGLE_API_KEY environment variable is not set');
+        throw new Error('Google API key is not set; set google.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 fetchWithRetry = async (url, maxRetries = 2) => {

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

@@ -0,0 +1,33 @@
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import * as configModule from '../../config/config';
+import { fetchPSIData } from './site-health-core-web-vitals.integration';
+import { mockConfig } from '../../../test/config.mock';
+// Use the test harness mock config derived from src/config/pixelated.config.json
+describe('fetchPSIData', () => {
+    let originalFetch;
+    let getFullConfigSpy;
+    beforeEach(() => {
+        originalFetch = globalThis.fetch;
+        globalThis.fetch = vi.fn().mockResolvedValue({ ok: true, json: async () => ({ lighthouseResult: { audits: { someAudit: {} }, categories: {} } }) });
+        // Ensure server-side code sees the standard test harness config by default
+        getFullConfigSpy = vi.spyOn(configModule, 'getFullPixelatedConfig').mockReturnValue(mockConfig);
+    });
+    afterEach(() => {
+        globalThis.fetch = originalFetch;
+        getFullConfigSpy?.mockRestore();
+        vi.restoreAllMocks();
+    });
+    it('uses API key from pixelated.config.json', async () => {
+        const apiKey = mockConfig?.google?.api_key;
+        expect(apiKey).toBeDefined();
+        const url = 'https://example.com';
+        await fetchPSIData(url);
+        expect(globalThis.fetch).toHaveBeenCalled();
+        const calledUrl = globalThis.fetch.mock.calls[0][0];
+        expect(calledUrl).toContain(`key=${apiKey}`);
+    });
+    it('throws when api key is missing from config', async () => {
+        getFullConfigSpy.mockReturnValue({});
+        await expect(fetchPSIData('https://example.com')).rejects.toThrow('Google API key is not set');
+    });
+});

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

@@ -76,7 +76,9 @@ export function SiteHealthTemplate(props) {
             // Check for cache control from URL query parameters
             const urlParams = new URLSearchParams(window.location.search);
             const cacheParam = urlParams.get('cache');
-            const useCache = typedProps.enableCacheControl ?? true ? (cacheParam !== 'false') : true;
+            // Correctly compute useCache: if enableCacheControl is enabled (default true), honor cacheParam; if disabled, caching is off
+            const enableCacheControl = (typeof typedProps.enableCacheControl === 'boolean') ? typedProps.enableCacheControl : true;
+            const useCache = enableCacheControl ? (String(cacheParam).toLowerCase() !== 'false') : false;
             const result = await fetchFromEndpoint(useCache);
             setData(result);
             setError(null);

package/dist/components/config/config.validators.js

@@ -0,0 +1,67 @@
+/**
+ * Assert that an object is a valid SiteInfo with required fields.
+ * Throws with a clear message if validation fails.
+ */
+export function assertSiteInfo(v) {
+    const missing = [];
+    if (!v || typeof v !== 'object') {
+        throw new Error('Invalid routes.json: siteInfo is missing or not an object');
+    }
+    ['name', 'url', 'description'].forEach(k => {
+        if (!v[k] || typeof v[k] !== 'string' || String(v[k]).trim() === '')
+            missing.push(k);
+    });
+    if (missing.length) {
+        throw new Error(`Invalid routes.json: siteInfo missing required fields: ${missing.join(', ')}`);
+    }
+}
+/**
+ * Basic validation for a routes object/array. Ensures the structure looks like
+ * a routes data blob and contains at least one named route.
+ */
+export function assertRoutes(routes) {
+    if (!routes || (typeof routes !== 'object' && !Array.isArray(routes))) {
+        throw new Error('Invalid routes.json: routes is missing or not an object/array');
+    }
+    const found = (function findAnyNamed(obj) {
+        if (!obj || typeof obj !== 'object')
+            return false;
+        if (Array.isArray(obj))
+            return obj.some(item => findAnyNamed(item));
+        if (obj.name && typeof obj.name === 'string')
+            return true;
+        for (const k of Object.keys(obj)) {
+            if (findAnyNamed(obj[k]))
+                return true;
+        }
+        return false;
+    })(routes);
+    if (!found) {
+        throw new Error('Invalid routes.json: expected at least one route entry with a `name` property');
+    }
+}
+/**
+ * Basic validation for visualdesign tokens. Ensures it's an object and contains
+ * at least the common tokens we care about (e.g., colors or fonts may be optional)
+ */
+export function assertVisualDesign(v) {
+    if (v === undefined || v === null) {
+        throw new Error('Invalid routes.json: visualdesign is missing');
+    }
+    if (typeof v !== 'object' || Array.isArray(v)) {
+        throw new Error('Invalid routes.json: visualdesign must be an object');
+    }
+    const keys = Object.keys(v || {});
+    if (keys.length === 0) {
+        throw new Error('Invalid routes.json: visualdesign must contain at least one token');
+    }
+    for (const k of keys) {
+        const val = v[k];
+        // Accept simple string tokens or objects with a string `value` property
+        if (typeof val === 'string')
+            continue;
+        if (val && typeof val === 'object' && typeof val.value === 'string')
+            continue;
+        throw new Error(`Invalid routes.json: visualdesign token '${k}' has an invalid value`);
+    }
+}

package/dist/components/general/google.reviews.components.js

@@ -6,7 +6,6 @@ import { SmartImage } from './smartimage';
 import { getGoogleReviewsByPlaceId } from './google.reviews.functions';
 import { usePixelatedConfig } from '../config/config.client';
 import './google.reviews.css';
-const GOOGLE_MAPS_API_KEY = 'AIzaSyBJVi0O9Ir9imRgINLZbojTifatX-Z4aUs';
 GoogleReviewsCard.propTypes = {
     placeId: PropTypes.string.isRequired,
     language: PropTypes.string,
@@ -20,7 +19,7 @@ export function GoogleReviewsCard(props) {
     const [reviews, setReviews] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const apiKey = props.apiKey || config?.googleMaps?.apiKey || GOOGLE_MAPS_API_KEY;
+    const apiKey = props.apiKey || config?.googleMaps?.apiKey || '';
     const proxyBase = props.proxyBase || config?.global?.proxyUrl || undefined;
     useEffect(() => {
         (async () => {

package/dist/components/general/metadata.functions.js

@@ -65,6 +65,8 @@ export function getAllRoutes(routes, key) {
     return result;
 }
 export const getMetadata = (routes, key = "name", value = "Home") => {
+    // Validate the routes blob early to fail fast if invalid
+    assertRoutes(routes);
     const foundObject = getRouteByKey(routes, key, value);
     if (foundObject) {
         const metadata = {
@@ -105,8 +107,20 @@ export function getAccordionMenuData(myRoutes) {
     });
     return menuItems;
 }
+import { assertSiteInfo, assertRoutes } from '../config/config.validators';
 export function generateMetaTags(props) {
     const { title, description, keywords, origin, url, site_name: prop_site_name, email: prop_email, image: prop_image, image_height: prop_image_height, image_width: prop_image_width, favicon: prop_favicon, siteInfo } = props;
+    const safeOrigin = typeof origin === 'string' && origin.length > 0 ? origin : '';
+    const safeUrl = typeof url === 'string' && url.length > 0 ? url : '';
+    let newOrigin;
+    try {
+        newOrigin = safeOrigin ? new URL(safeOrigin).hostname : undefined;
+    }
+    catch {
+        newOrigin = undefined;
+    }
+    // Validate siteInfo strictly so downstream sites must provide the contract
+    assertSiteInfo(siteInfo);
     // Use props if provided, otherwise fall back to siteInfo
     const site_name = prop_site_name || siteInfo?.name;
     const email = prop_email || siteInfo?.email;
@@ -114,5 +128,5 @@ export function generateMetaTags(props) {
     const image_height = prop_image_height || siteInfo?.image_height;
     const image_width = prop_image_width || siteInfo?.image_width;
     const favicon = prop_favicon || siteInfo?.favicon;
-    return (_jsxs(_Fragment, { children: [_jsx("title", { children: title }), _jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { httpEquiv: "content-type", content: "text/html; charset=UTF-8" }), _jsx("meta", { httpEquiv: 'Expires', content: '0' }), _jsx("meta", { httpEquiv: 'Pragma', content: 'no-cache' }), _jsx("meta", { httpEquiv: 'Cache-Control', content: 'no-cache' }), _jsx("meta", { name: "application-name", content: site_name }), _jsx("meta", { name: "author", content: site_name + ", " + email }), _jsx("meta", { name: 'copyright', content: site_name }), _jsx("meta", { name: "creator", content: site_name }), _jsx("meta", { name: "description", content: description }), _jsx("meta", { name: "keywords", content: keywords }), _jsx("meta", { name: 'language', content: 'EN' }), _jsx("meta", { name: 'owner', content: site_name }), _jsx("meta", { name: "publisher", content: site_name }), _jsx("meta", { name: 'rating', content: 'General' }), _jsx("meta", { name: 'reply-to', content: email }), _jsx("meta", { name: "robots", content: "index, follow" }), _jsx("meta", { name: 'url', content: url }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, shrink-to-fit=no" }), _jsx("meta", { property: "og:description", content: description }), _jsx("meta", { property: 'og:email', content: email }), _jsx("meta", { property: "og:image", content: image }), _jsx("meta", { property: "og:image:height", content: image_height }), _jsx("meta", { property: "og:image:width", content: image_width }), _jsx("meta", { property: "og:locale", content: "en_US" }), _jsx("meta", { property: "og:site_name", content: site_name }), _jsx("meta", { property: "og:title", content: title }), _jsx("meta", { property: "og:type", content: "website" }), _jsx("meta", { property: "og:url", content: url }), _jsx("meta", { itemProp: "name", content: site_name }), _jsx("meta", { itemProp: "url", content: url }), _jsx("meta", { itemProp: "description", content: description }), _jsx("meta", { itemProp: "thumbnailUrl", content: image }), _jsx("meta", { property: "twitter:domain", content: new URL(origin).hostname }), _jsx("meta", { property: "twitter:url", content: url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:creator", content: site_name }), _jsx("meta", { name: "twitter:description", content: description }), _jsx("meta", { name: "twitter:image", content: image }), _jsx("meta", { name: "twitter:image:height", content: image_height }), _jsx("meta", { name: "twitter:image:width", content: image_width }), _jsx("meta", { name: "twitter:title", content: title }), _jsx("link", { rel: "author", href: origin }), _jsx("link", { rel: "canonical", href: url }), _jsx("link", { rel: "icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "shortcut icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "manifest", href: "/manifest.webmanifest" }), _jsx("link", { rel: "preconnect", href: "https://images.ctfassets.net/" }), _jsx("link", { rel: "preconnect", href: "https://res.cloudinary.com/" }), _jsx("link", { rel: "preconnect", href: "https://farm2.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm6.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm8.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm66.static.flickr.com" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("title", { children: title }), _jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { httpEquiv: "content-type", content: "text/html; charset=UTF-8" }), _jsx("meta", { httpEquiv: 'Expires', content: '0' }), _jsx("meta", { httpEquiv: 'Pragma', content: 'no-cache' }), _jsx("meta", { httpEquiv: 'Cache-Control', content: 'no-cache' }), _jsx("meta", { name: "application-name", content: site_name }), _jsx("meta", { name: "author", content: site_name + ", " + email }), _jsx("meta", { name: 'copyright', content: site_name }), _jsx("meta", { name: "creator", content: site_name }), _jsx("meta", { name: "description", content: description }), _jsx("meta", { name: "keywords", content: keywords }), _jsx("meta", { name: 'language', content: 'EN' }), _jsx("meta", { name: 'owner', content: site_name }), _jsx("meta", { name: "publisher", content: site_name }), _jsx("meta", { name: 'rating', content: 'General' }), _jsx("meta", { name: 'reply-to', content: email }), _jsx("meta", { name: "robots", content: "index, follow" }), _jsx("meta", { name: 'url', content: url }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, shrink-to-fit=no" }), _jsx("meta", { property: "og:description", content: description }), _jsx("meta", { property: 'og:email', content: email }), _jsx("meta", { property: "og:image", content: image }), _jsx("meta", { property: "og:image:height", content: image_height != null ? String(image_height) : undefined }), _jsx("meta", { property: "og:image:width", content: image_width != null ? String(image_width) : undefined }), _jsx("meta", { property: "og:locale", content: "en_US" }), _jsx("meta", { property: "og:site_name", content: site_name }), _jsx("meta", { property: "og:title", content: title }), _jsx("meta", { property: "og:type", content: "website" }), _jsx("meta", { property: "og:url", content: url }), _jsx("meta", { itemProp: "name", content: site_name }), _jsx("meta", { itemProp: "url", content: url }), _jsx("meta", { itemProp: "description", content: description }), _jsx("meta", { itemProp: "thumbnailUrl", content: image }), _jsx("meta", { property: "twitter:domain", content: newOrigin }), _jsx("meta", { property: "twitter:url", content: url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:creator", content: site_name }), _jsx("meta", { name: "twitter:description", content: description }), _jsx("meta", { name: "twitter:image", content: image }), _jsx("meta", { name: "twitter:image:height", content: image_height != null ? String(image_height) : undefined }), _jsx("meta", { name: "twitter:image:width", content: image_width != null ? String(image_width) : undefined }), _jsx("meta", { name: "twitter:title", content: title }), _jsx("link", { rel: "author", href: newOrigin }), _jsx("link", { rel: "canonical", href: url }), _jsx("link", { rel: "icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "shortcut icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "manifest", href: "/manifest.webmanifest" }), _jsx("link", { rel: "preconnect", href: "https://images.ctfassets.net/" }), _jsx("link", { rel: "preconnect", href: "https://res.cloudinary.com/" }), _jsx("link", { rel: "preconnect", href: "https://farm2.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm6.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm8.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm66.static.flickr.com" })] }));
 }

package/dist/components/general/proxy-csp-listener.js

@@ -0,0 +1,20 @@
+"use client";
+const debug = false;
+export function attachProxyCspListener(onCsp) {
+    const handler = (e) => {
+        const info = {
+            blockedURI: e.blockedURI,
+            violatedDirective: e.violatedDirective,
+            originalPolicy: e.originalPolicy,
+            sourceFile: e?.sourceFile,
+            disposition: e.disposition,
+            referrer: e.referrer,
+        };
+        const defaultHandler = (i) => { if (debug)
+            console.warn('CSP violation', i); };
+        (onCsp ?? defaultHandler)(info);
+    };
+    window.addEventListener('securitypolicyviolation', handler);
+    // Return a cleanup function so callers can detach the listener
+    return () => window.removeEventListener('securitypolicyviolation', handler);
+}

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

@@ -41,10 +41,12 @@ export function handlePixelatedProxy(req) {
     response.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=(), interest-cohort=()");
     // Content Security Policy (CSP)
     // Includes all discovered domains in the workspace: HubSpot, Gravatar, Flickr, Contentful, Cloudinary, eBay, and Google Analytics + Search.
+    const scriptSrc = "'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com https://*.googletagmanager.com https://*.hs-scripts.com https://*.hs-analytics.net https://*.hsforms.net https://*.hscollectedforms.net https://*.hs-banner.com https://*.google.com https://*.doubleclick.net https://*.googleadservices.com https://*.adtrafficquality.google https://*.hsappstatic.net https://assets.calendly.com https://cdn.jsdelivr.net";
     const csp = [
         "default-src 'self'",
-        "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com https://*.googletagmanager.com https://*.hs-scripts.com https://*.hs-analytics.net https://*.hsforms.net https://*.hscollectedforms.net https://*.hs-banner.com https://*.google.com https://*.doubleclick.net https://*.googleadservices.com https://*.adtrafficquality.google https://*.hsappstatic.net https://assets.calendly.com",
-        "connect-src 'self' https: https://*.hubspot.com https://proxy.pixelated.tech https://sendmail.pixelated.tech https://*.google-analytics.com https://*.analytics.google.com",
+        `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",
         "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",
         "font-src 'self' data: https://fonts.gstatic.com",