@pixelated-tech/components 3.4.3 → 3.5.0

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

@@ -361,36 +361,62 @@ function calculateFacetedNavigationScore(data) {
 /**
  * Browser Caching Data Collector
  */
-function collectBrowserCachingData(response) {
-    // Get response headers from Puppeteer response object
-    const headers = {};
+async function collectBrowserCachingData(url) {
     try {
-        const rawHeaders = response.headers();
-        for (const [key, value] of Object.entries(rawHeaders)) {
-            headers[key.toLowerCase()] = value;
+        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)'
+            }
+        });
+        if (!response.ok) {
+            return {
+                cacheControl: '',
+                expires: '',
+                lastModified: '',
+                etag: '',
+                age: '',
+                hasCachingHeaders: false,
+                error: `HTTP ${response.status}: ${response.statusText}`
+            };
         }
+        const cacheControl = response.headers.get('cache-control') || '';
+        const expires = response.headers.get('expires') || '';
+        const lastModified = response.headers.get('last-modified') || '';
+        const etag = response.headers.get('etag') || '';
+        const age = response.headers.get('age') || '';
+        return {
+            cacheControl,
+            expires,
+            lastModified,
+            etag,
+            age,
+            hasCachingHeaders: !!(cacheControl || expires || lastModified || etag)
+        };
     }
