From c59d24055d35c374d051d703a2a0cbf1dd8e2da3 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 10 Apr 2020 12:41:09 +0200 Subject: [PATCH] Add Prismic Example (#10897) * Add Prismic Example * Update package.json * Update constants * Remove react-datocms * Add Preview Mode for Prismic * Add support for Preview Mode * Delete author.jpg * Delete image.jpg * Fixes and readme updates * Fixed issues with preview mode * Updated preview mode steps * Added more posts * Updated readme * Updated readme * Added demo URL * Added related examples links * Added example to docs Co-authored-by: Shu Uesugi Co-authored-by: Luis Alvarez --- docs/advanced-features/preview-mode.md | 1 + docs/basic-features/data-fetching.md | 1 + docs/basic-features/pages.md | 1 + examples/blog-starter/README.md | 1 + examples/cms-datocms/README.md | 1 + examples/cms-prismic/.env.example | 2 + examples/cms-prismic/.gitignore | 2 + examples/cms-prismic/README.md | 159 +++++++++++++++++ examples/cms-prismic/components/alert.js | 42 +++++ examples/cms-prismic/components/avatar.js | 12 ++ examples/cms-prismic/components/container.js | 3 + .../cms-prismic/components/cover-image.js | 25 +++ examples/cms-prismic/components/date.js | 7 + examples/cms-prismic/components/footer.js | 30 ++++ examples/cms-prismic/components/header.js | 12 ++ examples/cms-prismic/components/hero-post.js | 44 +++++ examples/cms-prismic/components/intro.js | 28 +++ examples/cms-prismic/components/layout.js | 16 ++ .../components/markdown-styles.module.css | 18 ++ examples/cms-prismic/components/meta.js | 42 +++++ .../cms-prismic/components/more-stories.js | 24 +++ examples/cms-prismic/components/post-body.js | 12 ++ .../cms-prismic/components/post-header.js | 27 +++ .../cms-prismic/components/post-preview.js | 38 ++++ examples/cms-prismic/components/post-title.js | 7 + .../components/section-separator.js | 3 + examples/cms-prismic/lib/api.js | 164 ++++++++++++++++++ examples/cms-prismic/lib/constants.js | 5 + examples/cms-prismic/next.config.js | 10 ++ examples/cms-prismic/now.json | 12 ++ examples/cms-prismic/package.json | 25 +++ examples/cms-prismic/pages/_app.js | 7 + examples/cms-prismic/pages/_document.js | 15 ++ .../cms-prismic/pages/api/exit-preview.js | 8 + examples/cms-prismic/pages/api/preview.js | 38 ++++ examples/cms-prismic/pages/index.js | 43 +++++ examples/cms-prismic/pages/posts/[slug].js | 73 ++++++++ examples/cms-prismic/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-prismic/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-prismic/styles/index.css | 5 + examples/cms-prismic/tailwind.config.js | 32 ++++ examples/cms-sanity/README.md | 1 + examples/cms-takeshape/README.md | 1 + 52 files changed, 1076 insertions(+) create mode 100644 examples/cms-prismic/.env.example create mode 100644 examples/cms-prismic/.gitignore create mode 100644 examples/cms-prismic/README.md create mode 100644 examples/cms-prismic/components/alert.js create mode 100644 examples/cms-prismic/components/avatar.js create mode 100644 examples/cms-prismic/components/container.js create mode 100644 examples/cms-prismic/components/cover-image.js create mode 100644 examples/cms-prismic/components/date.js create mode 100644 examples/cms-prismic/components/footer.js create mode 100644 examples/cms-prismic/components/header.js create mode 100644 examples/cms-prismic/components/hero-post.js create mode 100644 examples/cms-prismic/components/intro.js create mode 100644 examples/cms-prismic/components/layout.js create mode 100644 examples/cms-prismic/components/markdown-styles.module.css create mode 100644 examples/cms-prismic/components/meta.js create mode 100644 examples/cms-prismic/components/more-stories.js create mode 100644 examples/cms-prismic/components/post-body.js create mode 100644 examples/cms-prismic/components/post-header.js create mode 100644 examples/cms-prismic/components/post-preview.js create mode 100644 examples/cms-prismic/components/post-title.js create mode 100644 examples/cms-prismic/components/section-separator.js create mode 100644 examples/cms-prismic/lib/api.js create mode 100644 examples/cms-prismic/lib/constants.js create mode 100644 examples/cms-prismic/next.config.js create mode 100644 examples/cms-prismic/now.json create mode 100644 examples/cms-prismic/package.json create mode 100644 examples/cms-prismic/pages/_app.js create mode 100644 examples/cms-prismic/pages/_document.js create mode 100644 examples/cms-prismic/pages/api/exit-preview.js create mode 100644 examples/cms-prismic/pages/api/preview.js create mode 100644 examples/cms-prismic/pages/index.js create mode 100644 examples/cms-prismic/pages/posts/[slug].js create mode 100644 examples/cms-prismic/postcss.config.js create mode 100644 examples/cms-prismic/public/favicon/android-chrome-192x192.png create mode 100644 examples/cms-prismic/public/favicon/android-chrome-512x512.png create mode 100644 examples/cms-prismic/public/favicon/apple-touch-icon.png create mode 100644 examples/cms-prismic/public/favicon/browserconfig.xml create mode 100644 examples/cms-prismic/public/favicon/favicon-16x16.png create mode 100644 examples/cms-prismic/public/favicon/favicon-32x32.png create mode 100644 examples/cms-prismic/public/favicon/favicon.ico create mode 100644 examples/cms-prismic/public/favicon/mstile-150x150.png create mode 100644 examples/cms-prismic/public/favicon/safari-pinned-tab.svg create mode 100644 examples/cms-prismic/public/favicon/site.webmanifest create mode 100644 examples/cms-prismic/styles/index.css create mode 100644 examples/cms-prismic/tailwind.config.js diff --git a/docs/advanced-features/preview-mode.md b/docs/advanced-features/preview-mode.md index 2e7fd264cc503..d5cc52607c57d 100644 --- a/docs/advanced-features/preview-mode.md +++ b/docs/advanced-features/preview-mode.md @@ -156,6 +156,7 @@ 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) ([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/)) +- [Prismic Example](https://github.com/zeit/next.js/tree/canary/examples/cms-prismic) ([Demo](https://next-blog-prismic.now.sh/)) ## More Details diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md index b1a0a6d5256da..0138d67c44599 100644 --- a/docs/basic-features/data-fetching.md +++ b/docs/basic-features/data-fetching.md @@ -491,6 +491,7 @@ 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) ([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/)) +- [Prismic Example](https://github.com/zeit/next.js/tree/canary/examples/cms-prismic) ([Demo](https://next-blog-prismic.now.sh/)) ## Learn more diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md index efcefc736c567..8dbeac23f5191 100644 --- a/docs/basic-features/pages.md +++ b/docs/basic-features/pages.md @@ -250,6 +250,7 @@ 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) ([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/)) +- [Prismic Example](https://github.com/zeit/next.js/tree/canary/examples/cms-prismic) ([Demo](https://next-blog-prismic.now.sh/)) ## Learn more diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md index 577ecf4abb2e7..76b4acf2353fa 100644 --- a/examples/blog-starter/README.md +++ b/examples/blog-starter/README.md @@ -15,6 +15,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) +- [Prismic](/examples/cms-prismic) ## How to use diff --git a/examples/cms-datocms/README.md b/examples/cms-datocms/README.md index 0af603d6d5948..94b6a3bb441f8 100644 --- a/examples/cms-datocms/README.md +++ b/examples/cms-datocms/README.md @@ -11,6 +11,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) +- [Prismic](/examples/cms-prismic) ## How to use diff --git a/examples/cms-prismic/.env.example b/examples/cms-prismic/.env.example new file mode 100644 index 0000000000000..9a1df9cd1ad86 --- /dev/null +++ b/examples/cms-prismic/.env.example @@ -0,0 +1,2 @@ +NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN= +NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME= \ No newline at end of file diff --git a/examples/cms-prismic/.gitignore b/examples/cms-prismic/.gitignore new file mode 100644 index 0000000000000..5900fa96e8d3e --- /dev/null +++ b/examples/cms-prismic/.gitignore @@ -0,0 +1,2 @@ +.env +.now \ No newline at end of file diff --git a/examples/cms-prismic/README.md b/examples/cms-prismic/README.md new file mode 100644 index 0000000000000..df5c6c168a454 --- /dev/null +++ b/examples/cms-prismic/README.md @@ -0,0 +1,159 @@ +# A statically generated blog example using Next.js and Prismic + +This example showcases Next.js's [Static Generation](/docs/basic-features/pages.md) feature using [Prismic](https://prismic.io/) as the data source. + +## Demo + +### [https://next-blog-prismic.now.sh/](https://next-blog-prismic.now.sh/) + +### Related examples + +- [Blog Starter](/examples/blog-starter) +- [DatoCMS](/examples/cms-datocms) +- [TakeShape](/examples/cms-takeshape) +- [Sanity](/examples/cms-sanity) + +## 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-prismic cms-prismic-app +# or +yarn create next-app --example cms-prismic cms-prismic-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-prismic +cd cms-prismic +``` + +## Configuration + +### Step 1. Create an account and a repository on Prismic + +First, [create an account on Prismic](https://prismic.io/). + +After creating an account, create a **repository** from the [dashboard](https://prismic.io/dashboard/) and assign to it any name of your liking. + +### Step 2. Create an `author` type + +From the repository page, create a new **custom type**: + +- The name should be `author`. + +Next, add these fields (you don't have to modify the settings): + +- `name` - **Key Text** field +- `picture` - **Image** field + +Save the type and continue. + +### Step 3. Create a `post` type + +From the repository page, create a new **custom type**: + +- The name should be `post`. + +Next, add these fields (you don't have to modify the settings unless specified): + +- `title` - **Title** field +- `content` - **Rich Text** field +- `excerpt` - **Key Text** field +- `coverimage` - **Image** field +- `date` - **Date** field +- `author` - **Content relationship** field, you may also add `author` to the **Constraint to custom type** option to only accept documents from the `author` type. +- `slug` - **UID** field. + +Save the type and continue. + +### Step 4. Populate Content + +Go to the **Content** page, it's in the menu at the top left, then click on **Create new** and select the **author** type: + +- You just need **1 author document**. +- 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 document. + +- We recommend creating at least **2 Post documents**. +- Use dummy data for the text. +- You can write markdown for the **content** field. +- For images, you can download them from [Unsplash](https://unsplash.com/). +- Pick the **author** you created earlier. + +**Important:** For each document, you need to click **Publish** after saving. If not, the document will be in the draft state. + +### Step 5. Set up environment variables + +Follow the instructions in [this post](https://intercom.help/prismicio/en/articles/1036153-generating-an-access-token) to generate a new access 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_PRISMIC_API_TOKEN` should be the **Permanent access token** you just created +- `NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME` is the name of your repository (the one in the URL) + +Your `.env` file should look like this: + +```bash +NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN=... +NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME=... +``` + +### 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 your repository page, go to **Settings**, click on **Previews** and then **Create a New Preview** for development, fill the form like so: + +- **Site Name**: may be anything, like `development` +- **Domain of Your Application**: `http://localhost:3000` +- **Link Resolver**: `/api/preview` + +Once saved, 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 draft state. +- Right next to the **Publish** button you should see the **Preview** button, displayed with an eye icon. Click on it! + +You should now be able to see the updated title. To exit the preview mode, you can click on **Click here to exit preview mode** at the top of the page. + +### 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 `` and `` with the corresponding strings in `.env`: + +```bash +now secrets add next_example_cms_prismic_api_token +now secrets add next_example_cms_prismic_repository_name +``` + +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. diff --git a/examples/cms-prismic/components/alert.js b/examples/cms-prismic/components/alert.js new file mode 100644 index 0000000000000..3530e66e59c8d --- /dev/null +++ b/examples/cms-prismic/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 ( +
+ +
+ {preview ? ( + <> + This is page is a preview.{' '} + + Click here + {' '} + to exit preview mode. + + ) : ( + <> + The source code for this blog is{' '} + + available on GitHub + + . + + )} +
+ +
+ ) +} diff --git a/examples/cms-prismic/components/avatar.js b/examples/cms-prismic/components/avatar.js new file mode 100644 index 0000000000000..50847843ff60d --- /dev/null +++ b/examples/cms-prismic/components/avatar.js @@ -0,0 +1,12 @@ +export default function Avatar({ name, picture }) { + return ( +
+ {name[0].text} +
{name}
+
+ ) +} diff --git a/examples/cms-prismic/components/container.js b/examples/cms-prismic/components/container.js new file mode 100644 index 0000000000000..fc1c29dfb0747 --- /dev/null +++ b/examples/cms-prismic/components/container.js @@ -0,0 +1,3 @@ +export default function Container({ children }) { + return
{children}
+} diff --git a/examples/cms-prismic/components/cover-image.js b/examples/cms-prismic/components/cover-image.js new file mode 100644 index 0000000000000..3263aaa0eed82 --- /dev/null +++ b/examples/cms-prismic/components/cover-image.js @@ -0,0 +1,25 @@ +import cn from 'classnames' +import Link from 'next/link' + +export default function CoverImage({ title, url, slug }) { + const image = ( + {`Cover + ) + return ( +
+ {slug ? ( + + {image} + + ) : ( + image + )} +
+ ) +} diff --git a/examples/cms-prismic/components/date.js b/examples/cms-prismic/components/date.js new file mode 100644 index 0000000000000..4a9b9e4f8efbd --- /dev/null +++ b/examples/cms-prismic/components/date.js @@ -0,0 +1,7 @@ +import { format } from 'date-fns' +import { Date as PrismicDate } from 'prismic-reactjs' + +export default function Date({ dateString }) { + const date = PrismicDate(dateString) + return +} diff --git a/examples/cms-prismic/components/footer.js b/examples/cms-prismic/components/footer.js new file mode 100644 index 0000000000000..dbde8ff306efd --- /dev/null +++ b/examples/cms-prismic/components/footer.js @@ -0,0 +1,30 @@ +import Container from './container' +import { EXAMPLE_PATH } from '../lib/constants' + +export default function Footer() { + return ( + + ) +} diff --git a/examples/cms-prismic/components/header.js b/examples/cms-prismic/components/header.js new file mode 100644 index 0000000000000..562e7e3eebb6a --- /dev/null +++ b/examples/cms-prismic/components/header.js @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Header() { + return ( +

+ + Blog + + . +

+ ) +} diff --git a/examples/cms-prismic/components/hero-post.js b/examples/cms-prismic/components/hero-post.js new file mode 100644 index 0000000000000..4a7a3fd7897ed --- /dev/null +++ b/examples/cms-prismic/components/hero-post.js @@ -0,0 +1,44 @@ +import Link from 'next/link' +import { RichText } from 'prismic-reactjs' +import Avatar from '../components/avatar' +import Date from '../components/date' +import CoverImage from '../components/cover-image' + +export default function HeroPost({ + title, + coverImage, + date, + excerpt, + author, + slug, +}) { + return ( +
+
+ +
+
+
+

+ + + + + +

+
+ +
+
+
+

{excerpt}

+ {author && } +
+
+
+ ) +} diff --git a/examples/cms-prismic/components/intro.js b/examples/cms-prismic/components/intro.js new file mode 100644 index 0000000000000..5931b3c5961bd --- /dev/null +++ b/examples/cms-prismic/components/intro.js @@ -0,0 +1,28 @@ +import { CMS_NAME, CMS_URL } from '../lib/constants' + +export default function Intro() { + return ( +
+

+ Blog. +

+

+ A statically generated blog example using{' '} + + Next.js + {' '} + and{' '} + + {CMS_NAME} + + . +

+
+ ) +} diff --git a/examples/cms-prismic/components/layout.js b/examples/cms-prismic/components/layout.js new file mode 100644 index 0000000000000..99d95353131e0 --- /dev/null +++ b/examples/cms-prismic/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 ( + <> + +
+ +
{children}
+
+