Merge remote-tracking branch 'origin/lydiahallie/update-cms-wordpress…

…-example' into lydiahallie/update-cms-wordpress-example

docs/advanced-features/static-html-export.md

@@ -27,7 +27,7 @@ Update your build script in `package.json` to use `next export`:
 
 Running `npm run build` will generate an `out` directory.
 
-`next export` builds an HTML version of your app. During `next build`, [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) and [`getStaticPaths`](/docs/basic-features/data-fetching/get-static-paths.md) will generate an HTML file for each page in your `pages` directory (or more for [dynamic routes](/docs/routing/dynamic-routes.md). Then, `next export` will copy the already exported files into the correct directory. `getInitialProps` will generate the HTML files during `next export` instead of `next build`.
+`next export` builds an HTML version of your app. During `next build`, [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) and [`getStaticPaths`](/docs/basic-features/data-fetching/get-static-paths.md) will generate an HTML file for each page in your `pages` directory (or more for [dynamic routes](/docs/routing/dynamic-routes.md)). Then, `next export` will copy the already exported files into the correct directory. `getInitialProps` will generate the HTML files during `next export` instead of `next build`.
 
 For more advanced scenarios, you can define a parameter called [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md) in your [`next.config.js`](/docs/api-reference/next.config.js/introduction.md) file to configure exactly which pages will be generated.
 

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

@@ -20,7 +20,7 @@ export default function HeroPost({
           slug={slug}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-agilitycms/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ title, posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         {title}
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

examples/cms-builder-io/components/hero-post.js

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} slug={slug} url={coverImage} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-builder-io/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.data.slug}

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-buttercms/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} slug={slug} url={coverImage.url} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-contentful/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-cosmic/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -20,7 +20,7 @@ export default function HeroPost({
           slug={slug}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-datocms/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -18,7 +18,7 @@ export default function HeroPost({
           <CoverImage title={title} coverImage={coverImage} slug={slug} />
         )}
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={slug}>

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

@@ -22,7 +22,7 @@ export default function HeroPost({
           height={1216}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-ghost/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} url={coverImage.url} />
       </div>
-      <div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 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 leading-tight lg:text-6xl">
             <Link href={`/posts/${slug}`}>

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} src={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-kontent/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} url={coverImage} />
       </div>
-      <div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 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 leading-tight lg:text-6xl">
             <Link href={`/posts/${slug}`}>

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

@@ -21,7 +21,7 @@ export default function HeroPost({
           url={coverImage.url}
         />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-prismic/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map(({ node }) => (
           <PostPreview
             key={node._meta.uid}

examples/cms-sanity/README.md

@@ -2,6 +2,11 @@
 
 This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Sanity](https://www.sanity.io/) as the data source.
 
+You'll get:
+
+- Sanity Studio running on localhost
+- Sub-second as-you-type previews in Next.js
+
 ## Demo
 
 ### [https://next-blog-sanity.vercel.app/](https://next-blog-sanity.vercel.app/)
@@ -85,11 +90,30 @@ SANITY_API_TOKEN=...
 SANITY_PREVIEW_SECRET=...
 ```
 
-### Step 5. Prepare project for previewing
+### Step 5. Prepare the project for previewing
+
+5.1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`.
+
+5.2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit).
+
+5.3. Open your studio's sanity.json, and add the following entry to the parts-array:
 
-Go to https://www.sanity.io/docs/preview-content-on-site and follow the three steps on that page. It should be done inside the studio project generated in Step 2.
+```diff
+{
+  "plugins": [
+    "@sanity/production-preview"
+  ],
+  "parts": [
+    //...
++   {
++     "implements": "part:@sanity/production-preview/resolve-production-url",
++     "path": "./resolveProductionUrl.js"
++   }
+  ]
+}
+```
 
-When you get to the second step about creating a file called `resolveProductionUrl.js`, copy the following instead:
+Now, go back to `resolveProductionUrl.js` and add a function that will receive the full document that was selected for previewing:
 
 ```js
 const previewSecret = 'MY_SECRET' // Copy the string you used for SANITY_PREVIEW_SECRET
@@ -100,6 +124,8 @@ export default function resolveProductionUrl(document) {
 }
 ```
 
+For more information on live previewing check the [full guide.](https://www.sanity.io/guides/nextjs-live-preview)
+
 ### Step 6. Copy the schema file
 
 After initializing your Sanity studio project there should be a `schemas` folder.
@@ -168,3 +194,8 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [
 Alternatively, you can deploy using our template by clicking on the Deploy button below.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&project-name=cms-sanity&repository-name=cms-sanity&env=NEXT_PUBLIC_SANITY_PROJECT_ID,SANITY_API_TOKEN,SANITY_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
+
+#### Next steps
+
+- Invalidate your routes in production [on-demand](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta) with GROQ powered webhooks
+- Mount your preview inside the Sanity Studio for comfortable side-by-side editing

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

@@ -5,15 +5,19 @@ import { urlForImage } from '../lib/sanity'
 
 export default function CoverImage({ title, slug, image: source }) {
   const image = source ? (
-    <Image
-      width={2000}
-      height={1000}
-      alt={`Cover Image for ${title}`}
-      src={urlForImage(source).height(1000).width(2000).url()}
+    <div
       className={cn('shadow-small', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
-    />
+    >
+      <Image
+        layout="responsive"
+        width={2000}
+        height={1000}
+        alt={`Cover Image for ${title}`}
+        src={urlForImage(source).height(1000).width(2000).url()}
+      />
+    </div>
   ) : (
     <div style={{ paddingTop: '50%', backgroundColor: '#ddd' }} />
   )

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage slug={slug} title={title} image={coverImage} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-sanity/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -1,10 +1,10 @@
 import markdownStyles from './markdown-styles.module.css'
-import BlockContent from '@sanity/block-content-to-react'
+import { PortableText } from '@portabletext/react'
 
 export default function PostBody({ content }) {
   return (
-    <div className="max-w-2xl mx-auto">
-      <BlockContent blocks={content} className={markdownStyles.markdown} />
+    <div className={`max-w-2xl mx-auto ${markdownStyles.markdown}`}>
+      <PortableText value={content} />
     </div>
   )
 }

examples/cms-sanity/lib/sanity.js

@@ -1,7 +1,5 @@
-import {
-  createImageUrlBuilder,
-  createPreviewSubscriptionHook,
-} from 'next-sanity'
+import createImageUrlBuilder from '@sanity/image-url'
+import { createPreviewSubscriptionHook } from 'next-sanity'
 import { sanityConfig } from './config'
 
 export const imageBuilder = createImageUrlBuilder(sanityConfig)

examples/cms-sanity/package.json

@@ -6,17 +6,18 @@
     "start": "next start"
   },
   "dependencies": {
-    "@sanity/block-content-to-react": "2.0.7",
+    "@portabletext/react": "^1.0.3",
+    "@sanity/image-url": "^1.0.1",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "next": "latest",
-    "next-sanity": "0.3.0",
+    "next-sanity": "0.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
-    "tailwindcss": "^3.0.15"
+    "postcss": "8.4.7",
+    "tailwindcss": "^3.0.23"
   }
 }

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-storyblok/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} url={coverImage.url} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>

examples/cms-strapi/components/more-stories.js

@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

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

@@ -16,7 +16,7 @@ export default function HeroPost({
       <div className="mb-8 md:mb-16">
         <CoverImage title={title} coverImage={coverImage} slug={slug} />
       </div>
-      <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
             <Link href={`/posts/${slug}`}>