+
+
+
+ )
+}
diff --git a/examples/cms-storyblok/components/avatar.js b/examples/cms-storyblok/components/avatar.js
new file mode 100644
index 0000000000000..f27c58617ce63
--- /dev/null
+++ b/examples/cms-storyblok/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
+
+ .
+
+ )}
+
+
+ 
+
+ )
+}
diff --git a/examples/cms-storyblok/components/container.js b/examples/cms-storyblok/components/container.js
new file mode 100644
index 0000000000000..fc1c29dfb0747
--- /dev/null
+++ b/examples/cms-storyblok/components/container.js
@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+ return {name}
+ {children}
+}
diff --git a/examples/cms-storyblok/components/cover-image.js b/examples/cms-storyblok/components/cover-image.js
new file mode 100644
index 0000000000000..7230d824f2d47
--- /dev/null
+++ b/examples/cms-storyblok/components/cover-image.js
@@ -0,0 +1,17 @@
+import Link from 'next/link'
+
+export default function CoverImage({ title, url, slug }) {
+ return (
+
+ {slug ? (
+
+
+ 
+
+
+ ) : (
+
+ )}
+
+ )
+}
diff --git a/examples/cms-storyblok/components/date.js b/examples/cms-storyblok/components/date.js
new file mode 100644
index 0000000000000..6503e2986d5c0
--- /dev/null
+++ b/examples/cms-storyblok/components/date.js
@@ -0,0 +1,13 @@
+import { parseISO, format } from 'date-fns'
+import { useEffect, useState } from 'react'
+
+// dateString might be null for unpublished posts
+export default function DateComponent({ dateString }) {
+ const [date, setDate] = useState(dateString ? parseISO(dateString) : null)
+ useEffect(() => {
+ if (!date) {
+ setDate(new Date())
+ }
+ }, [date])
+ return date &&
+}
diff --git a/examples/cms-storyblok/components/footer.js b/examples/cms-storyblok/components/footer.js
new file mode 100644
index 0000000000000..102872d195df0
--- /dev/null
+++ b/examples/cms-storyblok/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-storyblok/components/header.js b/examples/cms-storyblok/components/header.js
new file mode 100644
index 0000000000000..562e7e3eebb6a
--- /dev/null
+++ b/examples/cms-storyblok/components/header.js
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+ return (
+ + + Blog + + . +
+ ) +} diff --git a/examples/cms-storyblok/components/hero-post.js b/examples/cms-storyblok/components/hero-post.js new file mode 100644 index 0000000000000..7cdae5aad3c51 --- /dev/null +++ b/examples/cms-storyblok/components/hero-post.js @@ -0,0 +1,37 @@ +import Avatar from './avatar' +import Date from './date' +import CoverImage from './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-storyblok/components/markdown-styles.module.css b/examples/cms-storyblok/components/markdown-styles.module.css
new file mode 100644
index 0000000000000..95d4f8b04172d
--- /dev/null
+++ b/examples/cms-storyblok/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-storyblok/components/meta.js b/examples/cms-storyblok/components/meta.js
new file mode 100644
index 0000000000000..cec622742089e
--- /dev/null
+++ b/examples/cms-storyblok/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-storyblok/components/more-stories.js b/examples/cms-storyblok/components/more-stories.js
new file mode 100644
index 0000000000000..2ea20c3f6b254
--- /dev/null
+++ b/examples/cms-storyblok/components/more-stories.js
@@ -0,0 +1,24 @@
+import PostPreview from './post-preview'
+
+export default function MoreStories({ posts }) {
+ return (
+ + More Stories +
+
+ {posts.map((post) => (
+
+
+
+
+ )
+}
diff --git a/examples/cms-storyblok/components/post-header.js b/examples/cms-storyblok/components/post-header.js
new file mode 100644
index 0000000000000..13679d6e12426
--- /dev/null
+++ b/examples/cms-storyblok/components/post-header.js
@@ -0,0 +1,26 @@
+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 (
+ <>
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/cms-storyblok/components/post-preview.js b/examples/cms-storyblok/components/post-preview.js
new file mode 100644
index 0000000000000..b9c8105ca8008
--- /dev/null
+++ b/examples/cms-storyblok/components/post-preview.js
@@ -0,0 +1,31 @@
+import Avatar from './avatar'
+import Date from './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-storyblok/components/post-title.js b/examples/cms-storyblok/components/post-title.js
new file mode 100644
index 0000000000000..edd8cba65c257
--- /dev/null
+++ b/examples/cms-storyblok/components/post-title.js
@@ -0,0 +1,7 @@
+export default function PostTitle({ children }) {
+ return (
+
+
+
+
+ + {children} +
+ ) +} diff --git a/examples/cms-storyblok/components/section-separator.js b/examples/cms-storyblok/components/section-separator.js new file mode 100644 index 0000000000000..4ca5c65fdc6ee --- /dev/null +++ b/examples/cms-storyblok/components/section-separator.js @@ -0,0 +1,3 @@ +export default function SectionSeparator() { + return+} diff --git a/examples/cms-storyblok/jsconfig.json b/examples/cms-storyblok/jsconfig.json new file mode 100644 index 0000000000000..1bac23a7cd556 --- /dev/null +++ b/examples/cms-storyblok/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/components/*": ["components/*"], + "@/lib/*": ["lib/*"], + "@/styles/*": ["styles/*"] + } + } +} diff --git a/examples/cms-storyblok/lib/api.js b/examples/cms-storyblok/lib/api.js new file mode 100644 index 0000000000000..1d6d5c7da454c --- /dev/null +++ b/examples/cms-storyblok/lib/api.js @@ -0,0 +1,137 @@ +async function fetchAPI(query, { variables, preview } = {}) { + const res = await fetch('https://gapi.storyblok.com/v1/api', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Token: process.env.NEXT_EXAMPLE_CMS_STORYBLOK_API_KEY, + Version: preview ? 'draft' : 'published', + }, + 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 +} + +export async function getPreviewPostBySlug(slug) { + const post = await fetchAPI( + ` + query PostBySlug($slug: ID!) { + PostItem(id: $slug) { + slug + } + } + `, + { + preview: true, + variables: { + slug: `posts/${slug}`, + }, + } + ) + return post +} + +export async function getAllPostsWithSlug() { + const data = await fetchAPI(` + { + PostItems { + items { + slug + } + } + } + `) + return data?.PostItems.items +} + +export async function getAllPostsForHome(preview) { + const data = await fetchAPI( + ` + { + PostItems(sort_by: "first_published_at:desc") { + items { + slug + published_at + first_published_at + content { + long_text + intro + title + image + author { + name + content + } + } + } + } + } + `, + { preview } + ) + return data?.PostItems.items +} + +export async function getPostAndMorePosts(slug, preview) { + const data = await fetchAPI( + ` + query PostBySlug($slug: ID!) { + PostItem(id: $slug) { + slug + published_at + first_published_at + id + content { + long_text + intro + title + image + author { + name + content + } + } + } + PostItems(per_page: 3, sort_by: "first_published_at:desc") { + items { + slug + published_at + first_published_at + content { + long_text + intro + title + image + author { + name + content + } + } + } + } + } + `, + { + preview, + variables: { + slug: `posts/${slug}`, + }, + } + ) + + return { + post: data?.PostItem, + morePosts: (data?.PostItems?.items || []) + .filter((item) => item.slug !== slug) + .slice(0, 2), + } +} diff --git a/examples/cms-storyblok/lib/constants.js b/examples/cms-storyblok/lib/constants.js new file mode 100644 index 0000000000000..e34c5404b555d --- /dev/null +++ b/examples/cms-storyblok/lib/constants.js @@ -0,0 +1,5 @@ +export const EXAMPLE_PATH = 'cms-storyblok' +export const CMS_NAME = 'Storyblok' +export const CMS_URL = 'https://www.storyblok.com/' +export const HOME_OG_IMAGE_URL = + 'https://og-image.now.sh/Next.js%20Blog%20Example%20with%20**Storyblok**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1591740146%2Fnextjs%2Fexamples%2Fstoryblok-logo.svg' diff --git a/examples/cms-storyblok/lib/markdownToHtml.js b/examples/cms-storyblok/lib/markdownToHtml.js new file mode 100644 index 0000000000000..45577d599fa3e --- /dev/null +++ b/examples/cms-storyblok/lib/markdownToHtml.js @@ -0,0 +1,7 @@ +import remark from 'remark' +import html from 'remark-html' + +export default async function markdownToHtml(markdown) { + const result = await remark().use(html).processSync(markdown) + return result.toString() +} diff --git a/examples/cms-storyblok/package.json b/examples/cms-storyblok/package.json new file mode 100644 index 0000000000000..489593d612598 --- /dev/null +++ b/examples/cms-storyblok/package.json @@ -0,0 +1,24 @@ +{ + "name": "cms-storyblok", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "classnames": "2.2.6", + "date-fns": "2.14.0", + "next": "latest", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "remark": "12.0.0", + "remark-html": "11.0.2", + "storyblok-js-client": "2.5.0" + }, + "devDependencies": { + "postcss-flexbugs-fixes": "4.2.1", + "postcss-preset-env": "^6.7.0", + "tailwindcss": "^1.4.6" + } +} diff --git a/examples/cms-storyblok/pages/_app.js b/examples/cms-storyblok/pages/_app.js new file mode 100644 index 0000000000000..f18e112c7cf79 --- /dev/null +++ b/examples/cms-storyblok/pages/_app.js @@ -0,0 +1,7 @@ +import '@/styles/index.css' + +function MyApp({ Component, pageProps }) { + return