0c7217ba8f
## 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.
39 lines
972 B
JavaScript
39 lines
972 B
JavaScript
import cn from 'classnames'
|
|
import Image from 'next/future/image'
|
|
import Link from 'next/link'
|
|
import { urlForImage } from '../lib/sanity'
|
|
|
|
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>
|
|
) : (
|
|
<div style={{ paddingTop: '50%', backgroundColor: '#ddd' }} />
|
|
)
|
|
|
|
return (
|
|
<div className="sm:mx-0">
|
|
{slug ? (
|
|
<Link href={`/posts/${slug}`}>
|
|
<a aria-label={title}>{image}</a>
|
|
</Link>
|
|
) : (
|
|
image
|
|
)}
|
|
</div>
|
|
)
|
|
}
|