Merge branch 'master' into patch-1

Author: simon04

components/page/page-style.scss

@@ -12,6 +12,7 @@
 .page > div:first-of-type {
   flex: 0 0 auto;
   position: relative;
+  overflow: hidden;
 
   @include break {
     flex:0 0 30%;

components/sidebar/sidebar-style.scss

@@ -2,7 +2,6 @@
 @import 'mixins';
 
 .sidebar {
-  position: absolute;
   display: none;
   width: 100%;
   max-height: 100%;

components/sidebar/sidebar.jsx

@@ -7,50 +7,25 @@ export default class Sidebar extends Component {
 
     this.state = {
       fixed: false,
-      top: 0
+      extraHeight: null,
+      maxWidth: null
     };
   }
 
-  componentDidMount() {
-    document.addEventListener('scroll', this._recalculate.bind(this));
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('scroll', this._recalculate.bind(this));
-  }
-
-  /**
-   * Re-calculate fixed state and position
-   * 
-   */
-  _recalculate() {
-    let { scrollY, innerHeight } = window;
-    let { scrollHeight } = document.body;
-    let { offsetHeight } = this._container;
-    let distToBottom = scrollHeight - scrollY - innerHeight;
-    let headerHeight = document.querySelector('header').offsetHeight;
-    let footerHeight = document.querySelector('footer').offsetHeight;
-    let allowedHeight = distToBottom < footerHeight ? innerHeight - (footerHeight - distToBottom) : offsetHeight;
-    let extraHeight = offsetHeight > allowedHeight ? offsetHeight - allowedHeight : 0;
-    let fixed = scrollY >= headerHeight;
-
-    this.setState({ 
-      fixed,
-      top: scrollY - headerHeight - extraHeight
-    });
-  }
-
   render() {
     let { sectionName, pages, currentPage } = this.props;
-    let { fixed, top, allowedHeight } = this.state;
+    let { fixed, extraHeight, maxWidth } = this.state;
     let isGuides = sectionName === 'guides';
 
     return (
       <nav 
         className="sidebar" 
         ref={ ref => this._container = ref }
         style={ fixed ? {
-          top: top
+          position: 'fixed',
+          top: -extraHeight,
+          width: maxWidth,
+          maxHeight: 'none'
         } : null }>
 
         <div className="sidebar__inner">
@@ -79,4 +54,39 @@ export default class Sidebar extends Component {
       </nav>
     );
   }
+
+  componentDidMount() {
+    document.addEventListener(
+      'scroll', 
+      this._recalculate.bind(this)
+    );
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'scroll', 
+      this._recalculate.bind(this)
+    );
+  }
+
+  /**
+   * Re-calculate fixed state and position
+   * 
+   */
+  _recalculate() {
+    let { scrollY, innerHeight } = window;
+    let { scrollHeight } = document.body;
+    let { offsetHeight: sidebarHeight } = this._container;
+    let { offsetWidth: parentWidth, offsetHeight: parentHeight } = this._container.parentNode;
+    let headerHeight = document.querySelector('header').offsetHeight;
+    let footerHeight = document.querySelector('footer').offsetHeight;
+    let distToBottom = scrollHeight - scrollY - innerHeight;
+    let availableSpace = innerHeight + distToBottom - footerHeight;
+    
+    this.setState({ 
+      fixed: scrollY >= headerHeight && sidebarHeight < parentHeight,
+      extraHeight: sidebarHeight > availableSpace ? sidebarHeight - availableSpace : 0,
+      maxWidth: parentWidth
+    });
+  }
 }

content/configuration/stats.md

@@ -52,6 +52,8 @@ stats: {
   chunksSort: "field",
   // Context directory for request shortening
   context: "../src/",
+  // `webpack --colors` equivalent
+  colors: true,
   // Add errors
   errors: true,
   // Add details to errors (like resolving log)

content/guides/author-libraries.md

@@ -1,6 +1,5 @@
 ---
 title: Authoring Libraries
-sort: 18
 contributors:
     - pksjce
     - johnstew

content/guides/build-performance.md

@@ -1,6 +1,5 @@
 ---
 title: Improving Build Performance
-sort: 15
 ---
 
 ?> incremental builds

content/guides/caching.md

@@ -1,6 +1,6 @@
 ---
 title: Caching
-sort: 16
+sort: 41
 contributors:
   - okonet
   - jouni-kantola
@@ -153,7 +153,7 @@ To generate identifiers that are preserved over builds, webpack supply the `Name
 
 > TODO: When exist, link to `NamedModulesPlugin` and `HashedModuleIdsPlugin` docs pages
 
-> TODO: Describe how the option `recordsPath` option works 
+> TODO: Describe how the option `recordsPath` option works
 
 The chunk manifest (along with bootstrapping/runtime code) is then placed into the entry chunk and it is crucial for webpack-packaged code to work.
 

content/guides/code-splitting-css.md

@@ -1,6 +1,6 @@
 ---
 title: Code Splitting - CSS
-sort: 3
+sort: 31
 contributors:
   - pksjce
   - jonwheeler

content/guides/code-splitting-libraries.md

@@ -1,6 +1,6 @@
 ---
 title: Code Splitting - Libraries
-sort: 4
+sort: 32
 contributors:
   - pksjce
   - chrisVillanueva

content/guides/code-splitting-require.md

@@ -1,6 +1,6 @@
 ---
 title: Code Splitting - Using require.ensure
-sort: 5
+sort: 33
 contributors:
   - pksjce
   - rahulcs

content/guides/code-splitting.md

@@ -1,6 +1,6 @@
 ---
 title: Code Splitting
-sort: 2
+sort: 30
 contributors:
   - pksjce
   - pastelsky
@@ -16,13 +16,13 @@ There are mainly two kinds of code splitting that can be accomplished with webpa
 
 A typical application can depend on many third party libraries for framework/functionality needs. Unlike application code, code present in these libraries does not change often.
 
-If we keep code from these libraries in its own bundle, separate from the application code, we can leverage the browser's caching mechanism to cache these files for longer durations on the end user's machine. 
+If we keep code from these libraries in its own bundle, separate from the application code, we can leverage the browser's caching mechanism to cache these files for longer durations on the end user's machine.
 
 For this to work, the `hash` portion in the vendor filename must remain constant, regardless of application code changes. Learn [how to split vendor/library](/guides/code-splitting-libraries) code using the CommonsChunkPlugin.
 
 ### CSS splitting
 
-You might also want to split your styles into a separate bundle, independent from application logic. 
+You might also want to split your styles into a separate bundle, independent from application logic.
 This enhances cacheability of your styles and allows the browser to load the styles in-parallel with your application code, thus preventing a FOUC (flash of unstyled content).
 
 Learn [how to split css](/guides/code-splitting-css) using the `ExtractTextWebpackPlugin`.
@@ -39,5 +39,3 @@ This can be used for more granular chunking of code, for example, per our applic
 Learn [how to split code](/guides/code-splitting-require) using `require.ensure()`.
 
 ?> Document `System.import()`
-
-

content/guides/compatibility.md

@@ -1,6 +1,5 @@
 ---
 title: Handling Compatibility
-sort: 11
 ---
 
 ?> require.main

content/guides/dependency-management.md

@@ -1,6 +1,6 @@
 ---
 title: Dependency Management
-sort: 6
+sort: 60
 contributors:
   - ndelangen
   - chrisVillanueva

content/guides/development-third-party.md

@@ -1,6 +1,6 @@
 ---
 title: Development - Vagrant
-sort: 12
+sort: 51
 contributors:
   - SpaceK33z
   - chrisVillanueva

content/guides/development-vagrant.md

@@ -1,6 +1,6 @@
 ---
 title: Development
-sort: 9
+sort: 50
 contributors:
   - SpaceK33z
   - rafde
@@ -73,11 +73,11 @@ to continue editing and saving your changes from Chrome or source files.
 
 There are some _gotchas_ about using workspaces with watch:
 
-- Large chunks (such as a common chunk that is over 1MB) that are rebuilt could cause the page to blank, 
+- Large chunks (such as a common chunk that is over 1MB) that are rebuilt could cause the page to blank,
 which will force you to refresh the browser.
-- Smaller chunks will be faster to build than larger chunks since `inline-source-map` is slower 
+- Smaller chunks will be faster to build than larger chunks since `inline-source-map` is slower
 due to having to base64 encode the original source code.
- 
+
 ### webpack-dev-server
 
 webpack-dev-server provides you with a server and live reloading. This is easy to setup.

content/guides/development.md

@@ -1,6 +1,5 @@
 ---
 title: Hot Module Replacement - React
-sort: 8
 contributors:
   - jmreidy
   - jhnns
@@ -228,11 +227,11 @@ The important thing to note in the code above is the `module` reference.
 2. Thus we can use the `module.hot` hook to enable HMR for specific resources (Here's `App.js`). The most important API here is `module.hot.accept`, which specifies how to handle changes to specific dependencies.
 
 3. Note that because webpack 2 has built-in support for ES2015 modules, you won't need to re-require your root component in `module.hot.accept`. To make this work, you need to change the Babel ES2015 preset in `.babelrc` to be:
-  
+
   ```
   ["es2015", {"modules": false}]
   ```
-  
+
   like what we did in [Babel Config](#babel-config). Note that disabling Babel's module plugin is not only necessary for HMR. If you don't disable it you'll run into many other issues (see [Migrating from v1 to v2](/guides/migrating/#mixing-es2015-with-amd-and-commonjs) and [webpack-tree-shaking](http://www.2ality.com/2015/12/webpack-tree-shaking.html)).
 
 4. Note that if you're using ES6 modules in your webpack 2 configuration file, and you change your `.babelrc` file in #3 above, you either need to use `require` or create two `.babelrc` files (issue [here](https://github.com/webpack/webpack.js.org/issues/154)):

content/guides/hmr-react.md

@@ -4,7 +4,7 @@ contributors:
   - pksjce
   - bebraw
   - simon04
-sort: 1
+sort: 10
 ---
 
 ### Pre-requisites

content/guides/installation.md

@@ -1,6 +1,5 @@
 ---
 title: Lazy Loading - React
-sort: 14
 contributors:
   - iammerrick
   - chrisVillanueva

content/guides/lazy-load-react.md

@@ -1,6 +1,6 @@
 ---
 title: Migrating from v1 to v2
-sort: 19
+sort: 20
 contributors:
   - sokra
   - jhnns
@@ -269,8 +269,8 @@ module: {
     test: /.css$/,
 -    loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
 +    loader: ExtractTextPlugin.extract({
-+      fallbackLoader: "style-loader",
-+      loader: "css-loader",
++      fallback: "style-loader",
++      use: "css-loader",
 +      publicPath: "/dist"
 +    })
   ]

content/guides/migrating.md

@@ -1,6 +1,6 @@
 ---
 title: Building for Production
-sort: 13
+sort: 40
 contributors:
   - henriquea
   - rajagopal4890

content/guides/production-build.md

@@ -1,6 +1,5 @@
 ---
 title: Public Path
-sort: 14
 contributors:
   - rafaelrinaldi
   - chrisVillanueva

content/guides/public-path.md

@@ -1,6 +1,6 @@
 ---
 title: Shimming
-sort: 17
+sort: 61
 contributors:
   - pksjce
   - jhnns

content/guides/shimming.md

@@ -0,0 +1,11 @@
+---
+title: Integration with ask/test runners
+---
+
+?> Grunt
+
+?> Gulp
+
+?> Mocha
+
+?> Karma

content/guides/task-test-runner.md

@@ -1,6 +1,5 @@
 ---
 title: webpack & Typescript
-sort: 20
 contributors:
   - morsdyce
 ---

content/guides/webpack-and-typescript.md

@@ -5,7 +5,6 @@ contributors:
   - bebraw
   - chrisVillanueva
   - tashian
-sort: 2
 ---
 
 webpack is a module bundler, like Browserify or Brunch. It is not a task runner. Make, Grunt, or Gulp are task runners. But people get confused about the difference, so let's clear that up right away.