docs(examples): use vercel integration in cms-sanity (vercel#39323)

## Feature

- [x] Documentation added

## Documentation / Examples

- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

This PR updates the cms-sanity example to:
- Deploy to Vercel with the [Sanity Vercel Integration](https://www.sanity.io/docs/vercel-integration) by default.
- You can still opt-out of using the Sanity Vercel Integration, clicking `You can also set up manually` gives you all the information you need.
- The blog itself is updated so it's much more resilient to missing data, and is setup to set `revalidate: 60` until you have a On-demand Revalidation webhook setup.
- Preview Mode is now enabled on the frontpage as well.
- The Sanity client setup, and webhook validation, are updated to follow our current best practices.

Author: stipsan

examples/cms-sanity/.env.local.example

@@ -1,5 +1,3 @@
 NEXT_PUBLIC_SANITY_PROJECT_ID=
 NEXT_PUBLIC_SANITY_DATASET=
-SANITY_API_TOKEN=
-SANITY_PREVIEW_SECRET=
-SANITY_STUDIO_REVALIDATE_SECRET=
+SANITY_API_READ_TOKEN=

examples/cms-sanity/.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/studio/node_modules
 /.pnp
 .pnp.js
 
@@ -14,6 +15,7 @@
 
 # production
 /build
+/studio/dist
 
 # misc
 .DS_Store
@@ -34,3 +36,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Env files created by scripts for working locally
+.env
+studio/.env.development

examples/cms-sanity/README.md

@@ -1,14 +1,19 @@
-import Image from 'next/image'
+import Image from 'next/future/image'
 import { urlForImage } from '../lib/sanity'
 
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <div className="w-12 h-12 relative mr-4">
+      <div className="relative w-12 h-12 mr-4">
         <Image
-          src={urlForImage(picture).height(96).width(96).fit('crop').url()}
-          layout="fill"
+          src={
+            picture?.asset?._ref
+              ? urlForImage(picture).height(96).width(96).fit('crop').url()
+              : 'https://source.unsplash.com/96x96/?face'
+          }
           className="rounded-full"
+          height={96}
+          width={96}
           alt={name}
         />
       </div>

examples/cms-sanity/components/avatar.js

@@ -1,21 +1,24 @@
 import cn from 'classnames'
-import Image from 'next/image'
+import Image from 'next/future/image'
 import Link from 'next/link'
 import { urlForImage } from '../lib/sanity'
 
-export default function CoverImage({ title, slug, image: source }) {
-  const image = source ? (
+export default function CoverImage({ title, slug, image: source, priority }) {
+  const image = source?.asset?._ref ? (
     <div
       className={cn('shadow-small', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
     >
       <Image
+        className="w-full h-auto"
         layout="responsive"
         width={2000}
         height={1000}
         alt={`Cover Image for ${title}`}
         src={urlForImage(source).height(1000).width(2000).url()}
+        sizes="100vw"
+        priority={priority}
       />
     </div>
   ) : (

examples/cms-sanity/components/cover-image.js

@@ -1,6 +1,8 @@
 import { parseISO, format } from 'date-fns'
 
 export default function Date({ dateString }) {
+  if (!dateString) return null
+
   const date = parseISO(dateString)
   return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
 }

examples/cms-sanity/components/date.js

@@ -14,22 +14,22 @@ export default function HeroPost({
   return (
     <section>
       <div className="mb-8 md:mb-16">
-        <CoverImage slug={slug} title={title} image={coverImage} />
+        <CoverImage slug={slug} title={title} image={coverImage} priority />
       </div>
-      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
+      <div className="mb-20 md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 md:mb-28">
         <div>
-          <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
+          <h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
             <Link href={`/posts/${slug}`}>
               <a className="hover:underline">{title}</a>
             </Link>
           </h3>
-          <div className="mb-4 md:mb-0 text-lg">
+          <div className="mb-4 text-lg md:mb-0">
             <Date dateString={date} />
           </div>
         </div>
         <div>
-          <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-          <Avatar name={author.name} picture={author.picture} />
+          <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
+          {author && <Avatar name={author.name} picture={author.picture} />}
         </div>
       </div>
     </section>

examples/cms-sanity/components/hero-post.js

@@ -8,14 +8,14 @@ export default function PostHeader({ title, coverImage, date, author }) {
     <>
       <PostTitle>{title}</PostTitle>
       <div className="hidden md:block md:mb-12">
-        <Avatar name={author.name} picture={author.picture} />
+        {author && <Avatar name={author.name} picture={author.picture} />}
       </div>
       <div className="mb-8 md:mb-16 sm:mx-0">
-        <CoverImage title={title} image={coverImage} />
+        <CoverImage title={title} image={coverImage} priority />
       </div>
       <div className="max-w-2xl mx-auto">
-        <div className="block md:hidden mb-6">
-          <Avatar name={author.name} picture={author.picture} />
+        <div className="block mb-6 md:hidden">
+          {author && <Avatar name={author.name} picture={author.picture} />}
         </div>
         <div className="mb-6 text-lg">
           <Date dateString={date} />

examples/cms-sanity/components/post-header.js

@@ -16,16 +16,16 @@ export default function PostPreview({
       <div className="mb-5">
         <CoverImage slug={slug} title={title} image={coverImage} />
       </div>
-      <h3 className="text-3xl mb-3 leading-snug">
+      <h3 className="mb-3 text-3xl leading-snug">
         <Link href={`/posts/${slug}`}>
           <a className="hover:underline">{title}</a>
         </Link>
       </h3>
-      <div className="text-lg mb-4">
+      <div className="mb-4 text-lg">
         <Date dateString={date} />
       </div>
-      <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
-      <Avatar name={author.name} picture={author.picture} />
+      <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
+      {author && <Avatar name={author.name} picture={author.picture} />}
     </div>
   )
 }

examples/cms-sanity/components/post-preview.js

@@ -2,13 +2,14 @@ export const sanityConfig = {
   // Find your project ID and dataset in `sanity.json` in your studio project
   dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
   projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
-  useCdn: process.env.NODE_ENV !== 'production',
+  useCdn:
+    typeof document !== 'undefined' && process.env.NODE_ENV === 'production',
   // useCdn == true gives fast, cheap responses using a globally distributed cache.
   // When in production the Sanity API is only queried on build-time, and on-demand when responding to webhooks.
   // Thus the data need to be fresh and API response time is less important.
   // When in development/working locally, it's more important to keep costs down as hot reloading can incurr a lot of API calls
   // And every page load calls getStaticProps.
   // To get the lowest latency, lowest cost, and latest data, use the Instant Preview mode
-  apiVersion: '2021-03-25',
+  apiVersion: '2022-03-13',
   // see https://www.sanity.io/docs/api-versioning for how versioning works
 }