sanity-plugin-seofields 1.0.1

package/src/schemas/index.ts

@@ -0,0 +1,93 @@
+import {defineField, defineType} from 'sanity'
+import MetaTitle from '../components/meta/MetaTitle'
+import MetaDescription from '../components/meta/MetaDescription'
+import SeoPreview from '../components/SeoPreview'
+
+export default defineType({
+  name: 'seoFields',
+  title: 'SEO Fields',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'robots',
+      title: 'Robots Settings',
+      type: 'robots', // Use the separate robots type here
+    }),
+    defineField({
+      name: 'preview',
+      title: 'SEO Preview',
+      type: 'string',
+      components: {
+        input: SeoPreview, // custom React component
+      },
+      // you can mark it read-only if you don't want editors to change it
+      readOnly: true,
+    }),
+    defineField({
+      name: 'title',
+      title: 'Meta Title',
+      type: 'string',
+      description:
+        'The meta title is displayed in search engine results as the clickable headline for a given result. It should be concise and accurately reflect the content of the page.',
+      components: {
+        input: MetaTitle,
+      },
+      // validation: (Rule) => Rule.max(60).warning('Meta title should be under 60 characters.'),
+    }),
+    defineField({
+      name: 'description',
+      title: 'Meta Description',
+      type: 'text',
+      rows: 3,
+      description:
+        'Provide a concise summary of the page content. This description may be used by search engines in search results.',
+      components: {
+        input: MetaDescription,
+      },
+      // validation: (Rule) => Rule.max(160).warning('Meta description should be under 160 characters.'),
+    }),
+    defineField({
+      name: 'metaImage',
+      title: 'Meta Image',
+      type: 'image',
+      options: {
+        hotspot: true,
+      },
+      description:
+        'Upload an image that represents the content of the page. This image may be used in social media previews and search engine results.',
+    }),
+    defineField({
+      name: 'metaAttributes',
+      title: 'Additional 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.',
+    }),
+    defineField({
+      name: 'keywords',
+      title: 'Keywords',
+      type: 'array',
+      of: [{type: 'string'}],
+      description:
+        'Add relevant keywords for this page. These keywords will be used for SEO purposes.',
+    }),
+    defineField({
+      name: 'canonicalUrl',
+      title: 'Canonical URL',
+      type: 'url',
+      description:
+        'Specify the canonical URL for this page. This helps prevent duplicate content issues by indicating the preferred version of a page.',
+    }),
+    defineField({
+      name: 'openGraph',
+      title: 'Open Graph Settings',
+      type: 'openGraph',
+    }),
+    defineField({
+      name: 'twitter',
+      title: 'Twitter Card Settings',
+      type: 'twitter',
+    }),
+  ],
+})

package/src/schemas/types/index.ts

@@ -0,0 +1,7 @@
+import seoFields from '..'
+import metaAttribute from './metaAttribute'
+import openGraph from './openGraph'
+import twitter from './twitter'
+import robots from './robots'
+import metaTag from './metaTag'
+export default [seoFields, openGraph, metaAttribute, twitter, robots, metaTag]

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

@@ -0,0 +1,64 @@
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'metaAttribute',
+  title: 'Meta Attribute',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'key',
+      title: 'Attribute Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'type',
+      title: 'Attribute Value Type',
+      type: 'string',
+      options: {
+        list: [
+          {title: 'String', value: 'string'},
+          {title: 'Image', value: 'image'},
+        ],
+      },
+      initialValue: 'string',
+    }),
+    defineField({
+      name: 'value',
+      title: 'Attribute Value',
+      type: 'string',
+      hidden: ({parent}) => parent?.type === 'image',
+    }),
+    defineField({
+      name: 'image',
+      title: 'Attribute Image Value',
+      type: 'image',
+      hidden: ({parent}) => parent?.type === 'string',
+    }),
+  ],
+  preview: {
+    select: {
+      attributeName: 'key',
+      attributeValueString: 'value',
+      attributeValueImage: 'image',
+    },
+    prepare({
+      attributeName,
+      attributeValueString,
+      attributeValueImage,
+    }: {
+      attributeName: string
+      attributeValueString: string
+      attributeValueImage: any
+    }) {
+      return {
+        title: attributeName || 'No Attribute Name',
+        subtitle: attributeValueString
+          ? `Value: ${attributeValueString}`
+          : attributeValueImage
+            ? 'Value: [Image]'
+            : 'No Attribute Value',
+        media: attributeValueImage,
+      }
+    },
+  },
+})

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

