chore(examples): add webiny cms example

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

@@ -0,0 +1,4 @@
+PREVIEW_API_SECRET=
+WEBINY_API_SECRET=
+NEXT_PUBLIC_WEBINY_API_URL=
+NEXT_PUBLIC_WEBINY_PREVIEW_API_URL=

examples/cms-webiny/.gitignore

@@ -0,0 +1,35 @@
+# 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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/cms-webiny/README.md

@@ -0,0 +1,132 @@
+# A statically generated blog example using Next.js and Webiny
+
+This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Webiny](https://webiny.com/) as the data source.
+
+## Demo
+
+[https://webiny-headlesscms-nextjs-example.vercel.app/](https://webiny-headlesscms-nextjs-example.vercel.app/)
+
+## Deploy your own
+
+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/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-webiny&project-name=cms-webiny&repository-name=cms-webiny&env=PREVIEW_API_SECRET,WEBINY_API_SECRET,NEXT_PUBLIC_WEBINY_API_URL,NEXT_PUBLIC_WEBINY_PREVIEW_API_URL&envDescription=Required%20to%20connect%20the%20app%20with%20Webiny&envLink=https://vercel.link/cms-webiny-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)
+- [GraphCMS](/examples/cms-graphcms)
+- [Kontent](/examples/cms-kontent)
+- [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
+- [Builder.io](/examples/cms-builder-io)
+
+## 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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example cms-webiny cms-webiny-app
+```
+
+```bash
+yarn create next-app --example cms-webiny cms-webiny-app
+```
+
+```bash
+pnpm create next-app --example cms-webiny cms-webiny-app
+```
+
+### Step 1. Set up a Webiny project
+
+Follow the [Webiny docs](https://www.webiny.com/docs/tutorials/install-webiny) to install a Webiny project on your cloud hosting provider. Because Webiny is a distributed system we don't run it locally. This also means you don't need to worry about setting up Docker, or installing databases and drivers on your local machine for Postgres, MongoDB or similar. The cloud takes care of that for you.
+
+If you get stuck or have any questions, please [join the community](http://webiny-community.slack.com 'Webiny slack channel') and reach out for some help.
+
+Once you have an app up and running click into the "HeadlessCMS" app in the sidebar, click on _models_ and add the following models and fields:
+
+#### Authors
+
+- A `text` field with the value "name"
+- A `text` field with the value "slug" (optionally add a validator using this regex which will make sure you have valid urls: `^(?!.*--)[a-z0-9\-]+$`)
+- a `files` field with the value "picture"
+
+#### Posts
+
+- A `text` field with the value "title"
+- A `text` field with the value "slug" (optionally use the regex above as a validator)
+- A `files` field with the value "featured image"
+- A `rich text` field with the value "body"
+- A `reference` field with the value "Author"
+
+Next, choose **API Keys** in the sidebar. Add an API key with any name and description. Select "Headless CMS" and choose a Custom access level for all content model groups with the values `read` and `preview`. Save the API token and the token itself will be revealed.
+
+You will be able to use the same API token for both published and draft posts.
+
+### Step 2. Set up environment variables
+
+Copy the `.env.local.example` file to `.env.local`, then set the variables as follows:
+
+- `PREVIEW_API_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).
+- WEBINY_API_SECRET this will be your security token generated in Webiny
+- You can find the values for `NEXT_PUBLIC_WEBINY_API_URL` and `NEXT_PUBLIC_WEBINY_PREVIEW_API_URL` two ways: From your local Webiny project root, run `yarn webiny info`, alternatively go to **API Playground** in the sidebar. At the top of the GraphQL explorer are four tabs, one for each of our APIs, and you'll see both the Read API and the Preview API on those tabs. The URL for your environment is just below the tab. ([More info here if you get stuck](https://www.webiny.com/docs/headless-cms/basics/graphql-api))
+
+### Step 3. Run Next.js in development mode
+
+Inside the Next.js app directory, run:
+
+```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)!
+
+The best place to debug is inside the `fetchAPI` function in `lib/api.js`. If you need help, you can post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+
+### Step 4. Try preview mode
+
+If you go to the `/posts/draft` 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
+```
+
+- `<secret>` should be the string you entered for `PREVIEW_API_SECRET`.
+- `<slug>` should be the post's `slug` attribute.
+
+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.
+
+To add more preview pages, create a post and set the **status** as `draft`.
+
+### 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
+
+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).
+
+**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.
+
+[![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-webiny&project-name=cms-webiny&repository-name=cms-webiny&env=PREVIEW_API_SECRET,WEBINY_API_SECRET,NEXT_PUBLIC_WEBINY_API_URL,NEXT_PUBLIC_WEBINY_PREVIEW_API_URL&envDescription=Required%20to%20connect%20the%20app%20with%20Webiny&envLink=https://vercel.link/cms-webiny-env)

examples/cms-webiny/components/alert.tsx

@@ -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-sm text-center">
+          {preview ? (
+            <>
+              This page is a preview.{' '}
+              <a
+                href="/api/exit-preview"
+                className="underline transition-colors duration-200 hover:text-cyan"
+              >
+                Click here
+              </a>{' '}
+              to exit preview mode.
+            </>
+          ) : (
+            <>
+              The source code for this blog is{' '}
+              <a
+                href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
+                className="underline transition-colors duration-200 hover:text-success"
+              >
+                available on GitHub
+              </a>
+              .
+            </>
+          )}
+        </div>
+      </Container>
+    </div>
+  )
+}

examples/cms-webiny/components/avatar.tsx

@@ -0,0 +1,15 @@
+import Image from 'next/image'
+export default function Avatar({ name, picture }) {
+  return (
+    <div className="flex items-center">
+      <Image
+        src={picture}
+        width={48}
+        height={48}
+        className="w-12 h-12 mr-4 rounded-full"
+        alt={name}
+      />
+      <div className="text-xl font-bold">{name}</div>
+    </div>
+  )
+}

examples/cms-webiny/components/container.tsx

@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+  return <div className="container px-5 mx-auto">{children}</div>
+}

