first commit

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

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 (
+              <Paragraph key={index}>
+                <ContentBlocks content={data.content} />
+              </Paragraph>
+            );
+          case "heading":
+            return (
+              <Heading key={index} level={data.attrs.level}>
+                <ContentBlocks content={data.content} />
+              </Heading>
+            );
+
+          case "bulletList":
+            return (
+              <BulletList key={index}>
+                <ContentBlocks content={data.content} />
+              </BulletList>
+            );
+
+          case "orderedList":
+            return (
+              <OrderedList key={index}>
+                <ContentBlocks content={data.content} />
+              </OrderedList>
+            );
+
+          case "dotImage":
+            return <DotImage key={index} {...data} />;
+
+          case "horizontalRule":
+            return <hr key={index} />;
+
+          case "blockquote":
+            return (
+              <BlockQuote key={index}>
+                <ContentBlocks content={data.content} />
+              </BlockQuote>
+            );
+
+          case "codeBlock":
+            return (
+              <CodeBlock language={data.attrs.language} key={index}>
+                <ContentBlocks content={data.content} />
+              </CodeBlock>
+            );
+
+          case "hardBreak":
+            return <br key={index} />;
+
+          case "text":
+            return <TextNode key={index} {...data} />;
+
+          case "listItem":
+            return (
+              <ListItem key={index}>
+                <ContentBlocks content={data.content} />
+              </ListItem>
+            );
+
+          default:
+            return <p>Block not supported</p>;
+        }
+      })}
+    </>
+  );
+};

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 = (
+    <DotCmsImage
+      {...props}
+      alt={`Cover Image for ${props.title}`}
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": props.slug,
+      })}
+    />
+  );
+
+  return (
+    <div className="-mx-5 sm:mx-0">
+      {props.slug ? (
+        <Link href={`/posts/${props.slug}`} aria-label={props.title}>
+          {image}
+        </Link>
+      ) : (
+        image
+      )}
+    </div>
+  );
+}

examples/cms-dotcms/components/date.tsx

