diff --git a/examples/cms-buttercms/.env.local.example b/examples/cms-buttercms/.env.local.example index ea6dea9014063..07198f69da10a 100644 --- a/examples/cms-buttercms/.env.local.example +++ b/examples/cms-buttercms/.env.local.example @@ -1,3 +1 @@ -# Copy this file as .env.local -BUTTERCMS_API_KEY= -BUTTERCMS_PREVIEW_SECRET= \ No newline at end of file +NEXT_PUBLIC_BUTTER_CMS_API_KEY=your_auth_token \ No newline at end of file diff --git a/examples/cms-buttercms/README.md b/examples/cms-buttercms/README.md index bf57965882e92..8e1ed65bdd2d5 100644 --- a/examples/cms-buttercms/README.md +++ b/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=&slug=draft-post-test -``` - -- `` 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. diff --git a/examples/cms-buttercms/app.json b/examples/cms-buttercms/app.json new file mode 100644 index 0000000000000..4d4c60d77be70 --- /dev/null +++ b/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": "" + } + } +} diff --git a/examples/cms-buttercms/components/alert.js b/examples/cms-buttercms/components/alert.js deleted file mode 100644 index 051f3319649ed..0000000000000 --- a/examples/cms-buttercms/components/alert.js +++ /dev/null @@ -1,42 +0,0 @@ -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-buttercms/components/author-card.js b/examples/cms-buttercms/components/author-card.js new file mode 100644 index 0000000000000..da25b5e222d6d --- /dev/null +++ b/examples/cms-buttercms/components/author-card.js @@ -0,0 +1,7 @@ +export default function AuthorCard({ author }) { + return ( + + {author.first_name} {author.last_name} + + ) +} diff --git a/examples/cms-buttercms/components/avatar.js b/examples/cms-buttercms/components/avatar.js deleted file mode 100644 index 6777f50313593..0000000000000 --- a/examples/cms-buttercms/components/avatar.js +++ /dev/null @@ -1,17 +0,0 @@ -import Image from 'next/image' - -export default function Avatar({ name, picture }) { - return ( -
-
- {name} -
-
{name}
-
- ) -} diff --git a/examples/cms-buttercms/components/blog/blog.js b/examples/cms-buttercms/components/blog/blog.js new file mode 100644 index 0000000000000..3f27066851927 --- /dev/null +++ b/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 ( +
+
+
+
+
+

Latest Blog Posts

+

+ Butter also has a built in blog engine which makes it dead + simple to launch a new company blog. +

+

+ + View All Blog Posts + +

+
+
+
+
+ {posts.map((post) => ( + + ))} +
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/blog/categories-widget.js b/examples/cms-buttercms/components/blog/categories-widget.js new file mode 100644 index 0000000000000..4b409eebc9b16 --- /dev/null +++ b/examples/cms-buttercms/components/blog/categories-widget.js @@ -0,0 +1,18 @@ +import Link from 'next/link' + +export default function CategoriesWidget({ categories }) { + return ( +
+
Categories
+ +
+ ) +} diff --git a/examples/cms-buttercms/components/blog/post-preview-condensed.js b/examples/cms-buttercms/components/blog/post-preview-condensed.js new file mode 100644 index 0000000000000..a788c7df6f3b6 --- /dev/null +++ b/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 ( +
+
+ {coverImage && ( +
+ {coverImageAlt} +
+ )} +
+
+ + {title} + +
+

{excerpt}

+
+
+ + Read More + +
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/blog/post-preview.js b/examples/cms-buttercms/components/blog/post-preview.js new file mode 100644 index 0000000000000..24cd6e9d91437 --- /dev/null +++ b/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 ( +
+
+
+

+ + {title} + +

+ +
+ {coverImage && ( +
+ {coverImageAlt} +
+ )} +
+
+ + Read More + +
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/blog/posts-list.js b/examples/cms-buttercms/components/blog/posts-list.js new file mode 100644 index 0000000000000..59a8245ba31ed --- /dev/null +++ b/examples/cms-buttercms/components/blog/posts-list.js @@ -0,0 +1,24 @@ +import PostsPreview from './post-preview' + +export default function PostsList({ posts }) { + return ( +
+
+ {posts.map((post) => ( + + ))} + {!posts.length &&
No blog posts found.
} +
+
+ ) +} diff --git a/examples/cms-buttercms/components/blog/search-widget.js b/examples/cms-buttercms/components/blog/search-widget.js new file mode 100644 index 0000000000000..da498214b2785 --- /dev/null +++ b/examples/cms-buttercms/components/blog/search-widget.js @@ -0,0 +1,15 @@ +export default function SearchWidget() { + return ( +
+
+
Search This Site
+
+ + +
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/container.js b/examples/cms-buttercms/components/container.js deleted file mode 100644 index fc1c29dfb0747..0000000000000 --- a/examples/cms-buttercms/components/container.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Container({ children }) { - return
{children}
-} diff --git a/examples/cms-buttercms/components/cover-image.js b/examples/cms-buttercms/components/cover-image.js deleted file mode 100644 index 0acaa9c23b99e..0000000000000 --- a/examples/cms-buttercms/components/cover-image.js +++ /dev/null @@ -1,29 +0,0 @@ -import Image from 'next/image' -import Link from 'next/link' -import cn from 'classnames' - -export default function CoverImage({ title, url, slug }) { - const image = ( - {`Cover - ) - - return ( -
- {slug ? ( - - {image} - - ) : ( - image - )} -
- ) -} diff --git a/examples/cms-buttercms/components/date.js b/examples/cms-buttercms/components/date.js deleted file mode 100644 index eac5681378bfd..0000000000000 --- a/examples/cms-buttercms/components/date.js +++ /dev/null @@ -1,6 +0,0 @@ -import { parseISO, format } from 'date-fns' - -export default function Date({ dateString }) { - const date = parseISO(dateString) - return -} diff --git a/examples/cms-buttercms/components/footer-section.js b/examples/cms-buttercms/components/footer-section.js new file mode 100644 index 0000000000000..e421538f0b6a5 --- /dev/null +++ b/examples/cms-buttercms/components/footer-section.js @@ -0,0 +1,78 @@ +import Image from 'next/image' + +export default function FooterSection({ mainMenu }) { + const links = mainMenu.map((link) => ({ + ...link, + url: link.url[0] === '#' ? `/${link.url}` : link.url, + })) + + return ( +
+
+
+
+
+
+ + logo + +
+

+ ButterCMS is your content backend. Build better with Butter. +

+ +
+
+
+
+

About Us

+ +
+
+ +
+
+

Subscribe Newsletter

+
+ + +
+
+
+
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/footer.js b/examples/cms-buttercms/components/footer.js deleted file mode 100644 index b305c3eb40b0d..0000000000000 --- a/examples/cms-buttercms/components/footer.js +++ /dev/null @@ -1,30 +0,0 @@ -import Container from './container' -import { EXAMPLE_PATH } from '@/lib/constants' - -export default function Footer() { - return ( - - ) -} diff --git a/examples/cms-buttercms/components/header-section.js b/examples/cms-buttercms/components/header-section.js new file mode 100644 index 0000000000000..1a88a8b4e1429 --- /dev/null +++ b/examples/cms-buttercms/components/header-section.js @@ -0,0 +1,51 @@ +import { useEffect, useState, useRef } from 'react' + +import Image from 'next/image' + +import MainMenu from './main-menu/main-menu' + +export default function HeaderSection({ mainMenu }) { + const [isNavbarSticky, setIsNavbarSticky] = useState(false) + const navbarAreaEl = useRef(null) + + function fixNavBar() { + if (navbarAreaEl.current) { + setIsNavbarSticky(window.pageYOffset > navbarAreaEl.current.offsetTop) + } + } + + useEffect(() => { + window.addEventListener('scroll', fixNavBar) + + return () => { + window.removeEventListener('scroll', fixNavBar) + } + }, []) + + return ( +
+
+
+
+
+ +
+
+
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/header.js b/examples/cms-buttercms/components/header.js deleted file mode 100644 index 562e7e3eebb6a..0000000000000 --- a/examples/cms-buttercms/components/header.js +++ /dev/null @@ -1,12 +0,0 @@ -import Link from 'next/link' - -export default function Header() { - return ( -

- - Blog - - . -

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

- - {title} - -

-
- -
-
-
-

{excerpt}

- -
-
-
- ) -} diff --git a/examples/cms-buttercms/components/human-date.js b/examples/cms-buttercms/components/human-date.js new file mode 100644 index 0000000000000..59a52989ad3d3 --- /dev/null +++ b/examples/cms-buttercms/components/human-date.js @@ -0,0 +1,6 @@ +import { parseISO, format } from 'date-fns' + +export default function HumanDate({ dateString }) { + const date = parseISO(dateString) + return +} diff --git a/examples/cms-buttercms/components/intro.js b/examples/cms-buttercms/components/intro.js deleted file mode 100644 index c3003c6196642..0000000000000 --- a/examples/cms-buttercms/components/intro.js +++ /dev/null @@ -1,28 +0,0 @@ -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-buttercms/components/landing-page-sections/feature.js b/examples/cms-buttercms/components/landing-page-sections/feature.js new file mode 100644 index 0000000000000..68ce10e56d135 --- /dev/null +++ b/examples/cms-buttercms/components/landing-page-sections/feature.js @@ -0,0 +1,17 @@ +import Image from 'next/image' + +export default function Feature({ headline, description, icon }) { + return ( +
+
+
+ {icon && } +
+
+

{headline}

+

{description}

+
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/landing-page-sections/features.js b/examples/cms-buttercms/components/landing-page-sections/features.js new file mode 100644 index 0000000000000..fa70e7f052730 --- /dev/null +++ b/examples/cms-buttercms/components/landing-page-sections/features.js @@ -0,0 +1,36 @@ +import Feature from './feature' + +export default function Features({ + headline, + subheadline, + features, + scrollAnchorId, +}) { + return ( +
+
+
+
+
+

{headline}

+

{subheadline}

+
+
+ +
+
+ {features.map((feature, index) => ( + + ))} +
+
+
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/landing-page-sections/hero.js b/examples/cms-buttercms/components/landing-page-sections/hero.js new file mode 100644 index 0000000000000..f9d267be2ee79 --- /dev/null +++ b/examples/cms-buttercms/components/landing-page-sections/hero.js @@ -0,0 +1,43 @@ +import Image from 'next/image' + +export default function Hero({ + headline, + subheadline, + image, + buttonLabel, + buttonUrl, + scrollAnchorId, +}) { + return ( +
+
+
+
+
+

{headline}

+

{subheadline}

+ + + {buttonLabel} + + Need an account? +
+
+ {image && ( +
+
+ +
+
+ )} +
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/landing-page-sections/landing-page-section.js b/examples/cms-buttercms/components/landing-page-sections/landing-page-section.js new file mode 100644 index 0000000000000..fa9ed572086bc --- /dev/null +++ b/examples/cms-buttercms/components/landing-page-sections/landing-page-section.js @@ -0,0 +1,50 @@ +import dynamic from 'next/dynamic' + +import camelcaseKeys from 'camelcase-keys' + +import Preloader from '@/components/preloader' +import MissingSection from './missing-section' + +export default function LandingPageSection({ type, sectionData }) { + const sectionsComponentPaths = () => ({ + hero: dynamic( + () => + import('@/components/landing-page-sections/hero').catch( + () => () => MissingSection + ), + { + loading: Preloader, + } + ), + two_column_with_image: dynamic( + () => + import( + '@/components/landing-page-sections/two-column-with-image' + ).catch(() => () => MissingSection), + { + loading: Preloader, + } + ), + features: dynamic( + () => + import('@/components/landing-page-sections/features').catch( + () => () => MissingSection + ), + { + loading: Preloader, + } + ), + testimonials: dynamic( + () => + import('@/components/landing-page-sections/testimonials').catch( + () => () => MissingSection + ), + { + loading: Preloader, + } + ), + }) + const SectionComponent = sectionsComponentPaths()[type] || MissingSection + + return +} diff --git a/examples/cms-buttercms/components/landing-page-sections/missing-section.js b/examples/cms-buttercms/components/landing-page-sections/missing-section.js new file mode 100644 index 0000000000000..0feed8dd83f10 --- /dev/null +++ b/examples/cms-buttercms/components/landing-page-sections/missing-section.js @@ -0,0 +1,10 @@ +export default function MissingSection({ type, ...sectionData }) { + console.log(`Missing section ${type} data ${sectionData}`) + + return ( +
+

Missing a template for {type}

+

Check console for component details

+
+ ) +} diff --git a/examples/cms-buttercms/components/landing-page-sections/testimonial.js b/examples/cms-buttercms/components/landing-page-sections/testimonial.js new file mode 100644 index 0000000000000..602551243f5cd --- /dev/null +++ b/examples/cms-buttercms/components/landing-page-sections/testimonial.js @@ -0,0 +1,16 @@ +export default function Testimonial({ quote, name, title }) { + return ( +
+
+ +
+
+

{quote}

+
+
+
{name}
+

{title}

+
+
+ ) +} diff --git a/examples/cms-buttercms/components/landing-page-sections/testimonials.js b/examples/cms-buttercms/components/landing-page-sections/testimonials.js new file mode 100644 index 0000000000000..fe163ae7cba40 --- /dev/null +++ b/examples/cms-buttercms/components/landing-page-sections/testimonials.js @@ -0,0 +1,57 @@ +import { useEffect } from 'react' + +import { tns } from 'tiny-slider' + +import Testimonial from './testimonial' + +export default function Testimonials({ + headline, + testimonial: testimonials, + scrollAnchorId, +}) { + useEffect(() => { + tns({ + container: '.testimonial-active', + autoplay: true, + autoplayTimeout: 5000, + autoplayButtonOutput: false, + mouseDrag: true, + gutter: 0, + nav: false, + navPosition: 'bottom', + controls: true, + controlsText: [ + '', + '', + ], + items: 1, + }) + }) + + return ( +
+
+
+
+
+
+

{headline}

+
+ +
+ {testimonials.map((testimonial, index) => ( + + ))} +
+
+
+
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/landing-page-sections/two-column-with-image.js b/examples/cms-buttercms/components/landing-page-sections/two-column-with-image.js new file mode 100644 index 0000000000000..87e3a79435510 --- /dev/null +++ b/examples/cms-buttercms/components/landing-page-sections/two-column-with-image.js @@ -0,0 +1,60 @@ +import Image from 'next/image' + +export default function TwoColumnWithImage({ + headline, + subheadline, + buttonLabel, + buttonUrl, + image, + imagePosition, + scrollAnchorId, +}) { + return ( +
+
+
+ {image && imagePosition === 'left' && ( +
+
+ +
+
+ )} +
+
+
+

{headline}

+
+
+ + {buttonLabel} + +
+
+ {image && imagePosition === 'right' && ( +
+
+ +
+
+ )} +
+
+
+ ) +} diff --git a/examples/cms-buttercms/components/layout.js b/examples/cms-buttercms/components/layout.js deleted file mode 100644 index 399802b095aa7..0000000000000 --- a/examples/cms-buttercms/components/layout.js +++ /dev/null @@ -1,16 +0,0 @@ -import Alert from './alert' -import Footer from './footer' -import Meta from './meta' - -export default function Layout({ preview, children }) { - return ( - <> - -
- -
{children}
-
-