From 71ff34dbf2cf9b8ea07a561f9d7301a49881aec1 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Thu, 12 Mar 2020 22:16:45 -0700
Subject: [PATCH 01/11] TakeShape Example

---
 docs/advanced-features/preview-mode.md        |   1 +
 docs/basic-features/data-fetching.md          |   1 +
 docs/basic-features/pages.md                  |   1 +
 examples/cms-takeshape/.env.example           |   3 +
 examples/cms-takeshape/.gitignore             |   3 +
 examples/cms-takeshape/README.md              |   0
 examples/cms-takeshape/components/alert.js    |  42 ++++++
 examples/cms-takeshape/components/avatar.js   |  20 +++
 .../cms-takeshape/components/container.js     |   3 +
 .../cms-takeshape/components/cover-image.js   |  30 ++++
 examples/cms-takeshape/components/date.js     |   6 +
 examples/cms-takeshape/components/footer.js   |  30 ++++
 examples/cms-takeshape/components/header.js   |  12 ++
 .../cms-takeshape/components/hero-post.js     |  37 +++++
 examples/cms-takeshape/components/intro.js    |  28 ++++
 examples/cms-takeshape/components/layout.js   |  16 +++
 .../components/markdown-styles.module.css     |  18 +++
 examples/cms-takeshape/components/meta.js     |  42 ++++++
 .../cms-takeshape/components/more-stories.js  |  24 ++++
 .../cms-takeshape/components/post-body.js     |  12 ++
 .../cms-takeshape/components/post-header.js   |  26 ++++
 .../cms-takeshape/components/post-preview.js  |  31 ++++
 .../cms-takeshape/components/post-title.js    |   7 +
 .../components/section-separator.js           |   3 +
 examples/cms-takeshape/lib/api.js             | 136 ++++++++++++++++++
 examples/cms-takeshape/lib/constants.js       |   5 +
 examples/cms-takeshape/lib/markdownToHtml.js  |   9 ++
 examples/cms-takeshape/next.config.js         |  10 ++
 examples/cms-takeshape/now.json               |  13 ++
 examples/cms-takeshape/package.json           |  26 ++++
 examples/cms-takeshape/pages/_app.js          |   7 +
 examples/cms-takeshape/pages/_document.js     |  15 ++
 .../cms-takeshape/pages/api/exit-preview.js   |   8 ++
 examples/cms-takeshape/pages/api/preview.js   |  29 ++++
 examples/cms-takeshape/pages/index.js         |  43 ++++++
 examples/cms-takeshape/pages/posts/[slug].js  |  88 ++++++++++++
 examples/cms-takeshape/postcss.config.js      |  18 +++
 .../public/favicon/android-chrome-192x192.png | Bin 0 -> 4795 bytes
 .../public/favicon/android-chrome-512x512.png | Bin 0 -> 14640 bytes
 .../public/favicon/apple-touch-icon.png       | Bin 0 -> 1327 bytes
 .../public/favicon/browserconfig.xml          |   9 ++
 .../public/favicon/favicon-16x16.png          | Bin 0 -> 595 bytes
 .../public/favicon/favicon-32x32.png          | Bin 0 -> 880 bytes
 .../cms-takeshape/public/favicon/favicon.ico  | Bin 0 -> 15086 bytes
 .../public/favicon/mstile-150x150.png         | Bin 0 -> 3567 bytes
 .../public/favicon/safari-pinned-tab.svg      |  33 +++++
 .../public/favicon/site.webmanifest           |  19 +++
 examples/cms-takeshape/styles/index.css       |   5 +
 examples/cms-takeshape/tailwind.config.js     |  32 +++++
 49 files changed, 901 insertions(+)
 create mode 100644 examples/cms-takeshape/.env.example
 create mode 100644 examples/cms-takeshape/.gitignore
 create mode 100644 examples/cms-takeshape/README.md
 create mode 100644 examples/cms-takeshape/components/alert.js
 create mode 100644 examples/cms-takeshape/components/avatar.js
 create mode 100644 examples/cms-takeshape/components/container.js
 create mode 100644 examples/cms-takeshape/components/cover-image.js
 create mode 100644 examples/cms-takeshape/components/date.js
 create mode 100644 examples/cms-takeshape/components/footer.js
 create mode 100644 examples/cms-takeshape/components/header.js
 create mode 100644 examples/cms-takeshape/components/hero-post.js
 create mode 100644 examples/cms-takeshape/components/intro.js
 create mode 100644 examples/cms-takeshape/components/layout.js
 create mode 100644 examples/cms-takeshape/components/markdown-styles.module.css
 create mode 100644 examples/cms-takeshape/components/meta.js
 create mode 100644 examples/cms-takeshape/components/more-stories.js
 create mode 100644 examples/cms-takeshape/components/post-body.js
 create mode 100644 examples/cms-takeshape/components/post-header.js
 create mode 100644 examples/cms-takeshape/components/post-preview.js
 create mode 100644 examples/cms-takeshape/components/post-title.js
 create mode 100644 examples/cms-takeshape/components/section-separator.js
 create mode 100644 examples/cms-takeshape/lib/api.js
 create mode 100644 examples/cms-takeshape/lib/constants.js
 create mode 100644 examples/cms-takeshape/lib/markdownToHtml.js
 create mode 100644 examples/cms-takeshape/next.config.js
 create mode 100644 examples/cms-takeshape/now.json
 create mode 100644 examples/cms-takeshape/package.json
 create mode 100644 examples/cms-takeshape/pages/_app.js
 create mode 100644 examples/cms-takeshape/pages/_document.js
 create mode 100644 examples/cms-takeshape/pages/api/exit-preview.js
 create mode 100644 examples/cms-takeshape/pages/api/preview.js
 create mode 100644 examples/cms-takeshape/pages/index.js
 create mode 100644 examples/cms-takeshape/pages/posts/[slug].js
 create mode 100644 examples/cms-takeshape/postcss.config.js
 create mode 100644 examples/cms-takeshape/public/favicon/android-chrome-192x192.png
 create mode 100644 examples/cms-takeshape/public/favicon/android-chrome-512x512.png
 create mode 100644 examples/cms-takeshape/public/favicon/apple-touch-icon.png
 create mode 100644 examples/cms-takeshape/public/favicon/browserconfig.xml
 create mode 100644 examples/cms-takeshape/public/favicon/favicon-16x16.png
 create mode 100644 examples/cms-takeshape/public/favicon/favicon-32x32.png
 create mode 100644 examples/cms-takeshape/public/favicon/favicon.ico
 create mode 100644 examples/cms-takeshape/public/favicon/mstile-150x150.png
 create mode 100644 examples/cms-takeshape/public/favicon/safari-pinned-tab.svg
 create mode 100644 examples/cms-takeshape/public/favicon/site.webmanifest
 create mode 100644 examples/cms-takeshape/styles/index.css
 create mode 100644 examples/cms-takeshape/tailwind.config.js

diff --git a/docs/advanced-features/preview-mode.md b/docs/advanced-features/preview-mode.md
index a5ef1e901e069b2..f47f88b3ba505f7 100644
--- a/docs/advanced-features/preview-mode.md
+++ b/docs/advanced-features/preview-mode.md
@@ -154,6 +154,7 @@ https://<your-site>/api/preview?secret=<token>&slug=<path>
 Take a look at the following examples to learn more:
 
 - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
 
 ## More Details
 
diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md
index c3f5053cd529f5c..995499c890433a5 100644
--- a/docs/basic-features/data-fetching.md
+++ b/docs/basic-features/data-fetching.md
@@ -429,6 +429,7 @@ function Profile() {
 Take a look at the following examples to learn more:
 
 - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
 
 ## Learn more
 
diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md
index 01142aee742dbe7..9c4c7bb4d023c4f 100644
--- a/docs/basic-features/pages.md
+++ b/docs/basic-features/pages.md
@@ -247,6 +247,7 @@ We've discussed two forms of pre-rendering for Next.js.
 Take a look at the following examples to learn more:
 
 - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
 
 ## Learn more
 
diff --git a/examples/cms-takeshape/.env.example b/examples/cms-takeshape/.env.example
new file mode 100644
index 000000000000000..fce2c3ec20dfffc
--- /dev/null
+++ b/examples/cms-takeshape/.env.example
@@ -0,0 +1,3 @@
+NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID=
+NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY=
+NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET=
\ No newline at end of file
diff --git a/examples/cms-takeshape/.gitignore b/examples/cms-takeshape/.gitignore
new file mode 100644
index 000000000000000..38f38049bf111e2
--- /dev/null
+++ b/examples/cms-takeshape/.gitignore
@@ -0,0 +1,3 @@
+.env
+.now
+.next
\ No newline at end of file
diff --git a/examples/cms-takeshape/README.md b/examples/cms-takeshape/README.md
new file mode 100644
index 000000000000000..e69de29bb2d1d64
diff --git a/examples/cms-takeshape/components/alert.js b/examples/cms-takeshape/components/alert.js
new file mode 100644
index 000000000000000..3530e66e59c8d35
--- /dev/null
+++ b/examples/cms-takeshape/components/alert.js
@@ -0,0 +1,42 @@
+import Container from './container'
+import cn from 'classnames'
+import { EXAMPLE_PATH } from '../lib/constants'
+
+export default function Alert({ preview }) {
+  return (
+    <div
+      className={cn('border-b', {
+        'bg-accent-7 border-accent-7 text-white': preview,
+        'bg-accent-1 border-accent-2': !preview,
+      })}
+    >
+      <Container>
+        <div className="py-2 text-center text-sm">
+          {preview ? (
+            <>
+              This is page is a preview.{' '}
+              <a
+                href="/api/exit-preview"
+                className="underline hover:text-cyan duration-200 transition-colors"
+              >
+                Click here
+              </a>{' '}
+              to exit preview mode.
+            </>
+          ) : (
+            <>
+              The source code for this blog is{' '}
+              <a
+                href={`https://github.com/zeit/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
+                className="underline hover:text-success duration-200 transition-colors"
+              >
+                available on GitHub
+              </a>
+              .
+            </>
+          )}
+        </div>
+      </Container>
+    </div>
+  )
+}
diff --git a/examples/cms-takeshape/components/avatar.js b/examples/cms-takeshape/components/avatar.js
new file mode 100644
index 000000000000000..a5df334c51526c5
--- /dev/null
+++ b/examples/cms-takeshape/components/avatar.js
@@ -0,0 +1,20 @@
+import { getImageUrl } from 'takeshape-routing'
+
+export default function Avatar({ name, picture }) {
+  return (
+    <div className="flex items-center">
+      <img
+        src={getImageUrl(picture.path, {
+          fm: 'jpg',
+          fit: 'crop',
+          w: 100,
+          h: 100,
+          sat: -100,
+        })}
+        className="w-12 h-12 rounded-full mr-4"
+        alt={name}
+      />
+      <div className="text-xl font-bold">{name}</div>
+    </div>
+  )
+}
diff --git a/examples/cms-takeshape/components/container.js b/examples/cms-takeshape/components/container.js
new file mode 100644
index 000000000000000..fc1c29dfb074756
--- /dev/null
+++ b/examples/cms-takeshape/components/container.js
@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+  return <div className="container mx-auto px-5">{children}</div>
+}
diff --git a/examples/cms-takeshape/components/cover-image.js b/examples/cms-takeshape/components/cover-image.js
new file mode 100644
index 000000000000000..b048c0e20ebda36
--- /dev/null
+++ b/examples/cms-takeshape/components/cover-image.js
@@ -0,0 +1,30 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import { getImageUrl } from 'takeshape-routing'
+
+export default function CoverImage({ title, coverImage, slug }) {
+  const image = (
+    <img
+      src={getImageUrl(coverImage.path, {
+        fm: 'jpg',
+        fit: 'crop',
+        w: 2000,
+        h: 1000,
+      })}
+      className={cn('shadow-small', {
+        'hover:shadow-medium transition-shadow duration-200': slug,
+      })}
+    />
+  )
+  return (
+    <div className="-mx-5 sm:mx-0">
+      {slug ? (
+        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+          <a aria-label={title}>{image}</a>
+        </Link>
+      ) : (
+        image
+      )}
+    </div>
+  )
+}
diff --git a/examples/cms-takeshape/components/date.js b/examples/cms-takeshape/components/date.js
new file mode 100644
index 000000000000000..eac5681378bfd4f
--- /dev/null
+++ b/examples/cms-takeshape/components/date.js
@@ -0,0 +1,6 @@
+import { parseISO, format } from 'date-fns'
+
+export default function Date({ dateString }) {
+  const date = parseISO(dateString)
+  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+}
diff --git a/examples/cms-takeshape/components/footer.js b/examples/cms-takeshape/components/footer.js
new file mode 100644
index 000000000000000..dbde8ff306efdbf
--- /dev/null
+++ b/examples/cms-takeshape/components/footer.js
@@ -0,0 +1,30 @@
+import Container from './container'
+import { EXAMPLE_PATH } from '../lib/constants'
+
+export default function Footer() {
+  return (
+    <footer className="bg-accent-1 border-t border-accent-2">
+      <Container>
+        <div className="py-28 flex flex-col lg:flex-row items-center">
+          <h3 className="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
+            Statically Generated with Next.js.
+          </h3>
+          <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
+            <a
+              href="https://nextjs.org/docs/basic-features/pages"
+              className="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0"
+            >
+              Read Documentation
+            </a>
+            <a
+              href={`https://github.com/zeit/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
+              className="mx-3 font-bold hover:underline"
+            >
+              View on GitHub
+            </a>
+          </div>
+        </div>
+      </Container>
+    </footer>
+  )
+}
diff --git a/examples/cms-takeshape/components/header.js b/examples/cms-takeshape/components/header.js
new file mode 100644
index 000000000000000..562e7e3eebb6a00
--- /dev/null
+++ b/examples/cms-takeshape/components/header.js
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+  return (
+    <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
+      <Link href="/">
+        <a className="hover:underline">Blog</a>
+      </Link>
+      .
+    </h2>
+  )
+}
diff --git a/examples/cms-takeshape/components/hero-post.js b/examples/cms-takeshape/components/hero-post.js
new file mode 100644
index 000000000000000..4a8e37bc724c5c8
--- /dev/null
+++ b/examples/cms-takeshape/components/hero-post.js
@@ -0,0 +1,37 @@
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from '../components/cover-image'
+import Link from 'next/link'
+
+export default function HeroPost({
+  title,
+  coverImage,
+  date,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <section>
+      <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>
+          <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
+            <Link as={`/posts/${slug}`} href="/posts/[slug]">
+              <a className="hover:underline">{title}</a>
+            </Link>
+          </h3>
+          <div className="mb-4 md:mb-0 text-lg">
+            <Date dateString={date} />
+          </div>
+        </div>
+        <div>
+          <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+          <Avatar name={author.name} picture={author.picture} />
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/examples/cms-takeshape/components/intro.js b/examples/cms-takeshape/components/intro.js
new file mode 100644
index 000000000000000..5931b3c5961bdbb
--- /dev/null
+++ b/examples/cms-takeshape/components/intro.js
@@ -0,0 +1,28 @@
+import { CMS_NAME, CMS_URL } from '../lib/constants'
+
+export default function Intro() {
+  return (
+    <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
+      <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
+        Blog.
+      </h1>
+      <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
+        A statically generated blog example using{' '}
+        <a
+          href="https://nextjs.org/"
+          className="underline hover:text-success duration-200 transition-colors"
+        >
+          Next.js
+        </a>{' '}
+        and{' '}
+        <a
+          href={CMS_URL}
+          className="underline hover:text-success duration-200 transition-colors"
+        >
+          {CMS_NAME}
+        </a>
+        .
+      </h4>
+    </section>
+  )
+}
diff --git a/examples/cms-takeshape/components/layout.js b/examples/cms-takeshape/components/layout.js
new file mode 100644
index 000000000000000..99d95353131e0fa
--- /dev/null
+++ b/examples/cms-takeshape/components/layout.js
@@ -0,0 +1,16 @@
+import Alert from '../components/alert'
+import Footer from '../components/footer'
+import Meta from '../components/meta'
+
+export default function Layout({ preview, children }) {
+  return (
+    <>
+      <Meta />
+      <div className="min-h-screen">
+        <Alert preview={preview} />
+        <main>{children}</main>
+      </div>
+      <Footer />
+    </>
+  )
+}
diff --git a/examples/cms-takeshape/components/markdown-styles.module.css b/examples/cms-takeshape/components/markdown-styles.module.css
new file mode 100644
index 000000000000000..95d4f8b04172d6a
--- /dev/null
+++ b/examples/cms-takeshape/components/markdown-styles.module.css
@@ -0,0 +1,18 @@
+.markdown {
+  @apply text-lg leading-relaxed;
+}
+
+.markdown p,
+.markdown ul,
+.markdown ol,
+.markdown blockquote {
+  @apply my-6;
+}
+
+.markdown h2 {
+  @apply text-3xl mt-12 mb-4 leading-snug;
+}
+
+.markdown h3 {
+  @apply text-2xl mt-8 mb-4 leading-snug;
+}
diff --git a/examples/cms-takeshape/components/meta.js b/examples/cms-takeshape/components/meta.js
new file mode 100644
index 000000000000000..d9c48d5831e134a
--- /dev/null
+++ b/examples/cms-takeshape/components/meta.js
@@ -0,0 +1,42 @@
+import Head from 'next/head'
+import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+
+export default function Meta() {
+  return (
+    <Head>
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/favicon/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/favicon/site.webmanifest" />
+      <link
+        rel="mask-icon"
+        href="/favicon/safari-pinned-tab.svg"
+        color="#000000"
+      />
+      <link rel="shortcut icon" href="/favicon/favicon.ico" />
+      <meta name="msapplication-TileColor" content="#000000" />
+      <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+      <meta name="theme-color" content="#000" />
+      <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
+      <meta
+        name="description"
+        content={`A statically generated blog example using Next.js and ${CMS_NAME}.`}
+      />
+      <meta property="og:image" content={HOME_OG_IMAGE_URL} />
+    </Head>
+  )
+}
diff --git a/examples/cms-takeshape/components/more-stories.js b/examples/cms-takeshape/components/more-stories.js
new file mode 100644
index 000000000000000..c4c1bf7dfa50345
--- /dev/null
+++ b/examples/cms-takeshape/components/more-stories.js
@@ -0,0 +1,24 @@
+import PostPreview from '../components/post-preview'
+
+export default function MoreStories({ posts }) {
+  return (
+    <section>
+      <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">
+        {posts.map(post => (
+          <PostPreview
+            key={post.slug}
+            title={post.title}
+            coverImage={post.coverImage}
+            date={post.date}
+            author={post.author}
+            slug={post.slug}
+            excerpt={post.excerpt}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/examples/cms-takeshape/components/post-body.js b/examples/cms-takeshape/components/post-body.js
new file mode 100644
index 000000000000000..4cc2bb52bcceff5
--- /dev/null
+++ b/examples/cms-takeshape/components/post-body.js
@@ -0,0 +1,12 @@
+import markdownStyles from './markdown-styles.module.css'
+
+export default function PostBody({ content }) {
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div
+        className={markdownStyles['markdown']}
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+    </div>
+  )
+}
diff --git a/examples/cms-takeshape/components/post-header.js b/examples/cms-takeshape/components/post-header.js
new file mode 100644
index 000000000000000..9918f022fc866cd
--- /dev/null
+++ b/examples/cms-takeshape/components/post-header.js
@@ -0,0 +1,26 @@
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from '../components/cover-image'
+import PostTitle from '../components/post-title'
+
+export default function PostHeader({ title, coverImage, date, author }) {
+  return (
+    <>
+      <PostTitle>{title}</PostTitle>
+      <div className="hidden md:block md:mb-12">
+        <Avatar name={author.name} picture={author.picture} />
+      </div>
+      <div className="mb-8 md:mb-16 -mx-5 sm:mx-0">
+        <CoverImage title={title} coverImage={coverImage} />
+      </div>
+      <div className="max-w-2xl mx-auto">
+        <div className="block md:hidden mb-6">
+          <Avatar name={author.name} picture={author.picture} />
+        </div>
+        <div className="mb-6 text-lg">
+          <Date dateString={date} />
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/examples/cms-takeshape/components/post-preview.js b/examples/cms-takeshape/components/post-preview.js
new file mode 100644
index 000000000000000..ca8b6b48ea40131
--- /dev/null
+++ b/examples/cms-takeshape/components/post-preview.js
@@ -0,0 +1,31 @@
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from './cover-image'
+import Link from 'next/link'
+
+export default function PostPreview({
+  title,
+  coverImage,
+  date,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <div>
+      <div className="mb-5">
+        <CoverImage slug={slug} title={title} coverImage={coverImage} />
+      </div>
+      <h3 className="text-3xl mb-3 leading-snug">
+        <Link as={`/posts/${slug}`} href="/posts/[slug]">
+          <a className="hover:underline">{title}</a>
+        </Link>
+      </h3>
+      <div className="text-lg mb-4">
+        <Date dateString={date} />
+      </div>
+      <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+      <Avatar name={author.name} picture={author.picture} />
+    </div>
+  )
+}
diff --git a/examples/cms-takeshape/components/post-title.js b/examples/cms-takeshape/components/post-title.js
new file mode 100644
index 000000000000000..edd8cba65c25760
--- /dev/null
+++ b/examples/cms-takeshape/components/post-title.js
@@ -0,0 +1,7 @@
+export default function PostTitle({ children }) {
+  return (
+    <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+      {children}
+    </h1>
+  )
+}
diff --git a/examples/cms-takeshape/components/section-separator.js b/examples/cms-takeshape/components/section-separator.js
new file mode 100644
index 000000000000000..4ca5c65fdc6ee20
--- /dev/null
+++ b/examples/cms-takeshape/components/section-separator.js
@@ -0,0 +1,3 @@
+export default function SectionSeparator() {
+  return <hr className="border-accent-2 mt-28 mb-24" />
+}
diff --git a/examples/cms-takeshape/lib/api.js b/examples/cms-takeshape/lib/api.js
new file mode 100644
index 000000000000000..0bb6d7655916be1
--- /dev/null
+++ b/examples/cms-takeshape/lib/api.js
@@ -0,0 +1,136 @@
+import fetch from 'isomorphic-unfetch'
+
+const API_URL = `https://api.takeshape.io/project/${process.env.NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID}/graphql`
+const API_KEY = process.env.NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY
+
+async function fetchAPI(query, { variables } = {}) {
+  const res = await fetch(API_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${API_KEY}`,
+    },
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+  })
+
+  const json = await res.json()
+  if (json.errors) {
+    console.error(json.errors)
+    throw new Error('Failed to fetch API')
+  }
+  return json.data
+}
+
+export async function getPreviewPostBySlug(slug) {
+  const data = await fetchAPI(
+    `
+    query PostBySlug($slug: String) {
+      post: getPostList(filter: {term: {slug: $slug}}, size: 1) {
+        items {
+          slug
+        }
+      }
+    }`,
+    {
+      preview: true,
+      variables: {
+        slug,
+      },
+    }
+  )
+  return (data?.post?.items || [])[0]
+}
+
+export async function getAllPostsWithSlug() {
+  const data = await fetchAPI(`
+    {
+      allPosts: getPostList {
+        items {
+          slug
+        }
+      }
+    }
+  `)
+  return data?.allPosts?.items
+}
+
+export async function getAllPostsForHome(preview) {
+  const data = await fetchAPI(
+    `
+    {
+      allPosts: getPostList(sort: { field: "_createdAt", order: "desc" }, size: 20) {
+        items {
+          slug
+          title
+          excerpt
+          date
+          coverImage {
+            path
+          }
+          author {
+            name
+            picture {
+              path
+            }
+          }
+        }
+      }
+    }
+  `,
+    { preview }
+  )
+  return data?.allPosts?.items
+}
+
+export async function getPostAndMorePosts(slug, preview) {
+  const data = await fetchAPI(
+    `
+  query PostBySlug($slug: String) {
+    post: getPostList(filter: {term: {slug: $slug}}, size: 1) {
+      items {
+        title
+        slug
+        content
+        date
+        coverImage {
+          path
+        }
+        author {
+          name
+          picture {
+            path
+          }
+        }
+      }
+    }
+    morePosts: getPostList(sort: { field: "_createdAt", order: "desc" }, size: 3) {
+      items {
+        title
+        slug
+        excerpt
+        date
+        coverImage {
+          path
+        }
+        author {
+          name
+          picture {
+            path
+          }
+        }
+      }
+    }
+  }
+  `,
+    {
+      preview,
+      variables: {
+        slug,
+      },
+    }
+  )
+  return data
+}
diff --git a/examples/cms-takeshape/lib/constants.js b/examples/cms-takeshape/lib/constants.js
new file mode 100644
index 000000000000000..e3a1bbf361f8a87
--- /dev/null
+++ b/examples/cms-takeshape/lib/constants.js
@@ -0,0 +1,5 @@
+export const EXAMPLE_PATH = 'cms-takeshape'
+export const CMS_NAME = 'TakeShape'
+export const CMS_URL = 'https://www.takeshape.io/'
+export const HOME_OG_IMAGE_URL =
+  'https://og-image.now.sh/Next.js%20Blog%20Example%20with%20**TakeShape**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fwww.takeshape.io%2Fandroid-icon-192x192.png&heights=200&heights=200'
diff --git a/examples/cms-takeshape/lib/markdownToHtml.js b/examples/cms-takeshape/lib/markdownToHtml.js
new file mode 100644
index 000000000000000..cc1fe05777c11d8
--- /dev/null
+++ b/examples/cms-takeshape/lib/markdownToHtml.js
@@ -0,0 +1,9 @@
+import remark from 'remark'
+import html from 'remark-html'
+
+export default async function markdownToHtml(markdown) {
+  const result = await remark()
+    .use(html)
+    .processSync(markdown)
+  return result.toString()
+}
diff --git a/examples/cms-takeshape/next.config.js b/examples/cms-takeshape/next.config.js
new file mode 100644
index 000000000000000..5bb43f830c59c3c
--- /dev/null
+++ b/examples/cms-takeshape/next.config.js
@@ -0,0 +1,10 @@
+require('dotenv').config()
+
+module.exports = {
+  env: {
+    NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY:
+      process.env.NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY,
+    NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID:
+      process.env.NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID,
+  },
+}
diff --git a/examples/cms-takeshape/now.json b/examples/cms-takeshape/now.json
new file mode 100644
index 000000000000000..68925e7c9e8b794
--- /dev/null
+++ b/examples/cms-takeshape/now.json
@@ -0,0 +1,13 @@
+{
+  "env": {
+    "NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID": "@next_example_cms_takeshape_project_id",
+    "NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY": "@next_example_cms_takeshape_api_key",
+    "NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET": "@next_example_cms_takeshape_preview_secret"
+  },
+  "build": {
+    "env": {
+      "NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID": "@next_example_cms_takeshape_project_id",
+      "NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY": "@next_example_cms_takeshape_api_key"
+    }
+  }
+}
diff --git a/examples/cms-takeshape/package.json b/examples/cms-takeshape/package.json
new file mode 100644
index 000000000000000..cda425dd4d03d8c
--- /dev/null
+++ b/examples/cms-takeshape/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "cms-takeshape",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "date-fns": "2.10.0",
+    "isomorphic-unfetch": "3.0.0",
+    "next": "9.3.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "remark": "11.0.2",
+    "remark-html": "10.0.0",
+    "takeshape-routing": "4.86.0"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^2.1.0",
+    "dotenv": "8.2.0",
+    "postcss-preset-env": "^6.7.0",
+    "tailwindcss": "^1.2.0"
+  }
+}
diff --git a/examples/cms-takeshape/pages/_app.js b/examples/cms-takeshape/pages/_app.js
new file mode 100644
index 000000000000000..d56d9bf601a906d
--- /dev/null
+++ b/examples/cms-takeshape/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/index.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/examples/cms-takeshape/pages/_document.js b/examples/cms-takeshape/pages/_document.js
new file mode 100644
index 000000000000000..c55951c0d5daff4
--- /dev/null
+++ b/examples/cms-takeshape/pages/_document.js
@@ -0,0 +1,15 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/examples/cms-takeshape/pages/api/exit-preview.js b/examples/cms-takeshape/pages/api/exit-preview.js
new file mode 100644
index 000000000000000..d35f0ff3a71d6cb
--- /dev/null
+++ b/examples/cms-takeshape/pages/api/exit-preview.js
@@ -0,0 +1,8 @@
+export default async (_, res) => {
+  // Exit the current user from "Preview Mode". This function accepts no args.
+  res.clearPreviewData()
+
+  // Redirect the user back to the index page.
+  res.writeHead(307, { Location: '/' })
+  res.end()
+}
diff --git a/examples/cms-takeshape/pages/api/preview.js b/examples/cms-takeshape/pages/api/preview.js
new file mode 100644
index 000000000000000..e47ac6f4d8652a2
--- /dev/null
+++ b/examples/cms-takeshape/pages/api/preview.js
@@ -0,0 +1,29 @@
+import { getPreviewPostBySlug } from '../../lib/api'
+
+export default async (req, res) => {
+  // Check the secret and next parameters
+  // This secret should only be know to this API route and the CMS
+  if (
+    req.query.secret !==
+      process.env.NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET ||
+    !req.query.slug
+  ) {
+    return res.status(401).json({ message: 'Invalid token' })
+  }
+
+  // Fetch the headless CMS to check if the provided `slug` exists
+  const post = await getPreviewPostBySlug(req.query.slug)
+
+  // If the slug doesn't exist prevent preview mode from being enabled
+  if (!post) {
+    return res.status(401).json({ message: 'Invalid slug' })
+  }
+
+  // Enable Preview Mode by setting the cookies
+  res.setPreviewData({})
+
+  // Redirect to the path from the fetched post
+  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+  res.writeHead(307, { Location: `/posts/${post.slug}` })
+  res.end()
+}
diff --git a/examples/cms-takeshape/pages/index.js b/examples/cms-takeshape/pages/index.js
new file mode 100644
index 000000000000000..e789b602ee15a88
--- /dev/null
+++ b/examples/cms-takeshape/pages/index.js
@@ -0,0 +1,43 @@
+import Container from '../components/container'
+import MoreStories from '../components/more-stories'
+import HeroPost from '../components/hero-post'
+import Intro from '../components/intro'
+import Layout from '../components/layout'
+import { getAllPostsForHome } from '../lib/api'
+import Head from 'next/head'
+import { CMS_NAME } from '../lib/constants'
+
+export default function Index({ allPosts }) {
+  const heroPost = allPosts[0]
+  const morePosts = allPosts.slice(1)
+  return (
+    <>
+      <Layout>
+        <Head>
+          <title>Next.js Blog Example with {CMS_NAME}</title>
+        </Head>
+        <Container>
+          <Intro />
+          {heroPost && (
+            <HeroPost
+              title={heroPost.title}
+              coverImage={heroPost.coverImage}
+              date={heroPost.date}
+              author={heroPost.author}
+              slug={heroPost.slug}
+              excerpt={heroPost.excerpt}
+            />
+          )}
+          {morePosts.length > 0 && <MoreStories posts={morePosts} />}
+        </Container>
+      </Layout>
+    </>
+  )
+}
+
+export async function getStaticProps({ preview }) {
+  const allPosts = await getAllPostsForHome(preview)
+  return {
+    props: { allPosts },
+  }
+}
diff --git a/examples/cms-takeshape/pages/posts/[slug].js b/examples/cms-takeshape/pages/posts/[slug].js
new file mode 100644
index 000000000000000..bea27b2691c23b6
--- /dev/null
+++ b/examples/cms-takeshape/pages/posts/[slug].js
@@ -0,0 +1,88 @@
+import { useRouter } from 'next/router'
+import ErrorPage from 'next/error'
+import { getImageUrl } from 'takeshape-routing'
+import Container from '../../components/container'
+import PostBody from '../../components/post-body'
+import MoreStories from '../../components/more-stories'
+import Header from '../../components/header'
+import PostHeader from '../../components/post-header'
+import SectionSeparator from '../../components/section-separator'
+import Layout from '../../components/layout'
+import { getAllPostsWithSlug, getPostAndMorePosts } from '../../lib/api'
+import PostTitle from '../../components/post-title'
+import Head from 'next/head'
+import { CMS_NAME } from '../../lib/constants'
+import markdownToHtml from '../../lib/markdownToHtml'
+
+export default function Post({ post, morePosts, preview }) {
+  const router = useRouter()
+  if (!router.isFallback && !post?.slug) {
+    return <ErrorPage statusCode={404} />
+  }
+  return (
+    <Layout preview={preview}>
+      <Container>
+        <Header />
+        {router.isFallback ? (
+          <PostTitle>Loading…</PostTitle>
+        ) : (
+          <>
+            <article>
+              <Head>
+                <title>
+                  {post.title} | Next.js Blog Example with {CMS_NAME}
+                </title>
+                <meta
+                  property="og:image"
+                  content={getImageUrl(post.coverImage, {
+                    fm: 'jpg',
+                    fit: 'crop',
+                    w: 2000,
+                    h: 1000,
+                  })}
+                />
+              </Head>
+              <PostHeader
+                title={post.title}
+                coverImage={post.coverImage}
+                date={post.date}
+                author={post.author}
+              />
+              <PostBody content={post.content} />
+            </article>
+            <SectionSeparator />
+            {morePosts.length > 0 && <MoreStories posts={morePosts} />}
+          </>
+        )}
+      </Container>
+    </Layout>
+  )
+}
+
+export async function getStaticProps({ params, preview = null }) {
+  const data = await getPostAndMorePosts(params.slug, preview)
+  const content = await markdownToHtml(
+    (data?.post?.items || [])[0]?.content || ''
+  )
+
+  return {
+    props: {
+      preview,
+      post: {
+        ...(data?.post?.items || [])[0],
+        content,
+      },
+      morePosts: data?.morePosts.items
+        .filter(post => post.slug !== params.slug)
+        .slice(0, 2),
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  const allPosts = await getAllPostsWithSlug()
+  return {
+    paths: allPosts?.map(post => `/posts/${post.slug}`) || [],
+    fallback: true,
+  }
+}
diff --git a/examples/cms-takeshape/postcss.config.js b/examples/cms-takeshape/postcss.config.js
new file mode 100644
index 000000000000000..0daed9b0738d9a2
--- /dev/null
+++ b/examples/cms-takeshape/postcss.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+  plugins: [
+    'tailwindcss',
+    process.env.NODE_ENV === 'production'
+      ? [
+          '@fullhuman/postcss-purgecss',
+          {
+            content: [
+              './pages/**/*.{js,jsx,ts,tsx}',
+              './components/**/*.{js,jsx,ts,tsx}',
+            ],
+            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+          },
+        ]
+      : undefined,
+    'postcss-preset-env',
+  ],
+}
diff --git a/examples/cms-takeshape/public/favicon/android-chrome-192x192.png b/examples/cms-takeshape/public/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f07282a59cdadaf579b129d650f588d89bef63e
GIT binary patch
literal 4795
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

literal 0
HcmV?d00001

diff --git a/examples/cms-takeshape/public/favicon/android-chrome-512x512.png b/examples/cms-takeshape/public/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000000000000000000000000000000000000..dbb0faea84049b991417262cb8f14ae08201c443
GIT binary patch
literal 14640
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
DoZ=u`

literal 0
HcmV?d00001

diff --git a/examples/cms-takeshape/public/favicon/apple-touch-icon.png b/examples/cms-takeshape/public/favicon/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f4033b2a8b3521f58b6e7afc4c4c49ea578c8a8
GIT binary patch
literal 1327
zcmeAS@N?(olHy`uVBq!ia0vp^TR@ltNH9n&i+l&9SkfJR9T^xl_H+M9WCijSl0AZa
z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#NP=YDR+ueoXe|!I#{Xiaj
ziKnkC`y&=<4t4b@G6n}37?`hkx;TbZ+<JSf(nBOs;`qn%tJjisFZ)iOFo|!;1V5LT
zeJU=KxVjF#SYY6^q?vD1v=@(3Q`3S4hwYWtv>2Vz+k9Bh>dXd>!!PX4@}1v$=Va~t
zn?bil+n3hf7q6RNKj(Yp^oQO&hSt_Sj6mzLfE6dNT+QNrtF-HoMDefQO`9$`GrN@k
zNtK;GWr~T_lEwW#zt&kk`PG?M`YJXefAh^(eQqTmW{U2K)aDhIeLcm|@mr4k_xX{&
z^DA#Sm#n!Q#&v0xkZ9MrYm2v@wiWH!mcDbZ!;{`?cD?}yQQBPL2D>VoJ@;n3JsiQh
zc<bjd*2S}pW8)Nx+_T@itrWTYW%9pyoS_=K)-?S47qv8?#Pg7_RmJ25eqVS`|EaRF
zx*9w8#e;_Ck}t(OjV@kqjy$7mRU^9GtHjeFd1Yxy&7#>(7yng%{r_*8hEVO<OGS6y
zGwR0iglo(?`@?bd<JhSk`%W!ByE`-08z}U3r}yboidru5oQs}L$=`Brvxdmq?akME
zyG1(ot#RMHVzx<z*y;ci?{&*gKC~CkT-?n(m-)Vo^?VbZ33k6O&Cd|4oa*M!t|@X>
z$o{g<bxZG+6ODJR2;Jf@7OU{}^OwfDV5RsHht-i4g1qv_Uo<m54RVXmkv)5?cEL-=
z=Ouo7|6E*FdbTFYJX)UR*(r(Ig}x@6=PfPV`T6)lM^PiU-`i#TYrH?#o~w*nTyydH
zZP(4AU%o6Wo3?M;6HS4;e?@Yqe7(x<96#-}Snax6lkRF)>*_PV5^mbwTy%cc|C^Dw
zj+AFDd;R)?uHZ30U8P;ocDZ-^udxd<ww?R)e=+y}-n7H>F5lC8S$FEa!YtiwANRfw
zc6Hy?Y4=#`R#A)D`!8a#nF_OxhFy5)mwC@#VYcS$C9l`C^45Hh?s{=%o7!jTn(Ae*
zW9t@Qc@#F~#W}Mx-2UR?@i$()3+?;2G-U7H@RE$(Zw@%rPriNkiI!aKTpg>+9P_u9
zJTKWh{e_USQ{P3_Ny;}_FKul6!@cNR>ZBI}&dX|-vag=F$hqgk*+=&!-bUBh*iZl7
zGWW^<EA!R6_zY7F{?3WkIm=tR{LB;kV>ira+SpJ1{v-FX|0%mZaoHpf3tNtz8fUK`
z@skXE*^w8w{tD}%XV<J&-R~E?o7hpQZks*f+0}b~oqL{i{M+hQ(r(D9FMBoLz3ZKU
zTJQdvVyi2kjVl8W$kjEj5xJY_6Vkc(SLvP?e96Z?9lyq^IB)*R*+x>P)8D6g>Soy2
zFS>9Us5<yd?pj6rxRvXfb%nTtb?41Ldb;MSHyd)!;{3x_Qylh%OLuYuP*}CZHKHUX
zu_V<hxhNG#F&G&bTId>>=o*=a7+6>tTLO``fsvJgL2oTb6N-l1{FKbJO57U$C~U9;
zY6!0ii6{w5ELSKf%1_J8NmVGREJ#(zEGS84V5pe$_!AFDVVH)-DgV=FJf8+JFe`KG
zC36ca3wuu%VHQ?!X)rmQ!mPYGMB(&}D<_VeIU;j}{d9xJ0xvy=SK@*tpPWpm0<B>1
MboFyt=akR{06}d?wEzGB

literal 0
HcmV?d00001

diff --git a/examples/cms-takeshape/public/favicon/browserconfig.xml b/examples/cms-takeshape/public/favicon/browserconfig.xml
new file mode 100644
index 000000000000000..9824d87b11517d0
--- /dev/null
+++ b/examples/cms-takeshape/public/favicon/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicons/mstile-150x150.png"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/examples/cms-takeshape/public/favicon/favicon-16x16.png b/examples/cms-takeshape/public/favicon/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..29deaf6716e7744b24b8d2f94443b50d3acffe68
GIT binary patch
literal 595
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6SkfJR9T^xl_H+M9WCijSl0AZa
z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#NP=YDR+ueoXe|!I#{Xiaj
ziKnkC`y&=<4t4b@G6n~MLO(oR978nD=T6+{bvQtxb^jfYOS`%RMA#j5UMSyS|6pbD
zi;d6k9bZ#^z+(Rks<OK|=gL^^w(54=wMEivxx(>>-)2dl_&J^V`G?Q{pEo#nr8;@~
z`krL*_G;*v!^IjrakA;BEvmm}T6sI&)8w8wxgoVPV2$ltj)nWqZSPSP<9cp)#pk-y
z3!nU3->tb0Uyz+-@SssyAx-@8dugfqY?qVb-(9v$nAvu{N21_p{^`Vs3aO80xy!%&
z$oZzjQ>@>dc#PfLX7k6kor!0-63$vnKbR`q7inF2)PmzwPW<kGh0O{p`c~wBUGc;I
zRo|vxRjc%xH(9;1+v-)%@Pj#NcK5ue&)r>tVW3*#8c~vxSdwa$T$Bo=7>o=IEp!b`
zbdAhI3@ogSErCeez{twLptqKz2}MJ0eoAIqC2kFW6gJoaHH24%M3e+2mMat#<)>xl
zq$-qD7Nja<7L+72FjUNW{E3I7Fib<^l>g~7o=<}qn3cKplDUPIg}o<>FbgZVG?*Mt
wVOHK8qHy}gl@mwK9FaM~e!9V9ftMb`D{;Y+Pfn&&fmSehy85}Sb4q9e02)x*r~m)}

literal 0
HcmV?d00001

diff --git a/examples/cms-takeshape/public/favicon/favicon-32x32.png b/examples/cms-takeshape/public/favicon/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3b4277bf093d204f4088ba46590bc9e6f37bf67
GIT binary patch
literal 880
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE0wix1Z>k4UEa{HEjtmSN`?>!lvVtU&J%W50
z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10f+@+{-G$+Qd;gjJKpuOE
zr>`sfBNk~6b@eGS1_y!iqMj~}As)x)PCc6)94K(Key6_H)~zdg8;|I@2rLO(;bG?z
zv&88`{sbpi5kZkx_Z~U92;G^MrtDPSr1Z{Z$_>33u1k7BO}vhVOI&wNh%niD+%@X$
zZ@)Q_cPr<7PJ1`kQuttQpkKj6ndP1v<bOCeyPn#!^pu)n+Qfw}y=Fxfv!zsxA{;-c
zxQ4}ExVz75;u3kAqfF6_1&Z4u6rQr4-zdX%?_+9_U&So1>jjEhOWtlh|D8oV>EHcW
z2`<~itr`hdERnPRyIxS?X6yERwEJ~uLB~SbPr1@5O?#Bx=6LEzEKE!9dp*_eMU(Ed
zOXYj7Gp6&Iy74^bx!uWbaa8i1;AYbmu2VWbzipE=f6`I4{V1>b0b5hc!z--i9*Rrf
zc~&FA*drwr$HMEyV|ezVK~u}Z``UW*K1{N?ewgD|Z@JAOtM4m~kM0y;b3Sd&eAu1q
z$c$$R0{c=ke$>x>Y&m@gTTSxW-@a09s_U6r8pQY`9`a?bI&<NhQiRcz=90XL?J^Jb
znr)tKjXrCpS-s^`VeQqfzP$OrOqSoDCDfI<-d(%-=o;G^pZJi_NAG_w(fYM!bKGZ(
z+n%Qk&(-c)#CiL^-s+{|?*g+X-K{(&;COSf`>&PJ`<gDbE;;(ut+e;2hg6B;D$T23
zeVFYQamAka6}tBIvh{16UnJdJE?IkN#`~m~cU&K2dB3`Q>$1|x1z#mL#e9}@HJ8bK
zzir;N-}0T6{L6#yK6nF6GpZ%75hW>!C8<`)MX5lF!N|bSLf61V*T_7?z{1Md5{R@7
zjI0a{dTTkFP&DM`r(~v8;@0p-VS^n|LwHq4L`hI$xk5ovep+TuszOO+L8?M#K}j+L
zL&coOpLjS5!!$Hb`JX=H`80@uS(#fenOj&{*n6@Fv#^3ogUR6(X64Nx3a4*eIdSC7
j5t$?GryD#Lc<C{`5*IA_<YYP(Xa$3(tDnm{r-UW|4BKUi

literal 0
HcmV?d00001

diff --git a/examples/cms-takeshape/public/favicon/favicon.ico b/examples/cms-takeshape/public/favicon/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..ea2f437d9db6552726693be6cc2943a32dc5a964
GIT binary patch
literal 15086
zcmdU$X^c%<7ROI1lv$Z)$~+GtJY$|F!80Yq2f;&#Xd>NSTKFL46_E}iL5mO)AEZS|
zhz??kp>#q_Pa+X9S9!)q#7v>f>h;_1zJ2P{J?EY~6zP?$I_K=Y*ZTkWKIiUX?Ol$O
z;bc0!dO3Q{aq`<cPCv(Sa&jWi*^YBp)3WtS{+}y4&fm2_CoQ8U&P-L(jkNoEN%P;D
z>JLhPRsE;xZ>o<~Kd63*DEFk1M;XdugYEZ_Oa-Nh{-%0D^{MKAR3)TR78`8wfiHZP
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

literal 0
HcmV?d00001

diff --git a/examples/cms-takeshape/public/favicon/mstile-150x150.png b/examples/cms-takeshape/public/favicon/mstile-150x150.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2dfd904bf1be62be8351fcbc60a1028269923f0
GIT binary patch
literal 3567
zcmcInc{CK>+aF7ktz>H$OKBn77-29J*`thvDEnAPmaz+EO_-^yW3qe+h3riRLl{PO
zS+Y)z30a1(rVI)1bl$(-Ki)rnfBc?v?|IJid7kHf?&sWd&$&0%>ZS=lk2nti0N^(>
zHM9l**aZGgZcY~RsaaK-<v6|cE%gC_dJOL$*JG?$#@*D~5&($02mm}v1OR@sphw>U
zfKV_1u;u~)Xy*X{Vu3GP;4oH#-R*{nA>b$lGuXk3j)$088XaHcl;FN}DGLPd1OWK5
z%nbEyB4+6e(SbITY~<~L(+oho@I|g;!q;7{Jq6pFrzXYQuYXMtd>Q6&9OvU&?JYT1
zDZ+-8|0O8dsqg0i@|(kcw^|F~a-@%5eqLe#6sfxQnDZPvKGO8r`MUGxE8<)hDGRXh
ztp!xW{{G9Wd9BD{3X1uj8MH}Y#y|Pb&9uS1QJ2H^+cR=c`ajRujbDsdab;e=2)w4C
zl;~YtD2|5r=nDiTY8&9aw70DlK!kM9({|ug_8&kCPYhkNY4jTZosDJPFjSuLT!!h(
z32qbdJqv_}9i$KjajP!N*4|-gIL;XH_lA|m=l-Fd=?|&#5}@^Mzv(?C($=Z4@rn{g
zJ8uiL@Br#~cX3+fPj^Bt_O?l#_G`fQM4>;4nu2F<NSNFmQEc$nw2M-}5s<}tqxOlp
zQ5s-7wjgINH94ALSNxdMO{-o$f46(Ked4~SrP6n-yTy6@RoGW8l+$MXl+Mr*Drq0z
z5#>mJ5Q!6aG0B~$++;KTRRnx;ud8NHT^Dq^EWh*C&S()F|LIW_WKrHS3(~byVir0s
zcd}VUcIuO{);Ln7a3Xt{ovd+b43~TC)tr;X8@aTy35TQK(U;#TUKrRZF<0lXH!A&A
z+pbym{0?6ovDx~gj5$avkZySb-X$}arg(?XO=)PV<41dz=hS7XRPdu0v7#BMZMoGr
ziQL1mO1ZRsLap@XBI4gWv(q=L=s+_kA4U45)_)4JjdRLB^y&DC?j$69-ZWR@^;hZg
zP|x65cMfPPGa#1hpXn4`cYZ64NE;^XD&efxovWP7Y_9Vh+}Zew{cL|js0T0R1;M`H
zjFzC5#mnQxd>Z-?teuW;HNX>29Mr#(E-+d3KT%KGakJz~+NeLg!v)`IzG}VjYm*UT
z3;wcW!MVsj{6kzmP%A9(>1+I<#K}sV+aA%|VIy>X<jlN&I~~hyp%>n~K%<61J%dZ>
zcey7r2Agzw7lO1vGm5THSow)lIn8aGfm)z(!qko;=cYsXTwzj8fmbwFOV;qY<k`Yh
z({B0myxvP-lRwajGyUf%B|~AYzj3Lc`dFACyc{Q4KK2q)VUf9qA$%-yz<|egN;aRi
z`l0vIpLV>sqFnmqG2jYApmlNgxo7Z6=k>h&4;)C^_^wxwFk?m{PW_F?nYn}A`>_i)
zc`6Ux9-vEWRIuUc+Y=hYMWN)d<Qb>=0#s;9NXymts?FK;uD8Xud3$^A**TE9%o%=E
z%dpUjiOIlw%ssq}@`}-~;u!4yyiORXFBI?f59&d(I~4Wjja*b6Q%SLIp~V|@=0UWm
zHq8@S9);&>7bkIS76?cV*vvJK0yVo;b^5BhFQRJw?2Pzb@btUi)6=MZ{J)V)=a|N9
z!UQN}uqQCx)1XfJ*+8)Jy9M*w6X|$e-m!ap<fU)N4g_x#QY_}^e7WQ$yw}<MG-_V{
zlWm_bD_nmu>Z0<SXlkFU^*O!ehqi&KbbK=I8)Zm-f!9RpSn6JJ?Z3BkZz_p!cBs-7
zm|a0;i(FiXk0SAo`$-Sq+j@L;gYujK*-XBD`P1U0YngOK?13s2?l(w5seqC?e_16(
z<cN<bj1%UvtJE6i*PBCCKx~JxpZ0XtWqSjZ!n_nqra-#lK#wIQSdYet!u7kW{rqa|
z{*j9Fye7r1r9Kn&`3@s~M)OO(<vj$2kiTfcQ+}&qHNk{q0W=)mQ8Hq{o$3T-*RiEC
zh#4B@^2|29bdh`BtqYIwFpbS5+0oc8)b?wH`Vpf|FH?HXS$OR%9d0n3;!l$wIdB`_
z6|^fe9N6z726DCpcxxZtAGr!U$|Rf5MJL|e5J_RlVB^`MLWh0Pk%!?L;orHsrT#A3
znvg<v*SQs}fz-|@3o}{Q3U>}+c8#6(SfWtIRw5?V3P#Lv6~-L@t3)nH`WLX{oBN1@
zT~I60@&>yjMQ1aq^lWpb<wWTA*1w4>$8p02JDU}!T?X7~PS7=>{h*E&#K_O2>ZZ_D
z-*`ug8nX*76en^&t-aKk<77}DqknQfCs7HL6itPS#)-r*^f0K4NbQ8yX2=BxiV&+>
z<lbcR@K(?5-Xh&`S$iLvqWvQ!Oa`mm6jgGyAvHzoYvhunB0B1`51La;Xb5Bx(i*+!
z1g(tMby}U5GKZPG0M1K>i4~y?U_jN=Bs+cw)Xxof9UV`J-BPb8VTF=S)ZVRFI@xkj
z+fHa~X%WEU6x(nzvAfCeCcPyrZ+AaoHo^OG`a=#Pp`Gt^{+<PCv$#@Y;c%15;I8N@
zAE8}>-&(I)c10goL$yv`pOt7u7Q{!TiowQn>*5)*6oz;Q|6-}*45DIaAxIS@&GkN>
z9*d#!VYVNyWUrS>k*E5#50{S8C%0X#{LuwzROq0dqjb!(6mLG<@Ha1bZih7O`4fee
zhjo~4{Or8CSoc`pj>}~YB6Mn+B+X)JfUTA5#HB@GPU52>tK4GUY>ry~>!rBJ_;B6Y
z!IdeNg1VfzeZu#fjgz*~t*px#1_xU75Le4~pQP+6BDK?^OE>fO1u?;&I-W~sD{rD(
z#L>Q#y1nhVrO1(=XL8i!7IkqEV;v_SCivp$^rtxLBRk#u0(z@MddEN9oiYYJpC>5^
zZk^a}a;|{iGD^1%Nv@(!1A{EEE+%*B!061O7<hPTC1d^k=<$uFnW-9rIGTp!DVe1d
z0cQpq3&Sz)Sn2ofTZ84r+V^QozR<4-^zZu!=bQQO8qn`ywey4F3EnGXPlBEb1Zjfy
z<EKwEFGw9B-c?j-q!gjBM~y!#iOL;?%@Syh{zd6vzZUG;%(`I3cQUHuizcGBVsPP7
z8$m)~`s4EMWvE0@V#KHMxUoi!Sdk!$1Ic!JfP`jii`rUym6qTa*@mZs?P&4?_59<O
z#zlU+$$KQmzcob9wm6J1taB1C78E|;9t_2;*b6(0(6F6=;tX>N+NY0nA4Vl~QW^8B
zpGVUmIT2j#H;RPe^tr7oy^zsA!;PEXkoUW{QK6$40kg2x>Uv25i^nsospJ&TYUy7!
zK~b1mXE_fHJ<z2_b+Ry`T61Q5ia;jfJ{bpZK7hd2w7TEnw_Kc$4W4kc7lM8$jJOQz
zPH21Z-tyzw+zk9@P+sS<(MSs|M(twZZ;h7S>6$|y9ua)^W1ts>NumKWMf~oISkx0u
zGtE>jSummVp|~hIvtI8{o4oHt1L*?JdT#8)D_r(6(jG=pFLi%YF+ogmV}{F4yXk=P
z&MsdVDMu81-0+ihyhk`07mQu*DkK{=UQz@VVR65Am?ChovD90l)_$zwq;fq)DV?Dn
z;?bOg=&Vy>3^n$uNps8<FnOo3_ayikR`ODrF?%g@vpQO6K)z9D>!VWIokV1<PBOM5
z@vY9<5I=FR>Qohyti8uyoai~Xo#(cb(&OF=oEdk%a(j^pJ-a$6Gc}7LGY3D`MZhQr
zrq4a6jPLKBV*?td(lc(9N6t5eCeoU*pBK2w4984gu~nChJ%A~Laotmr0r_d#an7<;
zP5Nd{iaE1-bp@URNj)^dOsRuHha6wciR2JbD<4g%p7MHGQ0Q`g-%+i{W3HdmY8k<^
z8%eSQ)x3`3NcHZH-42cZNeSOMZgc;_dSYKzcw*^L^@A@>SKyT>Ipw~8rk9t?`X0^;
zV#L*$^UJTMiC((pH6M{p;epXOtp!2M=iz(*R=kcTK0y!^J!=aBzvX>-D3y_Oa48_p
zf&)-s!+OmjN$y!Qo)!zM6~5#dC(cjr_&lvdw~Vq>vxFE<uZto-{5TW2dRGHAb1kMT
z9zMdg?EBsM==qT16za-Xy=NNehQhl%#z&c*hB@`J#ZJ#IhSjB~9w3`-ikf4xiPFiC
zf_1{v`u1P2#MiH0+D)%g7@&jfKUC=F{)godoC5Hc(_qIh+qLPDIV3_%opZ-VD*Tl(
zban}nZ+5TqJWrn&7^{o_GHSq~Zc~qAP7k??ZNa6oCU{I*K|h-F40^3TnEn9vy9D>0
z=kP8|I>kS6yIZvqO43JLtx!sX4gc##syX8L=7p%0Q!@Vhfw>T3WFO+;8iLSv4@R&Y
z00LHpDuJ&kK{Rc^P;E6W)=&ULw87wv81DH0)8HTA;o}+k|2O=RsncUM*hSgchgiFY
z%LE1oc={j_G9i(H2pONi5O)9|;w9||A9s+goLv8{fkCq+YXFBVud+L@kgU*+OkoZo
z8N)|cx;;2#8*O9;rYHJHgCr2?_`oC6VsmA{nwVh74+HgV76rh}=%!(fflK`V03ILD
AfdBvi

literal 0
HcmV?d00001

diff --git a/examples/cms-takeshape/public/favicon/safari-pinned-tab.svg b/examples/cms-takeshape/public/favicon/safari-pinned-tab.svg
new file mode 100644
index 000000000000000..72ab6e050cb113f
--- /dev/null
+++ b/examples/cms-takeshape/public/favicon/safari-pinned-tab.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4785 10234 c-22 -2 -92 -9 -155 -14 -1453 -131 -2814 -915 -3676
+-2120 -480 -670 -787 -1430 -903 -2235 -41 -281 -46 -364 -46 -745 0 -381 5
+-464 46 -745 278 -1921 1645 -3535 3499 -4133 332 -107 682 -180 1080 -224
+155 -17 825 -17 980 0 687 76 1269 246 1843 539 88 45 105 57 93 67 -8 6 -383
+509 -833 1117 l-818 1105 -1025 1517 c-564 834 -1028 1516 -1032 1516 -4 1 -8
+-673 -10 -1496 -3 -1441 -4 -1499 -22 -1533 -26 -49 -46 -69 -88 -91 -32 -16
+-60 -19 -211 -19 l-173 0 -46 29 c-30 19 -52 44 -67 73 l-21 45 2 2005 3 2006
+31 39 c16 21 50 48 74 61 41 20 57 22 230 22 204 0 238 -8 291 -66 15 -16 570
+-852 1234 -1859 664 -1007 1572 -2382 2018 -3057 l810 -1227 41 27 c363 236
+747 572 1051 922 647 743 1064 1649 1204 2615 41 281 46 364 46 745 0 381 -5
+464 -46 745 -278 1921 -1645 3535 -3499 4133 -327 106 -675 179 -1065 223 -96
+10 -757 21 -840 13z m2094 -3094 c48 -24 87 -70 101 -118 8 -26 10 -582 8
+-1835 l-3 -1798 -317 486 -318 486 0 1307 c0 845 4 1320 10 1343 16 56 51 100
+99 126 41 21 56 23 213 23 148 0 174 -2 207 -20z"/>
+<path d="M7843 789 c-35 -22 -46 -37 -15 -20 22 13 58 40 52 41 -3 0 -20 -10
+-37 -21z"/>
+<path d="M7774 744 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
+<path d="M7724 714 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
+<path d="M7674 684 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
+<path d="M7598 644 c-38 -20 -36 -28 2 -9 17 9 30 18 30 20 0 7 -1 6 -32 -11z"/>
+</g>
+</svg>
diff --git a/examples/cms-takeshape/public/favicon/site.webmanifest b/examples/cms-takeshape/public/favicon/site.webmanifest
new file mode 100644
index 000000000000000..a672d9a233c59a1
--- /dev/null
+++ b/examples/cms-takeshape/public/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Next.js",
+  "short_name": "Next.js",
+  "icons": [
+    {
+      "src": "/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone"
+}
diff --git a/examples/cms-takeshape/styles/index.css b/examples/cms-takeshape/styles/index.css
new file mode 100644
index 000000000000000..b63c4592cb2e1e1
--- /dev/null
+++ b/examples/cms-takeshape/styles/index.css
@@ -0,0 +1,5 @@
+/* purgecss start ignore */
+@tailwind base;
+@tailwind components;
+/* purgecss end ignore */
+@tailwind utilities;
diff --git a/examples/cms-takeshape/tailwind.config.js b/examples/cms-takeshape/tailwind.config.js
new file mode 100644
index 000000000000000..9f14db001dd58b8
--- /dev/null
+++ b/examples/cms-takeshape/tailwind.config.js
@@ -0,0 +1,32 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'accent-1': '#FAFAFA',
+        'accent-2': '#EAEAEA',
+        'accent-7': '#333',
+        success: '#0070f3',
+        cyan: '#79FFE1',
+      },
+      spacing: {
+        28: '7rem',
+      },
+      letterSpacing: {
+        tighter: '-.04em',
+      },
+      lineHeight: {
+        tight: 1.2,
+      },
+      fontSize: {
+        '5xl': '2.5rem',
+        '6xl': '2.75rem',
+        '7xl': '4.5rem',
+        '8xl': '6.25rem',
+      },
+      boxShadow: {
+        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
+        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+      },
+    },
+  },
+}

From 21db9d72d25020946ed8db47175246d315726926 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Sun, 15 Mar 2020 15:31:56 -0700
Subject: [PATCH 02/11] Fix preview logic

---
 examples/cms-takeshape/lib/api.js     | 22 +++++++++++++---------
 examples/cms-takeshape/pages/index.js |  8 ++++----
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/examples/cms-takeshape/lib/api.js b/examples/cms-takeshape/lib/api.js
index 0bb6d7655916be1..107113e05ca7106 100644
--- a/examples/cms-takeshape/lib/api.js
+++ b/examples/cms-takeshape/lib/api.js
@@ -28,14 +28,13 @@ export async function getPreviewPostBySlug(slug) {
   const data = await fetchAPI(
     `
     query PostBySlug($slug: String) {
-      post: getPostList(filter: {term: {slug: $slug}}, size: 1) {
+      post: getPostList(filter: {term: {slug: $slug}}, size: 1, onlyEnabled: false) {
         items {
           slug
         }
       }
     }`,
     {
-      preview: true,
       variables: {
         slug,
       },
@@ -60,8 +59,8 @@ export async function getAllPostsWithSlug() {
 export async function getAllPostsForHome(preview) {
   const data = await fetchAPI(
     `
-    {
-      allPosts: getPostList(sort: { field: "_createdAt", order: "desc" }, size: 20) {
+    query AllPosts($onlyEnabled: Boolean) {
+      allPosts: getPostList(sort: { field: "_createdAt", order: "desc" }, size: 20, onlyEnabled: $onlyEnabled) {
         items {
           slug
           title
@@ -80,7 +79,12 @@ export async function getAllPostsForHome(preview) {
       }
     }
   `,
-    { preview }
+    {
+      variables: {
+        onlyEnabled: !preview,
+        preview,
+      },
+    }
   )
   return data?.allPosts?.items
 }
@@ -88,8 +92,8 @@ export async function getAllPostsForHome(preview) {
 export async function getPostAndMorePosts(slug, preview) {
   const data = await fetchAPI(
     `
-  query PostBySlug($slug: String) {
-    post: getPostList(filter: {term: {slug: $slug}}, size: 1) {
+  query PostBySlug($slug: String, $onlyEnabled: Boolean) {
+    post: getPostList(filter: {term: {slug: $slug}}, size: 1, onlyEnabled: $onlyEnabled) {
       items {
         title
         slug
@@ -106,7 +110,7 @@ export async function getPostAndMorePosts(slug, preview) {
         }
       }
     }
-    morePosts: getPostList(sort: { field: "_createdAt", order: "desc" }, size: 3) {
+    morePosts: getPostList(sort: { field: "_createdAt", order: "desc" }, size: 3, onlyEnabled: $onlyEnabled) {
       items {
         title
         slug
@@ -126,9 +130,9 @@ export async function getPostAndMorePosts(slug, preview) {
   }
   `,
     {
-      preview,
       variables: {
         slug,
+        onlyEnabled: !preview,
       },
     }
   )
diff --git a/examples/cms-takeshape/pages/index.js b/examples/cms-takeshape/pages/index.js
index e789b602ee15a88..64b9f90d31eaa39 100644
--- a/examples/cms-takeshape/pages/index.js
+++ b/examples/cms-takeshape/pages/index.js
@@ -7,12 +7,12 @@ import { getAllPostsForHome } from '../lib/api'
 import Head from 'next/head'
 import { CMS_NAME } from '../lib/constants'
 
-export default function Index({ allPosts }) {
+export default function Index({ allPosts, preview }) {
   const heroPost = allPosts[0]
   const morePosts = allPosts.slice(1)
   return (
     <>
-      <Layout>
+      <Layout preview={preview}>
         <Head>
           <title>Next.js Blog Example with {CMS_NAME}</title>
         </Head>
@@ -35,9 +35,9 @@ export default function Index({ allPosts }) {
   )
 }
 
-export async function getStaticProps({ preview }) {
+export async function getStaticProps({ preview = null }) {
   const allPosts = await getAllPostsForHome(preview)
   return {
-    props: { allPosts },
+    props: { allPosts, preview },
   }
 }

From 34a2c910b35ccb0f0d4bee424232d312f16f480a Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Sun, 15 Mar 2020 18:50:41 -0700
Subject: [PATCH 03/11] Update README

---
 examples/cms-takeshape/.env.example |   2 +-
 examples/cms-takeshape/README.md    | 156 ++++++++++++++++++++++++++++
 2 files changed, 157 insertions(+), 1 deletion(-)

diff --git a/examples/cms-takeshape/.env.example b/examples/cms-takeshape/.env.example
index fce2c3ec20dfffc..0be70044571a4c2 100644
--- a/examples/cms-takeshape/.env.example
+++ b/examples/cms-takeshape/.env.example
@@ -1,3 +1,3 @@
-NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID=
 NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY=
+NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID=
 NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET=
\ No newline at end of file
diff --git a/examples/cms-takeshape/README.md b/examples/cms-takeshape/README.md
index e69de29bb2d1d64..cf77f4bb5309f5b 100644
--- a/examples/cms-takeshape/README.md
+++ b/examples/cms-takeshape/README.md
@@ -0,0 +1,156 @@
+# A statically generated blog example using Next.js and TakeShape
+
+This example showcases Next.js's [Static Generation](/docs/basic-features/pages.md) feature using [TakeShape](https://www.takeshape.io/) as the data source.
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npm init next-app --example cms-takeshape cms-takeshape-app
+# or
+yarn create next-app --example cms-takeshape cms-takeshape-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/cms-takeshape
+cd cms-takeshape
+```
+
+## Configuration
+
+### Step 1. Create an account and a project on TakeShape
+
+First, [create an account on TakeShape](https://wwww.takeshape.io).
+
+After creating an account, create a **new project** from the dashboard. You can select a **Blank Project**.
+
+### Step 2. Create an `Author` model
+
+From the project settings page, create a new **content type**.
+
+- The title should be `Author`.
+
+Next, drag these widgets:
+
+- **Single Line** widget: Set the title as **Name**.
+- **Asset** widget: Set the title as **Picture**.
+
+When you’re done, click "Create Content Type".
+
+### Step 3. Create a `Post` model
+
+Click **Add Content Type** again.
+
+- The title should be `Post`.
+
+Next, add these fields (you don't have to modify the settings unless specified):
+
+- **Single Line** widget: Set the title as **Title**.
+- **Markdown** widget: Set the title as **Content**.
+- **Single Line** widget: Set the title as **Excerpt**.
+- **Asset** widget: Set the title as **Cover Image**.
+- **Date** widget: Set the title as **Date**.
+- **Single Line** widget: Set the title as **Slug**.
+- **Relationship** widget: Set the title as **Author**.
+
+When you’re done, click "Create Content Type".
+
+### Step 4. Populate Content
+
+Select **Author** and create a new record.
+
+- You just need **1 Author record**.
+- Use dummy data for the text.
+- For the image, you can download one from [Unsplash](https://unsplash.com/).
+
+When you’re done, make sure to click **Enabled** under **Workflow Status**.
+
+Next, select **Post** and create a new record.
+
+- We recommend creating at least **2 Post records**.
+- Use dummy data for the text.
+- You can write markdown for the **Content** field.
+- For the images, you can download ones from [Unsplash](https://unsplash.com/).
+- Pick the **Author** you created earlier.
+
+When you’re done, make sure to click **Enabled** under **Workflow Status**.
+
+### Step 5. Set up environment variables
+
+From the dropdown next to the project name, click **API Keys**.
+
+Create a new API Key with the **Read** permission.
+
+Next, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git):
+
+```bash
+cp .env.example .env
+```
+
+Then set each variable on `.env`:
+
+- `NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY` should be the API token you just copied.
+- `NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID` should be the project ID, which is a substring in the project page URL: `https://app.takeshape.io/projects/<project-id>/...`
+- `NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md).
+
+Your `.env` file should look like this:
+
+```bash
+NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID=...
+NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY=...
+NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET=...
+```
+
+### Step 6. Run Next.js in development mode
+
+```bash
+npm install
+npm run dev
+
+# or
+
+yarn install
+yarn dev
+```
+
+Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/zeit/next.js/discussions).
+
+### Step 7. Try preview mode
+
+On TakeShape, create a new post like before. But **DO NOT** click **Enabled** under **Workflow Status**.
+
+Now, if you go to `http://localhost:3000/posts/<slug>` (replace `<slug>`), you won’t see the post. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](/docs/advanced-features/preview-mode.md)).
+
+To enable the Preview Mode, go to this URL:
+
+```
+http://localhost:3000/api/preview?secret=<secret>&slug=<slug>
+```
+
+- `<secret>` should be the string you entered for `NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET`.
+- `<slug>` should be the post's `slug` attribute (you can check on TakeShape).
+
+You should now be able to see this post. To exit the preview mode, you can click **Click here to exit preview mode** at the top.
+
+### Step 8. Deploy on ZEIT Now
+
+You can deploy this app to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+To deploy on ZEIT Now, you need to set the environment variables with **Now Secrets** using [Now CLI](https://zeit.co/download) ([Documentation](https://zeit.co/docs/now-cli#commands/secrets)).
+
+Install [Now CLI](https://zeit.co/download), log in to your account from the CLI, and run the following commands to add the environment variables. Replace `<NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY>` and `<NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET>` with the corresponding strings in `.env`.
+
+```
+now secrets add next_example_cms_takeshape_api_key <NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY>
+now secrets add next_example_cms_takeshape_project_id <NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID>
+now secrets add next_example_cms_takeshape_preview_secret <NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET>
+```
+
+Then push the project to GitHub/GitLab/Bitbucket and [import to ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy.

From 48d0c8ea72a9042a8ecca9e0b112b4b8bca305c1 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@zeit.co>
Date: Wed, 18 Mar 2020 12:41:28 -0500
Subject: [PATCH 04/11] Fix broken link

---
 examples/cms-takeshape/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/cms-takeshape/README.md b/examples/cms-takeshape/README.md
index cf77f4bb5309f5b..ba9654021756bd2 100644
--- a/examples/cms-takeshape/README.md
+++ b/examples/cms-takeshape/README.md
@@ -27,7 +27,7 @@ cd cms-takeshape
 
 ### Step 1. Create an account and a project on TakeShape
 
-First, [create an account on TakeShape](https://wwww.takeshape.io).
+First, [create an account on TakeShape](https://www.takeshape.io/).
 
 After creating an account, create a **new project** from the dashboard. You can select a **Blank Project**.
 

From dad6a3c108a27fe352dae2b459454d6e91dedd79 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@zeit.co>
Date: Wed, 18 Mar 2020 13:10:50 -0500
Subject: [PATCH 05/11] Be more clear with the relationship field

---
 examples/cms-takeshape/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/cms-takeshape/README.md b/examples/cms-takeshape/README.md
index ba9654021756bd2..2514bd289ac1c88 100644
--- a/examples/cms-takeshape/README.md
+++ b/examples/cms-takeshape/README.md
@@ -58,7 +58,7 @@ Next, add these fields (you don't have to modify the settings unless specified):
 - **Asset** widget: Set the title as **Cover Image**.
 - **Date** widget: Set the title as **Date**.
 - **Single Line** widget: Set the title as **Slug**.
-- **Relationship** widget: Set the title as **Author**.
+- **Relationship** widget: Set the title as **Author**, then set **Relationship Type** to `Single` and check the `Author` checkbox under **Allowed Content Types**.
 
 When you’re done, click "Create Content Type".
 

From c6a5a5518f7d22c045a9dcf94cfa4371f53bee38 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Mar 2020 11:35:25 -0700
Subject: [PATCH 06/11] Use latest next.js for cms examples

---
 examples/blog-starter/package.json  | 2 +-
 examples/cms-datocms/package.json   | 2 +-
 examples/cms-takeshape/package.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/blog-starter/package.json b/examples/blog-starter/package.json
index 58dca2758b8a006..a88ffcdd58afb61 100644
--- a/examples/blog-starter/package.json
+++ b/examples/blog-starter/package.json
@@ -11,7 +11,7 @@
     "date-fns": "2.10.0",
     "gray-matter": "4.0.2",
     "isomorphic-unfetch": "3.0.0",
-    "next": "9.3.0",
+    "next": "latest",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "remark": "11.0.2",
diff --git a/examples/cms-datocms/package.json b/examples/cms-datocms/package.json
index 8be37cb0d18576a..390585baf52b508 100644
--- a/examples/cms-datocms/package.json
+++ b/examples/cms-datocms/package.json
@@ -10,7 +10,7 @@
     "classnames": "2.2.6",
     "date-fns": "2.10.0",
     "isomorphic-unfetch": "3.0.0",
-    "next": "9.3.0",
+    "next": "latest",
     "react": "^16.13.0",
     "react-datocms": "1.1.0",
     "react-dom": "^16.13.0",
diff --git a/examples/cms-takeshape/package.json b/examples/cms-takeshape/package.json
index cda425dd4d03d8c..00164278fb31ca0 100644
--- a/examples/cms-takeshape/package.json
+++ b/examples/cms-takeshape/package.json
@@ -10,7 +10,7 @@
     "classnames": "2.2.6",
     "date-fns": "2.10.0",
     "isomorphic-unfetch": "3.0.0",
-    "next": "9.3.0",
+    "next": "latest",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "remark": "11.0.2",

From 80b4e007b5620f747196d46cdc5c8ee876886c21 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Mar 2020 16:42:03 -0700
Subject: [PATCH 07/11] Only show enabled items

---
 examples/cms-takeshape/lib/api.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/cms-takeshape/lib/api.js b/examples/cms-takeshape/lib/api.js
index 107113e05ca7106..0d27f1c5cf2dbfb 100644
--- a/examples/cms-takeshape/lib/api.js
+++ b/examples/cms-takeshape/lib/api.js
@@ -93,7 +93,9 @@ export async function getPostAndMorePosts(slug, preview) {
   const data = await fetchAPI(
     `
   query PostBySlug($slug: String, $onlyEnabled: Boolean) {
-    post: getPostList(filter: {term: {slug: $slug}}, size: 1, onlyEnabled: $onlyEnabled) {
+    post: getPostList(filter: { term: {slug: $slug}}, ${
+      preview ? '' : 'where: { _status: { eq: "enabled" } },'
+    } size: 1, onlyEnabled: $onlyEnabled) {
       items {
         title
         slug

From 99dbcaf2ee8ebd946d7f405ace62e4912298e1b1 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Mar 2020 16:47:38 -0700
Subject: [PATCH 08/11] Ignore current slug

---
 examples/cms-takeshape/lib/api.js            | 6 +++++-
 examples/cms-takeshape/pages/posts/[slug].js | 4 +---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/examples/cms-takeshape/lib/api.js b/examples/cms-takeshape/lib/api.js
index 0d27f1c5cf2dbfb..de77ca53e848024 100644
--- a/examples/cms-takeshape/lib/api.js
+++ b/examples/cms-takeshape/lib/api.js
@@ -112,7 +112,11 @@ export async function getPostAndMorePosts(slug, preview) {
         }
       }
     }
-    morePosts: getPostList(sort: { field: "_createdAt", order: "desc" }, size: 3, onlyEnabled: $onlyEnabled) {
+    morePosts: getPostList(
+      filter: { bool: { must_not: { term: {slug: $slug}}}}, , ${
+        preview ? '' : 'where: { _status: { eq: "enabled" } },'
+      }
+      sort: { field: "_createdAt", order: "desc" }, size: 3, onlyEnabled: $onlyEnabled) {
       items {
         title
         slug
diff --git a/examples/cms-takeshape/pages/posts/[slug].js b/examples/cms-takeshape/pages/posts/[slug].js
index bea27b2691c23b6..f9fc7b192481a6d 100644
--- a/examples/cms-takeshape/pages/posts/[slug].js
+++ b/examples/cms-takeshape/pages/posts/[slug].js
@@ -72,9 +72,7 @@ export async function getStaticProps({ params, preview = null }) {
         ...(data?.post?.items || [])[0],
         content,
       },
-      morePosts: data?.morePosts.items
-        .filter(post => post.slug !== params.slug)
-        .slice(0, 2),
+      morePosts: data?.morePosts.items,
     },
   }
 }

From 36202c340c33e0cb996550ab6e418b2281314812 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Thu, 19 Mar 2020 14:42:25 -0700
Subject: [PATCH 09/11] Fix queries

---
 examples/cms-takeshape/lib/api.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/cms-takeshape/lib/api.js b/examples/cms-takeshape/lib/api.js
index de77ca53e848024..92ecbcd9d6d30c8 100644
--- a/examples/cms-takeshape/lib/api.js
+++ b/examples/cms-takeshape/lib/api.js
@@ -60,7 +60,7 @@ export async function getAllPostsForHome(preview) {
   const data = await fetchAPI(
     `
     query AllPosts($onlyEnabled: Boolean) {
-      allPosts: getPostList(sort: { field: "_createdAt", order: "desc" }, size: 20, onlyEnabled: $onlyEnabled) {
+      allPosts: getPostList(sort: { field: "date", order: "desc" }, size: 20, onlyEnabled: $onlyEnabled) {
         items {
           slug
           title
@@ -116,7 +116,7 @@ export async function getPostAndMorePosts(slug, preview) {
       filter: { bool: { must_not: { term: {slug: $slug}}}}, , ${
         preview ? '' : 'where: { _status: { eq: "enabled" } },'
       }
-      sort: { field: "_createdAt", order: "desc" }, size: 3, onlyEnabled: $onlyEnabled) {
+      sort: { field: "date", order: "desc" }, size: 2, onlyEnabled: $onlyEnabled) {
       items {
         title
         slug

From 5fa45e5ff868f81aa240f22aa4bb230cef1fb139 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Thu, 19 Mar 2020 15:22:30 -0700
Subject: [PATCH 10/11] Add takeshape demo

---
 docs/advanced-features/preview-mode.md |  2 +-
 docs/basic-features/data-fetching.md   |  2 +-
 docs/basic-features/pages.md           |  2 +-
 examples/cms-datocms/README.md         |  5 +++--
 examples/cms-sanity/README.md          |  3 ++-
 examples/cms-takeshape/README.md       | 14 ++++++++++++--
 6 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/docs/advanced-features/preview-mode.md b/docs/advanced-features/preview-mode.md
index eb8acc471946aa0..a1d8da4532ccd86 100644
--- a/docs/advanced-features/preview-mode.md
+++ b/docs/advanced-features/preview-mode.md
@@ -154,7 +154,7 @@ https://<your-site>/api/preview?secret=<token>&slug=<path>
 Take a look at the following examples to learn more:
 
 - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/))
-- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
+- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/))
 - [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/))
 
 ## More Details
diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md
index 718d049d4912090..b605b861644c7e2 100644
--- a/docs/basic-features/data-fetching.md
+++ b/docs/basic-features/data-fetching.md
@@ -489,7 +489,7 @@ Take a look at the following examples to learn more:
 
 - [Blog Starter using markdown files](https://github.com/zeit/next.js/tree/canary/examples/blog-starter) ([Demo](https://next-blog-starter.now.sh/))
 - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/))
-- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
+- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/))
 - [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/))
 
 ## Learn more
diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md
index 4640b905ded9b86..b4d908cac197c4d 100644
--- a/docs/basic-features/pages.md
+++ b/docs/basic-features/pages.md
@@ -248,7 +248,7 @@ Take a look at the following examples to learn more:
 
 - [Blog Starter using markdown files](https://github.com/zeit/next.js/tree/canary/examples/blog-starter) ([Demo](https://next-blog-starter.now.sh/))
 - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/))
-- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
+- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/))
 - [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/))
 
 ## Learn more
diff --git a/examples/cms-datocms/README.md b/examples/cms-datocms/README.md
index fe945583f0fc897..0af603d6d59480d 100644
--- a/examples/cms-datocms/README.md
+++ b/examples/cms-datocms/README.md
@@ -10,6 +10,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 
 - [Blog Starter](/examples/blog-starter)
 - [Sanity](/examples/cms-sanity)
+- [TakeShape](/examples/cms-takeshape)
 
 ## How to use
 
@@ -101,7 +102,7 @@ cp .env.example .env
 Then set each variable on `.env`:
 
 - `NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN` should be the API token you just copied.
-- `NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md).
+- `NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
 
 Your `.env` file should look like this:
 
@@ -133,7 +134,7 @@ On DatoCMS, go to one of the posts you've created and:
 
 (If it doesn't become draft, you need to go to the model settings for `Post`, go to **Additional Settings**, and turn on **Enable draft/published system**.)
 
-Now, if you go to the post page on localhost, you won't see the updated title. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](/docs/advanced-features/preview-mode.md)).
+Now, if you go to the post page on localhost, you won't see the updated title. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](https://nextjs.org/docs/advanced-features/preview-mode)).
 
 To enable the Preview Mode, go to this URL:
 
diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md
index 34de358f566bb15..f6c6f526578595e 100644
--- a/examples/cms-sanity/README.md
+++ b/examples/cms-sanity/README.md
@@ -10,6 +10,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 
 - [Blog Starter](/examples/blog-starter)
 - [DatoCMS](/examples/cms-datocms)
+- [TakeShape](/examples/cms-takeshape)
 
 ## How to use
 
@@ -62,7 +63,7 @@ cp .env.example .env
 
 Then set each variable on `.env`:
 
-- `NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md).
+- `NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
 - `NEXT_EXAMPLE_CMS_SANITY_PROJECT_ID`: Get the `projectId` value from the `sanity.json` file created in step 2.
 - `NEXT_EXAMPLE_CMS_SANITY_API_TOKEN`: Copy the API token generated in the previous step.
 
diff --git a/examples/cms-takeshape/README.md b/examples/cms-takeshape/README.md
index 2514bd289ac1c88..eb1467351dff920 100644
--- a/examples/cms-takeshape/README.md
+++ b/examples/cms-takeshape/README.md
@@ -1,6 +1,16 @@
 # A statically generated blog example using Next.js and TakeShape
 
-This example showcases Next.js's [Static Generation](/docs/basic-features/pages.md) feature using [TakeShape](https://www.takeshape.io/) as the data source.
+This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [TakeShape](https://www.takeshape.io/) as the data source.
+
+## Demo
+
+### [https://next-blog-takeshape.now.sh/](https://next-blog-takeshape.now.sh/)
+
+### Related examples
+
+- [Blog Starter](/examples/blog-starter)
+- [DatoCMS](/examples/cms-datocms)
+- [Sanity](/examples/cms-sanity)
 
 ## How to use
 
@@ -98,7 +108,7 @@ Then set each variable on `.env`:
 
 - `NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY` should be the API token you just copied.
 - `NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID` should be the project ID, which is a substring in the project page URL: `https://app.takeshape.io/projects/<project-id>/...`
-- `NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md).
+- `NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
 
 Your `.env` file should look like this:
 

From 8b58e3e7f91c2723e6c85011dbeda8e05fc8f068 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@zeit.co>
Date: Thu, 19 Mar 2020 17:27:48 -0500
Subject: [PATCH 11/11] Added link to blog-starter

---
 examples/blog-starter/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md
index 317abf28ea3393a..577ecf4abb2e7dd 100644
--- a/examples/blog-starter/README.md
+++ b/examples/blog-starter/README.md
@@ -14,6 +14,7 @@ To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) a
 
 - [DatoCMS](/examples/cms-datocms)
 - [Sanity](/examples/cms-sanity)
+- [TakeShape](/examples/cms-takeshape)
 
 ## How to use