@@ -0,0 +1,9 @@
+import { format } from "date-fns";
+
+export default function DateComponent({ dateString }) {
+  return (
+    <time dateTime={dateString}>
+      {format(new Date(dateString), "LLLL d, yyyy")}
+    </time>
+  );
+}

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 <Image {...params} loader={dotCmsLoader} />;
+};
+
+export default DotCmsImage;

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 (
+    <footer className="bg-accent-1 border-t border-accent-2">
+      <Container>
+        <div className="py-28 flex flex-col lg:flex-row items-center">
+          <h3 className="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
+            Statically Generated with Next.js.
+          </h3>
+          <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
+            <a
+              href="https://nextjs.org/docs/basic-features/pages"
+              className="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 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-dotcms/components/header.tsx

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

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

@@ -0,0 +1,59 @@
+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 (
+    <section>
+      <div className="mb-8 md:mb-16">
+        <CoverImage
+          width={2000}
+          height={1000}
+          title={title}
+          slug={slug}
+          objectFit="cover"
+          layout={"intrinsic"}
+          src={coverImage.idPath}
+          alt={`Cover Image for ${title}`}
+          className={cn("shadow-small", {
+            "hover:shadow-medium transition-shadow duration-200": slug,
+          })}
+        />
+      </div>
+      <div className="md:grid md:grid-cols-2 md:gap-16 lg:col-gap-8  mb-20 md:mb-28">
+        <div>
+          <h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
+            <Link
+              as={`/posts/${slug}`}
+              href="/posts/[slug]"
+              className="hover:underline"
+            >
+              {title}
+            </Link>
+          </h3>
+          <div className="mb-4 text-lg md:mb-0">
+            <DateComponent dateString={date} />
+          </div>
+        </div>
+        <div>
+          <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
+          {author.length ? (
+            <Avatar
+              name={`${author[0].firstName} ${author[0].lastName}`}
+              picture={author[0].profilePhoto}
+            />
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}

examples/cms-dotcms/components/intro.tsx

@@ -0,0 +1,28 @@
+import { CMS_NAME, CMS_URL } from "@lib/constants";
+
+export default function Intro() {
+  return (
+    <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
+      <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
+        Blog.
+      </h1>
+      <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
+        A statically generated blog example using{" "}
+        <a
+          href="https://nextjs.org/"
+          className="underline hover:text-success duration-200 transition-colors"
+        >
+          Next.js
+        </a>{" "}
+        and{" "}
+        <a
+          href={CMS_URL}
+          className="underline hover:text-success duration-200 transition-colors"
+        >
+          {CMS_NAME}
+        </a>
+        .
+      </h4>
+    </section>
+  );
+}

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 (
+    <>
+      <Meta />
+      <div className="min-h-screen">
+        <Alert preview={preview} />
+        <main>{children}</main>
+      </div>
+      <Footer />
+    </>
+  );
+}

examples/cms-dotcms/components/meta.tsx

@@ -0,0 +1,42 @@
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "@lib/constants";
+
+export default function Meta() {
+  return (
+    <Head>
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/favicon/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/favicon/site.webmanifest" />
+      <link
+        rel="mask-icon"
+        href="/favicon/safari-pinned-tab.svg"
+        color="#000000"
+      />
+      <link rel="shortcut icon" href="/favicon/favicon.ico" />
+      <meta name="msapplication-TileColor" content="#000000" />
+      <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+      <meta name="theme-color" content="#000" />
+      <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
+      <meta
+        name="description"
+        content={`A statically generated blog example using Next.js and ${CMS_NAME}.`}
+      />
+      <meta property="og:image" content={HOME_OG_IMAGE_URL} />
+    </Head>
+  );
+}

examples/cms-dotcms/components/more-stories.tsx

@@ -0,0 +1,24 @@
+import PostPreview from "@components/post-preview";
+
+export default function MoreStories({ posts }) {
+  return (
+    <section>
+      <h2 className="mb-8 text-6xl font-bold leading-tight tracking-tighter md:text-7xl">
+        More Stories
+      </h2>
+      <div className="grid grid-cols-1 gap-20 mb-32 md:grid-cols-2 md:gap-y-16 lg:gap-y-32 md:gap-x-32">
+        {posts.map((post) => (
+          <PostPreview
+            key={post.urlTitle}
+            title={post.title}
+            coverImage={post.image}
+            date={post.postingDate}
+            author={post.author}
+            slug={post.urlTitle}
+            excerpt={post.teaser}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

examples/cms-dotcms/components/post-body.tsx

@@ -0,0 +1,26 @@
+import { ContentBlocks } from "./content-blocks";
+import DateComponent from "./date";
+import Avatar from "./avatar";
+
+export default function PostBody({ content }) {
+  return (
+    <div className="prose lg:prose-xl mx-auto max-w-2xl">
+      <div className="mb-6 block md:hidden">
+        {content.author.length ? (
+          <Avatar
+            name={`${content.author[0].firstName} ${content.author[0].lastName}`}
+            picture={content.author[0].profilePhoto}
+          />
+        ) : null}
+      </div>
+      <div className="mb-6 text-lg">
+        {content.postingDate !== "now" ? (
+          <div className="mb-6 text-lg">
+            Posted <DateComponent dateString={content.postingDate} />
+          </div>
+        ) : null}
+      </div>
+      <ContentBlocks content={content.blogContent.json.content} />
+    </div>
+  );
+}

examples/cms-dotcms/components/post-header.tsx

@@ -0,0 +1,29 @@
+import Avatar from "@components/avatar";
+import CoverImage from "@components/cover-image";
+import PostTitle from "@components/post-title";
+
+export default function PostHeader({ title, coverImage, author }) {
+  return (
+    <>
+      <PostTitle>{title}</PostTitle>
+      <div className="hidden md:block md:mb-12">
+        {author.length ? (
+          <Avatar
+            name={`${author[0].firstName} ${author[0].lastName}`}
+            picture={author[0].profilePhoto}
+          />
+        ) : null}
+      </div>
+      <div className="mb-8 md:mb-16 sm:mx-0">
+        <CoverImage
+          title={title}
+          width={2000}
+          height={1000}
+          src={coverImage.idPath}
+          objectFit="cover"
+          layout={"intrinsic"}
+        />
+      </div>
+    </>
+  );
+}

examples/cms-dotcms/components/post-preview.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import Avatar from "@components/avatar";
+import DateComponent from "@components/date";
+import CoverImage from "./cover-image";
+
+export default function PostPreview({
+  title,
+  coverImage,
+  date,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <div>
+      <div className="mb-5">
+        <CoverImage
+          width={1200}
+          height={600}
+          title={title}
+          slug={slug}
+          src={coverImage.idPath}
+          objectFit="cover"
+          layout={"intrinsic"}
+        />
+      </div>
+      <h3 className="mb-3 text-3xl leading-snug">
+        <Link href={`/posts/${slug}`} className="hover:underline">
+          {title}
+        </Link>
+      </h3>
+      {date !== "now" ? (
+        <div className="mb-4 text-lg">
+          <DateComponent dateString={date} />
+        </div>
+      ) : null}
+      <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
+      {author.length ? (
+        <Avatar
+          name={`${author[0].firstName} ${author[0].lastName}`}
+          picture={author[0].profilePhoto}
+        />
+      ) : null}
+    </div>
+  );
+}

examples/cms-dotcms/components/post-title.tsx

@@ -0,0 +1,7 @@
+export default function PostTitle({ children }) {
+  return (
+    <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
+      {children}
+    </h1>
+  );
+}

examples/cms-dotcms/components/section-separator.tsx

@@ -0,0 +1,3 @@
+export default function SectionSeparator() {
+  return <hr className="border-accent-2 mt-28 mb-24" />;
+}