sanity-plugin-seofields 1.2.0 → 1.2.1

package/dist/index.d.mts

@@ -308,6 +308,16 @@ export declare interface SeoFieldsPluginConfig {
               fontSize?: string
             }
           | undefined
+        /**
+         * Enable preview/demo mode to show dummy data.
+         * Useful for testing, documentation, or showcasing the dashboard.
+         * When enabled, displays realistic sample documents with various SEO scores.
+         * Defaults to `false`.
+         *
+         * @example
+         * previewMode: true
+         */
+        previewMode?: boolean
       }
 }
 
@@ -413,6 +423,13 @@ declare interface SeoHealthDashboardProps {
    * Defaults to `"No documents found"`.
    */
   noDocuments?: React_2.ReactNode
+  /**
+   * Enable preview/demo mode to show dummy data.
+   * Useful for testing, documentation, or showcasing the dashboard.
+   * When enabled, displays realistic sample documents with various SEO scores.
+   * Defaults to `false`.
+   */
+  previewMode?: boolean
 }
 
 export declare interface SeoHealthMetrics {

package/dist/index.d.ts

@@ -308,6 +308,16 @@ export declare interface SeoFieldsPluginConfig {
               fontSize?: string
             }
           | undefined
+        /**
+         * Enable preview/demo mode to show dummy data.
+         * Useful for testing, documentation, or showcasing the dashboard.
+         * When enabled, displays realistic sample documents with various SEO scores.
+         * Defaults to `false`.
+         *
+         * @example
+         * previewMode: true
+         */
+        previewMode?: boolean
       }
 }
 
