Convert website to Gatsby

.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

antwar.config.js

@@ -68,7 +68,7 @@ module.exports = {
       function() {
         return require.context(
           'json!yaml-frontmatter!./content/how-to',
-          false,
+          true,
           /^\.\/.*\.md$/
         );
       }

components/Container.jsx

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

components/Contributors.jsx

@@ -1,21 +1,30 @@
 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>
+        <hr />
+        <h3>Contributors:</h3>
+        <div className="contributors__list">
+          {
+            (props.contributors || []).map(contributor => (
+              <a key={ contributor }
+                href={ `https://github.com/${contributor}` }>
+                <img
+                  alt="Contributor to this page"
+                  style={{
+                    width: 48,
+                  }}
+                  src={ `https://github.com/${contributor}.png?size=96` }
+                />
+              </a>
+            ))
+          }
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  } else {
+    return null
+  }
+};

components/Footer.jsx

@@ -3,26 +3,35 @@ import Link from './Link';
 import Cube from './Cube';
 import Container from './Container';
 
+// TODO fix footer's responsiveness
+/*
+          <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>
+          */
 export default props => {
   return (
     <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>
         </section>
       </Container>
     </footer>

components/Logo.jsx

@@ -15,13 +15,13 @@ export default class Logo extends Component {
     let { theme = 'dark' } = this.props;
 
     return (
-      <span 
-        ref={ ref => this.container = ref } 
+      <span
+        ref={ ref => this.container = ref }
         className={ `logo logo--${theme}` }>
-        <Cube 
+        <Cube
           ref={ ref => this.icon = ref }
           className="logo__cube"
-          theme={ theme } 
+          theme={ theme }
           depth={ 20 } />
         <span className="logo__text">webpack</span>
       </span>
@@ -34,8 +34,10 @@ export default class Logo extends Component {
   }
 
   componentWillUnmount() {
-    this.container.removeEventListener('mouseenter', this.listeners.spin);
-    this.container.removeEventListener('mouseleave', this.listeners.reset);
+    if (this.container) {
+      this.container.removeEventListener('mouseenter', this.listeners.spin);
+      this.container.removeEventListener('mouseleave', this.listeners.reset);
+    }
   }
 
   /**
@@ -54,5 +56,5 @@ export default class Logo extends Component {
    */
   _triggerReset(e) {
     this.icon.reset(e);
-  }     
+  }
 }

components/MobileSidebar.jsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import Link from 'react-router/lib/Link';
+import groupBy from 'lodash/groupBy'
+import sortBy from 'lodash/sortBy'
+import { merge, before, media, presets, style } from 'glamor'
+import { rhythm, scale } from 'utilities/typography'
+import { sections, pages, basepath } from 'utilities/pages'
+
+// TODO this should just be a GraphQL query.
+// Group pages by section.
+const groupedPages = groupBy(pages, (page) => basepath(page.node.path))
+
+// Sort pages
+Object.keys(groupedPages).forEach((k) => groupedPages[k] = sortBy(groupedPages[k], (page) => {
+  if (page.node.path === `/${k}/`) {
+    return -100
+  } else {
+    return page.node.frontmatter.sort
+  }
+}))
+
+// Replace the index page with one titled "introduction".
+
+const SidebarLink = ({ path, title }) => {
+  return (
+    <Link
+      to={path}
+      key={path}
+      activeStyle={{
+        background: 'rgba(0,0,0,0.15)',
+        color: 'black',
+      }}
+      {...style({
+        color: '#535353',
+        display: 'block',
+        padding: rhythm(1/4),
+        paddingLeft: rhythm(3/4),
+        paddingRight: rhythm(3/4),
+        marginLeft: rhythm(-3/4),
+        marginRight: rhythm(-3/4),
+        width: '100%',
+        textDecoration: 'none',
+      })}
+    >
+      {title}
+    </Link>
+  )
+}
+
+export default ({ children, isOpen, close, activeSection }) => {
+  let opacity
+  let transform
+  if (isOpen) {
+    opacity = 1
+    transform = 'translateX(0)'
+  } else {
+    opacity = 0
+    transform = 'translateX(-105%)'
+  }
+  return (
+    <div
+      {...merge({
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        visibility: isOpen ? 'visible' : 'hidden',
+        zIndex: 1,
+      },
+      before({
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        background: 'rgba(0,0,0,0.4)',
+        opacity: opacity,
+        willChange: 'opacity',
+        transition: 'opacity 0.3s cubic-bezier(0,0,0.3,1)',
+      }),
+      media(presets.tablet, {
+        display: 'none',
+      }))}
+      onClick={close}
+    >
+      <div
+        {...merge({
+          //display: isOpen ? 'fixed' : 'none',
+          boxShadow: '2px 0 12px rgba(0,0,0,0.4)',
+          background: 'white',
+          maxWidth: rhythm(12),
+          height: '100%',
+          transform: transform,
+          willChange: 'transform',
+          transitionDuration: '130ms',
+          transitionDelay: '0ms',
+          padding: `${rhythm(1/2)} ${rhythm(3/4)}`,
+          overflowY: 'scroll',
+        },
+        media(presets.tablet, {
+          display: 'none',
+        }))}
+      >
+        <h1
+          style={{ cursor: 'pointer' }}
+          onClick={close}
+        >
+          X
+        </h1>
+        <h2>Sections</h2>
+        <div
+          {...style({
+            marginBottom: rhythm(2),
+          })}
+        >
+          <SidebarLink
+            title='Get Started'
+            path='/get-started/'
+          />
+          <SidebarLink
+            title='Contribute'
+            path='/contribute/'
+          />
+        </div>
+        <div
+          {...merge({
+            display: 'block',
+          },
+          media(presets.tablet, {
+            display: 'none',
+          }))}
+        >
+          {sections.map((section) => {
+            return (
+              <div
+                {...style({
+                  marginBottom: rhythm(2),
+                })}
+              >
+                <h3>{section.title}</h3>
+                {groupedPages[basepath(section.url)].map((page) => (
+                  <SidebarLink
+                    title={page.node.frontmatter.title}
+                    path={page.node.path}
+                  />
+                ))}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}