Fixed preview support for sanity/next

app/(site)/[locale]/[...slug]/page.tsx

@@ -14,6 +14,8 @@ import { LiveQuery } from 'next-sanity/preview/live-query';
 import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
 
+export const runtime = 'edge';
+
 export async function generateMetadata({
   params
 }: {

components/ui/card/card.tsx

@@ -49,7 +49,7 @@ const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat
                   className={imageClasses}
                   image={image}
                   alt={image.alt || ''}
-                  size="(max-width: 1024px) 50vw, 90vw"
+                  size="(max-width: 1024px) 50vw, 20vw"
                 />
               </div>
             )}

lib/sanity/constants.ts

@@ -33,10 +33,4 @@ export const COMPONENT_REFERENCES = [
 
 // API version to use when using the Sanity client within the studio
 // https://www.sanity.io/help/studio-client-specify-api-version
-export const SANITY_API_VERSION = '2022-10-25'
+export const SANITY_API_VERSION = '2022-10-25'
-
-// Project preview URLs
-export const localStorefrontUrl = 'http://localhost:3000';
-export const localStorefrontPreviewUrl = 'http://localhost:3000/api/preview';
-export const publicStorefrontUrl = 'https://km-storefront.vercel.app';
-export const publicStorefrontPreviewUrl = 'https://km-storefront.vercel.app/api/preview';

lib/sanity/desk/category-structure.ts

@@ -1,9 +1,8 @@
-import {ListItemBuilder} from 'sanity/desk'
+import { iframeOptions } from '@/sanity.config'
-import defineStructure from '../utils/define-structure'
+import { EyeOpenIcon, MasterDetailIcon } from '@sanity/icons'
 import Iframe from 'sanity-plugin-iframe-pane'
-import {SanityDocument} from 'sanity'
+import { ListItemBuilder } from 'sanity/desk'
-import {EyeOpenIcon, MasterDetailIcon} from '@sanity/icons'
+import defineStructure from '../utils/define-structure'
-import getPreviewUrl from '../utils/get-preview-url'
 
 export default defineStructure<ListItemBuilder>((S) =>
   S.listItem()
@@ -16,16 +15,8 @@ export default defineStructure<ListItemBuilder>((S) =>
             .schemaType("category")
             .id(id)
             .views([
-              S.view
+              S.view.form().icon(MasterDetailIcon),
-                .form()
+              S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview')
-                  .icon(MasterDetailIcon),
-              S.view
-                .component(Iframe)
-                .icon(EyeOpenIcon) 
-                .options({
-                  url: (doc: SanityDocument) => getPreviewUrl(doc),
-                })
-                .title('Preview')
           ])
         )
       

lib/sanity/desk/home-structure.ts

@@ -1,9 +1,8 @@
+import { iframeOptions } from '@/sanity.config'
 import { EyeOpenIcon, MasterDetailIcon } from '@sanity/icons'
-import { SanityDocument } from 'sanity'
 import Iframe from 'sanity-plugin-iframe-pane'
 import { ListItemBuilder } from 'sanity/desk'
 import defineStructure from '../utils/define-structure'
-import getPreviewUrl from '../utils/get-preview-url'
 
 export default defineStructure<ListItemBuilder>((S) =>
   S.listItem()
@@ -18,16 +17,8 @@ export default defineStructure<ListItemBuilder>((S) =>
             .schemaType("home")
             .id(id)
             .views([
-              S.view
+              S.view.form().icon(MasterDetailIcon),
-                .form()
+              S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview')
-                  .icon(MasterDetailIcon),
-              S.view
-                .component(Iframe)
-                .icon(EyeOpenIcon) 
-                .options({
-                  url: (doc: SanityDocument) => getPreviewUrl(doc),
-                })
-                .title('Preview')
           ])
         )
     )  

lib/sanity/desk/page-structure.ts

@@ -1,9 +1,8 @@
+import { iframeOptions } from '@/sanity.config'
 import { DocumentsIcon, EyeOpenIcon, MasterDetailIcon } from '@sanity/icons'
-import { SanityDocument } from 'sanity'
 import Iframe from 'sanity-plugin-iframe-pane'
 import { ListItemBuilder } from 'sanity/desk'
 import defineStructure from '../utils/define-structure'
-import getPreviewUrl from '../utils/get-preview-url'
 
 export default defineStructure<ListItemBuilder>((S) =>
   S.listItem()
@@ -17,16 +16,8 @@ export default defineStructure<ListItemBuilder>((S) =>
             .schemaType("page")
             .id(id)
             .views([
-              S.view
+              S.view.form().icon(MasterDetailIcon),
-                .form()
+              S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview')
-                  .icon(MasterDetailIcon),
-              S.view
-                .component(Iframe)
-                .icon(EyeOpenIcon) 
-                .options({
-                  url: (doc: SanityDocument) => getPreviewUrl(doc),
-                })
-                .title('Preview')
           ])
         )
       

lib/sanity/desk/product-structure.ts

@@ -1,9 +1,8 @@
-import {ListItemBuilder} from 'sanity/desk'
+import { iframeOptions } from '@/sanity.config'
-import defineStructure from '../utils/define-structure'
+import { EyeOpenIcon, MasterDetailIcon } from '@sanity/icons'
 import Iframe from 'sanity-plugin-iframe-pane'
-import {SanityDocument} from 'sanity'
+import { ListItemBuilder } from 'sanity/desk'
-import {EyeOpenIcon, MasterDetailIcon} from '@sanity/icons'
+import defineStructure from '../utils/define-structure'
-import getPreviewUrl from '../utils/get-preview-url'
 
 export default defineStructure<ListItemBuilder>((S) =>
   S.listItem()
@@ -16,58 +15,10 @@ export default defineStructure<ListItemBuilder>((S) =>
             .schemaType("product")
             .id(id)
             .views([
-              S.view
+              S.view.form().icon(MasterDetailIcon),
-              .form()
+              S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview')
-                .icon(MasterDetailIcon),
-            S.view
-              .component(Iframe)
-              .icon(EyeOpenIcon) 
-                .options({
-                  url: (doc: SanityDocument) => getPreviewUrl(doc),
-                })
-                .title('Preview')
           ])
         )
       
     )
-)
+)
-
-// @TODO -  FIX THIS STRUCTURE.
-// export default defineStructure<ListItemBuilder>((S) =>
-//   S.listItem()
-//     .title('Products')
-//     .schemaType('product')
-//     .child(
-//       S.documentTypeList('product')
-//         // .defaultLayout('detail')
-//         .child(async (id) =>
-//           S.list()
-//             .title('Product')
-//             .items([
-//               // Details
-//               S.listItem()
-//                 .title('Details')
-//                 .icon(InfoOutlineIcon)
-//                 .child(S.document().schemaType('product').documentId(id)),
-//               // Product variants
-//               S.listItem()
-//                 .title('Variants')
-//                 .schemaType('productVariant')
-//                 .child(
-//                   S.documentList()
-//                     .title('Variants')
-//                     .schemaType('productVariant')
-//                     .filter(
-//                       `
-//                       _type == "productVariant"
-//                       && store.productId == $productId
-//                     `
-//                     )
-//                     .params({
-//                       productId: Number(id.replace('shopifyProduct-', '')),
-//                     })
-//                 ),
-//             ])
-//         )
-//     )
-// )

lib/sanity/desk/search-structure.ts

@@ -1,9 +1,8 @@
+import { iframeOptions } from '@/sanity.config'
 import { EyeOpenIcon, MasterDetailIcon } from '@sanity/icons'
-import { SanityDocument } from 'sanity'
 import Iframe from 'sanity-plugin-iframe-pane'
 import { ListItemBuilder } from 'sanity/desk'
 import defineStructure from '../utils/define-structure'
-import getPreviewUrl from '../utils/get-preview-url'
 
 export default defineStructure<ListItemBuilder>((S) =>
   S.listItem()
@@ -18,16 +17,8 @@ export default defineStructure<ListItemBuilder>((S) =>
             .schemaType("search")
             .id(id)
             .views([
-              S.view
+              S.view.form().icon(MasterDetailIcon),
-                .form()
+              S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview')
-                  .icon(MasterDetailIcon),
-              S.view
-                .component(Iframe)
-                .icon(EyeOpenIcon) 
-                .options({
-                  url: (doc: SanityDocument) => getPreviewUrl(doc),
-                })
-                .title('Preview')
           ])
         )
     )  

lib/sanity/utils/get-preview-url.ts

@@ -1,25 +0,0 @@
-// @ts-nocheck
-import { isDev, SanityDocument } from 'sanity'
-import { localStorefrontPreviewUrl, publicStorefrontPreviewUrl } from '../constants'
-
-const SANITY_STUDIO_API_READ_TOKEN = "preview.skYG2HXNga8uxSL7rFIreJEnP0SdVjCZ2nzB8rUHD4wRWxXPGceXTuR5vCVBP99mWZ9ULhghmpUyX7EtzDmJusSk6Gwvdr3nLAsdWI9ZktIWvSWUNpHbu0Xfrrt0UUaktrLglk7ToABvjXlaPHLpOIR3dnjl4MGByutPmyra0b5t20kgDrmF"
-
-// Customise this function to show the correct URL based on the current document
-export default async function getPreviewUrl(doc: SanityDocument) {
-
-  if (isDev) {
-    // Home page have no slugs.
-    if (!doc.slug) {
-      return `${localStorefrontPreviewUrl}?locale=${doc.language}&type=${doc._type}&secret=${SANITY_STUDIO_API_READ_TOKEN}`
-    }
-
-    return `${localStorefrontPreviewUrl}?slug=${doc.slug.current}&locale=${doc.language}&type=${doc._type}&secret=${SANITY_STUDIO_API_READ_TOKEN}`
-  } else {
-    // Home page have no slugs.
-    if (!doc.slug) {
-      return `${publicStorefrontPreviewUrl}?locale=${doc.language}&type=${doc._type}&secret=${SANITY_STUDIO_API_READ_TOKEN}`
-    }
-
-    return `${publicStorefrontPreviewUrl}?slug=${doc.slug.current}&locale=${doc.language}&type=${doc._type}&secret=${SANITY_STUDIO_API_READ_TOKEN}`
-  }
-}

plugins/settings.tsx

@@ -66,18 +66,18 @@ export const pageStructure = (typeDefArray: DocumentDefinition[]): StructureReso
     // Desktool can understand
     const singletonItems = typeDefArray.map((typeDef) => {
       return S.listItem()
-        .title(typeDef.title!)
+        .title(typeDef.title)
         .icon(typeDef.icon)
         .child(
           S.documentList()
-            .title(`${typeDef.name.charAt(0).toUpperCase() + typeDef.name.slice(1)} pages`)
+            .title(typeDef.name)
             .filter(`_type == "${typeDef.name}"`)
-            .child((id) =>
+            .child((id = typeDef.name) =>
               S.document()
                 .schemaType(typeDef.name)
                 .id(id)
                 .views([
-                  S.view.form().icon('f'),
+                  S.view.form(),
                   // Preview
                   ...(PREVIEWABLE_DOCUMENT_TYPES.includes(typeDef.name as any)
                     ? [S.view.component(Iframe).options(iframeOptions).title('Preview')]

sanity.config.ts

@@ -1,10 +1,10 @@
 import Kodamera from '@/lib/sanity/components/icons/kodamera'
+import { structure } from '@/lib/sanity/desk'
 import { schemaTypes } from '@/lib/sanity/schemas'
 import { documentInternationalization } from '@sanity/document-internationalization'
 import { visionTool } from '@sanity/vision'
 import { defineConfig } from 'sanity'
-import { Iframe, IframeOptions } from 'sanity-plugin-iframe-pane'
+import { IframeOptions } from 'sanity-plugin-iframe-pane'
-
 import { previewUrl } from 'sanity-plugin-iframe-pane/preview-url'
 import { media } from 'sanity-plugin-media'
 import { deskTool } from 'sanity/desk'
@@ -14,7 +14,6 @@ import page from './lib/sanity/schemas/documents/page'
 import product from './lib/sanity/schemas/documents/product'
 import home from './lib/sanity/schemas/singletons/home'
 import search from './lib/sanity/schemas/singletons/search'
-import { pageStructure, singletonPlugin } from './plugins/settings'
 
 const devOnlyPlugins = [visionTool({ defaultApiVersion: apiVersion})]
 
@@ -60,7 +59,7 @@ export const iframeOptions = {
 const singletonActions = new Set(["publish", "discardChanges", "restore"])
 
 // Define the singleton document types
-const singletonTypes = new Set(["settings", "home", "utilityMenu", "media.tag", ])
+const singletonTypes = new Set(["settings", "home", "search", "utilityMenu", "media.tag", ])
 
 // console.log(process.env.SANITY_API_READ_TOKEN)
 
@@ -73,27 +72,10 @@ export default defineConfig({
   plugins: [
     // deskTool({structure}),
     deskTool({
-      structure: pageStructure([home, search]),
+      structure: structure,
-      // `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 }) => {
-        if ((PREVIEWABLE_DOCUMENT_TYPES as string[]).includes(schemaType)) {
-          return S.document().views([
-            // Default form view
-            S.view.form(),
-            // Preview
-            S.view.component(Iframe).options(iframeOptions).title('Preview'),
-          ])
-        }
-
-        return null
-      },
     }),
     // Configures the global "new document" button, and document actions, to suit the Settings document singleton
-    singletonPlugin([home.name]),
+    // singletonPlugin([home.name, search.name]),
 
     // Add the "Open preview" action
     previewUrl({