chore: Port SideBody, navigation, footer

Still need to look into `Page`.

Author: bebraw

antwar.config.js

@@ -15,9 +15,7 @@ module.exports = {
   plugins: [
     prevnextPlugin()
   ],
-  layout: function() {
-    return require('./components/site/site.jsx').default
-  },
+  layout: () => require('./components/site/site.jsx').default,
   paths: {
     '/': {
       content: () => (

components/footer/footer.jsx

@@ -5,31 +5,31 @@ import Container from '../container/container';
 import Icon from '../../assets/icon-square-small.svg';
 import './footer-style';
 
-export default (props) => {
-  return (
-    <footer className="footer">
-      <Container className="footer__inner">
-        <section className="footer__left">
-          <Link className="footer__link" to="/guides/get-started">Get Started</Link>
-          <Link className="footer__link" to="/organization">Organization</Link>
-          <Link className="footer__link" to="/support">Support</Link>
-          <Link className="footer__link" to="/guides/why-webpack#comparison">Comparison</Link>
-        </section>
+const Footer = () => (
+  <footer className="footer">
+    <Container className="footer__inner">
+      <section className="footer__left">
+        <Link className="footer__link" to="/guides/get-started/">Get Started</Link>
+        <Link className="footer__link" to="/organization/">Organization</Link>
+        <Link className="footer__link" to="/support/">Support</Link>
+        <Link className="footer__link" to="/guides/why-webpack/#comparison">Comparison</Link>
+      </section>
 
-        <section className="footer__middle">
-          <Link to="/" className="footer__icon">
-            <img src={ Icon } />
-          </Link>
-        </section>
+      <section className="footer__middle">
+        <Link to="/" className="footer__icon">
+          <img src={ Icon } />
+        </Link>
+      </section>
 
-        <section className="footer__right">
-          <Link className="footer__link" to="/branding">Branding</Link>
-          <Link className="footer__link" to="//gitter.im/webpack/webpack">Gitter</Link>
-          <Link className="footer__link" to="https://github.com/webpack/webpack/releases">Changelog</Link>
-          <Link className="footer__link" to="/license">License</Link>
-          <CC />
-        </section>
-      </Container>
-    </footer>
-  );
-};
+      <section className="footer__right">
+        <Link className="footer__link" to="/branding/">Branding</Link>
+        <Link className="footer__link" to="//gitter.im/webpack/webpack">Gitter</Link>
+        <Link className="footer__link" to="https://github.com/webpack/webpack/releases">Changelog</Link>
+        <Link className="footer__link" to="/license/">License</Link>
+        <CC />
+      </section>
+    </Container>
+  </footer>
+);
+
+export default Footer;

components/link/link.jsx

@@ -3,7 +3,7 @@ import startsWith from 'lodash/startsWith';
 
 let RRouter;
 if (__DEV__) {
-  RRouter = require('react-router');
+  RRouter = require('react-router-dom');
 }
 
 export default ({ to, ...props }) => {

components/navigation/navigation.jsx

@@ -68,7 +68,7 @@ export default class Navigation extends React.Component {
                   <Link
                     key={ `navigation__link-${section.title}` }
                     className={ `navigation__link ${activeMod}` }
-                    to={ `/${section.url}` }>
+                    to={ `/${section.url}/` }>
                     { section.title }
                   </Link>
                 );

components/site/site.jsx

@@ -19,9 +19,13 @@ import '../sidebar-item/sidebar-item-style';
 import '../logo/logo-style';
 import '../dropdown/dropdown-style.scss';
 
-export default props => {
+const SiteBody = ({
+  children,
+  section,
+  location: { pathname }
+}) => {
   // Retrieve section data
-  let sections = props.children.props.section.all()
+  let sections = section.all()
     .map(({ title, url, pages }) => ({
       title,
       url,
@@ -31,6 +35,7 @@ export default props => {
       }))
     }));
 
+  // XXX: Is this needed anymore?
   // Rename the root section ("webpack" => "Other") and push it to the end
   let rootIndex = sections.findIndex(section => section.title === 'webpack');
   let rootSection = sections.splice(rootIndex, 1)[0];
@@ -41,23 +46,25 @@ export default props => {
     <div id="site" className="site">
       <Interactive
         id="components/notification-bar/notification-bar.jsx"
-        component={ NotificationBar } />
+        component={NotificationBar} />
 
       <Interactive
         id="components/navigation/navigation.jsx"
         component={ Navigation }
         sections={ sections }
-        pageUrl={ props.children.props.page.url } />
+        pageUrl={ pathname } />
 
       <Interactive
         id="components/sidebar-mobile/sidebar-mobile.jsx"
         component={ SidebarMobile }
         sections={ sections } />
 
-      { props.children }
+      {children}
       <Footer />
 
       <GoogleAnalytics analyticsId="UA-46921629-2" />
     </div>
   );
 };
+
+export default SiteBody;

package.json

@@ -25,6 +25,7 @@
   },
   "scripts": {
     "start": "npm run init:generated && npm run fetch && node ./antwar.bootstrap.js develop",
+    "start-only": "node ./antwar.bootstrap.js develop",
     "build": "npm run init:generated && npm run fetch && rm -rf build/ && node ./antwar.bootstrap.js build && npm run sitemap && echo webpack.js.org > build/CNAME",
     "build-test": "npm run build && http-server build/",
     "deploy": "gh-pages -d build",