@pixelated-tech/components 3.4.2 → 3.5.0

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

@@ -19,7 +19,12 @@ const dataCollectors = {
     collectSemanticTagsData,
     collectTitleTagsData,
     collectMetaKeywordsData,
-    collectMetaDescriptionsData
+    collectMetaDescriptionsData,
+    collectMobileFirstIndexingData,
+    collectInternationalSEOData,
+    collectFacetedNavigationData,
+    collectBrowserCachingData,
+    collectGzipCompressionData
 };
 /**
  * Registry of scoring functions
@@ -28,7 +33,12 @@ const scorers = {
     calculateSemanticTagsScore,
     calculateTitleTagsScore,
     calculateMetaKeywordsScore,
-    calculateMetaDescriptionsScore
+    calculateMetaDescriptionsScore,
+    calculateMobileFirstIndexingScore,
+    calculateInternationalSEOData,
+    calculateFacetedNavigationScore,
+    calculateBrowserCachingScore,
+    calculateGzipCompressionScore
 };
 /**
  * Data collection functions
@@ -229,6 +239,311 @@ function calculateMetaDescriptionsScore(descriptionData) {
         }
     };
 }
+/**
+ * Mobile-First Indexing Data Collector
+ */
+function collectMobileFirstIndexingData(html) {
+    const hasViewport = /<meta[^>]*name=["']viewport["'][^>]*content=["'][^"']*["'][^>]*>/i.test(html);
+    const hasResponsiveMeta = /<meta[^>]*name=["']viewport["'][^>]*content=["'][^"']*width=device-width[^"']*["'][^>]*>/i.test(html);
+    const hasMobileStyles = /@media[^}]*max-width[^}]*mobile|phone|tablet/i.test(html) || /<link[^>]*media=["'][^"']*handheld[^"']*["'][^>]*>/i.test(html);
+    return {
+        hasViewport,
+        hasResponsiveMeta,
+        hasMobileStyles,
+        score: (hasViewport && hasResponsiveMeta) ? 1 : 0
+    };
+}
+/**
+ * Mobile-First Indexing Scorer
+ */
+function calculateMobileFirstIndexingScore(data) {
+    const score = data.score;
+    const displayValue = score ? 'Mobile-friendly viewport detected' : 'Missing or inadequate viewport configuration';
+    return {
+        score,
+        displayValue,
+        details: {
+            items: [
+                { type: 'viewport', present: data.hasViewport, optimal: data.hasResponsiveMeta },
+                { type: 'responsive-styles', present: data.hasMobileStyles }
+            ]
+        }
+    };
+}
+/**
+ * International SEO Data Collector
+ */
+function collectInternationalSEOData(html) {
+    const currencySymbols = html.match(/[£€¥$₹₽₩₦₨₪₫₡₵₺₴₸₼₲₱₭₯₰₳₶₷₹₻₽₾₿]/g) || [];
+    const langAttributes = html.match(/lang=["'][^"']*["']/gi) || [];
+    const localeIndicators = html.match(/(en-US|en-GB|fr-FR|de-DE|es-ES|it-IT|pt-BR|ja-JP|ko-KR|zh-CN|zh-TW|ru-RU|ar-SA|hi-IN)/gi) || [];
+    return {
+        currencyCount: currencySymbols.length,
+        langAttributes: langAttributes.length,
+        localeIndicators: localeIndicators.length,
+        hasInternationalElements: currencySymbols.length > 0 || langAttributes.length > 0 || localeIndicators.length > 0
+    };
+}
+/**
+ * International SEO Scorer
+ */
+function calculateInternationalSEOData(data) {
+    const score = data.hasInternationalElements ? 1 : 0;
+    const displayValue = score ? `${data.currencyCount} currencies, ${data.langAttributes} lang attributes, ${data.localeIndicators} locale indicators found` : 'No international SEO elements detected';
+    return {
+        score,
+        displayValue,
+        details: {
+            items: [
+                { type: 'currencies', count: data.currencyCount },
+                { type: 'lang-attributes', count: data.langAttributes },
+                { type: 'locale-indicators', count: data.localeIndicators }
+            ]
+        }
+    };
+}
+/**
+ * Faceted Navigation Data Collector
+ */
+function collectFacetedNavigationData(html) {
+    // Look for URL patterns that suggest faceted navigation (query parameters, filters)
+    const filterUrls = html.match(/href=["'][^"']*[?&][^"']*filter[^"']*["']/gi) || [];
+    const sortUrls = html.match(/href=["'][^"']*[?&][^"']*sort[^"']*["']/gi) || [];
+    const categoryUrls = html.match(/href=["'][^"']*[?&][^"']*category[^"']*["']/gi) || [];
+    const cleanUrls = html.match(/href=["'][^"']*\/[^?]*\/[^?]*["']/gi) || [];
+    return {
+        filterUrls: filterUrls.length,
+        sortUrls: sortUrls.length,
+        categoryUrls: categoryUrls.length,
+        cleanUrls: cleanUrls.length,
+        hasFacetedNavigation: (filterUrls.length + sortUrls.length + categoryUrls.length) > 0
+    };
+}
+/**
+ * Faceted Navigation Scorer
+ */
+function calculateFacetedNavigationScore(data) {
+    const totalFaceted = data.filterUrls + data.sortUrls + data.categoryUrls;
+    const totalUrls = data.cleanUrls + totalFaceted;
+    // Calculate score as percentage of clean URLs vs total URLs
+    // Higher score = more clean URLs (better for SEO)
+    let score = 1; // Default to 100% if no URLs found
+    let displayValue = 'No URLs detected';
+    if (totalUrls > 0) {
+        score = data.cleanUrls / totalUrls; // Ratio of clean URLs to total URLs
+        const percentage = Math.round(score * 100);
+        if (totalFaceted === 0) {
+            displayValue = `100% clean URLs - excellent for SEO`;
+        }
+        else if (score >= 0.8) {
+            displayValue = `${percentage}% clean URLs (${data.cleanUrls} clean, ${totalFaceted} faceted)`;
+        }
+        else if (score >= 0.5) {
+            displayValue = `${percentage}% clean URLs - consider reducing faceted navigation (${data.cleanUrls} clean, ${totalFaceted} faceted)`;
+        }
+        else {
+            displayValue = `${percentage}% clean URLs - high faceted navigation may hurt SEO (${data.cleanUrls} clean, ${totalFaceted} faceted)`;
+        }
+    }
+    return {
+        score,
+        displayValue,
+        details: {
+            items: [
+                { type: 'clean-urls', count: data.cleanUrls },
+                { type: 'filter-urls', count: data.filterUrls },
+                { type: 'sort-urls', count: data.sortUrls },
+                { type: 'category-urls', count: data.categoryUrls }
+            ]
+        }
+    };
+}
+/**
+ * Browser Caching Data Collector
+ */
+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)'
+            }
+        });
+        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 {
+        return {
+            cacheControl: '',
+            expires: '',
+            lastModified: '',
+            etag: '',
+            age: '',
+            hasCachingHeaders: false,
+            error: 'Could not access response headers - network error or server unavailable'
+        };
+    }
+}
+/**
+ * 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 = [];
+    const goodHeaders = [];
+    // Check Cache-Control header
+    if (data.cacheControl) {
+        goodHeaders.push('Cache-Control');
+        // Check for good caching directives
+        if (data.cacheControl.includes('max-age') && !data.cacheControl.includes('no-cache') && !data.cacheControl.includes('no-store')) {
+            score = 1;
+            displayValue = 'Good caching headers found';
+        }
+        else if (data.cacheControl.includes('no-cache') || data.cacheControl.includes('no-store')) {
+            issues.push('Cache-Control prevents caching');
+        }
+    }
+    // Check Expires header
+    if (data.expires) {
+        goodHeaders.push('Expires');
+        const expiresDate = new Date(data.expires);
+        const now = new Date();
+        if (expiresDate > now) {
+            if (score === 0)
+                score = 0.5; // Partial credit for expires header
+        }
+    }
+    // Check other headers
+    if (data.lastModified)
+        goodHeaders.push('Last-Modified');
+    if (data.etag)
+        goodHeaders.push('ETag');
+    if (data.age)
+        goodHeaders.push('Age');
+    if (goodHeaders.length > 0 && score === 0) {
+        score = 0.5; // Partial credit for having some caching headers
+        displayValue = `Basic caching headers found: ${goodHeaders.join(', ')}`;
+    }
+    if (issues.length > 0) {
+        displayValue += ` (${issues.join(', ')})`;
+    }
+    return {
+        score,
+        displayValue,
+        details: {
+            headers: {
+                'cache-control': data.cacheControl,
+                'expires': data.expires,
+                'last-modified': data.lastModified,
+                'etag': data.etag,
+                'age': data.age
+            }
+        }
+    };
+}
+/**
+ * Gzip Compression Data Collector
+ */
+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
+            }
+        });
+        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 {
+        return {
+            contentEncoding: '',
+            contentLength: '',
+            transferEncoding: '',
+            isCompressed: false,
+            error: 'Could not access response headers - network error or server unavailable'
+        };
+    }
+}
+/**
+ * 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) {
+        score = 1;
+        displayValue = `Compression enabled: ${data.contentEncoding || data.transferEncoding}`;
+    }
+    else {
+        displayValue = 'Response not compressed - consider enabling gzip compression';
+    }
+    return {
+        score,
+        displayValue,
+        details: {
+            headers: {
+                'content-encoding': data.contentEncoding,
+                'content-length': data.contentLength,
+                'transfer-encoding': data.transferEncoding
+            }
+        }
+    };
+}
 /**
  * Crawl the site to discover internal pages
  */
