Merge pull request #215 from webpack/develop

Deploy

Author: bebraw

.babelrc

@@ -2,5 +2,9 @@
   "presets": [
     "es2015",
     "react"
+  ],
+  "plugins": [
+    "syntax-object-rest-spread",
+    "transform-object-rest-spread"
   ]
 }

.eslintrc

@@ -12,7 +12,11 @@
     "plugins": [
         "markdown"
     ],
-    
+
+    "globals": {
+        "__DEV__": true
+    },
+
     "rules": {
         "no-undef": 2,
         "no-unreachable": 2,

antwar.config.js

@@ -68,7 +68,7 @@ module.exports = {
       function() {
         return require.context(
           'json!yaml-frontmatter!./content/how-to',
-          false,
+          true,
           /^\.\/.*\.md$/
         );
       }

components/Link.jsx

@@ -1,6 +1,16 @@
 import React from 'react';
-import {Link as RRLink} from 'react-router';
 
-const Link = props => <RRLink {...props} />;
+let RRouter;
+if (__DEV__) {
+  RRouter = require('react-router');
+}
+
+const Link = ({ to, ...props }) => {
+  if (__DEV__) {
+    return <RRouter.Link to={to} {...props} />;
+  }
+
+  return <a href={to} {...props} />;
+};
 
 export default Link;

components/Navigation.jsx

@@ -7,7 +7,7 @@ export default ({ home = '/', pages, onToggleNav }) => (
   <div className="navigation">
     <Container>
       <div className="navigation__inner">
-        <button className="navigation__mobilebtn" onClick={onToggleNav}>
+        <button id="menu-btn" className="navigation__mobilebtn" onClick={onToggleNav}>
           Open navigation
         </button>
         <Link className="navigation__logo" to={{ pathname: home }}>

components/Page.jsx

@@ -1,16 +1,25 @@
 import React from 'react';
+import Interactive from 'antwar-interactive';
 import Container from './Container';
 import Sidebar from './Sidebar';
 import Contributors from './Contributors';
 
-export default props => {
-  let { config, section, page } = props;
-
+export default ({ section, page }) => {
   let edit = `https://github.com/webpack/webpack.js.org/edit/master/content/${page.url}.md`;
 
   return (
     <Container className="page">
-      <Sidebar paths={config.paths} sectionName={section.name} pages={ section.pages() } />
+      <Interactive
+        id="components/Sidebar.jsx"
+        component={Sidebar}
+        sectionName={section.name}
+        pages={section.pages().map(page => ({
+          url: page.url,
+          title: page.title,
+          anchors: page.anchors
+        }))}
+      />
+
       <section className="page__content">
         <h1>{ page.title }</h1>
 

components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Link from './Link';
 
 const Sidebar = ({ sectionName, pages }) => {
@@ -22,7 +22,7 @@ const Sidebar = ({ sectionName, pages }) => {
   );
 };
 
-class Item extends Component {
+class Item extends React.Component {
   constructor(props) {
     super(props);
 
@@ -35,12 +35,11 @@ class Item extends Component {
     let { index, url, title, anchors = [] } = this.props;
     let emptyMod = !anchors.length ? 'sidebar-item--empty' : '';
     let openMod = this.state.open ? 'sidebar-item--open' : '';
-    
+
     return (
       <div className={ `sidebar-item ${emptyMod} ${openMod}` }>
         <Link className="sidebar-item__title" to={ url }>{ title }</Link>
-        <i className="sidebar-item__toggle icon-chevron-down"
-          onClick={ this.toggle.bind(this) } />
+        <i className="sidebar-item__toggle icon-chevron-down" onClick={ this.toggle.bind(this) } />
         <ul className="sidebar-item__anchors">
           {
             anchors.map((anchor, j) => (

components/Site.jsx

@@ -20,22 +20,19 @@ export default class Site extends React.Component {
       navDisplayed: false
     };
 
-    this.onToggleNav = () => {
-      this.setState({navDisplayed: !this.state.navDisplayed});
-    };
-  }
-
-  componentWillUpdate (nextProps) {
-    console.log(nextProps);
+    // this.onToggleNav = () => {
+    //   this.setState({navDisplayed: !this.state.navDisplayed});
+    // };
   }
 
   render () {
     let { children } = this.props;
 
-    const cls = this.state.navDisplayed ? 'site nav-displayed' : 'site';
+    // TODO: restore
+    // const cls = this.state.navDisplayed ? 'site nav-displayed' : 'site';
 
     return (
-      <div className={cls}>
+      <div id="site" className="site">
         <Navigation home="/" pages={ pages } onToggleNav={this.onToggleNav} />
         <Sidecar />
         { children }

content/how-to/develop.md

@@ -1,12 +1,45 @@
 ---
 title: How to Develop?
+contributors:
+  - SpaceK33z
 ---
-> devtool
-> output.pathinfo
-> hot module replacement
-
-> watch
-> caching
-> dev middleware
-> in memory compilation
-> dev server
+
+- Show the three ways to develop: webpack --watch, webpack-dev-server, webpack-dev-middleware and explain the differences (keep it short!). dev-server is the easiest one to get started.
+- dev-server and dev-middleware use in-memory compilation
+
+W> Explain that IT SHOULD NOT BE USED IN PRODUCTION, NEVER.
+
+Adjusting your text editor
+
+- Explain that some editors use "atomic save"; this needs to be disabled in order to see all file changes.
+
+Choose a devtool
+
+- Explain shortly what source maps are and why they come in handy when devving
+- Link to devtool page for more info about source maps
+
+webpack watch mode
+
+- show one use case
+- show how to use in CLI
+- show how to use API
+- explain that you need to use your own server (maybe show the python server)
+
+webpack-dev-server
+
+- show one use case
+- how to install
+- show how to use in CLI
+- show how to use API
+- refer to `devServer` configuration page
+- explain `inline` and `iframe` mode, and explain `inline` requires more config in API
+- make clear that there are some differences in CLI and API
+- after explaining live reload, link to HMR article
+
+webpack-dev-middleware
+
+- show one use case
+- how to install
+- show how to use API
+- refer to `devServer` configuration page
+

content/how-to/develop/using-docker.md

@@ -0,0 +1,6 @@
+---
+title: How to Develop Using Docker?
+---
+
+# What is docker
+