@gearbox-built/sanity-path-input

@gearbox-built/sanity-path-input

This is a Sanity Studio v3 plugin.

Installation

npm install @gearbox-built/sanity-path-input

or

yarn add @gearbox-built/sanity-path-input

Usage

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import PathInputPlugin from '@gearbox-built/sanity-path-input'
import generatePath from '@/utils/generatePath' // Custom async function you provide to fetch parent paths and custom routing need

export default defineConfig({
  //...
  plugins: [
    PathInputPlugin({
      generatePath, // defaults to `/${document.slug.current}`
    }),
  ],
})

Schema

import {defineField} from 'sanity'


defineField({
  type: 'path',
  name: 'path',
  title: 'Path',
}),

Schema With just the input

import {defineField} from 'sanity'
import {PathInput} from '@gearbox-built/sanity-path-input'


defineField({
  type: 'string',
  name: 'path',
  title: 'Path',
  components: {
    input: PathInput
  }
}),

generatePath

Provide your fetcher with logic to prepend the path. eg:

export const generatePath = async ({document: any, client: SanityClient}) => {
  switch (document._type) {
    case 'post':
      return `/blog/${document.slug.current}
    default:
      return `/${document.slug.current}
  }
}

This can hold more complex logic

export const generatePath = async ({document: any, client: SanityClient}) => {
  switch (document._type) {
    case 'post':
    case 'page':
      return getRecursiveFetchingOfParentPaths(document, client)
    default:
      return `/${document.slug.current}
  }
}

License

MIT © Gearbox Built

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.