examples/cms-webiny/components/cover-image.tsx

@@ -0,0 +1,44 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import Image from 'next/image'
+
+export type TCoverImage = {
+  title: string
+  src: string
+  slug?: string
+  height: number
+  width: number
+}
+
+const CoverImage: React.FC<TCoverImage> = ({
+  title,
+  src,
+  slug,
+  height,
+  width,
+}) => {
+  const image = (
+    <Image
+      src={src}
+      alt={`Cover Image for ${title}`}
+      className={cn('shadow-sm', {
+        'hover:shadow-md transition-shadow duration-200': slug,
+      })}
+      layout="responsive"
+      width={width}
+      height={height}
+    />
+  )
+  return (
+    <div className="sm:mx-0">
+      {slug ? (
+        <Link href={`/posts/${slug}`}>
+          <a aria-label={title}>{image}</a>
+        </Link>
+      ) : (
+        image
+      )}
+    </div>
+  )
+}
+export default CoverImage

examples/cms-webiny/components/date-formatter.tsx

@@ -0,0 +1,10 @@
+import { parseISO, format } from 'date-fns'
+
+export default function DateFormatter({ dateString }) {
+  if (!dateString) {
+    return null
+  }
+  const date = parseISO(dateString)
+  const formattedDate = format(date, 'LLLL	d, yyyy')
+  return <time dateTime={dateString}>{formattedDate}</time>
+}

examples/cms-webiny/components/footer.tsx

@@ -0,0 +1,30 @@
+import Container from './container'
+import { EXAMPLE_PATH } from '../lib/constants'
+
+export default function Footer() {
+  return (
+    <footer className="border-t bg-accent-1 border-accent-2">
+      <Container>
+        <div className="flex flex-col items-center py-28 lg:flex-row">
+          <h3 className="mb-10 text-4xl font-bold leading-tight tracking-tighter text-center lg:text-5xl lg:text-left lg:mb-0 lg:pr-4 lg:w-1/2">
+            Statically Generated with Next.js.
+          </h3>
+          <div className="flex flex-col items-center justify-center lg:flex-row lg:pl-4 lg:w-1/2">
+            <a
+              href="https://nextjs.org/docs/basic-features/pages"
+              className="px-12 py-3 mx-3 mb-6 font-bold text-white transition-colors duration-200 bg-black border border-black hover:bg-white hover:text-black lg:px-8 lg:mb-0"
+            >
+              Read Documentation
+            </a>
+            <a
+              href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
+              className="mx-3 font-bold hover:underline"
+            >
+              View on GitHub
+            </a>
+          </div>
+        </div>
+      </Container>
+    </footer>
+  )
+}

examples/cms-webiny/components/header.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+  return (
+    <h2 className="mt-8 mb-20 text-2xl font-bold leading-tight tracking-tight md:text-4xl md:tracking-tighter">
+      <Link href="/">
+        <a className="hover:underline">Blog</a>
+      </Link>
+      .
+    </h2>
+  )
+}

examples/cms-webiny/components/hero-post.tsx

@@ -0,0 +1,43 @@
+import Avatar from '../components/avatar'
+import DateFormatter from '../components/date-formatter'
+import CoverImage from '../components/cover-image'
+import Link from 'next/link'
+
+export default function HeroPost({
+  title,
+  coverImage,
+  createdOn,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <section>
+      <div className="mb-8 md:mb-16">
+        <CoverImage
+          title={title}
+          src={coverImage}
+          slug={slug}
+          height={620}
+          width={1240}
+        />
+      </div>
+      <div className="mb-20 md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 md:mb-28">
+        <div>
+          <h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
+            <Link href={`/posts/${slug}`}>
+              <a className="hover:underline">{title}</a>
+            </Link>
+          </h3>
+          <div className="mb-4 text-lg md:mb-0">
+            <DateFormatter dateString={createdOn} />
+          </div>
+        </div>
+        <div>
+          <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
+          <Avatar name={author.name} picture={author.picture} />
+        </div>
+      </div>
+    </section>
+  )
+}