From 77259b42ab051cabedb5c9ab2c1313dc8cafc8b4 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Fri, 29 Sep 2017 00:09:41 -0400
Subject: [PATCH 01/18] refactor: update information architecture

This commit contains the following changes:

- Merge support and development into a coherent "Contribute" section.
- Flatten `/api/plugins` in preparation for flattened page `group`ing.
- Sort "Contribute" section and rewrite index page using "Why Support?".
- Simplify and organize antwar config as much as possible.
- Move `title` / `description` fields to the actual components.

BREAKING CHANGE: The route restructuring and content reorg
breaks some routes. Before this is merged, we should make sure
to add redirects for anything broken.
---
 antwar.config.js                              | 162 ++++++------------
 src/components/Organization/Organization.jsx  |   6 +-
 src/components/Splash/Splash.jsx              |   3 +
 src/components/StarterKits/StarterKits.jsx    |   6 +-
 src/components/Vote/{List.jsx => Vote.jsx}    |   8 +-
 src/components/Vote/{List.scss => Vote.scss}  |   0
 src/content/api/{plugins => }/compilation.md  |   1 +
 src/content/api/{plugins => }/compiler.md     |   1 +
 src/content/api/{plugins => }/dependency.md   |   1 +
 .../api/{plugins => }/module-factories.md     |   1 +
 src/content/api/{plugins => }/parser.md       |   1 +
 .../{plugins/index.md => plugins-index.md}    |   1 +
 src/content/api/plugins/template.md           |  36 ----
 src/content/api/{plugins => }/resolver.md     |   1 +
 src/content/api/{plugins => }/tapable.md      |   1 +
 src/content/api/template.md                   |  37 ++++
 src/content/contribute/index.md               |  71 ++++++++
 .../plugin-patterns.md                        |   4 +-
 .../release-process.md                        |   3 +-
 .../writing-a-loader.md}                      |   8 +-
 .../writing-a-plugin.md}                      |   4 +-
 src/content/development/index.md              |  12 --
 src/content/support/index.md                  |  65 -------
 23 files changed, 196 insertions(+), 237 deletions(-)
 rename src/components/Vote/{List.jsx => Vote.jsx} (85%)
 rename src/components/Vote/{List.scss => Vote.scss} (100%)
 rename src/content/api/{plugins => }/compilation.md (99%)
 rename src/content/api/{plugins => }/compiler.md (99%)
 rename src/content/api/{plugins => }/dependency.md (73%)
 rename src/content/api/{plugins => }/module-factories.md (98%)
 rename src/content/api/{plugins => }/parser.md (99%)
 rename src/content/api/{plugins/index.md => plugins-index.md} (99%)
 delete mode 100644 src/content/api/plugins/template.md
 rename src/content/api/{plugins => }/resolver.md (99%)
 rename src/content/api/{plugins => }/tapable.md (99%)
 create mode 100644 src/content/api/template.md
 create mode 100644 src/content/contribute/index.md
 rename src/content/{development => contribute}/plugin-patterns.md (99%)
 rename src/content/{development => contribute}/release-process.md (93%)
 rename src/content/{development/how-to-write-a-loader.md => contribute/writing-a-loader.md} (98%)
 rename src/content/{development/how-to-write-a-plugin.md => contribute/writing-a-plugin.md} (99%)
 delete mode 100644 src/content/development/index.md
 delete mode 100644 src/content/support/index.md

