diff --git a/examples/with-netlify-cms/components/layout.js b/examples/with-netlify-cms/components/layout.js new file mode 100644 index 0000000000000..755df4bb1e0f5 --- /dev/null +++ b/examples/with-netlify-cms/components/layout.js @@ -0,0 +1,33 @@ +import Link from 'next/link' + +const Layout = ({ children }) => ( + <> + +
{children}
+ + +) + +export default Layout diff --git a/examples/with-netlify-cms/content/about.md b/examples/with-netlify-cms/content/about.md new file mode 100644 index 0000000000000..7d41857ac4c52 --- /dev/null +++ b/examples/with-netlify-cms/content/about.md @@ -0,0 +1,8 @@ +--- +title: About +date: 2019-03-17T19:31:20.591Z +--- + +## Welcome to the About page + +This is the about page. diff --git a/examples/with-netlify-cms/content/blogPosts/2019-09-06_its_not_the_problem_you_want_to_solve_boiiiiii.md b/examples/with-netlify-cms/content/blogPosts/2019-09-06_its_not_the_problem_you_want_to_solve_boiiiiii.md new file mode 100644 index 0000000000000..17261d7f45ec9 --- /dev/null +++ b/examples/with-netlify-cms/content/blogPosts/2019-09-06_its_not_the_problem_you_want_to_solve_boiiiiii.md @@ -0,0 +1,7 @@ +--- +title: A blog post with picture of dog +date: 2019-09-06T08:28:44.549Z +thumbnail: /static/img/puppy-and-adult-dog.jpg +--- + +Unfortunately, that's it. diff --git a/examples/with-netlify-cms/content/blogPosts/2019-09-06_why_did_the_chicken_cross_the_road.md b/examples/with-netlify-cms/content/blogPosts/2019-09-06_why_did_the_chicken_cross_the_road.md new file mode 100644 index 0000000000000..f5adfd836252d --- /dev/null +++ b/examples/with-netlify-cms/content/blogPosts/2019-09-06_why_did_the_chicken_cross_the_road.md @@ -0,0 +1,9 @@ +--- +title: Why did the chicken cross the road +date: 2019-09-06T08:28:44.549Z +thumbnail: /static/img/1200px-whio_blue_duck_at_staglands_akatarawa_new_zealand.jpg +--- + +To get to the other side. + +I know it's a picture of a duck in the thumbnail. diff --git a/examples/with-netlify-cms/content/home.md b/examples/with-netlify-cms/content/home.md new file mode 100644 index 0000000000000..7e0dfd0c5737a --- /dev/null +++ b/examples/with-netlify-cms/content/home.md @@ -0,0 +1,8 @@ +--- +title: Home +date: 2019-03-17T19:31:20.591Z +--- + +## Welcome to the Home Page + +If you want to know more about Next.js + Netlifycms go to the official tutorial [here](https://www.netlifycms.org/docs/nextjs/). diff --git a/examples/with-netlify-cms/next.config.js b/examples/with-netlify-cms/next.config.js new file mode 100644 index 0000000000000..116f39a0fc1bb --- /dev/null +++ b/examples/with-netlify-cms/next.config.js @@ -0,0 +1,31 @@ +const fs = require('fs') +const blogPostsFolder = './content/blogPosts' + +const getPathsForPosts = () => + fs.readdirSync(blogPostsFolder).reduce((acc, blogName) => { + const trimmedName = blogName.substring(0, blogName.length - 3) + return Object.assign(acc, { + [`/blog/post/${trimmedName}`]: { + page: '/blog/post/[slug]', + query: { + slug: trimmedName + } + } + }) + }, {}) + +module.exports = { + webpack: configuration => { + configuration.module.rules.push({ + test: /\.md$/, + use: 'frontmatter-markdown-loader' + }) + return configuration + }, + async exportPathMap (defaultPathMap) { + return { + ...defaultPathMap, + ...getPathsForPosts() + } + } +} diff --git a/examples/with-netlify-cms/package.json b/examples/with-netlify-cms/package.json new file mode 100644 index 0000000000000..8f272651d74cb --- /dev/null +++ b/examples/with-netlify-cms/package.json @@ -0,0 +1,19 @@ +{ + "name": "with-netlify-cms", + "version": "1.0.0", + "license": "ISC", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start", + "export": "npm run build && next export" + }, + "dependencies": { + "next": "latest", + "react": "^16.9.0", + "react-dom": "^16.9.0" + }, + "devDependencies": { + "frontmatter-markdown-loader": "^2.0.0" + } +} diff --git a/examples/with-netlify-cms/pages/about.js b/examples/with-netlify-cms/pages/about.js new file mode 100644 index 0000000000000..25b15867186b7 --- /dev/null +++ b/examples/with-netlify-cms/pages/about.js @@ -0,0 +1,17 @@ +import Layout from '../components/layout' +import { attributes, html } from '../content/about.md' + +const About = () => ( + +

{attributes.title}

