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,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}`);
       },
     );
   };

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,31 +1,35 @@
 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 }) => (
-  <div className="blog page">
-    <Helmet>
-      <title>Blog</title>
-      <meta name="description" content="Recent news and updates about Netlify CMS." />
-    </Helmet>
-    <div className="container">
-      <h1>Netlify CMS Blog</h1>
-      {data.allMarkdownRemark.edges.map(({ node }) => (
-        <article className="blog-list-item" key={node.id}>
-          <h2>
-            <Link to={node.fields.slug} className="article">
-              {node.frontmatter.title}
-            </Link>
-          </h2>
-          <p className="meta-info">
-            by {node.frontmatter.author} on {node.frontmatter.date}
-          </p>
-          <p>{node.frontmatter.description}</p>
-        </article>
-      ))}
-      {/* TODO: pagination */}
+  <Layout>
+    <div className="blog page">
+      <Helmet>
+        <title>Blog</title>
+        <meta name="description" content="Recent news and updates about Netlify CMS." />
+      </Helmet>
+      <div className="container">
+        <h1>Netlify CMS Blog</h1>
+        {data.allMarkdownRemark.edges.map(({ node }) => (
+          <article className="blog-list-item" key={node.id}>
+            <h2>
+              <Link to={node.fields.slug} className="article">
+                {node.frontmatter.title}
+              </Link>
+            </h2>
+            <p className="meta-info">
+              by {node.frontmatter.author} on {node.frontmatter.date}
+            </p>
+            <p>{node.frontmatter.description}</p>
+          </article>
+        ))}
+        {/* TODO: pagination */}
+      </div>
     </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,57 +21,59 @@ const CommunityPage = ({ data }) => {
   } = data.markdownRemark.frontmatter;
 
   return (
-    <div className="community page">
-      <Helmet title={title} />
-      <section className="community hero">
-        <div className="contained">
-          <div className="hero-copy">
-            <h1 className="headline">
-              <Markdownify source={headline} />
-            </h1>
-            <h2 className="subhead">
-              <Markdownify source={subhead} />
-            </h2>
-            <h3 className="ctas">
-              <ul>
-                <li>
-                  <Markdownify source={primarycta} />
-                </li>
-              </ul>
-            </h3>
-          </div>
+    <Layout>
+      <div className="community page">
+        <Helmet title={title} />
+        <section className="community hero">
+          <div className="contained">
+            <div className="hero-copy">
+              <h1 className="headline">
+                <Markdownify source={headline} />
+              </h1>
+              <h2 className="subhead">
+                <Markdownify source={subhead} />
+              </h2>
+              <h3 className="ctas">
+                <ul>
+                  <li>
+                    <Markdownify source={primarycta} />
+                  </li>
+                </ul>
+              </h3>
+            </div>
 
-          <div className="calendar-cta">
-            <h2>{upcomingevent.hook}</h2>
-            <EventWidget />
-            <div className="cal-cta">
-              <Markdownify source={primarycta} />
+            <div className="calendar-cta">
+              <h2>{upcomingevent.hook}</h2>
+              <EventWidget />
+              <div className="cal-cta">
+                <Markdownify source={primarycta} />
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      <section className="how-it-works clearfix">
-        <div className="contained">
-          <div className="half">
-            <h4 className="section-label">How it works</h4>
-            <p>
-              <Markdown source={howitworks} />
-            </p>
-            <h4 className="section-label">How to join</h4>
-            <p>
-              <Markdown source={howtojoin} />
-            </p>
+        <section className="how-it-works clearfix">
+          <div className="contained">
+            <div className="half">
+              <h4 className="section-label">How it works</h4>
+              <p>
+                <Markdown source={howitworks} />
+              </p>
+              <h4 className="section-label">How to join</h4>
+              <p>
+                <Markdown source={howtojoin} />
+              </p>
+            </div>
           </div>
-        </div>
-      </section>
-    </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,152 +29,164 @@ 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 (
-    <div className="landing page">
-      <section className="landing hero">
-        <div className="contained">
-          <div className="hero-copy">
-            <h1 className="headline">
-              <Markdownify source={landing.hero.headline} />
-            </h1>
-            <span className="subhead">
-              <Markdownify source={landing.hero.subhead} />
-            </span>
-            <span className="cta-header">
-              <Markdownify source={landing.cta.button} />
-            </span>
-          </div>
-          <div className="hero-features">
-            <Features items={landing.hero.devfeatures} />
-          </div>
-          <VideoEmbed />
-        </div>
-      </section>
-
-      <section className="cta">
-        <div className="cta-primary">
-          <p>
-            <span className="hook">
-              <Markdownify source={landing.cta.primaryhook} />
-            </span>{' '}
-            <Markdownify source={landing.cta.primary} />
-          </p>
-          <Markdownify source={landing.cta.button} />
-        </div>
-      </section>
-
-      <section className="whatsnew">
-        <div className="contained">
-          <ol>
-            {updates.updates.slice(0, 3).map(node => (
-              <a
-                href={`https://github.com/netlify/netlify-cms/releases/tag/${node.version}`}
-                key={node.version}
-              >
-                <li>
-                  <div className="update-metadata">
-                    <span className="update-version">{node.version}</span>
-                    <span className="update-date">{moment(node.date).format('MMMM D, YYYY')}</span>
-                  </div>
-                  <span className="update-description">
-                    <Markdownify source={node.description} />
-                  </span>
-                </li>
-              </a>
-            ))}
-          </ol>
-        </div>
-      </section>
-
-      <section className="editors">
-        <div className="contained">
-          <h2>
-            <Markdownify source={landing.editors.hook} />
-          </h2>
-          <p id="editor-intro">
-            <Markdownify source={landing.editors.intro} />
-          </p>
-          <div className="editors-features">
-            <Features items={landing.editors.features} />
-          </div>
-        </div>
-      </section>
-
-      <section className="communitysupport">
-        <div className="contained">
-          <h2>
-            <Markdownify source={landing.community.hook} />
-          </h2>
-          <div className="community">
-            <div className="community-features">
-              <Features items={landing.community.features} />
+    <Layout>
+      <div className="landing page">
+        <section className="landing hero">
+          <div className="contained">
+            <div className="hero-copy">
+              <h1 className="headline">
+                <Markdownify source={landing.hero.headline} />
+              </h1>
+              <span className="subhead">
+                <Markdownify source={landing.hero.subhead} />
+              </span>
+              <span className="cta-header">
+                <Markdownify source={landing.cta.button} />
+              </span>
             </div>
