From e4590dab0ed23680ec30ea7e40991be2fccfa5fd 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/17] 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 a0022a3139e9..eb53fc7f73d2 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 13d34709bb20a2f79c5cc98bcae60fa6351e2916 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/17] 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 190af884720ed94c42adcdaddfc203e550626046 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/17] 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 a23e1393e12af09c3eab9829fcee0b54499a370f 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/17] 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 c493ee59f88748e8acec711b514358ad374d6d5d 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/17] 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 3896e05b51e592d73fb5176d4cb2cc2e091102c0 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/17] 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 3e04178386173551bf7314fb80f1c7762186c3b8 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/17] 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 3ed86e37e88e3341a83d90e3c4aef722f7bfc5db 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/17] 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 911c0b20b3ae0dc52fecc7e3c686058721ccc347 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/17] 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 0db102d23aed6a07192aef1b58d5b96ddac32196 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/17] 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 419f2d0808bb18af80990ac935f5f8ee7e922c05 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/17] 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 9e111956dd6050e3b9fda778839368b77b5acd82 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/17] 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 cd2287e163d378f417fa199f69da99c4cc8f1a35 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/17] 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 2d028048ac0bf29ae2bb3c33813db8f426a14b17 Mon Sep 17 00:00:00 2001
From: rouzbeh84 <rouzbeh.sarrafieh@gmail.com>
Date: Tue, 10 Oct 2017 10:10:30 -0700
Subject: [PATCH 14/17] docs(config): style update to webkit scroll bars

---
 src/components/Site/Site.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Site/Site.scss b/src/components/Site/Site.scss
index 3eeff2c7addd..4105ef90155c 100644
--- a/src/components/Site/Site.scss
+++ b/src/components/Site/Site.scss
@@ -3,8 +3,13 @@
   flex-direction: column;
   min-height: 100vh;
   overflow: hidden;
+  overflow: -moz-scrollbars-none;
 
   &.nav-displayed {
     height: 100vh;
   }
-}
\ No newline at end of file
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}

From f0593bf8cd5d2b10f45cd49cd7ce2d3b83d556d7 Mon Sep 17 00:00:00 2001
From: rouzbeh84 <rouzbeh.sarrafieh@gmail.com>
Date: Tue, 10 Oct 2017 20:52:33 -0700
Subject: [PATCH 15/17] uses padding instead of webkit only fix

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

diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
index e43f5d462317..6ec7b34e6063 100644
--- a/src/components/Page/Page.scss
+++ b/src/components/Page/Page.scss
@@ -22,7 +22,7 @@
 .page__content {
   flex: 1 1 auto;
   overflow-x: hidden;
-  padding: 1.5em 1em;
+  padding: 1.5em 0.5em;
 
   @include break {
     flex: 3;
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index d4624f71732d..d8e13206f815 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -15,7 +15,7 @@
 }
 
 .sidebar__inner {
-  padding: 1.5em;
+  padding: 1em 0.5em;
   overflow: hidden;
 }
 

From 83aa86a4b2c62e6d5263392aa916df3fbe6b4362 Mon Sep 17 00:00:00 2001
From: rouzbeh84 <rouzbeh.sarrafieh@gmail.com>
Date: Tue, 10 Oct 2017 20:52:55 -0700
Subject: [PATCH 16/17] revert hacky scroll bar fix

---
 src/components/Site/Site.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Site/Site.scss b/src/components/Site/Site.scss
index 4105ef90155c..c3bcb8611e46 100644
--- a/src/components/Site/Site.scss
+++ b/src/components/Site/Site.scss
@@ -8,8 +8,4 @@
   &.nav-displayed {
     height: 100vh;
   }
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
 }

From 95d65de1c677c949e8a8a1fcfc26936dff7a808f Mon Sep 17 00:00:00 2001
From: rouzbeh84 <rouzbeh.sarrafieh@gmail.com>
Date: Tue, 10 Oct 2017 21:08:17 -0700
Subject: [PATCH 17/17] clean up some styling to keep things consistent

---
 src/components/Page/Page.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
index 6ec7b34e6063..e4da5fb8e2a2 100644
--- a/src/components/Page/Page.scss
+++ b/src/components/Page/Page.scss
@@ -22,10 +22,9 @@
 .page__content {
   flex: 1 1 auto;
   overflow-x: hidden;
-  padding: 1.5em 0.5em;
+  padding: 1.5em 1em;
 
   @include break {
     flex: 3;
-    padding: 1.5em 1.5em 1.5em 0;
   }
 }