mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 06:00:06 +02:00
leak client code
This commit is contained in:
parent
6822feb508
commit
5fc7d4d132
15
spikes/leak/.babelrc
Normal file
15
spikes/leak/.babelrc
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"presets": [
|
||||
"react",
|
||||
"es2015"
|
||||
],
|
||||
"plugins": [
|
||||
["transform-object-rest-spread", {
|
||||
"useBuiltIns": true
|
||||
}],
|
||||
"add-module-exports",
|
||||
"transform-es2015-modules-commonjs",
|
||||
"react-hot-loader/babel"
|
||||
],
|
||||
"sourceMaps": "both"
|
||||
}
|
3
spikes/leak/.eslintignore
Normal file
3
spikes/leak/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
||||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
29
spikes/leak/.eslintrc
Normal file
29
spikes/leak/.eslintrc
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"extends": "semistandard",
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 7,
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
},
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"babel",
|
||||
"react"
|
||||
],
|
||||
"rules": {
|
||||
"generator-star-spacing": 0,
|
||||
"babel/generator-star-spacing": 1,
|
||||
"space-before-function-paren": [2, "never"],
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
"react/react-in-jsx-scope": 2,
|
||||
"object-curly-newline": ["error", {
|
||||
"minProperties": 1
|
||||
}],
|
||||
"sort-vars": ["error", {
|
||||
"ignoreCase": true
|
||||
}]
|
||||
}
|
||||
}
|
9
spikes/leak/artillery/artillery-fast.yml
Normal file
9
spikes/leak/artillery/artillery-fast.yml
Normal file
@ -0,0 +1,9 @@
|
||||
config:
|
||||
target: "http://fast-node:8000"
|
||||
phases:
|
||||
- duration: 13200
|
||||
arrivalRate: 1
|
||||
scenarios:
|
||||
- flow:
|
||||
- get:
|
||||
url: "/mem-fast"
|
@ -13,6 +13,19 @@ services:
|
||||
- MODE=fast
|
||||
depends_on:
|
||||
- fast-node
|
||||
another-fast-node:
|
||||
build: .
|
||||
environment:
|
||||
- TYPE=node
|
||||
ports:
|
||||
- "8004:8000"
|
||||
another-fast-artillery:
|
||||
build: .
|
||||
environment:
|
||||
- TYPE=artillery
|
||||
- MODE=another-fast
|
||||
depends_on:
|
||||
- another-fast-node
|
||||
slow-node:
|
||||
build: .
|
||||
environment:
|
||||
@ -49,5 +62,6 @@ services:
|
||||
- TYPE=telemetry
|
||||
depends_on:
|
||||
- fast-node
|
||||
- another-fast-node
|
||||
- slow-node
|
||||
- plain-node
|
||||
|
@ -1 +0,0 @@
|
||||
{}
|
3012
spikes/leak/metrics.json
Normal file
3012
spikes/leak/metrics.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -7,13 +7,20 @@
|
||||
"dependencies": {
|
||||
"artillery": "^1.5.0-17",
|
||||
"clone": "^2.0.0",
|
||||
"date.js": "^0.3.1",
|
||||
"epimetheus": "^1.0.46",
|
||||
"good": "^7.0.2",
|
||||
"good-console": "^6.3.1",
|
||||
"good-squeeze": "^5.0.1",
|
||||
"got": "^6.6.3",
|
||||
"hapi": "^15.2.0",
|
||||
"hapi-webpack-dev-plugin": "^1.2.0",
|
||||
"internet-timestamp": "^0.0.1",
|
||||
"lodash.get": "^4.4.2",
|
||||
"minimist": "^1.2.0",
|
||||
"pretty-hrtime": "^1.0.3",
|
||||
"prom-client": "^6.1.2",
|
||||
"require-dir": "^0.3.1"
|
||||
"require-dir": "^0.3.1",
|
||||
"webpack": "^1.13.3"
|
||||
}
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ scrape_configs:
|
||||
# Override the global default and scrape targets from this job every 5 seconds.
|
||||
scrape_interval: 1s
|
||||
static_configs:
|
||||
- targets: ['fast-node:8000']
|
||||
- targets: ['fast-node:8000', 'another-fast-node:8000']
|
||||
- job_name: 'leak-slow'
|
||||
# Override the global default and scrape targets from this job every 5 seconds.
|
||||
scrape_interval: 1s
|
||||
|
@ -1,16 +0,0 @@
|
||||
GET /mem
|
||||
GET /cpu
|
||||
|
||||
cpu-node:
|
||||
build: .
|
||||
environment:
|
||||
- TYPE=node
|
||||
ports:
|
||||
- "8003:8000"
|
||||
cpu-artillery:
|
||||
build: .
|
||||
environment:
|
||||
- TYPE=artillery
|
||||
- MODE=cpu
|
||||
depends_on:
|
||||
- cpu-node
|
78
spikes/leak/scripts/metrics.js
Normal file
78
spikes/leak/scripts/metrics.js
Normal file
@ -0,0 +1,78 @@
|
||||
process.on('unhandledRejection', (reason) => {
|
||||
throw reason
|
||||
});
|
||||
|
||||
const argv = require('minimist')(process.argv.slice(2));
|
||||
const get = require('lodash.get');
|
||||
const date = require('date.js');
|
||||
const timestamp = require('internet-timestamp');
|
||||
const got = require('got');
|
||||
const url = require('url');
|
||||
|
||||
const conf = {
|
||||
query: argv.query,
|
||||
ago: argv.ago || '1h',
|
||||
step: argv.step || '1s',
|
||||
hostname: argv.hostname || 'localhost',
|
||||
};
|
||||
|
||||
if (!conf.query) {
|
||||
console.error(`
|
||||
Usage: node metrics.js --query={metric} --step={step} --ago={ago}
|
||||
node metrics.js --query=node_memory_heap_used_bytes --query=node_memory_heap_total_bytes
|
||||
`.trim());
|
||||
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// query=node_memory_heap_used_bytes&end=147989905368&step=15s
|
||||
const end = timestamp(new Date());
|
||||
const start = timestamp(date(`${conf.ago} ago`));
|
||||
|
||||
Promise.all(conf.query.map((query) => {
|
||||
return got(url.format({
|
||||
protocol: 'http:',
|
||||
slashes: true,
|
||||
port: '9090',
|
||||
hostname: conf.hostname,
|
||||
pathname: '/api/v1/query_range',
|
||||
query: {
|
||||
query: query,
|
||||
end: end,
|
||||
step: conf.step,
|
||||
start: start
|
||||
}
|
||||
}));
|
||||
})).then((res) => {
|
||||
return res.reduce((sum, r) => {
|
||||
const {
|
||||
data: {
|
||||
result
|
||||
}
|
||||
} = JSON.parse(r.body);
|
||||
|
||||
return result.reduce((sum, inst) => {
|
||||
const {
|
||||
values,
|
||||
metric: {
|
||||
instance,
|
||||
job,
|
||||
__name__
|
||||
}
|
||||
} = inst;
|
||||
|
||||
const oldJob = get(sum, job, {});
|
||||
const oldQuery = get(sum, `${job}.${__name__}`, {});
|
||||
|
||||
return Object.assign(sum, {
|
||||
[job]: Object.assign(oldJob, {
|
||||
[__name__]: Object.assign(oldQuery, {
|
||||
[instance]: values
|
||||
})
|
||||
})
|
||||
})
|
||||
}, sum);
|
||||
}, {});
|
||||
}).then((res) => {
|
||||
console.log(JSON.stringify(res, null, 2));
|
||||
});
|
@ -1,4 +1,5 @@
|
||||
const cp = require('child_process');
|
||||
const path = require('path');
|
||||
|
||||
const TYPE = process.env.TYPE;
|
||||
const MODE = process.env.MODE;
|
||||
@ -12,17 +13,15 @@ Usage: TYPE={type} node start.js
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
|
||||
const handler = ({
|
||||
node: () => {
|
||||
console.log('node src/index.js');
|
||||
return cp.exec('node src/index.js', {
|
||||
cwd: __dirname
|
||||
})
|
||||
},
|
||||
artillery: () => {
|
||||
console.log(`./node_modules/.bin/artillery run ${__dirname}/artillery-${MODE}.yml`);
|
||||
return cp.exec(`./node_modules/.bin/artillery run ${__dirname}/artillery-${MODE}.yml`)
|
||||
const conf = path.join(__dirname, '../artillery/artillery-${MODE}.yml');
|
||||
return cp.exec(`../node_modules/.bin/artillery run ${conf}`)
|
||||
}
|
||||
})[TYPE];
|
||||
|
82
spikes/leak/src/client/actions.js
Normal file
82
spikes/leak/src/client/actions.js
Normal file
@ -0,0 +1,82 @@
|
||||
const take = require('lodash.take');
|
||||
|
||||
const actions = {
|
||||
'UPDATE_STATS': (state, action) => {
|
||||
const data = (state[action.subscription] || {
|
||||
cpu: [],
|
||||
mem: [],
|
||||
disk: []
|
||||
});
|
||||
|
||||
const newData = ['cpu', 'mem', 'disk'].reduce((sum, key) => {
|
||||
const item = {
|
||||
...action.payload.stats[key],
|
||||
when: action.payload.when
|
||||
};
|
||||
|
||||
const prepended = [item].concat(data[key]);
|
||||
|
||||
return {
|
||||
...sum,
|
||||
[key]: take(prepended, state.windowSize)
|
||||
};
|
||||
}, {});
|
||||
|
||||
return {
|
||||
...state,
|
||||
[action.subscription]: newData
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = (state, action) => {
|
||||
return !actions[action.type] ? state : actions[action.type](state, action);
|
||||
};
|
||||
|
||||
module.exports.subscribe = (id) => (dispatch, getState) => {
|
||||
const {
|
||||
ws
|
||||
} = getState();
|
||||
|
||||
const p = new Promise((resolve, reject) => {
|
||||
ws.subscribe(`/stats/${id}`, (update, flag) => {
|
||||
dispatch({
|
||||
type: 'UPDATE_STATS',
|
||||
payload: update,
|
||||
subscription: id
|
||||
});
|
||||
}, (err) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
|
||||
return dispatch({
|
||||
type: 'SUBSCRIBE',
|
||||
payload: p
|
||||
});
|
||||
};
|
||||
|
||||
module.exports.unsubscribe = (id) => (dispatch, getState) => {
|
||||
const {
|
||||
ws
|
||||
} = getState();
|
||||
|
||||
const p = new Promise((resolve, reject) => {
|
||||
ws.unsubscribe(`/stats/${id}`, null, (err) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
|
||||
return dispatch({
|
||||
type: 'UNSUBSCRIBE',
|
||||
payload: p
|
||||
});
|
||||
};
|
71
spikes/leak/src/client/chart/base.js
Normal file
71
spikes/leak/src/client/chart/base.js
Normal file
@ -0,0 +1,71 @@
|
||||
const buildArray = require('build-array');
|
||||
const Chart = require('chart.js');
|
||||
const React = require('react');
|
||||
|
||||
module.exports = React.createClass({
|
||||
ref: function(name) {
|
||||
this._refs = this._refs || {};
|
||||
|
||||
return (el) => {
|
||||
this._refs[name] = el;
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
const {
|
||||
datasets = [],
|
||||
labels = 0,
|
||||
stacked = false,
|
||||
xAxe = false,
|
||||
yAxe = false,
|
||||
legend = false
|
||||
} = this.props;
|
||||
|
||||
const _labels = !Array.isArray(labels)
|
||||
? buildArray(labels).map((v, i) => '')
|
||||
: labels;
|
||||
|
||||
this._chart = new Chart(this._refs.component, {
|
||||
type: 'bar',
|
||||
stacked: stacked,
|
||||
responsive: true,
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: xAxe,
|
||||
stacked: stacked
|
||||
}],
|
||||
yAxes: [{
|
||||
display: yAxe,
|
||||
stacked: stacked
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: legend
|
||||
}
|
||||
},
|
||||
data: {
|
||||
labels:
|
||||
datasets: datasets
|
||||
}
|
||||
});
|
||||
},
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
const {
|
||||
datasets = [],
|
||||
labels = 0
|
||||
} = this.props;
|
||||
|
||||
this._chart.data.datasets = datasets;
|
||||
this._chart.data.labels = buildArray(labels).map((v, i) => '');
|
||||
this._chart.update(0);
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<canvas
|
||||
ref={this.ref('component')}
|
||||
width='400'
|
||||
height='400'
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
31
spikes/leak/src/client/chart/cpu.js
Normal file
31
spikes/leak/src/client/chart/cpu.js
Normal file
@ -0,0 +1,31 @@
|
||||
const buildArray = require('build-array');
|
||||
const Chart = require('./base');
|
||||
const React = require('react');
|
||||
|
||||
const colors = {
|
||||
user: 'rgb(255, 99, 132)',
|
||||
sys: 'rgb(255, 159, 64)'
|
||||
};
|
||||
|
||||
module.exports = ({
|
||||
data = {},
|
||||
windowSize
|
||||
}) => {
|
||||
const datasets = ['user', 'sys'].map((key) => {
|
||||
return {
|
||||
label: key,
|
||||
backgroundColor: colors[key],
|
||||
data: buildArray(windowSize).map((v, i) => ((data[i] || {})[key] || 0))
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<Chart
|
||||
datasets={datasets}
|
||||
stacked={true}
|
||||
labels={datasets[0].data.length}
|
||||
legend={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
35
spikes/leak/src/client/chart/disk.js
Normal file
35
spikes/leak/src/client/chart/disk.js
Normal file
@ -0,0 +1,35 @@
|
||||
const pretty = require('prettysize');
|
||||
const buildArray = require('build-array');
|
||||
const Chart = require('./base');
|
||||
const React = require('react');
|
||||
|
||||
const colors = {
|
||||
user: 'rgb(255, 99, 132)',
|
||||
sys: 'rgb(255, 159, 64)'
|
||||
};
|
||||
|
||||
module.exports = ({
|
||||
data = [],
|
||||
windowSize
|
||||
}) => {
|
||||
const datasets = [{
|
||||
label: 'disk',
|
||||
backgroundColor: 'rgb(255, 159, 64)',
|
||||
data: buildArray(windowSize).map((v, i) => {
|
||||
return data[i] ? (data[i].total - data[i].free) : 0;
|
||||
})
|
||||
}];
|
||||
|
||||
const labels = buildArray(windowSize).map((v, i) => {
|
||||
return data[i] ? pretty(datasets[0].data[i]) : '';
|
||||
});
|
||||
|
||||
return (
|
||||
<Chart
|
||||
datasets={datasets}
|
||||
labels={labels}
|
||||
legend={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
8
spikes/leak/src/client/chart/index.js
Normal file
8
spikes/leak/src/client/chart/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
CPU: require('./cpu'),
|
||||
cpu: require('./cpu'),
|
||||
Mem: require('./mem'),
|
||||
mem: require('./mem'),
|
||||
Disk: require('./disk'),
|
||||
disk: require('./disk')
|
||||
};
|
28
spikes/leak/src/client/chart/mem.js
Normal file
28
spikes/leak/src/client/chart/mem.js
Normal file
@ -0,0 +1,28 @@
|
||||
const buildArray = require('build-array');
|
||||
const Chart = require('./base');
|
||||
const React = require('react');
|
||||
|
||||
const colors = {
|
||||
user: 'rgb(255, 99, 132)',
|
||||
sys: 'rgb(255, 159, 64)'
|
||||
};
|
||||
|
||||
module.exports = ({
|
||||
data = [],
|
||||
windowSize
|
||||
}) => {
|
||||
const datasets = [{
|
||||
label: 'mem',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
data: buildArray(windowSize).map((v, i) => ((data[i] || {}).used || 0))
|
||||
}];
|
||||
|
||||
return (
|
||||
<Chart
|
||||
datasets={datasets}
|
||||
labels={datasets[0].data.length}
|
||||
legend={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
36
spikes/leak/src/client/index.js
Normal file
36
spikes/leak/src/client/index.js
Normal file
@ -0,0 +1,36 @@
|
||||
const ReactDOM = require('react-dom');
|
||||
const React = require('react');
|
||||
const Store = require('./store');
|
||||
const nes = require('nes/dist/client');
|
||||
|
||||
const {
|
||||
Client
|
||||
} = nes;
|
||||
|
||||
const client = new Client(`ws://${document.location.host}`);
|
||||
|
||||
client.connect((err) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
|
||||
const store = Store({
|
||||
ws: client,
|
||||
windowSize: 20
|
||||
});
|
||||
|
||||
const render = () => {
|
||||
const Root = require('./root');
|
||||
|
||||
ReactDOM.render(
|
||||
<Root store={store} />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
};
|
||||
|
||||
render();
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('./root', render);
|
||||
}
|
89
spikes/leak/src/client/matrix.js
Normal file
89
spikes/leak/src/client/matrix.js
Normal file
@ -0,0 +1,89 @@
|
||||
const React = require('react');
|
||||
const buildArray = require('build-array');
|
||||
const ReactRedux = require('react-redux');
|
||||
const Chart = require('./chart');
|
||||
const actions = require('./actions');
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
const {
|
||||
subscribe,
|
||||
unsubscribe
|
||||
} = actions;
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
windowSize: state.windowSize,
|
||||
data: state[ownProps.id]
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch, ownProps) => {
|
||||
return {
|
||||
subscribe: () => {
|
||||
return dispatch(subscribe(ownProps.id));
|
||||
},
|
||||
unsubscribe: () => {
|
||||
return unsubscribe(ownProps.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const Row = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(React.createClass({
|
||||
componentWillMount: function() {
|
||||
this.props.subscribe();
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
this.props.unsubscribe();
|
||||
},
|
||||
render: function() {
|
||||
const {
|
||||
data = {},
|
||||
windowSize
|
||||
} = this.props;
|
||||
|
||||
const charts = Object.keys(data).map((key, i, arr) => {
|
||||
if (!Chart[key]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const chart = React.createElement(Chart[key], {
|
||||
data: data[key],
|
||||
windowSize
|
||||
});
|
||||
|
||||
return (
|
||||
<div key={key} className={`col-xs-${12/arr.length}`}>
|
||||
{chart}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className='row'>
|
||||
{charts}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}));
|
||||
|
||||
module.exports = ({
|
||||
rows
|
||||
}) => {
|
||||
const _rows = buildArray(rows).map((v, i) => {
|
||||
return (
|
||||
<Row id={i} key={i} />
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
{_rows}
|
||||
</div>
|
||||
);
|
||||
};
|
24
spikes/leak/src/client/root.js
Normal file
24
spikes/leak/src/client/root.js
Normal file
@ -0,0 +1,24 @@
|
||||
const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
const ReactRedux = require('react-redux');
|
||||
const Matrix = require('./matrix');
|
||||
|
||||
const {
|
||||
AppContainer
|
||||
} = ReactHotLoader;
|
||||
|
||||
const {
|
||||
Provider
|
||||
} = ReactRedux;
|
||||
|
||||
module.exports = ({
|
||||
store
|
||||
}) => {
|
||||
return (
|
||||
<AppContainer>
|
||||
<Provider store={store}>
|
||||
<Matrix rows={4} />
|
||||
</Provider>
|
||||
</AppContainer>
|
||||
);
|
||||
};
|
21
spikes/leak/src/client/store.js
Normal file
21
spikes/leak/src/client/store.js
Normal file
@ -0,0 +1,21 @@
|
||||
const createLogger = require('redux-logger');
|
||||
const promiseMiddleware = require('redux-promise-middleware').default;
|
||||
const thunk = require('redux-thunk').default;
|
||||
const redux = require('redux');
|
||||
const reducer = require('./actions');
|
||||
|
||||
const {
|
||||
createStore,
|
||||
compose,
|
||||
applyMiddleware
|
||||
} = redux;
|
||||
|
||||
module.exports = (state = Object.freeze({})) => {
|
||||
return createStore(reducer, state, applyMiddleware(
|
||||
createLogger({
|
||||
predicate: (getState, action) => action.type !== 'UPDATE_STATS'
|
||||
}),
|
||||
promiseMiddleware(),
|
||||
thunk
|
||||
));
|
||||
};
|
@ -1,17 +0,0 @@
|
||||
module.exports = [{
|
||||
register: require('good'),
|
||||
options: {
|
||||
reporters: {
|
||||
console: [{
|
||||
module: 'good-squeeze',
|
||||
name: 'Squeeze',
|
||||
args: [{
|
||||
response: '*',
|
||||
log: '*'
|
||||
}]
|
||||
}, {
|
||||
module: 'good-console'
|
||||
}, 'stdout']
|
||||
}
|
||||
}
|
||||
}];
|
29
spikes/leak/src/server/plugins.js
Normal file
29
spikes/leak/src/server/plugins.js
Normal file
@ -0,0 +1,29 @@
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
|
||||
const cfg = require('../webpack.config.js');
|
||||
|
||||
module.exports = [
|
||||
require('inert'), {
|
||||
register: require('good'),
|
||||
options: {
|
||||
reporters: {
|
||||
console: [{
|
||||
module: 'good-squeeze',
|
||||
name: 'Squeeze',
|
||||
args: [{
|
||||
response: '*',
|
||||
log: '*'
|
||||
}]
|
||||
}, {
|
||||
module: 'good-console'
|
||||
}, 'stdout']
|
||||
}
|
||||
}
|
||||
}, {
|
||||
register: require('hapi-webpack-dev-plugin'),
|
||||
options: {
|
||||
compiler: webpack(cfg),
|
||||
devIndex: path.join(__dirname, '../static')
|
||||
}
|
||||
}];
|
58
spikes/leak/src/webpack.config.js
Normal file
58
spikes/leak/src/webpack.config.js
Normal file
@ -0,0 +1,58 @@
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
|
||||
const config = {
|
||||
debug: true,
|
||||
devtool: 'source-map',
|
||||
context: path.join(__dirname, './client'),
|
||||
app: path.join(__dirname, './client/index.js'),
|
||||
entry: [
|
||||
'webpack-dev-server/client?http://localhost:8080',
|
||||
'webpack/hot/only-dev-server',
|
||||
'react-hot-loader/patch',
|
||||
'./index.js'
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, '../static'),
|
||||
publicPath: '/static/',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.ProvidePlugin({
|
||||
'd3': 'd3'
|
||||
})
|
||||
],
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /js?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './client')
|
||||
],
|
||||
loaders: ['babel']
|
||||
}, {
|
||||
test: /\.json?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './client')
|
||||
],
|
||||
loaders: ['json']
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
const devServer = {
|
||||
hot: true,
|
||||
compress: true,
|
||||
lazy: false,
|
||||
publicPath: config.output.publicPath,
|
||||
historyApiFallback: {
|
||||
index: '../static/index.html'
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Object.assign({
|
||||
devServer
|
||||
}, config);
|
973
spikes/leak/static/index.html
Normal file
973
spikes/leak/static/index.html
Normal file
@ -0,0 +1,973 @@
|
||||
<!doctype html>
|
||||
<html lang='en-US'>
|
||||
<head>
|
||||
<title>React Boilerplate</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
|
||||
<style>
|
||||
.container-fluid,
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.row.reverse {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.col.reverse {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.col-xs,
|
||||
.col-xs-1,
|
||||
.col-xs-2,
|
||||
.col-xs-3,
|
||||
.col-xs-4,
|
||||
.col-xs-5,
|
||||
.col-xs-6,
|
||||
.col-xs-7,
|
||||
.col-xs-8,
|
||||
.col-xs-9,
|
||||
.col-xs-10,
|
||||
.col-xs-11,
|
||||
.col-xs-12,
|
||||
.col-xs-offset-0,
|
||||
.col-xs-offset-1,
|
||||
.col-xs-offset-2,
|
||||
.col-xs-offset-3,
|
||||
.col-xs-offset-4,
|
||||
.col-xs-offset-5,
|
||||
.col-xs-offset-6,
|
||||
.col-xs-offset-7,
|
||||
.col-xs-offset-8,
|
||||
.col-xs-offset-9,
|
||||
.col-xs-offset-10,
|
||||
.col-xs-offset-11,
|
||||
.col-xs-offset-12 {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.col-xs {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
-ms-flex-preferred-size: 0;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-xs-1 {
|
||||
-ms-flex-preferred-size: 8.33333333%;
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xs-2 {
|
||||
-ms-flex-preferred-size: 16.66666667%;
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xs-3 {
|
||||
-ms-flex-preferred-size: 25%;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-xs-4 {
|
||||
-ms-flex-preferred-size: 33.33333333%;
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xs-5 {
|
||||
-ms-flex-preferred-size: 41.66666667%;
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xs-6 {
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-xs-7 {
|
||||
-ms-flex-preferred-size: 58.33333333%;
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xs-8 {
|
||||
-ms-flex-preferred-size: 66.66666667%;
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xs-9 {
|
||||
-ms-flex-preferred-size: 75%;
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-xs-10 {
|
||||
-ms-flex-preferred-size: 83.33333333%;
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xs-11 {
|
||||
-ms-flex-preferred-size: 91.66666667%;
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-xs-12 {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-xs-offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col-xs-offset-1 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-xs-offset-2 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-xs-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.col-xs-offset-4 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-xs-offset-5 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-xs-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.col-xs-offset-7 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-xs-offset-8 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-xs-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.col-xs-offset-10 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-xs-offset-11 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.start-xs {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-xs {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-xs {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-xs {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-xs {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-xs {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-xs {
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-xs {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.first-xs {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.last-xs {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
.container {
|
||||
width: 49rem;
|
||||
}
|
||||
|
||||
.col-sm,
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-sm-offset-0,
|
||||
.col-sm-offset-1,
|
||||
.col-sm-offset-2,
|
||||
.col-sm-offset-3,
|
||||
.col-sm-offset-4,
|
||||
.col-sm-offset-5,
|
||||
.col-sm-offset-6,
|
||||
.col-sm-offset-7,
|
||||
.col-sm-offset-8,
|
||||
.col-sm-offset-9,
|
||||
.col-sm-offset-10,
|
||||
.col-sm-offset-11,
|
||||
.col-sm-offset-12 {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.col-sm {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
-ms-flex-preferred-size: 0;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-sm-1 {
|
||||
-ms-flex-preferred-size: 8.33333333%;
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-2 {
|
||||
-ms-flex-preferred-size: 16.66666667%;
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-3 {
|
||||
-ms-flex-preferred-size: 25%;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-sm-4 {
|
||||
-ms-flex-preferred-size: 33.33333333%;
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-5 {
|
||||
-ms-flex-preferred-size: 41.66666667%;
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-sm-7 {
|
||||
-ms-flex-preferred-size: 58.33333333%;
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-8 {
|
||||
-ms-flex-preferred-size: 66.66666667%;
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-9 {
|
||||
-ms-flex-preferred-size: 75%;
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-sm-10 {
|
||||
-ms-flex-preferred-size: 83.33333333%;
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-11 {
|
||||
-ms-flex-preferred-size: 91.66666667%;
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-sm-offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col-sm-offset-1 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-2 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.col-sm-offset-4 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-5 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.col-sm-offset-7 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-8 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.col-sm-offset-10 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-11 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.start-sm {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-sm {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-sm {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-sm {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-sm {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-sm {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-sm {
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-sm {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.first-sm {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.last-sm {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 64em) {
|
||||
.container {
|
||||
width: 65rem;
|
||||
}
|
||||
|
||||
.col-md,
|
||||
.col-md-1,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12,
|
||||
.col-md-offset-0,
|
||||
.col-md-offset-1,
|
||||
.col-md-offset-2,
|
||||
.col-md-offset-3,
|
||||
.col-md-offset-4,
|
||||
.col-md-offset-5,
|
||||
.col-md-offset-6,
|
||||
.col-md-offset-7,
|
||||
.col-md-offset-8,
|
||||
.col-md-offset-9,
|
||||
.col-md-offset-10,
|
||||
.col-md-offset-11,
|
||||
.col-md-offset-12 {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.col-md {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
-ms-flex-preferred-size: 0;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-md-1 {
|
||||
-ms-flex-preferred-size: 8.33333333%;
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-md-2 {
|
||||
-ms-flex-preferred-size: 16.66666667%;
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-md-3 {
|
||||
-ms-flex-preferred-size: 25%;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-md-4 {
|
||||
-ms-flex-preferred-size: 33.33333333%;
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-md-5 {
|
||||
-ms-flex-preferred-size: 41.66666667%;
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-md-6 {
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-md-7 {
|
||||
-ms-flex-preferred-size: 58.33333333%;
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-md-8 {
|
||||
-ms-flex-preferred-size: 66.66666667%;
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-md-9 {
|
||||
-ms-flex-preferred-size: 75%;
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-md-10 {
|
||||
-ms-flex-preferred-size: 83.33333333%;
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-md-11 {
|
||||
-ms-flex-preferred-size: 91.66666667%;
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-md-12 {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-md-offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col-md-offset-1 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-md-offset-2 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-md-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.col-md-offset-4 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-md-offset-5 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-md-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.col-md-offset-7 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-md-offset-8 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-md-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.col-md-offset-10 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-md-offset-11 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.start-md {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-md {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-md {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-md {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-md {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-md {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-md {
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-md {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.first-md {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.last-md {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 75em) {
|
||||
.container {
|
||||
width: 76rem;
|
||||
}
|
||||
|
||||
.col-lg,
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12,
|
||||
.col-lg-offset-0,
|
||||
.col-lg-offset-1,
|
||||
.col-lg-offset-2,
|
||||
.col-lg-offset-3,
|
||||
.col-lg-offset-4,
|
||||
.col-lg-offset-5,
|
||||
.col-lg-offset-6,
|
||||
.col-lg-offset-7,
|
||||
.col-lg-offset-8,
|
||||
.col-lg-offset-9,
|
||||
.col-lg-offset-10,
|
||||
.col-lg-offset-11,
|
||||
.col-lg-offset-12 {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.col-lg {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
-ms-flex-preferred-size: 0;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-lg-1 {
|
||||
-ms-flex-preferred-size: 8.33333333%;
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
-ms-flex-preferred-size: 16.66666667%;
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-3 {
|
||||
-ms-flex-preferred-size: 25%;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-lg-4 {
|
||||
-ms-flex-preferred-size: 33.33333333%;
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-5 {
|
||||
-ms-flex-preferred-size: 41.66666667%;
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-6 {
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-lg-7 {
|
||||
-ms-flex-preferred-size: 58.33333333%;
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
-ms-flex-preferred-size: 66.66666667%;
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-9 {
|
||||
-ms-flex-preferred-size: 75%;
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-lg-10 {
|
||||
-ms-flex-preferred-size: 83.33333333%;
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-11 {
|
||||
-ms-flex-preferred-size: 91.66666667%;
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-12 {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-lg-offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col-lg-offset-1 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-offset-2 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.col-lg-offset-4 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-offset-5 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.col-lg-offset-7 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-offset-8 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
|
||||
.col-lg-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.col-lg-offset-10 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
|
||||
.col-lg-offset-11 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
|
||||
.start-lg {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-lg {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-lg {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-lg {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-lg {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-lg {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-lg {
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-lg {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.first-lg {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.last-lg {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='root'></div>
|
||||
<script src='/static/bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user