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

Fix published view and add 404

studio/package.json

@@ -15,6 +15,7 @@
     "sanity"
   ],
   "dependencies": {
+    "@sanity/assist": "^1.2.9",
     "@sanity/code-input": "^4.0.0",
     "@sanity/dashboard": "^3.1.4",
     "@sanity/document-internationalization": "^2.0.1",
@@ -33,7 +34,7 @@
     "react-icons": "^4.4.0",
     "react-is": "^18.2.0",
     "react-xarrows": "^2.0.2",
-    "sanity": "^3.14.2",
+    "sanity": "^3.18.0",
     "sanity-plugin-dashboard-widget-vercel": "^2.0.1",
     "sanity-plugin-documents-pane": "^2.0.0",
     "sanity-plugin-google-translate": "^3.0.0",

studio/sanity.config.tsx

@@ -1,5 +1,6 @@
 import {defineConfig, isKeyedObject} from 'sanity'
 import {deskTool} from 'sanity/desk'
+import {assist} from '@sanity/assist'
 import {visionTool} from '@sanity/vision'
 import {documentInternationalization} from '@sanity/document-internationalization'
 import {languageFilter} from '@sanity/language-filter'
@@ -71,6 +72,7 @@ export default defineConfig({
       defaultSchemaTypes: ['course', 'lesson', 'presenter'],
       hiddenSchemaTypes: ['translation.metadata'],
     }),
+    assist(),
   ],
   schema: {
     types: schemaTypes,

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

@@ -2,6 +2,7 @@ import {LiveQuery} from '@sanity/preview-kit/live-query'
 import get from 'lodash/get'
 import {Metadata} from 'next'
 import {draftMode} from 'next/headers'
+import {notFound} from 'next/navigation'
 import {SanityDocument} from 'next-sanity'
 
 import Header from '@/components/Header'
@@ -33,12 +34,18 @@ 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,
   })
 
+  if (!data) {
+    notFound()
+  }
+
   const labels = await getLabels(queryParams)
 
   const lessonPaths = createLessonLinks(data.course.lessons, data.course.slug)
@@ -51,12 +58,12 @@ export default async function Page({params}) {
     <>
       <Header translations={translations} currentLanguage={language} />
       <LiveQuery
-        enabled={draftMode().isEnabled}
+        enabled={previewDrafts}
         initialData={data}
         query={lessonQuery}
         params={queryParams}
       >
-        <LessonLayout labels={labels} />
+        <LessonLayout labels={labels} data={data} />
       </LiveQuery>
     </>
   )

web/app/[language]/[course]/not-found.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import Link from 'next/link'
+import {usePathname} from 'next/navigation'
+
+import {CourseLayout} from '@/components/CourseLayout'
+import Header from '@/components/Header'
+
+import {i18n} from '../../../../languages'
+
+export default function NotFound() {
+  const pathname = usePathname()
+  const data = {
+    title: {
+      [i18n.base]: 'Not Found',
+    },
+  }
+
+  return (
+    <div>
+      <Header translations={[]} />
+      <CourseLayout data={data}>
+        <p>
+          Could not find Course at <code>{pathname}</code>
+        </p>
+        <Link href="/">Return Home</Link>
+      </CourseLayout>
+    </div>
+  )
+}

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

@@ -1,5 +1,7 @@
 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'
@@ -37,12 +39,18 @@ 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,
   })
 
