sanity-plugin-seofields 1.1.1 → 1.2.0

package/dist/index.mjs

@@ -1314,6 +1314,11 @@ const DashboardContainer = dt.div`
 `, ColTitle = dt.div`
   flex: 2;
   min-width: 0;
+`, TitleWrapper = dt.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
 `, ColType = dt.div`
   flex: 0.8;
   min-width: 80px;
@@ -1353,6 +1358,20 @@ const DashboardContainer = dt.div`
   font-weight: 500;
   background: #ede9fe;
   color: #5b21b6;
+`, TypeText = dt.span`
+  font-size: 12px;
+  font-weight: 500;
+  color: #374151;
+`, CustomBadge = dt.span`
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: ${(p) => p.$fontSize || "10px"};
+  font-weight: 600;
+  margin-left: 6px;
+  background: ${(p) => p.$bgColor || "#e0e7ff"};
+  color: ${(p) => p.$textColor || "#3730a3"};
+  white-space: nowrap;
 `, ScoreBadge = dt.span`
   display: inline-block;
   padding: 4px 10px;
@@ -1498,6 +1517,9 @@ const DashboardContainer = dt.div`
 }) => {
   const { onClick, href } = useIntentLink({ intent: "edit", params: { id, type } });
   return /* @__PURE__ */ jsx(DocTitleLink, { href, onClick, title: "Open document", children });
+}, DocBadgeRenderer = ({ doc, docBadge }) => {
+  const badge = docBadge(doc);
+  return badge ? /* @__PURE__ */ jsx(CustomBadge, { $bgColor: badge.bgColor, $textColor: badge.textColor, $fontSize: badge.fontSize, children: badge.label }) : null;
 }, spin = mt`
   to { transform: rotate(360deg); }
 `, Spinner = dt.div`
@@ -1549,7 +1571,7 @@ 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 };
-}, 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)`, SeoHealthDashboard = ({
   icon = "\u{1F4CA}",
   title = "SEO Health Dashboard",
   description = "Monitor and optimize SEO fields across all your documents",
@@ -1559,7 +1581,14 @@ const DashboardContainer = dt.div`
   queryRequireSeo = !0,
   customQuery,
   apiVersion = "2023-01-01",
-  licenseKey
+  licenseKey,
+  typeLabels,
+  typeColumnMode = "badge",
+  titleField,
+  docBadge,
+  loadingLicense,
+  loadingDocuments,
+  noDocuments
 }) => {
   const client = useClient({ apiVersion }), [licenseStatus, setLicenseStatus] = useState("loading"), [documents, setDocuments] = useState([]), [loading, setLoading] = useState(!0), [searchQuery, setSearchQuery] = useState(""), [filterStatus, setFilterStatus] = useState("all"), [filterType, setFilterType] = useState("all"), [sortBy, setSortBy] = useState("score"), [activePopover, setActivePopover] = useState(null), VALIDATION_ENDPOINT = "https://sanity-plugin-seofields.thehardik.in/api/validate-license", CACHE_TTL_MS = 3600 * 1e3, validateLicense = useCallback(
     async (forceRefresh = !1) => {
@@ -1618,17 +1647,23 @@ const DashboardContainer = dt.div`
       try {
         setLoading(!0);
         let groqQuery, params = {};
-        customQuery ? groqQuery = customQuery : queryTypes && queryTypes.length > 0 ? (groqQuery = `*[_type in $types${queryRequireSeo ? " && seo != null" : ""} && !(_id in path("drafts.**"))]{
+        if (customQuery)
+          groqQuery = customQuery;
+        else if (queryTypes && queryTypes.length > 0) {
+          const seoFilter = queryRequireSeo ? " && seo != null" : "", titleProj = buildTitleProjection(titleField);
+          groqQuery = `*[_type in $types${seoFilter} && !(_id in path("drafts.**"))]{
             _id,
             _type,
-            title,
+            ${titleProj},
             slug,
             seo,
             _updatedAt
-          }`, params = { types: queryTypes }) : groqQuery = `*[seo != null && !(_id in path("drafts.**"))]{
+          }`, params = { types: queryTypes };
+        } else
+          groqQuery = `*[seo != null && !(_id in path("drafts.**"))]{
             _id,
             _type,
-            title,
+            ${buildTitleProjection(titleField)},
             slug,
             seo,
             _updatedAt
@@ -1644,7 +1679,7 @@ const DashboardContainer = dt.div`
         setLoading(!1);
       }
     })();
-  }, [client, customQuery, queryRequireSeo, JSON.stringify(queryTypes)]);
+  }, [client, customQuery, queryRequireSeo, JSON.stringify(queryTypes), JSON.stringify(titleField)]);
   const uniqueDocumentTypes = useMemo(() => {
     const types2 = new Set(documents.map((doc) => doc._type));
     return Array.from(types2).sort();
@@ -1662,7 +1697,7 @@ const DashboardContainer = dt.div`
   return /* @__PURE__ */ jsxs(DashboardContainer, { children: [
     licenseStatus === "loading" && /* @__PURE__ */ jsxs(LoadingState, { style: { padding: "80px 24px" }, children: [
       /* @__PURE__ */ jsx(Spinner, {}),
-      "Verifying license\u2026"
+      loadingLicense ?? "Verifying license\u2026"
     ] }),
     licenseStatus === "invalid" && /* @__PURE__ */ jsx(UpgradeContainer, { children: /* @__PURE__ */ jsx(UpgradeBox, { children: licenseKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(UpgradeLock, { children: "\u274C" }),
@@ -1789,7 +1824,7 @@ export default defineConfig({
             onChange: (e) => setFilterType(e.currentTarget.value),
             children: [
               /* @__PURE__ */ jsx("option", { value: "all", children: "All Types" }),
-              uniqueDocumentTypes.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: type }, type))
+              uniqueDocumentTypes.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: resolveTypeLabel(type, typeLabels) }, type))
             ]
           }
         ),
@@ -1808,9 +1843,9 @@ export default defineConfig({
       /* @__PURE__ */ jsxs(TableCard, { children: [
         loading && /* @__PURE__ */ jsxs(LoadingState, { children: [
           /* @__PURE__ */ jsx(Spinner, {}),
-          "Loading documents\u2026"
+          loadingDocuments ?? "Loading documents\u2026"
         ] }),
-        !loading && (filteredAndSortedDocs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { children: "No documents found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        !loading && (filteredAndSortedDocs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { children: noDocuments ?? "No documents found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(TableHeader, { children: [
             /* @__PURE__ */ jsx(ColTitle, { children: "Title" }),
             showTypeColumn && /* @__PURE__ */ jsx(ColType, { children: "Type" }),
@@ -1818,11 +1853,20 @@ export default defineConfig({
             /* @__PURE__ */ jsx(ColIssues, { children: "Top Issues" })
           ] }),
           filteredAndSortedDocs.map((doc) => /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsxs(ColTitle, { children: [
-              /* @__PURE__ */ jsx(DocTitleAnchor, { id: doc._id, type: doc._type, children: doc.title || "Untitled" }),
-              showDocumentId && /* @__PURE__ */ jsx(DocId, { children: doc._id })
-            ] }),
-            showTypeColumn && /* @__PURE__ */ jsx(ColType, { children: /* @__PURE__ */ jsx(TypeBadge, { children: doc._type }) }),
+            /* @__PURE__ */ jsx(ColTitle, { children: /* @__PURE__ */ jsxs(TitleWrapper, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(DocTitleAnchor, { id: doc._id, type: doc._type, children: doc.title || "Untitled" }),
+                showDocumentId && /* @__PURE__ */ jsx(DocId, { children: doc._id })
+              ] }),
+              docBadge && /* @__PURE__ */ jsx(
+                DocBadgeRenderer,
+                {
+                  doc,
+                  docBadge
+                }
+              )
+            ] }) }),
+            showTypeColumn && /* @__PURE__ */ jsx(ColType, { children: typeColumnMode === "text" ? /* @__PURE__ */ jsx(TypeText, { children: resolveTypeLabel(doc._type, typeLabels) }) : /* @__PURE__ */ jsx(TypeBadge, { children: resolveTypeLabel(doc._type, typeLabels) }) }),
             /* @__PURE__ */ jsx(ColScore, { children: /* @__PURE__ */ jsxs(ScoreBadge, { $score: doc.health.score, children: [
               doc.health.score,
               "%"
@@ -1917,8 +1961,8 @@ export default defineConfig({
   const feedback = [], charCount = description?.length || 0;
   if (!description?.trim())
     return feedback.push({ text: "Meta description is empty. Add content to improve SEO.", color: "red" }), feedback;
-  if (charCount < 150 ? feedback.push({
-    text: `Description is ${charCount} chars \u2014 below recommended 150.`,
+  if (charCount < 120 ? feedback.push({
+    text: `Description is ${charCount} chars \u2014 below recommended 120.`,
     color: "orange"
   }) : charCount > 160 ? feedback.push({
     text: `Description is ${charCount} chars \u2014 exceeds recommended 160.`,
@@ -2807,30 +2851,60 @@ function types(config = {}) {
     robots
   ];
 }
-const seofields = definePlugin((config = {}) => {
-  const { healthDashboard = !0 } = config, dashboardEnabled = healthDashboard !== !1, dashboardToolTitle = typeof healthDashboard == "object" ? healthDashboard.tool?.title ?? "SEO Health" : "SEO Health", dashboardName = typeof healthDashboard == "object" ? healthDashboard.tool?.name ?? "seo-health-dashboard" : "seo-health-dashboard", dashboardPageIcon = typeof healthDashboard == "object" ? healthDashboard.content?.icon ?? void 0 : void 0, dashboardPageTitle = typeof healthDashboard == "object" ? healthDashboard.content?.title ?? void 0 : void 0, dashboardDescription = typeof healthDashboard == "object" ? healthDashboard.content?.description ?? void 0 : void 0, dashboardShowTypeColumn = typeof healthDashboard == "object" ? healthDashboard.display?.typeColumn ?? void 0 : void 0, dashboardShowDocumentId = typeof healthDashboard == "object" ? healthDashboard.display?.documentId ?? void 0 : void 0, dashboardQueryTypes = typeof healthDashboard == "object" ? healthDashboard.query?.types ?? void 0 : void 0, dashboardQueryRequireSeo = typeof healthDashboard == "object" ? healthDashboard.query?.requireSeo ?? void 0 : void 0, dashboardQueryGroq = typeof healthDashboard == "object" ? healthDashboard.query?.groq ?? void 0 : void 0, dashboardApiVersion = typeof healthDashboard == "object" ? healthDashboard.apiVersion ?? void 0 : void 0, dashboardLicenseKey = typeof healthDashboard == "object" ? healthDashboard.licenseKey ?? void 0 : void 0, BoundSeoHealthTool = () => o.createElement(SeoHealthTool, {
-    icon: dashboardPageIcon,
-    title: dashboardPageTitle,
-    description: dashboardDescription,
-    showTypeColumn: dashboardShowTypeColumn,
-    showDocumentId: dashboardShowDocumentId,
-    queryTypes: dashboardQueryTypes,
-    queryRequireSeo: dashboardQueryRequireSeo,
-    customQuery: dashboardQueryGroq,
-    apiVersion: dashboardApiVersion,
-    licenseKey: dashboardLicenseKey
+const resolveDashboardConfig = (healthDashboard) => {
+  const cfg = typeof healthDashboard == "object" ? healthDashboard : void 0;
+  return {
+    enabled: healthDashboard !== !1,
+    toolTitle: cfg?.tool?.title ?? "SEO Health",
+    toolName: cfg?.tool?.name ?? "seo-health-dashboard",
+    icon: cfg?.content?.icon,
+    title: cfg?.content?.title,
+    description: cfg?.content?.description,
+    showTypeColumn: cfg?.display?.typeColumn,
+    showDocumentId: cfg?.display?.documentId,
+    queryTypes: cfg?.query?.types,
+    queryRequireSeo: cfg?.query?.requireSeo,
+    queryGroq: cfg?.query?.groq,
+    apiVersion: cfg?.apiVersion,
+    licenseKey: cfg?.licenseKey,
+    typeLabels: cfg?.typeLabels,
+    typeColumnMode: cfg?.typeColumnMode,
+    titleField: cfg?.titleField,
+    docBadge: cfg?.docBadge,
+    loadingLicense: cfg?.content?.loadingLicense,
+    loadingDocuments: cfg?.content?.loadingDocuments,
+    noDocuments: cfg?.content?.noDocuments
+  };
+}, seofields = definePlugin((config = {}) => {
+  const { healthDashboard = !0 } = config, dash = resolveDashboardConfig(healthDashboard), BoundSeoHealthTool = () => o.createElement(SeoHealthTool, {
+    icon: dash.icon,
+    title: dash.title,
+    description: dash.description,
+    showTypeColumn: dash.showTypeColumn,
+    showDocumentId: dash.showDocumentId,
+    queryTypes: dash.queryTypes,
+    queryRequireSeo: dash.queryRequireSeo,
+    customQuery: dash.queryGroq,
+    apiVersion: dash.apiVersion,
+    licenseKey: dash.licenseKey,
+    typeLabels: dash.typeLabels,
+    typeColumnMode: dash.typeColumnMode,
+    titleField: dash.titleField,
+    docBadge: dash.docBadge,
+    loadingLicense: dash.loadingLicense,
+    loadingDocuments: dash.loadingDocuments,
+    noDocuments: dash.noDocuments
   });
   return {
     name: "sanity-plugin-seofields",
     schema: {
       types: types(config)
-      // pass config down to schemas
     },
-    ...dashboardEnabled && {
+    ...dash.enabled && {
       tools: [
         {
-          name: dashboardName,
-          title: dashboardToolTitle,
+          name: dash.toolName,
+          title: dash.toolTitle,
           component: BoundSeoHealthTool,
           icon: () => "\u{1F4CA}"
         }