@@ -413,6 +423,13 @@ declare interface SeoHealthDashboardProps {
    * Defaults to `"No documents found"`.
    */
   noDocuments?: React_2.ReactNode
+  /**
+   * Enable preview/demo mode to show dummy data.
+   * Useful for testing, documentation, or showcasing the dashboard.
+   * When enabled, displays realistic sample documents with various SEO scores.
+   * Defaults to `false`.
+   */
+  previewMode?: boolean
 }
 
 export declare interface SeoHealthMetrics {

package/dist/index.js

@@ -1172,6 +1172,20 @@ const DashboardContainer = dt.div`
   font-weight: 700;
   color: #111827;
   letter-spacing: -0.3px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`, PreviewBadge = dt.span`
+  display: inline-block;
+  background: #fef3c7;
+  color: #92400e;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-left: 8px;
 `, PageSubtitle = dt.p`
   margin: 0;
   font-size: 13px;
@@ -1357,8 +1371,8 @@ const DashboardContainer = dt.div`
   border-radius: 5px;
   font-size: 11px;
   font-weight: 500;
-  background: #ede9fe;
-  color: #5b21b6;
+  background: ${(p) => p.$bgColor || "#ede9fe"};
+  color: ${(p) => p.$textColor || "#5b21b6"};
 `, TypeText = dt.span`
   font-size: 12px;
   font-weight: 500;
@@ -1541,7 +1555,48 @@ const DashboardContainer = dt.div`
   text-align: center;
   color: #9ca3af;
   font-size: 13px;
-`, getStatusCategory = (score) => score >= 80 ? "excellent" : score >= 60 ? "good" : score >= 40 ? "fair" : score > 0 ? "poor" : "missing", scoreMetaTitle = (title) => {
+`, TYPE_COLOR_PALETTE = [
+  { bg: "#dbeafe", text: "#0c4a6e" },
+  // Blue
+  { bg: "#dcfce7", text: "#14532d" },
+  // Green
+  { bg: "#fce7f3", text: "#500724" },
+  // Pink
+  { bg: "#fed7aa", text: "#7c2d12" },
+  // Orange
+  { bg: "#e9d5ff", text: "#581c87" },
+  // Purple
+  { bg: "#f3e8ff", text: "#3f0f5c" },
+  // Deep Purple
+  { bg: "#ccfbf1", text: "#134e4a" },
+  // Teal
+  { bg: "#ddd6fe", text: "#3730a3" },
+  // Indigo
+  { bg: "#fca5a5", text: "#7f1d1d" },
+  // Red
+  { bg: "#a7f3d0", text: "#065f46" },
+  // Emerald
+  { bg: "#fbbf24", text: "#78350f" },
+  // Amber
+  { bg: "#c4b5fd", text: "#3b0764" },
+  // Violet
+  { bg: "#f0fdf4", text: "#15803d" },
+  // Light Green
+  { bg: "#fef2f2", text: "#991b1b" },
+  // Light Red
+  { bg: "#f5f3ff", text: "#5b21b6" },
+  // Light Purple
+  { bg: "#fffbeb", text: "#92400e" }
+  // Light Amber
+], getTypeColor = (type) => {
+  let hash2 = 0;
+  for (let i = 0; i < type.length; i += 1) {
+    const char2 = type.charCodeAt(i);
+    hash2 = Math.abs(hash2 * 31 + char2);
+  }
+  const colorIndex = hash2 % TYPE_COLOR_PALETTE.length;
+  return TYPE_COLOR_PALETTE[colorIndex];
+}, getStatusCategory = (score) => score >= 80 ? "excellent" : score >= 60 ? "good" : score >= 40 ? "fair" : score > 0 ? "poor" : "missing", scoreMetaTitle = (title) => {
   const issues = [];
   let score = 0;
   return title && title.length >= 50 && title.length <= 60 ? score = 15 : title && title.length > 0 ? (score = 10, title.length < 50 && issues.push("Meta title too short (< 50 chars)"), title.length > 60 && issues.push("Meta title too long (> 60 chars)")) : issues.push("Missing meta title"), { score, issues };
@@ -1572,7 +1627,135 @@ const DashboardContainer = dt.div`
   totalScore += twitterScore.score, allIssues.push(...twitterScore.issues), robots2 && !robots2.noIndex && (totalScore += 5);
   const status = getStatusCategory(totalScore);
   return { score: totalScore, status, issues: allIssues };
-}, resolveTypeLabel = (type, typeLabels) => typeLabels?.[type] ?? type, buildTitleProjection = (titleField) => !titleField || titleField === "title" ? "title" : typeof titleField == "string" ? `"title": ${titleField}` : `"title": select(${Object.entries(titleField).map(([type, field]) => `_type == "${type}" => ${field}`).join(", ")}, title)`, SeoHealthDashboard = ({
+}, resolveTypeLabel = (type, typeLabels) => typeLabels?.[type] ?? type, buildTitleProjection = (titleField) => !titleField || titleField === "title" ? "title" : typeof titleField == "string" ? `"title": ${titleField}` : `"title": select(${Object.entries(titleField).map(([type, field]) => `_type == "${type}" => ${field}`).join(", ")}, title)`, generateDummyData = () => [
+  {
+    _id: "preview-post-1",
+    _type: "post",
+    title: "Getting Started with SEO Best Practices",
+    slug: { current: "getting-started-seo" },
+    _updatedAt: new Date(Date.now() - 1728e5).toISOString(),
+    seo: {
+      title: "Getting Started with SEO Best Practices | My Blog",
+      description: "Learn the fundamentals of SEO optimization to improve your website visibility and search rankings.",
+      keywords: ["seo", "best practices", "optimization"],
+      metaImage: { _type: "image", asset: { _ref: "image-123", _type: "reference" } },
+      openGraph: {
+        title: "SEO Best Practices Guide",
+        description: "Master SEO optimization",
+        image: { _type: "image", asset: { _ref: "image-123", _type: "reference" }, alt: "SEO Guide" },
+        type: "article"
+      },
+      twitter: {
+        title: "SEO Best Practices",
+        description: "Learn SEO optimization",
+        image: { _type: "image", asset: { _ref: "image-123", _type: "reference" }, alt: "Guide" },
+        card: "summary_large_image"
+      }
+    }
+  },
+  {
+    _id: "preview-post-2",
+    _type: "post",
+    title: "Advanced Analytics Strategy",
+    slug: { current: "advanced-analytics" },
+    _updatedAt: new Date(Date.now() - 432e6).toISOString(),
+    seo: {
+      title: "Advanced Analytics",
+      description: "Strategy tips",
+      keywords: ["analytics", "data"],
+      openGraph: {
+        title: "Analytics Guide"
+      }
+    }
+  },
+  {
+    _id: "preview-page-1",
+    _type: "page",
+    title: "About Us",
+    slug: { current: "about" },
+    _updatedAt: new Date(Date.now() - 864e6).toISOString(),
+    seo: {
+      title: "About",
+      keywords: ["company", "team"],
+      metaImage: { _type: "image", asset: { _ref: "image-456", _type: "reference" } }
+    }
+  },
+  {
+    _id: "preview-post-3",
+    _type: "post",
+    title: "Content Marketing Trends for 2024",
+    slug: { current: "content-marketing-trends" },
+    _updatedAt: new Date(Date.now() - 864e5).toISOString(),
+    seo: {
+      title: "Content Marketing Trends 2024",
+      description: "Discover the latest content marketing trends and strategies to engage your audience effectively.",
+      keywords: ["content marketing", "trends", "strategy", "engagement"],
+      metaImage: { _type: "image", asset: { _ref: "image-789", _type: "reference" } },
+      openGraph: {
+        title: "Content Marketing Trends 2024",
+        description: "Latest trends in content marketing",
+        image: { _type: "image", asset: { _ref: "image-789", _type: "reference" }, alt: "Trends" },
+        type: "article"
+      },
+      twitter: {
+        title: "Content Marketing Trends",
+        description: "Discover the latest trends",
+        card: "summary"
+      }
+    }
+  },
+  {
+    _id: "preview-post-4",
+    _type: "product",
+    title: "Pro Plan",
+    slug: { current: "pro-plan" },
+    _updatedAt: new Date(Date.now() - 1296e6).toISOString(),
+    seo: {
+      title: "Pro",
+      keywords: ["pricing"]
+    }
+  },
+  {
+    _id: "preview-page-2",
+    _type: "page",
+    title: "Contact",
+    slug: { current: "contact" },
+    _updatedAt: new Date(Date.now() - 6912e5).toISOString(),
+    seo: {
+      openGraph: {
+        title: "Get in Touch"
+      }
+    }
+  },
+  {
+    _id: "preview-post-5",
+    _type: "post",
+    title: "Mobile Optimization Guide",
+    slug: { current: "mobile-optimization" },
+    _updatedAt: new Date(Date.now() - 2592e5).toISOString(),
+    seo: {
+      title: "Mobile Optimization Guide: Best Practices for Responsive Design",
+      description: "Complete guide to mobile optimization including responsive design, performance tips, and user experience best practices for modern web development.",
+      keywords: ["mobile", "optimization", "responsive", "performance"],
+      metaImage: { _type: "image", asset: { _ref: "image-mobile", _type: "reference" } },
+      openGraph: {
+        title: "Mobile Optimization Best Practices",
+        description: "Master mobile web optimization",
+        image: { _type: "image", asset: { _ref: "image-mobile", _type: "reference" }, alt: "Mobile" },
+        type: "article"
+      },
+      twitter: {
+        title: "Mobile Optimization Tips",
+        description: "Responsive design best practices",
+        image: { _type: "image", asset: { _ref: "image-mobile", _type: "reference" }, alt: "Mobile" },
+        card: "summary_large_image"
+      }
+    }
+  }
+].map((doc) => ({
+  ...doc,
+  health: calculateHealthScore(doc)
+})), SeoHealthDashboard = ({
   icon = "\u{1F4CA}",
   title = "SEO Health Dashboard",
   description = "Monitor and optimize SEO fields across all your documents",
@@ -1589,10 +1772,15 @@ const DashboardContainer = dt.div`
   docBadge,
   loadingLicense,
   loadingDocuments,
-  noDocuments
+  noDocuments,
+  previewMode = !1
 }) => {
   const client = sanity.useClient({ apiVersion }), [licenseStatus, setLicenseStatus] = o.useState("loading"), [documents, setDocuments] = o.useState([]), [loading, setLoading] = o.useState(!0), [searchQuery, setSearchQuery] = o.useState(""), [filterStatus, setFilterStatus] = o.useState("all"), [filterType, setFilterType] = o.useState("all"), [sortBy, setSortBy] = o.useState("score"), [activePopover, setActivePopover] = o.useState(null), VALIDATION_ENDPOINT = "https://sanity-plugin-seofields.thehardik.in/api/validate-license", CACHE_TTL_MS = 3600 * 1e3, validateLicense = o.useCallback(
     async (forceRefresh = !1) => {
+      if (previewMode) {
+        setLicenseStatus("valid");
+        return;
+      }
       if (!licenseKey) {
         setLicenseStatus("invalid");
         return;
@@ -1632,11 +1820,11 @@ const DashboardContainer = dt.div`
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [licenseKey]
+    [licenseKey, previewMode]
   );
   o.useEffect(() => {
     validateLicense();
-  }, [licenseKey]);
+  }, [licenseKey, previewMode]);
   const handleMouseEnterIssues = (el, issues) => {
     if (!el) return;
     const rect = el.getBoundingClientRect(), popoverWidth = 280, viewportWidth = window.innerWidth;
@@ -1646,7 +1834,10 @@ const DashboardContainer = dt.div`
   o.useEffect(() => {
     (async () => {
       try {
-        setLoading(!0);
+        if (setLoading(!0), previewMode) {
+          setDocuments(generateDummyData());
+          return;
+        }
         let groqQuery, params = {};
         if (customQuery)
           groqQuery = customQuery;
@@ -1680,7 +1871,16 @@ const DashboardContainer = dt.div`
         setLoading(!1);
       }
     })();