@@ -0,0 +1,16 @@
+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.",
+        },
+    ],
+})

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

@@ -0,0 +1,86 @@
+import {defineField, defineType} from 'sanity'
+import OgTitle from '../../../components/openGraph/OgTitle'
+import OgDescription from '../../../components/openGraph/OgDescription'
+
+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).',
+    }),
+  ],
+})

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

@@ -0,0 +1,26 @@
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'robots',
+  title: 'Robots Settings',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'noIndex',
+      title: 'No Index',
+      type: 'boolean',
+      initialValue: false,
+      description:
+        'Enable this to prevent search engines from indexing this page. The page will not appear in search results.',
+    }),
+    defineField({
+      name: 'noFollow',
+      title: 'No Follow',
+      type: 'boolean',
+      initialValue: false,
+      description:
+        'Enable this to prevent search engines from following links on this page. Links will not pass SEO value.',
+    }),
+  ],
+  description: 'Select how search engines should index and follow links on this page.',
+})

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

@@ -0,0 +1,68 @@
+import {defineField, defineType} from 'sanity'
+import TwitterTitle from '../../../components/twitter/twitterTitle'
+import TwitterDescription from '../../../components/twitter/twitterDescription'
+
+export default defineType({
+  name: 'twitter',
+  title: 'Twitter',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'card',
+      title: 'Card Type',
+      type: 'string',
+      options: {
+        list: [
+          {title: 'Summary', value: 'summary'},
+          {title: 'Summary with Large Image', value: 'summary_large_image'},
+          {title: 'App', value: 'app'},
+          {title: 'Player', value: 'player'},
+        ],
+      },
+      initialValue: 'summary_large_image', // good default
+    }),
+    defineField({
+      name: 'site',
+      title: 'Site Twitter Handle',
+      type: 'string',
+      description: 'The Twitter handle of the website (e.g., @example)',
+    }),
+    defineField({
+      name: 'title',
+      title: 'Twitter Title',
+      type: 'string',
+      description: 'The title of the content as it should appear on Twitter.',
+      components: {
+        input: TwitterTitle,
+      },
+    }),
+    defineField({
+      name: 'description',
+      title: 'Twitter Description',
+      type: 'text',
+      rows: 3,
+      description: 'A brief description of the content for Twitter.',
+      components: {
+        input: TwitterDescription,
+      },
+    }),
+    defineField({
+      name: 'image',
+      title: 'Twitter Image',
+      type: 'image',
+      description:
+        'An image URL which should be at least 120x120px for "summary" card and 280x150px for "summary_large_image" card.',
+      options: {
+        hotspot: true,
+      },
+      fields: [
+        defineField({
+          name: 'alt',
+          title: 'Image Alt Text',
+          type: 'string',
+          description: 'Short alt text describing the image',
+        }),
+      ],
+    }),
+  ],
+})

package/src/types/index.ts

