first commit

examples/cms-drupal/components/alert.js

@@ -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 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-drupal/components/avatar.js

@@ -0,0 +1,27 @@
+import Image from "next/image";
+
+export default function Avatar({ author }) {
+  const name = author
+    ? author.firstName && author.lastName
+      ? `${author.firstName} ${author.lastName}`
+      : author.name
+    : null;
+
+  return (
+    <>
+      {author && (
+        <div className="flex items-center">
+          <div className="w-12 h-12 relative mr-4">
+            <Image
+              src={author.avatar.url}
+              layout="fill"
+              className="w-12 h-12 rounded-full mr-4"
+              alt={name}
+            />
+          </div>
+          <div className="text-xl font-bold">{name}</div>
+        </div>
+      )}
+    </>
+  );
+}

examples/cms-drupal/components/categories.js

@@ -0,0 +1,16 @@
+export default function Categories({ categories }) {
+  return (
+    <span className="ml-1">
+      under
+      {categories.edges.length > 0 ? (
+        categories.edges.map((category, index) => (
+          <span key={index} className="ml-1">
+            {category.node.name}
+          </span>
+        ))
+      ) : (
+        <span className="ml-1">{categories.edges.node.name}</span>
+      )}
+    </span>
+  );
+}

examples/cms-drupal/components/container.js

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

examples/cms-drupal/components/cover-image.js

@@ -0,0 +1,28 @@
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function CoverImage({ title, coverImage, slug }) {
+  const image = (
+    <Image
+      width={2000}
+      height={1000}
+      alt={`Cover Image for ${title}`}
+      src={coverImage?.sourceUrl}
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
+      })}
+    />
+  );
+  return (
+    <div className="sm:mx-0">
+      {slug ? (
+        <Link href={slug} aria-label={title}>
+          {image}
+        </Link>
+      ) : (
+        image
+      )}
+    </div>
+  );
+}

examples/cms-drupal/components/date.js

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

examples/cms-drupal/components/footer.js

@@ -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-drupal/components/header.js

@@ -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-drupal/components/hero-post.js

@@ -0,0 +1,44 @@
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
+
+export default function HeroPost({
+  title,
+  coverImage,
+  date,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <section>
+      <div className="mb-8 md:mb-16">
+        {coverImage && (
+          <CoverImage title={title} coverImage={coverImage} slug={slug} />
+        )}
+      </div>
+      <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
+        <div>
+          <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
+            <Link
+              href={slug}
+              className="hover:underline"
+              dangerouslySetInnerHTML={{ __html: title }}
+            ></Link>
+          </h3>
+          <div className="mb-4 md:mb-0 text-lg">
+            <Date dateString={date} />
+          </div>
+        </div>
+        <div>
+          <div
+            className="text-lg leading-relaxed mb-4"
+            dangerouslySetInnerHTML={{ __html: excerpt }}
+          />
+          <Avatar author={author} />
+        </div>
+      </div>
+    </section>
+  );
+}

examples/cms-drupal/components/intro.js

@@ -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-drupal/components/layout.js

@@ -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-drupal/components/meta.js

@@ -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-drupal/components/more-stories.js

