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/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,56 +34,61 @@ class Header extends Component {
   };
 
   render() {
-    const { location } = this.props;
     const { scrolled } = this.state;
 
-    const isDocs = location.pathname.indexOf('docs') !== -1;
-    const isBlog = location.pathname.indexOf('blog') !== -1;
-
     return (
-      <header
-        id="header"
-        className={classnames({
-          docs: isDocs,
-          blog: isBlog,
-          scrolled,
-        })}
-      >
-        <div className="contained">
-          <div className="logo-container">
-            <Link to="/" className="logo">
-              <img src={logo} />
-            </Link>
-            {isDocs && <DocSearch />}
-          </div>
-          <div className="nav-container">
-            <Link className="nav-link docs-link" to="/docs/intro">
-              Docs
-            </Link>
-            <Link className="nav-link contributing-link" to="/docs/contributor-guide">
-              Contributing
-            </Link>
-            <Link className="nav-link" to="/community">
-              Community
-            </Link>
-            <Link className="nav-link" to="/blog">
-              Blog
-            </Link>
-            <span className="gh-button">
-              <a
-                id="ghstars"
-                className="github-button"
-                href="https://github.com/netlify/netlify-cms"
-                data-icon="octicon-star"
-                data-show-count="true"
-                aria-label="Star netlify/netlify-cms on GitHub"
-              >
-                Star
-              </a>
-            </span>
-          </div>
-        </div>
-      </header>
+      <Location>
+        {({ location }) => {
+          const isDocs = location.pathname.indexOf('docs') !== -1;
+          const isBlog = location.pathname.indexOf('blog') !== -1;
+
+          return (
+            <header
+              id="header"
+              className={classnames({
+                docs: isDocs,
+                blog: isBlog,
+                scrolled,
+              })}
+            >
+              <div className="contained">
+                <div className="logo-container">
+                  <Link to="/" className="logo">
+                    <img src={logo} />
+                  </Link>
+                  {isDocs && <DocSearch />}
+                </div>
+                <div className="nav-container">
+                  <Link className="nav-link docs-link" to="/docs/intro">
+                    Docs
+                  </Link>
+                  <Link className="nav-link contributing-link" to="/docs/contributor-guide">
+                    Contributing
+                  </Link>
+                  <Link className="nav-link" to="/community">
+                    Community
+                  </Link>
+                  <Link className="nav-link" to="/blog">
+                    Blog
+                  </Link>
+                  <span className="gh-button">
+                    <a
+                      id="ghstars"
+                      className="github-button"
+                      href="https://github.com/netlify/netlify-cms"
+                      data-icon="octicon-star"
+                      data-show-count="true"
+                      aria-label="Star netlify/netlify-cms on GitHub"
+                    >
+                      Star
+                    </a>
+                  </span>
+                </div>
+              </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}`);
       },
     );
   };