-    catch (error) {
-        console.warn('Failed to get response headers:', error);
+    catch {
+        return {
+            cacheControl: '',
+            expires: '',
+            lastModified: '',
+            etag: '',
+            age: '',
+            hasCachingHeaders: false,
+            error: 'Could not access response headers - network error or server unavailable'
+        };
     }
-    const cacheControl = headers['cache-control'] || '';
-    const expires = headers['expires'] || '';
-    const lastModified = headers['last-modified'] || '';
-    const etag = headers['etag'] || '';
-    const age = headers['age'] || '';
-    return {
-        cacheControl,
-        expires,
-        lastModified,
-        etag,
-        age,
-        hasCachingHeaders: !!(cacheControl || expires || lastModified || etag)
-    };
 }
 /**
  * Browser Caching Scorer
  */
 function calculateBrowserCachingScore(data) {
+    if (data.error) {
+        return {
+            score: 0,
+            displayValue: 'Requires server header analysis',
+            details: { error: data.error }
+        };
+    }
     let score = 0;
     let displayValue = 'No caching headers detected';
     const issues = [];
@@ -448,32 +474,55 @@ function calculateBrowserCachingScore(data) {
 /**
  * Gzip Compression Data Collector
  */
-function collectGzipCompressionData(response) {
-    // Get response headers from Puppeteer response object
-    const headers = {};
+async function collectGzipCompressionData(url) {
     try {
-        const rawHeaders = response.headers();
-        for (const [key, value] of Object.entries(rawHeaders)) {
-            headers[key.toLowerCase()] = value;
+        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
+            }
+        });
+        if (!response.ok) {
+            return {
+                contentEncoding: '',
+                contentLength: '',
+                transferEncoding: '',
+                isCompressed: false,
+                error: `HTTP ${response.status}: ${response.statusText}`
+            };
         }
+        const contentEncoding = response.headers.get('content-encoding') || '';
+        const contentLength = response.headers.get('content-length') || '';
+        const transferEncoding = response.headers.get('transfer-encoding') || '';
+        return {
+            contentEncoding,
+            contentLength,
+            transferEncoding,
+            isCompressed: contentEncoding.includes('gzip') || contentEncoding.includes('deflate')
+        };
     }
-    catch (error) {
-        console.warn('Failed to get response headers:', error);
+    catch {
+        return {
+            contentEncoding: '',
+            contentLength: '',
+            transferEncoding: '',
+            isCompressed: false,
+            error: 'Could not access response headers - network error or server unavailable'
+        };
     }
-    const contentEncoding = headers['content-encoding'] || '';
-    const contentLength = headers['content-length'] || '';
-    const transferEncoding = headers['transfer-encoding'] || '';
-    return {
-        contentEncoding,
-        contentLength,
-        transferEncoding,
-        isCompressed: contentEncoding.includes('gzip') || contentEncoding.includes('deflate') || transferEncoding.includes('chunked')
-    };
 }
 /**
  * Gzip Compression Scorer
  */
 function calculateGzipCompressionScore(data) {
+    if (data.error) {
+        return {
+            score: 0,
+            displayValue: 'Requires server header analysis',
+            details: { error: data.error }
+        };
+    }
     let score = 0;
     let displayValue = 'No compression detected';
     if (data.isCompressed) {
@@ -614,11 +663,16 @@ async function analyzeSinglePage(url) {
         // Navigate to the page with faster waiting strategy
         const response = await page.goto(url, {
             waitUntil: 'domcontentloaded', // Wait for DOM instead of all network requests
-            timeout: 15000 // Reduced timeout
+            timeout: 10000 // Reduced timeout from 15000 to 10000
         });
+        // Check if navigation failed
+        if (!response) {
+            console.warn(`Failed to load page: ${url} - no response received`);
+            // Continue with analysis using available data, but mark header-dependent metrics as unavailable
+        }
         // Wait for H1 elements to be rendered (if any) with a short timeout
         try {
-            await page.waitForSelector('h1', { timeout: 2000 });
+            await page.waitForSelector('h1', { timeout: 1000 }); // Reduced from 2000 to 1000
         }
         catch {
             // H1 not found within timeout, continue anyway
@@ -639,7 +693,8 @@ async function analyzeSinglePage(url) {
         });
         // Get the rendered HTML for other pattern-based checks
         const html = await page.content();
-        await page.close();
+        // Don't close the page here - let it be reused or closed by caller
+        // await page.close();
         const audits = [];
         // Process on-page metrics from configuration
         const config = seoMetricsConfig;
@@ -653,10 +708,14 @@ async function analyzeSinglePage(url) {
                 const collector = dataCollectors[metric.dataCollector];
                 const scorer = scorers[metric.scorer];
                 if (collector && scorer) {
-                    // Pass response object for collectors that need headers (like browser caching and gzip compression)
-                    const rawData = (metric.dataCollector === 'collectBrowserCachingData' || metric.dataCollector === 'collectGzipCompressionData')
-                        ? collector(html, pageData.title, response)
-                        : collector(html, pageData.title);
+                    // Pass URL for collectors that need headers (like browser caching and gzip compression)
+                    let rawData;
+                    if (metric.dataCollector === 'collectBrowserCachingData' || metric.dataCollector === 'collectGzipCompressionData') {
+                        rawData = await collector(url);
+                    }
+                    else {
+                        rawData = collector(html, pageData.title);
+                    }
                     const result = scorer(rawData);
                     score = result.score;
                     displayValue = result.displayValue;
@@ -700,6 +759,8 @@ async function analyzeSinglePage(url) {
                 details
             });
         }
+        // Close the page after analysis
+        await page.close();
         return {
             url,
             title: pageData.title,
@@ -719,11 +780,7 @@ async function analyzeSinglePage(url) {
             crawledAt: new Date().toISOString()
         };
     }
-    finally {
-        if (browser) {
-            await browser.close();
-        }
-    }
+    // Don't close browser here - keep it alive for reuse
 }
 async function performSiteWideAudits(baseUrl) {
     const audits = [];
@@ -799,12 +856,28 @@ async function performSiteWideAudits(baseUrl) {
                     }
                     break;
                 case 'gzip-compression':
-                    score = 0; // Placeholder - would need HTTP header analysis
-                    displayValue = 'Requires server header analysis';
+                    try {
+                        const gzipData = await collectGzipCompressionData(baseUrl);
+                        const gzipResult = calculateGzipCompressionScore(gzipData);
+                        score = gzipResult.score;
+                        displayValue = gzipResult.displayValue;
+                    }
+                    catch {
+                        score = 0;
+                        displayValue = 'Error analyzing compression headers';
+                    }
                     break;
                 case 'browser-caching':
-                    score = 0; // Placeholder - would need HTTP header analysis
-                    displayValue = 'Requires server header analysis';
+                    try {
+                        const cachingData = await collectBrowserCachingData(baseUrl);
+                        const cachingResult = calculateBrowserCachingScore(cachingData);
+                        score = cachingResult.score;
+                        displayValue = cachingResult.displayValue;
+                    }
+                    catch {
+                        score = 0;
+                        displayValue = 'Error analyzing caching headers';
+                    }
                     break;
                 case 'duplicate-content-detection':
                     score = 0; // Placeholder - would need multi-page content analysis
@@ -889,7 +962,7 @@ export async function performOnSiteSEOAnalysis(baseUrl) {
         }
         else {
             // Fallback to crawling if sitemap not available
-            pagesToAnalyze = await crawlSite(baseUrl, 5);
+            pagesToAnalyze = await crawlSite(baseUrl, 2); // Reduced from 5 to 2 pages
         }
         if (pagesToAnalyze.length === 0) {
             return {

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { getScoreIndicator } from './site-health-indicators';
 /**
@@ -91,6 +92,9 @@ async function fetchOnSiteSEOData(siteName) {
         };
     }
 }
+SiteHealthOnSiteSEO.propTypes = {
+    siteName: PropTypes.string.isRequired,
+};
 export function SiteHealthOnSiteSEO({ siteName }) {
     return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "On-Site SEO", fetchData: fetchOnSiteSEOData, children: (data) => {
             if (!data)

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

@@ -1,8 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { getScoreIndicator } from './site-health-indicators';
+SiteHealthOverview.propTypes = {
+    siteName: PropTypes.string.isRequired,
+};
 export function SiteHealthOverview({ siteName }) {
     const fetchCWVData = useCallback(async (site) => {
         const response = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
@@ -57,9 +61,12 @@ export function SiteHealthOverview({ siteName }) {
             };
             return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteData.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", siteData.url] }), _jsx("div", { className: "health-score-container", children: Object.entries(siteData.scores)
                             .filter(([, score]) => score !== null)
-                            .map(([category, score]) => (_jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: category.replace('-', ' ') }), _jsx("div", { className: "health-score-value", style: { color: getScoreColor(score) }, children: formatScore(score) }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
-                                            width: score !== null ? `${score * 100}%` : '0%',
-                                            backgroundColor: score !== null ? getScoreColor(score) : '#6b7280'
-                                        } }) })] }, category))) }), _jsxs("div", { style: { marginBottom: '1.5rem' }, children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Core Web Vitals" }), _jsxs("div", { className: "health-cwv-grid", children: [_jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Cumulative Layout Shift:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.cls, { good: 0.1, poor: 0.25 })) }, children: formatMetric(siteData.metrics.cls, '') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Input Delay:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.fid, { good: 100, poor: 300 })) }, children: formatMetric(siteData.metrics.fid, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Largest Contentful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.lcp, { good: 2500, poor: 4000 })) }, children: formatMetric(siteData.metrics.lcp, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Contentful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.fcp, { good: 1800, poor: 3000 })) }, children: formatMetric(siteData.metrics.fcp, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Time to First Byte:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.ttfb, { good: 800, poor: 1800 })) }, children: formatMetric(siteData.metrics.ttfb, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Speed Index:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.speedIndex, { good: 3400, poor: 5800 })) }, children: formatMetric(siteData.metrics.speedIndex, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Time to Interactive:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.interactive, { good: 3800, poor: 7300 })) }, children: formatMetric(siteData.metrics.interactive, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Total Blocking Time:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.totalBlockingTime, { good: 200, poor: 600 })) }, children: formatMetric(siteData.metrics.totalBlockingTime, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Meaningful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.firstMeaningfulPaint, { good: 2000, poor: 4000 })) }, children: formatMetric(siteData.metrics.firstMeaningfulPaint, 'ms') })] })] })] }), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(siteData.timestamp).toLocaleString()] })] }));
+                            .map(([category, score]) => {
+                            const numScore = score;
+                            return (_jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: category.replace('-', ' ') }), _jsx("div", { className: "health-score-value", style: { color: getScoreColor(numScore) }, children: formatScore(numScore) }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                                width: numScore !== null ? `${numScore * 100}%` : '0%',
+                                                backgroundColor: numScore !== null ? getScoreColor(numScore) : '#6b7280'
+                                            } }) })] }, category));
+                        }) }), _jsxs("div", { style: { marginBottom: '1.5rem' }, children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Core Web Vitals" }), _jsxs("div", { className: "health-cwv-grid", children: [_jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Cumulative Layout Shift:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.cls, { good: 0.1, poor: 0.25 })) }, children: formatMetric(siteData.metrics.cls, '') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Input Delay:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.fid, { good: 100, poor: 300 })) }, children: formatMetric(siteData.metrics.fid, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Largest Contentful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.lcp, { good: 2500, poor: 4000 })) }, children: formatMetric(siteData.metrics.lcp, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Contentful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.fcp, { good: 1800, poor: 3000 })) }, children: formatMetric(siteData.metrics.fcp, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Time to First Byte:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.ttfb, { good: 800, poor: 1800 })) }, children: formatMetric(siteData.metrics.ttfb, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Speed Index:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.speedIndex, { good: 3400, poor: 5800 })) }, children: formatMetric(siteData.metrics.speedIndex, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Time to Interactive:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.interactive, { good: 3800, poor: 7300 })) }, children: formatMetric(siteData.metrics.interactive, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Total Blocking Time:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.totalBlockingTime, { good: 200, poor: 600 })) }, children: formatMetric(siteData.metrics.totalBlockingTime, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Meaningful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.firstMeaningfulPaint, { good: 2000, poor: 4000 })) }, children: formatMetric(siteData.metrics.firstMeaningfulPaint, 'ms') })] })] })] }), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(siteData.timestamp).toLocaleString()] })] }));
         } }));
 }

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

@@ -1,8 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { getScoreIndicator } from './site-health-indicators';
+SiteHealthPerformance.propTypes = {
+    siteName: PropTypes.string.isRequired,
+};
 export function SiteHealthPerformance({ siteName }) {
     const fetchCWVData = useCallback(async (site) => {
         const response = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);

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

@@ -1,8 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { getScoreIndicator } from './site-health-indicators';
+SiteHealthSecurity.propTypes = {
+    siteName: PropTypes.string.isRequired,
+};
 export function SiteHealthSecurity({ siteName }) {
     const fetchSecurityData = useCallback(async (site) => {
         // Fetch PSI data for best practices security audits
@@ -161,7 +165,7 @@ export function SiteHealthSecurity({ siteName }) {
                                             width: `${(psiData.scores['best-practices'] || 0) * 100}%`,
                                             backgroundColor: getScoreColor(psiData.scores['best-practices'])
                                         } }) })] }) })), psiData.categories['best-practices'] && psiData.categories['best-practices'].audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Security Best Practices" }), _jsx("div", { className: "space-y-2", children: psiData.categories['best-practices'].audits
-                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .filter((audit) => audit.scoreDisplayMode !== 'notApplicable')
                                     .sort((a, b) => (b.score || 0) - (a.score || 0))
                                     .slice(0, 20)
                                     .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: ["(", Math.round((audit.score || 0) * 100), "%) ", audit.title] }), audit.displayValue && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details?.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && (audit.score || 0) < 0.9 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items.map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatAuditItem(item, audit.title) }, idx))) }) }))] })] }, audit.id))) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(psiData.timestamp).toLocaleString()] })] }));

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

@@ -1,8 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { getScoreIndicator } from './site-health-indicators';
+SiteHealthSEO.propTypes = {
+    siteName: PropTypes.string.isRequired,
+};
 export function SiteHealthSEO({ siteName }) {
     const fetchSEOData = useCallback(async (site) => {
         const response = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
@@ -116,7 +120,7 @@ export function SiteHealthSEO({ siteName }) {
                                             width: `${(siteData.scores.seo || 0) * 100}%`,
                                             backgroundColor: getScoreColor(siteData.scores.seo)
                                         } }) })] }) })), siteData.categories.seo && siteData.categories.seo.audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "SEO Issues & Recommendations" }), _jsx("div", { className: "space-y-2", children: siteData.categories.seo.audits
-                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .filter((audit) => audit.scoreDisplayMode !== 'notApplicable')
                                     .sort((a, b) => (b.score || 0) - (a.score || 0))
                                     .slice(0, 20)
                                     .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: ["(", Math.round((audit.score || 0) * 100), "%) ", audit.title] }), audit.displayValue && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details?.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && (audit.score || 0) < 1.0 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items.map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatAuditItem(item, audit.title) }, idx))) }) }))] })] }, audit.id))) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(siteData.timestamp).toLocaleString()] })] }));

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

@@ -1,15 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { PageGridItem } from '../../general/semantic';
-export function SiteHealthTemplate({ siteName, title, children, fetchData, enableCacheControl = false, columnSpan = 1 }) {
+SiteHealthTemplate.propTypes = {
+    siteName: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    children: PropTypes.func.isRequired,
+    fetchData: PropTypes.func.isRequired,
+    enableCacheControl: PropTypes.bool,
+    columnSpan: PropTypes.number,
+};
+export function SiteHealthTemplate(props) {
+    const typedProps = props;
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {
         let isMounted = true;
         const loadData = async () => {
-            if (!siteName) {
+            if (!typedProps.siteName) {
                 if (isMounted) {
                     setData(null);
                     setLoading(false);
@@ -25,8 +35,8 @@ export function SiteHealthTemplate({ siteName, title, children, fetchData, enabl
                 // Check for cache control from URL query parameters
                 const urlParams = new URLSearchParams(window.location.search);
                 const cacheParam = urlParams.get('cache');
-                const useCache = enableCacheControl ? (cacheParam !== 'false') : true;
-                const result = await fetchData(siteName, useCache);
+                const useCache = typedProps.enableCacheControl ? (cacheParam !== 'false') : true;
+                const result = await typedProps.fetchData(typedProps.siteName, useCache);
                 if (isMounted) {
                     setData(result);
                     setError(null);
@@ -48,15 +58,15 @@ export function SiteHealthTemplate({ siteName, title, children, fetchData, enabl
         return () => {
             isMounted = false;
         };
-    }, [siteName, fetchData]);
+    }, [typedProps.siteName, typedProps.fetchData]);
     // If no site selected, show nothing
-    if (!siteName) {
+    if (!typedProps.siteName) {
         return null;
     }
     // If title is provided, render the complete card structure
-    if (title) {
-        return (_jsxs(PageGridItem, { className: "health-card", columnSpan: columnSpan, children: [_jsx("h2", { className: "health-card-title", children: title }), _jsx("div", { className: "health-card-content", children: loading ? (_jsxs("div", { className: "health-loading", children: [_jsx("div", { className: "health-loading-spinner" }), _jsx("p", { className: "health-loading-text", children: "Loading..." })] })) : error ? (_jsx("div", { className: "health-error", children: _jsxs("p", { className: "health-error-text", children: ["Error: ", error] }) })) : (children(data)) })] }));
+    if (typedProps.title) {
+        return (_jsxs(PageGridItem, { className: "health-card", columnSpan: typedProps.columnSpan, children: [_jsx("h2", { className: "health-card-title", children: typedProps.title }), _jsx("div", { className: "health-card-content", children: loading ? (_jsxs("div", { className: "health-loading", children: [_jsx("div", { className: "health-loading-spinner" }), _jsx("p", { className: "health-loading-text", children: "Loading..." })] })) : error ? (_jsx("div", { className: "health-error", children: _jsxs("p", { className: "health-error-text", children: ["Error: ", error] }) })) : (typedProps.children(data)) })] }));
     }
     // Legacy mode: render content directly without wrapper
-    return (_jsx(_Fragment, { children: loading ? (_jsxs("div", { className: "health-loading", children: [_jsx("div", { className: "health-loading-spinner" }), _jsx("p", { className: "health-loading-text", children: "Loading..." })] })) : error ? (_jsx("div", { className: "health-error", children: _jsxs("p", { className: "health-error-text", children: ["Error: ", error] }) })) : (children(data)) }));
+    return (_jsx(_Fragment, { children: loading ? (_jsxs("div", { className: "health-loading", children: [_jsx("div", { className: "health-loading-spinner" }), _jsx("p", { className: "health-loading-text", children: "Loading..." })] })) : error ? (_jsx("div", { className: "health-error", children: _jsxs("p", { className: "health-error-text", children: ["Error: ", error] }) })) : (typedProps.children(data)) }));
 }

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

@@ -1,6 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
+SiteHealthUptime.propTypes = {
+    siteName: PropTypes.string.isRequired,
+};
 export function SiteHealthUptime({ siteName }) {
     const fetchUptimeData = async (site) => {
         const response = await fetch(`/api/site-health/uptime?siteName=${encodeURIComponent(site)}`);

package/dist/components/callout/callout.js

@@ -89,16 +89,6 @@ CalloutButton.propTypes = {
     url: PropTypes.string.isRequired,
     target: PropTypes.string
 };
-/* export function CalloutButton( { title, url, target } : CalloutButtonType) {
-    return (
-        <div className="callout-button">
-            { (url)
-                ? <button type="button" className="callout-button"><a href={url || ""} target={target || ""} rel={target=="_blank" ? "noopener noreferrer" : ""}>{title}</a></button>
-                : null
-            }
-        </div>
-    );
-} */
 export function CalloutButton({ title, url, target }) {
     const handleClick = () => {
         if (target === '_blank') {

package/dist/components/carousel/carousel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import PropTypes /* , { InferProps } */ from 'prop-types';
+import PropTypes from 'prop-types';
 import { SmartImage } from '../cms/smartimage';
 import { usePixelatedConfig } from '../config/config.client';
 import { DragHandler } from './carousel.drag';
@@ -11,11 +11,22 @@ function capitalize(str) {
 }
 /* ========== CAROUSEL ========== */
 Carousel.propTypes = {
-    cards: PropTypes.array.isRequired,
+    cards: PropTypes.arrayOf(PropTypes.shape({
+        index: PropTypes.number.isRequired,
+        cardIndex: PropTypes.number.isRequired,
+        cardLength: PropTypes.number.isRequired,
+        link: PropTypes.string,
+        linkTarget: PropTypes.string,
+        image: PropTypes.string.isRequired,
+        imageAlt: PropTypes.string,
+        imgFit: PropTypes.oneOf(['contain', 'cover', 'fill']),
+        headerText: PropTypes.string,
+        subHeaderText: PropTypes.string,
+        bodyText: PropTypes.string,
+    })).isRequired,
     draggable: PropTypes.bool,
     imgFit: PropTypes.oneOf(['contain', 'cover', 'fill'])
 };
-// export type CarouselType = InferProps<typeof Carousel.propTypes>;
 export function Carousel(props) {
     const debug = false;
     let timer = useRef(null);
@@ -74,7 +85,7 @@ export function Carousel(props) {
             console.log('CarouselSimple: Dragging disabled');
     }
     if (props.cards && props.cards.length > 0) {
-        return (_jsxs("div", { className: "carousel-container", children: [_jsx("div", { className: "carousel-cards-container", children: props.cards.map((card, i) => (_jsx(CarouselCard, { index: i, cardIndex: cardIndex, cardLength: props.cards.length, link: card.link, linkTarget: card.linkTarget || '_self', image: card.image, imageAlt: card.imageAlt, imgFit: props.imgFit ? props.imgFit : 'fill', headerText: card.headerText, subHeaderText: card.subHeaderText, bodyText: card.bodyText }, i))) }), _jsxs("div", { className: "carousel-buttons", children: [_jsx(CarouselButton, { clickFunction: previousCard, glyph: '\u25C0' }), _jsx(CarouselButton, { clickFunction: stopTimer, glyph: '\u23F8' }), _jsx(CarouselButton, { clickFunction: nextCard, glyph: '\u25B6' })] })] }));
+        return (_jsxs("div", { className: "carousel-container", children: [_jsx("div", { className: "carousel-cards-container", children: props.cards.map((card, i) => (_jsx(CarouselCard, { index: i, cardIndex: cardIndex, cardLength: props.cards.length, link: card.link, linkTarget: card.linkTarget || '_self', image: card.image, imageAlt: card.imageAlt, imgFit: (props.imgFit || 'fill'), headerText: card.headerText, subHeaderText: card.subHeaderText, bodyText: card.bodyText }, i))) }), _jsxs("div", { className: "carousel-buttons", children: [_jsx(CarouselButton, { clickFunction: previousCard, glyph: '\u25C0' }), _jsx(CarouselButton, { clickFunction: stopTimer, glyph: '\u23F8' }), _jsx(CarouselButton, { clickFunction: nextCard, glyph: '\u25B6' })] })] }));
     }
     else {
         return (_jsx("div", { className: 'section-container', children: _jsx("div", { className: "carousel-container", children: _jsx(CarouselLoading, {}) }) }));

package/dist/components/carousel/tiles.js

@@ -7,7 +7,7 @@ import { usePixelatedConfig } from '../config/config.client';
 import "../../css/pixelated.grid.scss";
 import "./tiles.css";
 Tiles.propTypes = {
-    cards: PropTypes.object.isRequired,
+    cards: PropTypes.array.isRequired,
     rowCount: PropTypes.number,
 };
 export function Tiles(props) {

package/dist/components/cms/contentful.items.components.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { Carousel } from '../carousel/carousel';
 import { getContentfulEntriesByType, getContentfulEntryByEntryID } from "./contentful.delivery";
 import { usePixelatedConfig } from '../config/config.client';
-import { AddToShoppingCart } from "../shoppingcart/shoppingcart.functions";
+import { addToShoppingCart } from "../shoppingcart/shoppingcart.functions";
 import { AddToCartButton, /* GoToCartButton */ ViewItemDetails } from "../shoppingcart/shoppingcart.components";
 import { getCloudinaryRemoteFetchURL as getImg } from "./cloudinary";
 // import { Loading, ToggleLoading } from "../general/pixelated.loading";	
@@ -135,7 +135,7 @@ export function ContentfulListItem(props) {
                             ? _jsx(ContentfulItemHeader, { url: itemURL, target: itemURLTarget, title: thisItem.fields.title })
                             : _jsx(ContentfulItemHeader, { title: thisItem.fields.title }) }), _jsxs("div", { className: "contentful-item-details grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.sys.id] }), _jsxs("div", { children: [_jsx("b", { children: "UPC ID: " }), thisItem.fields.id] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.fields.quantity] }), _jsxs("div", { children: [_jsx("b", { children: "Brand / Model: " }), thisItem.fields.brand, " ", thisItem.fields.model] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.fields.date] })] }), _jsx("div", { className: "contentful-item-price", children: itemURL
                             ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.fields.price, " USD"] })
-                            : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsxs("div", { className: "contentful-item-addtocart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.sys.id }), _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id })] })] })] }));
+                            : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsxs("div", { className: "contentful-item-addtocart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.sys.id }), _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id })] })] })] }));
 }
 /* ========== CONTENTFUL ITEM HEADER ========== */
 ContentfulItemHeader.propTypes = {
@@ -156,7 +156,6 @@ ContentfulItemDetail.propTypes = {
 };
 export function ContentfulItemDetail(props) {
     const [item, setItem] = useState({});
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [assets, setAssets] = useState({});
     const [cards, setCards] = useState([]);
     const providerContentfulApiProps = usePixelatedConfig()?.contentful;
@@ -235,7 +234,7 @@ export function ContentfulItemDetail(props) {
                             ? _jsx(ContentfulItemHeader, { url: itemURL, title: thisItem.fields.title })
                             : _jsx(ContentfulItemHeader, { title: thisItem.fields.title }) }), _jsx("br", {}), _jsx("div", { className: "contentful-item-photo-carousel grid-s1-e7", children: _jsx(Carousel, { cards: cards, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "contentful-item-details grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.fields.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "contentful-item-details grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.sys.id] }), _jsxs("div", { children: [_jsx("b", { children: "UPC ID: " }), thisItem.fields.id] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.fields.quantity] }), _jsxs("div", { children: [_jsx("b", { children: "Brand / Model: " }), thisItem.fields.brand, " ", thisItem.fields.model] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.fields.date] }), _jsx("br", {})] }), _jsx("div", { className: "contentful-item-price", children: itemURL
                                     ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.fields.price, " USD"] })
-                                    : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsx("div", { className: "contentful-item-addtocart", children: _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id }) })] })] }) }));
+                                    : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsx("div", { className: "contentful-item-addtocart", children: _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id }) })] })] }) }));
     }
     else {
         return (_jsx(_Fragment, { children: _jsx("div", { id: "contentful-items", className: "contentful-items", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));

package/dist/components/cms/flickr.js

@@ -41,7 +41,7 @@ function getFlickrSize(size) {
         default: return '';
     }
 }
-GetFlickrData.PropTypes = {
+GetFlickrData.propTypes = {
     flickr: PropTypes.object,
     config: PropTypes.object,
 };

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

@@ -22,9 +22,9 @@ export function GoogleReviewsCard(props) {
             try {
                 const result = await getGoogleReviewsByPlaceId({
                     placeId: props.placeId,
-                    language: props.language,
-                    maxReviews: props.maxReviews,
-                    proxyBase: props.proxyBase,
+                    language: props.language ?? undefined,
+                    maxReviews: props.maxReviews ?? undefined,
+                    proxyBase: props.proxyBase ?? undefined,
                     apiKey: props.apiKey || GOOGLE_MAPS_API_KEY,
                 });
                 setPlace(result.place);