@@ -0,0 +1,32 @@
+import { absoluteURL } from "../lib/api";
+import PostPreview from "./post-preview";
+
+export default function MoreStories({ posts }) {
+  return (
+    <section>
+      <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
+        More Stories
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-16 lg:gap-32 gap-20 md:gap-32 mb-32">
+        {posts.map((node) => (
+          <PostPreview
+            key={node.id}
+            title={node.title}
+            coverImage={{
+              sourceUrl: absoluteURL(node.field_image.uri.url),
+            }}
+            date={node.created}
+            author={{
+              name: node.uid.field_name,
+              avatar: {
+                url: absoluteURL(node.uid.user_picture.uri.url),
+              },
+            }}
+            slug={node.path.alias}
+            excerpt={node.body.summary}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

examples/cms-drupal/components/post-body.js

@@ -0,0 +1,12 @@
+import styles from "./post-body.module.css";
+
+export default function PostBody({ content }) {
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div
+        className={styles.content}
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+    </div>
+  );
+}

examples/cms-drupal/components/post-body.module.css

@@ -0,0 +1,76 @@
+.content {
+  @apply text-lg leading-relaxed;
+}
+
+.content p,
+.content ul,
+.content ol,
+.content blockquote {
+  @apply my-6;
+}
+
+.content a {
+  @apply underline;
+}
+
+.content ul,
+.content ol {
+  @apply pl-4;
+}
+
+.content ul {
+  @apply list-disc;
+}
+
+.content ol {
+  @apply list-decimal;
+}
+
+.content ul > li > ul,
+.content ol > li > ol {
+  @apply my-0 ml-4;
+}
+
+.content ul > li > ul {
+  list-style: circle;
+}
+
+.content h2 {
+  @apply text-3xl mt-12 mb-4 leading-snug;
+}
+
+.content h3 {
+  @apply text-2xl mt-8 mb-4 leading-snug;
+}
+
+.content h4 {
+  @apply text-xl mt-6 mb-4 leading-snug;
+}
+
+.content pre {
+  @apply whitespace-pre overflow-x-auto p-4 text-sm leading-tight border border-gray-400 bg-gray-100;
+}
+
+.content code {
+  @apply text-sm;
+}
+
+.content figcaption {
+  @apply text-center text-sm;
+}
+
+.content blockquote {
+  @apply border-l-4 border-gray-500 bg-gray-200 italic ml-0 py-4 px-6;
+}
+
+.content blockquote p {
+  @apply mt-0;
+}
+
+.content blockquote cite {
+  @apply not-italic;
+}
+
+.content audio {
+  @apply w-full;
+}

examples/cms-drupal/components/post-header.js

@@ -0,0 +1,34 @@
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
+import Categories from "../components/categories";
+
+export default function PostHeader({
+  title,
+  coverImage,
+  date,
+  author,
+  categories,
+}) {
+  return (
+    <>
+      <PostTitle>{title}</PostTitle>
+      <div className="hidden md:block md:mb-12">
+        <Avatar author={author} />
+      </div>
+      <div className="mb-8 md:mb-16 sm:mx-0">
+        <CoverImage title={title} coverImage={coverImage} />
+      </div>
+      <div className="max-w-2xl mx-auto">
+        <div className="block md:hidden mb-6">
+          <Avatar author={author} />
+        </div>
+        <div className="mb-6 text-lg">
+          Posted <Date dateString={date} />
+          {categories?.length ? <Categories categories={categories} /> : null}
+        </div>
+      </div>
+    </>
+  );
+}

examples/cms-drupal/components/post-preview.js

@@ -0,0 +1,36 @@
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+
+export default function PostPreview({
+  title,
+  coverImage,
+  date,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <div>
+      <div className="mb-5">
+        <CoverImage title={title} coverImage={coverImage} slug={slug} />
+      </div>
+      <h3 className="text-3xl mb-3 leading-snug">
+        <Link
+          href={slug}
+          className="hover:underline"
+          dangerouslySetInnerHTML={{ __html: title }}
+        ></Link>
+      </h3>
+      <div className="text-lg mb-4">
+        <Date dateString={date} />
+      </div>
+      <div
+        className="text-lg leading-relaxed mb-4"
+        dangerouslySetInnerHTML={{ __html: excerpt }}
+      />
+      <Avatar author={author} />
+    </div>
+  );
+}

examples/cms-drupal/components/post-title.js

@@ -0,0 +1,8 @@
+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"
+      dangerouslySetInnerHTML={{ __html: children }}
+    />
+  );
+}

examples/cms-drupal/components/section-separator.js

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

examples/cms-drupal/components/tags.js

@@ -0,0 +1,14 @@
+export default function Tags({ tags }) {
+  return (
+    <div className="max-w-2xl mx-auto">
+      <p className="mt-8 text-lg font-bold">
+        Tagged
+        {tags.edges.map((tag, index) => (
+          <span key={index} className="ml-4 font-normal">
+            {tag.node.name}
+          </span>
+        ))}
+      </p>
+    </div>
+  );
+}