-
Notifications
You must be signed in to change notification settings - Fork 27.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* added graphcms * Updated readme and environment variables * Removed gitignore * Updated tailwind config * Some fixes in pages * Updated api endpoints * lint fix * Updated readme * Updated og image * Updated cms examples to include this one * Added example to docs * Added preview demo link * Updated step Co-authored-by: Luis Alvarez <[email protected]>
- Loading branch information
Showing
58 changed files
with
991 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
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,4 @@ | ||
| GRAPHCMS_PROJECT_API= | ||
| GRAPHCMS_PROD_AUTH_TOKEN= | ||
| GRAPHCMS_DEV_AUTH_TOKEN= | ||
| GRAPHCMS_PREVIEW_SECRET= |
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,122 @@ | ||
| # A statically generated blog example using Next.js and GraphCMS | ||
|
|
||
| This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [GraphCMS](https://www.graphcms.com/) as the data source. | ||
|
|
||
| ## Demo | ||
|
|
||
| - **Live**: [https://next-blog-graphcms.now.sh/](https://next-blog-graphcms.now.sh/) | ||
| - **Preview Mode**: [https://next-blog-graphcms.now.sh/api/preview...](https://next-blog-graphcms.now.sh/api/preview?secret=PHHsT9YmZjHxjxuzt8Jie2XkieME&slug=technical-seo-with-graphcms) | ||
|
|
||
| ### [https://next-blog-graphcms.now.sh/](https://next-blog-graphcms.now.sh/) | ||
|
|
||
| ### Related examples | ||
|
|
||
| - [WordPress](/examples/cms-wordpress) | ||
| - [DatoCMS](/examples/cms-datocms) | ||
| - [Sanity](/examples/cms-sanity) | ||
| - [TakeShape](/examples/cms-takeshape) | ||
| - [Prismic](/examples/cms-prismic) | ||
| - [Contentful](/examples/cms-contentful) | ||
| - [Strapi](/examples/cms-strapi) | ||
| - [Agility CMS](/examples/cms-agilitycms) | ||
| - [Cosmic](/examples/cms-cosmic) | ||
| - [ButterCMS](/examples/cms-buttercms) | ||
| - [Storyblok](/examples/cms-storyblok) | ||
| - [Blog Starter](/examples/blog-starter) | ||
|
|
||
| ## Deploy your own | ||
|
|
||
| Once you have access to [the environment variables you'll need](#step-3-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
|
|
||
| [](https://vercel.com/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms&env=GRAPHCMS_PROJECT_API,GRAPHCMS_PROD_AUTH_TOKEN,GRAPHCMS_DEV_AUTH_TOKEN,GRAPHCMS_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20GraphCMS&envLink=https://vercel.link/cms-graphcms-env) | ||
|
|
||
| ## 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-graphcms cms-graphcms-app | ||
| # or | ||
| yarn create next-app --example cms-graphcms cms-graphcms-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-graphcms | ||
| cd cms-graphcms | ||
| ``` | ||
|
|
||
| ## Configuration | ||
|
|
||
| ### Step 1. Create an account and a project in GraphCMS | ||
|
|
||
| First, [create an account in GraphCMS](https://app.graphcms.com). | ||
|
|
||
| ### Step 2. Create a new GraphCMS project | ||
|
|
||
| After creating an account, create a new project from the **Blog Starter template** - be sure to include the example content. | ||
|
|
||
| ### Step 3. Set up environment variables | ||
|
|
||
| Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git): | ||
|
|
||
| ```bash | ||
| cp .env.local.example .env.local | ||
| ``` | ||
|
|
||
| Inside your project dashboard, navigate to **Settings > API Access page**. | ||
|
|
||
| Then set each variable in `.env.local`: | ||
|
|
||
| - `GRAPHCMS_PROJECT_API`: Set it to the API endpoint under **Endpoints**, at the top of the page. | ||
| - `GRAPHCMS_PROD_AUTH_TOKEN`: Copy the `NEXT_EXAMPLE_CMS_GCMS_PROD_AUTH_TOKEN` token under **Existing tokens**, at the bottom of the page. This will only query content that is published. | ||
| - `GRAPHCMS_DEV_AUTH_TOKEN`: Copy the `NEXT_EXAMPLE_CMS_GCMS_DEV_AUTH_TOKEN` token under **Existing tokens**, at the bottom of the page. This will only query content that is in draft. | ||
| - `GRAPHCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode). | ||
|
|
||
| ### Step 4. 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 5. Try preview mode | ||
|
|
||
| In GraphCMS, go to one of the posts in your project and: | ||
|
|
||
| - **Update the title**. For example, you can add `[Draft]` in front of the title. | ||
| - After you edit the document save the article as a draft, but **DO NOT** click **Publish**. By doing this, the post will be in the draft stage. | ||
|
|
||
| Now, if you go to the post page on localhost, you won't see the updated title. However, if you use **Preview Mode**, you'll be able to see the change ([Documentation](/docs/advanced-features/preview-mode.md)). | ||
|
|
||
| To view the preview, transform the url to the following format: `http://localhost:3000/api/preview?secret=<YOUR_SECRET_TOKEN>&slug=<SLUG_TO_PREVIEW>` where `<YOUR_SECRET_TOKEN>` is the same secret you defined in the `.env.local` file and `<SLUG_TO_PREVIEW>` is the slug of one of the posts you want to preview. | ||
|
|
||
| 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. | ||
|
|
||
| ### Step 6. Deploy on Vercel | ||
|
|
||
| You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
|
||
| #### Deploy Your Local Project | ||
|
|
||
| To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example). | ||
|
|
||
| **Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. | ||
|
|
||
| #### Deploy from Our Template | ||
|
|
||
| Alternatively, you can deploy using our template by clicking on the Deploy button below. | ||
|
|
||
| [](https://vercel.com/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms&env=GRAPHCMS_PROJECT_API,GRAPHCMS_PROD_AUTH_TOKEN,GRAPHCMS_DEV_AUTH_TOKEN,GRAPHCMS_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20GraphCMS&envLink=https://vercel.link/cms-graphcms-env) |
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 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,8 @@ | ||
| export default function Avatar({ name, picture }) { | ||
| return ( | ||
| <div className="flex items-center"> | ||
| <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} /> | ||
| <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,28 @@ | ||
| import cn from 'classnames' | ||
| import Link from 'next/link' | ||
|
|
||
| export default function CoverImage({ title, url, slug }) { | ||
| const image = ( | ||
| <img | ||
| width={2000} | ||
| height={1000} | ||
| alt={`Cover Image for ${title}`} | ||
| className={cn('shadow-small', { | ||
| 'hover:shadow-medium transition-shadow duration-200': slug, | ||
| })} | ||
| src={url} | ||
| /> | ||
| ) | ||
|
|
||
| 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,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> | ||
| } |
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,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 slug={slug} title={title} url={coverImage.url} /> | ||
| </div> | ||
| <div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 md:mb-28"> | ||
| <div> | ||
| <h3 className="mb-4 text-4xl leading-tight lg:text-6xl"> | ||
| <Link as={`/posts/${slug}`} href="/posts/[slug]"> | ||
| <a className="hover:underline">{title}</a> | ||
| </Link> | ||
| </h3> | ||
| <div className="mb-4 text-lg md:mb-0"> | ||
| <Date dateString={date} /> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <p className="mb-4 text-lg leading-relaxed">{excerpt}</p> | ||
| <Avatar name={author.name} picture={author.picture.url} /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ) | ||
| } |
Oops, something went wrong.