sanity-plugin-seofields 1.2.4 → 1.2.6

package/src/components/SeoHealthPane.tsx

@@ -1,81 +0,0 @@
-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/components/SeoHealthTool.tsx

@@ -1,11 +0,0 @@
-import SeoHealthDashboard, {SeoHealthDashboardProps} from './SeoHealthDashboard'
-
-/**
- * Sanity Tool component for the SEO Health Dashboard
- * This component wraps the SeoHealthDashboard for use as a custom tool in Sanity Studio
- */
-const SeoHealthTool = (props: SeoHealthDashboardProps) => {
-  return <SeoHealthDashboard {...props} />
-}
-
-export default SeoHealthTool

package/src/components/SeoPreview.tsx

@@ -1,178 +0,0 @@
-import {Box, Stack, Text} from '@sanity/ui'
-import React from 'react'
-import {StringInputProps, useFormValue} from 'sanity'
-import styled from 'styled-components'
-
-import {truncate} from '../utils/seoUtils'
-
-const PreviewContainer = styled.div`
-  max-width: 600px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #ffffff;
-  border: 1px solid #dadce0;
-  border-radius: 8px;
-  overflow: hidden;
-`
-
-const PreviewHeader = styled.div`
-  background: #f8f9fa;
-  padding: 12px 16px;
-  border-bottom: 1px solid #dadce0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-`
-
-const PreviewBody = styled.div`
-  padding: 16px;
-`
-
-const SerpUrl = styled.p`
-  margin: 0 0 4px;
-  color: #006621;
-  font-size: 13px;
-  line-height: 1.4;
-  word-break: break-word;
-`
-
-const SerpTitle = styled.h3`
-  margin: 0 0 8px;
-  color: #1a0dab;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 1.4;
-  word-break: break-word;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`
-
-const SerpDescription = styled.p`
-  margin: 0;
-  color: #545454;
-  font-size: 14px;
-  line-height: 1.6;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`
-
-const LiveIndicator = styled.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #4f46e5;
-  background: #f0f4ff;
-  padding: 4px 8px;
-  border-radius: 4px;
-`
-
-const SeoPreview = (props: StringInputProps): React.ReactElement => {
-  const {path, schemaType} = props
-  const {options} = schemaType as {
-    options?: {
-      baseUrl?: string
-      prefix?: ((doc: {_type?: string} & Record<string, unknown>) => string) | string
-    }
-  }
-  const baseUrl = options?.baseUrl || 'https://www.example.com'
-  const prefixFunction = options?.prefix as
-    | ((doc: {_type?: string} & Record<string, unknown>) => string)
-    | undefined
-  const parent = useFormValue([path[0]]) || {
-    title: '',
-    description: '',
-    canonicalUrl: '',
-  }
-  const rootDoc: {
-    slug?: {current: string}
-  } = useFormValue([]) || {
-    slug: {current: ''},
-  }
-  const slug: string = rootDoc?.slug?.current || ''
-
-  const {
-    title,
-    description,
-    canonicalUrl: url,
-  } = parent as {
-    title?: string
-    description?: string
-    canonicalUrl?: string
-  }
-
-  // Build full URL
-  const base = (url || baseUrl)?.replace(/\/+$/, '')
-  const slugStr = String(slug || '').replace(/^\/+/, '')
-  const pref = String(
-    prefixFunction ? prefixFunction(rootDoc as {slug?: {current: string}}) : '',
-  ).replace(/^\/+|\/+$/g, '')
-  const urlPath = [pref, slugStr].filter(Boolean).join('/')
-  const finalUrl = urlPath ? `${base}/${urlPath}` : base
-
-  // Extract domain for display
-  const domain = (() => {
-    try {
-      const u = new URL(finalUrl || base)
-      return u.hostname
-    } catch {
-      return 'example.com'
-    }
-  })()
-
-  // Format URL display with › separator
-  const urlDisplay = `${domain}${urlPath ? ` › ${urlPath.split('/').slice(-1)[0]}` : ''}`
-
-  return (
-    <Box padding={3}>
-      <PreviewContainer>
-        <PreviewHeader>
-          <span
-            style={{
-              fontSize: '11px',
-              color: '#5f6368',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-            }}
-          >
-            Search Preview
-          </span>
-          <LiveIndicator>
-            <span
-              style={{
-                width: '4px',
-                height: '4px',
-                borderRadius: '50%',
-                backgroundColor: '#4f46e5',
-                display: 'inline-block',
-              }}
-            />
-            Live
-          </LiveIndicator>
-        </PreviewHeader>
-
-        <PreviewBody>
-          <SerpUrl>{finalUrl ? urlDisplay : 'example.com › page-url'}</SerpUrl>
-          <SerpTitle>
-            {title && title.length > 0 ? truncate(title, 60) : 'Your SEO Title will appear here'}
-          </SerpTitle>
-          <SerpDescription>
-            {description && description.length > 0
-              ? truncate(description, 160)
-              : 'Your meta description will show up here. Make it compelling!'}
-          </SerpDescription>
-        </PreviewBody>
-      </PreviewContainer>
-    </Box>
-  )
-}
-
-export default SeoPreview

package/src/components/meta/MetaDescription.tsx

@@ -1,39 +0,0 @@
-import {Stack, Text} from '@sanity/ui'
-import React, {useMemo} from 'react'
-import {StringInputProps, useFormValue} from 'sanity'
-
-import {FeedbackType} from '../../types'
-import {getMetaDescriptionValidationMessages} from '../../utils/seoUtils'
-
-const MetaDescription = (props: StringInputProps): React.ReactElement => {
-  const {value, renderDefault, path} = props
-
-  const parent = useFormValue([path[0]]) as {keywords?: string[]; _type?: string}
-  const isParentseoField = parent && parent?._type === 'seoFields'
-  const keywords = useMemo(() => parent?.keywords || [], [parent?.keywords])
-
-  const feedbackItems = useMemo(
-    () => getMetaDescriptionValidationMessages(value || '', keywords, isParentseoField),
-    [value, keywords, isParentseoField],
-  )
-
-  return (
-    <Stack space={3}>
-      {renderDefault(props)}
-      <Stack space={2}>
-        {feedbackItems.map((item: FeedbackType) => (
-          <div key={item.text} style={{display: 'flex', alignItems: 'center', gap: 7}}>
-            <div
-              style={{width: 10, height: 10, borderRadius: '50%', backgroundColor: item.color}}
-            />
-            <Text weight="bold" muted size={14}>
-              {item.text}
-            </Text>
-          </div>
-        ))}
-      </Stack>
-    </Stack>
-  )
-}
-
-export default MetaDescription

package/src/components/meta/MetaTitle.tsx

@@ -1,44 +0,0 @@
-import {Stack, Text} from '@sanity/ui'
-import React, {useMemo} from 'react'
-import {StringInputProps, useFormValue} from 'sanity'
-
-import {FeedbackType} from '../../types'
-import {getMetaTitleValidationMessages} from '../../utils/seoUtils'
-
-const MetaTitle = (props: StringInputProps): React.ReactElement => {
-  const {value, renderDefault, path} = props
-
-  const parent = useFormValue([path[0]]) as {keywords?: string[]; _type?: string}
-  const isParentseoField = parent && parent?._type === 'seoFields'
-  const keywords = useMemo(() => parent?.keywords || [], [parent?.keywords])
-
-  const feedbackItems = useMemo(
-    () => getMetaTitleValidationMessages(value || '', keywords, isParentseoField),
-    [value, keywords, isParentseoField],
-  )
-
-  return (
-    <Stack space={3}>
-      {renderDefault(props)}
-      <Stack space={2}>
-        {feedbackItems.map((item: FeedbackType) => (
-          <div key={item.text} style={{display: 'flex', alignItems: 'center', gap: 7}}>
-            <div
-              style={{
-                minWidth: 10,
-                height: 10,
-                borderRadius: '50%',
-                backgroundColor: item.color,
-              }}
-            />
-            <Text weight="bold" muted size={14}>
-              {item.text}
-            </Text>
-          </div>
-        ))}
-      </Stack>
-    </Stack>
-  )
-}
-
-export default MetaTitle

package/src/components/openGraph/OgDescription.tsx

@@ -1,46 +0,0 @@
-import {Stack, Text} from '@sanity/ui'
-import React, {useMemo} from 'react'
-import {StringInputProps, useFormValue} from 'sanity'
-
-import {FeedbackType} from '../../types'
-import {getOgDescriptionValidation} from '../../utils/seoUtils'
-
-const OgDescription = (props: StringInputProps): React.ReactElement => {
-  const {value, renderDefault, path} = props
-
-  // Access parent object to get keywords
-  const parent = useFormValue([path[0]]) as {keywords?: string[]; _type?: string}
-  const isParentseoField = parent && parent?._type === 'seoFields'
-  const keywords = useMemo(() => parent?.keywords || [], [parent?.keywords])
-
-  const feedbackItems = useMemo(
-    () => getOgDescriptionValidation(value || '', keywords, isParentseoField),
-    [value, keywords, isParentseoField],
-  )
-
-  return (
-    <Stack space={3}>
-      {renderDefault(props)}
-      {/* Validation */}
-      <Stack space={2}>
-        {feedbackItems.map((item: FeedbackType) => (
-          <div key={item.text} style={{display: 'flex', alignItems: 'center', gap: 7}}>
-            <div
-              style={{
-                minWidth: 10,
-                height: 10,
-                borderRadius: '50%',
-                backgroundColor: item.color,
-              }}
-            />
-            <Text weight="bold" muted size={14}>
-              {item.text}
-            </Text>
-          </div>
-        ))}
-      </Stack>
-    </Stack>
-  )
-}
-
-export default OgDescription

package/src/components/openGraph/OgTitle.tsx

@@ -1,45 +0,0 @@
-import {Stack, Text} from '@sanity/ui'
-import React, {useMemo} from 'react'
-import {StringInputProps, useFormValue} from 'sanity'
-
-import {FeedbackType} from '../../types'
-import {getOgTitleValidation} from '../../utils/seoUtils'
-
-const OgTitle: React.FC<StringInputProps> = (props) => {
-  const {value, renderDefault, path} = props
-
-  // Access parent object to get keywords
-  const parent = useFormValue([path[0]]) as {keywords?: string[]; _type?: string}
-  const isParentseoField = parent && parent?._type === 'seoFields'
-  const keywords = useMemo(() => parent?.keywords || [], [parent?.keywords])
-
-  const feedbackItems = useMemo(
-    () => getOgTitleValidation(value || '', keywords, isParentseoField),
-    [value, keywords, isParentseoField],
-  )
-
-  return (
-    <Stack space={3}>
-      {renderDefault(props)}
-      <Stack space={2}>
-        {feedbackItems.map((item: FeedbackType) => (
-          <div key={item.text} style={{display: 'flex', alignItems: 'center', gap: 7}}>
-            <div
-              style={{
-                minWidth: 10,
-                height: 10,
-                borderRadius: '50%',
-                backgroundColor: item.color,
-              }}
-            />
-            <Text weight="bold" muted size={14}>
-              {item.text}
-            </Text>
-          </div>
-        ))}
-      </Stack>
-    </Stack>
-  )
-}
-
-export default OgTitle

package/src/components/twitter/twitterDescription.tsx

@@ -1,45 +0,0 @@
-import {Stack, Text} from '@sanity/ui'
-import React, {useMemo} from 'react'
-import {StringInputProps, useFormValue} from 'sanity'
-
-import {FeedbackType} from '../../types'
-import {getTwitterDescriptionValidation} from '../../utils/seoUtils'
-
-const TwitterDescription = (props: StringInputProps): React.ReactElement => {
-  const {value, renderDefault, path} = props
-
-  // Access parent object to get keywords
-  const parent = useFormValue([path[0]]) as {keywords?: string[]; _type?: string}
-  const isParentseoField = parent && parent?._type === 'seoFields'
-  const keywords = useMemo(() => parent?.keywords || [], [parent?.keywords])
-
-  const feedbackItems = useMemo(
-    () => getTwitterDescriptionValidation(value || '', keywords, isParentseoField),
-    [value, keywords, isParentseoField],
-  )
-
-  return (
-    <Stack space={3}>
-      {renderDefault(props)}
-      <Stack space={2}>
-        {feedbackItems.map((item: FeedbackType) => (
-          <div key={item.text} style={{display: 'flex', alignItems: 'center', gap: 7}}>
-            <div
-              style={{
-                minWidth: 10,
-                height: 10,
-                borderRadius: '50%',
-                backgroundColor: item.color,
-              }}
-            />
-            <Text weight="bold" muted size={14}>
-              {item.text}
-            </Text>
-          </div>
-        ))}
-      </Stack>
-    </Stack>
-  )
-}
-
-export default TwitterDescription

package/src/components/twitter/twitterTitle.tsx

@@ -1,45 +0,0 @@
-import {Stack, Text} from '@sanity/ui'
-import React, {useMemo} from 'react'
-import {StringInputProps, useFormValue} from 'sanity'
-
-import {FeedbackType} from '../../types'
-import {getTwitterTitleValidation} from '../../utils/seoUtils'
-
-const TwitterTitle = (props: StringInputProps): React.ReactElement => {
-  const {value, renderDefault, path} = props
-
-  // Access parent object to get keywords
-  const parent = useFormValue([path[0]]) as {keywords?: string[]; _type?: string}
-  const isParentseoField = parent && parent?._type === 'seoFields'
-  const keywords = useMemo(() => parent?.keywords || [], [parent?.keywords])
-
-  const feedbackItems = useMemo(
-    () => getTwitterTitleValidation(value || '', keywords, isParentseoField),
-    [value, keywords, isParentseoField],
-  )
-
-  return (
-    <Stack space={3}>
-      {renderDefault(props)}
-      <Stack space={2}>
-        {feedbackItems.map((item: FeedbackType) => (
-          <div key={item.text} style={{display: 'flex', alignItems: 'center', gap: 7}}>
-            <div
-              style={{
-                minWidth: 10,
-                height: 10,
-                borderRadius: '50%',
-                backgroundColor: item.color,
-              }}
-            />
-            <Text weight="bold" muted size={14}>
-              {item.text}
-            </Text>
-          </div>
-        ))}
-      </Stack>
-    </Stack>
-  )
-}
-
-export default TwitterTitle

package/src/helpers/SeoMetaTags.tsx

@@ -1,154 +0,0 @@
-/**
- * <SeoMetaTags> — Framework-agnostic React SEO meta tag renderer.
- *
- * Renders all SEO meta tags as plain React elements.
- * Place it inside your framework's <Head> component:
- *
- * @example Next.js Pages Router
- * ```tsx
- * import Head from 'next/head'
- * import { SeoMetaTags } from 'sanity-plugin-seofields'
- *
- * export default function Page({ seo }) {
- *   return (
- *     <>
- *       <Head>
- *         <SeoMetaTags
- *           data={seo}
- *           baseUrl="https://example.com"
- *           path="/about"
- *           defaults={{ title: 'My Site', siteName: 'My Site' }}
- *           imageUrlResolver={(img) => urlFor(img).width(1200).url()}
- *         />
- *       </Head>
- *       <main>...</main>
- *     </>
- *   )
- * }
- * ```
- *
- * @example Nuxt 3 / generic SSR (inside <Head> slot)
- * ```tsx
- * <Head>
- *   <SeoMetaTags data={seo} baseUrl="https://example.com" path="/" />
- * </Head>
- * ```
- */
-import React from 'react'
-
-import type {SanityImage, SanityImageWithAlt, SeoFields} from '../types'
-import {buildSeoMeta, type BuildSeoMetaOptions} from './seoMeta'
-
-// ─── Props ────────────────────────────────────────────────────────────────────
-
-export interface SeoMetaTagsProps {
-  /**
-   * The raw SEO object from Sanity.
-   * Pass `null` / `undefined` to render only the defaults.
-   */
-  data?: Partial<SeoFields> | null
-
-  /**
-   * Base URL of your site, e.g. "https://example.com".
-   * Used for canonical link, og:url fallback.
-   */
-  baseUrl?: string
-
-  /**
-   * Current page path, e.g. "/about".
-   * Defaults to "".
-   */
-  path?: string
-
-  /**
-   * Default values used when SEO fields are missing.
-   */
-  defaults?: BuildSeoMetaOptions['defaults']
-
-  /**
-   * Resolve a Sanity image asset reference to a full URL string.
-   *
-   * @example
-   * imageUrlResolver={(img) => urlFor(img).width(1200).url()}
-   */
-  imageUrlResolver?: (image: SanityImage | SanityImageWithAlt) => string | null | undefined
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-/**
- * Renders all SEO meta tags for a page as plain React elements.
- * Intended to be placed inside your framework's <Head> / <head> component.
- *
- * Renders:
- * - `<title>`
- * - `<meta name="description">`
- * - `<meta name="keywords">`
- * - `<meta name="robots">`
- * - OpenGraph meta tags (`og:*`)
- * - Twitter Card meta tags (`twitter:*`)
- * - Any custom `seo.metaAttributes` as `<meta name="..." content="...">`
- */
-export function SeoMetaTags({data, baseUrl, path, defaults, imageUrlResolver}: SeoMetaTagsProps) {
-  const meta = buildSeoMeta({seo: data, baseUrl, path, defaults, imageUrlResolver})
-
-  const robotsContent = [
-    meta.robots?.index === false ? 'noindex' : 'index',
-    meta.robots?.follow === false ? 'nofollow' : 'follow',
-  ].join(', ')
-
-  return (
-    <>
-      {/* ── Title ── */}
-      {meta.title && <title>{meta.title}</title>}
-
-      {/* ── Basic meta ── */}
-      {meta.description && <meta name="description" content={meta.description} />}
-      {meta.keywords?.length ? <meta name="keywords" content={meta.keywords.join(', ')} /> : null}
-      <meta name="robots" content={robotsContent} />
-      <meta name="googlebot" content={robotsContent} />
-
-      {/* ── Open Graph ── */}
-      {meta.openGraph?.type && <meta property="og:type" content={meta.openGraph.type} />}
-      {meta.openGraph?.url && <meta property="og:url" content={meta.openGraph.url} />}
-      {meta.openGraph?.title && <meta property="og:title" content={meta.openGraph.title} />}
-      {meta.openGraph?.description && (
-        <meta property="og:description" content={meta.openGraph.description} />
-      )}
-      {meta.openGraph?.siteName && (
-        <meta property="og:site_name" content={meta.openGraph.siteName} />
-      )}
-      {meta.openGraph?.images?.map((img, i) => (
-        <React.Fragment key={`og-img-${i}`}>
-          <meta property="og:image" content={img.url} />
-          {img.width && <meta property="og:image:width" content={String(img.width)} />}
-          {img.height && <meta property="og:image:height" content={String(img.height)} />}
-          {img.alt && <meta property="og:image:alt" content={img.alt} />}
-        </React.Fragment>
-      ))}
-
-      {/* ── Twitter Card ── */}
-      {meta.twitter?.card && <meta name="twitter:card" content={meta.twitter.card} />}
-      {meta.twitter?.site && <meta name="twitter:site" content={meta.twitter.site} />}
-      {meta.twitter?.creator && <meta name="twitter:creator" content={meta.twitter.creator} />}
-      {meta.twitter?.title && <meta name="twitter:title" content={meta.twitter.title} />}
-      {meta.twitter?.description && (
-        <meta name="twitter:description" content={meta.twitter.description} />
-      )}
-      {meta.twitter?.images?.map((url, i) => (
-        <meta key={`tw-img-${i}`} name="twitter:image" content={url} />
-      ))}
-
-      {/* ── Custom meta attributes ── */}
-      {meta.other &&
-        Object.entries(meta.other).map(([name, content]) => (
-          <meta key={`custom-${name}`} name={name} content={content} />
-        ))}
-
-      {/* ── Canonical URL ── */}
-      {meta.alternates?.canonical && <link rel="canonical" href={meta.alternates.canonical} />}
-    </>
-  )
-}
-
-export default SeoMetaTags