@@ -0,0 +1,239 @@
+export type MetaAttribute = {
+  _type: 'metaAttribute'
+  key?: string
+  type?: 'string' | 'image'
+  value?: string
+  image?: {
+    asset?: {
+      _ref: string
+      _type: 'reference'
+      _weak?: boolean
+      [internalGroqTypeReferenceTo]?: 'sanity.imageAsset'
+    }
+    media?: unknown
+    hotspot?: SanityImageHotspot
+    crop?: SanityImageCrop
+    _type: 'image'
+  }
+}
+
+export type MetaTag = {
+  _type: 'metaTag'
+  metaAttributes?: Array<
+    {
+      _key: string
+    } & MetaAttribute
+  >
+}
+
+export type SeoFields = {
+  _type: 'seoFields'
+  robots?: Robots
+  preview?: string
+  title?: string
+  description?: string
+  metaImage?: {
+    asset?: {
+      _ref: string
+      _type: 'reference'
+      _weak?: boolean
+      [internalGroqTypeReferenceTo]?: 'sanity.imageAsset'
+    }
+    media?: unknown
+    hotspot?: SanityImageHotspot
+    crop?: SanityImageCrop
+    _type: 'image'
+  }
+  metaAttributes?: Array<MetaAttribute>
+  keywords?: Array<string>
+  canonicalUrl?: string
+  openGraph?: OpenGraph
+  twitter?: Twitter
+}
+
+export type Twitter = {
+  _type: 'twitter'
+  card?: 'summary' | 'summary_large_image' | 'app' | 'player'
+  site?: string
+  title?: string
+  description?: string
+  image?: {
+    asset?: {
+      _ref: string
+      _type: 'reference'
+      _weak?: boolean
+      [internalGroqTypeReferenceTo]?: 'sanity.imageAsset'
+    }
+    media?: unknown
+    hotspot?: SanityImageHotspot
+    crop?: SanityImageCrop
+    alt?: string
+    _type: 'image'
+  }
+}
+
+export type OpenGraph = {
+  _type: 'openGraph'
+  title?: string
+  description?: string
+  siteName?: string
+  type?: 'website' | 'article' | 'profile' | 'book' | 'music' | 'video' | 'product'
+  imageType?: 'upload' | 'url'
+  image?: {
+    asset?: {
+      _ref: string
+      _type: 'reference'
+      _weak?: boolean
+      [internalGroqTypeReferenceTo]?: 'sanity.imageAsset'
+    }
+    media?: unknown
+    hotspot?: SanityImageHotspot
+    crop?: SanityImageCrop
+    _type: 'image'
+  }
+  imageUrl?: string
+}
+
+export type Robots = {
+  _type: 'robots'
+  noIndex?: boolean
+  noFollow?: boolean
+}
+
+export type SanityImagePaletteSwatch = {
+  _type: 'sanity.imagePaletteSwatch'
+  background?: string
+  foreground?: string
+  population?: number
+  title?: string
+}
+
+export type SanityImagePalette = {
+  _type: 'sanity.imagePalette'
+  darkMuted?: SanityImagePaletteSwatch
+  lightVibrant?: SanityImagePaletteSwatch
+  darkVibrant?: SanityImagePaletteSwatch
+  vibrant?: SanityImagePaletteSwatch
+  dominant?: SanityImagePaletteSwatch
+  lightMuted?: SanityImagePaletteSwatch
+  muted?: SanityImagePaletteSwatch
+}
+
+export type SanityImageDimensions = {
+  _type: 'sanity.imageDimensions'
+  height: number
+  width: number
+  aspectRatio: number
+}
+
+export type SanityImageHotspot = {
+  _type: 'sanity.imageHotspot'
+  x: number
+  y: number
+  height: number
+  width: number
+}
+
+export type SanityImageCrop = {
+  _type: 'sanity.imageCrop'
+  top: number
+  bottom: number
+  left: number
+  right: number
+}
+
+export type SanityFileAsset = {
+  _id: string
+  _type: 'sanity.fileAsset'
+  _createdAt: string
+  _updatedAt: string
+  _rev: string
+  originalFilename?: string
+  label?: string
+  title?: string
+  description?: string
+  altText?: string
+  sha1hash?: string
+  extension?: string
+  mimeType?: string
+  size?: number
+  assetId?: string
+  uploadId?: string
+  path?: string
+  url?: string
+  source?: SanityAssetSourceData
+}
+
+export type SanityImageAsset = {
+  _id: string
+  _type: 'sanity.imageAsset'
+  _createdAt: string
+  _updatedAt: string
+  _rev: string
+  originalFilename?: string
+  label?: string
+  title?: string
+  description?: string
+  altText?: string
+  sha1hash?: string
+  extension?: string
+  mimeType?: string
+  size?: number
+  assetId?: string
+  uploadId?: string
+  path?: string
+  url?: string
+  metadata?: SanityImageMetadata
+  source?: SanityAssetSourceData
+}
+
+export type SanityImageMetadata = {
+  _type: 'sanity.imageMetadata'
+  location?: Geopoint
+  dimensions?: SanityImageDimensions
+  palette?: SanityImagePalette
+  lqip?: string
+  blurHash?: string
+  hasAlpha?: boolean
+  isOpaque?: boolean
+}
+
+export type Geopoint = {
+  _type: 'geopoint'
+  lat?: number
+  lng?: number
+  alt?: number
+}
+
+export type Slug = {
+  _type: 'slug'
+  current: string
+  source?: string
+}
+
+export type SanityAssetSourceData = {
+  _type: 'sanity.assetSourceData'
+  name?: string
+  id?: string
+  url?: string
+}
+
+export type AllSanitySchemaTypes =
+  | MetaAttribute
+  | MetaTag
+  | SeoFields
+  | Twitter
+  | OpenGraph
+  | Robots
+  | SanityImagePaletteSwatch
+  | SanityImagePalette
+  | SanityImageDimensions
+  | SanityImageHotspot
+  | SanityImageCrop
+  | SanityFileAsset
+  | SanityImageAsset
+  | SanityImageMetadata
+  | Geopoint
+  | Slug
+  | SanityAssetSourceData
+export declare const internalGroqTypeReferenceTo: unique symbol