Feature/rwd

.eslintrc

@@ -13,7 +13,7 @@
  "markdown"
  ],
 
- rules: {
+ "rules": {
  "no-undef": 2,
  "no-unreachable": 2,
  "no-unused-vars": 0,

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: {

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>
  );
-};
+};

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>
  );
 };

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>
 );

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

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>
 );

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>
+ );
+ }
+}

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);
 ```
 

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"
  }
 }

styles/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin break ($size: medium) {
+ @media (min-width: map-get($screens, $size)) {
+ @content;
+ }
+}

styles/_vars.scss

@@ -16,5 +16,6 @@ $colors: (
 );
 
 $screens: (
- large: 1024px
+ large: 1024px,
+ medium: 768px
 );