Update buttercms example

examples/cms-buttercms/.env.local.example

@@ -1,3 +1 @@
-# Copy this file as .env.local
-BUTTERCMS_API_KEY=
-BUTTERCMS_PREVIEW_SECRET=
+NEXT_PUBLIC_BUTTER_CMS_API_KEY=your_auth_token

examples/cms-buttercms/README.md

@@ -1,16 +1,20 @@
-# A statically generated blog example using Next.js and ButterCMS
+# A fully-functional, drop-in proof-of-concept Next.js app using ButterCMS
+
+This Next.js starter project fully integrates with dynamic sample content from your ButterCMS account, including main menu, pages, blog posts, categories, and tags, all with a beautiful, custom theme with already-implemented search functionality. All of the included sample content is automatically created in your account dashboard when you sign up for a free trial of ButterCMS.
+
+A copy of this starter project can be easily and quickly deployed to Vercel with the click of a button.
 
 This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [ButterCMS](https://buttercms.com/) as the data source.
 
 ## Demo
 
-[https://next-blog-buttercms.vercel.app/](https://next-blog-buttercms.vercel.app/)
+Check out our live demo: [https://nextjs-starter-buttercms.vercel.app/](https://nextjs-starter-buttercms.vercel.app/)
 
 ## Deploy your own
 
-Once you have access to [the environment variables you'll need](#step-2-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+Once you have access to your Butter API token, you can deploy your Butterized proof-of-concept app to Vercel, the creators of Next.js, and spread your love of Butter. By clicking the button below, you'll create a copy of our starter project in your Git provider account, instantly deploy it, and institute a full content workflow connected to your ButterCMS account. Smooth.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms&project-name=cms-buttercms&repository-name=cms-buttercms&env=BUTTERCMS_API_KEY,BUTTERCMS_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20ButterCMS&envLink=https://vercel.link/buttercms-env)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Fnextjs-starter-buttercms&env=NEXT_PUBLIC_BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F&project-name=nextjs-starter-buttercms&repo-name=nextjs-starter-buttercms&redirect-url=https%3A%2F%2Fbuttercms.com%2Fonboarding%2Fvercel-starter-deploy-callback%2F&production-deploy-hook=Deploy%20Triggered%20from%20ButterCMS&demo-title=ButterCMS%20Next.js%20Starter&demo-description=Fully%20integrated%20with%20your%20ButterCMS%20account&demo-url=https%3A%2F%2Fnextjs-starter-buttercms.vercel.app%2F&demo-image=https://cdn.buttercms.com/r0tGK8xFRti2iRKBJ0eY&repository-name=nextjs-starter-buttercms)
 
 ### Related examples
 
@@ -33,6 +37,18 @@ Once you have access to [the environment variables you'll need](#step-2-set-up-e
 
 ## How to use
 
+### Option 1. Install via Github and NPM or Yarn
+
+First, install the dependencies by cloning the repo and running one of the following commands, depending on your current setup:
+
+```bash
+git clone https://github.com/ButterCMS/nextjs-starter-buttercms.git
+cd nextjs-starter-buttercms
+npm install # or yarn install
+```
+
+### Option 2. Install via Create-Next-App
+
 Execute [`create-next-app`](https://github.com/vercel/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
@@ -49,7 +65,7 @@ pnpm create next-app -- --example cms-buttercms cms-buttercms-app
 
 First, [create an account on ButterCMS](https://buttercms.com/).
 
-After signing up, you’ll be presented with the API key. We’ll use this in the next step.
+After signing up, you’ll be presented with your free API token. We’ll use this in the next step.
 
 ### Step 2. Set up environment variables
 
@@ -61,12 +77,12 @@ cp .env.local.example .env.local
 
 Then set each variable on `.env.local`:
 
-- `BUTTERCMS_API_KEY` should be set as the API key.
-- `BUTTERCMS_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).
+- `NEXT_PUBLIC_BUTTER_CMS_API_KEY` should be set as the API key.
 
 ### Step 3. Run Next.js in development mode
 
-When you sign up to ButterCMS, it creates an example blog post automatically. You can run Next.js in development mode to view a blog containing this example post.
+When you sign up for ButterCMS, it creates all of the example content used by this starter project. You can run Next.js in development mode to view your fully-functional starter project, including landing page with
+API-based components, API-based menu, and a blog.
 
 ```bash
 npm install
@@ -78,44 +94,39 @@ 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/vercel/next.js/discussions).
+Your starter project should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
 
 ### Step 4. Try preview mode
 
+Your starter project is automatically configured to show draft changes saved in your Butter account when run locally or deploy to a hosting provider. To disable this behavior, set the following value in your `.env.local` file: `PREVIEW=false`.
+
 To try preview mode, [create a blog post](https://buttercms.com/post/):
 
 - Set the **Title** as `Draft Post Test`.
 - Fill the content and summary with dummy text.
-- Set the **Featured Image** by downloading some image from [Unsplash](https://unsplash.com/).
 
 Most importantly, **do not publish** the blog post. Instead, click **Save Draft**.
 
-Now, if you go to the post page on localhost, you won't see this post because it’s not published. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](https://nextjs.org/docs/advanced-features/preview-mode)).
-
-To enable the Preview Mode, go to this URL:
-
-```
-http://localhost:3000/api/preview?secret=<secret>&slug=draft-post-test
-```
-
-- `<secret>` should be the string you entered for `BUTTERCMS_PREVIEW_SECRET`.
+If you have not already, set `PREVIEW=false` in your `.env.local` file and restart your local
+development server.
 
-You should now be able to see the draft post. To exit the preview mode, you can click **Click here to exit preview mode** at the top.
+Now, if you go to the your blog list view page on localhost: [http://localhost:3000/#blog](http://localhost:3000/#blog), you won't see this post, as its status has not yet been updated to `published`. However, if you use **Preview Mode** by deleting `PREVIEW=false` from your `.env.local` file, your new post will appear ([Documentation](https://nextjs.org/docs/advanced-features/preview-mode)).
 
-**Tip**: [You can set the preview URL on ButterCMS](https://buttercms.com/kb/preview-urls).
+**Tip**: [You can set a preview URL on ButterCMS](https://buttercms.com/kb/preview-urls) for pages
+deployed to Vercel, allowing you to live-preview changes on the web from within your Butter account! Sweet!
 
 ### Step 5. 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
+#### Deploy from our template
 
-To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+If you want to deploy a copy of our starter to Vercel without any changes, you can just click this button:
 
-**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 with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FButterCMS%2Fnextjs-starter-buttercms&env=NEXT_PUBLIC_BUTTER_CMS_API_KEY&envDescription=Your%20ButterCMS%20API%20Token&envLink=https%3A%2F%2Fbuttercms.com%2Fsettings%2F&project-name=nextjs-starter-buttercms&repo-name=nextjs-starter-buttercms&redirect-url=https%3A%2F%2Fbuttercms.com%2Fonboarding%2Fvercel-starter-deploy-callback%2F&production-deploy-hook=Deploy%20Triggered%20from%20ButterCMS&demo-title=ButterCMS%20Next.js%20Starter&demo-description=Fully%20integrated%20with%20your%20ButterCMS%20account&demo-url=https%3A%2F%2Fnextjs-starter-buttercms.vercel.app%2F&demo-image=https://cdn.buttercms.com/r0tGK8xFRti2iRKBJ0eY&repository-name=nextjs-starter-buttercms)
 
-#### Deploy from Our Template
+#### Deploy your local project
 
-Alternatively, you can deploy using our template by clicking on the Deploy button below.
+To deploy your local project to Vercel (one in which you've made changes), push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms&project-name=cms-buttercms&repository-name=cms-buttercms&env=BUTTERCMS_API_KEY,BUTTERCMS_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20ButterCMS&envLink=https://vercel.link/buttercms-env)
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.

examples/cms-buttercms/app.json

@@ -0,0 +1,18 @@
+{
+ "name": "ButterCMS NextJS Starter Project ",
+ "description": "Drop-in proof-of-concept NextJs app, fully integrated with your ButterCMS account.",
+ "repository": "https://github.com/ButterCMS/nextjs-starter-buttercms",
+ "logo": "https://cdn.buttercms.com/R3fbtvoRT2CqEQSmk8hb",
+ "keywords": ["Next.js", "buttercms", "cms", "blog"],
+ "buildpacks": [
+ {
+ "url": "heroku/nodejs"
+ }
+ ],
+ "env": {
+ "NEXT_PUBLIC_BUTTER_CMS_API_KEY": {
+ "description": "The API token of your ButterCMS account",
+ "value": ""
+ }
+ }
+}

examples/cms-buttercms/components/author-card.js

@@ -0,0 +1,7 @@
+export default function AuthorCard({ author }) {
+ return (
+ <a>
+ {author.first_name} {author.last_name}
+ </a>
+ )
+}

examples/cms-buttercms/components/blog/blog.js

@@ -0,0 +1,42 @@
+import Link from 'next/link'
+
+import PostPreviewCondensed from './post-preview-condensed'
+
+export default function Blog({ posts }) {
+ return (
+ <section id="blog" className="blog-section">
+ <div className="container">
+ <div className="row justify-content-center">
+ <div className="col-lg-6 col-md-10">
+ <div className="section-title text-center">
+ <h2>Latest Blog Posts</h2>
+ <p>
+ Butter also has a built in blog engine which makes it dead
+ simple to launch a new company blog.
+ </p>
+ <p>
+ <Link href={`/blog`}>
+ <a className="main-btn btn-hover mt-5">View All Blog Posts</a>
+ </Link>
+ </p>
+ </div>
+ </div>
+ </div>
+ <div className="row justify-content-center">
+ {posts.map((post) => (
+ <PostPreviewCondensed
+ key={post.slug}
+ title={post.title}
+ coverImage={post.featuredImage}
+ coverImageAlt={post.featuredImageAlt}
+ date={post.published}
+ author={post.author}
+ slug={post.slug}
+ excerpt={post.summary}
+ />
+ ))}
+ </div>
+ </div>
+ </section>
+ )
+}

examples/cms-buttercms/components/blog/categories-widget.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export default function CategoriesWidget({ categories }) {
+ return (
+ <div className="widget categories-widget">
+ <h5 className="widget-title">Categories</h5>
+ <ul className="categories-list">
+ {categories.map((category) => (
+ <li key={category.slug}>
+ <Link href={`/blog/category/${category.slug}`}>
+ <a>{category.name}</a>
+ </Link>
+ </li>
+ ))}
+ </ul>
+ </div>
+ )
+}

examples/cms-buttercms/components/blog/post-preview-condensed.js

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+export default function PostPreviewCondensed({
+ title,
+ coverImage,
+ coverImageAlt,
+ excerpt,
+ slug,
+}) {
+ return (
+ <div className="col-lg-4 col-md-8 col-sm-10">
+ <div className="single-blog">
+ {coverImage && (
+ <div className="blog-header">
+ <Image
+ src={coverImage}
+ alt={coverImageAlt}
+ layout="fill"
+ objectFit="cover"
+ />
+ </div>
+ )}
+ <div className="blog-body">
+ <h5 className="package-name">
+ <Link href={`/blog/${slug}`}>
+ <a>{title}</a>
+ </Link>
+ </h5>
+ <p>{excerpt}</p>
+ </div>
+ <div className="blog-footer">
+ <Link href={`/blog/${slug}`}>
+ <a className="main-btn btn-hover">Read More</a>
+ </Link>
+ </div>
+ </div>
+ </div>
+ )
+}

examples/cms-buttercms/components/blog/post-preview.js

@@ -0,0 +1,67 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import HumanDate from '@/components/human-date'
+import AuthorCard from '@/components/author-card'
+
+export default function PostsPreview({
+ title,
+ coverImage,
+ coverImageAlt,
+ date,
+ author,
+ tags,
+ excerpt,
+ slug,
+}) {
+ return (
+ <div className="col-12 col-lg-6">
+ <div className="blog-roll-card">
+ <div className="blog-roll-card-meta">
+ <h2 className="blog-roll-card-header">
+ <Link href={`/blog/${slug}`}>
+ <a>{title}</a>
+ </Link>
+ </h2>
+ <ul className="blog-roll-card-meta-info">
+ <li>
+ <AuthorCard author={author} />
+ </li>
+ <li>
+ <i className="lni lni-calendar"></i>{' '}
+ <HumanDate dateString={date} />
+ </li>
+ {tags.map((tag) => (
+ <li key={tag.slug}>
+ <Link href={`/blog/tag/${tag.slug}`}>
+ <a>
+ <i className="lni lni-tag"></i> {tag.name}
+ </a>
+ </Link>
+ </li>
+ ))}
+ </ul>
+ </div>
+ {coverImage && (
+ <div className="single-post-thumbnail">
+ <Image
+ src={coverImage}
+ alt={coverImageAlt}
+ layout="fill"
+ objectFit="cover"
+ />
+ </div>
+ )}
+ <div
+ className="blog-roll-card-body prose"
+ dangerouslySetInnerHTML={{ __html: excerpt }}
+ ></div>
+ <div className="blog-roll-card-footer text-center">
+ <Link href={`/blog/${slug}`}>
+ <a className="main-btn btn-hover">Read More</a>
+ </Link>
+ </div>
+ </div>
+ </div>
+ )
+}