+
+
+
+ )
+}
diff --git a/examples/cms-ghost/components/avatar.js b/examples/cms-ghost/components/avatar.js
new file mode 100644
index 0000000000000..271037ba41c1d
--- /dev/null
+++ b/examples/cms-ghost/components/avatar.js
@@ -0,0 +1,14 @@
+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
+
+ .
+
+ )}
+
+
+ {picture && (
+ 
+ )}
+
+ )
+}
diff --git a/examples/cms-ghost/components/container.js b/examples/cms-ghost/components/container.js
new file mode 100644
index 0000000000000..fc1c29dfb0747
--- /dev/null
+++ b/examples/cms-ghost/components/container.js
@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+ return {name}
+ {children}
+}
diff --git a/examples/cms-ghost/components/cover-image.js b/examples/cms-ghost/components/cover-image.js
new file mode 100644
index 0000000000000..499a8ce501c0e
--- /dev/null
+++ b/examples/cms-ghost/components/cover-image.js
@@ -0,0 +1,35 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import Imgix from 'react-imgix'
+
+export default function CoverImage({ title, url, slug }) {
+ const image = (
+
+ {slug ? (
+
+ {image}
+
+ ) : (
+ image
+ )}
+
+ )
+}
diff --git a/examples/cms-ghost/components/date.js b/examples/cms-ghost/components/date.js
new file mode 100644
index 0000000000000..eac5681378bfd
--- /dev/null
+++ b/examples/cms-ghost/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-ghost/components/footer.js b/examples/cms-ghost/components/footer.js
new file mode 100644
index 0000000000000..102872d195df0
--- /dev/null
+++ b/examples/cms-ghost/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-ghost/components/header.js b/examples/cms-ghost/components/header.js
new file mode 100644
index 0000000000000..562e7e3eebb6a
--- /dev/null
+++ b/examples/cms-ghost/components/header.js
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+ return (
+ + + Blog + + . +
+ ) +} diff --git a/examples/cms-ghost/components/hero-post.js b/examples/cms-ghost/components/hero-post.js new file mode 100644 index 0000000000000..59dd46e301901 --- /dev/null +++ b/examples/cms-ghost/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-ghost/components/markdown-styles.module.css b/examples/cms-ghost/components/markdown-styles.module.css
new file mode 100644
index 0000000000000..95d4f8b04172d
--- /dev/null
+++ b/examples/cms-ghost/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-ghost/components/meta.js b/examples/cms-ghost/components/meta.js
new file mode 100644
index 0000000000000..cec622742089e
--- /dev/null
+++ b/examples/cms-ghost/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-ghost/components/more-stories.js b/examples/cms-ghost/components/more-stories.js
new file mode 100644
index 0000000000000..92eefcf51c36f
--- /dev/null
+++ b/examples/cms-ghost/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-ghost/components/post-header.js b/examples/cms-ghost/components/post-header.js
new file mode 100644
index 0000000000000..53ed1d6a6cd71
--- /dev/null
+++ b/examples/cms-ghost/components/post-header.js
@@ -0,0 +1,26 @@
+import Avatar from './avatar'
+import Date from './date'
+import CoverImage from './cover-image'
+import PostTitle from './post-title'
+
+export default function PostHeader({ title, coverImage, date, author }) {
+ return (
+ <>
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/cms-ghost/components/post-preview.js b/examples/cms-ghost/components/post-preview.js
new file mode 100644
index 0000000000000..c34388de0b872
--- /dev/null
+++ b/examples/cms-ghost/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-ghost/components/post-title.js b/examples/cms-ghost/components/post-title.js
new file mode 100644
index 0000000000000..edd8cba65c257
--- /dev/null
+++ b/examples/cms-ghost/components/post-title.js
@@ -0,0 +1,7 @@
+export default function PostTitle({ children }) {
+ return (
+
+
+
+
+ + {children} +
+ ) +} diff --git a/examples/cms-ghost/components/section-separator.js b/examples/cms-ghost/components/section-separator.js new file mode 100644 index 0000000000000..4ca5c65fdc6ee --- /dev/null +++ b/examples/cms-ghost/components/section-separator.js @@ -0,0 +1,3 @@ +export default function SectionSeparator() { + return+} diff --git a/examples/cms-ghost/jsconfig.json b/examples/cms-ghost/jsconfig.json new file mode 100644 index 0000000000000..1bac23a7cd556 --- /dev/null +++ b/examples/cms-ghost/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/components/*": ["components/*"], + "@/lib/*": ["lib/*"], + "@/styles/*": ["styles/*"] + } + } +} diff --git a/examples/cms-ghost/lib/api.js b/examples/cms-ghost/lib/api.js new file mode 100644 index 0000000000000..b3d2791441956 --- /dev/null +++ b/examples/cms-ghost/lib/api.js @@ -0,0 +1,75 @@ +import GhostContentAPI from '@tryghost/content-api' + +const GHOST_API_URL = process.env.GHOST_API_URL || 'https://cms.gotsby.org' +const GHOST_API_KEY = process.env.GHOST_API_KEY || '387f956eaa95345f7bb484d0b8' + +const api = new GhostContentAPI({ + url: GHOST_API_URL, + key: GHOST_API_KEY, + version: 'v3', +}) + +const is404 = (error) => /not found/i.test(error.message) + +export async function getPreviewPostBySlug(slug) { + const params = { + slug, + fields: 'slug', + limit: 'all', + } + + try { + const post = await api.posts.read(params) + return post + } catch (error) { + // Don't throw if an slug doesn't exist + if (is404(error)) return + throw error + } +} + +export async function getAllPostsWithSlug() { + const params = { + fields: 'slug', + limit: 'all', + } + const posts = await api.posts.browse(params) + return posts +} + +export async function getAllPostsForHome(preview) { + const params = { + limit: 'all', + include: 'authors', + order: 'published_at DESC', + ...(preview && { status: 'all' }), + } + const posts = await api.posts.browse(params) + return posts +} + +export async function getPostAndMorePosts(slug, preview) { + const singleObjectParams = { + slug, + include: 'authors', + ...(preview && { status: 'all' }), + } + const moreObjectParams = { + limit: 3, + include: 'authors', + ...(preview && { status: 'all' }), + } + const post = await api.posts.read(singleObjectParams).catch((error) => { + // Don't throw if an slug doesn't exist + if (is404(error)) return + throw error + }) + const morePosts = (await api.posts.browse(moreObjectParams)) + ?.filter(({ slug }) => post.slug !== slug) + .slice(0, 2) + + return { + post, + morePosts, + } +} diff --git a/examples/cms-ghost/lib/constants.js b/examples/cms-ghost/lib/constants.js new file mode 100644 index 0000000000000..c9ffa5f43d2de --- /dev/null +++ b/examples/cms-ghost/lib/constants.js @@ -0,0 +1,5 @@ +export const EXAMPLE_PATH = 'cms-ghost' +export const CMS_NAME = 'Ghost' +export const CMS_URL = 'https://ghost.org/' +export const HOME_OG_IMAGE_URL = + 'https://og-image.now.sh/Next.js%20Example%20Blog%20with%20**Ghost**.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%2Fghost.org%2Fimages%2Flogo.svg' diff --git a/examples/cms-ghost/package.json b/examples/cms-ghost/package.json new file mode 100644 index 0000000000000..a4bbe0acc80ab --- /dev/null +++ b/examples/cms-ghost/package.json @@ -0,0 +1,25 @@ +{ + "name": "cms-ghost", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@tryghost/content-api": "^1.4.10", + "classnames": "2.2.6", + "date-fns": "2.14.0", + "lazysizes": "^5.2.1-rc2", + "next": "latest", + "react": "^16.13.1", + "react-imgix": "^9.0.2", + "react-dom": "^16.13.1" + }, + "devDependencies": { + "postcss-flexbugs-fixes": "4.2.1", + "postcss-preset-env": "^6.7.0", + "tailwindcss": "^1.4.6" + }, + "license": "MIT" +} diff --git a/examples/cms-ghost/pages/_app.js b/examples/cms-ghost/pages/_app.js new file mode 100644 index 0000000000000..f18e112c7cf79 --- /dev/null +++ b/examples/cms-ghost/pages/_app.js @@ -0,0 +1,7 @@ +import '@/styles/index.css' + +function MyApp({ Component, pageProps }) { + return