Merge pull request #214 from zeit/canary

Netlify cms example (vercel#8949)

examples/with-netlify-cms/components/layout.js

@@ -0,0 +1,33 @@
+import Link from 'next/link'
+
+const Layout = ({ children }) => (
+  <>
+    <nav>
+      <Link href='/'>
+        <a>home</a>
+      </Link>
+      <Link href='/blog'>
+        <a>blog</a>
+      </Link>
+      <Link href='/about'>
+        <a>about</a>
+      </Link>
+    </nav>
+    <main>{children}</main>
+    <style jsx>{`
+      nav {
+        text-align: center;
+      }
+      nav a {
+        margin-right: 2px;
+        padding: 4px;
+      }
+      main {
+        display: flex;
+        flex-direction: column;
+      }
+    `}</style>
+  </>
+)
+
+export default Layout

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.

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.

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.

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/).

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()
+    }
+  }
+}

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"
+  }
+}

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 = () => (
+  <Layout>
+    <h1>{attributes.title}</h1>
+    <div dangerouslySetInnerHTML={{ __html: html }} />
+    <style jsx>{`
+      h1,
+      div {
+        text-align: center;
+      }
+    `}</style>
+  </Layout>
+)
+
+export default About

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 }) => (
+  <Layout>
+    {postsList.map(post => (
+      <div key={post.slug} className='post'>
+        <Link href='/blog/post/[slug]' as={`/blog/post/${post.slug}`}>
+          <a>
+            <img src={post.attributes.thumbnail} />
+            <h2>{post.attributes.title}</h2>
+          </a>
+        </Link>
+      </div>
+    ))}
+    <style jsx>{`
+      .post {
+        text-align: center;
+      }
+      img {
+        max-width: 100%;
+        max-height: 300px;
+      }
+    `}</style>
+  </Layout>
+)
+
+Blog.getInitialProps = async () => {
+  const postsList = await importBlogPosts()
+  return { postsList }
+}
+
+export default Blog

examples/with-netlify-cms/pages/blog/post/[slug].js

@@ -0,0 +1,35 @@
+import Layout from '../../../components/layout'
+
+const Post = ({ blogpost }) => {
+  if (!blogpost) return <div>not found</div>
+
+  const { html, attributes } = blogpost.default
+
+  return (
+    <Layout>
+      <article>
+        <h1>{attributes.title}</h1>
+        <img src={attributes.thumbnail} />
+        <div dangerouslySetInnerHTML={{ __html: html }} />
+      </article>
+      <style jsx>{`
+        article {
+          margin: 0 auto;
+        }
+        h1 {
+          text-align: center;
+        }
+      `}</style>
+    </Layout>
+  )
+}
+
+Post.getInitialProps = async ({ query }) => {
+  const { slug } = query
+  const blogpost = await import(`../../../content/blogPosts/${slug}.md`).catch(
+    () => null
+  )
+  return { blogpost }
+}
+
+export default Post

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 = () => (
+  <Layout>
+    <h1>{attributes.title}</h1>
+    <div dangerouslySetInnerHTML={{ __html: html }} />
+    <style jsx>{`
+      h1,
+      div {
+        text-align: center;
+      }
+    `}</style>
+  </Layout>
+)
+
+export default Home

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 }

examples/with-netlify-cms/public/static/admin/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Content Manager</title>
+    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+  </head>
+  <body>
+    <!-- Include the script that builds the page and powers Netlify CMS -->
+    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
+  </body>
+</html>

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)