forked from vercel/next.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Examples] Add WordPress Blog (vercel#13194)
* Added most of the stuff * Updated pages * Removed unrequired deps * API fixes * Fixes fixes and updated readme * Updated og image * Added demo and links to example * Updated packages * update name. bump dependencies * Renamed .env.example to .env.local.example * Added node_modules to .gitignore * use recommended config * enable absolute import/alias support * remove jsconfig.json * allow HTML entities in post titles * add underline to content links * add basic ul & ol styles * add code block styles * add basic text alignment * add basic image alignment styles * adjust pre font-size and figcaption * indent ul,ol lists to line up with grid * add basic button styles * add basic file styles * add basic blockquote style * add basic audio styles * add h4 and enhance blockquote styles * add basic cover block styles * add basic verse styles * add basic two-column block styles * add tags * add categories * Only ignore .vercel The rest is injected by create-next-app * now → vercel * npm init → npx * Wordsmith * Wordsmith * Wordsmith * Wordsmith * Improve issue link * Wordsmith Co-authored-by: Greg Rickaby <[email protected]> Co-authored-by: Joe Haddad <[email protected]> Co-authored-by: Shu Uesugi <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Loading branch information
5 people
authored
Jun 1, 2020
1 parent
b124ed2
commit ad24a0c
Showing
59 changed files
with
1,366 additions
and
8 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| NEXT_EXAMPLE_CMS_WORDPRESS_API_URL= | ||
|
|
||
| # Only required if you want to enable preview mode | ||
| # NEXT_EXAMPLE_CMS_WORDPRESS_AUTH_REFRESH_TOKEN= | ||
| # NEXT_EXAMPLE_CMS_WORDPRESS_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 @@ | ||
| .vercel |
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,206 @@ | ||
| # A statically generated blog example using Next.js and WordPress | ||
|
|
||
| This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [WordPress](https://wordpress.org) as the data source. | ||
|
|
||
| ## Demo | ||
|
|
||
| ### [https://next-blog-wordpress.now.sh](https://next-blog-wordpress.now.sh) | ||
|
|
||
| ### Related examples | ||
|
|
||
| - [DatoCMS](/examples/cms-datocms) | ||
| - [Sanity](/examples/cms-sanity) | ||
| - [TakeShape](/examples/cms-takeshape) | ||
| - [Prismic](/examples/cms-prismic) | ||
| - [Contentful](/examples/cms-contentful) | ||
| - [Blog Starter](/examples/blog-starter) | ||
|
|
||
| ## 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 | ||
| npx create-next-app --example cms-wordpress cms-wordpress-app | ||
| # or | ||
| yarn create next-app --example cms-wordpress cms-wordpress-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-wordpress | ||
| cd cms-wordpress | ||
| ``` | ||
|
|
||
| ## Configuration | ||
|
|
||
| ### Step 1. Prepare your WordPress site | ||
|
|
||
| First, you need a WordPress site. There are many solutions for WordPress hosting, such as [WP Engine](https://wpengine.com/) and [WordPress.com](https://wordpress.com/). | ||
|
|
||
| Once the site is ready, you'll need to install the [WPGraphQL](https://www.wpgraphql.com/) plugin. It will add GraphQL API to your WordPress site, which we'll use to query the posts. Follow these steps to install it: | ||
|
|
||
| - Download the [WPGraphQL repo](https://github.com/wp-graphql/wp-graphql) as a ZIP archive. | ||
| - Inside your WordPress admin, go to **Plugins** and then click **Add New**. | ||
|
|
||
|  | ||
|
|
||
| - Click the **Upload Plugin** button at the top of the page and upload the WPGraphQL plugin. | ||
|
|
||
|  | ||
|
|
||
| - Once the plugin has been added, activate it from either the **Activate Plugin** button displayed after uploading or from the **Plugins** page. | ||
|
|
||
|  | ||
|
|
||
| #### Optional: Add WPGraphiQL | ||
|
|
||
| The [WPGraphiQL](https://github.com/wp-graphql/wp-graphiql) plugin gives you access to a GraphQL IDE directly from your WordPress Admin, allowing you to inspect and play around with the GraphQL API. | ||
|
|
||
| The process to add WPGraphiQL is the same as the one for WPGraphQL: Go to the [WPGraphiQL repo](https://github.com/wp-graphql/wp-graphiql), download the ZIP archive, and install it as a plugin in your WordPress site. Once that's done you should be able to access the GraphiQL page in the admin: | ||
|
|
||
|  | ||
|
|
||
| ### Step 2. Populate Content | ||
|
|
||
| Inside your WordPress admin, go to **Posts** and start adding new posts: | ||
|
|
||
| - We recommend creating at least **2 posts** | ||
| - Use dummy data for the content | ||
| - Pick an author from your WordPress users | ||
| - Add a **Featured Image**. You can download one from [Unsplash](https://unsplash.com/) | ||
| - Fill the **Excerpt** field | ||
|
|
||
|  | ||
|
|
||
| When you’re done, make sure to **Publish** the posts. | ||
|
|
||
| > **Note:** Only **published** posts and public fields will be rendered by the app unless [Preview Mode](/docs/advanced-features/preview-mode.md) is enabled. | ||
| ### 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 | ||
| ``` | ||
|
|
||
| Then open `.env.local` and set `NEXT_EXAMPLE_CMS_WORDPRESS_API_URL` to be the URL to your GraphQL endpoint in WordPress. For example: `https://myapp.wpengine.com/graphql`. | ||
|
|
||
| Your `.env.local` file should look like this: | ||
|
|
||
| ```bash | ||
| NEXT_EXAMPLE_CMS_WORDPRESS_API_URL=... | ||
|
|
||
| # Only required if you want to enable preview mode | ||
| # NEXT_EXAMPLE_CMS_WORDPRESS_AUTH_REFRESH_TOKEN= | ||
| # NEXT_EXAMPLE_CMS_WORDPRESS_PREVIEW_SECRET= | ||
| ``` | ||
|
|
||
| ### 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. Add authentication for Preview Mode (Optional) | ||
|
|
||
| **This step is optional.** By default, the blog will work with public posts from your WordPress site. Private content such as unpublished posts and private fields cannot be retrieved. To have access to unpublished posts you'll need to set up authentication. | ||
|
|
||
| To add [authentication to WPGraphQL](https://docs.wpgraphql.com/guides/authentication-and-authorization/), first you need to add the [WPGraphQL JWT plugin](https://github.com/wp-graphql/wp-graphql-jwt-authentication) to your Wordpress Admin following the same process you used to add the WPGraphQL plugin. | ||
|
|
||
| > Adding the WPGraphQL JWT plugin will disable your GraphQL API until you add a JWT secret ([GitHub issue](https://github.com/wp-graphql/wp-graphql-jwt-authentication/issues/91)). | ||
| Once that's done, you'll need to access the WordPress filesystem to add the secret required to validate JWT tokens. We recommend using SFTP — the instructions vary depending on your hosting provider. For example: | ||
|
|
||
| - [SFTP guide for WP Engine](https://wpengine.com/support/sftp/) | ||
| - [SFTP guide for WordPress.com](https://wordpress.com/support/sftp/) | ||
|
|
||
| Once you have SFTP access, open `wp-config.php` and add a secret for your JWT: | ||
|
|
||
| ```php | ||
| define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'YOUR_STRONG_SECRET' ); | ||
| ``` | ||
|
|
||
| > You can read more about this in the documentation for [WPGraphQL JWT Authentication](https://docs.wpgraphql.com/extensions/wpgraphql-jwt-authentication/). | ||
| Now, you need to get a **refresh token** to make authenticated requests with GraphQL. Make the following GraphQL mutation to your WordPress site from the GraphQL IDE (See notes about WPGraphiQL from earlier). Replace `your_username` with the **username** of a user with the `Administrator` role, and `your_password` with the user's password. | ||
|
|
||
| ```graphql | ||
| mutation Login { | ||
| login( | ||
| input: { | ||
| clientMutationId: "uniqueId" | ||
| password: "your_password" | ||
| username: "your_username" | ||
| } | ||
| ) { | ||
| refreshToken | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Copy the `refreshToken` returned by the mutation, then open `.env.local`, and make the following changes: | ||
|
|
||
| - Uncomment `NEXT_EXAMPLE_CMS_WORDPRESS_AUTH_REFRESH_TOKEN` and set it to be the `refreshToken` you just received. | ||
| - Uncomment `NEXT_EXAMPLE_CMS_WORDPRESS_PREVIEW_SECRET` and set it to be any random string (ideally URL friendly). | ||
|
|
||
| Your `.env.local` file should look like this: | ||
|
|
||
| ```bash | ||
| NEXT_EXAMPLE_CMS_WORDPRESS_API_URL=... | ||
|
|
||
| # Only required if you want to enable preview mode | ||
| NEXT_EXAMPLE_CMS_WORDPRESS_AUTH_REFRESH_TOKEN=... | ||
| NEXT_EXAMPLE_CMS_WORDPRESS_PREVIEW_SECRET=... | ||
| ``` | ||
|
|
||
| **Important:** Restart your Next.js server to update the environment variables. | ||
|
|
||
| ### Step 6. Try preview mode | ||
|
|
||
| On your WordPress admin, create a new post like before, but **do not publish** it. | ||
|
|
||
| Now, if you go to `http://localhost:3000`, you won’t see the post. However, if you enable **Preview Mode**, you'll be able to see the change ([Documentation](/docs/advanced-features/preview-mode.md)). | ||
|
|
||
| To enable Preview Mode, go to this URL: | ||
|
|
||
| ``` | ||
| http://localhost:3000/api/preview?secret=<secret>&id=<id> | ||
| ``` | ||
|
|
||
| - `<secret>` should be the string you entered for `NEXT_EXAMPLE_CMS_WORDPRESS_PREVIEW_SECRET`. | ||
| - `<id>` should be the post's `databaseId` field, which is the integer that you usually see in the URL (`?post=18` → 18). | ||
| - Alternatively, you can use `<slug>` instead of `<id>`. `<slug>` is generated based on the title. | ||
|
|
||
| You should now be able to see this post. To exit Preview Mode, you can click on **Click here to exit preview mode** at the top. | ||
|
|
||
| ### Step 7. Deploy on Vercel | ||
|
|
||
| You can deploy this app to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
|
||
| To deploy on Vercel, you need to set the environment variables with **Vercel Secrets** using [Vercel CLI](https://vercel.com/download) ([Documentation](https://vercel.com/docs/cli#commands/secrets)). | ||
|
|
||
| Install [Vercel CLI](https://vercel.com/download), log in to your account from the CLI, and run the following commands to add the environment variables. Replace the values with the corresponding strings in `.env.local`: | ||
|
|
||
| ```bash | ||
| vercel secrets add next_example_cms_wordpress_api_url <NEXT_EXAMPLE_CMS_WORDPRESS_API_URL> | ||
|
|
||
| # If you added authentication for preview mode: | ||
| vercel secrets add next_example_cms_wordpress_auth_refresh_token <NEXT_EXAMPLE_CMS_WORDPRESS_AUTH_REFRESH_TOKEN> | ||
| vercel secrets add next_example_cms_wordpress_preview_secret <NEXT_EXAMPLE_CMS_WORDPRESS_PREVIEW_SECRET> | ||
| ``` | ||
|
|
||
| Then push the project to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/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,17 @@ | ||
| export default function Avatar({ author }) { | ||
| const name = | ||
| author.firstName && author.lastName | ||
| ? `${author.firstName} ${author.lastName}` | ||
| : author.name | ||
|
|
||
| return ( | ||
| <div className="flex items-center"> | ||
| <img | ||
| src={author.avatar.url} | ||
| 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,16 @@ | ||
| export default function Categories({ categories }) { | ||
| return ( | ||
| <span className="ml-1"> | ||
| under | ||
| {categories.edges.length > 0 ? ( | ||
| categories.edges.map((category, index) => ( | ||
| <span key={index} className="ml-1"> | ||
| {category.node.name} | ||
| </span> | ||
| )) | ||
| ) : ( | ||
| <span className="ml-1">{categories.edges.node.name}</span> | ||
| )} | ||
| </span> | ||
| ) | ||
| } |
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> | ||
| } |
Oops, something went wrong.