From a087607e4f5e3a7152df265100b035f59621cf19 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Fri, 24 Jun 2016 20:34:05 -0400 Subject: [PATCH 0001/5419] Ignoring node_modules and build directory --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000000..eb58b877266 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +dist/build \ No newline at end of file From 30d55f3d668c314cdbfb79c9769af148da566043 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 25 Jun 2016 19:57:02 -0400 Subject: [PATCH 0002/5419] Adding the Icon component (copied and reworked from http://codepen.io/gvenech/pen/OXNEbZ) --- src/components/icon/icon-style.scss | 85 ++++++++++++++++ src/components/icon/icon.js | 146 ++++++++++++++++++++++++++++ 2 files changed, 231 insertions(+) create mode 100644 src/components/icon/icon-style.scss create mode 100644 src/components/icon/icon.js diff --git a/src/components/icon/icon-style.scss b/src/components/icon/icon-style.scss new file mode 100644 index 00000000000..63e62ff6dbe --- /dev/null +++ b/src/components/icon/icon-style.scss @@ -0,0 +1,85 @@ +// Styling for the Icon component + +@import 'utilities/scss/partials/colors'; + +.icon { + position:relative; + display:inline-block; + transform-style:preserve-3d; + transform:rotateX(-33.5deg) rotateY(45deg); + + &-cube { + display:inline-block; + transform-style:preserve-3d; + transition:transform 750ms; + + &.-inner { + position:absolute; + top:0; left:0; + } + + &-face { + position:absolute; + width:100%; + height:100%; + backface-visibility:hidden; + background:radial-gradient(transparent 30%,rgba(5,17,53,.2) 100%); + + &:after { + content:''; + position:absolute; + display:block; + width:100%; + height:100%; + backface-visibility:hidden; + transition:background 750ms; + } + } + } + + // Default Theme + &.-default { + .icon-cube.-outer .icon-cube-face:after { + background:rgba(126, 169, 232, .5); + } + + .icon-cube.-inner .icon-cube-face:after { + background:rgba(16, 58, 177, .4); + } + + &:hover { + .icon-cube.-outer .icon-cube-face:after { + background:transparentize(#333333, 0.8); + } + + .icon-cube.-inner .icon-cube-face:after { + background:transparentize(#f39c12, 0.4); + } + } + } + + // Light Theme + &.-light { + .icon-cube.-outer .icon-cube-face:after { + background:transparentize(map-get($colors, concrete), 0.8); + } + + .icon-cube.-inner .icon-cube-face:after { + background:transparentize(map-get($colors, tussock), 0.4); + } + + &:hover { + .icon-cube.-outer .icon-cube-face:after { + background:transparentize(map-get($colors, white), 0.8); + } + + .icon-cube.-inner .icon-cube-face:after { + background:transparentize(map-get($colors, lynch), 0.6); + } + } + } +} + + + + diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js new file mode 100644 index 00000000000..f4e90448e9a --- /dev/null +++ b/src/components/icon/icon.js @@ -0,0 +1,146 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Load Styling +import './icon-style' + +// Export the "Icon" component +// TODO: Consider breaking 'icon-cube' into its own component +export default class Icon extends Component { + constructor(props) { + super(props) + + this.listeners = { + spin: this._spin.bind(this), + reset: this._reset.bind(this) + } + + this.state = { + x: 0, + y: 0, + z: 0 + } + } + + render() { + let { x, y, z } = this.state, + { theme, depth } = this.props + + return ( + this.container = ref } + className={ `icon -${theme}` } + style={{ + width: `${depth}px`, + 'margin-left': `${depth * 0.5}px`, + 'padding-bottom': `${depth * 0.3}px` + }}> +
+ { this._getFaces() } +
+
+ { this._getFaces() } +
+
+ ) + } + + componentDidMount() { + this.container.addEventListener('mouseenter', this.listeners.spin) + this.container.addEventListener('mouseleave', this.listeners.reset) + } + + componentWillUnmount() { + this.container.removeEventListener('mouseenter', this.listeners.spin) + this.container.removeEventListener('mouseleave', this.listeners.reset) + } + + /** + * Get all faces for a cube + * + * @return {array} - An array of nodes + */ + _getFaces() { + return [ + 'rotateX(0deg)', + 'rotateX(-90deg)', + 'rotateX(90deg)', + 'rotateY(-90deg)', + 'rotateY(90deg)', + 'rotateY(180deg)' + ].map((rotation, i) => { + return
+ }) + } + + /** + * Get a random axis + * + * @return {string} - A random axis (i.e. x, y, or z) + */ + _getRandomAxis() { + let axes = Object.keys(this.state) + + return axes[ Math.floor(Math.random() * axes.length) ] + } + + /** + * Spin the cubes in opposite directions semi-randomly + * + * @param {object} e - Native event + */ + _spin(e) { + let obj = {}, + axis = this._getRandomAxis(), + sign = Math.random() < 0.5 ? -1 : 1 + + obj[axis] = sign * 90 + + this.setState(obj) + } + + /** + * Rotate the cubes back to their original position + * + * @param {object} e - Native event + */ + _reset(e) { + this.setState({ + x: 0, + y: 0, + z: 0 + }) + } +} + +// Check incoming props for issues +Icon.propTypes = { + +} + +// Set up defaults +Icon.defaultProps = { + theme: 'default', + depth: 30 +} + + + From f7f45d8a85e09b5d25c379ec3e1d92e3978097c5 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 25 Jun 2016 19:57:51 -0400 Subject: [PATCH 0003/5419] Adding a Container component --- src/components/container/container-style.scss | 6 ++++++ src/components/container/container.js | 17 +++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 src/components/container/container-style.scss create mode 100644 src/components/container/container.js diff --git a/src/components/container/container-style.scss b/src/components/container/container-style.scss new file mode 100644 index 00000000000..78d1e024f35 --- /dev/null +++ b/src/components/container/container-style.scss @@ -0,0 +1,6 @@ +// Styling for the Container component + +.container { + width: 1280px; + margin: 0 auto; +} \ No newline at end of file diff --git a/src/components/container/container.js b/src/components/container/container.js new file mode 100644 index 00000000000..2cef4d5831a --- /dev/null +++ b/src/components/container/container.js @@ -0,0 +1,17 @@ +// Import Dependencies +import React from 'react' + +// Load Styling +import './container-style' + +// Create the "Container" component +let Container = props => { + return ( +
+ { props.children } +
+ ) +} + +// Export it +export default Container From 35f56bb67cc40a7d7690c243b74a8b132b152720 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 25 Jun 2016 19:58:15 -0400 Subject: [PATCH 0004/5419] Adding the Logo component --- src/components/logo/logo-style.scss | 24 ++++++++++++++++++++++++ src/components/logo/logo.js | 21 +++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 src/components/logo/logo-style.scss create mode 100644 src/components/logo/logo.js diff --git a/src/components/logo/logo-style.scss b/src/components/logo/logo-style.scss new file mode 100644 index 00000000000..7edd07c15b2 --- /dev/null +++ b/src/components/logo/logo-style.scss @@ -0,0 +1,24 @@ +// Styling for the Logo + +@import url(https://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300); +@import 'utilities/scss/partials/colors'; + +.logo { + cursor:pointer; + + &-text { + font-size:1.3em; + font-family:'Averia Sans Libre'; + margin-left:0.25em; + vertical-align:text-bottom; + transition:color 250ms; + + &.-dark { color:map-get($colors, dove-grey); } + &.-light { color:map-get($colors, concrete); } + } + + &:hover .logo-text { + &.-dark { color:map-get($colors, mine-shaft); } + &.-light { color:map-get($colors, white); } + } +} \ No newline at end of file diff --git a/src/components/logo/logo.js b/src/components/logo/logo.js new file mode 100644 index 00000000000..24618a6aa81 --- /dev/null +++ b/src/components/logo/logo.js @@ -0,0 +1,21 @@ +// Import Dependencies +import React from 'react' + +// Import Components +import Icon from 'Components/icon/icon' + +// Load Styling +import './logo-style' + +// Create the "Logo" component +let Logo = props => { + return ( + + + Webpack + + ) +} + +// Export it +export default Logo From 53e4e4b45fefd135d9773d33dcac68cf119bc099 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 25 Jun 2016 19:58:46 -0400 Subject: [PATCH 0005/5419] Adding some base/utility stylesheets and partials --- src/utilities/scss/partials/_colors.scss | 17 +++++++++++++++++ src/utilities/scss/partials/_screens.scss | 5 +++++ src/utilities/scss/reset.scss | 4 ++++ 3 files changed, 26 insertions(+) create mode 100644 src/utilities/scss/partials/_colors.scss create mode 100644 src/utilities/scss/partials/_screens.scss create mode 100644 src/utilities/scss/reset.scss diff --git a/src/utilities/scss/partials/_colors.scss b/src/utilities/scss/partials/_colors.scss new file mode 100644 index 00000000000..acbd3bb2fd4 --- /dev/null +++ b/src/utilities/scss/partials/_colors.scss @@ -0,0 +1,17 @@ +// Webpack Color Scheme + +$colors: ( + regent: #8a929d, + lynch: #617693, + chambray: #31517e, + chatham: #12396e, + parchment: #efe3d0, + calico: #dfc08b, + tussock: #c0903f, + white: #ffffff, + concrete: #f2f2f2, + alto: #dedede, + dusty-grey: #999999, + dove-grey: #666666, + mine-shaft: #333333 +); \ No newline at end of file diff --git a/src/utilities/scss/partials/_screens.scss b/src/utilities/scss/partials/_screens.scss new file mode 100644 index 00000000000..d06503439af --- /dev/null +++ b/src/utilities/scss/partials/_screens.scss @@ -0,0 +1,5 @@ +// Screen Sizes + +$screens: ( + +); \ No newline at end of file diff --git a/src/utilities/scss/reset.scss b/src/utilities/scss/reset.scss new file mode 100644 index 00000000000..ab173a7e2a8 --- /dev/null +++ b/src/utilities/scss/reset.scss @@ -0,0 +1,4 @@ +/* Reset */ + +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} +*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } \ No newline at end of file From e4d135a8ad0c90a6d9fb1c655a712e9452ac161f Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 25 Jun 2016 19:59:12 -0400 Subject: [PATCH 0006/5419] Adding the Banner component (still fairly empty) --- src/components/banner/banner-style.scss | 13 +++++++++++++ src/components/banner/banner.js | 23 +++++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 src/components/banner/banner-style.scss create mode 100644 src/components/banner/banner.js diff --git a/src/components/banner/banner-style.scss b/src/components/banner/banner-style.scss new file mode 100644 index 00000000000..f874c31bdf3 --- /dev/null +++ b/src/components/banner/banner-style.scss @@ -0,0 +1,13 @@ +// Styling for the Banner component + +@import 'utilities/scss/partials/colors'; + +.banner { + min-width: 1280px; + background: map-get($colors, mine-shaft); + + &-inner { + padding:0.5em 1em; + box-sizing:border-box; + } +} \ No newline at end of file diff --git a/src/components/banner/banner.js b/src/components/banner/banner.js new file mode 100644 index 00000000000..a6256a8e83d --- /dev/null +++ b/src/components/banner/banner.js @@ -0,0 +1,23 @@ +// Import Dependencies +import React from 'react' + +// Import Components +import Container from 'Components/container/container' +import Logo from 'Components/logo/logo' + +// Load Styling +import './banner-style' + +// Create the Banner component +let Banner = props => { + return ( +
+ + + +
+ ) +} + +// Export it +export default Banner From 97d461888df62b8a783aaf62f105957108c74ec3 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 25 Jun 2016 19:59:54 -0400 Subject: [PATCH 0007/5419] Adding the Splash component (for the homepage of the site, also still fairly empty) --- src/components/splash/splash.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/splash/splash.js diff --git a/src/components/splash/splash.js b/src/components/splash/splash.js new file mode 100644 index 00000000000..00b8b47a8ed --- /dev/null +++ b/src/components/splash/splash.js @@ -0,0 +1,19 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components +import Banner from 'Components/banner/banner' + +// Load Styling + + +// Export the "Splash" component +export default class Splash extends Component { + render() { + return ( +
+ +
+ ) + } +} \ No newline at end of file From 52fedf780dc19d788545f9101ba78e0e52fca794 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 25 Jun 2016 20:00:24 -0400 Subject: [PATCH 0008/5419] Adding the distribution directory --- dist/favicon.ico | Bin 0 -> 32038 bytes dist/index.html | 16 ++++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 dist/favicon.ico create mode 100644 dist/index.html diff --git a/dist/favicon.ico b/dist/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8015848c9704632265b63e81937c9c37c56ce67f GIT binary patch literal 32038 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 J-~Y!P_ + + + + + Webpack + + + + + +
+ + + + \ No newline at end of file From cf28783bab5962d51d0121452b586bd4c3669906 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 26 Jun 2016 09:09:37 -0400 Subject: [PATCH 0009/5419] Setting up the package --- package.json | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 00000000000..db0381ba8b8 --- /dev/null +++ b/package.json @@ -0,0 +1,51 @@ +{ + "name": "webpack.io", + "version": "0.0.0", + "private": true, + "description": "The main site for all things Webpack.", + "homepage": "https://github.com/webpack/webpack.io", + "author": "Greg Venech", + "license": "ISC", + "main": "n/a", + "keywords": [ + "webpack", + "documentation", + "build", + "tool" + ], + + "repository": { + "type": "git", + "url": "https://github.com/webpack/webpack.io.git" + }, + + "bugs": { + "url": "https://github.com/webpack/webpack.io/issues" + }, + + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "sudo webpack -p", + "dev-server": "sudo webpack-dev-server" + }, + + "devDependencies": { + "babel-core": "^6.10.4", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.9.0", + "babel-preset-react": "^6.5.0", + "babel-preset-stage-0": "^6.5.0", + "babel-register": "^6.9.0", + "css-loader": "^0.23.1", + "node-sass": "^3.8.0", + "sass-loader": "^3.2.1", + "style-loader": "^0.13.1", + "webpack": "^1.13.1", + "webpack-dev-server": "^1.14.1" + }, + + "dependencies": { + "react": "^15.1.0", + "react-dom": "^15.1.0" + } +} From a6d92f0cdae942a57207a9267551f01c22245832 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 26 Jun 2016 09:10:02 -0400 Subject: [PATCH 0010/5419] Setting up babel config --- .babelrc | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000000..568c8303085 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + presets: [ 'es2015', 'react', 'stage-0' ] +} \ No newline at end of file From 6c4f5df56c779e89dab4ad1b940f75cf2ff97826 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 26 Jun 2016 09:10:52 -0400 Subject: [PATCH 0011/5419] Adding the webpack.config transpired from ES6 --- config/dev-config.js | 50 ++++++++++++++++++++++++++++++++++++++++++++ webpack.config.js | 5 +++++ 2 files changed, 55 insertions(+) create mode 100644 config/dev-config.js create mode 100644 webpack.config.js diff --git a/config/dev-config.js b/config/dev-config.js new file mode 100644 index 00000000000..4c561b15ba7 --- /dev/null +++ b/config/dev-config.js @@ -0,0 +1,50 @@ +// Import Dependencies +import Path from 'path' +import Webpack from 'webpack' + +// Export the dev configuration +export default { + context: Path.resolve('./src'), + entry: { + index: './app' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, + { test: /\.scss$/, loader: 'style!css!sass' } + ] + }, + + sassLoader: { + includePaths: [ + Path.resolve('./src') + ] + }, + + resolve: { + root: Path.resolve('./node_modules'), + extensions: [ '.js', '.scss', '' ], + alias: { + Components: Path.resolve('./src/components'), + Utilities: Path.resolve('./src/utilities') + } + }, + + resolveLoader: { + root: Path.resolve('./node_modules') + }, + + devServer: { + port: 8080, + inline: true, + compress: true, + contentBase: 'dist/' + }, + + output: { + path: '/dist/build', + publicPath: '/build/', + filename: '[name].bundle.js' + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 00000000000..84b7d889b9f --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,5 @@ +// Use Babel to transpile all future requires +require('babel-register'); + +// Transpile and export the dev configuration +module.exports = require('./config/dev-config.js').default; \ No newline at end of file From df8bbde72e8bb52ba2bb91a11f026d36344a727c Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 26 Jun 2016 09:11:56 -0400 Subject: [PATCH 0012/5419] Adding the initial entry point ("npm run build" or "dev-server" can now be run without issue) --- src/app.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/app.js diff --git a/src/app.js b/src/app.js new file mode 100644 index 00000000000..c22de2b209b --- /dev/null +++ b/src/app.js @@ -0,0 +1,14 @@ +// Import Dependencies +import React from 'react' +import ReactDOM from 'react-dom' + +// Import Components +import Splash from 'Components/splash/splash' + +// Load Base Styling +import 'Utilities/scss/reset' + +// +ReactDOM.render(( + +), document.getElementById('root')) From 66991668da1a60f79d565c789d446acc67a4e827 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 26 Jun 2016 09:41:46 -0400 Subject: [PATCH 0013/5419] Adding a simple README for the time being --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 00000000000..ff65562474b --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ +## Webpack.io + +Guides, documentation, and all things Webpack. + +## Contributing + +To develop, please pull the project, `cd` into the directory and run: + +- `npm install` to pull all dependencies. +- `npm run build` to create a production version of the site. +- `npm run dev-server` to develop on a local webpack-dev-server (should be [here](http://localhost:8080/)). From 35460ee58c958e71f7322e420b561d4d9e702cc1 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 26 Jun 2016 23:14:25 -0400 Subject: [PATCH 0014/5419] npm doesn't like my spacing --- package.json | 5 ----- 1 file changed, 5 deletions(-) diff --git a/package.json b/package.json index db0381ba8b8..030332338f2 100644 --- a/package.json +++ b/package.json @@ -13,22 +13,18 @@ "build", "tool" ], - "repository": { "type": "git", "url": "https://github.com/webpack/webpack.io.git" }, - "bugs": { "url": "https://github.com/webpack/webpack.io/issues" }, - "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "sudo webpack -p", "dev-server": "sudo webpack-dev-server" }, - "devDependencies": { "babel-core": "^6.10.4", "babel-loader": "^6.2.4", @@ -43,7 +39,6 @@ "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" }, - "dependencies": { "react": "^15.1.0", "react-dom": "^15.1.0" From 18b7f14d686b76775d1b5de763423d121bc28f0b Mon Sep 17 00:00:00 2001 From: Tobias Koppers Date: Tue, 28 Jun 2016 00:57:43 +0200 Subject: [PATCH 0015/5419] added some documentation content notes --- src/content/feature-guides/caching.md | 2 + src/content/feature-guides/code-splitting.md | 8 +++ src/content/feature-guides/compatiblity.md | 8 +++ src/content/feature-guides/dependencies.md | 3 + .../feature-guides/development-tools.md | 3 + .../feature-guides/dynamic-dependencies.md | 3 + src/content/feature-guides/entry-points.md | 3 + .../feature-guides/library-and-externals.md | 4 ++ src/content/feature-guides/output.md | 9 +++ .../feature-guides/production-build.md | 0 src/content/feature-guides/resolving.md | 2 + src/content/feature-guides/shimming.md | 5 ++ src/content/feature-guides/target.md | 7 +++ .../getting-started/getting-started.md | 7 +++ src/content/index.md | 61 +++++++++++++++++++ src/content/support/build-performance.md | 11 ++++ src/content/support/changelog.md | 0 src/content/support/common-problems.md | 0 src/content/support/faq.md | 0 .../support/upgrading-from-older-version.md | 0 src/content/usage/using-loaders.md | 2 + src/content/usage/using-plugins.md | 1 + src/content/usage/using-the-api.md | 4 ++ src/content/usage/using-the-cli.md | 5 ++ src/content/usage/using-the-configuration.md | 7 +++ .../usage/using-watch-and-dev-server.md | 5 ++ 26 files changed, 160 insertions(+) create mode 100644 src/content/feature-guides/caching.md create mode 100644 src/content/feature-guides/code-splitting.md create mode 100644 src/content/feature-guides/compatiblity.md create mode 100644 src/content/feature-guides/dependencies.md create mode 100644 src/content/feature-guides/development-tools.md create mode 100644 src/content/feature-guides/dynamic-dependencies.md create mode 100644 src/content/feature-guides/entry-points.md create mode 100644 src/content/feature-guides/library-and-externals.md create mode 100644 src/content/feature-guides/output.md create mode 100644 src/content/feature-guides/production-build.md create mode 100644 src/content/feature-guides/resolving.md create mode 100644 src/content/feature-guides/shimming.md create mode 100644 src/content/feature-guides/target.md create mode 100644 src/content/getting-started/getting-started.md create mode 100644 src/content/index.md create mode 100644 src/content/support/build-performance.md create mode 100644 src/content/support/changelog.md create mode 100644 src/content/support/common-problems.md create mode 100644 src/content/support/faq.md create mode 100644 src/content/support/upgrading-from-older-version.md create mode 100644 src/content/usage/using-loaders.md create mode 100644 src/content/usage/using-plugins.md create mode 100644 src/content/usage/using-the-api.md create mode 100644 src/content/usage/using-the-cli.md create mode 100644 src/content/usage/using-the-configuration.md create mode 100644 src/content/usage/using-watch-and-dev-server.md diff --git a/src/content/feature-guides/caching.md b/src/content/feature-guides/caching.md new file mode 100644 index 00000000000..e59026d8c09 --- /dev/null +++ b/src/content/feature-guides/caching.md @@ -0,0 +1,2 @@ +> https://gist.github.com/sokra/ff1b0290282bfa2c037bdb6dcca1a7aa +> [hash], [chunkhash], CommonsChunkPlugin, NamedModulesPlugin, HashedModuleIdsPlugin, records diff --git a/src/content/feature-guides/code-splitting.md b/src/content/feature-guides/code-splitting.md new file mode 100644 index 00000000000..ff26e63a903 --- /dev/null +++ b/src/content/feature-guides/code-splitting.md @@ -0,0 +1,8 @@ +> what is code splitting +> System.import +> dynamic System.import +> require.ensure +> AMD require + +> see also [[Output]] +> see also [[dynamic dependencies]] \ No newline at end of file diff --git a/src/content/feature-guides/compatiblity.md b/src/content/feature-guides/compatiblity.md new file mode 100644 index 00000000000..10ea51862b6 --- /dev/null +++ b/src/content/feature-guides/compatiblity.md @@ -0,0 +1,8 @@ +> require.main +> require.cache +> module.loaded +> global +> process +> __dirname +> __filename +> module.id diff --git a/src/content/feature-guides/dependencies.md b/src/content/feature-guides/dependencies.md new file mode 100644 index 00000000000..f33c64e285a --- /dev/null +++ b/src/content/feature-guides/dependencies.md @@ -0,0 +1,3 @@ +> es6 modules +> commonjs +> amd diff --git a/src/content/feature-guides/development-tools.md b/src/content/feature-guides/development-tools.md new file mode 100644 index 00000000000..ea5196c9aaf --- /dev/null +++ b/src/content/feature-guides/development-tools.md @@ -0,0 +1,3 @@ +> devtool +> output.pathinfo +> hot module replacement diff --git a/src/content/feature-guides/dynamic-dependencies.md b/src/content/feature-guides/dynamic-dependencies.md new file mode 100644 index 00000000000..9687771f04b --- /dev/null +++ b/src/content/feature-guides/dynamic-dependencies.md @@ -0,0 +1,3 @@ +> require with expression +> require.context +> diff --git a/src/content/feature-guides/entry-points.md b/src/content/feature-guides/entry-points.md new file mode 100644 index 00000000000..10e3546609c --- /dev/null +++ b/src/content/feature-guides/entry-points.md @@ -0,0 +1,3 @@ +> single entry +> array entry +> multiple entries diff --git a/src/content/feature-guides/library-and-externals.md b/src/content/feature-guides/library-and-externals.md new file mode 100644 index 00000000000..15b828b853e --- /dev/null +++ b/src/content/feature-guides/library-and-externals.md @@ -0,0 +1,4 @@ +> library option +> externals option + +> see also [[Output]] \ No newline at end of file diff --git a/src/content/feature-guides/output.md b/src/content/feature-guides/output.md new file mode 100644 index 00000000000..224532859e0 --- /dev/null +++ b/src/content/feature-guides/output.md @@ -0,0 +1,9 @@ +> output.path +> output.filename +> output.publicPath +> output.chunkFilename +> output.jsonpFunction +> ... + +> see also [[library and externals]] +> see also [[Development Tools]] diff --git a/src/content/feature-guides/production-build.md b/src/content/feature-guides/production-build.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/content/feature-guides/resolving.md b/src/content/feature-guides/resolving.md new file mode 100644 index 00000000000..47301cb2d02 --- /dev/null +++ b/src/content/feature-guides/resolving.md @@ -0,0 +1,2 @@ +> how webpack resolves requests +> incl. resolving options diff --git a/src/content/feature-guides/shimming.md b/src/content/feature-guides/shimming.md new file mode 100644 index 00000000000..6af33ab98b6 --- /dev/null +++ b/src/content/feature-guides/shimming.md @@ -0,0 +1,5 @@ +> import-loader +> exports-loader +> expose-loader +> ProvidePlugin +> script-loader \ No newline at end of file diff --git a/src/content/feature-guides/target.md b/src/content/feature-guides/target.md new file mode 100644 index 00000000000..dd9baa0857c --- /dev/null +++ b/src/content/feature-guides/target.md @@ -0,0 +1,7 @@ +> webworker +> node +> async-node +> node-webkit +> electron +> electron-main +> electron-renderer diff --git a/src/content/getting-started/getting-started.md b/src/content/getting-started/getting-started.md new file mode 100644 index 00000000000..359d28113b5 --- /dev/null +++ b/src/content/getting-started/getting-started.md @@ -0,0 +1,7 @@ +> installation +> compile a single file +> compile two files +> reference a npm module +> create a configuration file + +> see also [[Using the CLI]], [[Using the configuration]] \ No newline at end of file diff --git a/src/content/index.md b/src/content/index.md new file mode 100644 index 00000000000..07ea6f65923 --- /dev/null +++ b/src/content/index.md @@ -0,0 +1,61 @@ +# webpack documentation + +... + +## Getting started + +[[Getting started]] + +## Usage + +[[Using the CLI]] + +[[Using the configuration]] + +[[Using the API]] + +[[Using loaders]] + +[[Using plugins]] + +[[Using watch and dev server]] + +## Feature guides + +[[Entry points]] + +[[Dependencies]] + +[[Resolving]] + +[[Dynamic dependencies]] + +[[Code Splitting]] + +[[Output]] + +[[Development Tools]] + +[[Library and externals]] + +[[Caching]] + +[[Shimming]] + +[[Compatiblity]] + +[[Target]] + +[[Production Build]] + +## Support + +[[Common problems]] + +[[Build performance]] + +[[FAQ]] + +[[Upgrading from older version]] + +[[Changelog]] diff --git a/src/content/support/build-performance.md b/src/content/support/build-performance.md new file mode 100644 index 00000000000..710a150cecb --- /dev/null +++ b/src/content/support/build-performance.md @@ -0,0 +1,11 @@ +> incremental builds +> profile +> analyse tool +> dirty chunks ([chunkhash]) +> source maps +> PrefetchPlugin +> resolving +> DllPlugin + +> see also [[devepment tools]] +> see also [[resolving]] \ No newline at end of file diff --git a/src/content/support/changelog.md b/src/content/support/changelog.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/content/support/common-problems.md b/src/content/support/common-problems.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/content/support/faq.md b/src/content/support/faq.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/content/support/upgrading-from-older-version.md b/src/content/support/upgrading-from-older-version.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/content/usage/using-loaders.md b/src/content/usage/using-loaders.md new file mode 100644 index 00000000000..602baf50302 --- /dev/null +++ b/src/content/usage/using-loaders.md @@ -0,0 +1,2 @@ +> module.loaders configuration option +> test, include, exclude, loader, query diff --git a/src/content/usage/using-plugins.md b/src/content/usage/using-plugins.md new file mode 100644 index 00000000000..06bb1ad50eb --- /dev/null +++ b/src/content/usage/using-plugins.md @@ -0,0 +1 @@ +> plugins configuration option diff --git a/src/content/usage/using-the-api.md b/src/content/usage/using-the-api.md new file mode 100644 index 00000000000..d725584582c --- /dev/null +++ b/src/content/usage/using-the-api.md @@ -0,0 +1,4 @@ +> webpack() +> run() +> compile() +> watch() diff --git a/src/content/usage/using-the-cli.md b/src/content/usage/using-the-cli.md new file mode 100644 index 00000000000..62b946827dc --- /dev/null +++ b/src/content/usage/using-the-cli.md @@ -0,0 +1,5 @@ +> Cli call +> Cli options +> --config + +> see also [[Using the configuration]] diff --git a/src/content/usage/using-the-configuration.md b/src/content/usage/using-the-configuration.md new file mode 100644 index 00000000000..9338cb2b4a2 --- /dev/null +++ b/src/content/usage/using-the-configuration.md @@ -0,0 +1,7 @@ +> configuration file +> possible extensions, i. e. .babel.js +> exporting a function and --env +> returning a Promise +> exporting multiple configurations + +> see also [[Using the Cli]] diff --git a/src/content/usage/using-watch-and-dev-server.md b/src/content/usage/using-watch-and-dev-server.md new file mode 100644 index 00000000000..e0037901731 --- /dev/null +++ b/src/content/usage/using-watch-and-dev-server.md @@ -0,0 +1,5 @@ +> watch +> caching +> dev middleware +> in memory compilation +> dev server From 053dd62d779f81a88625072b31b335288f2d05ec Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:39:50 -0400 Subject: [PATCH 0016/5419] Adding an editorconfig for consistent formatting (upcoming commits will include reformatting) --- .editorconfig | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000000..3e74212fc8a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# Top-most EditorConfig file +root = true + +# Set default charset +[*.{js}] +charset = utf-8 + +# 4 space indentation +[*.{js,scss}] +indent_style = space +indent_size = 4 + +# Format Config +[{package.json}] +indent_style = space +indent_size = 4 \ No newline at end of file From bb361fb9f6e12303470c44f69eeea93c688826db Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:40:44 -0400 Subject: [PATCH 0017/5419] Reformatting and updating the config --- config/dev-config.js | 90 +++++++++++++++++++++++--------------------- 1 file changed, 47 insertions(+), 43 deletions(-) diff --git a/config/dev-config.js b/config/dev-config.js index 4c561b15ba7..ce8ea04d286 100644 --- a/config/dev-config.js +++ b/config/dev-config.js @@ -4,47 +4,51 @@ import Webpack from 'webpack' // Export the dev configuration export default { - context: Path.resolve('./src'), - entry: { - index: './app' - }, - - module: { - loaders: [ - { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, - { test: /\.scss$/, loader: 'style!css!sass' } - ] - }, - - sassLoader: { - includePaths: [ - Path.resolve('./src') - ] - }, - - resolve: { - root: Path.resolve('./node_modules'), - extensions: [ '.js', '.scss', '' ], - alias: { - Components: Path.resolve('./src/components'), - Utilities: Path.resolve('./src/utilities') - } - }, - - resolveLoader: { - root: Path.resolve('./node_modules') - }, - - devServer: { - port: 8080, - inline: true, - compress: true, - contentBase: 'dist/' - }, - - output: { - path: '/dist/build', - publicPath: '/build/', - filename: '[name].bundle.js' - } + target: 'web', + devtool: 'source-map', + + context: Path.resolve('./src'), + entry: { + index: './app' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, + { test: /\.scss$/, loader: 'style!css!sass' } + ] + }, + + sassLoader: { + includePaths: [ + Path.resolve('./src') + ] + }, + + resolve: { + root: Path.resolve('./node_modules'), + extensions: [ '.js', '.scss', '' ], + alias: { + Components: Path.resolve('./src/components'), + Utilities: Path.resolve('./src/utilities') + } + }, + + resolveLoader: { + root: Path.resolve('./node_modules') + }, + + devServer: { + port: 8080, + inline: true, + compress: true, + contentBase: 'dist/', + historyApiFallback: true + }, + + output: { + path: '/dist/build', + publicPath: '/build/', + filename: '[name].bundle.js' + } } \ No newline at end of file From 51bb660659ae4d40883c1067b9089cb257aa3f3e Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:43:20 -0400 Subject: [PATCH 0018/5419] Renaming the Splash => Frame and updating the app to use react-router (includes reformatting) --- package.json | 3 ++- src/app.js | 11 ++++++++--- src/components/frame/frame-style.scss | 7 +++++++ src/components/frame/frame.js | 20 ++++++++++++++++++++ src/components/splash/splash.js | 19 ------------------- 5 files changed, 37 insertions(+), 23 deletions(-) create mode 100644 src/components/frame/frame-style.scss create mode 100644 src/components/frame/frame.js delete mode 100644 src/components/splash/splash.js diff --git a/package.json b/package.json index 030332338f2..2fd733ab138 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ }, "dependencies": { "react": "^15.1.0", - "react-dom": "^15.1.0" + "react-dom": "^15.1.0", + "react-router": "^2.5.1" } } diff --git a/src/app.js b/src/app.js index c22de2b209b..8498fac7ecc 100644 --- a/src/app.js +++ b/src/app.js @@ -1,14 +1,19 @@ // Import Dependencies import React from 'react' import ReactDOM from 'react-dom' +import { Router, Route, IndexRoute, browserHistory } from 'react-router' // Import Components -import Splash from 'Components/splash/splash' +import Frame from 'Components/frame/frame' // Load Base Styling import 'Utilities/scss/reset' -// +// Create the site ReactDOM.render(( - + + + + + ), document.getElementById('root')) diff --git a/src/components/frame/frame-style.scss b/src/components/frame/frame-style.scss new file mode 100644 index 00000000000..57167c3e757 --- /dev/null +++ b/src/components/frame/frame-style.scss @@ -0,0 +1,7 @@ +// Styling for the Splash component + +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,700,400italic); + +.frame { + font:300 16px/1 'Open Sans', 'Century Gothic', sans-serif; +} \ No newline at end of file diff --git a/src/components/frame/frame.js b/src/components/frame/frame.js new file mode 100644 index 00000000000..5666b753b9c --- /dev/null +++ b/src/components/frame/frame.js @@ -0,0 +1,20 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components +import Banner from 'Components/banner/banner' +import Footer from 'Components/footer/footer' + +// Load Styling +import './frame-style' + +// Export the "Frame" component +export default props => { + return ( +
+ + { props.children } +
+
+ ) +} \ No newline at end of file diff --git a/src/components/splash/splash.js b/src/components/splash/splash.js deleted file mode 100644 index 00b8b47a8ed..00000000000 --- a/src/components/splash/splash.js +++ /dev/null @@ -1,19 +0,0 @@ -// Import Dependencies -import React, { Component } from 'react' - -// Import Components -import Banner from 'Components/banner/banner' - -// Load Styling - - -// Export the "Splash" component -export default class Splash extends Component { - render() { - return ( -
- -
- ) - } -} \ No newline at end of file From f6bb674532f116c97faa213b7a79855a67802a1c Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:44:57 -0400 Subject: [PATCH 0019/5419] Adding the modular-scale plugin and a proxy function to use it with a consistent base and ratio --- package.json | 1 + src/utilities/scss/partials/_functions.scss | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 src/utilities/scss/partials/_functions.scss diff --git a/package.json b/package.json index 2fd733ab138..51ebfb7de9e 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.9.0", "css-loader": "^0.23.1", + "modularscale-sass": "^2.1.1", "node-sass": "^3.8.0", "sass-loader": "^3.2.1", "style-loader": "^0.13.1", diff --git a/src/utilities/scss/partials/_functions.scss b/src/utilities/scss/partials/_functions.scss new file mode 100644 index 00000000000..6f9087cc99e --- /dev/null +++ b/src/utilities/scss/partials/_functions.scss @@ -0,0 +1,7 @@ +// Custom functions + +@import '~modularscale-sass/stylesheets/modular-scale'; + +@function getFontSize($step) { + @return ms($step, 16px, $minor-third) +} From 7d9540557f3854878fa46d825ba26555b072a592 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:45:53 -0400 Subject: [PATCH 0020/5419] Adding some common screen sizes to the screens sass module --- src/utilities/scss/partials/_screens.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/utilities/scss/partials/_screens.scss b/src/utilities/scss/partials/_screens.scss index d06503439af..96c4ad8a617 100644 --- a/src/utilities/scss/partials/_screens.scss +++ b/src/utilities/scss/partials/_screens.scss @@ -1,5 +1,7 @@ // Screen Sizes $screens: ( - + desktop: 1280px, + laptop: 960px, + tablet: 720px ); \ No newline at end of file From 21b8d6a142741781cd682a5733b0dcbcb4584fb5 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:46:17 -0400 Subject: [PATCH 0021/5419] Reformatting the color scheme sass module --- src/utilities/scss/partials/_colors.scss | 28 ++++++++++++------------ 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/utilities/scss/partials/_colors.scss b/src/utilities/scss/partials/_colors.scss index acbd3bb2fd4..3156cf908fc 100644 --- a/src/utilities/scss/partials/_colors.scss +++ b/src/utilities/scss/partials/_colors.scss @@ -1,17 +1,17 @@ -// Webpack Color Scheme +// Color Scheme $colors: ( - regent: #8a929d, - lynch: #617693, - chambray: #31517e, - chatham: #12396e, - parchment: #efe3d0, - calico: #dfc08b, - tussock: #c0903f, - white: #ffffff, - concrete: #f2f2f2, - alto: #dedede, - dusty-grey: #999999, - dove-grey: #666666, - mine-shaft: #333333 + regent: #8a929d, + lynch: #617693, + chambray: #31517e, + chatham: #12396e, + parchment: #efe3d0, + calico: #dfc08b, + tussock: #c0903f, + white: #ffffff, + concrete: #f2f2f2, + alto: #dedede, + dusty-grey: #999999, + dove-grey: #666666, + mine-shaft: #333333 ); \ No newline at end of file From 2c223bbc6d6399b7f1b58ca4ac1cc2dfbf080bbb Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:47:16 -0400 Subject: [PATCH 0022/5419] Reformatting and updating the banner --- src/components/banner/banner-style.scss | 31 ++++++++++++++++++++----- src/components/banner/banner.js | 23 ++++++++++++------ 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/components/banner/banner-style.scss b/src/components/banner/banner-style.scss index f874c31bdf3..f5aee420814 100644 --- a/src/components/banner/banner-style.scss +++ b/src/components/banner/banner-style.scss @@ -1,13 +1,32 @@ // Styling for the Banner component @import 'utilities/scss/partials/colors'; +@import 'utilities/scss/partials/screens'; +@import 'utilities/scss/partials/functions'; .banner { - min-width: 1280px; - background: map-get($colors, mine-shaft); + min-width:map-get($screens, desktop); + background: map-get($colors, mine-shaft); - &-inner { - padding:0.5em 1em; - box-sizing:border-box; - } + &-inner { + padding:0.5em 1em; + box-sizing:border-box; + } + + &-nav { + float:right; + padding:0.25em 0; + + &-link { + font-size:getFontSize(-2); + margin-left:2.5em; + text-transform:uppercase; + text-decoration:none; + color:map-get($colors, alto); + transition:color 250ms; + + &:hover, + &.-active { color:map-get($colors, white); } + } + } } \ No newline at end of file diff --git a/src/components/banner/banner.js b/src/components/banner/banner.js index a6256a8e83d..86aa451a5e7 100644 --- a/src/components/banner/banner.js +++ b/src/components/banner/banner.js @@ -2,6 +2,7 @@ import React from 'react' // Import Components +import { Link } from 'react-router' import Container from 'Components/container/container' import Logo from 'Components/logo/logo' @@ -10,13 +11,21 @@ import './banner-style' // Create the Banner component let Banner = props => { - return ( -
- - - -
- ) + return ( +
+ + + + + +
+ ) } // Export it From 338d716690fb8d2703cc7d29d2ef77eb0d9ef375 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:48:14 -0400 Subject: [PATCH 0023/5419] Reformatting and updating the Container to use screens --- src/components/container/container-style.scss | 6 ++++-- src/components/container/container.js | 10 +++++----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/container/container-style.scss b/src/components/container/container-style.scss index 78d1e024f35..3a0429e71c2 100644 --- a/src/components/container/container-style.scss +++ b/src/components/container/container-style.scss @@ -1,6 +1,8 @@ // Styling for the Container component +@import 'utilities/scss/partials/screens'; + .container { - width: 1280px; - margin: 0 auto; + width:map-get($screens, desktop); + margin:0 auto; } \ No newline at end of file diff --git a/src/components/container/container.js b/src/components/container/container.js index 2cef4d5831a..808875c5d1f 100644 --- a/src/components/container/container.js +++ b/src/components/container/container.js @@ -6,11 +6,11 @@ import './container-style' // Create the "Container" component let Container = props => { - return ( -
- { props.children } -
- ) + return ( +
+ { props.children } +
+ ) } // Export it From 99f20c3897c7011430bfa81e52cf3a517c52b93b Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:50:34 -0400 Subject: [PATCH 0024/5419] [fix] Adding an empty Footer component (should have committed this prior to 51bb660659ae4d40883c1067b9089cb257aa3f3e) --- src/components/footer/footer-style.scss | 14 ++++++++++++++ src/components/footer/footer.js | 24 ++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/components/footer/footer-style.scss create mode 100644 src/components/footer/footer.js diff --git a/src/components/footer/footer-style.scss b/src/components/footer/footer-style.scss new file mode 100644 index 00000000000..b26beacb2f7 --- /dev/null +++ b/src/components/footer/footer-style.scss @@ -0,0 +1,14 @@ +// Styling for the Footer component + +@import 'utilities/scss/partials/colors'; +@import 'utilities/scss/partials/screens'; + +.footer { + min-width:map-get($screens, desktop); + background: map-get($colors, alto); + + &-inner { + padding:0.25em 1em; + box-sizing:border-box; + } +} \ No newline at end of file diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js new file mode 100644 index 00000000000..a656c9ad837 --- /dev/null +++ b/src/components/footer/footer.js @@ -0,0 +1,24 @@ +// Import Dependencies +import React from 'react' + +// Import Components +import { Link } from 'react-router' +import Icon from 'Components/icon/icon' +import Container from 'Components/container/container' + +// Load Styling +import './footer-style' + +// Create the "Footer" component +let Footer = props => { + return ( +
+ + + +
+ ) +} + +// Export it +export default Footer \ No newline at end of file From d5e1f5c1ccbdaae3d03366e9e0713566b1cadb7c Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:51:19 -0400 Subject: [PATCH 0025/5419] Reformatting and updating the Icon component --- src/components/icon/icon-style.scss | 127 ++++++++------- src/components/icon/icon.js | 243 ++++++++++++++-------------- 2 files changed, 189 insertions(+), 181 deletions(-) diff --git a/src/components/icon/icon-style.scss b/src/components/icon/icon-style.scss index 63e62ff6dbe..fc9c0b0995e 100644 --- a/src/components/icon/icon-style.scss +++ b/src/components/icon/icon-style.scss @@ -3,81 +3,80 @@ @import 'utilities/scss/partials/colors'; .icon { - position:relative; - display:inline-block; - transform-style:preserve-3d; - transform:rotateX(-33.5deg) rotateY(45deg); - - &-cube { + position:relative; display:inline-block; transform-style:preserve-3d; - transition:transform 750ms; - - &.-inner { - position:absolute; - top:0; left:0; - } + transform:rotateX(-33.5deg) rotateY(45deg); + + &-cube { + display:inline-block; + transform-style:preserve-3d; + transition:transform 750ms; + + &.-inner { + position:absolute; + top:0; + left:0; + } - &-face { - position:absolute; - width:100%; - height:100%; - backface-visibility:hidden; - background:radial-gradient(transparent 30%,rgba(5,17,53,.2) 100%); - - &:after { - content:''; - position:absolute; - display:block; - width:100%; - height:100%; - backface-visibility:hidden; - transition:background 750ms; - } + &-face { + position:absolute; + width:100%; + height:100%; + backface-visibility:hidden; + background:radial-gradient(transparent 30%,rgba(5,17,53,.2) 100%); + + &:after { + content:''; + position:absolute; + display:block; + width:100%; + height:100%; + backface-visibility:hidden; + transition:background 750ms; + } + } } - } - // Default Theme - &.-default { - .icon-cube.-outer .icon-cube-face:after { - background:rgba(126, 169, 232, .5); - } + &.-default { + .icon-cube.-outer .icon-cube-face:after { + background:rgba(126, 169, 232, .5); + } - .icon-cube.-inner .icon-cube-face:after { - background:rgba(16, 58, 177, .4); - } + .icon-cube.-inner .icon-cube-face:after { + background:rgba(16, 58, 177, .4); + } - &:hover { - .icon-cube.-outer .icon-cube-face:after { - background:transparentize(#333333, 0.8); - } + &:hover { + .icon-cube.-outer .icon-cube-face:after { + background:transparentize(#333333, 0.8); + } - .icon-cube.-inner .icon-cube-face:after { - background:transparentize(#f39c12, 0.4); - } - } - } - - // Light Theme - &.-light { - .icon-cube.-outer .icon-cube-face:after { - background:transparentize(map-get($colors, concrete), 0.8); + .icon-cube.-inner .icon-cube-face:after { + background:transparentize(#f39c12, 0.4); + } + } } - .icon-cube.-inner .icon-cube-face:after { - background:transparentize(map-get($colors, tussock), 0.4); - } - - &:hover { - .icon-cube.-outer .icon-cube-face:after { - background:transparentize(map-get($colors, white), 0.8); - } - - .icon-cube.-inner .icon-cube-face:after { - background:transparentize(map-get($colors, lynch), 0.6); - } + &.-light { + .icon-cube.-outer .icon-cube-face:after { + background:transparentize(map-get($colors, concrete), 0.8); + } + + .icon-cube.-inner .icon-cube-face:after { + background:transparentize(map-get($colors, tussock), 0.4); + } + + &:hover { + .icon-cube.-outer .icon-cube-face:after { + background:transparentize(map-get($colors, white), 0.8); + } + + .icon-cube.-inner .icon-cube-face:after { + background:transparentize(map-get($colors, lynch), 0.6); + } + } } - } } diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index f4e90448e9a..31a422ddeff 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -1,5 +1,5 @@ // Import Dependencies -import React, { Component } from 'react' +import React, { Component, PropTypes } from 'react' // Load Styling import './icon-style' @@ -7,139 +7,148 @@ import './icon-style' // Export the "Icon" component // TODO: Consider breaking 'icon-cube' into its own component export default class Icon extends Component { - constructor(props) { - super(props) - - this.listeners = { - spin: this._spin.bind(this), - reset: this._reset.bind(this) - } - - this.state = { - x: 0, - y: 0, - z: 0 + constructor(props) { + super(props) + + this.listeners = { + spin: this.spin.bind(this), + reset: this.reset.bind(this) + } + + this.state = { + x: 0, + y: 0, + z: 0 + } } - } - - render() { - let { x, y, z } = this.state, - { theme, depth } = this.props - - return ( - this.container = ref } - className={ `icon -${theme}` } - style={{ - width: `${depth}px`, - 'margin-left': `${depth * 0.5}px`, - 'padding-bottom': `${depth * 0.3}px` - }}> -
this.container = ref } + className={ `icon -${theme}` } + style={{ + width: `${depth}px`, + marginLeft: `${depth * 0.5}px`, + paddingBottom: `${depth * 0.3}px` + }}> +
- { this._getFaces() } -
-
+ { this._getFaces() } +
+
- { this._getFaces() } -
- - ) - } - - componentDidMount() { - this.container.addEventListener('mouseenter', this.listeners.spin) - this.container.addEventListener('mouseleave', this.listeners.reset) - } - - componentWillUnmount() { - this.container.removeEventListener('mouseenter', this.listeners.spin) - this.container.removeEventListener('mouseleave', this.listeners.reset) - } - - /** - * Get all faces for a cube - * - * @return {array} - An array of nodes - */ - _getFaces() { - return [ - 'rotateX(0deg)', - 'rotateX(-90deg)', - 'rotateX(90deg)', - 'rotateY(-90deg)', - 'rotateY(90deg)', - 'rotateY(180deg)' - ].map((rotation, i) => { - return
- }) - } - - /** - * Get a random axis - * - * @return {string} - A random axis (i.e. x, y, or z) - */ - _getRandomAxis() { - let axes = Object.keys(this.state) - - return axes[ Math.floor(Math.random() * axes.length) ] - } - - /** - * Spin the cubes in opposite directions semi-randomly - * - * @param {object} e - Native event - */ - _spin(e) { - let obj = {}, - axis = this._getRandomAxis(), - sign = Math.random() < 0.5 ? -1 : 1 - - obj[axis] = sign * 90 - - this.setState(obj) - } - - /** - * Rotate the cubes back to their original position - * - * @param {object} e - Native event - */ - _reset(e) { - this.setState({ - x: 0, - y: 0, - z: 0 - }) - } + }}> + { this._getFaces() } +
+
+ ) + } + + componentDidMount() { + if (this.props.hover) { + this.container.addEventListener('mouseenter', this.listeners.spin) + this.container.addEventListener('mouseleave', this.listeners.reset) + } + } + + componentWillUnmount() { + if (this.props.hover) { + this.container.removeEventListener('mouseenter', this.listeners.spin) + this.container.removeEventListener('mouseleave', this.listeners.reset) + } + } + + /** + * Get all faces for a cube + * + * @return {array} - An array of nodes + */ + _getFaces() { + return [ + 'rotateX(0deg)', + 'rotateX(-90deg)', + 'rotateX(90deg)', + 'rotateY(-90deg)', + 'rotateY(90deg)', + 'rotateY(180deg)' + ].map((rotation, i) => { + return ( +
+ ) + }) + } + + /** + * Get a random axis + * + * @return {string} - A random axis (i.e. x, y, or z) + */ + _getRandomAxis() { + let axes = Object.keys(this.state) + + return axes[ Math.floor(Math.random() * axes.length) ] + } + + /** + * Spin the cubes in opposite directions semi-randomly + * + * @param {object} e - Native event + */ + spin(e) { + let obj = {}, + axis = this._getRandomAxis(), + sign = Math.random() < 0.5 ? -1 : 1 + + obj[axis] = sign * 90 + + this.setState(obj) + } + + /** + * Rotate the cubes back to their original position + * + * @param {object} e - Native event + */ + reset(e) { + this.setState({ + x: 0, + y: 0, + z: 0 + }) + } } // Check incoming props for issues Icon.propTypes = { - + hover: PropTypes.bool, + theme: PropTypes.string, + depth: PropTypes.number } // Set up defaults Icon.defaultProps = { - theme: 'default', - depth: 30 + hover: false, + theme: 'default', + depth: 30 } From 351138d32c8011200b70cd792bd175a3ddae4e67 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 28 Jun 2016 01:51:41 -0400 Subject: [PATCH 0026/5419] Reformatting and updating the Logo component --- src/components/logo/logo-style.scss | 28 ++++++------- src/components/logo/logo.js | 61 +++++++++++++++++++++++------ 2 files changed, 64 insertions(+), 25 deletions(-) diff --git a/src/components/logo/logo-style.scss b/src/components/logo/logo-style.scss index 7edd07c15b2..551985e59a4 100644 --- a/src/components/logo/logo-style.scss +++ b/src/components/logo/logo-style.scss @@ -4,21 +4,21 @@ @import 'utilities/scss/partials/colors'; .logo { - cursor:pointer; + cursor:pointer; - &-text { - font-size:1.3em; - font-family:'Averia Sans Libre'; - margin-left:0.25em; - vertical-align:text-bottom; - transition:color 250ms; + &-text { + font-size:1.3em; + font-family:'Averia Sans Libre'; + margin-left:0.25em; + vertical-align:text-bottom; + transition:color 250ms; - &.-dark { color:map-get($colors, dove-grey); } - &.-light { color:map-get($colors, concrete); } - } + &.-dark { color:map-get($colors, dove-grey); } + &.-light { color:map-get($colors, concrete); } + } - &:hover .logo-text { - &.-dark { color:map-get($colors, mine-shaft); } - &.-light { color:map-get($colors, white); } - } + &:hover .logo-text { + &.-dark { color:map-get($colors, mine-shaft); } + &.-light { color:map-get($colors, parchment); } + } } \ No newline at end of file diff --git a/src/components/logo/logo.js b/src/components/logo/logo.js index 24618a6aa81..bc3ae009c23 100644 --- a/src/components/logo/logo.js +++ b/src/components/logo/logo.js @@ -1,5 +1,5 @@ // Import Dependencies -import React from 'react' +import React, { Component } from 'react' // Import Components import Icon from 'Components/icon/icon' @@ -7,15 +7,54 @@ import Icon from 'Components/icon/icon' // Load Styling import './logo-style' -// Create the "Logo" component -let Logo = props => { - return ( - - - Webpack - - ) +// Export the "Logo" component +export default class Logo extends Component { + constructor(props) { + super(props) + + this.listeners = { + spin: this._triggerSpin.bind(this), + reset: this._triggerReset.bind(this) + } + } + + render() { + return ( + this.container = ref }> + this.icon = ref } theme="light" depth={ 20 } /> + Webpack + + ) + } + + componentDidMount() { + this.container.addEventListener('mouseenter', this.listeners.spin) + this.container.addEventListener('mouseleave', this.listeners.reset) + } + + componentWillUnmount() { + this.container.removeEventListener('mouseenter', this.listeners.spin) + this.container.removeEventListener('mouseleave', this.listeners.reset) + } + + /** + * Proxy to Icon's spin method + * + * @param {object} e - Native event + */ + _triggerSpin(e) { + this.icon.spin(e) + } + + /** + * Proxy to Icon's reset method + * + * @param {object} e - Native event + */ + _triggerReset(e) { + this.icon.reset(e) + } } -// Export it -export default Logo + + From 860bdbd555aaf90b4f43180df91c2c0f0bd93be3 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:00:46 -0400 Subject: [PATCH 0027/5419] Ignoring npm-debug file --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index eb58b877266..67f21158cfb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules -dist/build \ No newline at end of file +dist/build +npm-debug.log \ No newline at end of file From 89a91d7993446746074eff61348e3f6f00dba692 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:01:23 -0400 Subject: [PATCH 0028/5419] Adding a placeholder component for the the Analyze page --- src/components/analyze/analyze-style.scss | 10 ++++++++++ src/components/analyze/analyze.js | 19 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/components/analyze/analyze-style.scss create mode 100644 src/components/analyze/analyze.js diff --git a/src/components/analyze/analyze-style.scss b/src/components/analyze/analyze-style.scss new file mode 100644 index 00000000000..d2a127448cf --- /dev/null +++ b/src/components/analyze/analyze-style.scss @@ -0,0 +1,10 @@ +// Styling for the Analyze component (temporary) + +.analyze { + display:flex; + justify-content:center; + align-items:center; + height:92vh; + + span { text-transform:uppercase; color: #999; } +} \ No newline at end of file diff --git a/src/components/analyze/analyze.js b/src/components/analyze/analyze.js new file mode 100644 index 00000000000..0446b98326c --- /dev/null +++ b/src/components/analyze/analyze.js @@ -0,0 +1,19 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components + + +// Load Styling +import './analyze-style' + +// Export the "Analyze" component +export default class Analyze extends Component { + render() { + return ( +
+ Analyze Content +
+ ) + } +} \ No newline at end of file From 907400ddb570e1e97914bd6e571ad404cc29fdce Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:02:41 -0400 Subject: [PATCH 0029/5419] Adding a component for the Contribute page (currently just a placeholder) --- .../contribute/contribute-style.scss | 10 ++++++++++ src/components/contribute/contribute.js | 19 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/components/contribute/contribute-style.scss create mode 100644 src/components/contribute/contribute.js diff --git a/src/components/contribute/contribute-style.scss b/src/components/contribute/contribute-style.scss new file mode 100644 index 00000000000..ca4c2a49de2 --- /dev/null +++ b/src/components/contribute/contribute-style.scss @@ -0,0 +1,10 @@ +// Styling for the Contribute component (temporary) + +.contribute { + display:flex; + justify-content:center; + align-items:center; + height:92vh; + + span { text-transform:uppercase; color: #999; } +} \ No newline at end of file diff --git a/src/components/contribute/contribute.js b/src/components/contribute/contribute.js new file mode 100644 index 00000000000..7462f2db23d --- /dev/null +++ b/src/components/contribute/contribute.js @@ -0,0 +1,19 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components + + +// Load Styling +import './contribute-style' + +// Export the "Contribute" component +export default class Contribute extends Component { + render() { + return ( +
+ Contribute Content +
+ ) + } +} \ No newline at end of file From 0d097a832fbe0fcbd0867159b0f178fe1c4624ba Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:03:09 -0400 Subject: [PATCH 0030/5419] Adding a component for the Donate page (currently just a placeholder) --- src/components/donate/donate-style.scss | 10 ++++++++++ src/components/donate/donate.js | 19 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/components/donate/donate-style.scss create mode 100644 src/components/donate/donate.js diff --git a/src/components/donate/donate-style.scss b/src/components/donate/donate-style.scss new file mode 100644 index 00000000000..53c2802803e --- /dev/null +++ b/src/components/donate/donate-style.scss @@ -0,0 +1,10 @@ +// Styling for the Donate component (temporary) + +.donate { + display:flex; + justify-content:center; + align-items:center; + height:92vh; + + span { text-transform:uppercase; color: #999; } +} \ No newline at end of file diff --git a/src/components/donate/donate.js b/src/components/donate/donate.js new file mode 100644 index 00000000000..2816cb806c7 --- /dev/null +++ b/src/components/donate/donate.js @@ -0,0 +1,19 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components + + +// Load Styling +import './donate-style' + +// Export the "Donate" component +export default class Donate extends Component { + render() { + return ( +
+ Donate Content +
+ ) + } +} \ No newline at end of file From f3d4b8603d1b375f670d0e9e20e49827ac845dd5 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:03:27 -0400 Subject: [PATCH 0031/5419] Adding a component for the Guides page (currently just a placeholder) --- src/components/guides/guides-style.scss | 10 ++++++++++ src/components/guides/guides.js | 19 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/components/guides/guides-style.scss create mode 100644 src/components/guides/guides.js diff --git a/src/components/guides/guides-style.scss b/src/components/guides/guides-style.scss new file mode 100644 index 00000000000..0f0ec2969ba --- /dev/null +++ b/src/components/guides/guides-style.scss @@ -0,0 +1,10 @@ +// Styling for the Guides component (temporary) + +.guides { + display:flex; + justify-content:center; + align-items:center; + height:92vh; + + span { text-transform:uppercase; color: #999; } +} \ No newline at end of file diff --git a/src/components/guides/guides.js b/src/components/guides/guides.js new file mode 100644 index 00000000000..887131ccb0f --- /dev/null +++ b/src/components/guides/guides.js @@ -0,0 +1,19 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components + + +// Load Styling +import './guides-style' + +// Export the "Guides" component +export default class Guides extends Component { + render() { + return ( +
+ Guides Content +
+ ) + } +} \ No newline at end of file From 8b4a989bfd34a746bfcb34a1f81dbe61f3dc766d Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:04:16 -0400 Subject: [PATCH 0032/5419] Adding a component for the Lost/404 page (currently just a placeholder) --- src/components/lost/lost-style.scss | 10 ++++++++++ src/components/lost/lost.js | 19 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/components/lost/lost-style.scss create mode 100644 src/components/lost/lost.js diff --git a/src/components/lost/lost-style.scss b/src/components/lost/lost-style.scss new file mode 100644 index 00000000000..56d0b70f298 --- /dev/null +++ b/src/components/lost/lost-style.scss @@ -0,0 +1,10 @@ +// Styling for the Lost component (temporary) + +.lost { + display:flex; + justify-content:center; + align-items:center; + height:92vh; + + span { text-transform:uppercase; color: #999; } +} \ No newline at end of file diff --git a/src/components/lost/lost.js b/src/components/lost/lost.js new file mode 100644 index 00000000000..392fc527d68 --- /dev/null +++ b/src/components/lost/lost.js @@ -0,0 +1,19 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components + + +// Load Styling +import './lost-style' + +// Export the "Lost" component +export default class Lost extends Component { + render() { + return ( +
+ Page not found +
+ ) + } +} \ No newline at end of file From b3f68a0e0ea7dec25a25fdd6940e97d9b3c9c5cc Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:07:47 -0400 Subject: [PATCH 0033/5419] Adding a component for the Reference/Documentation page (currently just a placeholder) --- src/components/reference/reference-style.scss | 10 ++++++++++ src/components/reference/reference.js | 19 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/components/reference/reference-style.scss create mode 100644 src/components/reference/reference.js diff --git a/src/components/reference/reference-style.scss b/src/components/reference/reference-style.scss new file mode 100644 index 00000000000..17a462c5237 --- /dev/null +++ b/src/components/reference/reference-style.scss @@ -0,0 +1,10 @@ +// Styling for the Reference component (temporary) + +.reference { + display:flex; + justify-content:center; + align-items:center; + height:92vh; + + span { text-transform:uppercase; color: #999; } +} \ No newline at end of file diff --git a/src/components/reference/reference.js b/src/components/reference/reference.js new file mode 100644 index 00000000000..57d6f4a99c1 --- /dev/null +++ b/src/components/reference/reference.js @@ -0,0 +1,19 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components + + +// Load Styling +import './reference-style' + +// Export the "Reference" component +export default class Reference extends Component { + render() { + return ( +
+ Reference Content +
+ ) + } +} \ No newline at end of file From b66009d0ef3da778d67f09c2d0740afa5cfc2cf3 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:08:09 -0400 Subject: [PATCH 0034/5419] Adding a component for the Splash page (currently just a placeholder) --- src/components/splash/splash-style.scss | 10 ++++++++++ src/components/splash/splash.js | 19 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/components/splash/splash-style.scss create mode 100644 src/components/splash/splash.js diff --git a/src/components/splash/splash-style.scss b/src/components/splash/splash-style.scss new file mode 100644 index 00000000000..40fcd13b621 --- /dev/null +++ b/src/components/splash/splash-style.scss @@ -0,0 +1,10 @@ +// Styling for the Splash component (temporary) + +.splash { + display:flex; + justify-content:center; + align-items:center; + height:92vh; + + span { text-transform:uppercase; color: #999; } +} \ No newline at end of file diff --git a/src/components/splash/splash.js b/src/components/splash/splash.js new file mode 100644 index 00000000000..1045a96be65 --- /dev/null +++ b/src/components/splash/splash.js @@ -0,0 +1,19 @@ +// Import Dependencies +import React, { Component } from 'react' + +// Import Components + + +// Load Styling +import './splash-style' + +// Export the "Splash" component +export default class Splash extends Component { + render() { + return ( +
+ Splash Content +
+ ) + } +} \ No newline at end of file From 83d3c633c40a1077fad2819d2ce1e5fccc9f0949 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:09:37 -0400 Subject: [PATCH 0035/5419] Updating the Footer component --- src/components/footer/footer-style.scss | 26 ++++++++++++++++++++++++- src/components/footer/footer.js | 18 ++++++++++++++++- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/src/components/footer/footer-style.scss b/src/components/footer/footer-style.scss index b26beacb2f7..766f3b63f71 100644 --- a/src/components/footer/footer-style.scss +++ b/src/components/footer/footer-style.scss @@ -2,13 +2,37 @@ @import 'utilities/scss/partials/colors'; @import 'utilities/scss/partials/screens'; +@import 'utilities/scss/partials/functions'; .footer { min-width:map-get($screens, desktop); background: map-get($colors, alto); &-inner { - padding:0.25em 1em; + display:flex; + padding:0.5em 1em; box-sizing:border-box; + + &-middle { flex:0 0 auto; } + + &-left, + &-right { + flex:1 1 auto; + padding:0.2em 0; + } + + &-right { text-align:right; } + + &-link { + font-size:getFontSize(-2); + margin-right:2em; + text-decoration:none; + text-transform:uppercase; + color:map-get($colors, dusty-grey); + transition:color 250ms; + + &:last-child { margin-right:0; } + &:hover { color:map-get($colors, mine-shaft); } + } } } \ No newline at end of file diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js index a656c9ad837..938e6218f37 100644 --- a/src/components/footer/footer.js +++ b/src/components/footer/footer.js @@ -14,7 +14,23 @@ let Footer = props => { return ( ) From 0ef098c82f86874a176225266332871054094f6b Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 00:11:33 -0400 Subject: [PATCH 0036/5419] Importing the page components and routing to them --- src/app.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index 8498fac7ecc..bea85824f8b 100644 --- a/src/app.js +++ b/src/app.js @@ -6,6 +6,15 @@ import { Router, Route, IndexRoute, browserHistory } from 'react-router' // Import Components import Frame from 'Components/frame/frame' +// TODO: Import the following using the promise-loader +import Splash from 'Components/splash/splash' +import Guides from 'Components/guides/guides' +import Reference from 'Components/reference/reference' +import Contribute from 'Components/contribute/contribute' +import Analyze from 'Components/analyze/analyze' +import Donate from 'Components/donate/donate' +import Lost from 'Components/lost/lost' + // Load Base Styling import 'Utilities/scss/reset' @@ -13,7 +22,13 @@ import 'Utilities/scss/reset' ReactDOM.render(( - + + + + + + + ), document.getElementById('root')) From aa40c8b809d879549b2292b4afdde4f4ac40a630 Mon Sep 17 00:00:00 2001 From: Juho Vepsalainen Date: Wed, 29 Jun 2016 21:07:08 +0300 Subject: [PATCH 0037/5419] Simplify webpack configuration No sudo needed. Closes #1. --- config/dev-config.js | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/config/dev-config.js b/config/dev-config.js index 4c561b15ba7..cbdfbaa00a7 100644 --- a/config/dev-config.js +++ b/config/dev-config.js @@ -43,8 +43,8 @@ export default { }, output: { - path: '/dist/build', + path: 'dist/build', publicPath: '/build/', filename: '[name].bundle.js' } -} \ No newline at end of file +} diff --git a/package.json b/package.json index db0381ba8b8..1f83a1dc82e 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,8 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build": "sudo webpack -p", - "dev-server": "sudo webpack-dev-server" + "build": "webpack -p", + "dev-server": "webpack-dev-server" }, "devDependencies": { From bcb911084784a2907630e06f04d9cd37ffb4ae3a Mon Sep 17 00:00:00 2001 From: Juho Vepsalainen Date: Wed, 29 Jun 2016 21:07:40 +0300 Subject: [PATCH 0038/5419] Fix typo --- src/content/feature-guides/{compatiblity.md => compatibility.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/content/feature-guides/{compatiblity.md => compatibility.md} (100%) diff --git a/src/content/feature-guides/compatiblity.md b/src/content/feature-guides/compatibility.md similarity index 100% rename from src/content/feature-guides/compatiblity.md rename to src/content/feature-guides/compatibility.md From 20f50028f8bc125c8f099908dce54fc05c184761 Mon Sep 17 00:00:00 2001 From: Juho Vepsalainen Date: Wed, 29 Jun 2016 21:12:44 +0300 Subject: [PATCH 0039/5419] Push "Getting Started" lower in the hierarchy Just a single page. --- src/content/{getting-started => }/getting-started.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/content/{getting-started => }/getting-started.md (100%) diff --git a/src/content/getting-started/getting-started.md b/src/content/getting-started.md similarity index 100% rename from src/content/getting-started/getting-started.md rename to src/content/getting-started.md From fca258e0b2bed4c80b54b3519d37f9b386b4bfd0 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 23:33:41 -0400 Subject: [PATCH 0040/5419] Renaming the Icon's "default" theme to "dark" --- src/components/icon/icon-style.scss | 2 +- src/components/icon/icon.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/icon/icon-style.scss b/src/components/icon/icon-style.scss index fc9c0b0995e..d42066ff5c5 100644 --- a/src/components/icon/icon-style.scss +++ b/src/components/icon/icon-style.scss @@ -38,7 +38,7 @@ } } - &.-default { + &.-dark { .icon-cube.-outer .icon-cube-face:after { background:rgba(126, 169, 232, .5); } diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index 31a422ddeff..434caa500a1 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -147,7 +147,7 @@ Icon.propTypes = { // Set up defaults Icon.defaultProps = { hover: false, - theme: 'default', + theme: 'dark', depth: 30 } From 96b20998649ed5b479332d514420464f0a97c786 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 23:34:20 -0400 Subject: [PATCH 0041/5419] Toggling the Icon's theme based on the Logo's theme --- src/components/logo/logo.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/logo/logo.js b/src/components/logo/logo.js index bc3ae009c23..65fd89e5a95 100644 --- a/src/components/logo/logo.js +++ b/src/components/logo/logo.js @@ -21,7 +21,9 @@ export default class Logo extends Component { render() { return ( this.container = ref }> - this.icon = ref } theme="light" depth={ 20 } /> + this.icon = ref } + theme={ this.props.theme || 'dark' } + depth={ 20 } /> Webpack ) From 43ee2d0d6b382ce94c39a003a8e45c6ffcdc1a9d Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 29 Jun 2016 23:35:32 -0400 Subject: [PATCH 0042/5419] Adding a new theme for the Banner --- src/components/banner/banner-style.scss | 15 +++++++++++++-- src/components/banner/banner.js | 6 ++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/banner/banner-style.scss b/src/components/banner/banner-style.scss index f5aee420814..7a329ae21c7 100644 --- a/src/components/banner/banner-style.scss +++ b/src/components/banner/banner-style.scss @@ -6,13 +6,18 @@ .banner { min-width:map-get($screens, desktop); - background: map-get($colors, mine-shaft); + background:map-get($colors, mine-shaft); + transition:background 250ms; &-inner { padding:0.5em 1em; box-sizing:border-box; } + &-logo { + text-decoration:none; + } + &-nav { float:right; padding:0.25em 0; @@ -22,11 +27,17 @@ margin-left:2.5em; text-transform:uppercase; text-decoration:none; - color:map-get($colors, alto); + color:map-get($colors, dusty-grey); transition:color 250ms; &:hover, &.-active { color:map-get($colors, white); } } } + + &.-light { + background: transparent; + + .banner-nav-link:hover { color:map-get($colors, mine-shaft); } + } } \ No newline at end of file diff --git a/src/components/banner/banner.js b/src/components/banner/banner.js index 86aa451a5e7..1585ed3fee3 100644 --- a/src/components/banner/banner.js +++ b/src/components/banner/banner.js @@ -12,9 +12,11 @@ import './banner-style' // Create the Banner component let Banner = props => { return ( -
+
- + + +
+ +
+ +

{ page.title }

+
+ +
); }; diff --git a/styles/components/_splash.scss b/styles/components/_splash.scss index b44ff5f512a..70343cfaed4 100644 --- a/styles/components/_splash.scss +++ b/styles/components/_splash.scss @@ -1,5 +1,25 @@ .splash { + &-viz { + display:flex; + height:100vh; + min-height:750px; + + &-modules, + &-output { + flex:0 0 40%; + } + + &-icon { + display:flex; + flex:1 1 auto; + align-items:center; + justify-content:center; + } + } + &-content { - padding:1em; + background:map-get($colors, white); + + &-inner { padding:1em; } } } \ No newline at end of file From ced8f24fee8cddf862ca48178885473a5db2141b Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 2 Aug 2016 00:13:04 -0400 Subject: [PATCH 0243/5419] Removing mincss which is no longer used --- styles/min.css | 1 - 1 file changed, 1 deletion(-) delete mode 100644 styles/min.css diff --git a/styles/min.css b/styles/min.css deleted file mode 100644 index 14d1f2685a9..00000000000 --- a/styles/min.css +++ /dev/null @@ -1 +0,0 @@ -/* Copyright 2014 Owen Versteeg; MIT licensed */body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}label>*{display:inline}form>*{display:block;margin-bottom:10px}.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 14px 11px}.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}h1{font-size:3em}.btn,h2{font-size:2em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}textarea,input,select{padding:8px;border:1px solid #ccc}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em}.addon{padding:8px 12px;box-shadow:0 0 0 1px #ccc}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(min-width:1310px){.container{margin:auto;width:1270px}}@media(max-width:870px){.row .col{width:100%}}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{padding:.5em 0;display:block;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{padding:1.5em;background:#def;border-left:5px solid #59d} \ No newline at end of file From 5bb487febe0d8b85815598e1fdc8ccd3ecaafdcf Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 2 Aug 2016 00:14:35 -0400 Subject: [PATCH 0244/5419] Temporary fix (?) for Gitter button and fork ribbon --- styles/index.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/styles/index.scss b/styles/index.scss index 5193500c446..568edae8f85 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -20,6 +20,23 @@ body { background:map-get($colors, concrete); } +// Customize Gitter Link +// TODO: Consider moving to somewhere else +.gitter-open-chat-button { + right:0; + bottom:200px; + padding:1em 2em; + border-radius:0.5em 0.5em 0 0; + transform-origin:right bottom; + transform:rotate(-90deg); + transition:background-color 250ms; +} + +// Customize Github Fork Ribbon +.github-fork-ribbon-wrapper { + z-index:100; +} + h1 { font-size: getFontSize(4); } h2 { font-size: getFontSize(3); } h3 { font-size: getFontSize(2); } From b1335ad85184f1d6639374230d93e2aac65defd9 Mon Sep 17 00:00:00 2001 From: Sean Larkin Date: Mon, 1 Aug 2016 09:04:26 -0500 Subject: [PATCH 0245/5419] doc(concepts): Introduction To Webpack --- content/concepts/index.md | 52 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/content/concepts/index.md b/content/concepts/index.md index 000542ae566..35addfacfb9 100644 --- a/content/concepts/index.md +++ b/content/concepts/index.md @@ -1,6 +1,58 @@ --- +<<<<<<< HEAD title: Concepts --- TODO +======= +title: Introduction +--- + +*webpack* is a _module_ _bundler_ for modern JavaScript applications. + +### What is a module? + +In [modular programming](https://en.wikipedia.org/wiki/Modular_programming), developers break programs up into discrete chunks of functionality called a _module_. + +Each module has a smaller surface area than a full program, making verification, debugging, and testing trival. +Well-written _modules_ provide solid abstractions and encapsulation boundaries, so that each module has a coherent design and a clear purpose within the overall application. + +Node.js has supported modular programming almost since its inception. +On the web, however, support for _modules_ has been slow to arrive. +Multiple tools exist that support modular JavaScript on the web, with a variety of benefits and limitations. +webpack builds on lessons learned from these systems and applies the concept of _modules_ to any file in your project. + +### What is a webpack module? + +In contrast to Node.js modules, webpack _modules_ can express their _dependencies_ in a variety of ways. A few examples are: + +* A JavaScript `require()` statement +* An ECMAScript2015 `import` statement [^1] +* An AMD `define` and `require` statement +* An `@import` statement inside of a css/sass/less file. +* An image url in a stylesheet or html file. + +### webpack, dependency graph, and bundles + +Any time one file depends on another (as seen above), webpack treats this as a _dependency_. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as _dependencies_ for your application. + +When webpack processes your application, it starts from a list of modules defined on the command line or in its config file. +Starting from these _entry points_, webpack recursively builds a _dependency graph_ that includes every module your application needs, then packages all of those modules into a small number of _bundles_ - often, just one - to be loaded by the browser. +Bundling your application is especially powerful for HTTP/1.1 clients, as it minimizes the number of times your app has to wait while the browser starts a new request. For HTTP/2, you can also use Code Splitting and bundling through webpack for the [best optimization](https://medium.com/webpack/webpack-http-2-7083ec3f3ce6#.7y5d3hz59). + +webpack supports modules written in many languages and preprocessors, via _loaders_. _Loaders_ describe to webpack **how** to process non-javascript _modules_ and include these _dependencies_ into your _bundles_. +The webpack community has built loaders for a wide variety of popular languages and language processors, including: + +* [CoffeeScript](http://coffeescript.org) +* [TypeScript](https://www.typescriptlang.org) +* [Babel](https://babeljs.io) +* [Sass](http://sass-lang.com) +* [Less](http://lesscss.org) +* [Stylus](http://stylus-lang.com) + +And many others. +For a full list, see **the documentation** (TODO: link to loader list or NPM), or **write your own** (TODO: link to loader tutorial). + +[^1] webpack 1 requires a specific loader to convert ECMAScript2015 `import`, however this is possible out of the box via webpack 2 +>>>>>>> 20df545... Renamed the file to index, as well as clean up a variety of notes. From 48d308544ca091b45b8acd6e7f81861248a33fc6 Mon Sep 17 00:00:00 2001 From: Sean Larkin Date: Tue, 2 Aug 2016 11:43:47 -0500 Subject: [PATCH 0246/5419] doc(concepts): Introduction To Webpack --- content/concepts/core-concepts.md | 14 ++++++++++++++ content/concepts/index.md | 27 +++++++++++++++++++-------- 2 files changed, 33 insertions(+), 8 deletions(-) create mode 100644 content/concepts/core-concepts.md diff --git a/content/concepts/core-concepts.md b/content/concepts/core-concepts.md new file mode 100644 index 00000000000..e6eb9cbc27e --- /dev/null +++ b/content/concepts/core-concepts.md @@ -0,0 +1,14 @@ +--- +title: Core Concepts +--- + +## Entry, Output, Loaders, Plugins + +### Entry + +### Output + +### Loaders + +### Plugins + diff --git a/content/concepts/index.md b/content/concepts/index.md index 35addfacfb9..b370bd63448 100644 --- a/content/concepts/index.md +++ b/content/concepts/index.md @@ -8,6 +8,7 @@ TODO ======= title: Introduction --- +## Overview *webpack* is a _module_ _bundler_ for modern JavaScript applications. @@ -28,21 +29,24 @@ webpack builds on lessons learned from these systems and applies the concept of In contrast to Node.js modules, webpack _modules_ can express their _dependencies_ in a variety of ways. A few examples are: * A JavaScript `require()` statement -* An ECMAScript2015 `import` statement [^1] +* An ECMAScript2015 `import` statement * An AMD `define` and `require` statement * An `@import` statement inside of a css/sass/less file. * An image url in a stylesheet or html file. +T> webpack 1 requires a specific loader to convert ECMAScript2015 `import`, however this is possible out of the box via webpack 2 + ### webpack, dependency graph, and bundles -Any time one file depends on another (as seen above), webpack treats this as a _dependency_. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as _dependencies_ for your application. +Any time one file depends on another, webpack treats this as a _dependency_. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as _dependencies_ for your application. When webpack processes your application, it starts from a list of modules defined on the command line or in its config file. -Starting from these _entry points_, webpack recursively builds a _dependency graph_ that includes every module your application needs, then packages all of those modules into a small number of _bundles_ - often, just one - to be loaded by the browser. -Bundling your application is especially powerful for HTTP/1.1 clients, as it minimizes the number of times your app has to wait while the browser starts a new request. For HTTP/2, you can also use Code Splitting and bundling through webpack for the [best optimization](https://medium.com/webpack/webpack-http-2-7083ec3f3ce6#.7y5d3hz59). +Starting from these _entry points_, webpack recursively builds a _dependency graph_ that includes every module your application needs, then packages all of those modules into a small number of _bundles_ - often, just one - to be loaded by the browser. + +T> Bundling your application is especially powerful for *HTTP/1.1* clients, as it minimizes the number of times your app has to wait while the browser starts a new request. For *HTTP/2*, you can also use Code Splitting and bundling through webpack for the [best optimization](https://medium.com/webpack/webpack-http-2-7083ec3f3ce6#.7y5d3hz59). -webpack supports modules written in many languages and preprocessors, via _loaders_. _Loaders_ describe to webpack **how** to process non-javascript _modules_ and include these _dependencies_ into your _bundles_. -The webpack community has built loaders for a wide variety of popular languages and language processors, including: +webpack supports modules written in a variety of languages and preprocessors, via _loaders_. _Loaders_ describe to webpack **how** to process non-javascript _modules_ and include these _dependencies_ into your _bundles_. +The webpack community has built _loaders_ for a wide variety of popular languages and language processors, including: * [CoffeeScript](http://coffeescript.org) * [TypeScript](https://www.typescriptlang.org) @@ -51,8 +55,15 @@ The webpack community has built loaders for a wide variety of popular languages * [Less](http://lesscss.org) * [Stylus](http://stylus-lang.com) -And many others. -For a full list, see **the documentation** (TODO: link to loader list or NPM), or **write your own** (TODO: link to loader tutorial). +And many others! Overall, webpack provides a powerful and rich API for customization that allows one to use webpack for **any stack**, while staying **unopinionated** about your development, testing, and production workflows. + +For a full list, see [**the list of loaders**](https://webpack.github.io/docs/list-of-loaders.html) or [**write your own**](./api/loaders). +### Recap + +<<<<<<< HEAD [^1] webpack 1 requires a specific loader to convert ECMAScript2015 `import`, however this is possible out of the box via webpack 2 >>>>>>> 20df545... Renamed the file to index, as well as clean up a variety of notes. +======= +We are just starting to scratch the surface of webpack and its features, but we are equipped with a great grasp on terminology you will frequent throughout this guide. Its time to now dive into the [Core Concepts (Entry, Output, Loaders, Plugins)](./concepts/core-concepts)! +>>>>>>> 01a48bc... Cleaned up some style added tips for HTTP and added a recap for segue to next doc From 15426870080604bf3eec9266aa14ca00c06006d9 Mon Sep 17 00:00:00 2001 From: Sean Larkin Date: Tue, 2 Aug 2016 11:45:01 -0500 Subject: [PATCH 0247/5419] Fix changes overrode by accidental rebase fu --- content/concepts/index.md | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/content/concepts/index.md b/content/concepts/index.md index b370bd63448..f632460cb90 100644 --- a/content/concepts/index.md +++ b/content/concepts/index.md @@ -1,11 +1,4 @@ --- -<<<<<<< HEAD -title: Concepts ---- - -TODO - -======= title: Introduction --- ## Overview @@ -61,9 +54,4 @@ For a full list, see [**the list of loaders**](https://webpack.github.io/docs/li ### Recap -<<<<<<< HEAD -[^1] webpack 1 requires a specific loader to convert ECMAScript2015 `import`, however this is possible out of the box via webpack 2 ->>>>>>> 20df545... Renamed the file to index, as well as clean up a variety of notes. -======= We are just starting to scratch the surface of webpack and its features, but we are equipped with a great grasp on terminology you will frequent throughout this guide. Its time to now dive into the [Core Concepts (Entry, Output, Loaders, Plugins)](./concepts/core-concepts)! ->>>>>>> 01a48bc... Cleaned up some style added tips for HTTP and added a recap for segue to next doc From 2296b631a867ea2e7a0fb52f3ba54fc6ed4275c4 Mon Sep 17 00:00:00 2001 From: Sean Larkin Date: Tue, 2 Aug 2016 12:20:48 -0500 Subject: [PATCH 0248/5419] Little changes to markdown and add ESNext next to Babel --- content/concepts/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/concepts/index.md b/content/concepts/index.md index f632460cb90..363da09f991 100644 --- a/content/concepts/index.md +++ b/content/concepts/index.md @@ -3,7 +3,7 @@ title: Introduction --- ## Overview -*webpack* is a _module_ _bundler_ for modern JavaScript applications. +*webpack* is a _module bundler_ for modern JavaScript applications. ### What is a module? @@ -43,7 +43,7 @@ The webpack community has built _loaders_ for a wide variety of popular language * [CoffeeScript](http://coffeescript.org) * [TypeScript](https://www.typescriptlang.org) -* [Babel](https://babeljs.io) +* [ESNext (Babel)](https://babeljs.io) * [Sass](http://sass-lang.com) * [Less](http://lesscss.org) * [Stylus](http://stylus-lang.com) From 648f66b7d7feab326c6b9b7542d66d837287e35b Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 3 Aug 2016 22:47:30 -0400 Subject: [PATCH 0249/5419] Some minor tweaks to base styling --- styles/index.scss | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/styles/index.scss b/styles/index.scss index 5193500c446..4593a0de32c 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -40,11 +40,23 @@ a { text-decoration:none; transition:color 250ms; - &:hover { color:map-get($colors, chatham); } + &:hover { color:darken(map-get($colors, tussock), 15%); } + + &.header-anchor-select { + margin-left:0.5em; + } +} + +p, blockquote, table, pre { + margin:1em 0; } -p, blockquote, ul, ol, dl, li, table, pre { - margin:16px 0; +ul, ol, dl { + margin:0.5em 0 1em; +} + +li { + margin:0.5em 0; } hr { @@ -127,6 +139,10 @@ img { max-width: 100%; } +b, strong { + font-weight:600; +} + code, tt { margin: 0 2px; padding: 0 5px; From ecde7152d47e438b8db32d86dafb6e63b50aefa9 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 3 Aug 2016 22:48:13 -0400 Subject: [PATCH 0250/5419] Revert "Temporary fix (?) for Gitter button and fork ribbon" This reverts commit 5bb487febe0d8b85815598e1fdc8ccd3ecaafdcf. --- styles/index.scss | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/styles/index.scss b/styles/index.scss index 568edae8f85..5193500c446 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -20,23 +20,6 @@ body { background:map-get($colors, concrete); } -// Customize Gitter Link -// TODO: Consider moving to somewhere else -.gitter-open-chat-button { - right:0; - bottom:200px; - padding:1em 2em; - border-radius:0.5em 0.5em 0 0; - transform-origin:right bottom; - transform:rotate(-90deg); - transition:background-color 250ms; -} - -// Customize Github Fork Ribbon -.github-fork-ribbon-wrapper { - z-index:100; -} - h1 { font-size: getFontSize(4); } h2 { font-size: getFontSize(3); } h3 { font-size: getFontSize(2); } From 6638142ddaa071c17b9f6a0e959ab565b9790f90 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Thu, 4 Aug 2016 00:01:11 -0400 Subject: [PATCH 0251/5419] Drop Gitter and github Fork buttons --- components/Body.jsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/components/Body.jsx b/components/Body.jsx index c5cbc4a51c3..348d0a43a4c 100644 --- a/components/Body.jsx +++ b/components/Body.jsx @@ -1,7 +1,5 @@ import React from 'react'; -import Fork from 'react-ghfork'; import Body from 'antwar-helpers/layouts/Body'; -import Gitter from 'antwar-helpers/components/Gitter'; import Navigation from './Navigation'; import Footer from './Footer'; @@ -37,14 +35,6 @@ export default props => { { props.children }