Merge pull request #270 from webpack/develop

Deploy

Author: SpaceK33z

.eslintignore

@@ -1 +1,2 @@
+build/
 antwar.config.js

README.md

@@ -16,36 +16,4 @@ For more information see the [contributors page](https://github.com/webpack/webp
 
 ## Content Progress
 
-Fully completed can be removed from this list. If there's a topic you would like to contribute in, check out the related issue and comment there.
-
-### Root Level
-
-- Analyze - ![](https://img.shields.io/badge/progress-0%25-yellowgreen.svg)
-- Contribute - ![](https://img.shields.io/badge/progress-10%25-yellowgreen.svg)
-- Get Started - ![](https://img.shields.io/badge/progress-10%25-yellowgreen.svg) - [#15](https://github.com/webpack/webpack.js.org/issues/15)
-- Writer's Guide - ![](https://img.shields.io/badge/progress-50%25-yellowgreen.svg)
-
-### `/api`
-
-- Configuration - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#25](https://github.com/webpack/webpack.js.org/issues/25)
-- Loaders - ![](https://img.shields.io/badge/progress-0%25-yellowgreen.svg) - [#21](https://github.com/webpack/webpack.js.org/issues/21)
-- Module Resolution - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#12](https://github.com/webpack/webpack.js.org/issues/12)
-- Node - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#23](https://github.com/webpack/webpack.js.org/issues/23)
-- Plugins - ![](https://img.shields.io/badge/progress-0%25-yellowgreen.svg) - [#37](https://github.com/webpack/webpack.js.org/issues/37)
-
-### `/concepts`
-
-- Modules - ![](https://img.shields.io/badge/progress-50%25-yellowgreen.svg) - [#49](https://github.com/webpack/webpack.js.org/issues/49)
-- Loaders - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#50](https://github.com/webpack/webpack.js.org/issues/50)
-
-### `/how-to`
-
-- Author libraries - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#9](https://github.com/webpack/webpack.js.org/issues/9)
-- Develop - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#26](https://github.com/webpack/webpack.js.org/issues/26)
-- Handle compatibility - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#4](https://github.com/webpack/webpack.js.org/issues/4)
-- Handle dependencies - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#5](https://github.com/webpack/webpack.js.org/issues/5)
-- Improve build performance - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#16](https://github.com/webpack/webpack.js.org/issues/16)
-- Shim - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#13](https://github.com/webpack/webpack.js.org/issues/13)
-- Split code - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#3](https://github.com/webpack/webpack.js.org/issues/3)
-- Use with Docker - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#44](https://github.com/webpack/webpack.js.org/issues/44)
-- Use with third party tools - ![](https://img.shields.io/badge/progress-5%25-yellowgreen.svg) - [#53](https://github.com/webpack/webpack.js.org/issues/53)
+Check out the [MVP Milestone](https://github.com/webpack/webpack.js.org/issues?q=is%3Aopen+is%3Aissue+milestone%3A%22Webpack+2+-+Documentation+MVP%22) for the current status.

antwar.config.js

@@ -78,7 +78,7 @@ module.exports = {
       }
     )
   }
-}
+};
 
 function root(contentCb) {
   return {
@@ -88,8 +88,11 @@ function root(contentCb) {
     },
     processPage: processPage(), // Process individual page (url, content)
     layouts: { // Layouts (page/section)
-      page: function() {
+      index: function() {
         return require('./components/splash/splash.jsx').default
+      },
+      page: function() {
+        return require('./components/page/page.jsx').default
       }
     },
     redirects: {} // Redirects <from>: <to>

assets/icons.woff

@@ -1,14 +1,14 @@
 const antwar = require('antwar');
-const webpack = require('./webpack.config');
-const configuration = require('./antwar.config');
+
+const environment = process.env.npm_lifecycle_event;
 
 // Patch Babel env to make HMR switch work
-process.env.BABEL_ENV = process.env.npm_lifecycle_event;
+process.env.BABEL_ENV = environment;
 
-antwar({
-  configuration,
-  environment: process.env.npm_lifecycle_event,
-  webpack
+antwar[environment]({
+  environment,
+  antwar: require('./antwar.config'),
+  webpack: require('./webpack.config')
 }).catch(function (err) {
   console.error(err);
 });

assets/icons.woff2

@@ -14,12 +14,10 @@
 
   &__text {
     font-family:'Geomanist', 'Century Gothic', sans-serif;
-    font-size:1.3em;
+    font-size:1.5em;
     font-weight:500;
     text-rendering: geometricPrecision;
-    letter-spacing:0.5px;
     margin-left:0.25em;
-    margin-top:3px;
     color:map-get($colors, emperor);
     transition:color 250ms;
   }

bootstrap.js

@@ -6,24 +6,44 @@
   flex: 0 0 auto;
   transition: background 250ms;
   background: map-get($colors, mine-shaft);
+
+  &--transparent {
+    position:relative;
+    display:flex;
+    justify-content: center;
+    background: transparent;
+
+    .navigation__inner {
+      position:absolute;
+    }
+
+    .navigation__link:hover {
+      color: map-get($colors, emperor);
+    }
+
+    .navigation__mobile {
+      color:map-get($colors, emperor);
+    }
+  }
 }
 
 .navigation__inner {
   display: flex;
   align-items: center;
-  padding: 0.5em 1em;
+  padding: 0.6em 1em;
 
   @include break {
     padding:0 0 0 1.5em;
   }
 }
 
 .navigation__mobile {
-  position: absolute;
-  font-size: getFontSize(2);
   display: flex;
-  left: -0.5em;
+  font-size: 1.75em;
+  margin-left: -1em;
+  align-items: center;
   color: map-get($colors, white);
+  cursor: pointer;
   transition: color 250ms;
 
   &:active {
@@ -35,6 +55,10 @@
   }
 }
 
+.navigation__logo {
+  margin:auto;
+}
+
 .navigation__links {
   display: none;
 

components/logo/logo-style.scss

@@ -6,6 +6,8 @@ import './navigation-style';
 
 export default class Navigation extends React.Component {
   render() {
+    const { pageUrl, sections } = this.props;
+
     return (
       <header className="navigation">
         <Container className="navigation__inner">
@@ -19,9 +21,8 @@ export default class Navigation extends React.Component {
 
           <nav className="navigation__links">
             {
-              this.props.pages.map((link, i) => {
-                let { pathname } = window.location;
-                let active = pathname === `/${link.url}` || pathname.includes(`/${link.url}/`);
+              sections.filter(section => section.title !== 'Other').map((link, i) => {
+                let active = pageUrl.includes(`${link.url}/`);
                 let activeClass = active ? 'navigation__link--active' : '';
 
                 return (
@@ -34,15 +35,19 @@ export default class Navigation extends React.Component {
                 );
               })
             }
+
+            <Link className={ 'navigation__link' } to={ '//opencollective.com/webpack' }>
+              Donate
+            </Link>
           </nav>
         </Container>
       </header>
     );
   }
 
   _toggleSidebar(e) {
-    let sidebar = document.querySelector('.sidebar');
-    let modifier = 'sidebar--visible';
+    let sidebar = document.querySelector('.sidebar-mobile');
+    let modifier = 'sidebar-mobile--visible';
 
     sidebar.classList.toggle(modifier);
   }

components/navigation/navigation-style.scss

@@ -0,0 +1,61 @@
+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+.sidebar-mobile {
+  position: fixed;
+  width: 280px;
+  height: 100vh;
+  z-index: 100;
+  top: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  background: map-get($colors, white);
+  transform: translate3D(-100%, 0, 0);
+  transition: all 500ms;
+
+  @include break {
+    display: none;
+  }
+
+  &--visible {
+    transform: translate3D(0, 0, 0);
+    box-shadow: 0 0 5px map-get($colors, emperor);
+  }
+}
+
+.sidebar-mobile__close {
+  position:absolute;
+  right:16px;
+  top:19px;
+  font-size:1.5em;
+  cursor:pointer;
+  color:map-get($colors, dusty-grey);
+  transition:color 250ms;
+
+  &:hover {
+    color:map-get($colors, mine-shaft);
+  }
+}
+
+.sidebar-mobile__section {
+  font-size: getFontSize(1);
+  text-transform: uppercase;
+  color: map-get($colors, mine-shaft);
+  margin: 1em 16px 0.25em;
+}
+
+.sidebar-mobile__page {
+  display: block;
+  padding: 0.5em 17px;
+  text-transform: capitalize;
+  color: map-get($colors, dusty-grey);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+  &:active,
+  &--active {
+    color: map-get($colors, mine-shaft);
+    background: map-get($colors, alto);
+  }
+}