sanity-plugin-seofields 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-seofields",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "A Sanity Studio plugin to manage SEO fields like meta titles, descriptions, and Open Graph tags for structured, search-optimized content.",
   "keywords": [
     "sanity",

package/src/components/SeoHealthDashboard.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import {useClient} from 'sanity'
+import {useClient, useWorkspace} from 'sanity'
 import {useIntentLink} from 'sanity/router'
+import {usePaneRouter} from 'sanity/structure'
 import styled, {keyframes} from 'styled-components'
 
 import {DocumentWithSeoHealth, SeoHealthMetrics} from '../types'
@@ -50,16 +51,9 @@ const PageSubtitle = styled.p`
 
 const StatsGrid = styled.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);
-  }
 `
 
 const StatCard = styled.div<{$accent?: string}>`
@@ -218,6 +212,14 @@ const TitleWrapper = styled.div`
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
+  min-width: 0;
+`
+
+/* Constrains the title + doc-id block so text-overflow works inside flex */
+const TitleCell = styled.div`
+  min-width: 0;
+  overflow: hidden;
+  flex: 1;
 `
 
 const ColType = styled.div`
@@ -468,16 +470,66 @@ const ReloadButton = styled.button`
 `
 
 // Sub-component so useIntentLink can be called at the top level of a component (not inside .map)
-const DocTitleAnchor: React.FC<{id: string; type: string; children: React.ReactNode}> = ({
+const DocTitleAnchor: React.FC<{
+  id: string
+  type: string
+  structureTool?: string
+  children: React.ReactNode
+}> = ({id, type, structureTool, children}) => {
+  const {basePath} = useWorkspace()
+  const {onClick: intentOnClick, href: intentHref} = useIntentLink({intent: 'edit', params: {id, type}})
+  // When a specific structure tool name is provided, build a tool-scoped intent URL so that
+  // Sanity routes directly to that tool instead of letting the router pick the first match.
+  const href = structureTool
+    ? `${basePath}/${structureTool}/intent/edit/id=${id};type=${type}/`
+    : intentHref
+  const onClick = structureTool ? undefined : intentOnClick
+  return (
+    <DocTitleLink href={href} onClick={onClick} title="Open document">
+      {children}
+    </DocTitleLink>
+  )
+}
+
+// Wrapper that applies DocTitleLink styles to the ChildLink <a> rendered by Sanity's pane router
+const PaneLinkWrapper = styled.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;
+    }
+  }
+`
+
+// Sub-component for desk-structure split-pane navigation.
+// Uses ChildLink from usePaneRouter to open the document editor to the right
+// while keeping the SEO Health pane visible on the left.
+const DocTitleAnchorPane: React.FC<{id: string; type: string; children: React.ReactNode}> = ({
   id,
   type,
   children,
 }) => {
-  const {onClick, href} = useIntentLink({intent: 'edit', params: {id, type}})
+  const {ChildLink} = usePaneRouter()
   return (
-    <DocTitleLink href={href} onClick={onClick} title="Open document">
-      {children}
-    </DocTitleLink>
+    <PaneLinkWrapper>
+      <ChildLink childId={id} childParameters={{type}}>
+        {children}
+      </ChildLink>
+    </PaneLinkWrapper>
   )
 }
 
@@ -824,6 +876,31 @@ export interface SeoHealthDashboardProps {
    * Defaults to `false`.
    */
   previewMode?: boolean
+  /**
+   * When `true`, clicking a document title opens the document editor as a split
+   * pane to the right, keeping the SEO Health pane visible on the left.
+   * This uses Sanity's pane router and requires the component to be rendered
+   * inside a desk-structure pane context (i.e. via `createSeoHealthPane`).
+   *
+   * When `false` (default), clicking navigates to the document via the standard
+   * intent-link system (full navigation).
+   *
+   * This is set to `true` automatically by `createSeoHealthPane`.
+   */
+  openInPane?: boolean
+  /**
+   * The `name` of the Sanity structure tool that contains the monitored documents.
+   * When provided, clicking a document title navigates directly to that tool's
+   * intent URL (`/{basePath}/{structureTool}/intent/edit/id=…;type=…/`) instead of
+   * using the generic intent resolver, which always picks the first registered tool.
+   *
+   * Required when you have multiple structure tools and the documents live in a
+   * non-default one (e.g. `name: 'common'`).
+   *
+   * @example
+   * structureTool: 'common'
+   */
+  structureTool?: string
 }
 
 /**
@@ -987,6 +1064,8 @@ const SeoHealthDashboard: React.FC<SeoHealthDashboardProps> = ({
   loadingDocuments,
   noDocuments,
   previewMode = false,
+  openInPane = false,
+  structureTool,
 }) => {
   const client = useClient({apiVersion})
   const [licenseStatus, setLicenseStatus] = useState<'loading' | 'valid' | 'invalid'>('loading')
@@ -1402,12 +1481,18 @@ export default defineConfig({
                       <TableRow key={doc._id}>
                         <ColTitle>
                           <TitleWrapper>
-                            <div>
-                              <DocTitleAnchor id={doc._id} type={doc._type}>
-                                {doc.title || 'Untitled'}
-                              </DocTitleAnchor>
+                            <TitleCell>
+                              {openInPane ? (
+                                <DocTitleAnchorPane id={doc._id} type={doc._type}>
+                                  {doc.title || 'Untitled'}
+                                </DocTitleAnchorPane>
+                              ) : (
+                                <DocTitleAnchor id={doc._id} type={doc._type} structureTool={structureTool}>
+                                  {doc.title || 'Untitled'}
+                                </DocTitleAnchor>
+                              )}
                               {showDocumentId && <DocId>{doc._id}</DocId>}
-                            </div>
+                            </TitleCell>
                             {docBadge && (
                               <DocBadgeRenderer
                                 doc={doc as DocumentWithSeoHealth & Record<string, unknown>}

package/src/components/SeoHealthPane.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import type {ComponentBuilder, StructureBuilder} from 'sanity/structure'
+
+import SeoHealthDashboard, {SeoHealthDashboardProps} from './SeoHealthDashboard'
+
+/**
+ * Options accepted by `createSeoHealthPane`.
+ * All props from `SeoHealthDashboardProps` are supported.
+ *
+ * `licenseKey` is **required** — the dashboard will not render without it.
+ */
+export interface SeoHealthPaneOptions extends Omit<SeoHealthDashboardProps, 'customQuery'> {
+  /** Required license key (format: `SEOF-XXXX-XXXX-XXXX`). */
+  licenseKey: string
+  /**
+   * A fully custom GROQ query used to fetch documents for the dashboard.
+   * The query must return documents with at least: `_id`, `_type`, `title`, `seo`, `_updatedAt`.
+   *
+   * Takes precedence over `queryTypes` when both are provided.
+   *
+   * @example
+   * query: `*[_type in ["post","page"] && defined(seo)]{ _id, _type, title, slug, seo, _updatedAt }`
+   */
+  query?: string
+}
+
+// function isStructureBuilder(arg: unknown): arg is StructureBuilder {
+//   return (
+//     arg !== null &&
+//     typeof arg === 'object' &&
+//     typeof (arg as StructureBuilder).component === 'function' &&
+//     typeof (arg as StructureBuilder).document === 'function'
+//   )
+// }
+
+/**
+ * Creates a desk-structure pane for the SEO Health Dashboard.
+ *
+ * Returns a **`ComponentBuilder`** with a built-in `.child()` resolver so that
+ * clicking any document row opens the document editor as a split pane to the right.
+ *
+ * Use it **directly** as the `.child()` value — do **not** wrap it in `S.component()`.
+ *
+ * ```ts
+ * // sanity.config.ts
+ * structure: (S) =>
+ *   S.list().items([
+ *     S.listItem()
+ *       .title('SEO Health')
+ *       .child(
+ *         createSeoHealthPane(S, {
+ *           licenseKey: 'SEOF-XXXX-XXXX-XXXX',
+ *           query: `*[_type == "post" && defined(seo)]{ _id, _type, title, slug, seo, _updatedAt }`,
+ *         })
+ *       ),
+ *   ])
+ * ```
+ */
+export function createSeoHealthPane(
+  optionsOrS: StructureBuilder,
+  optionsWhenS: SeoHealthPaneOptions,
+): ComponentBuilder {
+  // ── Two-arg form: structure builder passed as first arg ──────────────────
+  const S = optionsOrS
+  const {query, openInPane = true, title: paneTitle, ...rest} = optionsWhenS ?? {}
+
+  const SeoHealthPane: React.FC = () => (
+    <SeoHealthDashboard customQuery={query} openInPane={openInPane} title={paneTitle} {...rest} />
+  )
+  SeoHealthPane.displayName = 'SeoHealthPane'
+
+  // Wire up the child resolver so ChildLink URLs resolve to the document editor
+  return (S.component(SeoHealthPane) as ComponentBuilder)
+    .title(paneTitle ?? 'SEO Health')
+    .child((docId: string, {params}: {params: Record<string, string | undefined>}) => {
+      const builder = S.document().documentId(docId)
+      return params?.type ? builder.schemaType(params.type) : builder
+    })
+}
+
+export default createSeoHealthPane

package/src/index.ts

@@ -19,6 +19,8 @@ export {default as twitterSchema} from './schemas/types/twitter'
 // Export dashboard components and types
 export {default as SeoHealthDashboard} from './components/SeoHealthDashboard'
 export {default as SeoHealthTool} from './components/SeoHealthTool'
+export {createSeoHealthPane} from './components/SeoHealthPane'
+export type {SeoHealthPaneOptions} from './components/SeoHealthPane'
 
 // Export types
 export type {DocumentWithSeoHealth, SeoHealthMetrics, SeoHealthStatus} from './types'

package/src/plugin.ts

@@ -214,6 +214,16 @@ export interface SeoFieldsPluginConfig {
         docBadge?: (
           doc: DocumentWithSeoHealth & Record<string, unknown>,
         ) => {label: string; bgColor?: string; textColor?: string; fontSize?: string} | undefined
+        /**
+         * The `name` of the Sanity structure tool that contains the monitored documents.
+         * Required when you have multiple structure tools and the documents live in a
+         * non-default one. Clicking a title will navigate to
+         * `/{basePath}/{structureTool}/intent/edit/…` directly.
+         *
+         * @example
+         * structureTool: 'common'
+         */
+        structureTool?: string
         /**
          * Enable preview/demo mode to show dummy data.
          * Useful for testing, documentation, or showcasing the dashboard.
@@ -253,6 +263,7 @@ interface ResolvedDashboardConfig {
   loadingDocuments: string | undefined
   noDocuments: string | undefined
   previewMode: boolean | undefined
+  structureTool: string | undefined
 }
 
 const resolveDashboardConfig = (
@@ -281,6 +292,7 @@ const resolveDashboardConfig = (
     loadingDocuments: cfg?.content?.loadingDocuments,
     noDocuments: cfg?.content?.noDocuments,
     previewMode: cfg?.previewMode,
+    structureTool: cfg?.structureTool,
   }
 }
 
@@ -308,6 +320,7 @@ const seofields = definePlugin<SeoFieldsPluginConfig | void>((config = {}) => {
       loadingDocuments: dash.loadingDocuments,
       noDocuments: dash.noDocuments,
       previewMode: dash.previewMode,
+      structureTool: dash.structureTool,
     })
 
   return {