Initial commit for conversion to Gatsby

As of this commit, you can't run this locally as it's relying on not
yet released changes to Gatsby. I've published the site however to
https://webpack-gatsby.netlify.com/

.babelrc

@@ -1,6 +1,3 @@
 {
-  "presets": [
-    "es2015",
-    "react"
-  ]
+  "presets": ['es2015', 'stage-1', 'react'],
 }

.gitignore

@@ -3,3 +3,8 @@ npm-debug.log
 build
 .antwar
 
+.intermediate-representation/
+.netlify
+styles/geomanist/geomanist-regular.woff
+styles/geomanist/geomanist-regular.woff2
+public

components/Container.jsx

@@ -1,11 +1,19 @@
 import React from 'react';
+import { rhythm } from 'utilities/typography'
 
-export default props => {
-  let { className = '' } = props;
-
+export default ({ className, style, children }) => {
+  if (!className) {
+    className = ''
+  }
   return (
-    <div className={ `container ${className}`}>
-      { props.children }
+    <div
+      className={ `container ${className}`}
+      style={{
+        padding: `${rhythm(1/2)} ${rhythm(1)}`,
+        ...style,
+      }}
+    >
+      { children }
     </div>
   );
 };

components/Contributors.jsx

@@ -1,21 +1,26 @@
 import React from 'react';
 
 export default props => {
-  return (
-    <div className="contributors">
-      <h4>Contributors:</h4>
-      <div className="contributors__list">
-        { 
-          (props.contributors || []).map(contributor => (
-            <a key={ contributor } 
-              className="contributors__person" 
-              href={ `https://github.com/${contributor}` }>
-              <img src={ `https://github.com/${contributor}.png?size=80` } />
-              <span>{ contributor }</span>
-            </a>
-          ))
-        }
+  if (props.contributors) {
+    return (
+      <div className="contributors">
+        <hr />
+        <h4>Contributors:</h4>
+        <div className="contributors__list">
+          { 
+            (props.contributors || []).map(contributor => (
+              <a key={ contributor } 
+                className="contributors__person" 
+                href={ `https://github.com/${contributor}` }>
+                <img src={ `https://github.com/${contributor}.png?size=80` } />
+                <span>{ contributor }</span>
+              </a>
+            ))
+          }
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  } else {
+    return null
+  }
+};

components/Footer.jsx

@@ -8,21 +8,27 @@ export default props => {
     <footer className="footer">
       <Container className="footer__inner">
         <section className="footer__left">
-          <Link className="footer__link" to="/get-started">Get Started</Link>
-          <Link className="footer__link" to="/analyze">Analyze</Link>
-          <Link className="footer__link" to="/contribute">Contribute</Link>
+          <Link className="footer__link" to="/get-started/">Get Started</Link>
+          <Link className="footer__link" to="/analyze/">Analyze</Link>
+          <Link className="footer__link" to="/contribute/">Contribute</Link>
         </section>
 
         <section className="footer__middle">
-          <Link to={{ pathname: '/' }}>
+          <Link
+            to={{ pathname: '/' }}
+            style={{
+              display: 'block',
+              height: 30,
+            }}
+          >
             <Cube depth={ 18 } hover />
           </Link>
         </section>
 
         <section className="footer__right">
           <Link className="footer__link" to="//gitter.im/webpack/webpack">Support</Link>
-          <Link className="footer__link" to="/changelog">Changelog</Link>
-          <Link className="footer__link" to="/license">License</Link>
+          <Link className="footer__link" to="/changelog/">Changelog</Link>
+          <Link className="footer__link" to="/license/">License</Link>
         </section>
       </Container>
     </footer>

components/Navigation.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Link from './Link';
 import Container from './Container';
 import Logo from './Logo';
+import { rhythm, scale, options } from 'utilities/typography';
 
 export default ({ home = '/', pages }) => (
   <div className="navigation">
@@ -17,7 +18,13 @@ export default ({ home = '/', pages }) => (
               key={ `navigation__link${i}` }
               className="navigation__link"
               activeClassName="navigation__link--active"
-              to={ `/${link.url}` }>
+              to={ `/${link.url}` }
+              style={{
+                ...scale(-1/5),
+                fontFamily: options.headerFontFamily.join(','),
+                marginLeft: rhythm(1),
+              }}
+            >
               { link.title }
             </Link>
           ))

components/Sidebar.jsx

@@ -1,24 +1,59 @@
 import React from 'react';
-import Link from './Link';
+import Link from 'react-router/lib/Link';
+import { rhythm, scale, options } from 'utilities/typography';
 
-const Sidebar = ({ sectionName, pages }) => (
-  <nav className="sidebar">
-    <Item url={ `/${sectionName}` } title="Introduction" />
+const Sidebar = ({ pathname, pages }) => {
+  const splitPathname = pathname.split('/')
+  const base = splitPathname[1]
+  const sectionPages = pages.filter((page) => {
+    return base === page.node.path.split('/')[1] &&
+      // This is the index page, since we always add it as "introduction"
+      // filter it out here.
+      page.node.path !== `/${base}/`
+  })
 
-    {
-      pages.map(({ url, title }, i) =>
-        <Item 
-          key={ `sidebar-item-${i}` } 
-          url={ `/${url}` } 
-          title={ title } />
-      )
-    }
-  </nav>
-);
+  return (
+    <nav
+      className="sidebar"
+      style={{
+        padding: rhythm(1),
+      }}
+    >
+      <Item url={ `/${base}/` } title="Introduction" />
+      {
+        sectionPages.map(({ node }, i) =>
+          <Item
+            key={ `sidebar-item-${i}` }
+            url={ node.path }
+            title={ node.frontmatter.title } />
+        )
+      }
+    </nav>
+  )
+};
 
 const Item = ({ url, title }) => (
-  <div className="sidebar-item">
-    <Link className="sidebar-item__title" to={ url }>{ title }</Link>
+  <div
+    className="sidebar-item"
+    style={{
+      ...scale(-1/5),
+      marginBottom: rhythm(1/4),
+      width: '100%',
+    }}
+  >
+    <Link
+      className="sidebar-item__title"
+      style={{
+        padding: rhythm(1/4),
+      }}
+      activeStyle={{
+        color: 'black',
+        fontWeight: 'bold',
+      }}
+      to={ url }
+    >
+      { title }
+    </Link>
     <i className="sidebar-item__toggle icon-chevron-down" />
     <ul className="sidebar-item__sections">
       {/*

gatsby-config.js

@@ -0,0 +1,8 @@
+const config = {
+  siteMetadata: {
+    title: 'Webpack',
+  },
+  sources: `${__dirname}/pages/`,
+}
+
+export default config

gatsby-node.js

@@ -0,0 +1,63 @@
+import _ from 'lodash'
+import path from 'path'
+// Have to make requires explicit so use same copy of plugin as Gatsby itself...
+var ExtractTextPlugin = require('gatsby/node_modules/extract-text-webpack-plugin');
+
+exports.createPages = ({ graphql }) => (
+  new Promise((resolve, reject) => {
+    const paths = []
+    graphql(`
+      {
+        allMarkdown(first: 1000) {
+          edges {
+            node {
+              path
+            }
+          }
+        }
+      }
+    `)
+    .then((result) => {
+      if (result.errors) {
+        console.log(result.errors)
+        reject(result.errors)
+      }
+
+      const articleComponent = path.resolve('./page-templates/markdown-template.js')
+      // Create article routes.
+      _.each(result.data.allMarkdown.edges, (edge) => {
+        paths.push({
+          path: edge.node.path, // required
+          component: articleComponent,
+        })
+      })
+
+      resolve(paths)
+    })
+  })
+)
+
+exports.modifyWebpackConfig = function(config, env) {
+  console.log(env)
+  // Use style-loader for dev.
+  if (env === 'develop') {
+    config.loader('sass', {
+      test: /\.(sass|scss)/,
+      loaders: ['style', 'css', 'sass'],
+    })
+  // Add ExtractTextPlugin loader when building css.
+  } else if (env === 'build-css') {
+    config.loader('sass', {
+      test: /\.(sass|scss)$/,
+      loader: ExtractTextPlugin.extract(['css?minimize', 'postcss', 'sass']),
+    })
+  // Otherwise use a null-loader.
+  } else {
+    config.loader('sass', {
+      test: /\.(sass|scss)/,
+      loader: 'null',
+    })
+  }
+
+  return config
+}

html.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import HTMLScripts from 'html-scripts'
+import HTMLStyles from 'html-styles'
+import { GoogleFont, TypographyStyle } from 'react-typography'
+import typography from './utilities/typography'
+import get from 'lodash/get'
+
+module.exports = React.createClass({
+  render () {
+    // TODO add react helmet rewind
+    return (
+      <html lang="en">
+        <head>
+          <title>Webpack</title>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <GoogleFont typography={typography} />
+          <TypographyStyle typography={typography} />
+          <HTMLStyles />
+          {this.props.headComponents}
+        </head>
+        <body>
+          <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
+          <HTMLScripts scripts={this.props.scripts} />
+        </body>
+      </html>
+    )
+  },
+})