+
+ + +) + +export default About diff --git a/examples/with-netlify-cms/pages/blog/index.js b/examples/with-netlify-cms/pages/blog/index.js new file mode 100644 index 0000000000000..b997e4600e776 --- /dev/null +++ b/examples/with-netlify-cms/pages/blog/index.js @@ -0,0 +1,48 @@ +import Link from 'next/link' +import Layout from '../../components/layout' + +const importBlogPosts = async () => { + // https://webpack.js.org/guides/dependency-management/#requirecontext + const markdownFiles = require + .context('../../content/blogPosts', false, /\.md$/) + .keys() + .map(relativePath => relativePath.substring(2)) + + return Promise.all( + markdownFiles.map(async path => { + const markdown = await import(`../../content/blogPosts/${path}`) + return { ...markdown, slug: path.substring(0, path.length - 3) } + }) + ) +} + +const Blog = ({ postsList }) => ( + + {postsList.map(post => ( +
+ + + +

{post.attributes.title}

+ + +
+ ))} + + +) + +Blog.getInitialProps = async () => { + const postsList = await importBlogPosts() + return { postsList } +} + +export default Blog diff --git a/examples/with-netlify-cms/pages/blog/post/[slug].js b/examples/with-netlify-cms/pages/blog/post/[slug].js new file mode 100644 index 0000000000000..2f9bb3956c16b --- /dev/null +++ b/examples/with-netlify-cms/pages/blog/post/[slug].js @@ -0,0 +1,35 @@ +import Layout from '../../../components/layout' + +const Post = ({ blogpost }) => { + if (!blogpost) return
not found
+ + const { html, attributes } = blogpost.default + + return ( + +
+

{attributes.title}

+ +
+
+ + + ) +} + +Post.getInitialProps = async ({ query }) => { + const { slug } = query + const blogpost = await import(`../../../content/blogPosts/${slug}.md`).catch( + () => null + ) + return { blogpost } +} + +export default Post diff --git a/examples/with-netlify-cms/pages/index.js b/examples/with-netlify-cms/pages/index.js new file mode 100644 index 0000000000000..946502bcb1c95 --- /dev/null +++ b/examples/with-netlify-cms/pages/index.js @@ -0,0 +1,17 @@ +import Layout from '../components/layout' +import { attributes, html } from '../content/home.md' + +const Home = () => ( + +

{attributes.title}

+
+ + +) + +export default Home diff --git a/examples/with-netlify-cms/public/static/admin/config.yml b/examples/with-netlify-cms/public/static/admin/config.yml new file mode 100644 index 0000000000000..52318504dee9b --- /dev/null +++ b/examples/with-netlify-cms/public/static/admin/config.yml @@ -0,0 +1,36 @@ +backend: + name: git-gateway + branch: master +media_folder: static/img +slug: + encoding: 'ascii' + clean_accents: true + sanitize_replacement: '_' +collections: + - name: 'pages' + label: 'Pages' + files: + - label: 'Home' + name: 'home' + file: 'content/home.md' + fields: + - { label: 'Title', name: 'title', widget: 'string' } + - { label: 'Publish Date', name: 'date', widget: 'datetime' } + - { label: 'Body', name: 'body', widget: 'markdown' } + - label: 'About' + name: 'about' + file: 'content/about.md' + fields: + - { label: 'Title', name: 'title', widget: 'string' } + - { label: 'Publish Date', name: 'date', widget: 'datetime' } + - { label: 'Body', name: 'body', widget: 'markdown' } + - label: 'Blog' + name: 'blog' + folder: 'content/blogPosts' + create: true + slug: '{{year}}-{{month}}-{{day}}_{{slug}}' + fields: + - { label: 'Title', name: 'title', widget: 'string', required: true } + - { label: 'Publish Date', name: 'date', widget: 'datetime', required: true } + - { label: 'Featured Image', name: 'thumbnail', widget: 'image', required: true } + - { label: 'Body', name: 'body', widget: 'markdown', required: true } diff --git a/examples/with-netlify-cms/public/static/admin/index.html b/examples/with-netlify-cms/public/static/admin/index.html new file mode 100644 index 0000000000000..302c13714a274 --- /dev/null +++ b/examples/with-netlify-cms/public/static/admin/index.html @@ -0,0 +1,13 @@ + + + + + + Content Manager + + + + + + + diff --git a/examples/with-netlify-cms/public/static/img/1200px-whio_blue_duck_at_staglands_akatarawa_new_zealand.jpg b/examples/with-netlify-cms/public/static/img/1200px-whio_blue_duck_at_staglands_akatarawa_new_zealand.jpg new file mode 100644 index 0000000000000..44c1757cbc068 Binary files /dev/null and b/examples/with-netlify-cms/public/static/img/1200px-whio_blue_duck_at_staglands_akatarawa_new_zealand.jpg differ diff --git a/examples/with-netlify-cms/public/static/img/puppy-and-adult-dog.jpg b/examples/with-netlify-cms/public/static/img/puppy-and-adult-dog.jpg new file mode 100644 index 0000000000000..9a1b54c547dd5 Binary files /dev/null and b/examples/with-netlify-cms/public/static/img/puppy-and-adult-dog.jpg differ diff --git a/examples/with-netlify-cms/readme.md b/examples/with-netlify-cms/readme.md new file mode 100644 index 0000000000000..4ca2b0c5306f7 --- /dev/null +++ b/examples/with-netlify-cms/readme.md @@ -0,0 +1,51 @@ +# Example app using Netlify CMS + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example: + +```bash +npx create-next-app --example with-netlify-cms with-netlify-cms-app +# or +yarn create next-app --example with-netlify-cms with-netlify-cms-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-netlify-cms +cd nested-components +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +[Netlify CMS](https://www.netlifycms.org/) is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git. + +## How it works + +Sites take its content from markdown files in `/content`. Two of pages (`home` and `about`) are referencing directly their respective markdown files. + +Blog component loads all posts (during build!) and lists them out [How to load multiple md files](https://medium.com/@shawnstern/importing-multiple-markdown-files-into-a-react-component-with-webpack-7548559fce6f) + +Posts are separate static sites thanks to dynamically created export map. I took inspiration on how to do it from +[here](https://medium.com/@joranquinten/for-my-own-website-i-used-next-js-725678e65b09)