feat: use sanity-plugin-iframe-pane

.github/renovate.json

@@ -2,7 +2,6 @@
   "description": "Check the readme: https://github.com/sanity-io/renovate-presets/blob/main/ecosystem/README.md",
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": [
-    "github>sanity-io/renovate-config",
-    "github>sanity-io/renovate-config:studio-v3"
+    "github>sanity-io/renovate-config:starter-template"
   ]
 }

README.md

@@ -46,13 +46,12 @@ You can use this starter to kick-start a clean slate site or learn these technol
 | `sanity.cli.ts`                         | Config file for Sanity CLI                                                            |
 | `/pages/index.tsx`                      | Landing page for `/`.                                                                 |
 | `/pages/studio/[[...index]].tsx`        | Where Sanity Studio is mounted                                                        |
-| `/pages/api/preview.ts`                 | Serverless route for triggering Preview mode                                          |
+| `/pages/api/draft.ts`                 | Serverless route for triggering Draft mode                                          |
 | `/sanity/schemas.ts`                    | Where Sanity Studio gets its content types from                                       |
 | `/sanity/env.ts`                        | Configuration for the Sanity project and dataset                                      |
 | `/sanity/schemas.ts`                    | Where Sanity Studio gets its content types from                                       |
 | `/sanity/lib/client.ts`                 | Sanity client configured based on `env.ts`                                            |
 | `/sanity/lib/image.ts`                  | Sanity image builder - unused in this template, but is needed to render Sanity images |
-| `/sanity/plugins/IFramePreviewView.tsx` | See [adding studio preview](docs/studio-preview.md)                                   |
 | `tailwind.config.js`                    | Tailwind config. Only applies to files listed under `content`                         |
 
 All pages are wrapped in `pages/_document.tsx` and `pages/_app.tsx`.

package.json

@@ -25,6 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanity": "3.15.1",
+    "sanity-plugin-iframe-pane": "^2.5.4",
     "styled-components": "5.3.11"
   },
   "devDependencies": {

sanity.config.ts

@@ -5,6 +5,12 @@
 import { visionTool } from '@sanity/vision'
 import { defineConfig } from 'sanity'
 import { deskTool } from 'sanity/desk'
+import {
+  defineUrlResolver,
+  Iframe,
+  IframeOptions,
+} from 'sanity-plugin-iframe-pane'
+import { previewUrl } from 'sanity-plugin-iframe-pane/preview-url'
 
 // see https://www.sanity.io/docs/api-versioning for how versioning works
 import {
@@ -14,7 +20,15 @@ import {
   projectId,
 } from '~/lib/sanity.api'
 import { schema } from '~/schemas'
-import { productionUrl } from '~/utils/productionUrl'
+
+const iframeOptions = {
+  url: defineUrlResolver({
+    base: '/api/draft',
+    requiresSlug:['post'],
+  }),
+  urlSecretId: previewSecretId,
+  reload: { button: true },
+} satisfies IframeOptions
 
 export default defineConfig({
   basePath: '/studio',
@@ -25,10 +39,30 @@ export default defineConfig({
   //edit schemas in './src/schemas'
   schema,
   plugins: [
-    deskTool(),
+    deskTool({
+      // `defaultDocumentNode` is responsible for adding a “Preview” tab to the document pane
+      // You can add any React component to `S.view.component` and it will be rendered in the pane
+      // and have access to content in the form in real-time.
+      // It's part of the Studio's “Structure Builder API” and is documented here:
+      // https://www.sanity.io/docs/structure-builder-reference
+      defaultDocumentNode: (S, { schemaType }) => {
+          return S.document().views([
+            // Default form view
+            S.view.form(),
+            // Preview
+            S.view.component(Iframe).options(iframeOptions).title('Preview'),
+          ])
+
+      },
+    }),
+    // Add the "Open preview" action
+    previewUrl({
+      base: '/api/draft',
+      requiresSlug: ['post'],
+      urlSecretId: previewSecretId,
+    }),
     // Vision lets you query your content with GROQ in the studio
     // https://www.sanity.io/docs/the-vision-plugin
     visionTool({ defaultApiVersion: apiVersion }),
-    productionUrl({ previewSecretId, types: ['post'], apiVersion }),
   ],
 })

src/pages/api/draft.ts

@@ -1,8 +1,8 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+import { isValidSecret } from 'sanity-plugin-iframe-pane/is-valid-secret'
 
 import { previewSecretId, readToken } from '~/lib/sanity.api'
 import { getClient } from '~/lib/sanity.client'
-import { getPreviewSecret } from '~/utils/previewSecret'
 
 export default async function preview(
   req: NextApiRequest,
@@ -29,23 +29,20 @@ export default async function preview(
     token: readToken,
   })
 
-  // The secret can't be stored in an env variable with a NEXT_PUBLIC_ prefix, as it would make you
-  // vulnerable to leaking the token to anyone. If you don't have an custom API with authentication
-  // that can handle checking secrets, you may use https://github.com/sanity-io/sanity-studio-secrets
-  // to store the secret in your dataset.
-  const storedSecret = await getPreviewSecret({
-    client: authClient,
-    id: previewSecretId,
-  })
-
+
   // This is the most common way to check for auth, but we encourage you to use your existing auth
   // infra to protect your token and securely transmit it to the client
-  if (secret !== storedSecret) {
+  const validSecret = await isValidSecret(
+    authClient,
+    previewSecretId,
+    secret
+  )
+  if (!validSecret) {
     return res.status(401).send('Invalid secret')
   }
 
   if (slug) {
-    res.setPreviewData({ token: readToken })
+    res.setDraftMode({ enable: true })
     res.writeHead(307, { Location: `/post/${slug}` })
     res.end()
     return