Merge branch 'master' into concepts-loaders-1-followup

Author: EugeneHlushko

src/components/Sidebar/Sidebar.jsx

@@ -32,7 +32,7 @@ export default ({
           group = page.group;
 
           return (
-            <React.Fragment key={`sidebar-item-${index}`}>
+            <div key={page.url}>
               {displayGroup ? <h4 className="sidebar__group">{group}</h4> : null}
 
               <SidebarItem
@@ -42,7 +42,7 @@ export default ({
                 anchors={page.anchors}
                 currentPage={currentPage}
               />
-            </React.Fragment>
+            </div>
           );
         })}
       </div>

src/components/SidebarItem/SidebarItem.jsx

@@ -10,42 +10,43 @@ export default class SidebarItem extends React.Component {
   };
 
   render() {
-    let { title, anchors = [] } = this.props;
+    let {title, anchors = []} = this.props;
     let openMod = this.state.open ? `${block}--open` : '';
     let disabledMod = anchors.length == 0 ? `${block}--disabled` : '';
 
     return (
-      <div className={ `${block} ${openMod} ${disabledMod}` }>
-        { anchors.length > 0 ? (
+      <div className={`${block} ${openMod} ${disabledMod}`}>
+        {anchors.length > 0 ? (
           <i
-            className={ `${block}__toggle icon-chevron-right` }
-            onClick={ this._toggle.bind(this) } />
+            className={`${block}__toggle icon-chevron-right`}
+            onClick={this._toggle.bind(this)} />
         ) : (
-          <i className={ `${block}__toggle icon-vertical-bar` } />
+          <i className={`${block}__toggle icon-vertical-bar`} />
         )}
 
         <Link
-          className={ `${block}__title` }
-          to={ this.props.url }>
-          { title }
+          key={this.props.url}
+          className={`${block}__title`}
+          to={this.props.url}>
+          {title}
         </Link>
 
-        { anchors.length > 0 ? (
-          <ul className={ `${block}__anchors` }>
+        {anchors.length > 0 ? (
+          <ul className={`${block}__anchors`}>
             {
               anchors.map((anchor, i) => (
                 <li
-                  key={ `anchor-${title}-${i}` }
-                  className={ `${block}__anchor` }
-                  title={ anchor.title }>
-                  <a href={ this._generateAnchorURL(anchor) }>
-                    { anchor.title }
+                  key={this._generateAnchorURL(anchor)}
+                  className={`${block}__anchor`}
+                  title={anchor.title}>
+                  <a href={this._generateAnchorURL(anchor)}>
+                    {anchor.title}
                   </a>
                 </li>
               ))
             }
           </ul>
-        ) : null }
+        ) : null}
       </div>
     );
   }

src/components/SidebarMobile/SidebarMobile.jsx

@@ -9,31 +9,31 @@ export default class SidebarMobile extends React.Component {
   _lastTouchPosition = {}
 
   render() {
-    let { isOpen, toggle } = this.props;
+    let {isOpen, toggle} = this.props;
     let openMod = isOpen ? ' sidebar-mobile--visible' : '';
 
     this._toggleBodyListener(isOpen);
 
     return (
       <nav
-        className={ `sidebar-mobile${openMod}` }
-        ref={ ref => this._container = ref }
-        onTouchStart={ this._handleTouchStart }
-        onTouchMove={ this._handleTouchMove }
-        onTouchEnd={ this._handleTouchEnd }>
+        className={`sidebar-mobile${openMod}`}
+        ref={ref => this._container = ref}
+        onTouchStart={this._handleTouchStart}
+        onTouchMove={this._handleTouchMove}
+        onTouchEnd={this._handleTouchEnd}>
 
         <div
           className="sidebar-mobile__toggle"
-          onTouchStart={ this._handleTouchStart }
-          onTouchMove={ this._handleOpenerTouchMove }
-          onTouchEnd={ this._handleTouchEnd } />
+          onTouchStart={this._handleTouchStart}
+          onTouchMove={this._handleOpenerTouchMove}
+          onTouchEnd={this._handleTouchEnd} />
 
         <div className="sidebar-mobile__content">
           <i
             className="sidebar-mobile__close icon-cross"
-            onClick={ toggle.bind(null, false) } />
+            onClick={toggle.bind(null, false)} />
 
-          { this._getSections() }
+          {this._getSections()}
         </div>
       </nav>
     );
@@ -62,17 +62,17 @@ export default class SidebarMobile extends React.Component {
 
       return (
         <div
-          className={ `sidebar-mobile__section ${active ? 'sidebar-mobile__section--active' : ''}` }
-          key={ section.url }>
+          className={`sidebar-mobile__section ${active ? 'sidebar-mobile__section--active' : ''}`}
+          key={section.url}>
           <Link
             className="sidebar-mobile__section-header"
-            key={ section.url }
-            to={ section.url }
-            onClick={ this.props.toggle.bind(null, false) }>
-            <h3>{ section.title || section.url }</h3>
+            key={section.url}
+            to={section.url}
+            onClick={this.props.toggle.bind(null, false)}>
+            <h3>{section.title || section.url}</h3>
           </Link>
 
-          { this._getPages(section.children) }
+          {this._getPages(section.children)}
         </div>
       );
     });
@@ -97,11 +97,11 @@ export default class SidebarMobile extends React.Component {
 
       return (
         <Link
-          key={ url }
-          className={ `sidebar-mobile__page sidebar-mobile__section-child ${active ? 'sidebar-mobile__page--active' : ''}` }
-          to={ url }
-          onClick={ this.props.toggle.bind(null, false) }>
-          { page.title }
+          key={url}
+          className={`sidebar-mobile__page sidebar-mobile__section-child ${active ? 'sidebar-mobile__page--active' : ''}`}
+          to={url}
+          onClick={this.props.toggle.bind(null, false)}>
+          {page.title}
         </Link>
       );
     });
@@ -113,7 +113,7 @@ export default class SidebarMobile extends React.Component {
    * @param {object} e - Native click event
    */
   _handleBodyClick = e => {
-    const { isOpen, toggle } = this.props;
+    const {isOpen, toggle} = this.props;
     if (isOpen && !this._container.contains(e.target)) {
       toggle(false);
     }
@@ -156,7 +156,7 @@ export default class SidebarMobile extends React.Component {
   }
 
   _handleTouchEnd = e => {
-    const { isOpen } = this.props;
+    const {isOpen} = this.props;
     const threshold = 20;
 
     // Free up all the inline styling

src/content/api/index.md

@@ -1,6 +1,6 @@
 ---
 title: Introduction
-sort: 0
+sort: -1
 contributors:
   - tbroadley
 ---

src/content/concepts/index.md

@@ -1,6 +1,6 @@
 ---
 title: Concepts
-sort: 0
+sort: -1
 contributors:
   - TheLarkInn
   - jhnns

src/content/concepts/loaders.mdx

@@ -140,8 +140,7 @@ This uses the `jade-loader` for `.jade` files, and the [`style-loader`](/loaders
 - Plugins can give loaders more features.
 - Loaders can emit additional arbitrary files.
 
-Loaders allow more power in the JavaScript ecosystem through preprocessing
-functions (loaders). Users now have more flexibility to include fine-grained logic such as compression, packaging, language translations and [more](/loaders).
+Loaders provide a way to customize the output through their preprocessing functions. Users now have more flexibility to include fine-grained logic such as compression, packaging, language translations and [more](/loaders).
 
 
 ## Resolving Loaders

src/content/concepts/output.md

@@ -6,16 +6,15 @@ contributors:
   - chyipin
   - rouzbeh84
   - byzyk
+  - EugeneHlushko
 ---
 
 Configuring the `output` configuration options tells webpack how to write the compiled files to disk. Note that, while there can be multiple `entry` points, only one `output` configuration is specified.
 
 
 ## Usage
 
-The minimum requirement for the `output` property in your webpack config is to set its value to an object including the following property:
-
-- A `filename` to use for the output file(s).
+The minimum requirement for the `output` property in your webpack configuration is to set its value to an object and provide an [`output.filename`](/configuration/output/#outputfilename) to use for the output file(s):
 
 __webpack.config.js__
 

src/content/contribute/index.md

@@ -1,6 +1,6 @@
 ---
 title: Contribute
-sort: 0
+sort: -1
 contributors:
   - rouzbeh84
   - scottdj92

src/content/guides/index.md

@@ -1,6 +1,6 @@
 ---
 title: Guides
-sort: 0
+sort: -1
 contributors:
   - skipjack
   - EugeneHlushko

src/content/guides/scaffolding.md

@@ -1,10 +1,10 @@
 ---
 title: Scaffolding
+sort: 14
 contributors:
   - evenstensberg
   - pranshuchittora
   - EugeneHlushko
-sort: 14
 ---
 
 It can be hard to set up a complex webpack configuration for the first time. Writing advanced configurations to optimize performance is quite hard. The `init` feature is designed to support people that want to create their own configuration or initializing projects that other people create.