DatoCMS Example (#10891)

* Copy cms-datocms

* Update package.json

* Desktop design

* Tablet support

* Mobile styles

* Update titles

* Add article page

* Minor tweaks

* Fix height issue

* Improve text colors

* Extract Alert and Footer components

* Extract avatar

* Add Date

* Extract container

* Fix capitalization

* Make it work with no backend

* Add paragraph styles

* Extract PostPreview

* Extract h2

* Extract more stories

* Refactor into more components

* Update tags

* Add missing key

* Add custom document for lang="" support

* Add dotenv

* Load data for the index page

* Limit posts

* Show post page

* Add markdown processing

* Forgot margin

* Add links

* Remove files and add fallback

* Add og:image

* Add favicon

* Add aria-label

* Fix prerender

* Learn more → read documentation

* Fix links and footer

* Desaturate using imgix

* Add preview secret

* Add preview support

* Fix preview code

* Exit preview mode

* Extract getAllPostsWithSlug

* Extract getAllPostsForHome

* Extract getPreviewPostBySlug

* Extract getPostAndMorePosts

* Extract constants

* Extract markdownToHtml

* Fix markdown styles

* Fix imgix for author

* Add README

* Add links to docs

docs/advanced-features/preview-mode.md

@@ -149,6 +149,12 @@ That’s it! If you access the preview API route (with `secret` and `slug`) from
 https://<your-site>/api/preview?secret=<token>&slug=<path>
 ```
 
+## More Examples
+
+Take a look at the following examples to learn more:
+
+- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+
 ## More Details
 
 ### Clear the preview mode cookies

docs/basic-features/data-fetching.md

@@ -424,6 +424,12 @@ function Profile() {
 
 [Check out the SWR documentation to learn more](https://swr.now.sh/).
 
+## More Examples
+
+Take a look at the following examples to learn more:
+
+- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+
 ## Learn more
 
 We recommend you to read the following sections next:

docs/basic-features/pages.md

@@ -242,6 +242,12 @@ We've discussed two forms of pre-rendering for Next.js.
 - **Static Generation (Recommended):** The HTML is generated at **build time** and will be reused on each request. To make a page use Static Generation, just export the page component, or export `getStaticProps` (and `getStaticPaths` if necessary). It's great for pages that can be pre-rendered ahead of a user's request. You can also use it with Client-side Rendering to bring in additional data.
 - **Server-side Rendering:** The HTML is generated on **each request**. To make a page use Server-side Rendering, export `getServerSideProps`. Because Server-side Rendering results in slower performance than Static Generation, use this only if absolutely necessary.
 
+## More Examples
+
+Take a look at the following examples to learn more:
+
+- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+
 ## Learn more
 
 We recommend you to read the following sections next:

examples/cms-datocms/.env.example

@@ -0,0 +1,2 @@
+NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN=
+NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET=

examples/cms-datocms/.gitignore

@@ -0,0 +1,2 @@
+.env
+.now

examples/cms-datocms/README.md

@@ -0,0 +1,153 @@
+# A statically generated blog example using Next.js and DatoCMS
+
+This example showcases Next.js's [Static Generation](/docs/basic-features/pages.md) feature using [DatoCMS](https://www.datocms.com/) 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-datocms cms-datocms-app
+# or
+yarn create next-app --example cms-datocms cms-datocms-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-datocms
+cd cms-datocms
+```
+
+## Configuration
+
+### Step 1. Create an account and a project on DatoCMS
+
+First, [create an account on DatoCMS](https://datocms.com).
+
+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 setting page, create a new **Model**.
+
+- The name should be `Author`.
+
+Next, add these fields (you don't have to modify the settings):
+
+- `Name` - **Text** field (**Single-line String**)
+- `Picture` - **Media** field (**Single asset**)
+
+### Step 3. Create a `Post` model
+
+From the project setting page, create a new **Model**:
+
+- The name should be `Post`.
+- **Important:** From the "Additional Settings" tab, turn on **Enable draft/published system.** This lets you preview the content.
+
+Next, add these fields (you don't have to modify the settings unless specified):
+
+- `Title` - **Text** field (**Single-line String**)
+- `Content` - **Text** field (**Multiple-paragraph Text**)
+- `Excerpt` - **Text** field (**Single-line String**)
+- `Cover Image` - **Media** field (**Single asset**)
+- `Date` - **Date and time** field (**Date**)
+- `Author` - **Links** field (**Single link**) , and from the "Validations" tab under "Accept only specified model", select **Author**.
+- `Slug` - **SEO** field (**Slug**), and from the "Validations" tab under "Reference field" select **Title**.
+
+### Step 4. Populate Content
+
+From the **Content** menu at the top, 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/).
+
+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.
+
+**Important:** For each post record, you need to click **Publish** after saving. If not, the post will be in the draft state.
+
+### Step 5. Set up environment variables
+
+Go to the **Settings** menu at the top and click **API tokens**.
+
+Then click **Read-only API token** and copy the token.
+
+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_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).
+
+Your `.env` file should look like this:
+
+```bash
+NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN=...
+NEXT_EXAMPLE_CMS_DATOCMS_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 DatoCMS, go to one of the posts you've created and:
+
+- **Update the title**. For example, you can add `[Draft]` in front of the title.
+- Click **Save**, but **DO NOT** click **Publish**. By doing this, the post will be in the draft state.
+
+(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)).
+
+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_DATOCMS_PREVIEW_SECRET`.
+- `<slug>` should be the post's `slug` attribute (you can check on DatoCMS).
+
+You should now be able to see the updated title. 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_DATOCMS_API_TOKEN>` and `<NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET>` with the corresponding strings in `.env`.
+
+```
+now secrets add next_example_cms_datocms_api_token <NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN>
+now secrets add next_example_cms_datocms_preview_secret <NEXT_EXAMPLE_CMS_DATOCMS_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.

examples/cms-datocms/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>
+  )
+}

examples/cms-datocms/components/avatar.js

@@ -0,0 +1,12 @@
+export default function Avatar({ name, picture }) {
+  return (
+    <div className="flex items-center">
+      <img
+        src={picture.url}
+        className="w-12 h-12 rounded-full mr-4"
+        alt={name}
+      />
+      <div className="text-xl font-bold">{name}</div>
+    </div>
+  )
+}

examples/cms-datocms/components/container.js

@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+  return <div className="container mx-auto px-5">{children}</div>
+}

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

@@ -0,0 +1,28 @@
+import { Image } from 'react-datocms'
+import cn from 'classnames'
+import Link from 'next/link'
+
+export default function CoverImage({ title, responsiveImage, slug }) {
+  const image = (
+    <Image
+      data={{
+        ...responsiveImage,
+        alt: `Cover Image for ${title}`,
+      }}
+      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>
+  )
+}

examples/cms-datocms/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>
+}

examples/cms-datocms/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>
+  )
+}

examples/cms-datocms/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>
+  )
+}

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

@@ -0,0 +1,41 @@
+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}
+          responsiveImage={coverImage.responsiveImage}
+          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>
+  )
+}