+  if (!data) {
+    notFound()
+  }
+
   const currentTitle = data?.title ? data.title[language] ?? data.title[i18n.base] : null
 
   const translations = i18n.languages.reduce<Translation[]>((acc, lang) => {
@@ -64,8 +72,13 @@ export default async function Page({params}) {
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <LiveQuery enabled initialData={data} query={courseQuery} params={queryParams}>
-        <CourseLayout />
+      <LiveQuery
+        enabled={previewDrafts}
+        initialData={data}
+        query={courseQuery}
+        params={queryParams}
+      >
+        <CourseLayout data={data} />
       </LiveQuery>
     </>
   )

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

@@ -4,7 +4,7 @@ import {draftMode} from 'next/headers'
 import {SanityDocument} from 'next-sanity'
 
 import Header from '@/components/Header'
-import LegalLayout from '@/components/LegalLayout'
+import LegalLayout, {LegalLayoutProps} from '@/components/LegalLayout'
 import {sanityFetch} from '@/sanity/client'
 import {COMMON_PARAMS} from '@/sanity/loaders'
 import {legalQuery} from '@/sanity/queries'
@@ -18,28 +18,25 @@ export const metadata: Metadata = {
 export default async function Page({params}) {
   const {language, slug} = params
   const queryParams = {...COMMON_PARAMS, slug, language}
-  const data = await sanityFetch<SanityDocument>({
+  const previewDrafts = draftMode().isEnabled
+  const data = await sanityFetch<LegalLayoutProps['data']>({
     query: legalQuery,
     params: queryParams,
     tags: ['legal'],
+    previewDrafts,
   })
 
   const translations = i18n.languages.map((lang) => ({
     language: lang.id,
     path: `/${lang.id}/legal/${slug}`,
-    title: data.title,
+    title: data?.title ?? ``,
   }))
 
   return (
     <>
       <Header translations={translations} currentLanguage={language} />
-      <LiveQuery
-        enabled={draftMode().isEnabled}
-        initialData={data}
-        query={legalQuery}
-        params={queryParams}
-      >
-        <LegalLayout />
+      <LiveQuery enabled={previewDrafts} initialData={data} query={legalQuery} params={queryParams}>
+        <LegalLayout data={data} />
       </LiveQuery>
     </>
   )

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

@@ -13,7 +13,7 @@ import {i18n} from '../../../../../languages'
 export default async function Page({params}) {
   const {language, slug} = params
   const queryParams = {...COMMON_PARAMS, slug, language}
-  const {isEnabled: previewDrafts} = draftMode()
+  const previewDrafts = draftMode().isEnabled
   const data = await sanityFetch<PresenterLayoutProps['data']>({
     query: presenterQuery,
     params: queryParams,
@@ -36,7 +36,7 @@ export default async function Page({params}) {
         query={presenterQuery}
         params={queryParams}
       >
-        <PresenterLayout />
+        <PresenterLayout data={data} />
       </LiveQuery>
     </>
   )

web/components/CourseLayout.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import {useParams} from 'next/navigation'
-import React, {useMemo} from 'react'
+import React, {PropsWithChildren, useMemo} from 'react'
 
 import Blobs from '@/components/Blobs'
 import LessonLinks from '@/components/LessonLinks'
@@ -10,10 +10,11 @@ import {createLessonLinks} from '@/lib/helpers'
 
 import {i18n} from '../../languages'
 import Presenters from './Presenters'
+import Prose from './Prose'
 
-type CourseLayoutProps = {
+type CourseLayoutProps = PropsWithChildren<{
   data?: any
-}
+}>
 
 export function CourseLayout(props: CourseLayoutProps) {
   const {title, slug, presenters, lessons} = props.data ?? {}
@@ -39,7 +40,11 @@ export function CourseLayout(props: CourseLayoutProps) {
         </section>
 
         <div className="p-4 md:p-8 xl:p-16 container mx-auto">
-          <LessonLinks lessons={lessonPaths} openByDefault />
+          {lessonPaths.length > 0 ? (
+            <LessonLinks lessons={lessonPaths} openByDefault />
+          ) : (
+            <Prose>{props.children}</Prose>
+          )}
         </div>
       </div>
       <Blobs />

web/components/Header.tsx

@@ -10,7 +10,7 @@ import TranslationLinks from './TranslationLinks'
 
 type HeaderProps = {
   translations: Translation[]
-  currentLanguage: string
+  currentLanguage?: string
 }
 
 export default function Header(props: HeaderProps) {

web/components/LegalLayout.tsx

@@ -6,7 +6,7 @@ import {TypedObject} from 'sanity'
 import Prose from './Prose'
 import Title from './Title'
 
-type LegalLayoutProps = {
+export type LegalLayoutProps = {
   data?: {
     title: string
     content: TypedObject[]

web/components/Prose.tsx

@@ -1,22 +1,23 @@
 import {PortableText} from '@portabletext/react'
+import {PropsWithChildren} from 'react'
 import {TypedObject} from 'sanity'
 
 import {portableTextComponents} from '@/sanity/portableTextComponents'
 
-type ProseProps = {
-  value: TypedObject[]
-}
+type ProseProps = PropsWithChildren<{
+  value?: TypedObject[]
+}>
 
 export default function Prose(props: ProseProps) {
-  const {value} = props
-
-  if (!value || !value.length) {
-    return null
-  }
+  const {value, children} = props
 
   return (
     <div className="prose prose-slate md:prose-lg lg:prose-xl w-full prose-h2:text-cyan-800 prose-h3:text-cyan-700 prose-a:text-cyan-500 prose-a:transition-colors prose-a:duration-200 hover:prose-a:text-pink-500 prose-code:text-pink-700 prose-h2:font-display prose-h3:font-display">
-      <PortableText value={value} components={portableTextComponents} />
+      {value && value.length > 0 ? (
+        <PortableText value={value} components={portableTextComponents} />
+      ) : (
+        children
+      )}
     </div>
   )
 }