diff --git a/examples/cms-agilitycms/README.md b/examples/cms-agilitycms/README.md index 39d2ae1c1d7c4..77614b2a2f7a7 100644 --- a/examples/cms-agilitycms/README.md +++ b/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 diff --git a/examples/cms-builder-io/README.md b/examples/cms-builder-io/README.md index c047a3d3b4b73..a3995f40c66fc 100644 --- a/examples/cms-builder-io/README.md +++ b/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) diff --git a/examples/cms-buttercms/README.md b/examples/cms-buttercms/README.md index 53ff1b125ad0c..19d5554eedee6 100644 --- a/examples/cms-buttercms/README.md +++ b/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 diff --git a/examples/cms-contentful/README.md b/examples/cms-contentful/README.md index dce91203d85e0..3002e636dba56 100644 --- a/examples/cms-contentful/README.md +++ b/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 diff --git a/examples/cms-cosmic/README.md b/examples/cms-cosmic/README.md index fbce6cd625710..8f5bd84111c5d 100644 --- a/examples/cms-cosmic/README.md +++ b/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 diff --git a/examples/cms-datocms/README.md b/examples/cms-datocms/README.md index 5ac92863d3096..b5eb1a852af68 100644 --- a/examples/cms-datocms/README.md +++ b/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 diff --git a/examples/cms-dotcms/.env.local.example b/examples/cms-dotcms/.env.local.example new file mode 100644 index 0000000000000..de332a396448a --- /dev/null +++ b/examples/cms-dotcms/.env.local.example @@ -0,0 +1,3 @@ +NEXT_PUBLIC_DOTCMS_HOST="" +NEXT_PREVIEW_SECRET_TOKEN="" +DOTCMS_PREVIEW_SECRET="" diff --git a/examples/cms-dotcms/.eslintrc.json b/examples/cms-dotcms/.eslintrc.json new file mode 100644 index 0000000000000..a2569c2c7ca0a --- /dev/null +++ b/examples/cms-dotcms/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "root": true, + "extends": "next/core-web-vitals" +} diff --git a/examples/cms-dotcms/.gitignore b/examples/cms-dotcms/.gitignore new file mode 100644 index 0000000000000..5eaa9b9933213 --- /dev/null +++ b/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 diff --git a/examples/cms-dotcms/README.md b/examples/cms-dotcms/README.md new file mode 100644 index 0000000000000..2ea73d441a83c --- /dev/null +++ b/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) diff --git a/examples/cms-dotcms/components/alert.tsx b/examples/cms-dotcms/components/alert.tsx new file mode 100644 index 0000000000000..bb6838dfdc8fa --- /dev/null +++ b/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 ( +
+ +
+ {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-dotcms/components/avatar.tsx b/examples/cms-dotcms/components/avatar.tsx new file mode 100644 index 0000000000000..b683a70db2ab7 --- /dev/null +++ b/examples/cms-dotcms/components/avatar.tsx @@ -0,0 +1,19 @@ +import DotCmsImage from './dotcms-image' + +export default function Avatar({ name, picture }) { + return ( +
+
+ {picture?.idPath ? ( + + ) : null} +
+
{name}
+
+ ) +} diff --git a/examples/cms-dotcms/components/blocks.tsx b/examples/cms-dotcms/components/blocks.tsx new file mode 100644 index 0000000000000..4aaa5ce68353f --- /dev/null +++ b/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 }) => {children} +export const Italic = ({ children }) => {children} +export const Strike = ({ children }) => {children} +export const Underline = ({ children }) => {children} +export const DotLink = ({ attrs: { href, target }, children }) => { + const regEx = /https?:\/\// + + return regEx.test(href) ? ( + + {children} + + ) : ( + + {children} + + ) +} + +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 ( + + + + ) +} + +export const DotImage = ({ attrs: { textAlign, data } }) => { + const { asset, title } = data + const [imgTitle] = title.split('.') + + return ( + + ) +} + +export const ListItem = ({ children }) => { + return
  • {children}
    • +} + +export const OrderedList = ({ children }) => { + return
      {children}
    +} + +export const Paragraph = ({ children }) => { + return

    {children}

    +} + +export const BulletList = ({ children }) => { + return +} + +export const Heading = ({ level, children }) => { + const Tag = `h${level}` as keyof JSX.IntrinsicElements + return {children} +} + +export const BlockQuote = ({ children }) => { + return
    {children}
    +} + +export const CodeBlock = ({ language, children }) => { + return ( + 
    +      {children}
+
    + ) +} diff --git a/examples/cms-dotcms/components/container.tsx b/examples/cms-dotcms/components/container.tsx new file mode 100644 index 0000000000000..fc1c29dfb0747 --- /dev/null +++ b/examples/cms-dotcms/components/container.tsx @@ -0,0 +1,3 @@ +export default function Container({ children }) { + return
    {children}
    +} diff --git a/examples/cms-dotcms/components/content-blocks.tsx b/examples/cms-dotcms/components/content-blocks.tsx new file mode 100644 index 0000000000000..dea23142b779e --- /dev/null +++ b/examples/cms-dotcms/components/content-blocks.tsx @@ -0,0 +1,90 @@ +import { + BlockQuote, + BulletList, + CodeBlock, + DotImage, + Heading, + ListItem, + OrderedList, + Paragraph, + TextNode, +} from './blocks' + +/* + dotCMS Block Editor is a new rich content editor that allows you to create your content as building blocks. + + More info: https://dotcms.com/docs/latest/block-editor +*/ + +export const ContentBlocks = ({ content }) => { + return ( + <> + {content?.map((data, index) => { + switch (data.type) { + case 'paragraph': + return ( + + + + ) + case 'heading': + return ( + + + + ) + + case 'bulletList': + return ( + + + + ) + + case 'orderedList': + return ( + + + + ) + + case 'dotImage': + return + + case 'horizontalRule': + return
    + + case 'blockquote': + return ( +
    + +
    + ) + + case 'codeBlock': + return ( + + + + ) + + case 'hardBreak': + return
    + + case 'text': + return + + case 'listItem': + return ( + + + + ) + + default: + return

    Block not supported

    + } + })} + + ) +} diff --git a/examples/cms-dotcms/components/cover-image.tsx b/examples/cms-dotcms/components/cover-image.tsx new file mode 100644 index 0000000000000..392f01b52e797 --- /dev/null +++ b/examples/cms-dotcms/components/cover-image.tsx @@ -0,0 +1,27 @@ +import DotCmsImage from './dotcms-image' +import Link from 'next/link' +import cn from 'classnames' + +export default function CoverImage(props) { + const image = ( + + ) + + return ( +
    + {props.slug ? ( + + {image} + + ) : ( + image + )} +
    + ) +} diff --git a/examples/cms-dotcms/components/date.tsx b/examples/cms-dotcms/components/date.tsx new file mode 100644 index 0000000000000..3a02dc6800b63 --- /dev/null +++ b/examples/cms-dotcms/components/date.tsx @@ -0,0 +1,9 @@ +import { format } from 'date-fns' + +export default function DateComponent({ dateString }) { + return ( + + ) +} diff --git a/examples/cms-dotcms/components/dotcms-image.tsx b/examples/cms-dotcms/components/dotcms-image.tsx new file mode 100644 index 0000000000000..4b43669af28a4 --- /dev/null +++ b/examples/cms-dotcms/components/dotcms-image.tsx @@ -0,0 +1,31 @@ +import Image from 'next/image' +const DEFAULT_QUALITY = 20 + +// https://dotcms.com/docs/latest/image-resizing-and-processing +const getUrlWithResizingParameters = ({ + src, + width, + quality = DEFAULT_QUALITY, +}) => { + const urlParams = [] + const lastSeparatorIdx = src.lastIndexOf('/') + const imageIdentifierAndField = src.slice(0, lastSeparatorIdx) + + urlParams.push(imageIdentifierAndField) + urlParams.push(width + 'w') + urlParams.push(quality + 'q') + + return urlParams.join('/') +} + +const dotCmsLoader = (props) => { + return `${process.env.NEXT_PUBLIC_DOTCMS_HOST}${getUrlWithResizingParameters( + props + )}` +} + +const DotCmsImage = (params) => { + return +} + +export default DotCmsImage diff --git a/examples/cms-dotcms/components/footer.tsx b/examples/cms-dotcms/components/footer.tsx new file mode 100644 index 0000000000000..b36b942c4a59c --- /dev/null +++ b/examples/cms-dotcms/components/footer.tsx @@ -0,0 +1,30 @@ +import Container from './container' +import { EXAMPLE_PATH } from '@lib/constants' + +export default function Footer() { + return ( + + ) +} diff --git a/examples/cms-dotcms/components/header.tsx b/examples/cms-dotcms/components/header.tsx new file mode 100644 index 0000000000000..562e7e3eebb6a --- /dev/null +++ b/examples/cms-dotcms/components/header.tsx @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Header() { + return ( +

    + + Blog + + . +

    + ) +} diff --git a/examples/cms-dotcms/components/hero-post.tsx b/examples/cms-dotcms/components/hero-post.tsx new file mode 100644 index 0000000000000..cfdc02c4b6e9e --- /dev/null +++ b/examples/cms-dotcms/components/hero-post.tsx @@ -0,0 +1,55 @@ +import Link from 'next/link' +import Avatar from '@components/avatar' +import DateComponent from '@components/date' +import CoverImage from '@components/cover-image' +import cn from 'classnames' + +export default function HeroPost({ + title, + coverImage, + date, + excerpt, + author, + slug, +}) { + return ( +
    +
    + +
    +
    +
    +

    + + {title} + +

    +
    + +
    +
    +
    +

    {excerpt}

    + {author.length ? ( + + ) : null} +
    +
    +
    + ) +} diff --git a/examples/cms-dotcms/components/intro.tsx b/examples/cms-dotcms/components/intro.tsx new file mode 100644 index 0000000000000..cfa4cad95f13c --- /dev/null +++ b/examples/cms-dotcms/components/intro.tsx @@ -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-dotcms/components/layout.tsx b/examples/cms-dotcms/components/layout.tsx new file mode 100644 index 0000000000000..15fb7e1f3db21 --- /dev/null +++ b/examples/cms-dotcms/components/layout.tsx @@ -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}
    +
    +