Розробка кастомних плагінів Sanity Studio
Плагін Sanity Studio — npm-пакет, що додає в Studio нові інструменти, поля, компоненти, дії. Реєструється через масив plugins у sanity.config.ts. Офіційні плагіни (@sanity/vision, @sanity/media) побудовані за тією ж схемою.
definePlugin — основа
// src/index.ts
import { definePlugin } from 'sanity'
import { MyTool } from './components/MyTool'
export const myPlugin = definePlugin((config = {}) => {
return {
name: 'my-plugin',
tools: [
{
name: 'my-dashboard',
title: 'Dashboard',
icon: () => '📊',
component: MyTool,
},
],
}
})
Tool компонент
// src/components/MyTool.tsx
import { useState, useEffect } from 'react'
import { useClient } from 'sanity'
export function MyTool() {
const client = useClient({ apiVersion: '2024-01-01' })
const [stats, setStats] = useState<any>(null)
useEffect(() => {
async function fetchStats() {
const posts = await client.fetch(`count(*[_type == "post"])`)
setStats({ posts })
}
fetchStats()
}, [client])
return (
<div style={{ padding: 24 }}>
<h2>Content Dashboard</h2>
<div style={{ fontSize: 32, fontWeight: 700 }}>
{stats?.posts || 0}
</div>
<p>Опубліковані статті</p>
</div>
)
}
Document Badge
// src/badges/seoStatus.ts
import type { DocumentBadgeComponent } from 'sanity'
export const seoBadge: DocumentBadgeComponent = props => {
const { published } = props
if (!published) return null
const hasAllMeta = published.seoTitle && published.seoDescription
return hasAllMeta
? { label: 'SEO ✓', color: 'success' }
: { label: 'SEO missing', color: 'warning' }
}
Терміни
Розробка плагіна з дашбордом, кастомними actions та badges — 4–6 днів.