diff --git a/examples/cms-drupal/.env.local.example b/examples/cms-drupal/.env.local.example new file mode 100644 index 0000000000000..6f3c4a77a734b --- /dev/null +++ b/examples/cms-drupal/.env.local.example @@ -0,0 +1,6 @@ +NEXT_PUBLIC_DRUPAL_BASE_URL=http://localhost:8080 +NEXT_IMAGE_DOMAIN=localhost +DRUPAL_SITE_ID= +DRUPAL_CLIENT_ID= +DRUPAL_CLIENT_SECRET= +DRUPAL_PREVIEW_SECRET= \ No newline at end of file diff --git a/examples/cms-drupal/.gitignore b/examples/cms-drupal/.gitignore new file mode 100644 index 0000000000000..1437c53f70bc2 --- /dev/null +++ b/examples/cms-drupal/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/cms-drupal/README.md b/examples/cms-drupal/README.md new file mode 100644 index 0000000000000..7b27e17e005d3 --- /dev/null +++ b/examples/cms-drupal/README.md @@ -0,0 +1,51 @@ +# A statically generated blog example using Next.js and Drupal + +This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Drupal](https://drupal.org/project/next) as the data source. + +## Demo + +### [https://cms-drupal.vercel.app](https://cms-drupal.vercel.app) + +## Deploy your own + +Once you have [configured the Next.js module for Drupal](https://next-drupal.org/guides/decoupled-drupal-nextjs) and have access to the environment variables you'll need, deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-drupal&env=NEXT_PUBLIC_DRUPAL_BASE_URL,NEXT_IMAGE_DOMAIN,DRUPAL_SITE_ID,DRUPAL_FRONT_PAGE,DRUPAL_PREVIEW_SECRET,DRUPAL_NEXT_CLIENT_ID,DRUPAL_NEXT_CLIENT_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20ghost&envLink=https://vercel.link/cms-drupal-env) + +### 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) +- [Kontent](/examples/cms-kontent) +- [Ghost](/examples/cms-ghost) +- [GraphCMS](/examples/cms-graphcms) +- [Blog Starter](/examples/blog-starter) + +## How to use + +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 +npx create-next-app --example cms-drupal cms-drupal-app +# or +yarn create next-app --example cms-drupal cms-drupal-app +``` + +## Setup Drupal + +See the Get Started guide [here](https://next-drupal.org/guides/decoupled-drupal-nextjs). + +#### Deploy from Our Template + +Alternatively, you can deploy using our template by clicking on the Deploy button below. + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-drupal&env=NEXT_PUBLIC_DRUPAL_BASE_URL,NEXT_IMAGE_DOMAIN,DRUPAL_SITE_ID,DRUPAL_FRONT_PAGE,DRUPAL_PREVIEW_SECRET,DRUPAL_NEXT_CLIENT_ID,DRUPAL_NEXT_CLIENT_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20ghost&envLink=https://vercel.link/cms-drupal-env) diff --git a/examples/cms-drupal/components/alert.js b/examples/cms-drupal/components/alert.js new file mode 100644 index 0000000000000..b924cb097f169 --- /dev/null +++ b/examples/cms-drupal/components/alert.js @@ -0,0 +1,42 @@ +import Container from './container' +import cn from 'classnames' +import { EXAMPLE_PATH } from '../lib/constants' + +export default function Alert({ preview }) { + return ( +
+ +
+ {preview ? ( + <> + This 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-drupal/components/avatar.js b/examples/cms-drupal/components/avatar.js new file mode 100644 index 0000000000000..1921a724634d9 --- /dev/null +++ b/examples/cms-drupal/components/avatar.js @@ -0,0 +1,27 @@ +import Image from 'next/image' + +export default function Avatar({ author }) { + const name = author + ? author.firstName && author.lastName + ? `${author.firstName} ${author.lastName}` + : author.name + : null + + return ( + <> + {author && ( +
+
+ {name} +
+
{name}
+
+ )} + + ) +} diff --git a/examples/cms-drupal/components/categories.js b/examples/cms-drupal/components/categories.js new file mode 100644 index 0000000000000..0beb1ff5335cc --- /dev/null +++ b/examples/cms-drupal/components/categories.js @@ -0,0 +1,16 @@ +export default function Categories({ categories }) { + return ( + + under + {categories.edges.length > 0 ? ( + categories.edges.map((category, index) => ( + + {category.node.name} + + )) + ) : ( + {categories.edges.node.name} + )} + + ) +} diff --git a/examples/cms-drupal/components/container.js b/examples/cms-drupal/components/container.js new file mode 100644 index 0000000000000..fc1c29dfb0747 --- /dev/null +++ b/examples/cms-drupal/components/container.js @@ -0,0 +1,3 @@ +export default function Container({ children }) { + return
{children}
+} diff --git a/examples/cms-drupal/components/cover-image.js b/examples/cms-drupal/components/cover-image.js new file mode 100644 index 0000000000000..176a870f81f80 --- /dev/null +++ b/examples/cms-drupal/components/cover-image.js @@ -0,0 +1,28 @@ +import cn from 'classnames' +import Image from 'next/image' +import Link from 'next/link' + +export default function CoverImage({ title, coverImage, slug }) { + const image = ( + {`Cover + ) + return ( +
+ {slug ? ( + + {image} + + ) : ( + image + )} +
+ ) +} diff --git a/examples/cms-drupal/components/date.js b/examples/cms-drupal/components/date.js new file mode 100644 index 0000000000000..eac5681378bfd --- /dev/null +++ b/examples/cms-drupal/components/date.js @@ -0,0 +1,6 @@ +import { parseISO, format } from 'date-fns' + +export default function Date({ dateString }) { + const date = parseISO(dateString) + return +} diff --git a/examples/cms-drupal/components/footer.js b/examples/cms-drupal/components/footer.js new file mode 100644 index 0000000000000..da9eed88ec263 --- /dev/null +++ b/examples/cms-drupal/components/footer.js @@ -0,0 +1,30 @@ +import Container from './container' +import { EXAMPLE_PATH } from '../lib/constants' + +export default function Footer() { + return ( + + ) +} diff --git a/examples/cms-drupal/components/header.js b/examples/cms-drupal/components/header.js new file mode 100644 index 0000000000000..562e7e3eebb6a --- /dev/null +++ b/examples/cms-drupal/components/header.js @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Header() { + return ( +

+ + Blog + + . +

+ ) +} diff --git a/examples/cms-drupal/components/hero-post.js b/examples/cms-drupal/components/hero-post.js new file mode 100644 index 0000000000000..c5aa6d0a76609 --- /dev/null +++ b/examples/cms-drupal/components/hero-post.js @@ -0,0 +1,45 @@ +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 ( +
+
+ {coverImage && ( + + )} +
+
+
+

+ + + +

+
+ +
+
+
+
+ +
+
+
+ ) +} diff --git a/examples/cms-drupal/components/intro.js b/examples/cms-drupal/components/intro.js new file mode 100644 index 0000000000000..5931b3c5961bd --- /dev/null +++ b/examples/cms-drupal/components/intro.js @@ -0,0 +1,28 @@ +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-drupal/components/layout.js b/examples/cms-drupal/components/layout.js new file mode 100644 index 0000000000000..99d95353131e0 --- /dev/null +++ b/examples/cms-drupal/components/layout.js @@ -0,0 +1,16 @@ +import Alert from '../components/alert' +import Footer from '../components/footer' +import Meta from '../components/meta' + +export default function Layout({ preview, children }) { + return ( + <> + +
+ +
{children}
+
+