-
Notifications
You must be signed in to change notification settings - Fork 27.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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 <[email protected]> Co-authored-by: Luis Alvarez <[email protected]>
- Loading branch information
3 people
authored
Apr 10, 2020
1 parent
ab4ba04
commit c59d240
Showing
52 changed files
with
1,076 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN= | ||
| NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME= |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| .env | ||
| .now |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 `<NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN>` and `<NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME>` with the corresponding strings in `.env`: | ||
|
|
||
| ```bash | ||
| now secrets add next_example_cms_prismic_api_token <NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN> | ||
| now secrets add next_example_cms_prismic_repository_name <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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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[0].text} | ||
| /> | ||
| <div className="text-xl font-bold">{name}</div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function Container({ children }) { | ||
| return <div className="container mx-auto px-5">{children}</div> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import cn from 'classnames' | ||
| import Link from 'next/link' | ||
|
|
||
| export default function CoverImage({ title, url, slug }) { | ||
| const image = ( | ||
| <img | ||
| src={url} | ||
| 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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <section> | ||
| <div className="mb-8 md:mb-16"> | ||
| <CoverImage | ||
| title={RichText.asText(title)} | ||
| slug={slug} | ||
| url={coverImage.url} | ||
| /> | ||
| </div> | ||
| <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28"> | ||
| <div> | ||
| <h3 className="mb-4 text-4xl lg:text-6xl leading-tight"> | ||
| <Link as={`/posts/${slug}`} href="/posts/[slug]"> | ||
| <a className="hover:underline"> | ||
| <RichText render={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> | ||
| {author && <Avatar name={author.name} picture={author.picture} />} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ) | ||
| } |
Oops, something went wrong.