Merge branch 'dynamic-granular-chunking' of github.com:janicklas-ralp…

…h/next.js into dynamic-granular-chunking

.circleci/config.yml

@@ -41,6 +41,16 @@ commands:
       - run:
           name: Linting
           command: yarn lint
+  yarn_react_canary:
+    steps:
+      - run:
+          name: Upgrade to React Canary
+          command: yarn upgrade react@canary react-dom@canary -W --dev # upgrade (vs add) will skip re-building Next.js, which doesn't bundle React internals (so this is OK!)
+  yarn_info:
+    steps:
+      - run:
+          name: React Versions
+          command: yarn why react && yarn why react-dom
   test_all:
     steps:
       - run:
@@ -114,11 +124,18 @@ jobs:
       - yarn_install
       - yarn_lint
       - *persist_to_workspace
+  build-react-canary:
+    executor: node
+    steps:
+      - *attach_workspace
+      - yarn_react_canary
+      - *persist_to_workspace
   test:
     parallelism: 3
     executor: node
     steps:
       - *attach_workspace
+      - yarn_info
       - test_all
       - *store_test_results
   test-ie11:
@@ -196,3 +213,19 @@ workflows:
               only:
                 - master
                 - canary
+  q12h-react-canary:
+    triggers:
+      - schedule:
+          cron: '0 0,12 * * *'
+          filters:
+            branches:
+              only:
+                - canary
+    jobs:
+      - build
+      - build-react-canary:
+          requires:
+            - build
+      - test:
+          requires:
+            - build-react-canary

examples/api-routes-apollo-server-and-client/pages/api/graphql.js

@@ -1,8 +1,7 @@
 import { ApolloServer } from 'apollo-server-micro'
-import { typeDefs } from '../../apollo/type-defs'
-import { resolvers } from '../../apollo/resolvers'
+import { schema } from '../../apollo/schema'
 
-const apolloServer = new ApolloServer({ typeDefs, resolvers })
+const apolloServer = new ApolloServer({ schema })
 
 export const config = {
   api: {

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>