+
+
+
+ )
+}
diff --git a/examples/cms-notion/components/avatar.js b/examples/cms-notion/components/avatar.js
new file mode 100644
index 0000000000000..50847843ff60d
--- /dev/null
+++ b/examples/cms-notion/components/avatar.js
@@ -0,0 +1,12 @@
+export default function Avatar({ name, picture }) {
+ return (
+
+ {preview ? (
+ <>
+ This is page is a preview.{' '}
+
+ Click here
+ {' '}
+ to exit preview mode.
+
+ ) : (
+ <>
+ The source code for this blog is{' '}
+
+ available on GitHub
+
+ .
+
+ )}
+
+
+ ![{name[0].text}]({picture.url})
+
+ )
+}
diff --git a/examples/cms-notion/components/container.js b/examples/cms-notion/components/container.js
new file mode 100644
index 0000000000000..fc1c29dfb0747
--- /dev/null
+++ b/examples/cms-notion/components/container.js
@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+ return {name}
+ {children}
+}
diff --git a/examples/cms-notion/components/cover-image.js b/examples/cms-notion/components/cover-image.js
new file mode 100644
index 0000000000000..9f52f4e51c199
--- /dev/null
+++ b/examples/cms-notion/components/cover-image.js
@@ -0,0 +1,25 @@
+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-notion/components/date.js b/examples/cms-notion/components/date.js
new file mode 100644
index 0000000000000..c77dbb23fad83
--- /dev/null
+++ b/examples/cms-notion/components/date.js
@@ -0,0 +1,7 @@
+import { format } from 'date-fns'
+// import { Date as PrismicDate } from 'prismic-reactjs'
+
+export default function Date({ dateString }) {
+ // const date = PrismicDate(dateString)
+ return
+}
diff --git a/examples/cms-notion/components/footer.js b/examples/cms-notion/components/footer.js
new file mode 100644
index 0000000000000..da9eed88ec263
--- /dev/null
+++ b/examples/cms-notion/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-notion/components/header.js b/examples/cms-notion/components/header.js
new file mode 100644
index 0000000000000..562e7e3eebb6a
--- /dev/null
+++ b/examples/cms-notion/components/header.js
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+ return (
+ + + Blog + + . +
+ ) +} diff --git a/examples/cms-notion/components/hero-post.js b/examples/cms-notion/components/hero-post.js new file mode 100644 index 0000000000000..4a218ee32c691 --- /dev/null +++ b/examples/cms-notion/components/hero-post.js @@ -0,0 +1,44 @@ +import Link from 'next/link' +// import { RichText } from 'prismic-reactjs' +import Avatar from '../components/avatar' +import Date from '../components/date' +import CoverImage from '../components/cover-image' + +export default function HeroPost({ + title, + coverImageUrl, + date, + excerpt, + author, + slug, +}) { + return ( +
+
+
+
+
+
+ + + + {title} + + +
+
+
+
+
+ {excerpt}
+ {author &&+ Blog. +
++ A statically generated blog example using{' '} + + Next.js + {' '} + and{' '} + + {CMS_NAME} + + . +
+
+ {children}
+
+
+
+ )
+}
diff --git a/examples/cms-notion/components/markdown-styles.module.css b/examples/cms-notion/components/markdown-styles.module.css
new file mode 100644
index 0000000000000..95d4f8b04172d
--- /dev/null
+++ b/examples/cms-notion/components/markdown-styles.module.css
@@ -0,0 +1,18 @@
+.markdown {
+ @apply text-lg leading-relaxed;
+}
+
+.markdown p,
+.markdown ul,
+.markdown ol,
+.markdown blockquote {
+ @apply my-6;
+}
+
+.markdown h2 {
+ @apply text-3xl mt-12 mb-4 leading-snug;
+}
+
+.markdown h3 {
+ @apply text-2xl mt-8 mb-4 leading-snug;
+}
diff --git a/examples/cms-notion/components/meta.js b/examples/cms-notion/components/meta.js
new file mode 100644
index 0000000000000..d9c48d5831e13
--- /dev/null
+++ b/examples/cms-notion/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-notion/components/more-stories.js b/examples/cms-notion/components/more-stories.js
new file mode 100644
index 0000000000000..7820641498d76
--- /dev/null
+++ b/examples/cms-notion/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-notion/components/post-header.js b/examples/cms-notion/components/post-header.js
new file mode 100644
index 0000000000000..a2fd840214d0a
--- /dev/null
+++ b/examples/cms-notion/components/post-header.js
@@ -0,0 +1,27 @@
+// import { RichText } from 'prismic-reactjs'
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from '../components/cover-image'
+import PostTitle from '../components/post-title'
+
+export default function PostHeader({ title, coverImage, date, author }) {
+ return (
+ <>
+
+ {content}
+ {/*
+
+ {author &&
+
+
+
+
+
+ )
+}
diff --git a/examples/cms-notion/components/post-preview.js b/examples/cms-notion/components/post-preview.js
new file mode 100644
index 0000000000000..66c4c293660ce
--- /dev/null
+++ b/examples/cms-notion/components/post-preview.js
@@ -0,0 +1,39 @@
+import Link from 'next/link'
+// import { RichText } from 'prismic-reactjs'
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from './cover-image'
+
+export default function PostPreview({
+ title,
+ coverImageUrl,
+ date,
+ excerpt,
+ author,
+ slug,
+}) {
+ return (
+
+ )
+}
diff --git a/examples/cms-notion/components/post-title.js b/examples/cms-notion/components/post-title.js
new file mode 100644
index 0000000000000..edd8cba65c257
--- /dev/null
+++ b/examples/cms-notion/components/post-title.js
@@ -0,0 +1,7 @@
+export default function PostTitle({ children }) {
+ return (
+
+ {author &&
+
+
+ + {children} +
+ ) +} diff --git a/examples/cms-notion/components/section-separator.js b/examples/cms-notion/components/section-separator.js new file mode 100644 index 0000000000000..4ca5c65fdc6ee --- /dev/null +++ b/examples/cms-notion/components/section-separator.js @@ -0,0 +1,3 @@ +export default function SectionSeparator() { + return+} diff --git a/examples/cms-notion/lib/api.js b/examples/cms-notion/lib/api.js new file mode 100644 index 0000000000000..3bdb25f217cb0 --- /dev/null +++ b/examples/cms-notion/lib/api.js @@ -0,0 +1,157 @@ +// import Prismic from 'prismic-javascript' + +// const REPOSITORY = process.env.PRISMIC_REPOSITORY_NAME +// const REF_API_URL = `https://${REPOSITORY}.prismic.io/api/v2` +// const GRAPHQL_API_URL = `https://${REPOSITORY}.prismic.io/graphql` +// // export const API_URL = 'https://your-repo-name.cdn.prismic.io/api/v2' +// export const API_TOKEN = process.env.PRISMIC_API_TOKEN +// export const API_LOCALE = process.env.PRISMIC_REPOSITORY_LOCALE + +// export const PrismicClient = Prismic.client(REF_API_URL, { +// accessToken: API_TOKEN, +// }) + +// async function fetchAPI(query, { previewData, variables } = {}) { +// const prismicAPI = await PrismicClient.getApi() +// const res = await fetch( +// `${GRAPHQL_API_URL}?query=${query}&variables=${JSON.stringify(variables)}`, +// { +// headers: { +// 'Prismic-Ref': previewData?.ref || prismicAPI.masterRef.ref, +// 'Content-Type': 'application/json', +// 'Accept-Language': API_LOCALE, +// Authorization: `Token ${API_TOKEN}`, +// }, +// } +// ) + +// if (res.status !== 200) { +// console.log(await res.text()) +// throw new Error('Failed to fetch API') +// } + +// const json = await res.json() +// if (json.errors) { +// console.error(json.errors) +// throw new Error('Failed to fetch API') +// } +// return json.data +// } + +// export async function getAllPostsWithSlug() { +// const data = await fetchAPI(` +// { +// allPosts { +// edges { +// node { +// _meta { +// uid +// } +// } +// } +// } +// } +// `) +// return data?.allPosts?.edges +// } + +// export async function getAllPostsForHome(previewData) { +// const data = await fetchAPI( +// ` +// query { +// allPosts(sortBy: date_DESC) { +// edges { +// node { +// date +// title +// content +// coverimage +// excerpt +// author { +// ...on Author { +// name +// picture +// } +// } +// _meta { +// uid +// } +// } +// } +// } +// } +// `, +// { previewData } +// ) + +// return data.allPosts.edges +// } + +// export async function getPostAndMorePosts(slug, previewData) { +// const data = await fetchAPI( +// ` +// query PostBySlug($slug: String!, $lang: String!) { +// post(uid: $slug, lang: $lang) { +// title +// content +// date +// coverimage +// author { +// ...on Author { +// name +// picture +// } +// } +// _meta { +// uid +// } +// } + +// morePosts: allPosts(sortBy: date_DESC, first: 3) { +// edges { +// node { +// title +// content +// date +// coverimage +// excerpt +// author { +// ...on Author { +// name +// picture +// } +// } +// _meta { +// uid +// } +// } +// } +// } +// } +// `, +// { +// previewData, +// variables: { +// slug, +// lang: API_LOCALE, +// }, +// } +// ) + +// data.morePosts = data.morePosts.edges +// .filter(({ node }) => node._meta.uid !== slug) +// .slice(0, 2) + +// return data +// } + +const dev = process.env.NODE_ENV !== 'production'; + +export const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com'; + +export async function getAllPostsForHome(previewData) { + const response = await fetch(`${server}/api/posts`); + const data = await response.json(); + console.log(data); + return data.posts; +} \ No newline at end of file diff --git a/examples/cms-notion/lib/constants.js b/examples/cms-notion/lib/constants.js new file mode 100644 index 0000000000000..5bacd2449d98a --- /dev/null +++ b/examples/cms-notion/lib/constants.js @@ -0,0 +1,5 @@ +export const EXAMPLE_PATH = 'cms-notion' +export const CMS_NAME = 'Notion' +export const CMS_URL = 'https://notion.so/' +export const HOME_OG_IMAGE_URL = + 'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Prismic**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fi.imgur.com%2FGVmKYul.png&widths=undefined&widths=auto&heights=undefined&heights=100' diff --git a/examples/cms-notion/package.json b/examples/cms-notion/package.json new file mode 100644 index 0000000000000..9674c06938d0f --- /dev/null +++ b/examples/cms-notion/package.json @@ -0,0 +1,23 @@ +{ + "name": "cms-prismic", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@notionhq/client": "^0.1.3", + "classnames": "2.2.6", + "date-fns": "2.10.0", + "next": "latest", + "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" + }, + "license": "MIT" +} diff --git a/examples/cms-notion/pages/_app.js b/examples/cms-notion/pages/_app.js new file mode 100644 index 0000000000000..d56d9bf601a90 --- /dev/null +++ b/examples/cms-notion/pages/_app.js @@ -0,0 +1,7 @@ +import '../styles/index.css' + +function MyApp({ Component, pageProps }) { + return