fix(links) fix hydration overriding wrong elements of the ssr html (#3288)

* fix(links) fix hydration overriding wrong elements of the ssr html

* fix(links) fix hydration overriding, remove fragment usage

* misc(sorting) fix the bug with sorting

* Update src/utilities/content-tree-enhancers.js

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/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.

src/content/index.md

@@ -1,6 +1,6 @@
 ---
 title: webpack
-sort: 0
+sort: -1
 ---
 
 ## Write Your Code

src/content/loaders/index.md

@@ -1,6 +1,6 @@
 ---
 title: Loaders
-sort: 0
+sort: -1
 contributors:
   - simon04
   - bajras

src/content/migrate/index.md

@@ -1,8 +1,8 @@
 ---
 title: Migrate
-sort: 0
+sort: -1
 contributors:
   - EugeneHlushko
 ---
 
-This section contains information about migrating from older versions of webpack to newer ones.
+This section contains information about migrating from older versions of webpack to newer ones.

src/content/plugins/index.md

@@ -1,6 +1,6 @@
 ---
 title: Plugins
-sort: 0
+sort: -1
 contributors:
   - simon04
   - gonzoyumo

src/scripts/concatenate-docs.js

@@ -49,7 +49,16 @@ function getDirectoryRecursive(basePath) {
 			}
 
 		// write compound target file
-		const targetFile = fs.createWriteStream(targetFilePath);
+    const targetFile = fs.createWriteStream(targetFilePath);
+
+    targetFile.write(`---
+title: Printable
+sort: 999
+contributors:
+  - webpack
+---
+
+    `);
 
 		targetFile.on('error', (error) => {
       throw error;