diff --git a/antwar.config.js b/antwar.config.js
index 50f3b3294116..e7c5b9aae864 100644
--- a/antwar.config.js
+++ b/antwar.config.js
@@ -13,91 +13,60 @@ module.exports = {
   layout: () => require('./src/components/Site/Site.jsx').default,
   paths: {
     '/': {
-      title: "Home",
+      title: 'Home',
+      layout: () => require('./src/components/Page/Page.jsx').default,
       content: () => require.context('./loaders/page-loader!./src/content', false, /^\.\/.*\.md$/),
-      index: () => {
-        const index = require('./src/components/Splash/Splash.jsx').default;
-        index.title = 'webpack';
-        index.description = 'webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.';
-
-        return index;
-      },
+      index: () => require('./src/components/Splash/Splash.jsx').default
+    },
+    concepts: {
+      title: 'Concepts',
+      url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
       layout: () => require('./src/components/Page/Page.jsx').default,
+      content: () => require.context('./loaders/page-loader!./src/content/concepts', false, /^\.\/.*\.md$/)
     },
-    'get-started': {
-      redirects: {
-        '': '/guides/getting-started',
-        'install-webpack': '/guides/installation',
-        'why-webpack': '/guides/why-webpack',
-      }
+    configuration: {
+      title: 'Configuration',
+      url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
+      layout: () => require('./src/components/Page/Page.jsx').default,
+      content: () => require.context('./loaders/page-loader!./src/content/configuration', false, /^\.\/.*\.md$/)
     },
     api: {
-      title: "API",
-      layout: () => require('./src/components/Page/Page.jsx').default,
+      title: 'API',
       url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
+      layout: () => require('./src/components/Page/Page.jsx').default,
       content: () => require.context('./loaders/page-loader!./src/content/api', false, /^\.\/.*\.md$/),
-      transform: (pages) => {
-        return _.sortBy(pages, (page) => page.file.sort)
-      },
       redirects: {
         'passing-a-config': 'configuration-types'
       }
     },
-    'api/plugins': {
-      title: "API Plugins",
-      layout: () => require('./src/components/Page/Page.jsx').default,
+    guides: {
+      title: 'Guides',
       url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
-      content: () => require.context('./loaders/page-loader!./src/content/api/plugins', false, /^\.\/.*\.md$/),
-      transform: (pages) => {
-        return _.sortBy(pages, (page) => page.file.sort)
-      },
+      layout: () => require('./src/components/Page/Page.jsx').default,
+      content: () => require.context('./loaders/page-loader!./src/content/guides', false, /^\.\/.*\.md$/),
       redirects: {
-        'passing-a-config': 'configuration-types'
+        'code-splitting-import': '/guides/code-splitting',
+        'code-splitting-require': '/guides/code-splitting',
+        'code-splitting-async': '/guides/code-splitting',
+        'code-splitting-css': '/guides/code-splitting',
+        'code-splitting-libraries': '/guides/code-splitting',
+        'why-webpack': '/comparison',
+        'production-build': '/guides/production'
       }
     },
-    pluginsapi: {
-      title: 'API Plugin',
-      redirects: {
-        '': '/api/plugins',
-        'compiler': '/api/plugins/compiler',
-        'template': '/api/plugins/template'
-      },
-      hideInSidebar: true
-    },
-    concepts: {
-      title: "Concepts",
-      layout: () => require('./src/components/Page/Page.jsx').default,
-      content: () => require.context('./loaders/page-loader!./src/content/concepts', false, /^\.\/.*\.md$/),
+    plugins: {
+      title: 'Plugins',
       url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
-      transform: (pages) => {
-        return _.sortBy(pages, (page) => page.file.sort)
-      }
-    },
-    development: {
-      title: "Development",
       layout: () => require('./src/components/Page/Page.jsx').default,
-      content: () => require.context('./loaders/page-loader!./src/content/development', false, /^\.\/.*\.md$/),
-      url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
-      transform: (pages) => {
-        return _.sortBy(pages, (page) => page.file.sort)
-      }
-    },
-    plugins: {
-      title: "Plugin",
       content: () => {
         return combineContexts(
           require.context('./loaders/page-loader!./src/content/plugins', false, /^\.\/.*\.md$/),
           require.context('./loaders/page-loader!./generated/plugins', false, /^\.\/.*\.md$/)
         );
-      },
-      url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
-      transform: (pages) => {
-        return _.sortBy(pages, (page) => page.file.sort)
-      },
-      layout: () => require('./src/components/Page/Page.jsx').default
+      }
     },
     loaders: {
-      title: "Loaders",
+      title: 'Loaders',
       url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
       layout: () => require('./src/components/Page/Page.jsx').default,
       content: () => {
@@ -105,63 +74,34 @@ module.exports = {
           require.context('./loaders/page-loader!./src/content/loaders', false, /^\.\/.*\.md$/),
           require.context('./loaders/page-loader!./generated/loaders', false, /^\.\/.*\.md$/)
         );
-      },
-    },
-    guides: {
-      title: "Guides",
-      layout: () => require('./src/components/Page/Page.jsx').default,
-      url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
-      content: () => require.context('./loaders/page-loader!./src/content/guides', false, /^\.\/.*\.md$/),
-      transform: (pages) => {
-        return _.sortBy(pages, (page) => page.file.sort)
-      },
-      redirects: {
-        'code-splitting-import': '/guides/code-splitting',
-        'code-splitting-require': '/guides/code-splitting',
-        'code-splitting-async': '/guides/code-splitting',
-        'code-splitting-css': '/guides/code-splitting',
-        'code-splitting-libraries': '/guides/code-splitting',
-        'why-webpack': '/comparison',
-        'production-build': '/guides/production'
       }
     },
-    configuration: {
-      title: "Configuration",
-      layout: () => require('./src/components/Page/Page.jsx').default,
+    contribute: {
+      title: 'Contribute',
       url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
-      content: () => require.context('./loaders/page-loader!./src/content/configuration', false, /^\.\/.*\.md$/),
-      transform: (pages) => {
-        return _.sortBy(pages, (page) => page.file.sort)
-      }
-    },
-    support: {
-      title: "Support",
       layout: () => require('./src/components/Page/Page.jsx').default,
-      url: ({ sectionName, fileName }) => `/${sectionName}/${fileName}/`,
-      content: () => require.context('./loaders/page-loader!./src/content/support', false, /^\.\/.*\.md$/),
-      transform: (pages) => {
-        return _.sortBy(pages, (page) => page.file.sort)
-      }
-    },
-    vote: () => {
-      const page = require('./src/components/Vote/List.jsx').default;
-      page.title = 'Vote';
-
-      return page;
+      content: () => require.context('./loaders/page-loader!./src/content/contribute', false, /^\.\/.*\.md$/),
     },
-    organization: () => {
-      const page = require('./src/components/Organization/Organization.jsx').default;
-
-      page.title = 'Organization';
+    vote: () => require('./src/components/Vote/Vote.jsx').default,
+    organization: () => require('./src/components/Organization/Organization.jsx').default,
+    'starter-kits': () => require('./src/components/StarterKits/StarterKits.jsx').default,
 
-      return page;
+    /*************************
+     Redirects for Old Content
+     *************************/
+    'get-started': {
+      redirects: {
+        '': '/guides/getting-started',
+        'install-webpack': '/guides/installation',
+        'why-webpack': '/guides/why-webpack',
+      }
     },
-    'guides/starter-kits': () => {
-      const page = require('./src/components/StarterKits/StarterKits.jsx').default;
-
-      page.title = 'Starter kits';
-
-      return page;
+    pluginsapi: {
+      redirects: {
+        '': '/api/plugins',
+        'compiler': '/api/compiler',
+        'template': '/api/template'
+      }
     }
   }
 };
diff --git a/src/components/Organization/Organization.jsx b/src/components/Organization/Organization.jsx
index 544916606c89..89dbed4e95ec 100644
--- a/src/components/Organization/Organization.jsx
+++ b/src/components/Organization/Organization.jsx
@@ -6,7 +6,7 @@ import Shield from '../Shield/Shield';
 import Items from './projects.json';
 import './Organization.scss';
 
-export default props => {
+const Organization = props => {
   return (
     <Container className="organization page__content">
       <h1>The Organization</h1>
@@ -67,3 +67,7 @@ export default props => {
     </Container>
   );
 };
+
+Organization.title = 'Organization';
+
+export default Organization;
diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx
index f41e2ec30dbc..a0790cb450f3 100644
--- a/src/components/Splash/Splash.jsx
+++ b/src/components/Splash/Splash.jsx
@@ -47,4 +47,7 @@ const Splash = () => (
   </div>
 );
 
+Splash.title = 'webpack';
+Splash.description = 'webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.';
+
 export default Splash;
diff --git a/src/components/StarterKits/StarterKits.jsx b/src/components/StarterKits/StarterKits.jsx
index bb0dccd3bf9c..4711d8a0d8a2 100644
--- a/src/components/StarterKits/StarterKits.jsx
+++ b/src/components/StarterKits/StarterKits.jsx
@@ -10,7 +10,7 @@ import './StarterKits.scss';
 // can use. This component could even use something like griddle
 // to allow sorting and such.
 
-export default props => (
+const StarterKits = props => (
   <Container className="starter-kits page__content">
     <h1>Starter Kits</h1>
 
@@ -70,3 +70,7 @@ export default props => (
     </div>
   </Container>
 );
+
+StarterKits.title = 'Starter Kits';
+
+export default StarterKits;
diff --git a/src/components/Vote/List.jsx b/src/components/Vote/Vote.jsx
similarity index 85%
rename from src/components/Vote/List.jsx
rename to src/components/Vote/Vote.jsx
index da1aeda25992..c93c910dae16 100644
--- a/src/components/Vote/List.jsx
+++ b/src/components/Vote/Vote.jsx
@@ -3,12 +3,12 @@ import Interactive from 'antwar-interactive';
 import Container from '../Container/Container';
 import VoteApp from './App';
 import '../../styles';
-import './List.scss';
+import './Vote.scss';
 import './App.scss';
 import './Influence.scss';
 import './Button/Button.scss';
 
-export default ({ section, page }) => {
+const Vote = ({ section, page }) => {
   let arr = page.url.split('/');
   let name = arr[arr.length - 1];
 
@@ -25,3 +25,7 @@ export default ({ section, page }) => {
     </Container>
   );
 };
+
+Vote.title = 'Vote';
+
+export default Vote;
diff --git a/src/components/Vote/List.scss b/src/components/Vote/Vote.scss
similarity index 100%
rename from src/components/Vote/List.scss
rename to src/components/Vote/Vote.scss
diff --git a/src/content/api/plugins/compilation.md b/src/content/api/compilation.md
similarity index 99%
rename from src/content/api/plugins/compilation.md
rename to src/content/api/compilation.md
index 7e7e5dcfab6f..ecba62ad1368 100644
--- a/src/content/api/plugins/compilation.md
+++ b/src/content/api/compilation.md
@@ -1,5 +1,6 @@
 ---
 title: Compilation
+group: Plugins
 sort: 3
 ---
 
diff --git a/src/content/api/plugins/compiler.md b/src/content/api/compiler.md
similarity index 99%
rename from src/content/api/plugins/compiler.md
rename to src/content/api/compiler.md
index 98557eff1b31..bc303a0a78cb 100644
--- a/src/content/api/plugins/compiler.md
+++ b/src/content/api/compiler.md
@@ -1,5 +1,6 @@
 ---
 title: Compiler
+group: Plugins
 sort: 2
 contributors:
   - rishantagarwal
diff --git a/src/content/api/plugins/dependency.md b/src/content/api/dependency.md
similarity index 73%
rename from src/content/api/plugins/dependency.md
rename to src/content/api/dependency.md
index 844780bee8f5..bee70dd67d8d 100644
--- a/src/content/api/plugins/dependency.md
+++ b/src/content/api/dependency.md
@@ -1,5 +1,6 @@
 ---
 title: Dependency
+group: Plugins
 sort: 7
 ---
 
diff --git a/src/content/api/plugins/module-factories.md b/src/content/api/module-factories.md
similarity index 98%
rename from src/content/api/plugins/module-factories.md
rename to src/content/api/module-factories.md
index 28d5dad3d17a..9dd767b8289a 100644
--- a/src/content/api/plugins/module-factories.md
+++ b/src/content/api/module-factories.md
@@ -1,5 +1,6 @@
 ---
 title: Context/Normal Module Factories
+group: Plugins
 sort: 5
 ---
 
diff --git a/src/content/api/plugins/parser.md b/src/content/api/parser.md
similarity index 99%
rename from src/content/api/plugins/parser.md
rename to src/content/api/parser.md
index 3cd5d8689ead..b8a679228a3a 100644
--- a/src/content/api/plugins/parser.md
+++ b/src/content/api/parser.md
@@ -1,5 +1,6 @@
 ---
 title: Parser
+group: Plugins
 sort: 8
 ---
 
diff --git a/src/content/api/plugins/index.md b/src/content/api/plugins-index.md
similarity index 99%
rename from src/content/api/plugins/index.md
rename to src/content/api/plugins-index.md
index de21e720808d..3abc9c2e7df5 100644
--- a/src/content/api/plugins/index.md
+++ b/src/content/api/plugins-index.md
@@ -1,5 +1,6 @@
 ---
 title: Plugin API
+group: Plugins
 sort: 1
 ---
 
diff --git a/src/content/api/plugins/template.md b/src/content/api/plugins/template.md
deleted file mode 100644
index aece9d652874..000000000000
--- a/src/content/api/plugins/template.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Templates
-sort: 8
----
-
-## MainTemplate
-
-### `startup(source, module, hash)`
-```javascript
-    compilation.mainTemplate.plugin('startup', function(source, module, hash) {
-      if (!module.chunks.length && source.indexOf('__ReactStyle__') === -1) {
-        var originName = module.origins && module.origins.length ? module.origins[0].name : 'main';
-        return ['if (typeof window !== "undefined") {',
-            '  window.__ReactStyle__ = ' + JSON.stringify(classNames[originName]) + ';',
-            '}'
-          ].join('\n') + source;
-      }
-      return source;
-    });
-```
-
-## HotUpdateChunkTemplate
-
-TODO
-
-## ChunkTemplate
-
-TODO
-
-## ModuleTemplate
-
-TODO
-
-## FunctionModuleTemplate
-
-TODO
diff --git a/src/content/api/plugins/resolver.md b/src/content/api/resolver.md
similarity index 99%
rename from src/content/api/plugins/resolver.md
rename to src/content/api/resolver.md
index c3ee55389434..765400a4cfb3 100644
--- a/src/content/api/plugins/resolver.md
+++ b/src/content/api/resolver.md
@@ -1,5 +1,6 @@
 ---
 title: Resolver
+group: Plugins
 sort: 5
 ---
 
diff --git a/src/content/api/plugins/tapable.md b/src/content/api/tapable.md
similarity index 99%
rename from src/content/api/plugins/tapable.md
rename to src/content/api/tapable.md
index 252a18364364..76c43e67e88e 100644
--- a/src/content/api/plugins/tapable.md
+++ b/src/content/api/tapable.md
@@ -1,5 +1,6 @@
 ---
 title: Tapable
+group: Plugins
 sort: 1
 contributors:
   - thelarkinn
diff --git a/src/content/api/template.md b/src/content/api/template.md
new file mode 100644
index 000000000000..deb9490a9a04
--- /dev/null
+++ b/src/content/api/template.md
@@ -0,0 +1,37 @@
+---
+title: Templates
+group: Plugins
+sort: 8
+---
+
+## MainTemplate
+
+### `startup(source, module, hash)`
+```javascript
+compilation.mainTemplate.plugin('startup', function(source, module, hash) {
+  if (!module.chunks.length && source.indexOf('__ReactStyle__') === -1) {
+    var originName = module.origins && module.origins.length ? module.origins[0].name : 'main';
+    return ['if (typeof window !== "undefined") {',
+        '  window.__ReactStyle__ = ' + JSON.stringify(classNames[originName]) + ';',
+        '}'
+      ].join('\n') + source;
+  }
+  return source;
+});
+```
+
+## HotUpdateChunkTemplate
+
+TODO
+
+## ChunkTemplate
+
+TODO
+
+## ModuleTemplate
+
+TODO
+
+## FunctionModuleTemplate
+
+TODO
diff --git a/src/content/contribute/index.md b/src/content/contribute/index.md
new file mode 100644
index 000000000000..a24b26e7e88b
--- /dev/null
+++ b/src/content/contribute/index.md
@@ -0,0 +1,71 @@
+---
+title: Contribute
+sort: 1
+contributors:
+  - rouzbeh84
+  - scottdj92
+  - harrynewsome
+---
+
+The people who contribute to webpack do so for the love of open source, our users and ecosystem, and most importantly, pushing the web forward together. Because of our [Open Collective](http://opencollective.com/webpack) model for funding and transparency, we are able to funnel support and funds through contributors, dependent projects, and the contributor and core teams. To make a donation, simply click the button below...
+
+<div align="center">
+  <a href="https://opencollective.com/webpack/donate" target="_blank">
+    <img src="https://opencollective.com/webpack/donate/button@2x.png?color=blue" width=300 />
+  </a>
+</div>
+
+But what is the return on the investment?
+
+
+## Developers
+
+The biggest core feature we'd like to provide is enjoyable development experience. Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about webpack.
+
+### How Can I Help?
+
+Anybody can help by doing any of the following:
+
+- Ask your employer to use webpack in projects.
+- Help us write and maintain the content on this site (see the [writer's guide](/writers-guide)).
+- Contribute to the [core repository](https://github.com/webpack/webpack).
+- Become a backer or sponsor on [open collective](https://opencollective.com/webpack#support).
+
+### Encouraging Employers
+
+You can ask your employer to improve your workflow by leveraging webpack: an all-in-one tool for fonts, images and image optimiziation, and json. Explain to them how webpack will attempt to bundle your code and assets the best it can for the smallest file size, leading to speedier sites and applications.
+
+### Your Contributions
+
+Contributing to webpack is not contributing to an exclusive club. You as a developer are contributing to the overall health of downstream projects. Hundreds, if not thousands, of projects depend on webpack and contributing will make the ecosystem better for all users.
+
+The remainder of this section of the site is dedicated to developers such as yourself who would like to become a part of our ever-growing community:
+
+- [Writing a Loader](./how-to-write-a-loader)
+- [Writing a Plugin](./how-to-write-a-plugin)
+- [Plugin Patterns](./plugin-patterns)
+- [Release Process](./release-process)
+
+
+## Executives
+
+CTO's, VPs, and owners can help too!
+
+<!-- add slides here regarding monetary value/dev time/tooling -->
+
+webpack is an all-in-one tool for bundling your code. It can handle fonts, images, data and more with the help of community-driven plugins and loaders. Having all of your assets be handled by one tool is immensely helpful, as you or your team can spend less time making sure a machine with many moving parts is working correctly and more time building your product.
+
+### Sponsorship
+
+Aside from monetary assistance, companies can support webpack by:
+
+- Providing developers that are not actively working on a project.
+- Contributing computing power for improved CI and regression testing.
+
+You can also encourage your developers to contribute to the ecosystem by open-sourcing webpack loaders, plugins and other utilities. And, as mentioned above, we would greatly appreciate any help increasing our CI/CD infrastructure.
+
+### Anyone Else
+
+To anyone else who is interested in helping our mission -- e.g. venture capitalists, government entities, digital agencies, etc. -- we would love for you to work with us, one of the top npm packages, to improve your product! Please don't hesitate to reach out with questions.
+
+<!-- add slides here -->
diff --git a/src/content/development/plugin-patterns.md b/src/content/contribute/plugin-patterns.md
similarity index 99%
rename from src/content/development/plugin-patterns.md
rename to src/content/contribute/plugin-patterns.md
index 8fbbbdbf5da6..9a5928ffa3e7 100644
--- a/src/content/development/plugin-patterns.md
+++ b/src/content/contribute/plugin-patterns.md
@@ -1,6 +1,6 @@
 ---
-title: Useful Plugin Patterns
-sort: 2
+title: Plugin Patterns
+sort: 4
 ---
 
 Plugins grant unlimited opportunity to perform customizations within the webpack build system. This allows you to create custom asset types, perform unique build modifications, or even enhance the webpack runtime while using middleware. The following are some features of webpack that become useful while writing plugins.
diff --git a/src/content/development/release-process.md b/src/content/contribute/release-process.md
similarity index 93%
rename from src/content/development/release-process.md
rename to src/content/contribute/release-process.md
index 8851866c5eab..a6a50f5d8be0 100644
--- a/src/content/development/release-process.md
+++ b/src/content/contribute/release-process.md
@@ -1,5 +1,6 @@
 ---
-title: webpack merge, tag and release process
+title: Release Process
+sort: 5
 contributors:
   - d3viant0ne
   - sokra
diff --git a/src/content/development/how-to-write-a-loader.md b/src/content/contribute/writing-a-loader.md
similarity index 98%
rename from src/content/development/how-to-write-a-loader.md
rename to src/content/contribute/writing-a-loader.md
index 1bb519107c6e..f7d4a2f76c84 100644
--- a/src/content/development/how-to-write-a-loader.md
+++ b/src/content/contribute/writing-a-loader.md
@@ -1,6 +1,6 @@
 ---
-title: How to write a loader?
-sort: 3
+title: Writing a Loader
+sort: 2
 contributors:
   - asulaiman
 ---
@@ -19,7 +19,7 @@ The loader is expected to give back one or two values. The first value is a resu
 
 In the complex case, when multiple loaders are chained, only the last loader gets the resource file and only the first loader is expected to give back one or two values (JavaScript and SourceMap). Values that any other loader give back are passed to the previous loader.
 
-In other words, chained loaders are executed in reverse order -- either right to left or bottom to top depending on the format of your array. Lets say you have two loaders that go by the name of `foo-loader` and `bar-loader`. You would like to execute `foo-loader` and then pass the result of the transformation from `foo-loader` finally to `bar-loader`. 
+In other words, chained loaders are executed in reverse order -- either right to left or bottom to top depending on the format of your array. Lets say you have two loaders that go by the name of `foo-loader` and `bar-loader`. You would like to execute `foo-loader` and then pass the result of the transformation from `foo-loader` finally to `bar-loader`.
 
 You would add the following in your config file (assuming that both loaders are already defined):
 
@@ -37,7 +37,7 @@ module: {
 }
 ```
 
-Note that webpack currently only searches in your node modules folder for loaders. If these loaders are defined outside your node modules folder you would need to use the `resolveLoader` property to get webpack to include your loaders. For example lets say you have your custom loaders included in a folder called `loaders`. You would have to add the following to your config file: 
+Note that webpack currently only searches in your node modules folder for loaders. If these loaders are defined outside your node modules folder you would need to use the `resolveLoader` property to get webpack to include your loaders. For example lets say you have your custom loaders included in a folder called `loaders`. You would have to add the following to your config file:
 
 ``` javascript
 resolveLoader: {
diff --git a/src/content/development/how-to-write-a-plugin.md b/src/content/contribute/writing-a-plugin.md
similarity index 99%
rename from src/content/development/how-to-write-a-plugin.md
rename to src/content/contribute/writing-a-plugin.md
index 4fa6975eb2c3..61bf0ada7f66 100644
--- a/src/content/development/how-to-write-a-plugin.md
+++ b/src/content/contribute/writing-a-plugin.md
@@ -1,6 +1,6 @@
 ---
-title: How to write a plugin?
-sort: 2
+title: Writing a Plugin
+sort: 3
 ---
 
 Plugins expose the full potential of the webpack engine to third-party developers. Using staged build callbacks, developers can introduce their own behaviors into the webpack build process. Building plugins is a bit more advanced than building loaders, because you'll need to understand some of the webpack low-level internals to hook into them. Be prepared to read some source code!
diff --git a/src/content/development/index.md b/src/content/development/index.md
deleted file mode 100644
index f245c10538ee..000000000000
--- a/src/content/development/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Development
-contributors:
-  - rouzbeh84
----
-
-These guides cover what you need to know in order to develop webpack.
-
-*   [Release Process](./release-process)
-*   [Plugin Patterns](./plugin-patterns)
-*   [How To Write A Plugin](./how-to-write-a-plugin)
-*   [How To Write A Loader](./how-to-write-a-loader)
diff --git a/src/content/support/index.md b/src/content/support/index.md
deleted file mode 100644
index f8047c97a4fd..000000000000
--- a/src/content/support/index.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Why Support webpack?
-contributors:
-  - scottdj92
-  - harrynewsome
----
-
-First, the people who contribute to webpack, do so for the love of open source, love for our users and ecosystem, and most importantly, pushing the web forward together. Because of our [Open Collective](http://opencollective.com/webpack) model for funding and transparency, we are able to funnel support and funds through contributors, dependent projects, and the contributor and core teams. But what is the return on the investment?
-
-
-## Developers
-
-The biggest core feature that we want to give you is enjoyment of using webpack. Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about webpack.
-
-
-### How Can I Help?
-
-Anybody can help by doing any of the following:
-
-*   Submit documentation corrections/enhancements to [webpack.js.org](https://github.com/webpack/webpack.js.org) (read the [Writer's guide](/writers-guide) beforehand)
-*   Contribute code to [webpack](https://github.com/webpack/webpack) (see this handy [Development guide](/development/) made for you)
-*   [Donate](https://opencollective.com/webpack/donate) to our [open collective](https://opencollective.com/webpack)
-*   [Sponsor webpack](https://opencollective.com/webpack#support)
-*   Ask your employer to use webpack in projects
-
-
-### How Can I Ask My Employer To Use webpack?
-
-You can ask your employer to improve your workflow by leveraging webpack: an all-in-one tool for fonts, images and image optimiziation, and json. webpack will attempt to bundle your code and assets the best it can for the smallest file size, which means a faster web site/app.
-
-
-### Your Contributions Are Important To Us
-
-Contributing to webpack is not contributing to an exclusive club. You as a developer are contributing to the overall health of downstream projects. Hundreds, maybe more, projects depend on webpack and contributing will make the ecosystem better for all users.
-
-
-## CTO's, VPs, Owners
-
-<!-- ### You Can Help Too!
-(Add slides here regarding monetary value/dev time/tooling) -->
-
-webpack is an all-in-one tool for bundling your code. It can handle fonts, images, svgs, and more with the help of plugins. Having all of your assets be handled by one tool is immensely helpful, as you or your team can spend less time making sure a machine with many moving parts is working correctly and more time building your product.
-
-
-### How You Can Support webpack as a Company
-
-You can support webpack as a company by:
-
-*   Contributing developers that are not actively working on a project
-*   Contributing computing power for improved CI and regression testing
-
-
-### I Can't Provide These Things, What Else Can I Do?
-
-You can encourage your developers to contribute to the ecosystem, open sourcing tools, loaders, and plugins for webpack, and helping increase our CI/CD infrastructure.
-
-
-## VC, Government, Digital Agencies
-
-We want you to work with us, one of the top NPM libraries, to improve your product!
-
-<!-- 
-### Sales Pitch
-(add slides here) 
--->

From d30b85be6f2ca7b09d13b09c31f1d27fd190c2d9 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Fri, 29 Sep 2017 00:14:27 -0400
Subject: [PATCH 02/18] refactor(navigation): update routes and styling

Simplify routing to reflect antwar and content changes and remove
extraneous links. Simplify styling to first improve the design, but also
to provide a lot more breathing room so less hacks are needed for
smaller page sizes. With the updated design we should have room
for "Voting" and "Analyze" links once those micro apps are in a
better place.
---
 src/components/Navigation/Navigation.jsx  | 26 ++++--------
 src/components/Navigation/Navigation.scss | 51 +++++++++++++----------
 template.ejs                              |  2 +-
 3 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 169cf9945237..660ad939677d 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -6,37 +6,25 @@ import Dropdown from '../Dropdown/Dropdown';
 
 // TODO: Maybe by updating the routing scheme later on we can avoid hardcoding this?
 let Sections = [
-  {
-    title: 'Concepts',
-    url: 'concepts'
-  },
-  {
-    title: 'Guides',
-    url: 'guides'
-  },
   {
     title: 'Documentation',
-    url: 'configuration',
+    url: 'concepts',
     children: [
-      { title: 'CLI', url: 'api/cli' },
-      { title: 'API', url: 'api' },
+      { title: 'Concepts', url: 'concepts' },
       { title: 'Configuration', url: 'configuration' },
+      { title: 'API', url: 'api' },
+      { title: 'Guides', url: 'guides' },
       { title: 'Loaders', url: 'loaders' },
-      { title: 'Plugins', url: 'plugins' },
-      { title: 'Development', url: 'development' }
+      { title: 'Plugins', url: 'plugins' }
     ]
   },
   {
-    title: 'Donate',
-    url: '//opencollective.com/webpack'
+    title: 'Contribute',
+    url: 'contribute'
   },
   {
     title: 'Blog',
     url: '//medium.com/webpack'
-  },
-  {
-    title: 'Support',
-    url: 'support'
   }
 ];
 
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 138231eab608..605a08540951 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -1,3 +1,4 @@
+@import 'vars';
 @import 'mixins';
 @import 'functions';
 
@@ -51,35 +52,36 @@
   @include break {
     flex: 1 1 auto;
     display: flex;
+    height: 56px;
     align-items: center;
     justify-content: flex-end;
   }
 }
 
 .navigation__link {
-  @include break {
-    display:inline-block;
-    font-size: getFontSize(-1);
-    text-transform: uppercase;
-    color: getColor(white);
-    transition:all 250ms;
-    padding:1.5em 0.75em;
-
-    &:last-child {
-      margin-right:0.75em;
-    }
-  }
-
-  @include break('large') {
-    padding:1.5em;
-  }
+  position: relative;
+  display: inline-block;
+  padding-bottom: 0.1em;
+  margin-right: 1.5em;
+  font-size: getFontSize(-1);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: getColor(white);
+  transition: all 250ms;
+  @include fontantialias(false);
 
   &:hover {
     color: getColor(malibu);
   }
 
-  &--active {
-    background: lighten(getColor(elephant), 5%);
+  &--active:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 3px;
+    top: 100%;
+    left: 0;
+    background: getColor(malibu);
   }
 }
 
@@ -187,18 +189,23 @@
 
 .navigation__bottom {
   display: none;
-  background: lighten(getColor(elephant), 5%);
 
   @include break {
     display: block;
+    background: getColor(concrete);
+
+    .navigation__inner {
+      justify-content: flex-end;
+    }
   }
 }
 
 .navigation__child {
   font-size: getFontSize(-1);
   margin: 0.5em 1em 0.6em;
-  color: getColor(alto);
+  color: $text-color-highlight;
   text-transform: uppercase;
+  @include fontantialias(false);
 
   &:first-of-type {
     margin-left: 0;
@@ -209,7 +216,7 @@
   }
 
   &--active {
-    color: getColor(white);
-    font-weight: 600;
+    color: getColor(mine-shaft);
+    font-weight: 700;
   }
 }
diff --git a/template.ejs b/template.ejs
index 4dd8cc0016df..bc771ea4481d 100644
--- a/template.ejs
+++ b/template.ejs
@@ -8,7 +8,7 @@
     <meta name="theme-color" content="#2B3A42">
     <link rel="shortcut icon" href="/assets/favicon.ico">
 
-    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:200,400,400i,500" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,500,600" rel="stylesheet">
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
     <% for (var file of htmlWebpackPlugin.options.context.cssFiles) { %>

From 8abf1db868983d30cd9430e7232fdf70120a97ee Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 14:09:52 -0400
Subject: [PATCH 03/18] fix: add link to starter kits

"Support" is now included in the "Contribute" section and already has
a link in the top navigation. The starter-kits page was previously hidden
from users, so this exposes it a bit more.
---
 src/components/Footer/Footer.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 29f57c5fad52..f7e83dea02aa 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -12,7 +12,7 @@ const Footer = () => (
       <section className="footer__left">
         <Link className="footer__link" to="/guides/getting-started/">Get Started</Link>
         <Link className="footer__link" to="/organization/">Organization</Link>
-        <Link className="footer__link" to="/support/">Support</Link>
+        <Link className="footer__link" to="/starter-kits/">Starter Kits</Link>
         <Link className="footer__link" to="/comparison/">Comparison</Link>
       </section>
 

From 2f87fbc79da8a631dafd0bce3a261a40ea87fe1b Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 14:11:53 -0400
Subject: [PATCH 04/18] refactor(navigation): update the navigation component

Make minor styling change for consistent gutter. Extract link data into
a separate JSON file. Update variable and parameter names for clarity.
---
 src/components/Navigation/Links.json      |  22 +++++
 src/components/Navigation/Navigation.jsx  | 115 +++++++++-------------
 src/components/Navigation/Navigation.scss |   2 +-
 3 files changed, 67 insertions(+), 72 deletions(-)
 create mode 100644 src/components/Navigation/Links.json

diff --git a/src/components/Navigation/Links.json b/src/components/Navigation/Links.json
new file mode 100644
index 000000000000..4546aa78e1fb
--- /dev/null
+++ b/src/components/Navigation/Links.json
@@ -0,0 +1,22 @@
+[
+  {
+    "title": "Documentation",
+    "url": "concepts",
+    "children": [
+      { "title": "Concepts", "url": "concepts" },
+      { "title": "Configuration", "url": "configuration" },
+      { "title": "API", "url": "api" },
+      { "title": "Guides", "url": "guides" },
+      { "title": "Loaders", "url": "loaders" },
+      { "title": "Plugins", "url": "plugins" }
+    ]
+  },
+  {
+    "title": "Contribute",
+    "url": "contribute"
+  },
+  {
+    "title": "Blog",
+    "url": "//medium.com/webpack"
+  }
+]
\ No newline at end of file
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 660ad939677d..d0efdfa9b877 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -3,32 +3,9 @@ import Link from '../Link/Link';
 import Container from '../Container/Container';
 import Logo from '../Logo/Logo';
 import Dropdown from '../Dropdown/Dropdown';
+import Links from './Links.json';
 
-// TODO: Maybe by updating the routing scheme later on we can avoid hardcoding this?
-let Sections = [
-  {
-    title: 'Documentation',
-    url: 'concepts',
-    children: [
-      { title: 'Concepts', url: 'concepts' },
-      { title: 'Configuration', url: 'configuration' },
-      { title: 'API', url: 'api' },
-      { title: 'Guides', url: 'guides' },
-      { title: 'Loaders', url: 'loaders' },
-      { title: 'Plugins', url: 'plugins' }
-    ]
-  },
-  {
-    title: 'Contribute',
-    url: 'contribute'
-  },
-  {
-    title: 'Blog',
-    url: '//medium.com/webpack'
-  }
-];
-
-// TODO: Move back to using state once we can handle algolia on our own
+// TODO: Migrate to React Banner
 export default class Navigation extends React.Component {
   render() {
     let { pageUrl = '' } = this.props;
@@ -45,21 +22,19 @@ export default class Navigation extends React.Component {
           </Link>
 
           <nav className="navigation__links">
-            {
-              Sections.map(section => {
-                let active = this._isActive(section);
-                let activeMod = active ? 'navigation__link--active' : '';
-
-                return (
-                  <Link
-                    key={ `navigation__link-${section.title}` }
-                    className={ `navigation__link ${activeMod}` }
-                    to={ `/${section.url}/` }>
-                    { section.title }
-                  </Link>
-                );
-              })
-            }
+            { Links.map(link => {
+              let active = this._isActive(link);
+              let activeMod = active ? 'navigation__link--active' : '';
+
+              return (
+                <Link
+                  key={ `navigation__link-${link.title}` }
+                  className={ `navigation__link ${activeMod}` }
+                  to={ `/${link.url}/` }>
+                  { link.title }
+                </Link>
+              );
+            }) }
           </nav>
 
           <div className="navigation__search">
@@ -98,30 +73,26 @@ export default class Navigation extends React.Component {
             ]} />
         </Container>
 
-        {
-          Sections.filter(section => this._isActive(section) && section.children).map(section => {
-            return (
-              <div className="navigation__bottom" key={ section.title }>
-                <Container className="navigation__inner">
-                  {
-                    section.children.map(child => {
-                      let activeMod = this._isActive(child) ? 'navigation__child--active' : '';
-
-                      return (
-                        <Link
-                          key={ `navigation__child-${child.title}` }
-                          className={ `navigation__child ${activeMod}` }
-                          to={ `/${child.url}/` }>
-                          { child.title }
-                        </Link>
-                      );
-                    })
-                  }
-                </Container>
-              </div>
-            );
-          })
-        }
+        { Links.filter(link => this._isActive(link) && link.children).map(link => (
+          <div className="navigation__bottom" key={ link.title }>
+            <Container className="navigation__inner">
+              {
+                link.children.map(child => {
+                  let activeMod = this._isActive(child) ? 'navigation__child--active' : '';
+
+                  return (
+                    <Link
+                      key={ `navigation__child-${child.title}` }
+                      className={ `navigation__child ${activeMod}` }
+                      to={ `/${child.url}/` }>
+                      { child.title }
+                    </Link>
+                  );
+                })
+              }
+            </Container>
+          </div>
+        )) }
       </header>
     );
   }
@@ -150,18 +121,20 @@ export default class Navigation extends React.Component {
   }
 
   /**
-   * Check if section is active
+   * Check if the given `link` is active
    *
-   * @param {object} section - An object describing the section
-   * @return {bool} - Whether or not the given section is active
+   * @param  {object} link - An object describing the `link`
+   * @return {bool}        - Whether or not the given `link` is active
    */
-  _isActive(section) {
+  _isActive(link) {
     let { pageUrl = '' } = this.props;
 
-    if (section.children) {
-      return section.children.some(child => { return (new RegExp("^/" + child.url +".*/")).test(pageUrl); });
+    if (link.children) {
+      return link.children.some(child => {
+        return (new RegExp("^/" + child.url + ".*/")).test(pageUrl);
+      });
 
-    } else return (new RegExp("^/" + section.url +".*/")).test(pageUrl);
+    } else return (new RegExp("^/" + link.url +".*/")).test(pageUrl);
   }
 
   /**
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 605a08540951..b32393fab99b 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -202,7 +202,7 @@
 
 .navigation__child {
   font-size: getFontSize(-1);
-  margin: 0.5em 1em 0.6em;
+  margin: 0.5em 0 0.6em 2em;
   color: $text-color-highlight;
   text-transform: uppercase;
   @include fontantialias(false);

From 4a964d3a4af66a820805952b341f98c879917e02 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 14:17:42 -0400
Subject: [PATCH 05/18] feat: allow page grouping within sections via `group`
 field

Add support for a new `group` field in each page's YAML frontmatter to
group pages together in an intuitive way. The benefit of this approach vs
directories is that changing a pages group within the same top-level section
won't affect its route and thus will not break links to it.
---
 loaders/page-loader.js              |  1 +
 src/components/Page/Page.jsx        | 11 ++++++++-
 src/components/Sidebar/Sidebar.jsx  | 35 +++++++++++++++++++----------
 src/components/Sidebar/Sidebar.scss |  9 ++++++++
 4 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/loaders/page-loader.js b/loaders/page-loader.js
index 69361f2e3955..698bce4b2229 100644
--- a/loaders/page-loader.js
+++ b/loaders/page-loader.js
@@ -8,6 +8,7 @@ module.exports = function (source) {
   const result = frontmatter(source);
 
   result.attributes = result.attributes || {};
+  result.attributes.group = result.attributes.group || '-';
   result.attributes.anchors = markdown().getAnchors(result.body);
   result.attributes.contributors = (result.attributes.contributors || []).sort();
   result.attributes.related = Array.isArray(result.attributes.related) ? result.attributes.related : [];
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index a9e1da62cfa2..a21ce4d20156 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -16,10 +16,18 @@ const Page = ({ page, section }) => {
   let indexPage = section.title !== 'Home' ? require(`page-loader!../../content/${section.name}/index.md`) : null;
   let pages = (
     section.pages()
-      .sort((a, b) => a.file.attributes.sort - b.file.attributes.sort)
+      .sort(({ file: { attributes: a }}, { file: { attributes: b }}) => {
+        let group1 = a.group.toLowerCase();
+        let group2 = b.group.toLowerCase();
+
+        if (group1 < group2) return -1;
+        if (group1 > group2) return 1;
+        return a.sort - b.sort;
+      })
       .map(page => ({
         url: page.url,
         title: page.file.attributes.title,
+        group: page.file.attributes.group,
         anchors: page.file.attributes.anchors
       }))
   );
@@ -30,6 +38,7 @@ const Page = ({ page, section }) => {
   if (indexPage) {
     pages.unshift({
       url: `/${section.name}/`,
+      group: indexPage.attributes.group,
       title: indexPage.attributes.title,
       anchors: indexPage.attributes.anchors
     });
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 974b7d358a8e..f1eb0dd3f331 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -12,6 +12,7 @@ export default class Sidebar extends Component {
   render() {
     let { pages, currentPage } = this.props;
     let { fixed, availableHeight, maxWidth } = this.state;
+    let group;
 
     return (
       <nav
@@ -29,18 +30,28 @@ export default class Sidebar extends Component {
             <Shield content="npm/v/webpack" label="webpack" />
           </a>
 
-          {
-            pages.map((page, i) =>
-              <SidebarItem
-                key={ `sidebar-item-${i}` }
-                index={ i }
-                url={ page.url }
-                title={ page.title }
-                anchors={ page.anchors }
-                currentPage= { currentPage }
-                onToggle={ this._recalculate.bind(this) } />
-            )
-          }
+          { pages.map((page, index) => {
+            let displayGroup = group !== page.group && page.group !== '-';
+            group = page.group;
+
+            return (
+              <div key={ `sidebar-item-${index}` }>
+                { displayGroup ? (
+                  <h4 className="sidebar__group">
+                    { group }
+                  </h4>
+                ) : null }
+
+                <SidebarItem
+                  index={ index }
+                  url={ page.url }
+                  title={ page.title }
+                  anchors={ page.anchors }
+                  currentPage= { currentPage }
+                  onToggle={ this._recalculate.bind(this) } />
+              </div>
+            );
+          })}
         </div>
 
       </nav>
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index 27efd31b73bd..d4624f71732d 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -1,5 +1,6 @@
 @import 'vars';
 @import 'mixins';
+@import 'functions';
 
 .sidebar {
   display: none;
@@ -17,3 +18,11 @@
   padding: 1.5em;
   overflow: hidden;
 }
+
+.sidebar__group {
+  margin-top: 1em;
+  margin-left: 0.15em;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: getColor(dusty-grey);
+}

From 702021e422315ad10c88d41d0f2c686706962f1d Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 14:24:09 -0400
Subject: [PATCH 06/18] style(page): align content better on larger screens

---
 src/components/Page/Page.scss           | 4 ++--
 src/components/PageLinks/PageLinks.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
index 4566f6c95fcf..e43f5d462317 100644
--- a/src/components/Page/Page.scss
+++ b/src/components/Page/Page.scss
@@ -24,8 +24,8 @@
   overflow-x: hidden;
   padding: 1.5em 1em;
 
-  @media break {
+  @include break {
     flex: 3;
-    padding: 1.5em;
+    padding: 1.5em 1.5em 1.5em 0;
   }
 }
diff --git a/src/components/PageLinks/PageLinks.scss b/src/components/PageLinks/PageLinks.scss
index 391f167119f6..7f45b7ff1526 100644
--- a/src/components/PageLinks/PageLinks.scss
+++ b/src/components/PageLinks/PageLinks.scss
@@ -6,7 +6,6 @@
   display: none;
   top: 1.5em;
   right: 1.5em;
-  font-size: getFontSize(-1);
   font-weight: 600;
   text-transform: uppercase;
 
@@ -15,6 +14,7 @@
   }
 
   &__link {
+    font-size: getFontSize(-1);
     display: inline-flex;
   }
 

From 0d2aed26e0632cdf0e24e870d013644aeade7edc Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 14:24:32 -0400
Subject: [PATCH 07/18] docs: remove empty pages

---
 src/content/analyze.md        | 6 ------
 src/content/api/dependency.md | 7 -------
 2 files changed, 13 deletions(-)
 delete mode 100644 src/content/analyze.md
 delete mode 100644 src/content/api/dependency.md

diff --git a/src/content/analyze.md b/src/content/analyze.md
deleted file mode 100644
index bc59ebe700ce..000000000000
--- a/src/content/analyze.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Analyze Tool
----
-
-Analyze content should go here.
-
diff --git a/src/content/api/dependency.md b/src/content/api/dependency.md
deleted file mode 100644
index bee70dd67d8d..000000000000
--- a/src/content/api/dependency.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Dependency
-group: Plugins
-sort: 7
----
-
-> TODO

From 258b1806181ccc8969f74579c6c5564341b4999b Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 14:26:05 -0400
Subject: [PATCH 08/18] docs(contribute): add writers-guide and update
 release-process

---
 src/content/contribute/release-process.md     | 10 +++++++---
 src/content/{ => contribute}/writers-guide.md |  0
 2 files changed, 7 insertions(+), 3 deletions(-)
 rename src/content/{ => contribute}/writers-guide.md (100%)

diff --git a/src/content/contribute/release-process.md b/src/content/contribute/release-process.md
index a6a50f5d8be0..e18fc59b489f 100644
--- a/src/content/contribute/release-process.md
+++ b/src/content/contribute/release-process.md
@@ -6,11 +6,15 @@ contributors:
   - sokra
 ---
 
-## Pull requests into `master`
+The release process for deploying webpack is actually quite painless. Read through the following steps, so you have a clear understanding of how it's done.
 
-When you land commits on your `master` branch, select the _Create Merge-Commit_ option.
 
-## Cut a release
+## Pull Requests
+
+When merging pull requests into the `master` branch, select the _Create Merge Commit_ option.
+
+
+## Releasing
 
 ```sh
 npm version patch && git push --follow-tags && npm publish
diff --git a/src/content/writers-guide.md b/src/content/contribute/writers-guide.md
similarity index 100%
rename from src/content/writers-guide.md
rename to src/content/contribute/writers-guide.md

From 54f267e60a02d076edfa03d4dc9accf358b98683 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 14:26:39 -0400
Subject: [PATCH 09/18] docs: sort the base pages more intuitively

---
 src/content/branding.md   | 8 +++-----
 src/content/comparison.md | 2 +-
 src/content/glossary.md   | 1 +
 src/content/license.md    | 1 +
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/branding.md b/src/content/branding.md
index 5d428991f89a..219a3e83cbbe 100644
--- a/src/content/branding.md
+++ b/src/content/branding.md
@@ -1,5 +1,6 @@
 ---
 title: Branding Guidelines
+sort: 2
 contributors:
   - jhnns
   - skipjack
@@ -9,10 +10,7 @@ contributors:
 Here you can find **webpack** project brand guidelines, assets, and license. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them.
 
 
-## [Jump to All Original Media Files](https://github.com/webpack/media)
-
-
-## The webpack Name
+## The Name
 
 webpack should **always** be written in lower-case letters, even at the beginning of a sentence.
 
@@ -72,7 +70,7 @@ We use the beautiful [Geomanist Medium](http://geomanist.com/) font from the ext
 
 The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](http://opencollective.com) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
 
-| Color Name    | HEX Code      | RGB Code              | Sample 
+| Color Name    | HEX Code      | RGB Code              | Sample
 |---------------|---------------|-----------------------|-------------------------------
 | Malibu:       | HEX `#8dd6f9` | `rgb: 141, 214, 249`  | <div style="background-color: #8dd6f9;">&nbsp;</div>
 | Denim:        | HEX `#1d78c1` | `rgb: 29, 120, 193`   | <div style="background-color: #1d78c1;">&nbsp;</div>
diff --git a/src/content/comparison.md b/src/content/comparison.md
index c4916a24504b..d42b1ef07d79 100644
--- a/src/content/comparison.md
+++ b/src/content/comparison.md
@@ -1,6 +1,6 @@
 ---
 title: Comparison
-sort: 25
+sort: 1
 contributors:
   - pksjce
   - bebraw
diff --git a/src/content/glossary.md b/src/content/glossary.md
index 33e33107dde4..928fe6f3cda1 100644
--- a/src/content/glossary.md
+++ b/src/content/glossary.md
@@ -1,5 +1,6 @@
 ---
 title: Glossary
+sort: 3
 contributors:
   - rouzbeh84
   - bebraw
diff --git a/src/content/license.md b/src/content/license.md
index 7e0edd6f7600..e68040d7346a 100644
--- a/src/content/license.md
+++ b/src/content/license.md
@@ -1,5 +1,6 @@
 ---
 title: License
+sort: 4
 ---
 
 ## webpack

From e8442c9f11caec027a17a96b01c0bf946200b8ff Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 14:27:19 -0400
Subject: [PATCH 10/18] docs(api): update page names and grouping

---
 src/content/api/cli.md                        |  2 +-
 src/content/api/index.md                      |  2 +-
 src/content/api/module-factories.md           |  2 +-
 src/content/api/module-methods.md             |  5 +++--
 src/content/api/module-variables.md           |  5 +++--
 .../api/{plugins-index.md => plugins.md}      |  0
 src/content/api/stats.md                      |  4 ++--
 src/content/api/template.md                   | 21 ++++++++++++-------
 8 files changed, 24 insertions(+), 17 deletions(-)
 rename src/content/api/{plugins-index.md => plugins.md} (100%)

diff --git a/src/content/api/cli.md b/src/content/api/cli.md
index 7f8e303c0de2..6a767f2427f4 100644
--- a/src/content/api/cli.md
+++ b/src/content/api/cli.md
@@ -1,5 +1,5 @@
 ---
-title: Command Line Interface (CLI)
+title: Command Line Interface
 sort: 2
 contributors:
   - ev1stensberg
diff --git a/src/content/api/index.md b/src/content/api/index.md
index 4055cf92907e..81bec4054b84 100644
--- a/src/content/api/index.md
+++ b/src/content/api/index.md
@@ -1,5 +1,5 @@
 ---
-title: Webpack APIs
+title: Introduction
 sort: 1
 ---
 
diff --git a/src/content/api/module-factories.md b/src/content/api/module-factories.md
index 9dd767b8289a..e5c41e433a26 100644
--- a/src/content/api/module-factories.md
+++ b/src/content/api/module-factories.md
@@ -1,5 +1,5 @@
 ---
-title: Context/Normal Module Factories
+title: Module Factories
 group: Plugins
 sort: 5
 ---
diff --git a/src/content/api/module-methods.md b/src/content/api/module-methods.md
index 94cb21476732..7cd7ce1cb70a 100644
--- a/src/content/api/module-methods.md
+++ b/src/content/api/module-methods.md
@@ -1,5 +1,6 @@
 ---
-title: Module API - Methods
+title: Module Methods
+group: Modules
 sort: 3
 contributors:
   - skipjack
@@ -348,7 +349,7 @@ if(require.cache[require.resolveWeak('module')]) {
   // Do something when module was loaded before...
 }
 
-// You can perform dynamic resolves ("context") 
+// You can perform dynamic resolves ("context")
 // just as with other require/import methods.
 const page = 'Foo';
 __webpack_modules__[require.resolveWeak(`./page/${page}`)]
diff --git a/src/content/api/module-variables.md b/src/content/api/module-variables.md
index af9dc3a20f0f..43ead429ab96 100644
--- a/src/content/api/module-variables.md
+++ b/src/content/api/module-variables.md
@@ -1,6 +1,7 @@
 ---
-title: Module API - Variables
-sort: 3
+title: Module Variables
+group: Modules
+sort: 4
 contributors:
   - skipjack
   - sokra
diff --git a/src/content/api/plugins-index.md b/src/content/api/plugins.md
similarity index 100%
rename from src/content/api/plugins-index.md
rename to src/content/api/plugins.md
diff --git a/src/content/api/stats.md b/src/content/api/stats.md
index 53c9f2d5c4ed..b6fd4eb5afdd 100644
--- a/src/content/api/stats.md
+++ b/src/content/api/stats.md
@@ -1,6 +1,6 @@
 ---
-title: Stats JSON
-sort: 1
+title: Stats Data
+sort: 3
 contributors:
   - skipjack
 ---
diff --git a/src/content/api/template.md b/src/content/api/template.md
index deb9490a9a04..13c2f3dd1199 100644
--- a/src/content/api/template.md
+++ b/src/content/api/template.md
@@ -7,7 +7,8 @@ sort: 8
 ## MainTemplate
 
 ### `startup(source, module, hash)`
-```javascript
+
+``` js
 compilation.mainTemplate.plugin('startup', function(source, module, hash) {
   if (!module.chunks.length && source.indexOf('__ReactStyle__') === -1) {
     var originName = module.origins && module.origins.length ? module.origins[0].name : 'main';
@@ -20,18 +21,22 @@ compilation.mainTemplate.plugin('startup', function(source, module, hash) {
 });
 ```
 
-## HotUpdateChunkTemplate
 
-TODO
+## ModuleTemplate
 
-## ChunkTemplate
+?> Document the `ModuleTemplate`...
 
-TODO
 
-## ModuleTemplate
+## ChunkTemplate
+
+?> Document the `ChunkTemplate`...
 
-TODO
 
 ## FunctionModuleTemplate
 
-TODO
+?> Document the `FunctionModuleTemplate`...
+
+
+## HotUpdateChunkTemplate
+
+?> Document the `HotUpdateChunkTemplate`...

From ebe6a024798f0974134fd65651f7e1e9cf28e6d3 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sat, 30 Sep 2017 17:15:31 -0400
Subject: [PATCH 11/18] fix(mobile): clean up mobile sidebar data

---
 antwar.config.js             |  2 +
 src/components/Site/Site.jsx | 83 +++++++++++++++---------------------
 2 files changed, 36 insertions(+), 49 deletions(-)

diff --git a/antwar.config.js b/antwar.config.js
index e7c5b9aae864..2a6273ef172b 100644
--- a/antwar.config.js
+++ b/antwar.config.js
@@ -90,6 +90,7 @@ module.exports = {
      Redirects for Old Content
      *************************/
     'get-started': {
+      hidden: true,
       redirects: {
         '': '/guides/getting-started',
         'install-webpack': '/guides/installation',
@@ -97,6 +98,7 @@ module.exports = {
       }
     },
     pluginsapi: {
+      hidden: true,
       redirects: {
         '': '/api/plugins',
         'compiler': '/api/compiler',
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
index 13e179144644..89dd33b59c88 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -23,54 +23,39 @@ const Site = ({
   children,
   section,
   location: { pathname }
-}) => {
-  // Retrieve section data
-  let sections = section.all().filter(section => section.path.hideInSidebar !== true)
-    .map((section) => {
-      let _section = {
-        title: section.path.title,
-        url: section.url,
-        pages: section.pages.map(page => {
-          let _page = {
-            title: page.file.title,
-            url: page.url
-          };
-          return _page;
-        })
-      };
-      return _section;
-    });
-
-  // Rename the root section ("webpack" => "Other") and push it to the end
-  let rootIndex = sections.findIndex(section => section.title === 'webpack');
-  let rootSection = sections.splice(rootIndex, 1)[0];
-  rootSection.title = 'Other';
-  sections.push(rootSection);
-
-  return (
-    <div id="site" className="site">
-      <Interactive
-        id="src/components/NotificationBar/NotificationBar.jsx"
-        component={ NotificationBar } />
-
-      <Interactive
-        id="src/components/Navigation/Navigation.jsx"
-        component={ Navigation }
-        sections={ sections }
-        pageUrl={ pathname } />
-
-      <Interactive
-        id="src/components/SidebarMobile/SidebarMobile.jsx"
-        component={ SidebarMobile }
-        sections={ sections } />
-
-      { children }
-
-      <Footer />
-
-      <GoogleAnalytics analyticsId="UA-46921629-2" />
-    </div>
-  );
-};
+}) => (
+  <div id="site" className="site">
+    <Interactive
+      id="src/components/NotificationBar/NotificationBar.jsx"
+      component={ NotificationBar } />
+
+    <Interactive
+      id="src/components/Navigation/Navigation.jsx"
+      component={ Navigation }
+      pageUrl={ pathname } />
+
+    <Interactive
+      id="src/components/SidebarMobile/SidebarMobile.jsx"
+      component={ SidebarMobile }
+      sections={
+        section.all()
+          .filter(section => section.path.hidden !== true)
+          .map((section) => ({
+            title: section.path.title,
+            url: section.url,
+            pages: section.pages.map(page => ({
+              title: page.file.title,
+              url: page.url
+            }))
+          }))
+      } />
+
+    { children }
+
+    <Footer />
+
+    <GoogleAnalytics analyticsId="UA-46921629-2" />
+  </div>
+);
 
 export default Site;

From 34f532a936e0da5ad8b89f43459e46a34ade36c8 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Sun, 1 Oct 2017 08:59:09 -0400
Subject: [PATCH 12/18] docs(api): clean up formatting and fix linting errors

---
 src/content/api/compilation.md      | 120 ++++++++++++++++++----------
 src/content/api/module-factories.md |  19 +++--
 src/content/api/plugins.md          |  17 ++--
 src/content/api/tapable.md          |  49 +++++-------
 src/content/api/template.md         |   7 +-
 5 files changed, 125 insertions(+), 87 deletions(-)

diff --git a/src/content/api/compilation.md b/src/content/api/compilation.md
index ecba62ad1368..fa8c74993bdc 100644
--- a/src/content/api/compilation.md
+++ b/src/content/api/compilation.md
@@ -6,68 +6,76 @@ sort: 3
 
 The Compilation instance extends from the compiler i.e. `compiler.compilation`. It is the literal compilation of all the objects in the require graph. This object has access to all the modules and their dependencies (most of which are circular references). In the compilation phase, modules are loaded, sealed, optimized, chunked, hashed and restored, etc. This would be the main lifecycle of any operations of the compilation.
 
-```javascript
+``` js
 compiler.plugin("compilation", function(compilation) {
-    //the main compilation instance
-    //all subsequent methods are derived from compilation.plugin
+  // the main compilation instance
+  // all subsequent methods are derived from compilation.plugin
 });
 ```
 
+
 ## `normal-module-loader`
 
 The normal module loader, is the function that actually loads all the modules in the module graph (one-by-one).
 
-```javascript
+``` js
 compilation.plugin('normal-module-loader', function(loaderContext, module) {
-    //this is where all the modules are loaded
-    //one by one, no dependencies are created yet
+  // this is where all the modules are loaded
+  // one by one, no dependencies are created yet
 });
 ```
 
+
 ## `seal`
 
 The sealing of the compilation has started.
 
-```javascript
+``` js
 compilation.plugin('seal', function() {
-    //you are not accepting any more modules
-    //no arguments
+  // you are not accepting any more modules
+  // no arguments
 });
 ```
 
+
 ## `optimize`
 
 Optimize the compilation.
 
-```javascript
+``` js
 compilation.plugin('optimize', function() {
-    //webpack is begining the optimization phase
-    // no arguments
+  // webpack is begining the optimization phase
+  // no arguments
 });
 ```
 
+
 ## `optimize-tree(chunks, modules)` async
 
 Async optimization of the tree.
 
-```javascript
+``` js
 compilation.plugin('optimize-tree', function(chunks, modules) {
 
 });
 ```
 
 #### `optimize-modules(modules: Module[])`
+
 Optimize the modules.
-```javascript
+
+``` js
 compilation.plugin('optimize-modules', function(modules) {
-    //handle to the modules array during tree optimization
+  // handle to the modules array during tree optimization
 });
 ```
 
+
 ## `after-optimize-modules(modules: Module[])`
 
 Optimizing the modules has finished.
 
+
 ## `optimize-chunks(chunks: Chunk[])`
 
 Optimize the chunks.
@@ -91,73 +99,89 @@ compilation.plugin('optimize-chunks', function(chunks) {
 
 Optimizing the chunks has finished.
 
+
 ## `revive-modules(modules: Module[], records)`
 
 Restore module info from records.
 
+
 ## `optimize-module-order(modules: Module[])`
 
 Sort the modules in order of importance. The first is the most important module. It will get the smallest id.
 
+
 ## `optimize-module-ids(modules: Module[])`
 
 Optimize the module ids.
 
+
 ## `after-optimize-module-ids(modules: Module[])`
 
 Optimizing the module ids has finished.
 
+
 ## `record-modules(modules: Module[], records)`
 
 Store module info to the records.
 
+
 ## `revive-chunks(chunks: Chunk[], records)`
 
 Restore chunk info from records.
 
+
 ## `optimize-chunk-order(chunks: Chunk[])`
 
 Sort the chunks in order of importance. The first is the most important chunk. It will get the smallest id.
 
+
 ## `optimize-chunk-ids(chunks: Chunk[])`
 
 Optimize the chunk ids.
 
+
 ## `after-optimize-chunk-ids(chunks: Chunk[])`
 
 Optimizing the chunk ids has finished.
 
+
 ## `record-chunks(chunks: Chunk[], records)`
 
 Store chunk info to the records.
 
+
 ## `before-hash`
 
 Before the compilation is hashed.
 
+
 ## `after-hash`
 
 After the compilation is hashed.
 
+
 ## `before-chunk-assets`
 
 Before creating the chunk assets.
 
+
 ## `additional-chunk-assets(chunks: Chunk[])`
 
 Create additional assets for the chunks.
 
+
 ## `record(compilation, records)`
 
 Store info about the compilation to the records
 
+
 ## `additional-assets` async
 
 Create additional assets for the compilation
 
 Here's an example that downloads an image.
 
-```javascript
+``` js
 compiler.plugin('compilation', function(compilation) {
   compilation.plugin('additional-assets', function(callback) {
     download('https://img.shields.io/npm/v/webpack.svg', function(resp) {
@@ -172,6 +196,7 @@ compiler.plugin('compilation', function(compilation) {
 });
 ```
 
+
 ## `optimize-chunk-assets(chunks: Chunk[])` async
 
 Optimize the assets for the chunks.
@@ -180,14 +205,14 @@ The assets are stored in `this.assets`, but not all of them are chunk assets. A
 
 Here's an example that simply adds a banner to each chunk.
 
-```javascript
+``` js
 compilation.plugin("optimize-chunk-assets", function(chunks, callback) {
-    chunks.forEach(function(chunk) {
-        chunk.files.forEach(function(file) {
-            compilation.assets[file] = new ConcatSource("\/**Sweet Banner**\/", "\n", compilation.assets[file]);
-        });
+  chunks.forEach(function(chunk) {
+    chunk.files.forEach(function(file) {
+      compilation.assets[file] = new ConcatSource("\/**Sweet Banner**\/", "\n", compilation.assets[file]);
     });
-    callback();
+  });
+  callback();
 });
 ```
 
@@ -195,70 +220,77 @@ compilation.plugin("optimize-chunk-assets", function(chunks, callback) {
 
 The chunk assets have been optimized. Here's an example plugin from [@boopathi](https://github.com/boopathi) that outputs exactly what went into each chunk.
 
-```javascript
+``` js
 var PrintChunksPlugin = function() {};
+
 PrintChunksPlugin.prototype.apply = function(compiler) {
-    compiler.plugin('compilation', function(compilation, params) {
-        compilation.plugin('after-optimize-chunk-assets', function(chunks) {
-            console.log(chunks.map(function(c) {
-                return {
-                    id: c.id,
-                    name: c.name,
-                    includes: c.modules.map(function(m) {
-                        return m.request;
-                    })
-                };
-            }));
-        });
+  compiler.plugin('compilation', function(compilation, params) {
+    compilation.plugin('after-optimize-chunk-assets', function(chunks) {
+      console.log(chunks.map(function(c) {
+        return {
+          id: c.id,
+          name: c.name,
+          includes: c.modules.map(function(m) {
+            return m.request;
+          })
+        };
+      }));
     });
+  });
 };
 ```
 
+
 ## `optimize-assets(assets: Object{name: Source})` async
 
 Optimize all assets.
 
 The assets are stored in `this.assets`.
 
+
 ## `after-optimize-assets(assets: Object{name: Source})`
 
 The assets has been optimized.
 
+
 ## `build-module(module)`
 
 Before a module build has started.
 
-```javascript
+``` js
 compilation.plugin('build-module', function(module){
-    console.log('build module');
-    console.log(module);
+  console.log('About to build: ', module);
 });
 ```
 
+
 ## `succeed-module(module)`
 
 A module has been built successfully.
-```javascript
+
+``` js
 compilation.plugin('succeed-module', function(module){
-    console.log('succeed module');
-    console.log(module);
+  console.log('Successfully built: ', module);
 });
 ```
 
+
 ## `failed-module(module)`
 
 The module build has failed.
-```javascript
+
+``` js
 compilation.plugin('failed-module', function(module){
-    console.log('failed module');
-    console.log(module);
+  console.log('Failed to build: ', module);
 });
 ```
 
+
 ## `module-asset(module, filename)`
 
 An asset from a module was added to the compilation.
 
+
 ## `chunk-asset(chunk, filename)`
 
 An asset from a chunk was added to the compilation.
diff --git a/src/content/api/module-factories.md b/src/content/api/module-factories.md
index e5c41e433a26..fd2471ab1e7c 100644
--- a/src/content/api/module-factories.md
+++ b/src/content/api/module-factories.md
@@ -4,9 +4,11 @@ group: Plugins
 sort: 5
 ---
 
+?> Lead in...
+
 ## `NormalModuleFactory`
 
-### `before-resolve(data)` async waterfall
+`before-resolve(data)` async waterfall
 
 Before the factory starts resolving. The `data` object has these properties:
 
@@ -15,7 +17,7 @@ Before the factory starts resolving. The `data` object has these properties:
 
 Plugins are allowed to modify the object or to pass a new similar object to the callback.
 
-### `after-resolve(data)` async waterfall
+`after-resolve(data)` async waterfall
 
 After the factory has resolved the request. The `data` object has these properties:
 
@@ -26,10 +28,17 @@ After the factory has resolved the request. The `data` object has these properti
 * `resource`: The resource. It will be loaded by the NormalModule.
 * `parser`: The parser that will be used by the NormalModule.
 
+
 ## `ContextModuleFactory`
 
-### `before-resolve(data)` async waterfall
+`before-resolve(data)` async waterfall
+
+?> Add documentation.
+
+`after-resolve(data)` async waterfall
+
+?> Add documentation.
 
-### `after-resolve(data)` async waterfall
+`alternatives(options: Array)` async waterfall
 
-### `alternatives(options: Array)` async waterfall
+?> Add documentation.
diff --git a/src/content/api/plugins.md b/src/content/api/plugins.md
index 3abc9c2e7df5..a4988b04f976 100644
--- a/src/content/api/plugins.md
+++ b/src/content/api/plugins.md
@@ -12,9 +12,9 @@ Many objects in webpack extend the `Tapable` class, which exposes a `plugin` met
 
 A plugin is installed once as webpack starts up. webpack installs a plugin by calling its `apply` method, and passes a reference to the webpack `compiler` object. You may then call `compiler.plugin` to access asset compilations and their individual build steps. An example would look like this:
 
-```javascript
-// MyPlugin.js
+__my-plugin.js__
 
+``` js
 function MyPlugin(options) {
   // Configure your plugin with options...
 }
@@ -41,14 +41,17 @@ MyPlugin.prototype.apply = function(compiler) {
 module.exports = MyPlugin;
 ```
 
-Then in `webpack.config.js`
+__webpack.config.js__
 
-```javascript
-    plugins: [
-        new MyPlugin({options: 'nada'})
-    ]
+``` js
+plugins: [
+  new MyPlugin({
+    options: 'nada'
+  })
+]
 ```
 
+
 ## Plugin Interfaces
 
 There are two types of plugin interfaces.
diff --git a/src/content/api/tapable.md b/src/content/api/tapable.md
index 76c43e67e88e..5b7aee8f4c1b 100644
--- a/src/content/api/tapable.md
+++ b/src/content/api/tapable.md
@@ -8,66 +8,59 @@ contributors:
   - e-cloud
 ---
 
-[Tapable](https://github.com/webpack/tapable) is small library that allows you to add and apply plugins to a javascript module.
-It can be inherited or mixed in to other modules. It is similar to NodeJS's `EventEmitter` class, focusing on custom event emission and manipulation.
-However, in addition to this, `Tapable` allows you to have access to the "emittee" or "producer" of the event through callbacks arguments.
+[Tapable](https://github.com/webpack/tapable) is small library that allows you to add and apply plugins to a javascript module. It can be inherited or mixed in to other modules. It is similar to NodeJS's `EventEmitter` class, focusing on custom event emission and manipulation. However, in addition to this, `Tapable` allows you to have access to the "emittee" or "producer" of the event through callbacks arguments.
 
 `Tapable` has four groups of member functions:
 
-* `plugin(name:string, handler:function)` - This allows a custom plugin to register into a **Tapable instance**'s event.
+- `plugin(name:string, handler:function)` - This allows a custom plugin to register into a **Tapable instance**'s event.
 This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
-
-* `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the **Tapable instance**'s registry.
-
-* `applyPlugins*(name:string, …)` - The **Tapable instance** can apply all the plugins under a particular hash using these functions.
+- `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the _Tapable_ instance's registry.
+- `applyPlugins*(name:string, …)` - The _Tapable_ instance can apply all the plugins under a particular hash using these functions.
 These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
-
-* `mixin(pt: Object)` - a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
+- `mixin(pt: Object)` - a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
 
 The different `applyPlugins*` methods cover the following use cases:
 
-* Plugins can run serially
-
-* Plugins can run in parallel
-
-* Plugins can run one after the other but taking input from the previous plugin (waterfall)
-
-* Plugins can run asynchronously
-
-* Quit running plugins on bail: that is, once one plugin returns non-`undefined`, jump out of the run flow and return *the return of that plugin*. This sounds like `once()` of `EventEmitter` but is totally different.
+- Plugins can run serially
+- Plugins can run in parallel
+- Plugins can run one after the other but taking input from the previous plugin (waterfall)
+- Plugins can run asynchronously
+- Quit running plugins on bail: that is, once one plugin returns non-`undefined`, jump out of the run flow and return _the return of that plugin_. This sounds like `once()` of `EventEmitter` but is totally different.
 
 
 ## Example
 
-One of webpack's **Tapable instances**, [Compiler](/api/plugins/compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](/api/plugins/compilation) instance. When the Compilation instance runs, it creates the required bundles.
+One of webpack's _Tapable_ instances, [Compiler](/api/compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](/api/compilation) instance. When the Compilation instance runs, it creates the required bundles.
 
-See below is a simplified version of how this looks using `Tapable`.
+See below is a simplified version of how this looks using `Tapable`:
 
-**node_modules/webpack/lib/Compiler.js**
+__node_modules/webpack/lib/Compiler.js__
 
-```javascript
+``` js
 var Tapable = require("tapable");
+
 function Compiler() {
 	Tapable.call(this);
 }
+
 Compiler.prototype = Object.create(Tapable.prototype);
 ```
 
 Now to write a plugin on the compiler,
 
-**my-custom-plugin.js**
+__my-custom-plugin.js__
 
-```javascript
+``` js
 function CustomPlugin() {}
 CustomPlugin.prototype.apply = function(compiler) {
-    compiler.plugin('emit', pluginFunction);
+  compiler.plugin('emit', pluginFunction);
 }
 ```
 
 The compiler executes the plugin at the appropriate point in its lifecycle by
 
-**node_modules/webpack/lib/Compiler.js**
+__node_modules/webpack/lib/Compiler.js__
 
-```javascript
+``` js
 this.apply*("emit",options) // will fetch all plugins under 'emit' name and run them.
 ```
diff --git a/src/content/api/template.md b/src/content/api/template.md
index 13c2f3dd1199..3824eafe9e8b 100644
--- a/src/content/api/template.md
+++ b/src/content/api/template.md
@@ -12,10 +12,11 @@ sort: 8
 compilation.mainTemplate.plugin('startup', function(source, module, hash) {
   if (!module.chunks.length && source.indexOf('__ReactStyle__') === -1) {
     var originName = module.origins && module.origins.length ? module.origins[0].name : 'main';
-    return ['if (typeof window !== "undefined") {',
+    return [
+      'if (typeof window !== "undefined") {',
         '  window.__ReactStyle__ = ' + JSON.stringify(classNames[originName]) + ';',
-        '}'
-      ].join('\n') + source;
+      '}'
+    ].join('\n') + source;
   }
   return source;
 });

From 0382e59218f2d9d67d55bca84a35c68b8883904f Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Tue, 3 Oct 2017 17:44:54 -0400
Subject: [PATCH 13/18] docs(api): fix markdown listing issues

---
 src/content/api/compilation.md |  2 +-
 src/content/api/plugins.md     | 23 +++++++++++++----------
 src/content/api/tapable.md     | 18 ++++++++----------
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/content/api/compilation.md b/src/content/api/compilation.md
index fa8c74993bdc..56e0d1c1448a 100644
--- a/src/content/api/compilation.md
+++ b/src/content/api/compilation.md
@@ -60,7 +60,7 @@ compilation.plugin('optimize-tree', function(chunks, modules) {
 });
 ```
 
-#### `optimize-modules(modules: Module[])`
+### `optimize-modules(modules: Module[])`
 
 Optimize the modules.
 
diff --git a/src/content/api/plugins.md b/src/content/api/plugins.md
index a4988b04f976..fd3cd42edb3a 100644
--- a/src/content/api/plugins.md
+++ b/src/content/api/plugins.md
@@ -56,16 +56,19 @@ plugins: [
 
 There are two types of plugin interfaces.
 
-* Timing based
-  * sync (default): As seen above. Use return.
-  * async: Last parameter is a callback. Signature: function(err, result)
-  * parallel: The handlers are invoked parallel (async).
-
-* Return value
-  * not bailing (default): No return value.
-  * bailing: The handlers are invoked in order until one handler returns something.
-  * parallel bailing: The handlers are invoked in parallel (async). The first returned value (by order) is significant.
-  * waterfall: Each handler gets the result value of the last handler as an argument.
+__Timing Based:__
+
+- sync (default): As seen above. Use return.
+- async: Last parameter is a callback. Signature: function(err, result)
+- parallel: The handlers are invoked parallel (async).
+
+__Return Value:__
+
+- not bailing (default): No return value.
+- bailing: The handlers are invoked in order until one handler returns something.
+- parallel bailing: The handlers are invoked in parallel (async). The first returned value (by order) is significant.
+- waterfall: Each handler gets the result value of the last handler as an argument.
+
 
 ## Tapable & Tapable instances
 
diff --git a/src/content/api/tapable.md b/src/content/api/tapable.md
index 5b7aee8f4c1b..1a53564b8854 100644
--- a/src/content/api/tapable.md
+++ b/src/content/api/tapable.md
@@ -12,19 +12,17 @@ contributors:
 
 `Tapable` has four groups of member functions:
 
-- `plugin(name:string, handler:function)` - This allows a custom plugin to register into a **Tapable instance**'s event.
-This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
-- `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the _Tapable_ instance's registry.
-- `applyPlugins*(name:string, …)` - The _Tapable_ instance can apply all the plugins under a particular hash using these functions.
-These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
-- `mixin(pt: Object)` - a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
+- `plugin(name:string, handler:function)`: This allows a custom plugin to register into a **Tapable instance**'s event. This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
+- `apply(…pluginInstances: (AnyPlugin|function)[])`: `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the _Tapable_ instance's registry.
+- `applyPlugins*(name:string, …)`: The _Tapable_ instance can apply all the plugins under a particular hash using these functions. These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
+- `mixin(pt: Object)`: a simple method to extend `Tapable`'s prototype as a mixin rather than inheritance.
 
 The different `applyPlugins*` methods cover the following use cases:
 
-- Plugins can run serially
-- Plugins can run in parallel
-- Plugins can run one after the other but taking input from the previous plugin (waterfall)
-- Plugins can run asynchronously
+- Plugins can run serially.
+- Plugins can run in parallel.
+- Plugins can run one after the other but taking input from the previous plugin (waterfall).
+- Plugins can run asynchronously.
 - Quit running plugins on bail: that is, once one plugin returns non-`undefined`, jump out of the run flow and return _the return of that plugin_. This sounds like `once()` of `EventEmitter` but is totally different.
 
 

From af236c67755c14010b4256c3e0a512be6bdd785a Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Tue, 3 Oct 2017 17:45:11 -0400
Subject: [PATCH 14/18] docs(contribute): fix markdown linting issues

---
 src/content/contribute/writers-guide.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/contribute/writers-guide.md b/src/content/contribute/writers-guide.md
index 0a8c9e2086de..bc1c743377a5 100644
--- a/src/content/contribute/writers-guide.md
+++ b/src/content/contribute/writers-guide.md
@@ -91,9 +91,9 @@ Same goes for tables.
 
 The [configuration](/configuration) properties should be ordered alphabetically as well:
 
-* `devServer.contentBase`
-* `devServer.compress`
-* `devServer.hot`
+- `devServer.contentBase`
+- `devServer.compress`
+- `devServer.hot`
 
 ### Quotes
 

From ab04fb66ec39e5e389551c6713dec2c25f7ddbf6 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Tue, 10 Oct 2017 22:22:05 -0400
Subject: [PATCH 15/18] docs(api): rewrite the index page

---
 src/content/api/cli.md     |  4 +---
 src/content/api/index.md   | 40 +++++++++++++++++++++++++++++++++-----
 src/content/api/loaders.md |  5 -----
 src/content/api/plugins.md |  6 ++----
 4 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/content/api/cli.md b/src/content/api/cli.md
index 6a767f2427f4..4c0e734fe0a3 100644
--- a/src/content/api/cli.md
+++ b/src/content/api/cli.md
@@ -17,11 +17,9 @@ related:
     url: https://medium.com/@nimgrg/analysing-and-minimising-the-size-of-client-side-bundle-with-webpack-and-source-map-explorer-41096559beca#.c3t2srr8x
 ---
 
-webpack provides a Command Line Interface (CLI) to configure and interact with your build. This is mostly useful in case of early prototyping, profiling, writing npm scripts or personal customization of the build.
-
 For proper usage and easy distribution of this configuration, webpack can be configured with `webpack.config.js`. Any parameters sent to the CLI will map to a corresponding parameter in the config file.
 
-Have a look at the [installation guide](/guides/installation) unless you have webpack already running.
+Have a look at the [installation guide](/guides/installation) if you don't already have webpack installed.
 
 T> The new CLI for webpack is under development. New features are being added such as the `--init` flag. [Check it out!](https://github.com/webpack/webpack-cli)
 
diff --git a/src/content/api/index.md b/src/content/api/index.md
index 81bec4054b84..d61ab74b4256 100644
--- a/src/content/api/index.md
+++ b/src/content/api/index.md
@@ -3,9 +3,39 @@ title: Introduction
 sort: 1
 ---
 
-The following interfaces provide access to the compilation process in different ways:
+A variety of interfaces are available to customize the compilation process. Some features overlap between interfaces, e.g. a configuration option may be available via a CLI flag, while others exist only through a single interface. The following high-level information should get you started.
 
-* [CLI](/api/cli)
-* [Node](/api/node)
-* [Loaders](/api/loaders)
-* [Plugins](/api/plugins)
+
+## CLI
+
+The Command Line Interface (CLI) to configure and interact with your build. It is especially useful in the case of early prototyping and profiling. For the most part, the CLI is simply used to kick off the process using a configuration file and a few flags (e.g. `--env`).
+
+[Learn more!](/api/cli)
+
+
+## Module
+
+When processing modules with webpack, it is important to understand the different module syntaxes -- specifically the [methods](/api/module-methods) and [variables](/api/module-variables) -- that are supported.
+
+[Learn more!](/api/module-methods)
+
+
+## Node
+
+While most users can get away with just using the CLI along with a configuration file, more fine-grained control of the compilation can be achieved via the Node interface. This includes passing multiple configurations, programatically running or watching, and collecting stats.
+
+[Learn more!](/api/node)
+
+
+## Loaders
+
+Loaders are transformations that are applied to the source code of a module. They are written as functions that take accept source code as a parameter and return a new version of that code with tranformations applied.
+
+[Learn more!](/api/loaders)
+
+
+## Plugins
+
+The plugin interface provided by webpack allows users to tap directly into the compilation process. Plugins can register handlers on lifecycle hooks that run at different points in the compilation process. When each hook is executed, the plugin will have full access to the current state of the compilation.
+
+[Learn more!](/api/plugins)
diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md
index 5b7cf6561b6f..932e7b7d2b1d 100644
--- a/src/content/api/loaders.md
+++ b/src/content/api/loaders.md
@@ -4,13 +4,8 @@ sort: 4
 contributors:
     - TheLarkInn
     - jhnns
-
 ---
 
-Loaders are transformations that are applied on the source code of a module. They are functions (running in Node.js) that take the source of a resource file as the parameter and return the new source.
-
-## How to write a loader
-
 A loader is just a JavaScript module that exports a function. The [loader runner](https://github.com/webpack/loader-runner) calls this function and passes the result of the previous loader or the resource file into it. The `this` context of the function is filled-in by webpack and the [loader runner](https://github.com/webpack/loader-runner) with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters.
 
 The first loader is passed one argument: the content of the resource file. The compiler expects a result from the last loader. The result should be a `String` or a `Buffer` (which is converted to a string), representing the JavaScript source code of the module. An optional SourceMap result (as JSON object) may also be passed.
diff --git a/src/content/api/plugins.md b/src/content/api/plugins.md
index fd3cd42edb3a..062dcf74633a 100644
--- a/src/content/api/plugins.md
+++ b/src/content/api/plugins.md
@@ -1,12 +1,10 @@
 ---
 title: Plugin API
 group: Plugins
-sort: 1
+sort: 0
 ---
 
-T> For a high-level introduction to writing plugins, start with [How to write a plugin](/development/how-to-write-a-plugin).
-
-webpack provides flexible and powerful customization api in the form of plugins. Using plugins, we can plug functionality into webpack. Additionally, webpack provides lifecycle hooks into which plugins can be registered. At each of these lifecycle points, webpack will run all of the registered plugins and provide them with the current state of the webpack compilation.
+T> For a high-level introduction to writing plugins, start with [writing a plugin](/contribute/writing-a-plugin).
 
 Many objects in webpack extend the `Tapable` class, which exposes a `plugin` method. And with the `plugin` method, plugins can inject custom build steps. You will see `compiler.plugin` and `compilation.plugin` used a lot. Essentially, each one of these plugin calls binds a callback to fire at specific steps throughout the build process.
 

From a923d02c834a5c9ab35e2e8405f44069448be854 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Tue, 10 Oct 2017 22:22:30 -0400
Subject: [PATCH 16/18] docs(api): minor formatting and cleanup

---
 src/content/api/loaders.md |  6 +++---
 src/content/api/plugins.md | 37 +++++++++++++++++--------------------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md
index 932e7b7d2b1d..16ffb1b4f006 100644
--- a/src/content/api/loaders.md
+++ b/src/content/api/loaders.md
@@ -21,7 +21,7 @@ A single result can be returned in **sync mode**. For multiple results the `this
 
 ```javascript
 module.exports = function(content) {
-    return someSyncOperation(content);
+  return someSyncOperation(content);
 };
 ```
 
@@ -29,8 +29,8 @@ module.exports = function(content) {
 
 ```javascript
 module.exports = function(content) {
-    this.callback(null, someSyncOperation(content), sourceMaps, ast);
-    return; // always return undefined when calling callback()
+  this.callback(null, someSyncOperation(content), sourceMaps, ast);
+  return; // always return undefined when calling callback()
 };
 ```
 
diff --git a/src/content/api/plugins.md b/src/content/api/plugins.md
index 062dcf74633a..7d1f17ba4196 100644
--- a/src/content/api/plugins.md
+++ b/src/content/api/plugins.md
@@ -8,6 +8,21 @@ T> For a high-level introduction to writing plugins, start with [writing a plugi
 
 Many objects in webpack extend the `Tapable` class, which exposes a `plugin` method. And with the `plugin` method, plugins can inject custom build steps. You will see `compiler.plugin` and `compilation.plugin` used a lot. Essentially, each one of these plugin calls binds a callback to fire at specific steps throughout the build process.
 
+There are two types of plugin interfaces...
+
+__Timing Based__
+
+- sync (default): The plugin runs synchronously and returns its output.
+- async: The plugin runs asynchronously and uses the give `callback` to return its output.
+- parallel: The handlers are invoked in parallel.
+
+__Return Value__
+
+- not bailing (default): No return value.
+- bailing: The handlers are invoked in order until one handler returns something.
+- parallel bailing: The handlers are invoked in parallel (async). The first returned value (by order) is significant.
+- waterfall: Each handler gets the result value of the last handler as an argument.
+
 A plugin is installed once as webpack starts up. webpack installs a plugin by calling its `apply` method, and passes a reference to the webpack `compiler` object. You may then call `compiler.plugin` to access asset compilations and their individual build steps. An example would look like this:
 
 __my-plugin.js__
@@ -50,25 +65,7 @@ plugins: [
 ```
 
 
-## Plugin Interfaces
-
-There are two types of plugin interfaces.
-
-__Timing Based:__
-
-- sync (default): As seen above. Use return.
-- async: Last parameter is a callback. Signature: function(err, result)
-- parallel: The handlers are invoked parallel (async).
-
-__Return Value:__
-
-- not bailing (default): No return value.
-- bailing: The handlers are invoked in order until one handler returns something.
-- parallel bailing: The handlers are invoked in parallel (async). The first returned value (by order) is significant.
-- waterfall: Each handler gets the result value of the last handler as an argument.
-
-
-## Tapable & Tapable instances
+## Tapable & Tapable Instances
 
 The plugin architecture is mainly possible for webpack due to an internal library named `Tapable`.
 **Tapable Instances** are classes in the webpack source code which have been extended or mixed in from class `Tapable`.
@@ -76,4 +73,4 @@ The plugin architecture is mainly possible for webpack due to an internal librar
 For plugin authors, it is important to know which are the `Tapable` instances in the webpack source code. These instances provide a variety of event hooks into which custom plugins can be attached.
 Hence, throughout this section are a list of all of the webpack `Tapable` instances (and their event hooks), which plugin authors can utilize.
 
-For more information on `Tapable` visit the [tapable repository](https://github.com/webpack/tapable) or visit the [complete overview](./tapable)
+For more information on `Tapable` visit the [complete overview](/api/tapable) or the [tapable repository](https://github.com/webpack/tapable).

From 9b64f96959e7253610bc1d9c76aabf056e2d2b2d Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Tue, 10 Oct 2017 23:50:03 -0400
Subject: [PATCH 17/18] docs: add redirects for all broken routes

The changes in #1612 break a significant amount of pre-existing URLs, this
commit adds redirects for everything I could see that would be broken.
---
 antwar.config.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/antwar.config.js b/antwar.config.js
index 2a6273ef172b..50e1c9ba3e32 100644
--- a/antwar.config.js
+++ b/antwar.config.js
@@ -16,7 +16,11 @@ module.exports = {
       title: 'Home',
       layout: () => require('./src/components/Page/Page.jsx').default,
       content: () => require.context('./loaders/page-loader!./src/content', false, /^\.\/.*\.md$/),
-      index: () => require('./src/components/Splash/Splash.jsx').default
+      index: () => require('./src/components/Splash/Splash.jsx').default,
+      redirects: {
+        'support': '/contribute',
+        'writers-guide': '/contribute/writers-guide'
+      }
     },
     concepts: {
       title: 'Concepts',
@@ -104,6 +108,26 @@ module.exports = {
         'compiler': '/api/compiler',
         'template': '/api/template'
       }
+    },
+    'api/plugins': {
+      redirects: {
+        'compiler': '/api/compiler',
+        'compilation': '/api/compilation',
+        'module-factories': '/api/module-factories',
+        'parser': '/api/parser',
+        'tapable': '/api/tapable',
+        'template': '/api/template',
+        'resolver': '/api/resolver'
+      }
+    },
+    development: {
+      redirects: {
+        '': '/contribute',
+        'plugin-patterns': '/contribute/plugin-patterns',
+        'release-process': '/contribute/release-process',
+        'how-to-write-a-loader': '/contribute/writing-a-loader',
+        'how-to-write-a-plugin': '/contribute/writing-a-plugin'
+      }
     }
   }
 };

From 2907ece90882b7cd90e940d619d969a058a413dd Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Wed, 11 Oct 2017 18:32:21 -0400
Subject: [PATCH 18/18] style(page): fix small padding issue

The padding here is useful for browsers that display a full on scrollbar
instead of an overlay scrollbar. We can continue to think about how
that space it utilized in future commits/prs.
---
 src/components/Page/Page.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
index e43f5d462317..85c664e2fdfe 100644
--- a/src/components/Page/Page.scss
+++ b/src/components/Page/Page.scss
@@ -26,6 +26,6 @@
 
   @include break {
     flex: 3;
-    padding: 1.5em 1.5em 1.5em 0;
+    padding: 1.5em;
   }
 }