+            <div className="hero-features">
+              <Features items={landing.hero.devfeatures} />
+            </div>
+            <VideoEmbed />
           </div>
-          <div className="contributors feature">
-            <h3>{landing.community.contributors}</h3>
-            <div className="contributor-list">
-              {contribs.contributors.map(user => (
-                <a href={user.profile} title={user.name} key={user.login}>
-                  <img src={user.avatar_url.replace('v=4', 's=32')} alt={user.login} />
+        </section>
+
+        <section className="cta">
+          <div className="cta-primary">
+            <p>
+              <span className="hook">
+                <Markdownify source={landing.cta.primaryhook} />
+              </span>{' '}
+              <Markdownify source={landing.cta.primary} />
+            </p>
+            <Markdownify source={landing.cta.button} />
+          </div>
+        </section>
+
+        <section className="whatsnew">
+          <div className="contained">
+            <ol>
+              {updates.updates.slice(0, 3).map(node => (
+                <a
+                  href={`https://github.com/netlify/netlify-cms/releases/tag/${node.version}`}
+                  key={node.version}
+                >
+                  <li>
+                    <div className="update-metadata">
+                      <span className="update-version">{node.version}</span>
+                      <span className="update-date">
+                        {moment(node.date).format('MMMM D, YYYY')}
+                      </span>
+                    </div>
+                    <span className="update-description">
+                      <Markdownify source={node.description} />
+                    </span>
+                  </li>
                 </a>
               ))}
+            </ol>
+          </div>
+        </section>
+
+        <section className="editors">
+          <div className="contained">
+            <h2>
+              <Markdownify source={landing.editors.hook} />
+            </h2>
+            <p id="editor-intro">
+              <Markdownify source={landing.editors.intro} />
+            </p>
+            <div className="editors-features">
+              <Features items={landing.editors.features} />
             </div>
           </div>
-        </div>
-      </section>
-    </div>
+        </section>
+
+        <section className="communitysupport">
+          <div className="contained">
+            <h2>
+              <Markdownify source={landing.community.hook} />
+            </h2>
+            <div className="community">
+              <div className="community-features">
+                <Features items={landing.community.features} />
+              </div>
+            </div>
+            <div className="contributors feature">
+              <h3>{landing.community.contributors}</h3>
+              <div className="contributor-list">
+                {contribs.contributors.map(user => (
+                  <a href={user.profile} title={user.name} key={user.login}>
+                    <img src={user.avatar_url.replace('v=4', 's=32')} alt={user.login} />
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Layout>
   );
 };
 
 export const pageQuery = graphql`
   query homeQuery {
-    updates: dataYaml(id: { regex: "/updates/" }) {
-      updates {
-        date
-        description
-        version
+    updates: file(relativePath: { regex: "/updates/" }) {
+      childDataYaml {
+        updates {
+          date
+          description
+          version
+        }
       }
     }
-    landing: dataYaml(id: { regex: "/landing/" }) {
-      hero {
-        headline
-        subhead
-        devfeatures {
-          feature
-          description
+    landing: file(relativePath: { regex: "/landing/" }) {
+      childDataYaml {
+        hero {
+          headline
+          subhead
+          devfeatures {
+            feature
+            description
+          }
         }
-      }
-      cta {
-        primary
-        primaryhook
-        button
-      }
-      editors {
-        hook
-        intro
-        features {
-          feature
-          imgpath
-          description
+        cta {
+          primary
+          primaryhook
+          button
         }
-      }
-      community {
-        hook
-        features {
-          feature
-          description
+        editors {
+          hook
+          intro
+          features {
+            feature
+            imgpath
+            description
+          }
+        }
+        community {
+          hook
+          features {
+            feature
+            description
+          }
+          contributors
         }
-        contributors
       }
     }
-    contribs: dataJson(id: { regex: "/contributors/" }) {
-      contributors {
-        name
-        profile
-        avatar_url
-        login
+    contribs: file(relativePath: { regex: "/contributors/" }) {
+      childDataJson {
+        contributors {
+          name
+          profile
+          avatar_url
+          login
+        }
       }
     }
   }

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,23 +11,25 @@ const BlogPost = ({ data }) => {
   const desc = meta_description || description;
 
   return (
-    <div className="docs page">
-      <Helmet>
-        <title>{title}</title>
-        {desc && <meta name="description" content={desc} />}
-      </Helmet>
-      <div className="container">
-        <article className="blog-content" id="blog-content">
-          <div className="blog-post-header">
-            <h1>{title}</h1>
-            <p className="meta-info">
-              by {author} on {date}
-            </p>
-          </div>
-          <div dangerouslySetInnerHTML={{ __html: html }} />
-        </article>
+    <Layout>
+      <div className="docs page">
+        <Helmet>
+          <title>{title}</title>
+          {desc && <meta name="description" content={desc} />}
+        </Helmet>
+        <div className="container">
+          <article className="blog-content" id="blog-content">
+            <div className="blog-post-header">
+              <h1>{title}</h1>
+              <p className="meta-info">
+                by {author} on {date}
+              </p>
+            </div>
+            <div dangerouslySetInnerHTML={{ __html: html }} />
+          </article>
+        </div>
       </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,24 +21,26 @@ 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 (
-    <div className="docs detail page">
-      <Helmet title={page.frontmatter.title} />
-      <div className="container">
-        <aside id="sidebar" className="sidebar">
-          <DocsNav items={docsNav} location={location} />
-          <MobileNav items={docsNav} history={history} />
-        </aside>
-        <article className="docs-content" id="docs-content">
-          <EditLink path={page.fields.path} />
-          <h1>{page.frontmatter.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: page.html }} />
-          {showWidgets && <Widgets widgets={widgets} />}
-        </article>
+    <Layout>
+      <div className="docs detail page">
+        <Helmet title={page.frontmatter.title} />
+        <div className="container">
+          <aside id="sidebar" className="sidebar">
+            <DocsNav items={docsNav} location={location} />
+            <MobileNav items={docsNav} history={history} />
+          </aside>
+          <article className="docs-content" id="docs-content">
+            <EditLink path={page.fields.path} />
+            <h1>{page.frontmatter.title}</h1>
+            <div dangerouslySetInnerHTML={{ __html: page.html }} />
+            {showWidgets && <Widgets widgets={widgets} />}
+          </article>
+        </div>
       </div>
-    </div>
+    </Layout>
   );
 };