Merge pull request webpack#203 from oliverturner/feature/rwd

Feature/rwd
sallar · Oct 2, 2016 · f6f63ca · f6f63ca
2 parents 66d2422 + 85178e7
commit f6f63ca
Show file tree

Hide file tree

Showing 21 changed files with 484 additions and 272 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -13,7 +13,7 @@
         "markdown"
     ],
 
-    rules: {
+    "rules": {
         "no-undef": 2,
         "no-unreachable": 2,
         "no-unused-vars": 0,

diff --git a/antwar.config.js b/antwar.config.js
@@ -109,7 +109,7 @@ function section(title, contentCb) {
       return contentCb();
     },
     sort(pages) {
-      return _.sortBy(pages, page => page.file.sort);
+      return _.sortBy(pages, (page) => page.file.sort)
     },
     processPage: processPage(),
     layouts: {

diff --git a/components/Contributors.jsx b/components/Contributors.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 
-export default props => {
+export default ({contributors}) => {
   return (
     <div className="contributors">
-      <h4>Contributors:</h4>
+      <h4>Contributors</h4>
       <div className="contributors__list">
         { 
-          (props.contributors || []).map(contributor => (
+          (contributors || []).map((contributor) => (
             <a key={ contributor } 
-              className="contributors__person" 
+              className="contributor"
               href={ `https://github.com/${contributor}` }>
               <img src={ `https://github.com/${contributor}.png?size=80` } />
               <span>{ contributor }</span>
@@ -18,4 +18,4 @@ export default props => {
       </div>
     </div>
   );
-};
+};
diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -3,10 +3,10 @@ import Link from './Link';
 import Cube from './Cube';
 import Container from './Container';
 
-export default props => {
+export default (props) => {
   return (
-    <footer className="footer">
-      <Container className="footer__inner">
+    <Container className="footer">
+      <div className="footer__inner">
         <section className="footer__left">
           <Link className="footer__link" to="/get-started">Get Started</Link>
           <Link className="footer__link" to="/analyze">Analyze</Link>
@@ -24,7 +24,7 @@ export default props => {
           <Link className="footer__link" to="/changelog">Changelog</Link>
           <Link className="footer__link" to="/license">License</Link>
         </section>
-      </Container>
-    </footer>
+      </div>
+    </Container>
   );
 };
diff --git a/components/Navigation.jsx b/components/Navigation.jsx
@@ -3,26 +3,31 @@ import Link from './Link';
 import Container from './Container';
 import Logo from './Logo';
 
-export default ({ home = '/', pages }) => (
+export default ({ home = '/', pages, onToggleNav }) => (
   <div className="navigation">
-    <Container className="navigation__inner">
-      <Link className="navigation__logo" to={{ pathname: home }}>
-        <Logo theme="light" />
-      </Link>
+    <Container>
+      <div className="navigation__inner">
+        <button className="navigation__mobilebtn" onClick={onToggleNav}>
+          Open navigation
+        </button>
+        <Link className="navigation__logo" to={{ pathname: home }}>
+          <Logo theme="light" />
+        </Link>
 
-      <nav className="navigation__links">
-        { 
-          pages.map((link, i) => (
-            <Link
-              key={ `navigation__link${i}` }
-              className="navigation__link"
-              activeClassName="navigation__link--active"
-              to={ `/${link.url}` }>
-              { link.title }
-            </Link>
-          ))
-        }
-      </nav>
+        <nav className="navigation__links">
+          {
+            pages.map((link, i) => (
+              <Link
+                key={ `navigation__link${i}` }
+                className="navigation__link"
+                activeClassName="navigation__link--active"
+                to={ `/${link.url}` }>
+                { link.title }
+              </Link>
+            ))
+          }
+        </nav>
+      </div>
     </Container>
   </div>
 );
diff --git a/components/Page.jsx b/components/Page.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import Link from './Link';
 import Container from './Container';
 import Sidebar from './Sidebar';
 import Contributors from './Contributors';
 
 export default props => {
-  let { section, page } = props,
-      edit = `https://github.com/webpack/webpack.js.org/edit/master/content/${page.url}.md`;
+  let { config, section, page } = props;
+
+  let edit = `https://github.com/webpack/webpack.js.org/edit/master/content/${page.url}.md`;
 
   return (
     <Container className="page">
-      <Sidebar sectionName={section.name} pages={ section.pages() } />
+      <Sidebar paths={config.paths} sectionName={section.name} pages={ section.pages() } />
       <section className="page__content">
         <h1>{ page.title }</h1>
 
@@ -20,7 +20,7 @@ export default props => {
         </a>
 
         <div dangerouslySetInnerHTML={{ __html: page.content }} />
-        
+
         <hr />
 
         <Contributors contributors={ page.contributors } />

diff --git a/components/Sidebar.jsx b/components/Sidebar.jsx
@@ -1,34 +1,44 @@
 import React from 'react';
 import Link from './Link';
 
-const Sidebar = ({ sectionName, pages }) => (
-  <nav className="sidebar">
-    <Item url={ `/${sectionName}` } title="Introduction" />
+const Sidebar = ({ paths, sectionName, pages }) => {
+  // console.log('paths:', Object.keys(paths).map((key) => {
+  //   console.log(paths[key]);
+  //   return paths[key].title;
+  // }));
 
-    {
-      pages.map(({ url, title }, i) =>
-        <Item 
-          key={ `sidebar-item-${i}` } 
-          url={ `/${url}` } 
-          title={ title } />
-      )
-    }
-  </nav>
-);
+  return (
+    <nav className="sidebar">
+      <div className="sidebar__inner">
+      <Item url={ `/${sectionName}` } title="Introduction" />
+      {
+        pages.map(({ url, title }, i) =>
+          <Item
+            key={ `sidebar-item-${i}` }
+            index={i}
+            url={ `/${url}` }
+            title={ title }
+          />
+        )
+      }
+      </div>
+    </nav>
+  );
+};
 
-const Item = ({ url, title }) => (
+const Item = ({ index, url, title }) => (
   <div className="sidebar-item">
     <Link className="sidebar-item__title" to={ url }>{ title }</Link>
     <i className="sidebar-item__toggle icon-chevron-down" />
     <ul className="sidebar-item__sections">
       {/*
-        page.sections.map((section, j) => (
-          <li className="sidebar-item-section"
-              key={ `sidebar-item-${i}-section-${j}` }>
-            <Link to={ `/${page.url}#${section.id}` }>{ section.title }</Link>
-          </li>
-        )) : ''
-      */}
+       sections.map((section, j) => (
+       <li className="sidebar-item-section"
+       key={ `sidebar-item-${index}-section-${j}` }>
+       <Link to={ `/${url}#${section.id}` }>{ section.title }</Link>
+       </li>
+       ))*/
+      }
     </ul>
   </div>
 );

diff --git a/components/Site.jsx b/components/Site.jsx
@@ -12,15 +12,37 @@ const pages = [
   { title: 'Github', url: '//github.com/webpack/webpack.js.org' }
 ];
 
-export default ({ children }) => {
-  return (
-    <div className="site">
-      <Navigation home="/" pages={ pages } />
-      <Sidecar />
-      { children }
-      <Footer />
-
-      <GoogleAnalytics analyticsId="UA-46921629-2" />
-    </div>
-  );
-};
+export default class Site extends React.Component {
+  constructor () {
+    super();
+
+    this.state = {
+      navDisplayed: false
+    };
+
+    this.onToggleNav = () => {
+      this.setState({navDisplayed: !this.state.navDisplayed});
+    };
+  }
+
+  componentWillUpdate (nextProps) {
+    console.log(nextProps);
+  }
+
+  render () {
+    let { children } = this.props;
+
+    const cls = this.state.navDisplayed ? 'site nav-displayed' : 'site';
+
+    return (
+      <div className={cls}>
+        <Navigation home="/" pages={ pages } onToggleNav={this.onToggleNav} />
+        <Sidecar />
+        { children }
+        <Footer />
+
+        <GoogleAnalytics analyticsId="UA-46921629-2" />
+      </div>
+    );
+  }
+}
diff --git a/content/configuration/output.md b/content/configuration/output.md
@@ -13,7 +13,7 @@ The top-level `output` key contains set of options instructing webpack on how an
 
 The output directory as an **absolute** path.
 
-``` js
+```js
 path: path.resolve(__dirname, 'dist/assets')
 ```
 
@@ -34,14 +34,14 @@ The default value is an empty string `""`.
 
 Simple rule: The URL of your [`output.path`](#output-path) from the view of the HTML page.
 
-``` js
+```js
 path: path.resolve(__dirname, "public/assets"),
 publicPath: "https://cdn.example.com/assets/"
 ```
 
 For this configuration:
 
-``` js
+```js
 publicPath: "/assets/",
 chunkFilename: "[id].chunk.js"
 ```
@@ -50,13 +50,13 @@ A request to a chunk will look like `/assets/4.chunk.js`.
 
 A loader outputting HTML might emit something like this:
 
-``` html
+```html
 <link href="/assets/spinner.gif" />
 ```
 
 or when loading an image in CSS:
 
-``` css
+```css
 background-image: url(/assets/spinner.gif);
 ```
 

diff --git a/package.json b/package.json
@@ -24,12 +24,14 @@
     "start": "node ./bootstrap.js",
     "build": "node ./bootstrap.js && npm run sitemap && echo webpack.js.org > build/CNAME",
     "deploy": "gh-pages -d build",
-    "lint": "eslint . --ext .js --ext .jsx --ext .md",
-    "markdownlint": "markdownlint --config ./.markdownlintrc **/*.md *.md ./content/**/*.md",
-    "sociallint": "alex ./**/*.md",
-    "test": "npm run sociallint && npm run markdownlint && npm run lint ",
-    "sitemap": "cd build && sitemap-static --prefix=https://webpack.js.org/ > sitemap.xml",
-    "proselint": "cp .proselintrc ~/ && proselint"
+    "lint": "run-s lint:*",
+    "lint:js": "eslint . --ext .js --ext .jsx",
+    "lint:md": "eslint . --ext .md",
+    "lint:markdown": "markdownlint --config ./.markdownlintrc **/*.md *.md ./content/**/*.md",
+    "lint:social": "alex ./**/*.md",
+    "lint:prose": "cp .proselintrc ~/ && proselint",
+    "test": "npm run lint ",
+    "sitemap": "cd build && sitemap-static --prefix=https://webpack.js.org/ > sitemap.xml"
   },
   "devDependencies": {
     "alex": "^3.1.0",
@@ -39,12 +41,12 @@
     "autoprefixer": "^6.3.7",
     "babel-core": "^6.10.4",
     "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
-    "css-loader": "^0.23.1",
-    "eslint": "3.0.1",
-    "eslint-loader": "^1.4.1",
+    "css-loader": "^0.25.0",
+    "eslint": "3.6.0",
+    "eslint-loader": "^1.5.0",
     "eslint-plugin-markdown": "^1.0.0-beta.2",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
@@ -55,26 +57,27 @@
     "markdown-loader": "^0.1.7",
     "markdownlint": "^0.2.0",
     "markdownlint-cli": "^0.2.0",
-    "marked": "^0.3.5",
+    "marked": "^0.3.6",
     "modularscale-sass": "^2.1.1",
-    "moment": "^2.14.1",
-    "node-sass": "^3.8.0",
-    "postcss-loader": "^0.9.1",
+    "moment": "^2.15.1",
+    "node-sass": "^3.9.3",
+    "npm-run-all": "^3.1.0",
+    "postcss-loader": "^0.13.0",
     "prism-languages": "^0.3.1",
     "prismjs": "^1.5.1",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^4.0.0",
+    "sass-loader": "^4.0.2",
     "sitemap-static": "^0.3.1",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.16.1",
-    "webpack-merge": "^0.14.0",
+    "webpack-merge": "^0.14.1",
     "yaml-frontmatter-loader": "0.0.3"
   },
   "dependencies": {
-    "react": "^15.2.1",
-    "react-dom": "^15.2.1",
-    "react-router": "^2.5.2"
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-router": "^2.8.1"
   }
 }
diff --git a/styles/_mixins.scss b/styles/_mixins.scss
@@ -0,0 +1,5 @@
+@mixin break ($size: medium) {
+  @media (min-width: map-get($screens, $size)) {
+    @content;
+  }
+}
diff --git a/styles/_vars.scss b/styles/_vars.scss
@@ -16,5 +16,6 @@ $colors: (
 );
 
 $screens: (
-  large: 1024px
+  large: 1024px,
+  medium: 768px
 );