Merge branch 'master' into patch-1

Author: skipjack

components/footer/footer.jsx

@@ -7,7 +7,7 @@ import './footer-style';
 
 export default (props) => {
   return (
-    <div className="footer">
+    <footer className="footer">
       <Container className="footer__inner">
         <section className="footer__left">
           <Link className="footer__link" to="/get-started">Get Started</Link>
@@ -30,6 +30,6 @@ export default (props) => {
           <CC />
         </section>
       </Container>
-    </div>
+    </footer>
   );
 };

components/page/page-style.scss

@@ -9,9 +9,9 @@
 }
 
 // XXX: Temporary hack to fix sidebar width
-.page div:first-of-type {
+.page > div:first-of-type {
   flex: 0 0 auto;
-  overflow: auto;
+  position: relative;
 
   @include break {
     flex:0 0 30%;

components/sidebar-item/sidebar-item-style.scss

@@ -24,6 +24,7 @@
     cursor: pointer;
     color: getColor(dusty-grey);
     transition: color 250ms;
+    margin-left: 1.5rem;
 
     &:hover {
       color: getColor(mine-shaft);

components/sidebar-item/sidebar-item.jsx

@@ -36,8 +36,14 @@ export default class SidebarItem extends React.Component {
   }
 
   toggle(e) {
+    let { onToggle } = this.props;
+
     this.setState({
       open: !this.state.open
+    }, () => {
+      if (typeof onToggle === 'function') {
+        onToggle();
+      }
     });
   }
 }

components/sidebar/sidebar-style.scss

@@ -2,10 +2,11 @@
 @import 'mixins';
 
 .sidebar {
-  position: relative;
+  position: absolute;
   display: none;
-  flex: 1;
-  min-height: 100%;
+  width: 100%;
+  max-height: 100%;
+  overflow: auto;
 
   @include break {
     display:block;
@@ -14,6 +15,5 @@
 
 .sidebar__inner {
   padding: 1.5em;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 }

components/sidebar/sidebar.jsx

@@ -1,31 +1,87 @@
-import React from 'react';
+import React, { Component } from 'react';
 import SidebarItem from '../sidebar-item/sidebar-item';
 
-export default props => {
-  let { sectionName, pages, currentPage } = props;
-
-  return (
-    <nav className="sidebar">
-      <div className="sidebar__inner">
-        <h3 className="sidebar-item__version">Version 2.2</h3>
-        <SidebarItem
-          url={ `/${sectionName}` }
-          title="Introduction"
-          currentPage= { currentPage }
-        />
-        {
-          pages.map(({ url, title, anchors }, i) =>
+export default class Sidebar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fixed: false,
+      top: 0
+    };
+  }
+
+  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 isGuides = sectionName === 'guides';
+
+    return (
+      <nav 
+        className="sidebar" 
+        ref={ ref => this._container = ref }
+        style={ fixed ? {
+          top: top
+        } : null }>
+
+        <div className="sidebar__inner">
+          <h3 className="sidebar-item__version">Version 2.2</h3>
+
+          <SidebarItem
+            url={ `/${sectionName}` }
+            title="Introduction"
+            currentPage= { currentPage }
+          />
+
+          { isGuides ? (
             <SidebarItem
-              key={ `sidebar-item-${i}` }
-              index={i}
-              url={ `/${url}` }
-              title={ title }
-              anchors={ anchors }
-              currentPage= { currentPage }
-            />
-          )
-        }
-      </div>
-    </nav>
-  );
-};
+              url={ `/get-started` }
+              title="Get Started" />
+          ) : null }
+          {
+            pages.map(({ url, title, anchors }, i) =>
+              <SidebarItem
+                key={ `sidebar-item-${i}` }
+                index={i}
+                url={ `/${url}` }
+                title={ title }
+                anchors={ anchors }
+                currentPage= { currentPage }
+                onToggle={ this._recalculate.bind(this) } />
+            )
+          }
+        </div>
+        
+      </nav>
+    );
+  }
+}

content/development/how-to-write-a-loader.md

@@ -9,7 +9,7 @@ This function is called when a resource should be transformed by this loader.
 
 In the simple case, when only a single loader is applied to the resource, the loader is called with one parameter: the content of the resource file as string.
 
-The loader can access the [loader API](api/loaders/) on the `this` context in the function.
+The loader can access the [loader API](/api/loaders/) on the `this` context in the function.
 
 A sync loader that only wants to give a one value can simply `return` it. In every other case the loader can give back any number of values with the `this.callback(err, values...)` function. Errors are passed to the `this.callback` function or thrown in a sync loader.
 

content/pluginsapi/index.md

@@ -67,7 +67,7 @@ It must accept arguments from the previous plugin that was executed. The value f
 
 `applyPluginsAsync(name: string, args: any..., callback: (err?: Error) -> void)`
 
-The plugin handler functions are called with all args and a callback function with the signature `(err?: Error) -> void`. The hander functions are called in order of registration.`callback` is called after all the handlers are called.
+The plugin handler functions are called with all args and a callback function with the signature `(err?: Error) -> void`. The handler functions are called in order of registration.`callback` is called after all the handlers are called.
 This is also a commonly used pattern for events like `"emit"`, `"run"`.
 
 - __async waterfall__ The plugins will be applied asynchronously in the waterfall manner.