feat: add presentation

app/api/disable-draft/route.ts

@@ -0,0 +1,8 @@
+import { draftMode } from 'next/headers'
+import { NextRequest, NextResponse } from 'next/server'
+
+export function GET(request: NextRequest) {
+  draftMode().disable()
+  const url = new URL(request.nextUrl)
+  return NextResponse.redirect(new URL('/', url.origin))
+}

app/api/draft/route.ts

@@ -0,0 +1,21 @@
+import { validatePreviewUrl } from '@sanity/preview-url-secret'
+import { readToken } from 'lib/sanity.api'
+import { getClient } from 'lib/sanity.client'
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+const clientWithToken = getClient().withConfig({ token: readToken })
+
+export async function GET(request: Request) {
+  const { isValid, redirectTo = '/' } = await validatePreviewUrl(
+    clientWithToken,
+    request.url,
+  )
+  if (!isValid) {
+    return new Response('Invalid secret', { status: 401 })
+  }
+
+  draftMode().enable()
+
+  redirect(redirectTo)
+}

app/studio/[[...index]]/page.tsx

@@ -7,13 +7,21 @@
  * https://github.com/sanity-io/next-sanity
  */
 
-import Studio from './Studio'
+import { NextStudio } from 'next-sanity/studio'
+import config from 'sanity.config'
 
 export const dynamic = 'force-static'
 
-export { metadata } from 'next-sanity/studio/metadata'
-export { viewport } from 'next-sanity/studio/viewport'
+export { metadata, viewport } from 'next-sanity/studio'
 
 export default function StudioPage() {
-  return <Studio />
+  return (
+    <NextStudio
+      config={config}
+      // This prop is for demo purposes on the deployment hosted by Sanity, you can safely delete it
+      unstable_noAuthBoundary={
+        process.env.NEXT_PUBLIC_UNSTABLE_NOAUTHBOUNDARY === 'true'
+      }
+    />
+  )
 }

components/pages/home/ProjectListItem.tsx

@@ -1,4 +1,3 @@
-import { vercelStegaSplit } from '@vercel/stega'
 import { CustomPortableText } from 'components/shared/CustomPortableText'
 import ImageBox from 'components/shared/ImageBox'
 import type { ShowcaseProject } from 'types'
@@ -32,18 +31,12 @@ export function ProjectListItem(props: ProjectProps) {
 }
 
 function TextBox({ project }: { project: ShowcaseProject }) {
-  const { cleaned: cleanedTitle, encoded: encodedTitle } = vercelStegaSplit(
-    project.title || '',
-  )
   return (
     <div className="relative mt-2 flex w-full flex-col justify-between p-3 xl:mt-0">
       <div>
         {/* Title */}
         <div className="mb-2 text-xl font-extrabold tracking-tight md:text-2xl">
-          {cleanedTitle}
-          {encodedTitle && (
-            <span style={{ display: 'none' }}>{encodedTitle}</span>
-          )}
+          {project.title}
         </div>
         {/* Overview  */}
         <div className="font-serif text-gray-500">

components/shared/Header.tsx

@@ -1,4 +1,3 @@
-import { vercelStegaSplit } from '@vercel/stega'
 import { CustomPortableText } from 'components/shared/CustomPortableText'
 
 interface HeaderProps {
@@ -11,23 +10,12 @@ export function Header(props: HeaderProps) {
   if (!description && !title) {
     return null
   }
-  const { cleaned: cleanedTitle, encoded: encodedTitle } = vercelStegaSplit(
-    title || '',
-  )
   return (
     <div className={`${centered ? 'text-center' : 'w-5/6 lg:w-3/5'}`}>
       {/* Title */}
-      {cleanedTitle && (
-        <div
-          className="text-3xl font-extrabold tracking-tight md:text-5xl"
-          data-vercel-edit-target
-        >
-          {cleanedTitle}
-          {encodedTitle && (
-            <span style={{ display: 'none' }}>{encodedTitle}</span>
-          )}
-        </div>
-      )}
+      <div className="text-3xl font-extrabold tracking-tight md:text-5xl">
+        {title}
+      </div>
       {/* Description */}
       {description && (
         <div className="mt-4 font-serif text-xl text-gray-600 md:text-2xl">

components/shared/TimelineItem.tsx

@@ -1,4 +1,3 @@
-import { vercelStegaSplit } from '@vercel/stega'
 import ImageBox from 'components/shared/ImageBox'
 import type { MilestoneItem } from 'types'
 
@@ -11,11 +10,9 @@ export function TimelineItem({
 }) {
   const { description, duration, image, tags, title } = milestone
   const startYear = duration?.start
-    ? new Date(vercelStegaSplit(duration.start).cleaned).getFullYear()
+    ? new Date(duration.start).getFullYear()
     : undefined
-  const endYear = duration?.end
-    ? new Date(vercelStegaSplit(duration.end).cleaned).getFullYear()
-    : 'Now'
+  const endYear = duration?.end ? new Date(duration.end).getFullYear() : 'Now'
 
   return (
     <div className={`flex min-h-[200px] font-sans ${!isLast && 'pb-2'}`}>

lib/sanity.api.ts

@@ -1,5 +1,3 @@
-export const useCdn = false
-
 /**
  * As this file is reused in several other files, try to keep it lean and small.
  * Importing other npm packages here could lead to needlessly increasing the client bundle size, or end up in a server-only function that don't need it.
@@ -21,10 +19,6 @@ export const readToken = process.env.SANITY_API_READ_TOKEN || ''
 export const apiVersion =
   process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-06-21'
 
-// This is the document id used for the preview secret that's stored in your dataset.
-// The secret protects against unauthorized access to your draft content and have a lifetime of 60 minutes, to protect against bruteforcing.
-export const previewSecretId: `${string}.${string}` = 'preview.secret'
-
 function assertValue<T>(v: T | undefined, errorMessage: string): T {
   if (v === undefined) {
     throw new Error(errorMessage)

lib/sanity.client.ts

@@ -1,39 +1,27 @@
-import { createClient } from '@sanity/client/stega'
-import {
-  apiVersion,
-  basePath,
-  dataset,
-  projectId,
-  useCdn,
-} from 'lib/sanity.api'
+import { apiVersion, basePath, dataset, projectId } from 'lib/sanity.api'
+import { createClient } from 'next-sanity'
 
 export function getClient(preview?: { token: string }) {
   const client = createClient({
     projectId,
     dataset,
     apiVersion,
-    useCdn,
+    useCdn: false,
     perspective: 'published',
     stega: {
-      enabled: process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview',
+      enabled:
+        process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview' ||
+        typeof preview?.token === 'string',
       studioUrl: basePath,
       logger: console,
       filter: (props) => {
         if (typeof props.sourcePath.at(-1) === 'number') {
           return false
         }
-        if (
-          props.sourcePath.at(-2) === 'marks' &&
-          typeof props.sourcePath.at(-1) === 'number'
-        ) {
-          return false
-        }
         if (props.sourcePath.at(0) === 'duration') {
           return false
         }
         switch (props.sourcePath.at(-1)) {
-          case 'href':
-          case 'listItem':
           case 'site':
             return false
         }