Add DatoCMS example

examples/cms-datocms/components/nav.js

@@ -0,0 +1,20 @@
+import Link from 'next/link'
+
+export default function Nav() {
+  return (
+    <nav className="container mx-auto">
+      <ul className="flex justify-between items-center py-8">
+        <li>
+          <Link href="/">
+            <a className="no-underline">Home</a>
+          </Link>
+        </li>
+        <ul className="flex justify-between items-center">
+          <Link href="/blog">
+            <a>Blog</a>
+          </Link>
+        </ul>
+      </ul>
+    </nav>
+  )
+}

examples/cms-datocms/lib/api.js

@@ -0,0 +1,25 @@
+import 'isomorphic-unfetch'
+
+const API_URL = 'https://graphql.datocms.com'
+const API_TOKEN = ''
+
+export default async function fetchAPI(query, { variables, preview } = {}) {
+  const res = await fetch(API_URL + (preview ? '/preview' : ''), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${API_TOKEN}`,
+    },
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+  })
+
+  const json = await res.json()
+  if (json.errors) {
+    console.error(json.errors)
+    throw new Error('Failed to fetch API')
+  }
+  return json.data
+}

examples/cms-datocms/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "with-tailwindcss",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "isomorphic-unfetch": "3.0.0",
+    "next": "9.2.2-canary.21",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "postcss-preset-env": "^6.7.0",
+    "tailwindcss": "^1.1.4"
+  }
+}

examples/cms-datocms/pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/index.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/cms-datocms/pages/api/preview.js

@@ -0,0 +1,6 @@
+export default (req, res) => {
+  res.setPreviewData({})
+  res.json({
+    message: 'Preview Session Started',
+  })
+}

examples/cms-datocms/pages/blog/[...slug].js

@@ -0,0 +1,110 @@
+import { useRouter } from 'next/router'
+import ErrorPage from 'next/error'
+import Nav from '../../components/nav'
+import fetchAPI from '../../lib/api'
+
+export async function unstable_getStaticProps({ params, preview }) {
+  const data = await fetchAPI(
+    `
+  query BlogBySlug($slug: String) {
+    blog(filter: {slug: {eq: $slug}}) {
+      title
+      content
+      authors {
+        name
+        twitter
+        picture {
+          url(imgixParams: {w: 100, h: 100})
+        }
+      }
+    }
+  }
+  `,
+    {
+      preview,
+      variables: {
+        slug: params.slug.join('/'),
+      },
+    }
+  )
+  return {
+    props: data,
+  }
+}
+
+export async function unstable_getStaticPaths() {
+  const data = await fetchAPI(`
+  {
+    allBlogs {
+      slug
+    }
+  }
+  `)
+  return {
+    paths: data.allBlogs.map(blog => `/blog/${blog.slug}`),
+  }
+}
+
+function AuthorCard({ name, twitter, picture }) {
+  return (
+    <div className="flex mx-2">
+      <img className="block h-8 mx-2 rounded-full" src={picture} />
+      <div className="leading-none">
+        {name}
+        <br />
+        <a
+          href={`https://twitter.com/${twitter}`}
+          className="text-xs text-blue-600"
+        >
+          @{twitter}
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default ({ blog }) => {
+  const router = useRouter()
+
+  if (!router.isFallback && !blog) {
+    return <ErrorPage statusCode={404} />
+  }
+
+  return (
+    <>
+      <Nav />
+      <article>
+        <div className="my-10">
+          <div className="text-center my-10">
+            <h1 className="text-2xl text-4xl">
+              {router.isFallback ? 'Loading...' : blog.title}
+            </h1>
+            <time className="text-sm text-gray-600">
+              Thursday, February 6th 2020
+            </time>
+          </div>
+          <div className="container mx-auto flex justify-center my-4">
+            {blog?.authors.map(author => {
+              return (
+                <AuthorCard
+                  name={author.name}
+                  twitter={author.twitter}
+                  picture={author.picture.url}
+                />
+              )
+            })}
+          </div>
+        </div>
+        <hr />
+        <div className="container mx-auto my-10">
+          <div
+            className="mx-64"
+            dangerouslySetInnerHTML={{
+              __html: router.isFallback ? 'Loading...' : blog.content,
+            }}
+          />
+        </div>
+      </article>
+    </>
+  )
+}

examples/cms-datocms/pages/blog/index.js

@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import Nav from '../../components/nav'
+import fetchAPI from '../../lib/api'
+
+export async function unstable_getStaticProps({ preview }) {
+  const data = await fetchAPI(
+    `
+  {
+    allBlogs {
+      title
+      slug
+      excerpt
+      authors {
+        picture {
+          url(imgixParams: {w: 100, h: 100})
+        }
+      }
+    }
+  }
+  `,
+    { preview }
+  )
+  return {
+    props: data,
+  }
+}
+
+function BlogCard({ title, slug, excerpt, authors }) {
+  return (
+    <article className="my-10">
+      <time className="text-sm text-gray-600">Thursday, February 6th 2020</time>
+      <h2 className="text-2xl my-4">{title}</h2>
+      <div className="flex my-4">
+        {authors.map((author, index) => {
+          return (
+            <img
+              className={`block h-8 rounded-full ${index !== 0 ? '-ml-4' : ''}`}
+              src={author.picture.url}
+            />
+          )
+        })}
+      </div>
+      <div dangerouslySetInnerHTML={{ __html: excerpt }} />
+
+      <Link href="/blog/[...slug]" as={`/blog/${slug}`}>
+        <a className="text-blue-600 hover:text-blue-400">Read more →</a>
+      </Link>
+    </article>
+  )
+}
+
+export default ({ allBlogs }) => (
+  <>
+    <Nav />
+    <h1 className="text-4xl my-10 container mx-auto">Blog</h1>
+    <hr />
+    <section className="container mx-auto">
+      {allBlogs.map(blog => {
+        return <BlogCard {...blog} />
+      })}
+    </section>
+  </>
+)

examples/cms-datocms/pages/index.js

@@ -0,0 +1,8 @@
+import Nav from '../components/nav'
+export default () => {
+  return (
+    <>
+      <Nav />
+    </>
+  )
+}

examples/cms-datocms/postcss.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  plugins: [
+    'tailwindcss',
+    process.env.NODE_ENV === 'production'
+      ? [
+          '@fullhuman/postcss-purgecss',
+          {
+            content: [
+              './pages/**/*.{js,jsx,ts,tsx}',
+              './components/**/*.{js,jsx,ts,tsx}',
+            ],
+            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+          },
+        ]
+      : undefined,
+    'postcss-preset-env',
+  ],
+}

examples/cms-datocms/styles/index.css

@@ -0,0 +1,9 @@
+/* purgecss start ignore */
+@tailwind base;
+@tailwind components;
+/* purgecss end ignore */
+@tailwind utilities;
+
+p {
+  @apply my-6;
+}