@@ -348,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
@@ -373,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;
@@ -387,12 +708,23 @@ async function analyzeSinglePage(url) {
                 const collector = dataCollectors[metric.dataCollector];
                 const scorer = scorers[metric.scorer];
                 if (collector && scorer) {
-                    const rawData = 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;
                     details = result.details;
                 }
+                else {
+                    score = 0;
+                    displayValue = `Data collector or scorer not found: ${metric.dataCollector}/${metric.scorer}`;
+                }
             }
             else if (metric.pattern) {
                 // Use pattern-based analysis
@@ -401,6 +733,11 @@ async function analyzeSinglePage(url) {
                 displayValue = result.displayValue;
                 details = result.details;
             }
+            else {
+                // Neither data collector/scorer nor pattern available
+                score = 0;
+                displayValue = 'Configuration incomplete - no pattern or data collector defined';
+            }
             // Override H1 and H2 results with direct DOM counts for accuracy and speed
             if (metric.id === 'h1-tags') {
                 score = pageData.h1Count === (metric.expectedCount || 1) ? 1 : 0;
@@ -422,6 +759,8 @@ async function analyzeSinglePage(url) {
                 details
             });
         }
+        // Close the page after analysis
+        await page.close();
         return {
             url,
             title: pageData.title,
@@ -441,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 = [];
@@ -520,6 +855,38 @@ async function performSiteWideAudits(baseUrl) {
                         displayValue = 'Manifest.webmanifest not accessible';
                     }
                     break;
+                case 'gzip-compression':
+                    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':
+                    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
+                    displayValue = 'Requires comprehensive site crawl';
+                    break;
+                case 'safe-browsing-status':
+                    score = 0; // Placeholder - would need external API
+                    displayValue = 'Requires Google Safe Browsing API';
+                    break;
                 default:
                     score = 0;
                     displayValue = 'Not implemented';
@@ -595,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)) }));
 }