sanity-plugin-seofields 1.2.0 → 1.2.2

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var o = require("react"), sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), router = require("sanity/router"), ui = require("@sanity/ui");
+var o = require("react"), sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), router = require("sanity/router"), structure = require("sanity/structure"), ui = require("@sanity/ui");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -1172,22 +1172,29 @@ 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;
   color: #6b7280;
 `, StatsGrid = dt.div`
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   gap: 14px;
   margin-bottom: 20px;
-
-  @media (max-width: 1100px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  @media (max-width: 600px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
 `, StatCard = dt.div`
   background: #ffffff;
   border-radius: 10px;
@@ -1320,6 +1327,11 @@ const DashboardContainer = dt.div`
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
+  min-width: 0;
+`, TitleCell = dt.div`
+  min-width: 0;
+  overflow: hidden;
+  flex: 1;
 `, ColType = dt.div`
   flex: 0.8;
   min-width: 80px;
@@ -1357,8 +1369,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;
@@ -1518,6 +1530,34 @@ const DashboardContainer = dt.div`
 }) => {
   const { onClick, href } = router.useIntentLink({ intent: "edit", params: { id, type } });
   return /* @__PURE__ */ jsxRuntime.jsx(DocTitleLink, { href, onClick, title: "Open document", children });
+}, PaneLinkWrapper = dt.span`
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+
+  a {
+    font-size: 13px;
+    font-weight: 600;
+    color: #4f46e5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+    display: block;
+    transition: color 0.15s;
+
+    &:hover {
+      color: #4338ca;
+      text-decoration: underline;
+    }
+  }
+`, DocTitleAnchorPane = ({
+  id,
+  type,
+  children
+}) => {
+  const { ChildLink } = structure.usePaneRouter();
+  return /* @__PURE__ */ jsxRuntime.jsx(PaneLinkWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(ChildLink, { childId: id, childParameters: { type }, children }) });
 }, DocBadgeRenderer = ({ doc, docBadge }) => {
   const badge = docBadge(doc);
   return badge ? /* @__PURE__ */ jsxRuntime.jsx(CustomBadge, { $bgColor: badge.bgColor, $textColor: badge.textColor, $fontSize: badge.fontSize, children: badge.label }) : null;
@@ -1541,7 +1581,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 +1653,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 +1798,16 @@ const DashboardContainer = dt.div`
   docBadge,
   loadingLicense,
   loadingDocuments,
-  noDocuments
+  noDocuments,
+  previewMode = !1,
+  openInPane = !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 +1847,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 +1861,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 +1898,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 +1976,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 })
       ] }),
@@ -1855,8 +2085,8 @@ export default defineConfig({
           ] }),
           filteredAndSortedDocs.map((doc) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(ColTitle, { children: /* @__PURE__ */ jsxRuntime.jsxs(TitleWrapper, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DocTitleAnchor, { id: doc._id, type: doc._type, children: doc.title || "Untitled" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(TitleCell, { children: [
+                openInPane ? /* @__PURE__ */ jsxRuntime.jsx(DocTitleAnchorPane, { id: doc._id, type: doc._type, children: doc.title || "Untitled" }) : /* @__PURE__ */ jsxRuntime.jsx(DocTitleAnchor, { id: doc._id, type: doc._type, children: doc.title || "Untitled" }),
                 showDocumentId && /* @__PURE__ */ jsxRuntime.jsx(DocId, { children: doc._id })
               ] }),
               docBadge && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1867,7 +2097,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 +3107,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 +3128,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",
@@ -2913,9 +3148,17 @@ const resolveDashboardConfig = (healthDashboard) => {
     }
   };
 });
+function createSeoHealthPane(optionsOrS, optionsWhenS) {
+  const S2 = optionsOrS, { query, openInPane = !0, title: paneTitle, ...rest } = optionsWhenS ?? {}, SeoHealthPane = () => /* @__PURE__ */ jsxRuntime.jsx(SeoHealthDashboard, { customQuery: query, openInPane, title: paneTitle, ...rest });
+  return SeoHealthPane.displayName = "SeoHealthPane", S2.component(SeoHealthPane).title(paneTitle ?? "SEO Health").child((docId, { params }) => {
+    const builder = S2.document().documentId(docId);
+    return params?.type ? builder.schemaType(params.type) : builder;
+  });
+}
 exports.SeoHealthDashboard = SeoHealthDashboard;
 exports.SeoHealthTool = SeoHealthTool;
 exports.allSchemas = types;
+exports.createSeoHealthPane = createSeoHealthPane;
 exports.default = seofields;
 exports.metaAttributeSchema = metaAttribute;
 exports.metaTagSchema = metaTag;