Merge pull request #42 from sanity-io/facelift

configure 'locate'

studio/presentation/index.ts

@@ -0,0 +1,16 @@
+// URL for the front end from this Studio build
+// This works because this one repo builds both a Studio and the Next.js front end separately, but using the same branch
+// demo-course-platform.sanity.build is the frontend domain
+// demo-course-platform-studio.sanity.build is the studio domain
+export const enableUrl = process.env.SANITY_STUDIO_VERCEL_ENV
+  ? `https://${
+      process.env.SANITY_STUDIO_VERCEL_ENV === 'production'
+        ? 'demo-course-platform.sanity.build' // I don't understand why the primary domain doesn't have a variable
+        : process.env.SANITY_STUDIO_VERCEL_BRANCH_URL?.replace(
+            'demo-course-platform-studio',
+            'demo-course-platform'
+          )
+    }/api/draft`
+  : 'http://localhost:3000/api/draft'
+
+export {locate} from './locate'

studio/presentation/locate.ts

@@ -0,0 +1,130 @@
+import groq from 'groq'
+import {map} from 'rxjs'
+import {ListenQueryOptions} from 'sanity'
+import type {DocumentLocationResolver} from 'sanity/presentation'
+
+const DEFAULT_LANG = 'en'
+
+// See: https://www.sanity.io/docs/configuring-the-presentation-tool#7dce82cbe90b
+export const locate: DocumentLocationResolver = (params, context) => {
+  let doc$ = null
+  const queryParams = {...params, lang: DEFAULT_LANG}
+  const listenOptions: ListenQueryOptions = {perspective: 'previewDrafts'}
+
+  if (params.type === 'presenter') {
+    doc$ = context.documentStore.listenQuery(
+      groq`*[_id == $id][0]{
+            slug,
+            "title": name
+        }`,
+      queryParams,
+      listenOptions
+    )
+
+    // Return a streaming list of locations
+    return doc$.pipe(
+      map((doc) => {
+        if (!doc || !doc.slug?.current) {
+          return null
+        }
+
+        return {
+          locations: [
+            {
+              title: doc.title || 'Untitled',
+              href: `/${DEFAULT_LANG}/presenter/${doc.slug.current}`,
+            },
+          ],
+        }
+      })
+    )
+  } else if (params.type === 'legal') {
+    doc$ = context.documentStore.listenQuery(
+      groq`*[_id == $id][0]{slug, title}`,
+      queryParams,
+      listenOptions
+    )
+
+    return doc$.pipe(
+      map((doc) => {
+        if (!doc || !doc.slug?.current) {
+          return null
+        }
+
+        return {
+          locations: [
+            {
+              title: doc.title || 'Untitled',
+              href: `/${DEFAULT_LANG}/legal/${doc.slug.current}`,
+            },
+          ],
+        }
+      })
+    )
+  } else if (params.type === 'course') {
+    doc$ = context.documentStore.listenQuery(
+      groq`*[_id == $id][0]{
+            "slug": slug[$lang],
+            "title": title[$lang]
+          }`,
+      queryParams,
+      listenOptions
+    )
+
+    return doc$.pipe(
+      map((doc) => {
+        console.log(doc)
+        if (!doc || !doc.slug?.current) {
+          return null
+        }
+
+        return {
+          locations: [
+            {
+              title: doc.title || 'Untitled',
+              href: `/${DEFAULT_LANG}/${doc.slug.current}`,
+            },
+            {
+              title: 'Home',
+              href: `/${DEFAULT_LANG}`,
+            },
+          ],
+        }
+      })
+    )
+  } else if (params.type === 'lesson') {
+    doc$ = context.documentStore.listenQuery(
+      groq`*[_id == $id][0]{
+              slug,
+              // TODO: Perform lookup for non-base-language lessons to lookup metadata document
+              "courseSlug": *[_type == "course" && references(^._id)][0].slug,
+              title,
+              language
+          }`,
+      queryParams,
+      listenOptions
+    )
+
+    return doc$.pipe(
+      map((doc) => {
+        if (!doc || !doc?.language || !doc.slug?.current || !doc.courseSlug) {
+          return null
+        }
+
+        // Cannot retrieve values in GROQ dynamically based on the value of a field
+        const courseSlug = doc.courseSlug[doc.language] || doc.courseSlug[DEFAULT_LANG]
+
+        return {
+          locations: [
+            {
+              title: doc.title || 'Untitled',
+              href: `/${doc.language}/${courseSlug.current}/${doc.slug.current}`,
+            },
+          ],
+        }
+      })
+    )
+  }
+
+  return null
+}

studio/sanity.config.tsx

@@ -15,18 +15,7 @@ import {i18n} from '../languages'
 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'
-        ? 'demo-course-platform.sanity.build' // I don't understand why the primary domain doesn't have a variable
-        : process.env.SANITY_STUDIO_VERCEL_BRANCH_URL?.replace(
-            'demo-course-platform-studio',
-            'demo-course-platform'
-          )
-    }/api/draft`
-  : 'http://localhost:3000/api/draft'
+import {enableUrl, locate} from './presentation'
 
 export default defineConfig({
   name: 'default',
@@ -40,6 +29,7 @@ export default defineConfig({
       defaultDocumentNode,
     }),
     presentationTool({
+      locate,
       previewUrl: {
         draftMode: {
           enable: enableUrl,

studio/structure/index.ts

@@ -91,17 +91,31 @@ export const structure: StructureResolver = (S) =>
     ])
 
 export const defaultDocumentNode: DefaultDocumentNodeResolver = (S, {schemaType, getClient}) => {
-  const client = getClient({apiVersion: `2023-01-01`})
+  // const client = getClient({apiVersion: `2023-01-01`})
 
   switch (schemaType) {
     case 'presenter':
-      return S.document().views([S.view.form(), preview(S, client), references(S)])
+      return S.document().views([
+        S.view.form(),
+        // preview(S, client)
+        references(S),
+      ])
     case 'course':
-      return S.document().views([S.view.form(), preview(S, client), transifex(S)])
+      return S.document().views([
+        S.view.form(),
+        // preview(S, client)
+        transifex(S),
+      ])
     case 'lesson':
-      return S.document().views([S.view.form(), preview(S, client)])
+      return S.document().views([
+        S.view.form(),
+        // preview(S, client)
+      ])
     case 'legal':
-      return S.document().views([S.view.form(), preview(S, client)])
+      return S.document().views([
+        S.view.form(),
+        // preview(S, client)
+      ])
     default:
       return S.document()
   }

web/components/HomeLayout.tsx

@@ -30,7 +30,7 @@ export function HomeLayout(props: HomeLayoutProps) {
         courses.map((course) => (
           <article
             key={course._id}
-            className="relative bg-gradient-to-tr mix-blend-multiply from-cyan-100 via-pink-100 to-yellow-100 p-8 md:p-16 xl:p-24 rounded-xl md:rounded-2xl xl:rounded-3xl w-full flex flex-col gap-4 md:flex-row items-start md:items-center md:justify-between group 
+            className="relative bg-gradient-to-tr mix-blend-multiply from-cyan-100 via-pink-100 to-yellow-100 p-8 md:p-16 xl:p-24 rounded-xl md:rounded-2xl xl:rounded-3xl w-full max-w-7xl mx-auto flex flex-col gap-4 md:flex-row items-start md:items-center md:justify-between group 
             hover:scale-[1.01] hover:rotate-[-0.25deg] 
             transition-transform duration-200"
           >