sanity-plugin-seofields 1.0.8 → 1.0.10

package/src/components/twitter/twitterDescription.tsx

@@ -1,26 +1,28 @@
+import {Stack, Text} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import {StringInputProps, useFormValue} from 'sanity'
-import {Stack, Text} from '@sanity/ui'
+
+import {FeedbackType} from '../../types'
 import {getTwitterDescriptionValidation} from '../../utils/seoUtils'
 
-const TwitterDescription = (props: StringInputProps) => {
+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 = parent?.keywords || []
+  const isParentseoField = parent && parent?._type === 'seoFields'
+  const keywords = useMemo(() => parent?.keywords || [], [parent?.keywords])
 
   const feedbackItems = useMemo(
-    () => getTwitterDescriptionValidation(value || '', keywords,isParentseoField),
-    [value, keywords],
+    () => getTwitterDescriptionValidation(value || '', keywords, isParentseoField),
+    [value, keywords, isParentseoField],
   )
 
   return (
     <Stack space={3}>
       {renderDefault(props)}
       <Stack space={2}>
-        {feedbackItems.map((item: any) => (
+        {feedbackItems.map((item: FeedbackType) => (
           <div key={item.text} style={{display: 'flex', alignItems: 'center', gap: 7}}>
             <div
               style={{

package/src/components/twitter/twitterTitle.tsx

@@ -1,26 +1,28 @@
+import {Stack, Text} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import {StringInputProps, useFormValue} from 'sanity'
-import {Stack, Text} from '@sanity/ui'
+
+import {FeedbackType} from '../../types'
 import {getTwitterTitleValidation} from '../../utils/seoUtils'
 
-const TwitterTitle = (props: StringInputProps) => {
+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 = parent?.keywords || []
+  const keywords = useMemo(() => parent?.keywords || [], [parent?.keywords])
 
   const feedbackItems = useMemo(
     () => getTwitterTitleValidation(value || '', keywords, isParentseoField),
-    [value, keywords],
+    [value, keywords, isParentseoField],
   )
 
   return (
     <Stack space={3}>
       {renderDefault(props)}
       <Stack space={2}>
-        {feedbackItems.map((item: any) => (
+        {feedbackItems.map((item: FeedbackType) => (
           <div key={item.text} style={{display: 'flex', alignItems: 'center', gap: 7}}>
             <div
               style={{

package/src/index.ts

@@ -7,14 +7,11 @@ export default seofields
 // Re-export everything from plugin.ts
 export * from './plugin'
 
-// Export all TypeScript types
-export * from './types'
-
 // Export schema types for external use
 export {default as seoFieldsSchema} from './schemas'
-export {default as openGraphSchema} from './schemas/types/openGraph'
-export {default as twitterSchema} from './schemas/types/twitter'
+export {default as allSchemas} from './schemas/types'
 export {default as metaAttributeSchema} from './schemas/types/metaAttribute'
 export {default as metaTagSchema} from './schemas/types/metaTag'
-export {default as allSchemas} from './schemas/types'
+export {default as openGraphSchema} from './schemas/types/openGraph'
 export {default as robotsSchema} from './schemas/types/robots'
+export {default as twitterSchema} from './schemas/types/twitter'

package/src/plugin.ts

@@ -1,5 +1,6 @@
 // plugin.ts
 import {definePlugin} from 'sanity'
+
 import types from './schemas/types'
 
 export interface SeoFieldConfig {
@@ -38,9 +39,13 @@ export type twitterFieldKeys =
 
 export type AllFieldKeys = SeoFieldKeys | openGraphFieldKeys | twitterFieldKeys
 
+export type ValidHiddenFieldKeys = Exclude<
+  AllFieldKeys,
+  'openGraphImageUrl' | 'twitterImageUrl' | 'openGraphImageType' | 'twitterImageType'
+>
+
 export interface FieldVisibilityConfig {
-  hiddenFields?: AllFieldKeys[]
-  postType?: string
+  hiddenFields?: ValidHiddenFieldKeys[]
 }
 
 export interface SeoFieldsPluginConfig {
@@ -67,22 +72,18 @@ export interface SeoFieldsPluginConfig {
    * This allows customization of field titles and descriptions.
    * For example, to change the title of the 'title' field:
    */
-  fieldOverrides?: {
-    [key in AllFieldKeys]?: SeoFieldConfig
-  }
+  fieldOverrides?: Partial<Record<AllFieldKeys, SeoFieldConfig>>
   /**
    * A mapping of document types to field visibility configurations.
    * This allows you to specify which fields should be hidden for specific document types.
    */
-  fieldVisibility?: {
-    [postType: string]: FieldVisibilityConfig
-  }
+  fieldVisibility?: Record<string, FieldVisibilityConfig>
 
   /**
    * A list of fields that should be hidden by default in all document types.
    * This can be overridden by specific document type settings in `fieldVisibility`.
    */
-  defaultHiddenFields?: AllFieldKeys[]
+  defaultHiddenFields?: ValidHiddenFieldKeys[]
   /**
    * The base URL of your website, used for generating full URLs in the SEO preview.
    * Defaults to 'https://www.example.com' if not provided.

package/src/schemas/index.ts

@@ -1,12 +1,15 @@
-import {defineField, defineType} from 'sanity'
-import MetaTitle from '../components/meta/MetaTitle'
+import {defineField, defineType, SchemaTypeDefinition} from 'sanity'
+
 import MetaDescription from '../components/meta/MetaDescription'
+import MetaTitle from '../components/meta/MetaTitle'
 import SeoPreview from '../components/SeoPreview'
 import {SeoFieldsPluginConfig} from '../plugin'
-import {getFieldInfo, getFieldHiddenFunction} from '../utils/fieldsUtils'
+import {getFieldHiddenFunction, getFieldInfo} from '../utils/fieldsUtils'
 import {isEmpty} from '../utils/utils'
+import openGraph from './types/openGraph'
+import twitter from './types/twitter'
 
-export default function seoFieldsSchema(config: SeoFieldsPluginConfig = {}) {
+export default function seoFieldsSchema(config: SeoFieldsPluginConfig = {}): SchemaTypeDefinition {
   return defineType({
     name: 'seoFields',
     title: 'SEO Fields',
@@ -34,7 +37,7 @@ export default function seoFieldsSchema(config: SeoFieldsPluginConfig = {}) {
                 config.seoPreview.prefix
                   ? {prefix: config.seoPreview.prefix}
                   : {}),
-              } as any,
+              } as Record<string, unknown>,
               // Use a readOnly field to prevent editing
               // This field is just for preview purposes
               initialValue: '' as string, // Set an initial value
@@ -111,16 +114,8 @@ export default function seoFieldsSchema(config: SeoFieldsPluginConfig = {}) {
           'Specify the canonical URL for this page. This helps prevent duplicate content issues by indicating the preferred version of a page.',
         hidden: getFieldHiddenFunction('canonicalUrl', config),
       }),
-      defineField({
-        name: 'openGraph',
-        title: 'Open Graph Settings',
-        type: 'openGraph',
-      }),
-      defineField({
-        name: 'twitter',
-        title: 'X (Formerly Twitter) Card Settings',
-        type: 'twitter',
-      }),
+      openGraph(config) as any,
+      twitter(config) as any,
     ],
   })
 }

package/src/schemas/types/index.ts

@@ -1,17 +1,19 @@
+import {SchemaTypeDefinition} from 'sanity'
+
+import {SeoFieldsPluginConfig} from '../../plugin'
 import seoFields from '..'
 import metaAttribute from './metaAttribute'
+import metaTag from './metaTag'
 import openGraph from './openGraph'
-import twitter from './twitter'
 import robots from './robots'
-import metaTag from './metaTag'
-import {SeoFieldsPluginConfig} from '../../plugin'
+import twitter from './twitter'
 
-export default function types(config: SeoFieldsPluginConfig = {}) {
+export default function types(config: SeoFieldsPluginConfig = {}): SchemaTypeDefinition[] {
   return [
     seoFields(config), // pass config here
     openGraph(config), // pass config here
     twitter(config), // pass config here
-    metaAttribute,
+    metaAttribute as SchemaTypeDefinition,
     metaTag,
     robots,
   ]

package/src/schemas/types/metaAttribute/index.ts

@@ -41,22 +41,18 @@ export default defineType({
       attributeValueString: 'value',
       attributeValueImage: 'image',
     },
-    prepare({
-      attributeName,
-      attributeValueString,
-      attributeValueImage,
-    }: {
-      attributeName: string
-      attributeValueString: string
-      attributeValueImage: any
-    }) {
+    prepare({attributeName, attributeValueString, attributeValueImage}) {
+      let subtitle = ''
+      if (attributeValueString) {
+        subtitle = `Value: ${attributeValueString}`
+      } else if (attributeValueImage) {
+        subtitle = 'Value: [Image]'
+      } else {
+        subtitle = 'No Attribute Value'
+      }
       return {
         title: attributeName || 'No Attribute Name',
-        subtitle: attributeValueString
-          ? `Value: ${attributeValueString}`
-          : attributeValueImage
-            ? 'Value: [Image]'
-            : 'No Attribute Value',
+        subtitle: subtitle,
         media: attributeValueImage,
       }
     },

package/src/schemas/types/metaTag/index.ts

@@ -1,16 +1,17 @@
-import { defineType } from "sanity";
+import {defineType} from 'sanity'
 
 export default defineType({
-    name: "metaTag",
-    title: "Meta Tag",
-    type: "object",
-    fields: [
-        {
-            name: "metaAttributes",
-            title: "Meta Attributes",
-            type: "array",
-            of: [{ type: "metaAttribute" }],
-            description: "Add custom meta attributes to the head of the document for additional SEO and social media integration.",
-        },
-    ],
-})
+  name: 'metaTag',
+  title: 'Meta Tag',
+  type: 'object',
+  fields: [
+    {
+      name: 'metaAttributes',
+      title: 'Meta Attributes',
+      type: 'array',
+      of: [{type: 'metaAttribute'}],
+      description:
+        'Add custom meta attributes to the head of the document for additional SEO and social media integration.',
+    },
+  ],
+})

package/src/schemas/types/openGraph/index.ts

@@ -1,10 +1,11 @@
-import {defineField, defineType} from 'sanity'
-import OgTitle from '../../../components/openGraph/OgTitle'
+import {defineField, defineType, SchemaTypeDefinition} from 'sanity'
+
 import OgDescription from '../../../components/openGraph/OgDescription'
+import OgTitle from '../../../components/openGraph/OgTitle'
 import {SeoFieldsPluginConfig} from '../../../plugin'
 import {getFieldHiddenFunction, getFieldInfo} from '../../../utils/fieldsUtils'
 
-export default function openGraph(config: SeoFieldsPluginConfig = {}) {
+export default function openGraph(config: SeoFieldsPluginConfig = {}): SchemaTypeDefinition {
   return defineType({
     name: 'openGraph',
     title: 'Open Graph Settings',
@@ -90,13 +91,23 @@ export default function openGraph(config: SeoFieldsPluginConfig = {}) {
             description: 'A description of the image for accessibility purposes.',
           }),
         ],
-        hidden: ({parent}) => parent?.imageType !== 'upload',
+        hidden: (context) => {
+          const {parent} = context
+          if (parent?.imageType !== 'upload') return true
+          const hiddenFn = getFieldHiddenFunction('openGraphImage', config)
+          return typeof hiddenFn === 'function' ? hiddenFn(context) : hiddenFn
+        },
       }),
       defineField({
         name: 'imageUrl',
         ...getFieldInfo('openGraphImageUrl', config.fieldOverrides),
         type: 'url',
-        hidden: ({parent}) => parent?.imageType !== 'url',
+        hidden: (context) => {
+          const {parent} = context
+          if (parent?.imageType !== 'url') return true
+          const hiddenFn = getFieldHiddenFunction('openGraphImage', config)
+          return typeof hiddenFn === 'function' ? hiddenFn(context) : hiddenFn
+        },
       }),
     ],
   })

package/src/schemas/types/twitter/index.ts

@@ -1,10 +1,11 @@
-import {defineField, defineType} from 'sanity'
-import TwitterTitle from '../../../components/twitter/twitterTitle'
+import {defineField, defineType, SchemaTypeDefinition} from 'sanity'
+
 import TwitterDescription from '../../../components/twitter/twitterDescription'
+import TwitterTitle from '../../../components/twitter/twitterTitle'
 import {SeoFieldsPluginConfig} from '../../../plugin'
 import {getFieldHiddenFunction, getFieldInfo} from '../../../utils/fieldsUtils'
 
-export default function twitter(config: SeoFieldsPluginConfig = {}) {
+export default function twitter(config: SeoFieldsPluginConfig = {}): SchemaTypeDefinition {
   return defineType({
     name: 'twitter',
     title: 'X (Formerly Twitter)',
@@ -84,12 +85,23 @@ export default function twitter(config: SeoFieldsPluginConfig = {}) {
             description: 'A description of the image for accessibility purposes.',
           }),
         ],
+        hidden: (context) => {
+          const {parent} = context
+          if (parent?.imageType !== 'upload') return true
+          const hiddenFn = getFieldHiddenFunction('twitterImage', config)
+          return typeof hiddenFn === 'function' ? hiddenFn(context) : hiddenFn
+        },
       }),
       defineField({
         name: 'imageUrl',
         ...getFieldInfo('twitterImageUrl', config.fieldOverrides),
         type: 'url',
-        hidden: ({parent}) => parent?.imageType !== 'url',
+        hidden: (context) => {
+          const {parent} = context
+          if (parent?.imageType !== 'url') return true
+          const hiddenFn = getFieldHiddenFunction('twitterImage', config)
+          return typeof hiddenFn === 'function' ? hiddenFn(context) : hiddenFn
+        },
       }),
     ],
   })

package/src/types.ts

@@ -78,69 +78,8 @@ export interface SeoFields {
   openGraph?: OpenGraphSettings
   twitter?: TwitterCardSettings
 }
-
-// Type guards
-export const isSeoFields = (obj: any): obj is SeoFields => {
-  return obj && obj._type === 'seoFields'
-}
-
-export const isOpenGraphSettings = (obj: any): obj is OpenGraphSettings => {
-  return obj && obj._type === 'openGraph'
-}
-
-export const isTwitterCardSettings = (obj: any): obj is TwitterCardSettings => {
-  return obj && obj._type === 'twitter'
-}
-
-export const isMetaAttribute = (obj: any): obj is MetaAttribute => {
-  return obj && obj._type === 'metaAttribute'
-}
-
-// Utility types for form validation
-export interface SeoValidationRules {
-  title: {
-    maxLength: number
-    warningLength: number
-  }
-  description: {
-    maxLength: number
-    warningLength: number
-  }
-  openGraphTitle: {
-    maxLength: number
-  }
-  openGraphDescription: {
-    maxLength: number
-  }
-  twitterTitle: {
-    maxLength: number
-  }
-  twitterDescription: {
-    maxLength: number
-  }
-}
-
-export const defaultSeoValidationRules: SeoValidationRules = {
-  title: {
-    maxLength: 70,
-    warningLength: 60,
-  },
-  description: {
-    maxLength: 160,
-    warningLength: 150,
-  },
-  openGraphTitle: {
-    maxLength: 95,
-  },
-  openGraphDescription: {
-    maxLength: 200,
-  },
-  twitterTitle: {
-    maxLength: 70,
-  },
-  twitterDescription: {
-    maxLength: 200,
-  },
+export type FeedbackTypeColors = 'green' | 'orange' | 'red'
+export type FeedbackType = {
+  text: string
+  color: FeedbackTypeColors
 }
-
-// All types are already exported above with individual export statements

package/src/utils/fieldsUtils.ts

@@ -1,94 +1,6 @@
-// import {defineField, defineType} from 'sanity'
-// import OgTitle from '../../../components/openGraph/OgTitle'
-// import OgDescription from '../../../components/openGraph/OgDescription'
+import {AllFieldKeys, SeoFieldsPluginConfig, ValidHiddenFieldKeys} from '../plugin'
 
-import {SeoFieldsPluginConfig, AllFieldKeys} from '../plugin'
-import twitter from '../schemas/types/twitter'
-
-// export default defineType({
-//   name: 'openGraph',
-//   title: 'Open Graph Settings',
-//   type: 'object',
-//   fields: [
-//     defineField({
-//       name: 'title',
-//       title: 'Open Graph Title',
-//       type: 'string',
-//       components: {
-//         input: OgTitle, // Can also wrap with a string input + preview
-//       },
-//     }),
-//     defineField({
-//       name: 'description',
-//       title: 'Open Graph Description',
-//       type: 'text',
-//       rows: 3,
-//       components: {
-//         input: OgDescription, // Can also wrap with a text area + preview
-//       },
-//     }),
-//     defineField({
-//       name: 'siteName',
-//       title: 'Open Graph Site Name',
-//       type: 'string',
-//       description: 'The name of your website. This is often the site title.',
-//     }),
-//     defineField({
-//       name: 'type',
-//       title: 'Open Graph Type',
-//       type: 'string',
-//       options: {
-//         list: [
-//           {title: 'Website', value: 'website'},
-//           {title: 'Article', value: 'article'},
-//           {title: 'Profile', value: 'profile'},
-//           {title: 'Book', value: 'book'},
-//           {title: 'Music', value: 'music'},
-//           {title: 'Video', value: 'video'},
-//           {title: 'Product', value: 'product'},
-//         ],
-//         // layout: 'radio', // Display as radio buttons
-//       },
-//       initialValue: 'website',
-//       description: 'Select the type of content for Open Graph.',
-//     }),
-
-//     // upload image or ask for url
-//     defineField({
-//       name: 'imageType',
-//       title: 'Image Type',
-//       type: 'string',
-//       options: {
-//         list: [
-//           {title: 'Upload Image', value: 'upload'},
-//           {title: 'Image URL', value: 'url'},
-//         ],
-//       },
-//       initialValue: 'upload',
-//     }),
-//     defineField({
-//       name: 'image',
-//       title: 'Open Graph Image',
-//       type: 'image',
-//       options: {
-//         hotspot: true,
-//       },
-//       hidden: ({parent}) => parent?.imageType !== 'upload',
-//       description:
-//         'Recommended size: 1200x630px (minimum 600x315px). Max file size: 5MB. Aspect ratio 1.91:1.',
-//     }),
-//     defineField({
-//       name: 'imageUrl',
-//       title: 'Open Graph Image URL',
-//       type: 'url',
-//       hidden: ({parent}) => parent?.imageType !== 'url',
-//       description:
-//         'Enter the full URL of the image. Ensure the image is accessible and meets the recommended size of 1200x630px (minimum 600x315px).',
-//     }),
-//   ],
-// })
-
-const DEFAULT_FIELD_INFO = {
+const DEFAULT_FIELD_INFO: Record<AllFieldKeys, {title: string; description: string}> = {
   title: {
     title: 'Meta Title',
     description:
@@ -159,7 +71,7 @@ const DEFAULT_FIELD_INFO = {
       'Enter the full URL of the image. Ensure the image is accessible and meets the recommended size of 1200x630px (minimum 600x315px).',
   },
   twitterCard: {
-    title: 'Card Type',
+    title: 'X Card Type',
     description: '',
   },
   twitterSite: {
@@ -198,12 +110,12 @@ const DEFAULT_FIELD_INFO = {
 export const getFieldInfo = (
   fieldName: string,
   fieldOverrides: SeoFieldsPluginConfig['fieldOverrides'],
-) => {
+): {title: string; description: string} => {
   const fieldInfo =
     (fieldOverrides && fieldOverrides[fieldName as keyof typeof fieldOverrides]) ||
     DEFAULT_FIELD_INFO[fieldName as keyof typeof DEFAULT_FIELD_INFO]
   return fieldInfo
-    ? {title: fieldInfo.title, description: fieldInfo.description}
+    ? {title: fieldInfo.title || '', description: fieldInfo.description || ''}
     : {title: '', description: ''}
 }
 
@@ -211,7 +123,7 @@ export const getFieldInfo = (
  * Check if a field should be hidden based on the current document type
  */
 export const isFieldHidden = (
-  fieldName: AllFieldKeys,
+  fieldName: ValidHiddenFieldKeys,
   config: SeoFieldsPluginConfig,
   documentType?: string,
 ): boolean => {
@@ -231,8 +143,17 @@ export const isFieldHidden = (
 /**
  * Get the hidden function for any field
  */
-export const getFieldHiddenFunction = (fieldName: AllFieldKeys, config: SeoFieldsPluginConfig) => {
-  return ({document}: {document?: any}) => {
+export const getFieldHiddenFunction = (
+  fieldName: ValidHiddenFieldKeys,
+  config: SeoFieldsPluginConfig,
+) => {
+  return ({
+    document,
+  }: {
+    document?: {
+      _type?: string
+    }
+  }): boolean => {
     const documentType = document?._type
     return isFieldHidden(fieldName, config, documentType)
   }

package/src/utils/seoUtils.ts

@@ -1,4 +1,4 @@
-import {PathSegment, useFormValue} from 'sanity'
+import {FeedbackType} from '../types'
 
 export const stopWords = ['the', 'a', 'an', 'and', 'or', 'but']
 
@@ -33,8 +33,8 @@ export const primaryKeywordAtStart = (title: string, keywords: string[]): boolea
   return title.toLowerCase().startsWith(keywords[0].toLowerCase())
 }
 
-export const truncate = (text: string, maxLength: number) =>
-  text.length > maxLength ? text.slice(0, maxLength) + '…' : text
+export const truncate = (text: string, maxLength: number): string =>
+  text.length > maxLength ? `${text.slice(0, maxLength)}…` : text
 
 export const hasExcessivePunctuation = (title: string): boolean => /[!@#$%^&*]{2,}/.test(title)
 
@@ -42,8 +42,8 @@ export const getMetaTitleValidationMessages = (
   title: string,
   keywords: string[],
   isParentseoField: boolean,
-) => {
-  const feedback: {text: string; color: 'green' | 'orange' | 'red'}[] = []
+): FeedbackType[] => {
+  const feedback: FeedbackType[] = []
 
   const minChar = 50
   const maxChar = 60
@@ -108,8 +108,8 @@ export const getMetaDescriptionValidationMessages = (
   description: string,
   keywords: string[],
   isParentseoField: boolean,
-) => {
-  const feedback: {text: string; color: 'green' | 'orange' | 'red'}[] = []
+): FeedbackType[] => {
+  const feedback: FeedbackType[] = []
 
   const minChar = 150
   const maxChar = 160
@@ -180,8 +180,8 @@ export const getOgTitleValidation = (
   title: string,
   keywords: string[] = [],
   isParentseoField: boolean,
-) => {
-  const feedback: {text: string; color: 'green' | 'orange' | 'red'}[] = []
+): FeedbackType[] => {
+  const feedback: FeedbackType[] = []
   const min = 40
   const max = 60
   const count = title?.length || 0
@@ -244,8 +244,8 @@ export const getOgDescriptionValidation = (
   desc: string,
   keywords: string[] = [],
   isParentseoField: boolean,
-) => {
-  const feedback: {text: string; color: 'green' | 'orange' | 'red'}[] = []
+): FeedbackType[] => {
+  const feedback: FeedbackType[] = []
   const min = 90
   const max = 120
   const count = desc?.length || 0
@@ -317,8 +317,8 @@ export const getTwitterTitleValidation = (
   title: string,
   keywords: string[] = [],
   isParentseoField: boolean,
-) => {
-  const feedback: {text: string; color: 'green' | 'orange' | 'red'}[] = []
+): FeedbackType[] => {
+  const feedback: FeedbackType[] = []
   const min = 30
   const max = 70
   const count = title?.length || 0
@@ -370,8 +370,8 @@ export const getTwitterDescriptionValidation = (
   desc: string,
   keywords: string[] = [],
   isParentseoField: boolean,
-) => {
-  const feedback: {text: string; color: 'green' | 'orange' | 'red'}[] = []
+): FeedbackType[] => {
+  const feedback: FeedbackType[] = []
   const min = 50
   const max = 200
   const count = desc?.length || 0