Merge pull request #38 from sanity-io/facelift

Update to Next.js 14, Presentation, Loaders

studio/sanity.config.tsx

@@ -1,14 +1,13 @@
 import {defineConfig, isKeyedObject} from 'sanity'
-import {deskTool} from 'sanity/desk'
+import {structureTool} from 'sanity/structure'
 import {assist} from '@sanity/assist'
 import {visionTool} from '@sanity/vision'
+import {presentationTool} from 'sanity/presentation'
 import {documentInternationalization} from '@sanity/document-internationalization'
 import {languageFilter} from '@sanity/language-filter'
 import {internationalizedArray} from 'sanity-plugin-internationalized-array'
 import {schemaVisualizer} from 'sanity-plugin-schema-visualizer'
 import {googleTranslate} from 'sanity-plugin-google-translate'
-// @ts-ignore
-import {theme} from 'https://themer.sanity.build/api/hues?preset=tw-cyan&positive=lightest:eefdf5&caution=lightest:fefbea&critical=lightest:fdf2f2&lightest=ffffff'
 
 import {structure, defaultDocumentNode} from './structure'
 import {schemaTypes} from './schemas'
@@ -17,18 +16,36 @@ import Logo from './components/Logo'
 import {vercelWidget} from 'sanity-plugin-dashboard-widget-vercel'
 import {dashboardTool} from '@sanity/dashboard'
 
