Merge pull request #346 from webpack/develop

Deploy

Author: SpaceK33z

CONTRIBUTING.md

@@ -38,7 +38,7 @@ There are two types of branches:
 
 ### Features
 
-If your contribution is something new, like a new section or page or a new chunk to an existing page, you can create a branch with the following naming convetion:  
+If your contribution is something new, like a new section or page or a new chunk to an existing page, you can create a branch with the following naming convention:  
 
 `feature/<the-new-feature>`
 

antwar.config.js

@@ -57,22 +57,22 @@ module.exports = {
         );
       }
     ),
-    configuration: section(
-      'Configuration',
+    guides: section(
+      'Guides',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/configuration',
-          false,
+          'json-loader!yaml-frontmatter-loader!./content/guides',
+          true,
           /^\.\/.*\.md$/
         );
       }
     ),
-    'how-to': section(
-      'How to',
+    configuration: section(
+      'Configuration',
       function() {
         return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/how-to',
-          true,
+          'json-loader!yaml-frontmatter-loader!./content/configuration',
+          false,
           /^\.\/.*\.md$/
         );
       }

components/navigation/navigation-style.scss

@@ -178,44 +178,22 @@
   }
 }
 
-.algolia-autocomplete {
-  display: flex !important;
-
-  .ds-dropdown-menu {
-    box-shadow:none;
-
-    &:before {
-      content:none;
-    }
-
-    [class^=ds-dataset-] {
-      border-color:map-get($colors, alto);
-      border-radius:3px;
-    }
-  }
-
-  .algolia-docsearch-suggestion--category-header {
-    border-color:map-get($colors, alto);
-  }
-
-  .algolia-docsearch-suggestion--highlight {
-    color:map-get($colors, denim);
-    background:rgba(map-get($colors, malibu), .2);
-  }
-
-  .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
-    background:rgba(map-get($colors, dusty-grey), .15)!important;
-  }
+.navigation__bottom {
+  background:map-get($colors, emperor);
+}
 
