+
+
+
+ )
+}
diff --git a/examples/cms-graphcms/components/avatar.js b/examples/cms-graphcms/components/avatar.js
new file mode 100644
index 0000000000000..2dcc7eee10693
--- /dev/null
+++ b/examples/cms-graphcms/components/avatar.js
@@ -0,0 +1,8 @@
+export default function Avatar({ name, picture }) {
+ return (
+
+ {preview ? (
+ <>
+ This 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-graphcms/components/container.js b/examples/cms-graphcms/components/container.js
new file mode 100644
index 0000000000000..fc1c29dfb0747
--- /dev/null
+++ b/examples/cms-graphcms/components/container.js
@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+ return {name}
+ {children}
+}
diff --git a/examples/cms-graphcms/components/cover-image.js b/examples/cms-graphcms/components/cover-image.js
new file mode 100644
index 0000000000000..e1830c8286bc7
--- /dev/null
+++ b/examples/cms-graphcms/components/cover-image.js
@@ -0,0 +1,28 @@
+import cn from 'classnames'
+import Link from 'next/link'
+
+export default function CoverImage({ title, url, slug }) {
+ const image = (
+
+ {slug ? (
+
+ {image}
+
+ ) : (
+ image
+ )}
+
+ )
+}
diff --git a/examples/cms-graphcms/components/date.js b/examples/cms-graphcms/components/date.js
new file mode 100644
index 0000000000000..eac5681378bfd
--- /dev/null
+++ b/examples/cms-graphcms/components/date.js
@@ -0,0 +1,6 @@
+import { parseISO, format } from 'date-fns'
+
+export default function Date({ dateString }) {
+ const date = parseISO(dateString)
+ return
+}
diff --git a/examples/cms-graphcms/components/footer.js b/examples/cms-graphcms/components/footer.js
new file mode 100644
index 0000000000000..dbde8ff306efd
--- /dev/null
+++ b/examples/cms-graphcms/components/footer.js
@@ -0,0 +1,30 @@
+import Container from './container'
+import { EXAMPLE_PATH } from '../lib/constants'
+
+export default function Footer() {
+ return (
+
+ )
+}
diff --git a/examples/cms-graphcms/components/header.js b/examples/cms-graphcms/components/header.js
new file mode 100644
index 0000000000000..562e7e3eebb6a
--- /dev/null
+++ b/examples/cms-graphcms/components/header.js
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+ return (
+ + + Blog + + . +
+ ) +} diff --git a/examples/cms-graphcms/components/hero-post.js b/examples/cms-graphcms/components/hero-post.js new file mode 100644 index 0000000000000..fd2f17cb5b3d8 --- /dev/null +++ b/examples/cms-graphcms/components/hero-post.js @@ -0,0 +1,37 @@ +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 ( +
+
+
+
+
+
+ + + {title} + +
+
+
+
+
+ {excerpt}
++ Blog. +
++ A statically generated blog example using{' '} + + Next.js + {' '} + and{' '} + + {CMS_NAME} + + . +
+
+ {children}
+
+
+
+ )
+}
diff --git a/examples/cms-graphcms/components/meta.js b/examples/cms-graphcms/components/meta.js
new file mode 100644
index 0000000000000..d9c48d5831e13
--- /dev/null
+++ b/examples/cms-graphcms/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/cms-graphcms/components/more-stories.js b/examples/cms-graphcms/components/more-stories.js
new file mode 100644
index 0000000000000..dcdd9b4e6ae7b
--- /dev/null
+++ b/examples/cms-graphcms/components/more-stories.js
@@ -0,0 +1,24 @@
+import PostPreview from '../components/post-preview'
+
+export default function MoreStories({ posts }) {
+ return (
+ + More Stories +
+
+ {posts.map((post) => (
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/cms-graphcms/components/post-preview.js b/examples/cms-graphcms/components/post-preview.js
new file mode 100644
index 0000000000000..eed9789d4b100
--- /dev/null
+++ b/examples/cms-graphcms/components/post-preview.js
@@ -0,0 +1,31 @@
+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 (
+
+ )
+}
diff --git a/examples/cms-graphcms/components/post-styles.module.css b/examples/cms-graphcms/components/post-styles.module.css
new file mode 100644
index 0000000000000..f0eb9e24da9ec
--- /dev/null
+++ b/examples/cms-graphcms/components/post-styles.module.css
@@ -0,0 +1,22 @@
+.post {
+ @apply text-lg leading-relaxed;
+}
+
+.post p,
+.post ul,
+.post ol,
+.post blockquote {
+ @apply my-6;
+}
+
+.post h1 {
+ @apply mt-12 mb-4 text-4xl leading-snug;
+}
+
+.post h2 {
+ @apply mt-12 mb-4 text-3xl leading-snug;
+}
+
+.post h3 {
+ @apply mt-8 mb-4 text-2xl leading-snug;
+}
diff --git a/examples/cms-graphcms/components/post-title.js b/examples/cms-graphcms/components/post-title.js
new file mode 100644
index 0000000000000..edd8cba65c257
--- /dev/null
+++ b/examples/cms-graphcms/components/post-title.js
@@ -0,0 +1,7 @@
+export default function PostTitle({ children }) {
+ return (
+
+
+
+
+ + {children} +
+ ) +} diff --git a/examples/cms-graphcms/components/section-separator.js b/examples/cms-graphcms/components/section-separator.js new file mode 100644 index 0000000000000..4ca5c65fdc6ee --- /dev/null +++ b/examples/cms-graphcms/components/section-separator.js @@ -0,0 +1,3 @@ +export default function SectionSeparator() { + return+} diff --git a/examples/cms-graphcms/jsconfig.json b/examples/cms-graphcms/jsconfig.json new file mode 100644 index 0000000000000..36aa1a4dc28f1 --- /dev/null +++ b/examples/cms-graphcms/jsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "baseUrl": "." + } +} diff --git a/examples/cms-graphcms/lib/constants.js b/examples/cms-graphcms/lib/constants.js new file mode 100644 index 0000000000000..72f78132b6d2d --- /dev/null +++ b/examples/cms-graphcms/lib/constants.js @@ -0,0 +1,5 @@ +export const EXAMPLE_PATH = 'cms-graphcms' +export const CMS_NAME = 'GraphCMS' +export const CMS_URL = 'https://graphcms.com/' +export const HOME_OG_IMAGE_URL = + 'https://og-image.now.sh/Next.js%20Blog%20Example%20with%20**GraphCMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgdmlld0JveD0iMCAwIDMzMCA3NSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMzUuMjcgMTBMOS4wOCAyNXYzMGwxNy40Ni0xMFYzNWwtOC43MyA1VjMwbDE3LjQ2LTEwdjMwTC4zNSA3MGw4LjczIDVMNDQgNTVWNWwtOC43My01eiIvPjxwYXRoIGQ9Ik04OC40NSAyMC45MUg5NnYzMC4wNmMwIDQuODgtMS41MyA4LjYtNC41OCAxMS4xN0ExNi42IDE2LjYgMCAwMTgwLjM3IDY2Yy0yLjk0LjA3LTUuODYtLjYtOC41MS0xLjk1YTEzLjMgMTMuMyAwIDAxLTUuNjUtNS43NWw2LjU2LTRjMS41MiAyLjk2IDQuMTMgNC40NCA3Ljg0IDQuNDQgMi40NCAwIDQuMzUtLjY3IDUuNzUtMi4wMiAxLjQtMS4zNSAyLjEtMy4yNyAyLjEtNS43NnYtMy40MmMtMi4yOCAzLjItNS40NyA0LjgtOS41OCA0LjgtNC4wMS4xLTcuODctMS42Mi0xMC42LTQuN0ExNi40NCAxNi40NCAwIDAxNjQgMzYuMTVhMTYuMzkgMTYuMzkgMCAwMTQuMy0xMS40MkExMy43MyAxMy43MyAwIDAxNzguODggMjBjNC4xIDAgNy4zIDEuNiA5LjU3IDQuOHYtMy44OXptLTE0LjQgMjEuNDdhOC42NiA4LjY2IDAgMDAxMi4wNCAwIDguNTYgOC41NiAwIDAwMi4zNi02LjIyQTguNDggOC40OCAwIDAwODYuMSAzMGE4LjY2IDguNjYgMCAwMC0xMi4wMyAwIDguNDggOC40OCAwIDAwLTIuMzcgNi4xNiA4LjU2IDguNTYgMCAwMDIuMzcgNi4yMnoiLz48cGF0aCBkPSJNMTA4LjggMjUuODNhOC4xNyA4LjE3IDAgMDEzLjYtNC4zN2MxLjctLjk4IDMuNjQtMS40OCA1LjYtMS40NnY4LjczYTkuMTggOS4xOCAwIDAwLTYuMzkgMS40N2MtMS44OCAxLjI1LTIuODIgMy4zNC0yLjgyIDYuMjZWNTFIMTAxVjIwLjYzaDcuOHY1LjJ6Ii8%2BPHBhdGggZD0iTTE0NC4zIDIwLjg3aDcuN3YzMC4yNmgtNy43di0zLjU2Yy0yLjMyIDIuOTUtNS41NyA0LjQzLTkuNzcgNC40M2ExMy40NyAxMy40NyAwIDAxLTEwLjI1LTQuNjNBMTYuMTQgMTYuMTQgMCAwMTEyMC4wMSAzNmMtLjExLTQuMiAxLjQyLTguMyA0LjI3LTExLjM3QTEzLjQ3IDEzLjQ3IDAgMDExMzQuNTMgMjBjNC4yIDAgNy40NSAxLjQ4IDkuNzcgNC40M3YtMy41NnptLTE0LjI2IDIxLjI5YTcuOTMgNy45MyAwIDAwNS45MyAyLjRjMi4yMy4wNiA0LjM5LS44IDUuOTYtMi40QTguNCA4LjQgMCAwMDE0NC4zIDM2YTguNCA4LjQgMCAwMC0yLjM3LTYuMTYgOC4wMyA4LjAzIDAgMDAtNS45Ni0yLjQgNy45MyA3LjkzIDAgMDAtNS45MyAyLjRBOC40NSA4LjQ1IDAgMDAxMjcuNyAzNmE4LjQ1IDguNDUgMCAwMDIuMzQgNi4xNnoiLz48cGF0aCBkPSJNMTc0LjQgMjBjMy45NC0uMDQgNy43IDEuNjggMTAuMzIgNC43MmExNi42IDE2LjYgMCAwMTQuMjcgMTEuNTcgMTYuNiAxNi42IDAgMDEtNC4yNyAxMS41OCAxMy40MyAxMy40MyAwIDAxLTEwLjMxIDQuNzFjLTQuMiAwLTcuNDMtMS41LTkuNzEtNC41VjY0SDE1N1YyMC44OWg3Ljd2My42MmMyLjI4LTMgNS41MS00LjUgOS43LTQuNXptLTcuMzYgMjIuNTZhNy44NSA3Ljg1IDAgMDA1LjkzIDIuNDQgNy45NSA3Ljk1IDAgMDA1Ljk2LTIuNDQgOC42NCA4LjY0IDAgMDAyLjM3LTYuMjcgOC42NCA4LjY0IDAgMDAtMi4zNy02LjI3IDcuOTUgNy45NSAwIDAwLTUuOTYtMi40NCA3Ljg2IDcuODYgMCAwMC01LjkzIDIuNDQgOC43IDguNyAwIDAwLTIuMzQgNi4yNyA4LjcgOC43IDAgMDAyLjM0IDYuMjd6Ii8%2BPHBhdGggZD0iTTIxMS4yNyAxOS42NWMzLjE2LS4xIDYuMjEgMS4xNiA4LjQgMy40NiAyLjIyIDIuMzEgMy4zMyA1LjUgMy4zMyA5LjU3VjUyaC04VjMzLjY3YzAtMi4xLS41Ni0zLjctMS42OC00LjgxYTYuMDggNi4wOCAwIDAwLTQuNDgtMS42NyA2LjU3IDYuNTcgMCAwMC00Ljk4IDEuOTVjLTEuMjQgMS4zLTEuODcgMy4yNS0xLjg3IDUuODZ2MTdIMTk0VjhoOHYxNi4wNWMxLjk1LTIuOTMgNS4wNC00LjQgOS4yNy00LjR6Ii8%2BPHBhdGggZD0iTTI0My43NSA1MmMtNC40Ni4xLTguNzctMS41Ni0xMS45My00LjU4QTE1LjM4IDE1LjM4IDAgMDEyMjcgMzZhMTYuMDEgMTYuMDEgMCAwMTguNDYtMTMuODcgMTcuNDIgMTcuNDIgMCAwMTE2Ljc1LjA0IDEzLjA2IDEzLjA2IDAgMDE1LjQ3IDUuODNsLTMuNDMgMS44OWE5LjY0IDkuNjQgMCAwMC00LjEtNC4zNyAxMi42NSAxMi42NSAwIDAwLTYuNC0xLjYyIDEyLjMgMTIuMyAwIDAwLTguOSAzLjUyIDExLjUgMTEuNSAwIDAwLTMuNjMgOC41OCAxMS41IDExLjUgMCAwMDMuNjMgOC41OGMyLjcxIDIuNyA2LjYgNCAxMC40NyAzLjUgMy44OC0uNDggNy4yOC0yLjcgOS4xOC01Ljk3bDMuNSAxLjk1YTE0LjM4IDE0LjM4IDAgMDEtNS43OSA1LjggMTcuMDMgMTcuMDMgMCAwMS04LjQ2IDIuMTR6Ii8%2BPHBhdGggZD0iTTI5My41NyAyMGMzLjEtLjEyIDYuMTEgMS4wNyA4LjI4IDMuMjggMi4xIDIuMTggMy4xNSA1LjEyIDMuMTUgOC44M1Y1MWgtNC4wNVYzMi4xMWMwLTIuNjItLjY4LTQuNjUtMi4wNS02LjA4YTcuMSA3LjEgMCAwMC01LjQtMi4xNSA4IDggMCAwMC02LjEzIDIuNTFjLTEuNTYgMS42OC0yLjM0IDQuMjktMi4zNCA3Ljg0VjUxaC00LjA2VjMyLjExYzAtMi42Ni0uNjQtNC43LTEuOTItNi4xMWE2LjY5IDYuNjkgMCAwMC01LjIxLTIuMTIgOC41IDguNSAwIDAwLTYuMjMgMi41NGMtMS43IDEuNy0yLjU2IDQuMy0yLjU2IDcuOFY1MUgyNjFWMjAuNzNoNC4wNXY0LjQyQTEwLjQ3IDEwLjQ3IDAgMDEyNzQuNCAyMGM0LjQgMCA3LjUgMS44MyA5LjI5IDUuNSAyLjItMy42NyA1LjQ5LTUuNSA5Ljg5LTUuNXoiLz48cGF0aCBkPSJNMzExLjMgMjguNjVhMy42NyAzLjY3IDAgMDAxLjkzIDMuMjVjMS40NS44OCAzLjA0IDEuNTQgNC43IDEuOTZsNS41MSAxLjVjMS43OS40OCAzLjQgMS40MiA0LjY2IDIuNzJhNy4wNiA3LjA2IDAgMDExLjkgNS4xNCA3LjYgNy42IDAgMDEtMy4yNiA2LjM0Yy0yLjE2IDEuNjMtNC45NSAyLjQ0LTguMzggMi40My0yLjc2LjA4LTUuNDgtLjYtNy44NS0xLjk2YTEwLjYgMTAuNiAwIDAxLTQuNTEtNS4wN2wzLjYtMmE3LjI0IDcuMjQgMCAwMDMuMjMgMy43NWMxLjY3Ljk1IDMuNiAxLjQzIDUuNTQgMS4zOCAxLjgzLjA3IDMuNjQtLjM0IDUuMjUtMS4xOGEzLjk1IDMuOTUgMCAwMDIuMTEtMy42OWMuMDMtMS4zNC0uNy0yLjYtMS45LTMuMjlhMTcgMTcgMCAwMC00LjY4LTEuOTdsLTUuNTItMS41Yy0xLjc4LS40OC0zLjQtMS40LTQuNjgtMi42OWE2LjgyIDYuODIgMCAwMS0xLjkyLTUuMDUgNy42OSA3LjY5IDAgMDEzLjEzLTYuMjIgMTIuMTYgMTIuMTYgMCAwMTcuODYtMi41YzIuNC0uMDQgNC43OC41NCA2Ljg2IDEuN2ExMC41IDEwLjUgMCAwMTQuMzYgNC41NGwtMy41NSAxLjk1Yy0xLjIzLTIuODUtMy44LTQuMjgtNy42Ny00LjI4YTguOCA4LjggMCAwMC00Ljc0IDEuMjMgMy45MiAzLjkyIDAgMDAtMS45OSAzLjUxeiIvPjwvc3ZnPg%3D%3D' diff --git a/examples/cms-graphcms/lib/graphcms.js b/examples/cms-graphcms/lib/graphcms.js new file mode 100644 index 0000000000000..d29300f7a242f --- /dev/null +++ b/examples/cms-graphcms/lib/graphcms.js @@ -0,0 +1,150 @@ +async function fetchAPI(query, { variables, preview } = {}) { + const res = await fetch(process.env.GRAPHCMS_PROJECT_API, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${ + preview + ? process.env.GRAPHCMS_DEV_AUTH_TOKEN + : process.env.GRAPHCMS_PROD_AUTH_TOKEN + }`, + }, + body: JSON.stringify({ + query, + variables, + }), + }) + const json = await res.json() + + if (json.errors) { + console.log(process.env.NEXT_EXAMPLE_CMS_GCMS_PROJECT_ID) + console.error(json.errors) + throw new Error('Failed to fetch API') + } + + return json.data +} + +export async function getPreviewPostBySlug(slug) { + const data = await fetchAPI( + ` + query PostBySlug($slug: String!, $stage: Stage!) { + post(where: {slug: $slug}, stage: $stage) { + slug + } + }`, + { + preview: true, + variables: { + stage: 'DRAFT', + slug, + }, + } + ) + return data.post +} + +export async function getAllPostsWithSlug() { + const data = await fetchAPI(` + { + posts { + slug + } + } + `) + return data.posts +} + +export async function getAllPostsForHome(preview) { + const data = await fetchAPI( + ` + { + posts(orderBy: date_DESC, first: 20) { + title + slug + excerpt + date + coverImage { + url(transformation: { + image: { + resize: { + fit:crop, + width:2000, + height:1000 + } + } + }) + } + author { + name + picture { + url(transformation: { + image: { + resize: { + width:100, + height:100, + fit:crop + } + } + }) + } + } + } + } + `, + { preview } + ) + return data.posts +} + +export async function getPostAndMorePosts(slug, preview) { + const data = await fetchAPI( + ` + query PostBySlug($slug: String!, $stage: Stage!) { + post(stage: $stage, where: {slug: $slug}) { + title + slug + content { + html + } + date + ogImage: coverImage { + url(transformation: {image: {resize: {fit: crop, width: 2000, height: 1000}}}) + } + coverImage { + url(transformation: {image: {resize: {fit: crop, width: 2000, height: 1000}}}) + } + author { + name + picture { + url(transformation: {image: {resize: {fit: crop, width: 100, height: 100}}}) + } + } + } + morePosts: posts(orderBy: date_DESC, first: 2, where: {slug_not_in: [$slug]}) { + title + slug + excerpt + date + coverImage { + url(transformation: {image: {resize: {fit: crop, width: 2000, height: 1000}}}) + } + author { + name + picture { + url(transformation: {image: {resize: {fit: crop, width: 100, height: 100}}}) + } + } + } + } + `, + { + preview, + variables: { + stage: preview ? 'DRAFT' : 'PUBLISHED', + slug, + }, + } + ) + return data +} diff --git a/examples/cms-graphcms/package.json b/examples/cms-graphcms/package.json new file mode 100644 index 0000000000000..445ad29018c56 --- /dev/null +++ b/examples/cms-graphcms/package.json @@ -0,0 +1,21 @@ +{ + "name": "cms-graphcms", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "classnames": "2.2.6", + "date-fns": "2.10.0", + "next": "latest", + "react": "^16.13.0", + "react-dom": "^16.13.0" + }, + "devDependencies": { + "postcss-flexbugs-fixes": "^4.2.1", + "postcss-preset-env": "^6.7.0", + "tailwindcss": "^1.4.6" + } +} diff --git a/examples/cms-graphcms/pages/_app.js b/examples/cms-graphcms/pages/_app.js new file mode 100644 index 0000000000000..d56d9bf601a90 --- /dev/null +++ b/examples/cms-graphcms/pages/_app.js @@ -0,0 +1,7 @@ +import '../styles/index.css' + +function MyApp({ Component, pageProps }) { + return