Merge pull request #34 from sanity-io/next-13

next-sanity updates

studio/package.json

@@ -33,7 +33,7 @@
     "react-icons": "^4.4.0",
     "react-is": "^18.2.0",
     "react-xarrows": "^2.0.2",
-    "sanity": "^3.13.0",
+    "sanity": "^3.14.2",
     "sanity-plugin-dashboard-widget-vercel": "^2.0.1",
     "sanity-plugin-documents-pane": "^2.0.0",
     "sanity-plugin-google-translate": "^3.0.0",

studio/structure/index.ts

@@ -77,9 +77,9 @@ export const structure: StructureResolver = (S) =>
                 ),
             ])
         ),
-      S.divider(),
       // Field-level translations
       S.documentTypeListItem('course').title('Courses'),
+      S.divider(),
       S.documentTypeListItem('presenter').title('Presenters').icon(FiUsers),
       S.divider(),
       // Singleton, field-level translations

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

@@ -1,12 +1,13 @@
+import {LiveQuery} from '@sanity/preview-kit/live-query'
 import get from 'lodash/get'
 import {Metadata} from 'next'
 import {draftMode} from 'next/headers'
+import {SanityDocument} from 'next-sanity'
 
 import Header from '@/components/Header'
 import {LessonLayout} from '@/components/LessonLayout'
-import {PreviewWrapper} from '@/components/PreviewWrapper'
 import {createLessonLinks} from '@/lib/helpers'
-import {cachedClientFetch} from '@/sanity/client'
+import {sanityFetch} from '@/sanity/client'
 import {COMMON_PARAMS, getLabels, getLessonsWithSlugs} from '@/sanity/loaders'
 import {lessonQuery} from '@/sanity/queries'
 