-  .algolia-docsearch-suggestion--subcategory-column {
-    color:map-get($colors, dove-grey);
-  }
+.navigation__child {
+  font-size: getFontSize(-1);
+  margin:0.5em 1em 0.6em;
+  color:map-get($colors, dusty-grey);
+  text-transform: uppercase;
 
-  .algolia-docsearch-suggestion--category-header {
-    color:map-get($colors, mine-shaft);
+  &:first-of-type {
+    margin-left: 0;
   }
 
-  .algolia-docsearch-suggestion--title {
-    color:map-get($colors, mine-shaft);
+  &:hover,
+  &--active {
+    color:map-get($colors, white);
   }
 }

components/navigation/navigation.jsx

@@ -3,6 +3,32 @@ import Link from '../link/link';
 import Container from '../container/container';
 import Logo from '../logo/logo';
 import './navigation-style';
+import './search-style';
+
+let Sections = [
+  { 
+    title: 'Concepts', 
+    url: 'concepts' 
+  },
+  { 
+    title: 'Guides', 
+    url: 'guides' 
+  },
+  { 
+    title: 'Documentation', 
+    url: 'configuration',
+    children: [
+      { title: 'API', url: 'api' },
+      { title: 'Configuration', url: 'configuration' },
+      { title: 'Loaders', url: 'loaders' },
+      { title: 'Plugins', url: 'plugins' }
+    ]
+  },
+  { 
+    title: 'Donate', 
+    url: '//opencollective.com/webpack' 
+  }
+];
 
 export default class Navigation extends React.Component {
   render() {
@@ -23,24 +49,20 @@ export default class Navigation extends React.Component {
 
           <nav className="navigation__links">
             {
-              sections.filter(section => ['Other', 'Get-Started'].indexOf(section.title) === -1).map((link, i) => {
-                let active = pageUrl.includes(`${link.url}/`);
-                let activeClass = active ? 'navigation__link--active' : '';
+              Sections.map(section => {
+                let active = this._isActive(section);
+                let activeMod = active ? 'navigation__link--active' : '';
 
                 return (
                   <Link
-                    key={ `navigation__link${i}` }
-                    className={ `navigation__link ${activeClass}` }
-                    to={ `/${link.url}` }>
-                    { link.title }
+                    key={ `navigation__link-${section.title}` }
+                    className={ `navigation__link ${activeMod}` }
+                    to={ `/${section.url}` }>
+                    { section.title }
                   </Link>
                 );
               })
             }
-
-            <Link className="navigation__link" to="//opencollective.com/webpack">
-              Donate
-            </Link>
           </nav>
 
           <div className="navigation__search">
@@ -55,20 +77,43 @@ export default class Navigation extends React.Component {
             </button>
           </div>
         </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>
+            );
+          })
+        }
       </header>
     );
   }
 
   componentDidMount() {
     if (typeof window !== 'undefined') {
-      // Initialize DocSearch/Algolia
       window.docsearch({
         apiKey: 'fac401d1a5f68bc41f01fb6261661490',
         indexName: 'webpack-js-org',
         inputSelector: '.navigation__search-input'
       });
 
-      // Open the search on tabbing for usability
       window.addEventListener('keyup', e => {
         if (e.which === 9 && e.target.classList.contains('navigation__search-input')) {
           this._openSearch();
@@ -77,6 +122,21 @@ export default class Navigation extends React.Component {
     }
   }
 
+  /**
+   * Check if section is active
+   * 
+   * @param {object} section - An object describing the section
+   * @return {bool} - Whether or not the given section is active
+   */
+  _isActive(section) {
+    let { pageUrl } = this.props;
+
+    if (section.children) {
+      return section.children.some(child => pageUrl.includes(`${child.url}/`));
+
+    } else return pageUrl.includes(`${section.url}/`);
+  }
+
   /**
    * Toggle the SidebarMobile component
    * 

components/navigation/search-style.scss

@@ -0,0 +1,43 @@
+@import 'vars';
+
+.algolia-autocomplete {
+  display: flex !important;
+
+  .ds-dropdown-menu {
+    box-shadow: none;
+
+    &:before {
+      content: none;
+    }
+
+    [class^=ds-dataset-] {
+      border-color: map-get($colors, alto);
+      border-radius: 3px;
+    }
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    border-color:map-get($colors, alto);
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    color:map-get($colors, denim);
+    background:rgba(map-get($colors, malibu), 0.2);
+  }
+
+  .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
+    background:rgba(map-get($colors, dusty-grey), 0.15) !important;
+  }
+
+  .algolia-docsearch-suggestion--subcategory-column {
+    color:map-get($colors, dove-grey);
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    color:map-get($colors, mine-shaft);
+  }
+
+  .algolia-docsearch-suggestion--title {
+    color:map-get($colors, mine-shaft);
+  }
+}

components/sidebar-item/sidebar-item.js renamed to components/sidebar-item/sidebar-item.jsx

@@ -13,6 +13,7 @@ export default class SidebarItem extends React.Component {
 
   render() {
     let { index, url, title, anchors = [], currentPage } = this.props;
+
     let emptyMod = !anchors.length ? 'sidebar-item--empty' : '';
     let active = `/${currentPage}` === url;
     let openMod = (active || this.state.open) ? 'sidebar-item--open' : '';

components/sidecar/sidecar-style.scss

@@ -7,7 +7,7 @@
   @include break(large) {
     display: block;
     position: fixed;
-    top: 75px;
+    top: 100px;
     right: 0;
     z-index: 100;
   }

content/api/cli.md

@@ -1,7 +1,7 @@
 ---
-title: CLI
+title: Command Line Interface
+sort: 2
 ---
-## Overview
 
 webpack provides a Command Line Interface (CLI) to configure and interact with your build. This is mostly useful in case of early prototyping, profiling, writing npm scripts or personal customization of the build.
 
@@ -226,7 +226,7 @@ These options allow webpack to display various stats and style them differently
 | --records-input-path  | Path to the records file (reading)                               |                                             |
 | --records-output-path | Path to the records file (writing)                               |                                             |
 | --records-path        | Path to the records file                                         |                                             |
-| --target              | The targeted execution enviroment                                | --target='node'                             |
+| --target              | The targeted execution environment                                | --target='node'                             |
 
 ### Shortcuts
 

content/api/index.md

@@ -1,6 +1,6 @@
 ---
 title: API
+sort: 1
 ---
 
-TODO
-
+> TODO

content/api/loaders.md

@@ -1,4 +1,6 @@
 ---
 title: Loader API
+sort: 4
 ---
 
+> TODO