Add dotCMS example

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>
+}