+
+
+
+ )
+}
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..28bbeaa563605
--- /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..115cdf8bb8130 --- /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..c4c1bf7dfa503
--- /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..6da1acfb530b7
--- /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..1c06ba09dfc11 --- /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%2CPHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMzMCA3NSI%2BCiAgPHBhdGggZD0iTTM1LjI3IDEwbC04LjczIDUtOC43MyA1LTguNzMgNXYzMGw4LjczLTUgOC43My01VjM1bC04LjczIDVWMzBsOC43My01IDguNzMtNXYzMGwtOC43MyA1LTguNzMgNS04LjczIDUtOC43MyA1IDguNzMgNSA4LjczLTUgOC43My01IDguNzMtNUw0NCA1NVY1bC04LjczLTV6Ii8%2BCiAgPHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNODguNDUgMjAuOTFIOTZ2MzAuMDZjMCA0Ljg4LTEuNTMgOC42LTQuNTggMTEuMTdBMTYuNiAxNi42IDAgMDE4MC4zNyA2NmMtMi45NC4wNy01Ljg2LS42LTguNTEtMS45NWExMy4zIDEzLjMgMCAwMS01LjY1LTUuNzVsNi41Ni00YzEuNTIgMi45NiA0LjEzIDQuNDQgNy44NCA0LjQ0IDIuNDQgMCA0LjM1LS42NyA1Ljc1LTIuMDIgMS40LTEuMzUgMi4xLTMuMjcgMi4xLTUuNzZ2LTMuNDJjLTIuMjggMy4yLTUuNDcgNC44LTkuNTggNC44LTQuMDEuMS03Ljg3LTEuNjItMTAuNi00LjdBMTYuNDQgMTYuNDQgMCAwMTY0IDM2LjE1YTE2LjM5IDE2LjM5IDAgMDE0LjMtMTEuNDJBMTMuNzMgMTMuNzMgMCAwMTc4Ljg4IDIwYzQuMSAwIDcuMyAxLjYgOS41NyA0Ljh2LTMuODl6bS0xNC40IDIxLjQ3YTguNjYgOC42NiAwIDAwMTIuMDQgMCA4LjU2IDguNTYgMCAwMDIuMzYtNi4yMkE4LjQ4IDguNDggMCAwMDg2LjEgMzBhOC42NiA4LjY2IDAgMDAtMTIuMDMgMCA4LjQ4IDguNDggMCAwMC0yLjM3IDYuMTYgOC41NiA4LjU2IDAgMDAyLjM3IDYuMjJ6Ii8%2BCiAgPHBhdGggZD0iTTEwOC44IDI1LjgzYTguMTcgOC4xNyAwIDAxMy42LTQuMzdjMS43LS45OCAzLjY0LTEuNDggNS42LTEuNDZ2OC43M2E5LjE4IDkuMTggMCAwMC02LjM5IDEuNDdjLTEuODggMS4yNS0yLjgyIDMuMzQtMi44MiA2LjI2VjUxSDEwMVYyMC42M2g3Ljh2NS4yeiIvPgogIDxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE0NC4zIDIwLjg3aDcuN3YzMC4yNmgtNy43di0zLjU2Yy0yLjMyIDIuOTUtNS41NyA0LjQzLTkuNzcgNC40M2ExMy40NyAxMy40NyAwIDAxLTEwLjI1LTQuNjNBMTYuMTQgMTYuMTQgMCAwMTEyMC4wMSAzNmMtLjExLTQuMiAxLjQyLTguMyA0LjI3LTExLjM3QTEzLjQ3IDEzLjQ3IDAgMDExMzQuNTMgMjBjNC4yIDAgNy40NSAxLjQ4IDkuNzcgNC40M3YtMy41NnptLTE0LjI2IDIxLjI5YTcuOTMgNy45MyAwIDAwNS45MyAyLjRjMi4yMy4wNiA0LjM5LS44IDUuOTYtMi40QTguNCA4LjQgMCAwMDE0NC4zIDM2YTguNCA4LjQgMCAwMC0yLjM3LTYuMTYgOC4wMyA4LjAzIDAgMDAtNS45Ni0yLjQgNy45MyA3LjkzIDAgMDAtNS45MyAyLjRBOC40NSA4LjQ1IDAgMDAxMjcuNyAzNmE4LjQ1IDguNDUgMCAwMDIuMzQgNi4xNnoiLz4KICA8cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNzQuNCAyMGMzLjk0LS4wNCA3LjcgMS42OCAxMC4zMiA0LjcyYTE2LjYgMTYuNiAwIDAxNC4yNyAxMS41NyAxNi42IDE2LjYgMCAwMS00LjI3IDExLjU4IDEzLjQzIDEzLjQzIDAgMDEtMTAuMzEgNC43MWMtNC4yIDAtNy40My0xLjUtOS43MS00LjVWNjRIMTU3VjIwLjg5aDcuN3YzLjYyYzIuMjgtMyA1LjUxLTQuNSA5LjctNC41em0tNy4zNiAyMi41NmE3Ljg1IDcuODUgMCAwMDUuOTMgMi40NCA3Ljk1IDcuOTUgMCAwMDUuOTYtMi40NCA4LjY0IDguNjQgMCAwMDIuMzctNi4yNyA4LjY0IDguNjQgMCAwMC0yLjM3LTYuMjcgNy45NSA3Ljk1IDAgMDAtNS45Ni0yLjQ0IDcuODYgNy44NiAwIDAwLTUuOTMgMi40NCA4LjcgOC43IDAgMDAtMi4zNCA2LjI3IDguNyA4LjcgMCAwMDIuMzQgNi4yN3oiLz4KICA8cGF0aCBkPSJNMjExLjI3IDE5LjY1YzMuMTYtLjEgNi4yMSAxLjE2IDguNCAzLjQ2IDIuMjIgMi4zMSAzLjMzIDUuNSAzLjMzIDkuNTdWNTJoLThWMzMuNjdjMC0yLjEtLjU2LTMuNy0xLjY4LTQuODFhNi4wOCA2LjA4IDAgMDAtNC40OC0xLjY3IDYuNTcgNi41NyAwIDAwLTQuOTggMS45NWMtMS4yNCAxLjMtMS44NyAzLjI1LTEuODcgNS44NnYxN0gxOTRWOGg4djE2LjA1YzEuOTUtMi45MyA1LjA0LTQuNCA5LjI3LTQuNHoiLz4KICA8cGF0aCBkPSJNMjQzLjc1IDUyYy00LjQ2LjEtOC43Ny0xLjU2LTExLjkzLTQuNThBMTUuMzggMTUuMzggMCAwMTIyNyAzNmExNi4wMSAxNi4wMSAwIDAxOC40Ni0xMy44NyAxNy40MiAxNy40MiAwIDAxMTYuNzUuMDQgMTMuMDYgMTMuMDYgMCAwMTUuNDcgNS44M2wtMy40MyAxLjg5YTkuNjQgOS42NCAwIDAwLTQuMS00LjM3IDEyLjY1IDEyLjY1IDAgMDAtNi40LTEuNjIgMTIuMyAxMi4zIDAgMDAtOC45IDMuNTIgMTEuNSAxMS41IDAgMDAtMy42MyA4LjU4IDExLjUgMTEuNSAwIDAwMy42MyA4LjU4YzIuNzEgMi43IDYuNiA0IDEwLjQ3IDMuNSAzLjg4LS40OCA3LjI4LTIuNyA5LjE4LTUuOTdsMy41IDEuOTVhMTQuMzggMTQuMzggMCAwMS01Ljc5IDUuOCAxNy4wMyAxNy4wMyAwIDAxLTguNDYgMi4xNHoiLz4KICA8cGF0aCBkPSJNMjkzLjU3IDIwYzMuMS0uMTIgNi4xMSAxLjA3IDguMjggMy4yOCAyLjEgMi4xOCAzLjE1IDUuMTIgMy4xNSA4LjgzVjUxaC00LjA1VjMyLjExYzAtMi42Mi0uNjgtNC42NS0yLjA1LTYuMDhhNy4xIDcuMSAwIDAwLTUuNC0yLjE1IDggOCAwIDAwLTYuMTMgMi41MWMtMS41NiAxLjY4LTIuMzQgNC4yOS0yLjM0IDcuODRWNTFoLTQuMDZWMzIuMTFjMC0yLjY2LS42NC00LjctMS45Mi02LjExYTYuNjkgNi42OSAwIDAwLTUuMjEtMi4xMiA4LjUgOC41IDAgMDAtNi4yMyAyLjU0Yy0xLjcgMS43LTIuNTYgNC4zLTIuNTYgNy44VjUxSDI2MVYyMC43M2g0LjA1djQuNDJBMTAuNDcgMTAuNDcgMCAwMTI3NC40IDIwYzQuNCAwIDcuNSAxLjgzIDkuMjkgNS41IDIuMi0zLjY3IDUuNDktNS41IDkuODktNS41eiIvPgogIDxwYXRoIGQ9Ik0zMTEuMyAyOC42NWEzLjY3IDMuNjcgMCAwMDEuOTMgMy4yNWMxLjQ1Ljg4IDMuMDQgMS41NCA0LjcgMS45Nmw1LjUxIDEuNWMxLjc5LjQ4IDMuNCAxLjQyIDQuNjYgMi43MmE3LjA2IDcuMDYgMCAwMTEuOSA1LjE0IDcuNiA3LjYgMCAwMS0zLjI2IDYuMzRjLTIuMTYgMS42My00Ljk1IDIuNDQtOC4zOCAyLjQzLTIuNzYuMDgtNS40OC0uNi03Ljg1LTEuOTZhMTAuNiAxMC42IDAgMDEtNC41MS01LjA3bDMuNi0yYTcuMjQgNy4yNCAwIDAwMy4yMyAzLjc1YzEuNjcuOTUgMy42IDEuNDMgNS41NCAxLjM4IDEuODMuMDcgMy42NC0uMzQgNS4yNS0xLjE4YTMuOTUgMy45NSAwIDAwMi4xMS0zLjY5Yy4wMy0xLjM0LS43LTIuNi0xLjktMy4yOWExNyAxNyAwIDAwLTQuNjgtMS45N2wtNS41Mi0xLjVjLTEuNzgtLjQ4LTMuNC0xLjQtNC42OC0yLjY5YTYuODIgNi44MiAwIDAxLTEuOTItNS4wNSA3LjY5IDcuNjkgMCAwMTMuMTMtNi4yMiAxMi4xNiAxMi4xNiAwIDAxNy44Ni0yLjVjMi40LS4wNCA0Ljc4LjU0IDYuODYgMS43YTEwLjUgMTAuNSAwIDAxNC4zNiA0LjU0bC0zLjU1IDEuOTVjLTEuMjMtMi44NS0zLjgtNC4yOC03LjY3LTQuMjhhOC44IDguOCAwIDAwLTQuNzQgMS4yMyAzLjkyIDMuOTIgMCAwMC0xLjk5IDMuNTF6Ii8%2BCjwvc3ZnPgo%3D&widths=undefined&widths=auto&heights=250&heights=150"; diff --git a/examples/cms-graphcms/lib/graphcms.js b/examples/cms-graphcms/lib/graphcms.js new file mode 100644 index 0000000000000..3ddedc6461e23 --- /dev/null +++ b/examples/cms-graphcms/lib/graphcms.js @@ -0,0 +1,154 @@ +async function fetchAPI(query, { variables, preview } = {}) { + const res = await fetch( + process.env.NEXT_EXAMPLE_CMS_GCMS_PROJECT_API, + { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${ + preview + ? process.env.NEXT_EXAMPLE_CMS_GCMS_DEV_AUTH_TOKEN + : process.env.NEXT_EXAMPLE_CMS_GCMS_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 = fetchAPI(` + { + posts { + slug + } + } + `); + return data?.allPosts; +} + +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; +} + +export default () => ({}); diff --git a/examples/cms-graphcms/package.json b/examples/cms-graphcms/package.json new file mode 100644 index 0000000000000..f7c57bf8e284c --- /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": "^9.4.2", + "react": "^16.13.0", + "react-dom": "^16.13.0" + }, + "devDependencies": { + "@fullhuman/postcss-purgecss": "^2.1.0", + "postcss-preset-env": "^6.7.0", + "tailwindcss": "^1.2.0" + } +} 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