mirror of
https://github.com/vercel/commerce.git
synced 2025-05-19 16:07:01 +00:00
Fixed preview support for sanity/next
This commit is contained in:
Henrik Larsson
parent
ae873b5d3f
commit
0ad29cbffe
@ -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
|
||||
}: {
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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';
|
||||
export const SANITY_API_VERSION = '2022-10-25'
|
||||
@ -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<ListItemBuilder>((S) =>
|
||||
S.listItem()
|
||||
@ -16,16 +15,8 @@ export default defineStructure<ListItemBuilder>((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')
|
||||
])
|
||||
)
|
||||
|
||||
|
||||
@ -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
|
||||
.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')
|
||||
])
|
||||
)
|
||||
)
|
||||
|
||||
@ -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
|
||||
.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')
|
||||
])
|
||||
)
|
||||
|
||||
|
||||
@ -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<ListItemBuilder>((S) =>
|
||||
S.listItem()
|
||||
@ -16,58 +15,10 @@ export default defineStructure<ListItemBuilder>((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<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-', '')),
|
||||
// })
|
||||
// ),
|
||||
// ])
|
||||
// )
|
||||
// )
|
||||
// )
|
||||
)
|
||||
@ -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
|
||||
.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')
|
||||
])
|
||||
)
|
||||
)
|
||||
|
||||
@ -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}`
|
||||
}
|
||||
}
|
||||
@ -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')]
|
||||
|
||||
@ -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({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user