docs: migrate website to Gatsby v2 (#1623)

* website: initial conversion to gatsby v2

* fix unexpected history use warning

* use commonjs only to fix gatsby error

* fix gatsby import error with sidecar

* remove unused postcss-colour-functions

* remove unused prop

* lowercase layout filename import to match actual file

* chore(lint): format code

website/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["react", "es2015", "stage-1"],
-  "plugins": ["add-module-exports"]
-}

website/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "globals": {
-    "graphql": true
-  }
-}

website/gatsby-browser.js

@@ -1,7 +1,6 @@
-import SmoothScroll from 'smooth-scroll';
-
 // Make scroll behavior of internal links smooth
 exports.onClientEntry = () => {
+  const SmoothScroll = require('smooth-scroll');
   new SmoothScroll('a[href*="#"]', {
     offset() {
       return document.querySelector('#header').offsetHeight;

website/gatsby-config.js

@@ -1,23 +1,5 @@
 const pkg = require('./package.json');
 
-const neatgrid = require('postcss-neat');
-const nestedcss = require('postcss-nested');
-const colorfunctions = require('postcss-colour-functions');
-const hdBackgrounds = require('postcss-at2x');
-const cssextend = require('postcss-simple-extend');
-const cssvars = require('postcss-simple-vars-async');
-
-const styleVariables = require('./src/theme');
-
-const postCssPlugins = [
-  neatgrid(),
-  nestedcss(),
-  colorfunctions(),
-  hdBackgrounds(),
-  cssextend(),
-  cssvars({ variables: styleVariables }),
-];
-
 module.exports = {
   siteMetadata: {
     title: 'Netlify CMS | Open-Source Content Management System',
@@ -71,14 +53,8 @@ module.exports = {
         ]
       },
     },
-    {
-      resolve: 'gatsby-plugin-postcss-sass',
-      options: {
-        postCssPlugins,
-      },
-    },
+    'gatsby-plugin-postcss',
     'gatsby-plugin-react-helmet',
-    'gatsby-plugin-react-next',
     'gatsby-plugin-catch-links',
     {
       resolve: `gatsby-plugin-manifest`,

website/package.json

@@ -15,32 +15,34 @@
   "license": "MIT",
   "dependencies": {
     "classnames": "^2.2.5",
-    "eslint": "^3.1.1",
-    "eslint-plugin-import": "^1.11.1",
-    "gatsby": "^1.9.270",
-    "gatsby-plugin-catch-links": "^1.0.22",
-    "gatsby-plugin-manifest": "^1.0.21",
-    "gatsby-plugin-postcss-sass": "^1.0.20",
-    "gatsby-plugin-react-helmet": "^2.0.11",
-    "gatsby-plugin-react-next": "^1.0.11",
-    "gatsby-remark-autolink-headers": "^1.4.18",
-    "gatsby-remark-prismjs": "^2.0.2",
-    "gatsby-source-filesystem": "^1.5.35",
-    "gatsby-transformer-json": "^1.0.17",
-    "gatsby-transformer-remark": "^1.7.42",
-    "gatsby-transformer-yaml": "^1.5.16",
+    "gatsby": "next",
+    "gatsby-plugin-catch-links": "next",
+    "gatsby-plugin-manifest": "next",
+    "gatsby-plugin-postcss": "^1.0.0",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-remark-autolink-headers": "next",
+    "gatsby-remark-prismjs": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-json": "next",
+    "gatsby-transformer-remark": "next",
+    "gatsby-transformer-yaml": "next",
     "postcss-at2x": "^2.0.0",
-    "postcss-colour-functions": "^1.5.1",
     "postcss-cssnext": "^2.7.0",
     "postcss-neat": "^2.5.2",
     "postcss-nested": "^1.0.0",
     "postcss-simple-extend": "^1.0.0",
     "postcss-simple-vars-async": "^1.2.1",
     "prismjs": "^1.14.0",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.2",
     "react-sidecar": "^0.1.1",
     "smooth-scroll": "^14.2.0"
   },
+  "devDependencies": {
+    "eslint": "^3.1.1",
+    "eslint-plugin-import": "^1.11.1"
+  },
   "private": true
 }

website/postcss.config.js

@@ -0,0 +1,19 @@
+const neatgrid = require('postcss-neat');
+const nestedcss = require('postcss-nested');
+// const colorfunctions = require('postcss-colour-functions');
+const hdBackgrounds = require('postcss-at2x');
+const cssextend = require('postcss-simple-extend');
+const cssvars = require('postcss-simple-vars-async');
+
+const styleVariables = require('./src/theme');
+
+module.exports = () => ({
+  plugins: [
+    neatgrid(),
+    nestedcss(),
+    // colorfunctions(),
+    hdBackgrounds(),
+    cssextend(),
+    cssvars({ variables: styleVariables }),
+  ],
+});

website/src/components/header.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import Link from 'gatsby-link';
 import classnames from 'classnames';
+import { Location } from '@reach/router';
 
 import DocSearch from './docsearch';
 
@@ -33,9 +34,11 @@ class Header extends Component {
   };
 
   render() {
-    const { location } = this.props;
     const { scrolled } = this.state;
 
+    return (
+      <Location>
+        {({ location }) => {
           const isDocs = location.pathname.indexOf('docs') !== -1;
           const isBlog = location.pathname.indexOf('blog') !== -1;
 
@@ -84,6 +87,9 @@ class Header extends Component {
               </div>
             </header>
           );
+        }}
+      </Location>
+    );
   }
 }
 

website/src/components/layout.js

@@ -0,0 +1,77 @@
+import React, { Fragment } from 'react';
+import Helmet from 'react-helmet';
+import classnames from 'classnames';
+import { graphql, StaticQuery } from 'gatsby';
+
+import Header from './header';
+import Footer from './footer';
+
+import '../css/imports/base.css';
+import '../css/imports/utilities.css';
+import '../css/imports/gitter.css';
+
+const Layout = ({ children }) => {
+  return (
+    <StaticQuery
+      query={graphql`
+        query layoutQuery {
+          site {
+            siteMetadata {
+              title
+              description
+            }
+          }
+          footer: file(relativePath: { regex: "/global/" }) {
+            childDataYaml {
+              footer {
+                buttons {
+                  url
+                  name
+                }
+              }
+            }
+          }
+          notifs: file(relativePath: { regex: "/notifications/" }) {
+            childDataYaml {
+              notifications {
+                published
+                loud
+                message
+                url
+              }
+            }
+          }
+        }
+      `}
+    >
+      {data => {
+        const { title, description } = data.site.siteMetadata;
+        const notifs = data.notifs.childDataYaml.notifications.filter(notif => notif.published);
+
+        return (
+          <Fragment>
+            <Helmet defaultTitle={title} titleTemplate={`%s | ${title}`}>
+              <meta name="description" content={description} />
+            </Helmet>
+            {notifs.map((node, i) => (
+              <a
+                key={i}
+                href={node.url}
+                className={classnames('notification', {
+                  'notification-loud': node.loud,
+                })}
+              >
+                {node.message}
+              </a>
+            ))}
+            <Header notifications={notifs} />
+            {children}
+            <Footer buttons={data.footer.childDataYaml.footer.buttons} />
+          </Fragment>
+        );
+      }}
+    </StaticQuery>
+  );
+};
+
+export default Layout;

website/src/components/widgets.js

@@ -33,7 +33,7 @@ class Widgets extends Component {
         currentWidget: target,
       },
       () => {
-        history.pushState(null, null, `#${target}`);
+        window.history.pushState(null, null, `#${target}`);
       },
     );
   };

website/src/html.js

@@ -1,22 +1,10 @@
 import React from 'react';
-import Gitter from 'react-sidecar';
+// gatsby throws some error when importing just react-sidecar.
+// Maybe because jsx file ext?
+import Gitter from 'react-sidecar/dist-modules/index.js';
 
-let stylesStr;
-if (process.env.NODE_ENV === `production`) {
-  try {
-    stylesStr = require('!raw-loader!../public/styles.css');
-  } catch (e) {
-    console.log(e);
-  }
-}
-
-module.exports = class HTML extends React.Component {
+class HTML extends React.Component {
   render() {
-    let css;
-    if (process.env.NODE_ENV === 'production') {
-      css = <style id="gatsby-inlined-css" dangerouslySetInnerHTML={{ __html: stylesStr }} />;
-    }
-
     return (
       <html {...this.props.htmlAttributes}>
         <head>
@@ -30,7 +18,6 @@ module.exports = class HTML extends React.Component {
           <meta name="apple-mobile-web-app-title" content="NetlifyCMS" />
           <meta name="application-name" content="NetlifyCMS" />
           {this.props.headComponents}
-          {css}
           <link
             rel="stylesheet"
             href="https://unpkg.com/docsearch.js@2.5.2/dist/cdn/docsearch.min.css"
@@ -47,4 +34,6 @@ module.exports = class HTML extends React.Component {
       </html>
     );
   }
-};
+}
+
+export default HTML;

website/src/layouts/index.js

@@ -1,66 +0,0 @@
-import React, { Fragment } from 'react';
-import Helmet from 'react-helmet';
-import classnames from 'classnames';
-
-import Header from '../components/header';
-import Footer from '../components/footer';
-
-import '../css/imports/base.css';
-import '../css/imports/utilities.css';
-import '../css/imports/gitter.css';
-
-const Layout = ({ data, location, children }) => {
-  const { title, description } = data.site.siteMetadata;
-  const notifs = data.notifs.notifications.filter(notif => notif.published);
-
-  return (
-    <Fragment>
-      <Helmet defaultTitle={title} titleTemplate={`%s | ${title}`}>
-        <meta name="description" content={description} />
-      </Helmet>
-      {notifs.map((node, i) => (
-        <a
-          key={i}
-          href={node.url}
-          className={classnames('notification', {
-            'notification-loud': node.loud,
-          })}
-        >
-          {node.message}
-        </a>
-      ))}
-      <Header location={location} notifications={notifs} />
-      {children()}
-      <Footer buttons={data.dataYaml.footer.buttons} />
-    </Fragment>
-  );
-};
-
-export const pageQuery = graphql`
-  query layoutQuery {
-    site {
-      siteMetadata {
-        title
-        description
-      }
-    }
-    dataYaml(id: { regex: "/global/" }) {
-      footer {
-        buttons {
-          url
-          name
-        }
-      }
-    }
-    notifs: dataYaml(id: { regex: "/notifications/" }) {
-      notifications {
-        published
-        loud
-        message
-        url
-      }
-    }
-  }
-`;
-
-export default Layout;

website/src/pages/blog.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import Link from 'gatsby-link';
+import { Link, graphql } from 'gatsby';
+
+import Layout from '../components/layout';
 
 const Blog = ({ data }) => (
+  <Layout>
     <div className="blog page">
       <Helmet>
         <title>Blog</title>
@@ -26,6 +29,7 @@ const Blog = ({ data }) => (
         {/* TODO: pagination */}
       </div>
     </div>
+  </Layout>
 );
 
 export default Blog;

website/src/pages/community.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 import Markdown from 'react-markdown';
+import { graphql } from 'gatsby';
 
+import Layout from '../components/layout';
 import EventWidget from '../components/event-widget';
 import Markdownify from '../components/markdownify';
 
@@ -19,6 +21,7 @@ const CommunityPage = ({ data }) => {
   } = data.markdownRemark.frontmatter;
 
   return (
+    <Layout>
       <div className="community page">
         <Helmet title={title} />
         <section className="community hero">
@@ -64,12 +67,13 @@ const CommunityPage = ({ data }) => {
           </div>
         </section>
       </div>
+    </Layout>
   );
 };
 
 export const pageQuery = graphql`
   query communityPage {
-    markdownRemark(id: { regex: "/community/" }) {
+    markdownRemark(fileAbsolutePath: { regex: "/community/" }) {
       frontmatter {
         headline
         subhead

website/src/pages/index.js

@@ -1,6 +1,8 @@
 import React, { Fragment } from 'react';
 import moment from 'moment';
+import { graphql } from 'gatsby';
 
+import Layout from '../components/layout';
 import Markdownify from '../components/markdownify';
 import VideoEmbed from '../components/video-embed';
 
@@ -27,9 +29,12 @@ const Features = ({ items }) => (
 );
 
 const HomePage = ({ data }) => {
-  const { landing, updates, contribs } = data;
+  const landing = data.landing.childDataYaml;
+  const updates = data.updates.childDataYaml;
+  const contribs = data.contribs.childDataJson;
 
   return (
+    <Layout>
       <div className="landing page">
         <section className="landing hero">
           <div className="contained">
@@ -74,7 +79,9 @@ const HomePage = ({ data }) => {
                   <li>
                     <div className="update-metadata">
                       <span className="update-version">{node.version}</span>
-                    <span className="update-date">{moment(node.date).format('MMMM D, YYYY')}</span>
+                      <span className="update-date">
+                        {moment(node.date).format('MMMM D, YYYY')}
+                      </span>
                     </div>
                     <span className="update-description">
                       <Markdownify source={node.description} />
@@ -123,19 +130,23 @@ const HomePage = ({ data }) => {
           </div>
         </section>
       </div>
+    </Layout>
   );
 };
 
 export const pageQuery = graphql`
   query homeQuery {
-    updates: dataYaml(id: { regex: "/updates/" }) {
+    updates: file(relativePath: { regex: "/updates/" }) {
+      childDataYaml {
         updates {
           date
           description
           version
         }
       }
-    landing: dataYaml(id: { regex: "/landing/" }) {
+    }
+    landing: file(relativePath: { regex: "/landing/" }) {
+      childDataYaml {
         hero {
           headline
           subhead
@@ -167,7 +178,9 @@ export const pageQuery = graphql`
           contributors
         }
       }
-    contribs: dataJson(id: { regex: "/contributors/" }) {
+    }
+    contribs: file(relativePath: { regex: "/contributors/" }) {
+      childDataJson {
         contributors {
           name
           profile
@@ -176,6 +189,7 @@ export const pageQuery = graphql`
         }
       }
     }
+  }
 `;
 
 export default HomePage;

website/src/templates/blog-post.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import Helmet from 'react-helmet';
+import { graphql } from 'gatsby';
+
+import Layout from '../components/layout';
 
 const BlogPost = ({ data }) => {
   const { html, frontmatter } = data.markdownRemark;
@@ -8,6 +11,7 @@ const BlogPost = ({ data }) => {
   const desc = meta_description || description;
 
   return (
+    <Layout>
       <div className="docs page">
         <Helmet>
           <title>{title}</title>
@@ -25,6 +29,7 @@ const BlogPost = ({ data }) => {
           </article>
         </div>
       </div>
+    </Layout>
   );
 };
 

website/src/templates/doc-page.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import { matchPath } from 'react-router-dom';
+import { graphql } from 'gatsby';
 
+import Layout from '../components/layout';
 import EditLink from '../components/edit-link';
 import Widgets from '../components/widgets';
 import DocsNav from '../components/docs-nav';
@@ -20,9 +21,10 @@ const DocPage = ({ data, location, history }) => {
   const { nav, page, widgets, menu } = data;
 
   const docsNav = toMenu(menu.siteMetadata.menu.docs, nav);
-  const showWidgets = matchPath(location.pathname, { path: '/docs/widgets' });
+  const showWidgets = location.pathname.indexOf('/docs/widgets') !== -1;
 
   return (
+    <Layout>
       <div className="docs detail page">
         <Helmet title={page.frontmatter.title} />
         <div className="container">
@@ -38,6 +40,7 @@ const DocPage = ({ data, location, history }) => {
           </article>
         </div>
       </div>
+    </Layout>
   );
 };