-  }, [client, customQuery, queryRequireSeo, JSON.stringify(queryTypes), JSON.stringify(titleField)]);
+  }, [
+    client,
+    customQuery,
+    queryRequireSeo,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(queryTypes),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(titleField),
+    previewMode
+  ]);
   const uniqueDocumentTypes = o.useMemo(() => {
     const types2 = new Set(documents.map((doc) => doc._type));
     return Array.from(types2).sort();
@@ -1749,9 +1949,12 @@ export default defineConfig({
     licenseStatus === "valid" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(PageHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(PageTitle, { children: [
-          icon,
-          " ",
-          title
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            icon,
+            " ",
+            title
+          ] }),
+          previewMode && /* @__PURE__ */ jsxRuntime.jsx(PreviewBadge, { children: "Preview Mode" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(PageSubtitle, { children: description })
       ] }),
@@ -1867,7 +2070,10 @@ export default defineConfig({
                 }
               )
             ] }) }),
-            showTypeColumn && /* @__PURE__ */ jsxRuntime.jsx(ColType, { children: typeColumnMode === "text" ? /* @__PURE__ */ jsxRuntime.jsx(TypeText, { children: resolveTypeLabel(doc._type, typeLabels) }) : /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { children: resolveTypeLabel(doc._type, typeLabels) }) }),
+            showTypeColumn && /* @__PURE__ */ jsxRuntime.jsx(ColType, { children: typeColumnMode === "text" ? /* @__PURE__ */ jsxRuntime.jsx(TypeText, { children: resolveTypeLabel(doc._type, typeLabels) }) : (() => {
+              const typeColor = getTypeColor(doc._type);
+              return /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $bgColor: typeColor.bg, $textColor: typeColor.text, children: resolveTypeLabel(doc._type, typeLabels) });
+            })() }),
             /* @__PURE__ */ jsxRuntime.jsx(ColScore, { children: /* @__PURE__ */ jsxRuntime.jsxs(ScoreBadge, { $score: doc.health.score, children: [
               doc.health.score,
               "%"
@@ -2874,7 +3080,8 @@ const resolveDashboardConfig = (healthDashboard) => {
     docBadge: cfg?.docBadge,
     loadingLicense: cfg?.content?.loadingLicense,
     loadingDocuments: cfg?.content?.loadingDocuments,
-    noDocuments: cfg?.content?.noDocuments
+    noDocuments: cfg?.content?.noDocuments,
+    previewMode: cfg?.previewMode
   };
 }, seofields = sanity.definePlugin((config = {}) => {
   const { healthDashboard = !0 } = config, dash = resolveDashboardConfig(healthDashboard), BoundSeoHealthTool = () => o__default.default.createElement(SeoHealthTool, {
@@ -2894,7 +3101,8 @@ const resolveDashboardConfig = (healthDashboard) => {
     docBadge: dash.docBadge,
     loadingLicense: dash.loadingLicense,
     loadingDocuments: dash.loadingDocuments,
-    noDocuments: dash.noDocuments
+    noDocuments: dash.noDocuments,
+    previewMode: dash.previewMode
   });
   return {
     name: "sanity-plugin-seofields",