commit
2986eeb89c
15 changed files with 516 additions and 0 deletions
@ -0,0 +1,27 @@
|
||||
{ |
||||
"presets": ["react", "es2015"], |
||||
"env": { |
||||
"development": { |
||||
"plugins": [ |
||||
["transform-object-rest-spread"], |
||||
["transform-react-display-name"], |
||||
["react-transform", { |
||||
"transforms": [{ |
||||
"transform": "react-transform-hmr", |
||||
"imports": ["react"], |
||||
"locals": ["module"] |
||||
}, { |
||||
"transform": "react-transform-catch-errors", |
||||
"imports": ["react", "redbox-react"] |
||||
}] |
||||
}] |
||||
] |
||||
}, |
||||
"production": { |
||||
"plugins": [ |
||||
["transform-object-rest-spread"], |
||||
["transform-react-display-name"] |
||||
] |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,27 @@
|
||||
{ |
||||
"ecmaFeatures": { |
||||
"jsx": true, |
||||
"modules": true |
||||
}, |
||||
"env": { |
||||
"browser": true, |
||||
"node": true |
||||
}, |
||||
"parser": "babel-eslint", |
||||
"rules": { |
||||
"quotes": [2, "single"], |
||||
"strict": [2, "never"], |
||||
"babel/generator-star-spacing": 1, |
||||
"babel/new-cap": 1, |
||||
"babel/object-shorthand": 1, |
||||
"babel/arrow-parens": 1, |
||||
"babel/no-await-in-loop": 1, |
||||
"react/jsx-uses-react": 2, |
||||
"react/jsx-uses-vars": 2, |
||||
"react/react-in-jsx-scope": 2 |
||||
}, |
||||
"plugins": [ |
||||
"babel", |
||||
"react" |
||||
] |
||||
} |
||||
@ -0,0 +1,35 @@
|
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
|
||||
# Runtime data |
||||
pids |
||||
*.pid |
||||
*.seed |
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover |
||||
lib-cov |
||||
|
||||
# Coverage directory used by tools like istanbul |
||||
coverage |
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) |
||||
.grunt |
||||
|
||||
# node-waf configuration |
||||
.lock-wscript |
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html) |
||||
build/Release |
||||
|
||||
# Dependency directory |
||||
node_modules |
||||
|
||||
# Optional npm cache directory |
||||
.npm |
||||
|
||||
# Optional REPL history |
||||
.node_repl_history |
||||
|
||||
.DS_Store |
||||
@ -0,0 +1,13 @@
|
||||
import Raven from 'raven-js'; |
||||
|
||||
const sentry_key = 'cb55d4f05cd443ce82303222f77ef5e0'; |
||||
const sentry_app = '61499'; |
||||
export const sentry_url = `https://${sentry_key}@app.getsentry.com/${sentry_app}`; |
||||
|
||||
export function logException(ex, context) { |
||||
Raven.captureException(ex, { |
||||
extra: context |
||||
}); |
||||
/*eslint no-console:0*/ |
||||
window && window.console && console.error && console.error(ex); |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
// offset variable gets tacked for centering in addition to the scaling |
||||
|
||||
offsets = translateX(-50%) translateY(-50%) |
||||
.likes-heart |
||||
opacity 0 |
||||
transition all 0.5s // time to fade out after its done |
||||
transform offsets scale(5) // this is the "end state" |
||||
display block |
||||
&.like-enter |
||||
transition all .2s |
||||
transform offsets scale(1) |
||||
opacity 1 |
||||
&.like-enter-active |
||||
transform offsets scale(5) |
||||
.like-leave-active |
||||
display none |
||||
|
||||
@ -0,0 +1,10 @@
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */ |
||||
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} |
||||
|
||||
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } |
||||
|
||||
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
||||
|
||||
|
||||
img |
||||
max-width 100% |
||||
@ -0,0 +1,45 @@
|
||||
/* |
||||
Variables |
||||
*/ |
||||
|
||||
blue = #125688 |
||||
offwhite = #fafafa |
||||
lightgrey = #EDEEED |
||||
lightgray = lightgrey // OH Canada! |
||||
|
||||
html |
||||
font-size 10px |
||||
font-family sans-serif |
||||
|
||||
p |
||||
font-size 1.6rem |
||||
line-height 1.5 |
||||
|
||||
h1 |
||||
font-family billabong, 'billabongregular' |
||||
text-align center |
||||
font-weight 100 |
||||
font-size 13rem |
||||
margin 2rem 0 |
||||
letter-spacing -1px |
||||
text-shadow 0px 4px 0 rgba(18, 86, 136, 0.11) |
||||
a |
||||
color blue |
||||
text-decoration none |
||||
&:focus |
||||
outline 0 |
||||
|
||||
|
||||
// "Instagram-like" webfont |
||||
|
||||
@font-face { |
||||
font-family: 'billabongregular'; |
||||
src: url('https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong-webfont.eot'); |
||||
src: url('https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong-webfont.woff') format('woff'), |
||||
url('https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong-webfont.ttf') format('truetype'), |
||||
url('https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong-webfont.svg#billabongregular') format('svg'); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
|
||||
} |
||||
@ -0,0 +1,149 @@
|
||||
@import '_normalize.styl' |
||||
@import '_typography.styl' |
||||
@import '_animations.styl' |
||||
|
||||
body |
||||
background offwhite |
||||
|
||||
.photo-grid |
||||
display flex |
||||
flex-wrap wrap |
||||
max-width 1200px |
||||
margin 0 auto |
||||
|
||||
.grid-figure |
||||
flex-basis calc(33.333% - 4rem) |
||||
flex-grow 1 |
||||
flex-shrink 0 |
||||
margin 0 2rem 2rem 2rem |
||||
padding 2rem |
||||
border 1px solid lightgray |
||||
background white |
||||
box-shadow 0 0 0 5px rgba(0,0,0,0.03); |
||||
position relative |
||||
|
||||
.single-photo |
||||
@extend .grid-figure |
||||
max-width 900px |
||||
margin 0 auto |
||||
display flex |
||||
background white |
||||
.grid-figure |
||||
box-shadow none |
||||
margin 0 2rem 0 0 |
||||
border 0 |
||||
padding 0 |
||||
flex 1 0 60% |
||||
max-width 60% |
||||
.comments |
||||
flex 1 0 40% |
||||
max-width 40% |
||||
.grid-photo |
||||
width 100% |
||||
margin 0 |
||||
|
||||
.grid-photo |
||||
width calc(100% + 4rem) |
||||
margin-left -2rem |
||||
margin-top -2rem |
||||
max-width none |
||||
|
||||
// Comments |
||||
.remove-comment |
||||
background none |
||||
border 0 |
||||
line-height 1 |
||||
opacity 0 |
||||
&:hover |
||||
color red |
||||
|
||||
.comment |
||||
border-bottom 1px solid lightgrey |
||||
padding 0.5rem 0 |
||||
p |
||||
font-size 1.2rem |
||||
margin 0 |
||||
strong |
||||
color blue |
||||
margin-right 5px |
||||
&:hover |
||||
.remove-comment |
||||
opacity 1 |
||||
|
||||
.comment-form |
||||
input, textarea |
||||
width 100% |
||||
border 0 |
||||
font-size 1.3rem |
||||
padding 1rem 0 |
||||
border-bottom 1px solid lightgrey |
||||
outline none |
||||
resize vertical |
||||
|
||||
|
||||
.grid-photo-wrap |
||||
position relative |
||||
|
||||
.likes-heart |
||||
background url(http://f.cl.ly/items/3Y373q2Q3J3Y1j203n0m/Bitmap-3.png) center no-repeat |
||||
background-size contain |
||||
font-size 2rem |
||||
padding 1rem |
||||
position absolute |
||||
color blue |
||||
left 50% |
||||
top 50% |
||||
pointer-events none |
||||
|
||||
|
||||
/* |
||||
Buttons |
||||
*/ |
||||
|
||||
.control-buttons |
||||
display flex |
||||
justify-content space-between |
||||
|
||||
button, .button |
||||
border 2px solid lighten(grey, 90%) |
||||
background none |
||||
flex-basis 48% |
||||
display inline-block |
||||
line-height 2 |
||||
text-decoration none |
||||
padding 5px |
||||
text-align center |
||||
font-size 15px |
||||
color blue |
||||
transition all 0.2s |
||||
box-sizing padding-box |
||||
&:hover, &:focus |
||||
border-color blue |
||||
outline 0 |
||||
|
||||
/* |
||||
Cowboy style speech bubble - you should probably use an SVG for this if you are doing more icons. |
||||
*/ |
||||
.speech-bubble |
||||
size = 1.25rem |
||||
width size * 1.2 |
||||
height size |
||||
background blue |
||||
display inline-block |
||||
border-radius 50% |
||||
position relative |
||||
&:after |
||||
display inline-block |
||||
position absolute |
||||
content '' |
||||
width: 0; |
||||
height: 0; |
||||
border-style: solid; |
||||
border-width: 0 size size 0 |
||||
border-color: transparent blue transparent transparent |
||||
top 30% |
||||
left 0 |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
var path = require('path'); |
||||
var express = require('express'); |
||||
var webpack = require('webpack'); |
||||
var config = require('./webpack.config.dev'); |
||||
|
||||
var app = express(); |
||||
var compiler = webpack(config); |
||||
|
||||
app.use(require('webpack-dev-middleware')(compiler, { |
||||
noInfo: true, |
||||
publicPath: config.output.publicPath |
||||
})); |
||||
|
||||
app.use(require('webpack-hot-middleware')(compiler)); |
||||
|
||||
app.get('*', function(req, res) { |
||||
res.sendFile(path.join(__dirname, 'index.html')); |
||||
}); |
||||
|
||||
app.listen(7700, 'localhost', function(err) { |
||||
if (err) { |
||||
console.log(err); |
||||
return; |
||||
} |
||||
|
||||
console.log('Listening at http://localhost:7700'); |
||||
}); |
||||
@ -0,0 +1,13 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>React + Redux</title> |
||||
<link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/> |
||||
|
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
<script src="/static/bundle.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,60 @@
|
||||
{ |
||||
"name": "learn-redux", |
||||
"version": "0.0.1", |
||||
"description": ":) ", |
||||
"scripts": { |
||||
"build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js", |
||||
"build": "npm run clean && npm run build:webpack", |
||||
"test": "NODE_ENV=production mocha './tests/**/*.spec.js' --compilers js:babel-core/register", |
||||
"clean": "rimraf dist", |
||||
"start": "node devServer.js", |
||||
"tunnel": "browser-sync start --proxy localhost:7700 --tunnel wesbos" |
||||
}, |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "https://github.com/wesbos/Learn-Redux.git" |
||||
}, |
||||
"author": "@sipp11", |
||||
"license": "MIT", |
||||
"homepage": "https://www.traffy.in.th", |
||||
"dependencies": { |
||||
"babel-core": "^6.7.7", |
||||
"babel-eslint": "^6.0.4", |
||||
"babel-loader": "^6.2.4", |
||||
"babel-plugin-react-transform": "^2.0.2", |
||||
"babel-plugin-transform-object-rest-spread": "^6.6.5", |
||||
"babel-plugin-transform-react-display-name": "^6.5.0", |
||||
"babel-polyfill": "^6.7.4", |
||||
"babel-preset-es2015": "^6.6.0", |
||||
"babel-preset-react": "^6.5.0", |
||||
"css-loader": "^0.23.1", |
||||
"eslint": "^2.9.0", |
||||
"eslint-plugin-babel": "^3.2.0", |
||||
"eslint-plugin-react": "^5.0.1", |
||||
"express": "^4.13.4", |
||||
"raven-js": "^2.3.0", |
||||
"react": "^15.0.2", |
||||
"react-addons-css-transition-group": "^15.0.2", |
||||
"react-dom": "^15.0.2", |
||||
"react-redux": "^4.4.5", |
||||
"react-router": "^2.4.0", |
||||
"react-router-redux": "^4.0.4", |
||||
"react-transform-catch-errors": "^1.0.2", |
||||
"react-transform-hmr": "^1.0.4", |
||||
"redbox-react": "^1.2.3", |
||||
"redux": "^3.5.2", |
||||
"rimraf": "^2.5.2", |
||||
"style-loader": "^0.13.1", |
||||
"stylus": "^0.54.5", |
||||
"stylus-loader": "^2.0.0", |
||||
"webpack": "^1.13.0", |
||||
"webpack-dev-middleware": "^1.6.1", |
||||
"webpack-hot-middleware": "^2.10.0" |
||||
}, |
||||
"devDependencies": { |
||||
"expect": "^1.18.0", |
||||
"expect-jsx": "^2.5.1", |
||||
"mocha": "^2.4.5", |
||||
"react-addons-test-utils": "^15.0.2" |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@
|
||||
# App React Redux |
||||
|
||||
A simple React + Redux implementation. |
||||
|
||||
## Running |
||||
|
||||
First `npm install` to grab all the necessary dependencies. |
||||
|
||||
Then run `npm start` and open <localhost:7700> in your browser. |
||||
|
||||
## Production Build |
||||
|
||||
Run `npm build` to create a distro folder and a bundle.js file. |
||||
@ -0,0 +1,35 @@
|
||||
var path = require('path'); |
||||
var webpack = require('webpack'); |
||||
|
||||
module.exports = { |
||||
devtool: 'source-map', |
||||
entry: [ |
||||
'webpack-hot-middleware/client', |
||||
'./client/app' |
||||
], |
||||
output: { |
||||
path: path.join(__dirname, 'dist'), |
||||
filename: 'bundle.js', |
||||
publicPath: '/static/' |
||||
}, |
||||
plugins: [ |
||||
new webpack.HotModuleReplacementPlugin(), |
||||
new webpack.NoErrorsPlugin() |
||||
], |
||||
module: { |
||||
loaders: [ |
||||
// js
|
||||
{ |
||||
test: /\.js$/, |
||||
loaders: ['babel'], |
||||
include: path.join(__dirname, 'client') |
||||
}, |
||||
// CSS
|
||||
{
|
||||
test: /\.styl$/,
|
||||
include: path.join(__dirname, 'client'), |
||||
loader: 'style-loader!css-loader!stylus-loader' |
||||
} |
||||
] |
||||
} |
||||
}; |
||||
@ -0,0 +1,44 @@
|
||||
var path = require('path'); |
||||
var webpack = require('webpack'); |
||||
|
||||
module.exports = { |
||||
devtool: 'source-map', |
||||
entry: [ |
||||
|
||||
'./client/app' |
||||
], |
||||
output: { |
||||
path: path.join(__dirname, 'dist'), |
||||
filename: 'bundle.js', |
||||
publicPath: '/static/' |
||||
}, |
||||
plugins: [ |
||||
new webpack.optimize.OccurenceOrderPlugin(), |
||||
new webpack.DefinePlugin({ |
||||
'process.env': { |
||||
'NODE_ENV': "'production'" |
||||
} |
||||
}), |
||||
new webpack.optimize.UglifyJsPlugin({ |
||||
compressor: { |
||||
warnings: false |
||||
} |
||||
}) |
||||
], |
||||
module: { |
||||
loaders: [ |
||||
// js
|
||||
{ |
||||
test: /\.js$/, |
||||
loaders: ['babel'], |
||||
include: path.join(__dirname, 'client') |
||||
}, |
||||
// CSS
|
||||
{
|
||||
test: /\.styl$/,
|
||||
include: path.join(__dirname, 'client'), |
||||
loader: 'style-loader!css-loader!stylus-loader' |
||||
} |
||||
] |
||||
} |
||||
}; |
||||
Loading…
Reference in new issue