sanity-plugin-contextual-previews

Configure different contexts to preview your content in - while in the Studio.

There are two parts at play here

part:sanity-plugin-contextual-previews/contextual-previews-component

This returns a component which is made visible using the menu in the Studio. The component renders the various previews you've defined in...

part:sanity-plugin-contextual-previews/resolve-contextual-previews

This returns a function. The output of the function is an array of (context preview) objects, see example below.

Usage

sanity install contextual-previews

In your sanity.json file, add this to the parts array:

{
  "implements": "part:sanity-plugin-contextual-previews/resolve-contextual-previews",
  "path": "src/resolveContextualPreviews.js"
}

Create the file src/resolveContextualPreviews.js and add something like this:

import React from 'react'

const PREVIEW_TYPES = ['book', 'author']
const PREVIEWS = [
  {
    name: 'example-com',
    title: 'Example.com',
    url: 'https://example.com/posts'
  },
  {
    name: 'css-tricks',
    title: 'CSS Tricks',
    url: 'https://css-tricks.com/newsletters/'
  },
  {
    name: 'some-component',
    title: 'Some component preview',
    component: (
      <div>
        Some <strong>component</strong> preview
      </div>
    )
  }
]

export default function resolveContextualPreviews(document, rev) {
  if (!PREVIEW_TYPES.includes(document._type)) {
    return null
  }

  return PREVIEWS.map(item => {
    const url = `${item.url}/${document._id}`
    return {...item, url: rev ? `${url}?rev=${rev}` : url}
  })
}