@@ -32,9 +33,13 @@ export const metadata: Metadata = {
 export default async function Page({params}) {
   const {lesson, language} = params
   const queryParams = {...COMMON_PARAMS, slug: lesson, language}
-  const {isEnabled: preview} = draftMode()
-  const data = await cachedClientFetch(preview)(lessonQuery, queryParams)
-  const labels = await getLabels(queryParams, preview)
+  const data = await sanityFetch<SanityDocument>({
+    query: lessonQuery,
+    params: queryParams,
+    tags: ['lesson'],
+  })
+
+  const labels = await getLabels(queryParams)
 
   const lessonPaths = createLessonLinks(data.course.lessons, data.course.slug)
   const currentLessonIndex = lessonPaths.findIndex((versions) =>
@@ -45,9 +50,14 @@ export default async function Page({params}) {
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <PreviewWrapper preview={preview} initialData={data} query={lessonQuery} params={queryParams}>
+      <LiveQuery
+        enabled={draftMode().isEnabled}
+        initialData={data}
+        query={lessonQuery}
+        params={queryParams}
+      >
         <LessonLayout labels={labels} />
-      </PreviewWrapper>
+      </LiveQuery>
     </>
   )
 }

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

@@ -1,11 +1,11 @@
+import {LiveQuery} from '@sanity/preview-kit/live-query'
 import {Metadata} from 'next'
-import {draftMode} from 'next/headers'
+import {SanityDocument} from 'next-sanity'
 
 import {CourseLayout} from '@/components/CourseLayout'
 import Header from '@/components/Header'
-import {PreviewWrapper} from '@/components/PreviewWrapper'
 import {Translation} from '@/lib/types'
-import {cachedClientFetch} from '@/sanity/client'
+import {sanityFetch} from '@/sanity/client'
 import {COMMON_PARAMS, getCoursesWithSlugs} from '@/sanity/loaders'
 import {courseQuery} from '@/sanity/queries'
 
@@ -36,9 +36,12 @@ export async function generateStaticParams() {
 
 export default async function Page({params}) {
   const {course, language} = params
-  const {isEnabled: preview} = draftMode()
   const queryParams = {...COMMON_PARAMS, slug: course, language}
-  const data = await cachedClientFetch(preview)(courseQuery, queryParams)
+  const data = await sanityFetch<SanityDocument>({
+    query: courseQuery,
+    params: queryParams,
+    tags: ['course'],
+  })
 
   const currentTitle = data?.title ? data.title[language] ?? data.title[i18n.base] : null
 
@@ -61,9 +64,9 @@ export default async function Page({params}) {
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <PreviewWrapper preview={preview} initialData={data} query={courseQuery} params={queryParams}>
+      <LiveQuery enabled initialData={data} query={courseQuery} params={queryParams}>
         <CourseLayout />
-      </PreviewWrapper>
+      </LiveQuery>
     </>
   )
 }

web/app/[language]/layout.tsx

@@ -12,17 +12,14 @@ import {lazy} from 'react'
 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'))
 
 export default async function RootLayout(props) {
   const queryParams = {...COMMON_PARAMS, language: props.params.language}
   const legals = await getLegals(queryParams)
-
-  const preview = draftMode().isEnabled ? process.env.SANITY_API_READ_TOKEN : undefined
-  if (draftMode().isEnabled && !preview) {
-    console.info(`Preview mode is enabled but no token was found.`)
-  }
+  const preview = draftMode().isEnabled
 
   const children = (
     <>
@@ -42,7 +39,7 @@ export default async function RootLayout(props) {
       </head>
       <body className="font-sans bg-white text-gray-900">
         {preview ? (
-          <PreviewProvider token={preview}>
+          <PreviewProvider token={token!}>
             {children}
             <ExitPreview />
           </PreviewProvider>

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

@@ -1,10 +1,11 @@
+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 from '@/components/LegalLayout'
-import {PreviewWrapper} from '@/components/PreviewWrapper'
-import {cachedClientFetch} from '@/sanity/client'
+import {sanityFetch} from '@/sanity/client'
 import {COMMON_PARAMS} from '@/sanity/loaders'
 import {legalQuery} from '@/sanity/queries'
 
@@ -16,9 +17,12 @@ export const metadata: Metadata = {
 
 export default async function Page({params}) {
   const {language, slug} = params
-  const {isEnabled: preview} = draftMode()
   const queryParams = {...COMMON_PARAMS, slug, language}
-  const data = await cachedClientFetch(preview)(legalQuery, queryParams)
+  const data = await sanityFetch<SanityDocument>({
+    query: legalQuery,
+    params: queryParams,
+    tags: ['legal'],
+  })
 
   const translations = i18n.languages.map((lang) => ({
     language: lang.id,
@@ -29,9 +33,14 @@ export default async function Page({params}) {
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <PreviewWrapper preview={preview} initialData={data} query={legalQuery} params={queryParams}>
+      <LiveQuery
+        enabled={draftMode().isEnabled}
+        initialData={data}
+        query={legalQuery}
+        params={queryParams}
+      >
         <LegalLayout />
-      </PreviewWrapper>
+      </LiveQuery>
     </>
   )
 }

web/app/[language]/page.tsx

@@ -1,5 +1,3 @@
-import {draftMode} from 'next/headers'
-
 import Header from '@/components/Header'
 import {HomeLayout} from '@/components/HomeLayout'
 import {COMMON_PARAMS, getHome, getLabels} from '@/sanity/loaders'
@@ -8,10 +6,9 @@ import {i18n} from '../../../languages'
 
 export default async function Page({params}) {
   const {language} = params
-  const {isEnabled: preview} = draftMode()
   const queryParams = {...COMMON_PARAMS, language}
-  const home = await getHome(queryParams, preview)
-  const labels = await getLabels(queryParams, preview)
+  const home = await getHome(queryParams)
+  const labels = await getLabels(queryParams)
 
   const translations = i18n.languages.map((lang) => {
     return {

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

@@ -1,9 +1,10 @@
+import LiveQuery from '@sanity/preview-kit/live-query'
 import {draftMode} from 'next/headers'
 
 import Header from '@/components/Header'
+import type {PresenterLayoutProps} from '@/components/PresenterLayout'
 import PresenterLayout from '@/components/PresenterLayout'
-import {PreviewWrapper} from '@/components/PreviewWrapper'
-import {cachedClientFetch, previewClient} from '@/sanity/client'
+import {sanityFetch} from '@/sanity/client'
 import {COMMON_PARAMS} from '@/sanity/loaders'
 import {presenterQuery} from '@/sanity/queries'
 
@@ -12,26 +13,31 @@ import {i18n} from '../../../../../languages'
 export default async function Page({params}) {
   const {language, slug} = params
   const queryParams = {...COMMON_PARAMS, slug, language}
-  const {isEnabled: preview} = draftMode()
-  const data = await cachedClientFetch(preview)(presenterQuery, queryParams)
+  const {isEnabled: previewDrafts} = draftMode()
+  const data = await sanityFetch<PresenterLayoutProps['data']>({
+    query: presenterQuery,
+    params: queryParams,
+    tags: ['presenter'],
+    previewDrafts,
+  })
 
   const translations = i18n.languages.map((lang) => ({
     language: lang.id,
     path: `/${lang.id}/presenter/${slug}`,
-    title: data?.title,
+    title: data?.title ?? ``,
   }))
 
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <PreviewWrapper
-        preview={preview}
+      <LiveQuery
+        enabled={previewDrafts}
         initialData={data}
         query={presenterQuery}
         params={queryParams}
       >
         <PresenterLayout />
-      </PreviewWrapper>
+      </LiveQuery>
     </>
   )
 }

web/app/api/preview/route.ts

@@ -1,4 +1,3 @@
-import {vercelStegaSplit} from '@vercel/stega'
 import {draftMode} from 'next/headers'
 import {groq} from 'next-sanity'
 
@@ -29,12 +28,10 @@ function isLinkToOurDomain(url: string) {
 export async function GET(request: Request) {
   const {origin, searchParams} = new URL(request.url)
 
-  const id = searchParams.get('id')
+  const id = searchParams.get('id')?.replace(`drafts.`, ``)
 
   if (!id) {
     return new Response('No "id" provided', {status: 401})
-  } else if (id.startsWith('drafts.')) {
-    return new Response('Must use a published "id"', {status: 401})
   } else if (!searchParams.get('secret')) {
     return new Response('No "secret" provided', {status: 401})
   }

web/components/Clean.tsx

@@ -1,17 +1,24 @@
 import {vercelStegaSplit} from '@vercel/stega'
+import React from 'react'
 
 export function clean(value?: string | null): string {
   return value ? vercelStegaSplit(value).cleaned : ``
 }
 
-export default function Clean({value}: {value: string}) {
+type CleanProps = {
+  value: string
+  as?: 'div' | 'span'
+}
+
+export default function Clean({value, as}: CleanProps) {
   const {cleaned, encoded} = vercelStegaSplit(value)
+  const Element = as ?? React.Fragment
 
   return encoded ? (
-    <>
+    <Element>
       {cleaned}
       <span style={{display: 'none'}}>{encoded}</span>
-    </>
+    </Element>
   ) : (
     cleaned
   )

web/components/CourseLayout.tsx

@@ -6,38 +6,35 @@ import React, {useMemo} from 'react'
 import Blobs from '@/components/Blobs'
 import LessonLinks from '@/components/LessonLinks'
 import Title from '@/components/Title'
-import {createCourseSummary, createLessonLinks} from '@/lib/helpers'
+import {createLessonLinks} from '@/lib/helpers'
 
 import {i18n} from '../../languages'
+import Presenters from './Presenters'
 
 type CourseLayoutProps = {
   data?: any
 }
 
 export function CourseLayout(props: CourseLayoutProps) {
-  const {title, slug, presenters, lessons, labels} = props.data ?? {}
-  const {language: currentLanguage} = useParams()
+  const {title, slug, presenters, lessons} = props.data ?? {}
 
   // Render the localized title, if it exists, otherwise fallback to base
-  const currentTitle = title ? title[currentLanguage] ?? title[i18n.base] : null
+  const {language: currentLanguage} = useParams()
+  const titleLanguage = Array.isArray(currentLanguage) ? currentLanguage[0] : currentLanguage
+  const currentTitle = title ? title[titleLanguage] ?? title[i18n.base] : null
 
   // Each "course" document has an array of "lesson" references
   // "lesson" documents have document-level translations
   // Each document has a unique slug and are related by an
   // array of references stored in a separate "translation.metadata" document
   const lessonPaths = useMemo(() => createLessonLinks(lessons, slug), [lessons, slug])
 
-  const summary = useMemo(
-    () => createCourseSummary(lessons, presenters, labels),
-    [lessons, presenters, labels]
-  )
-
   return (
     <>
       <div className="relative">
         <section className="bg-gradient-to-r mix-blend-multiply from-cyan-100 via-transparent to-transparent pt-16">
           <div className="container mx-auto py-8 p-4 md:p-8 xl:p-16 flex flex-col justify-start items-start gap-2 md:gap-4 xl:gap-8">
-            <Title subtitle={summary}>{currentTitle}</Title>
+            <Title subtitle={<Presenters presenters={presenters} />}>{currentTitle}</Title>
           </div>
         </section>
 

web/components/HomeLayout.tsx

@@ -17,7 +17,8 @@ type HomeLayoutProps = {
 
 export function HomeLayout(props: HomeLayoutProps) {
   const {courses, labels} = props
-  const {language} = useParams()
+  const params = useParams()
+  const language = Array.isArray(params.language) ? params.language[0] : params.language
   const courseStart = getLabelByKey('course.start', labels)
 
   return (

web/components/LegalLinks.tsx

@@ -1,13 +1,11 @@
 import Link from 'next/link'
+import {SanityDocument} from 'next-sanity'
 import React from 'react'
-import {SanityDocument, Slug} from 'sanity'
 
 import {clean} from './Clean'
 
 type LegalLinksProps = {
-  legals: SanityDocument[] & {
-    slug: Slug
-  }
+  legals: SanityDocument[]
 }
 export default function LegalLinks(props: LegalLinksProps) {
   const {legals = []} = props