+// URL for the front end from this Studio build
+const enableUrl = process.env.SANITY_STUDIO_VERCEL_ENV
+  ? `https://${
+      process.env.SANITY_STUDIO_VERCEL_ENV === 'production'
+        ? process.env.SANITY_STUDIO_VERCEL_URL
+        : process.env.SANITY_STUDIO_VERCEL_BRANCH_URL?.replace(
+            'demo-course-platform-studio',
+            'demo-course-platform'
+          )
+    }/api/draft`
+  : 'http://localhost:3000/api/draft'
+
 export default defineConfig({
   name: 'default',
   title: 'Course Platform',
-  theme,
   projectId: '6h1mv88x',
   dataset: 'production-v3',
 
   plugins: [
-    deskTool({
+    structureTool({
       structure,
       defaultDocumentNode,
     }),
+    presentationTool({
+      previewUrl: {
+        draftMode: {
+          enable: enableUrl,
+        },
+      },
+    }),
     documentInternationalization({
       supportedLanguages: i18n.languages,
       schemaTypes: ['lesson'],

studio/structure/index.ts

@@ -1,5 +1,5 @@
 import {FiAward, FiType, FiUsers} from 'react-icons/fi'
-import {StructureResolver, DefaultDocumentNodeResolver} from 'sanity/desk'
+import {StructureResolver, DefaultDocumentNodeResolver} from 'sanity/structure'
 
 import {i18n} from '../../languages'
 import preview from './preview'
@@ -82,12 +82,12 @@ export const structure: StructureResolver = (S) =>
       S.divider(),
       S.documentTypeListItem('presenter').title('Presenters').icon(FiUsers),
       S.divider(),
-      // Singleton, field-level translations
-      S.documentListItem().schemaType('labelGroup').icon(FiType).id('labelGroup').title('Labels'),
-      S.divider(),
       // Market-specific portable text example
       S.documentTypeListItem('legal').title('Legal'),
       S.divider(),
+      // Singleton, field-level translations
+      S.documentListItem().schemaType('labelGroup').icon(FiType).id('labelGroup').title('Labels'),
+      S.divider(),
     ])
 
 export const defaultDocumentNode: DefaultDocumentNodeResolver = (S, {schemaType, getClient}) => {

studio/structure/preview.ts

@@ -1,6 +1,6 @@
 import {SanityClient, SanityDocument} from 'sanity'
 import Iframe from 'sanity-plugin-iframe-pane'
-import {StructureBuilder} from 'sanity/desk'
+import {StructureBuilder} from 'sanity/structure'
 
 import resolvePreviewUrl from './resolvePreviewUrl'
 

studio/structure/references.ts

@@ -1,5 +1,5 @@
 import DocumentsPane from 'sanity-plugin-documents-pane'
-import {StructureBuilder} from 'sanity/desk'
+import {StructureBuilder} from 'sanity/structure'
 
 export default (S: StructureBuilder) =>
   S.view

studio/structure/transifex.ts

@@ -1,4 +1,4 @@
-import {StructureBuilder} from 'sanity/desk'
+import {StructureBuilder} from 'sanity/structure'
 import {TranslationsTab, defaultFieldLevelConfig} from 'sanity-plugin-transifex'
 
 export default (S: StructureBuilder) =>

web/app/[language]/[course]/[lesson]/page.tsx

@@ -1,4 +1,3 @@
-import {LiveQuery} from '@sanity/preview-kit/live-query'
 import get from 'lodash/get'
 import {Metadata} from 'next'
 import {draftMode} from 'next/headers'
@@ -7,10 +6,13 @@ import {SanityDocument} from 'next-sanity'
 
 import Header from '@/components/Header'
 import {LessonLayout} from '@/components/LessonLayout'
+import {LiveQueryWrapper} from '@/components/LiveQueryWrapper'
+import {COMMON_PARAMS, DEFAULT_EMPTY_PARAMS} from '@/lib/constants'
 import {createLessonLinks} from '@/lib/helpers'
-import {sanityFetch} from '@/sanity/client'
-import {COMMON_PARAMS, getLabels, getLessonsWithSlugs} from '@/sanity/loaders'
-import {lessonQuery} from '@/sanity/queries'
+import {Label} from '@/lib/types'
+import {getLessonsWithSlugs} from '@/sanity/fetchers'
+import {loadQuery} from '@/sanity/lib/store'
+import {LABELS_QUERY, LESSON_QUERY} from '@/sanity/queries'
 
 export async function generateStaticParams() {
   const lessons = await getLessonsWithSlugs()
@@ -34,37 +36,36 @@ export const metadata: Metadata = {
 export default async function Page({params}) {
   const {lesson, language} = params
   const queryParams = {...COMMON_PARAMS, slug: lesson, language}
-  const previewDrafts = draftMode().isEnabled
-  const data = await sanityFetch<SanityDocument>({
-    query: lessonQuery,
-    params: queryParams,
-    tags: ['lesson'],
-    previewDrafts,
+  const {isEnabled} = draftMode()
+  const initial = await loadQuery<SanityDocument>(LESSON_QUERY, queryParams, {
+    perspective: isEnabled ? 'previewDrafts' : 'published',
+    next: {tags: ['lesson']},
+  })
+  const labelsInitial = await loadQuery<Label[]>(LABELS_QUERY, queryParams, {
+    perspective: isEnabled ? 'previewDrafts' : 'published',
   })
 
-  if (!data) {
+  if (!initial.data) {
     notFound()
   }
 
-  const labels = await getLabels(queryParams)
-
-  const lessonPaths = createLessonLinks(data.course.lessons, data.course.slug)
+  const lessonPaths = createLessonLinks(initial.data.course.lessons, initial.data.course.slug)
   const currentLessonIndex = lessonPaths.findIndex((versions) =>
-    versions.find((lesson) => lesson.title === data.title)
+    versions.find((lesson) => lesson.title === initial.data.title)
   )
   const translations = lessonPaths[currentLessonIndex]
 
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <LiveQuery
-        enabled={previewDrafts}
-        initialData={data}
-        query={lessonQuery}
-        params={queryParams}
+      <LiveQueryWrapper
+        isEnabled={isEnabled}
+        query={isEnabled ? LESSON_QUERY : ``}
+        params={isEnabled ? queryParams : DEFAULT_EMPTY_PARAMS}
+        initial={initial}
       >
-        <LessonLayout labels={labels} data={data} />
-      </LiveQuery>
+        <LessonLayout labels={labelsInitial.data} />
+      </LiveQueryWrapper>
     </>
   )
 }

web/app/[language]/[course]/page.tsx

@@ -1,15 +1,16 @@
-import {LiveQuery} from '@sanity/preview-kit/live-query'
 import {Metadata} from 'next'
 import {draftMode} from 'next/headers'
 import {notFound} from 'next/navigation'
 import {SanityDocument} from 'next-sanity'
 
 import {CourseLayout} from '@/components/CourseLayout'
 import Header from '@/components/Header'
+import {LiveQueryWrapper} from '@/components/LiveQueryWrapper'
+import {COMMON_PARAMS, DEFAULT_EMPTY_PARAMS} from '@/lib/constants'
 import {Translation} from '@/lib/types'
-import {sanityFetch} from '@/sanity/client'
-import {COMMON_PARAMS, getCoursesWithSlugs} from '@/sanity/loaders'
-import {courseQuery} from '@/sanity/queries'
+import {getCoursesWithSlugs} from '@/sanity/fetchers'
+import {loadQuery} from '@/sanity/lib/store'
+import {COURSE_QUERY} from '@/sanity/queries'
 
 import {i18n} from '../../../../languages'
 
@@ -39,23 +40,23 @@ export async function generateStaticParams() {
 export default async function Page({params}) {
   const {course, language} = params
   const queryParams = {...COMMON_PARAMS, slug: course, language}
-  const previewDrafts = draftMode().isEnabled
-  const data = await sanityFetch<SanityDocument>({
-    query: courseQuery,
-    params: queryParams,
-    tags: ['course'],
-    previewDrafts,
+  const {isEnabled} = draftMode()
+  const initial = await loadQuery<SanityDocument>(COURSE_QUERY, queryParams, {
+    perspective: isEnabled ? 'previewDrafts' : 'published',
+    next: {tags: ['course']},
   })
 
-  if (!data) {
+  if (!initial.data) {
     notFound()
   }
 
-  const currentTitle = data?.title ? data.title[language] ?? data.title[i18n.base] : null
+  const currentTitle = initial.data?.title
+    ? initial.data.title[language] ?? initial.data.title[i18n.base]
+    : null
 
   const translations = i18n.languages.reduce<Translation[]>((acc, lang) => {
-    const translationSlug = data?.slug ? data.slug[lang.id]?.current : null
-    const translationTitle = data?.title ? data.title[lang.id] : currentTitle
+    const translationSlug = initial?.data?.slug ? initial?.data.slug[lang.id]?.current : null
+    const translationTitle = initial?.data?.title ? initial?.data.title[lang.id] : currentTitle
 
     return translationSlug && translationTitle
       ? [
@@ -72,14 +73,14 @@ export default async function Page({params}) {
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <LiveQuery
-        enabled={previewDrafts}
-        initialData={data}
-        query={courseQuery}
-        params={queryParams}
+      <LiveQueryWrapper
+        isEnabled={isEnabled}
+        query={isEnabled ? COURSE_QUERY : ''}
+        params={isEnabled ? queryParams : DEFAULT_EMPTY_PARAMS}
+        initial={initial}
       >
-        <CourseLayout data={data} />
-      </LiveQuery>
+        <CourseLayout />
+      </LiveQueryWrapper>
     </>
   )
 }

web/app/[language]/layout.tsx

@@ -7,46 +7,30 @@ export const metadata: Metadata = {
 import '@/styles/globals.css'
 
 import {draftMode} from 'next/headers'
-import {lazy} from 'react'
+import {SanityDocument} from 'next-sanity'
 
-import ExitPreview from '@/components/ExitPreview'
 import LegalLinks from '@/components/LegalLinks'
 import VisualEditing from '@/components/VisualEditing'
-import {token} from '@/sanity/client'
-import {COMMON_PARAMS, getLegals} from '@/sanity/loaders'
-const PreviewProvider = lazy(() => import('@/components/PreviewProvider'))
+import {COMMON_PARAMS} from '@/lib/constants'
+import {loadQuery} from '@/sanity/lib/store'
+import {LEGALS_QUERY} from '@/sanity/queries'
 
 export default async function RootLayout(props) {
   const queryParams = {...COMMON_PARAMS, language: props.params.language}
-  const legals = await getLegals(queryParams)
-  const preview = draftMode().isEnabled
-
-  const children = (
-    <>
-      {props.children}
-      <LegalLinks legals={legals} />
-    </>
-  )
-
-  const enableVisualEditing =
-    (process.env.NETLIFY && process.env.CONTEXT !== 'production') ||
-    process.env.NODE_ENV === 'development'
+  const {isEnabled} = draftMode()
+  const initial = await loadQuery<SanityDocument[]>(LEGALS_QUERY, queryParams, {
+    perspective: isEnabled ? 'previewDrafts' : 'published',
+  })
 
   return (
     <html lang={props.params.language}>
       <head>
         <link rel="stylesheet" href="https://use.typekit.net/ogy2uky.css" />
       </head>
       <body className="font-sans bg-white text-gray-900">
-        {preview ? (
-          <PreviewProvider token={token!}>
-            {children}
-            <ExitPreview />
-          </PreviewProvider>
-        ) : (
-          children
-        )}
-        {enableVisualEditing ? <VisualEditing /> : null}
+        {props.children}
+        <LegalLinks data={initial.data} />
+        {draftMode().isEnabled && <VisualEditing />}
       </body>
     </html>
   )

web/app/[language]/legal/[slug]/page.tsx

@@ -1,13 +1,12 @@
-import LiveQuery from '@sanity/preview-kit/live-query'
 import {Metadata} from 'next'
 import {draftMode} from 'next/headers'
-import {SanityDocument} from 'next-sanity'
 
 import Header from '@/components/Header'
 import LegalLayout, {LegalLayoutProps} from '@/components/LegalLayout'
-import {sanityFetch} from '@/sanity/client'
-import {COMMON_PARAMS} from '@/sanity/loaders'
-import {legalQuery} from '@/sanity/queries'
+import {LiveQueryWrapper} from '@/components/LiveQueryWrapper'
+import {COMMON_PARAMS, DEFAULT_EMPTY_PARAMS} from '@/lib/constants'
+import {loadQuery} from '@/sanity/lib/store'
+import {LEGAL_QUERY} from '@/sanity/queries'
 
 import {i18n} from '../../../../../languages'
 
@@ -18,26 +17,29 @@ export const metadata: Metadata = {
 export default async function Page({params}) {
   const {language, slug} = params
   const queryParams = {...COMMON_PARAMS, slug, language}
-  const previewDrafts = draftMode().isEnabled
-  const data = await sanityFetch<LegalLayoutProps['data']>({
-    query: legalQuery,
-    params: queryParams,
-    tags: ['legal'],
-    previewDrafts,
+  const {isEnabled} = draftMode()
+  const initial = await loadQuery<LegalLayoutProps['data']>(LEGAL_QUERY, queryParams, {
+    perspective: isEnabled ? 'previewDrafts' : 'published',
+    next: {tags: ['legal']},
   })
 
   const translations = i18n.languages.map((lang) => ({
     language: lang.id,
     path: `/${lang.id}/legal/${slug}`,
-    title: data?.title ?? ``,
+    title: initial.data?.title ?? ``,
   }))
 
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <LiveQuery enabled={previewDrafts} initialData={data} query={legalQuery} params={queryParams}>
-        <LegalLayout data={data} />
-      </LiveQuery>
+      <LiveQueryWrapper
+        isEnabled={isEnabled}
+        query={isEnabled ? LEGAL_QUERY : ''}
+        params={isEnabled ? queryParams : DEFAULT_EMPTY_PARAMS}
+        initial={initial}
+      >
+        <LegalLayout data={initial.data} />
+      </LiveQueryWrapper>
     </>
   )
 }