From 0ad29cbffefc226004a624ee6d83dc62af41247f Mon Sep 17 00:00:00 2001 From: Henrik Larsson Date: Wed, 23 Aug 2023 23:20:53 +0200 Subject: [PATCH] Fixed preview support for sanity/next --- app/(site)/[locale]/[...slug]/page.tsx | 2 + components/ui/card/card.tsx | 2 +- lib/sanity/constants.ts | 8 +--- lib/sanity/desk/category-structure.ts | 21 +++------ lib/sanity/desk/home-structure.ts | 15 ++---- lib/sanity/desk/page-structure.ts | 15 ++---- lib/sanity/desk/product-structure.ts | 63 +++----------------------- lib/sanity/desk/search-structure.ts | 15 ++---- lib/sanity/utils/get-preview-url.ts | 25 ---------- plugins/settings.tsx | 8 ++-- sanity.config.ts | 28 ++---------- 11 files changed, 35 insertions(+), 167 deletions(-) delete mode 100644 lib/sanity/utils/get-preview-url.ts diff --git a/app/(site)/[locale]/[...slug]/page.tsx b/app/(site)/[locale]/[...slug]/page.tsx index c6e62f811..35dbe49be 100644 --- a/app/(site)/[locale]/[...slug]/page.tsx +++ b/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 }: { diff --git a/components/ui/card/card.tsx b/components/ui/card/card.tsx index 4d226079c..43e5962ee 100644 --- a/components/ui/card/card.tsx +++ b/components/ui/card/card.tsx @@ -49,7 +49,7 @@ const Card: FC = ({ 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" /> )} diff --git a/lib/sanity/constants.ts b/lib/sanity/constants.ts index 177231735..9e4c1c488 100644 --- a/lib/sanity/constants.ts +++ b/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' - -// 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'; \ No newline at end of file +export const SANITY_API_VERSION = '2022-10-25' \ No newline at end of file diff --git a/lib/sanity/desk/category-structure.ts b/lib/sanity/desk/category-structure.ts index 04f553503..8ff7da2b0 100644 --- a/lib/sanity/desk/category-structure.ts +++ b/lib/sanity/desk/category-structure.ts @@ -1,9 +1,8 @@ -import {ListItemBuilder} from 'sanity/desk' -import defineStructure from '../utils/define-structure' +import { iframeOptions } from '@/sanity.config' +import { EyeOpenIcon, MasterDetailIcon } from '@sanity/icons' import Iframe from 'sanity-plugin-iframe-pane' -import {SanityDocument} from 'sanity' -import {EyeOpenIcon, MasterDetailIcon} from '@sanity/icons' -import getPreviewUrl from '../utils/get-preview-url' +import { ListItemBuilder } from 'sanity/desk' +import defineStructure from '../utils/define-structure' export default defineStructure((S) => S.listItem() @@ -16,16 +15,8 @@ export default defineStructure((S) => .schemaType("category") .id(id) .views([ - S.view - .form() - .icon(MasterDetailIcon), - S.view - .component(Iframe) - .icon(EyeOpenIcon) - .options({ - url: (doc: SanityDocument) => getPreviewUrl(doc), - }) - .title('Preview') + S.view.form().icon(MasterDetailIcon), + S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview') ]) ) diff --git a/lib/sanity/desk/home-structure.ts b/lib/sanity/desk/home-structure.ts index 325e1eb58..d8f15dabf 100644 --- a/lib/sanity/desk/home-structure.ts +++ b/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((S) => S.listItem() @@ -18,16 +17,8 @@ export default defineStructure((S) => .schemaType("home") .id(id) .views([ - S.view - .form() - .icon(MasterDetailIcon), - S.view - .component(Iframe) - .icon(EyeOpenIcon) - .options({ - url: (doc: SanityDocument) => getPreviewUrl(doc), - }) - .title('Preview') + S.view.form().icon(MasterDetailIcon), + S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview') ]) ) ) diff --git a/lib/sanity/desk/page-structure.ts b/lib/sanity/desk/page-structure.ts index 69a888677..62fa03ea3 100644 --- a/lib/sanity/desk/page-structure.ts +++ b/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((S) => S.listItem() @@ -17,16 +16,8 @@ export default defineStructure((S) => .schemaType("page") .id(id) .views([ - S.view - .form() - .icon(MasterDetailIcon), - S.view - .component(Iframe) - .icon(EyeOpenIcon) - .options({ - url: (doc: SanityDocument) => getPreviewUrl(doc), - }) - .title('Preview') + S.view.form().icon(MasterDetailIcon), + S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview') ]) ) diff --git a/lib/sanity/desk/product-structure.ts b/lib/sanity/desk/product-structure.ts index 8e0202a19..c38357944 100644 --- a/lib/sanity/desk/product-structure.ts +++ b/lib/sanity/desk/product-structure.ts @@ -1,9 +1,8 @@ -import {ListItemBuilder} from 'sanity/desk' -import defineStructure from '../utils/define-structure' +import { iframeOptions } from '@/sanity.config' +import { EyeOpenIcon, MasterDetailIcon } from '@sanity/icons' import Iframe from 'sanity-plugin-iframe-pane' -import {SanityDocument} from 'sanity' -import {EyeOpenIcon, MasterDetailIcon} from '@sanity/icons' -import getPreviewUrl from '../utils/get-preview-url' +import { ListItemBuilder } from 'sanity/desk' +import defineStructure from '../utils/define-structure' export default defineStructure((S) => S.listItem() @@ -16,58 +15,10 @@ export default defineStructure((S) => .schemaType("product") .id(id) .views([ - S.view - .form() - .icon(MasterDetailIcon), - S.view - .component(Iframe) - .icon(EyeOpenIcon) - .options({ - url: (doc: SanityDocument) => getPreviewUrl(doc), - }) - .title('Preview') + S.view.form().icon(MasterDetailIcon), + S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview') ]) ) ) -) - -// @TODO - FIX THIS STRUCTURE. -// export default defineStructure((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-', '')), -// }) -// ), -// ]) -// ) -// ) -// ) +) \ No newline at end of file diff --git a/lib/sanity/desk/search-structure.ts b/lib/sanity/desk/search-structure.ts index 83c9c1415..7c79d3c83 100644 --- a/lib/sanity/desk/search-structure.ts +++ b/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((S) => S.listItem() @@ -18,16 +17,8 @@ export default defineStructure((S) => .schemaType("search") .id(id) .views([ - S.view - .form() - .icon(MasterDetailIcon), - S.view - .component(Iframe) - .icon(EyeOpenIcon) - .options({ - url: (doc: SanityDocument) => getPreviewUrl(doc), - }) - .title('Preview') + S.view.form().icon(MasterDetailIcon), + S.view.component(Iframe).icon(EyeOpenIcon).options(iframeOptions).title('Preview') ]) ) ) diff --git a/lib/sanity/utils/get-preview-url.ts b/lib/sanity/utils/get-preview-url.ts deleted file mode 100644 index 63d418fc4..000000000 --- a/lib/sanity/utils/get-preview-url.ts +++ /dev/null @@ -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}` - } -} \ No newline at end of file diff --git a/plugins/settings.tsx b/plugins/settings.tsx index 8934e0c3a..f244543f4 100644 --- a/plugins/settings.tsx +++ b/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')] diff --git a/sanity.config.ts b/sanity.config.ts index 17d9b813e..2231a5b9b 100644 --- a/sanity.config.ts +++ b/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]), - // `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 - }, + structure: structure, }), // 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({