chore(examples): Add dotCMS example (#38214)

<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we
request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

This adds a new example under cms-dotcms/. Is a general-purpose example
that should allow developers to undestand how to use next.js with dotCMS
apis.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

Co-authored-by: Daniel Esteves <estevesd8@gmail.com>
Co-authored-by: Will Ezell <will@dotcms.com>
Co-authored-by: Arcadio Quintero A <oidacra@gmail.com>
Co-authored-by: Rafael <rjvelazco21@gmail.com>

examples/cms-agilitycms/README.md

@@ -33,6 +33,7 @@ Once you have access to [the environment variables you'll need](#step-15-set-up-
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
 - [Blog Starter](/examples/blog-starter)
 - [Builder.io](/examples/cms-builder-io)
+- [DotCMS](/examples/cms-dotcms)
 - [Enterspeed](/examples/cms-enterspeed)
 
 ## How to use

examples/cms-builder-io/README.md

@@ -97,4 +97,5 @@ Alternatively, you can deploy using our template by clicking on the Deploy butto
 - [Kontent](/examples/cms-kontent)
 - [Ghost](/examples/cms-ghost)
 - [Blog Starter](/examples/blog-starter)
+- [DotCMS](/examples/cms-dotcms)
 - [Enterspeed](/examples/cms-enterspeed)

examples/cms-buttercms/README.md

@@ -34,6 +34,7 @@ Once you have access to your Butter API token, you can deploy your Butterized pr
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
 - [Blog Starter](/examples/blog-starter)
 - [Builder.io](/examples/cms-builder-io)
+- [DotCMS](/examples/cms-dotcms)
 - [Enterspeed](/examples/cms-enterspeed)
 
 ## How to use

examples/cms-contentful/README.md

@@ -30,6 +30,7 @@ Using the Deploy Button below, you'll deploy the Next.js project as well as conn
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
 - [Blog Starter](/examples/blog-starter)
 - [Builder.io](/examples/cms-builder-io)
+- [DotCMS](/examples/cms-dotcms)
 - [Enterspeed](/examples/cms-enterspeed)
 
 ## How to use

examples/cms-cosmic/README.md

@@ -30,6 +30,7 @@ Once you have access to [the environment variables you'll need](#step-3-set-up-e
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
 - [Blog Starter](/examples/blog-starter)
 - [Builder.io](/examples/cms-builder-io)
+- [DotCMS](/examples/cms-dotcms)
 - [Enterspeed](/examples/cms-enterspeed)
 
 ## How to use

examples/cms-datocms/README.md

@@ -24,6 +24,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 - [Umbraco Heartcore](/examples/cms-umbraco-heartcore)
 - [Blog Starter](/examples/blog-starter)
 - [Builder.io](/examples/cms-builder-io)
+- [DotCMS](/examples/cms-dotcms)
 - [Enterspeed](/examples/cms-enterspeed)
 
 ## Deploy your own

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

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_DOTCMS_HOST=""
+NEXT_PREVIEW_SECRET_TOKEN=""
+DOTCMS_PREVIEW_SECRET=""

examples/cms-dotcms/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

examples/cms-dotcms/.gitignore

@@ -0,0 +1,38 @@
+# 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
+/.env
+
+# typescript
+*.tsbuildinfo

examples/cms-dotcms/README.md

@@ -0,0 +1,56 @@
+# A statically generated blog example using Next.js and dotCMS
+
+This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [dotCMS](https://dotcms.com/) as the data source.
+
+## Demo
+
+### [https://nextjs-dotcms-blog.vercel.app/](https://nextjs-dotcms-blog.vercel.app/)
+
+## Deploy your own
+
+Using the Deploy Button below, you'll deploy the Next.js project.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FdotCMS%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-dotcms&project-name=nextjs-dotcms-blog&repository-name=nextjs-dotcms-blog&demo-title=Next.js+Blog&demo-description=Static+blog+with+multiple+authors+using+Preview+Mode&demo-url=https%3A%2F%2Fnext-blog-dotcms.vercel.app%2F)
+
+### Related examples
+
+- [WordPress](/examples/cms-wordpress)
+- [DatoCMS](/examples/cms-datocms)
+- [Sanity](/examples/cms-sanity)
+- [TakeShape](/examples/cms-takeshape)
+- [Prismic](/examples/cms-prismic)
+- [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)
+- [Ghost](/examples/cms-ghost)
+- [Contentful](/examples/cms-contentful)
+- [Blog Starter](/examples/blog-starter)
+
+## How to use
+
+Rename `.env.local.example` to `.env.local` and complete the variables:
+
+`NEXT_PUBLIC_DOTCMS_HOST` is the dotCMS host, you can use `https://demo.dotcms.com`
+`DOTCMS_TOKEN` for the demo site, you can generate the token using:
+
+```
+curl -H "Content-Type:application/json" --insecure  -X POST -d  '
+{ "user":"admin@dotcms.com", "password":"admin", "expirationDays": 10 }
+' http://demo.dotcms.com:8080/api/v1/authentication/api-token
+```
+
+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-dotcms cms-dotcms-app
+# or
+yarn create next-app --example cms-dotcms cms-dotcms-app
+# or
+pnpm create next-app --example cms-dotcms cms-dotcms-app
+```
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-dotcms&project-name=nextjs-dotcms-blog&repository-name=nextjs-dotcms-blog&demo-title=Next.js+Blog&demo-description=Static+blog+with+multiple+authors+using+Preview+Mode&demo-url=https%3A%2F%2Fnext-blog-dotcms.vercel.app%2F)

examples/cms-dotcms/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-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/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
+                className="underline hover:text-success duration-200 transition-colors"
+              >
+                available on GitHub
+              </a>
+              .
+            </>
+          )}
+        </div>
+      </Container>
+    </div>
+  )
+}

examples/cms-dotcms/components/avatar.tsx

@@ -0,0 +1,19 @@
+import DotCmsImage from './dotcms-image'
+
+export default function Avatar({ name, picture }) {
+  return (
+    <div className="flex items-center ">
+      <div className="w-12 h-12 relative mr-4">
+        {picture?.idPath ? (
+          <DotCmsImage
+            src={picture?.idPath}
+            layout="fill"
+            className="rounded-full"
+            alt={name}
+          />
+        ) : null}
+      </div>
+      <div className="text-xl font-bold">{name}</div>
+    </div>
+  )
+}

examples/cms-dotcms/components/blocks.tsx

@@ -0,0 +1,98 @@
+import cn from 'classnames'
+import DotCmsImage from './dotcms-image'
+import Link from 'next/link'
+
+export const Bold = ({ children }) => <strong>{children}</strong>
+export const Italic = ({ children }) => <em>{children}</em>
+export const Strike = ({ children }) => <s>{children}</s>
+export const Underline = ({ children }) => <u>{children}</u>
+export const DotLink = ({ attrs: { href, target }, children }) => {
+  const regEx = /https?:\/\//
+
+  return regEx.test(href) ? (
+    <a href={href} rel="noopener noreferrer" target="_blank">
+      {children}
+    </a>
+  ) : (
+    <Link href={href} target={target || '_self'}>
+      {children}
+    </Link>
+  )
+}
+
+const nodeMarks = {
+  link: DotLink,
+  bold: Bold,
+  underline: Underline,
+  italic: Italic,
+  strike: Strike,
+}
+
+export const TextNode = (props) => {
+  const { marks = [], text } = props
+  const mark = marks[0] || { type: '', attrs: {} }
+  const newProps = { ...props, marks: marks.slice(1) }
+  const Component = nodeMarks[mark?.type]
+
+  if (!Component) {
+    return text
+  }
+
+  return (
+    <Component attrs={mark.attrs}>
+      <TextNode {...newProps} />
+    </Component>
+  )
+}
+
+export const DotImage = ({ attrs: { textAlign, data } }) => {
+  const { asset, title } = data
+  const [imgTitle] = title.split('.')
+
+  return (
+    <DotCmsImage
+      objectFit="cover"
+      style={{ textAlign: textAlign }}
+      width="800"
+      height="400"
+      alt={`Cover Image for ${title}`}
+      className={cn('shadow-small', {
+        'hover:shadow-medium transition-shadow  duration-200': imgTitle,
+      })}
+      src={asset}
+    />
+  )
+}
+
+export const ListItem = ({ children }) => {
+  return <li>{children}</li>
+}
+
+export const OrderedList = ({ children }) => {
+  return <ol>{children}</ol>
+}
+
+export const Paragraph = ({ children }) => {
+  return <p>{children}</p>
+}
+
+export const BulletList = ({ children }) => {
+  return <ul>{children}</ul>
+}
+
+export const Heading = ({ level, children }) => {
+  const Tag = `h${level}` as keyof JSX.IntrinsicElements
+  return <Tag>{children}</Tag>
+}
+
+export const BlockQuote = ({ children }) => {
+  return <blockquote>{children}</blockquote>
+}
+
+export const CodeBlock = ({ language, children }) => {
+  return (
+    <pre data-language={language}>
+      <code>{children}</code>
+    </pre>
+  )
+}

examples/cms-dotcms/components/container.tsx

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