Skip to content

Commit 609e1e3

Browse files
jscottsmithjscottsmith
committed
move example to its own folder; create separate webpack config for example
1 parent d5df8b4 commit 609e1e3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+205
-17
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
node_modules
2-
/dist
2+
*dist
33
npm-debug.log

‎babelrc.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
module.exports = ({ server } = {}) => ({
2-
presets: [
3-
[ 'env', {
4-
targets: server ? { node: 4 } : { browsers: ['> 5%', 'last 2 versions', 'ie 11'] }
5-
} ],
6-
7-
'react',
8-
9-
'stage-0',
10-
],
11-
});
2+
presets: [
3+
[
4+
'env', {
5+
targets: server ? { node: 4 } : { browsers: ['> 5%', 'last 2 versions', 'ie 11'] },
6+
},
7+
],
8+
'react',
9+
'stage-0',
10+
],
11+
});

‎examples/ParallaxExample/babelrc.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = ({ server } = {}) => ({
2+
presets: [
3+
[
4+
'env', {
5+
targets: server ? { node: 4 } : { browsers: ['> 5%', 'last 2 versions', 'ie 11'] },
6+
},
7+
],
8+
'react',
9+
'stage-0',
10+
],
11+
});

‎examples/client.js ‎examples/ParallaxExample/client.js

File renamed without changes.

‎examples/components/Intro/Intro.js ‎examples/ParallaxExample/components/Intro/Intro.js

File renamed without changes.

‎examples/components/Intro/Intro.scss ‎examples/ParallaxExample/components/Intro/Intro.scss

File renamed without changes.

‎examples/components/Intro/hemispheres.svg ‎examples/ParallaxExample/components/Intro/hemispheres.svg

File renamed without changes.

‎examples/components/Intro/ring-of-dots.svg ‎examples/ParallaxExample/components/Intro/ring-of-dots.svg

File renamed without changes.

‎examples/components/IntroCopy/IntroCopy.js ‎examples/ParallaxExample/components/IntroCopy/IntroCopy.js

File renamed without changes.

‎examples/components/IntroCopy/IntroCopy.scss ‎examples/ParallaxExample/components/IntroCopy/IntroCopy.scss

File renamed without changes.

‎examples/components/Marquee/Marquee.js ‎examples/ParallaxExample/components/Marquee/Marquee.js

File renamed without changes.

‎examples/components/Marquee/Marquee.scss ‎examples/ParallaxExample/components/Marquee/Marquee.scss

File renamed without changes.

‎examples/components/Marquee/box-bg.svg ‎examples/ParallaxExample/components/Marquee/box-bg.svg

File renamed without changes.

‎examples/components/Marquee/box-outline.svg ‎examples/ParallaxExample/components/Marquee/box-outline.svg

File renamed without changes.

‎examples/components/Overlap/Overlap.js ‎examples/ParallaxExample/components/Overlap/Overlap.js

File renamed without changes.

‎examples/components/Overlap/Overlap.scss ‎examples/ParallaxExample/components/Overlap/Overlap.scss

File renamed without changes.

‎examples/components/Overlap/circle-rings.svg ‎examples/ParallaxExample/components/Overlap/circle-rings.svg

File renamed without changes.

‎examples/components/Overlap/circle.svg ‎examples/ParallaxExample/components/Overlap/circle.svg

File renamed without changes.

‎examples/components/ParallaxExample/ParallaExample.scss ‎examples/ParallaxExample/components/ParallaxExample/ParallaExample.scss

File renamed without changes.

‎examples/components/ParallaxExample/ParallaxExample.js ‎examples/ParallaxExample/components/ParallaxExample/ParallaxExample.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default class ParallaxExample extends Component {
2525
<Marquee />
2626
<Overlap />
2727
<TriangleGrid />
28-
28+
2929
{/** Shared SVG patterns */}
3030
<div className="visually-hidden">
3131
<Svg svg={noisePattern} />

‎examples/components/ShapeField/ShapeField.js ‎examples/ParallaxExample/components/ShapeField/ShapeField.js

File renamed without changes.

‎examples/components/ShapeField/ShapeField.scss ‎examples/ParallaxExample/components/ShapeField/ShapeField.scss

File renamed without changes.

‎examples/components/ShapeField/cluster-01-hemi-left.svg ‎examples/ParallaxExample/components/ShapeField/cluster-01-hemi-left.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-01-hemi-right.svg ‎examples/ParallaxExample/components/ShapeField/cluster-01-hemi-right.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-01-rect.svg ‎examples/ParallaxExample/components/ShapeField/cluster-01-rect.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-02-hemi.svg ‎examples/ParallaxExample/components/ShapeField/cluster-02-hemi.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-02-triangle-big.svg ‎examples/ParallaxExample/components/ShapeField/cluster-02-triangle-big.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-02-triangle-small.svg ‎examples/ParallaxExample/components/ShapeField/cluster-02-triangle-small.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-02-triangle.svg ‎examples/ParallaxExample/components/ShapeField/cluster-02-triangle.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-03-triangle-big.svg ‎examples/ParallaxExample/components/ShapeField/cluster-03-triangle-big.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-03-triangle-bottom.svg ‎examples/ParallaxExample/components/ShapeField/cluster-03-triangle-bottom.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-03-triangle-top.svg ‎examples/ParallaxExample/components/ShapeField/cluster-03-triangle-top.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-04-hemi-right.svg ‎examples/ParallaxExample/components/ShapeField/cluster-04-hemi-right.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-04-square.svg ‎examples/ParallaxExample/components/ShapeField/cluster-04-square.svg

File renamed without changes.

‎examples/components/ShapeField/cluster-04-triangle.svg ‎examples/ParallaxExample/components/ShapeField/cluster-04-triangle.svg

File renamed without changes.

‎examples/components/Svg/Svg.js ‎examples/ParallaxExample/components/Svg/Svg.js

File renamed without changes.

‎examples/components/Svg/Svg.scss ‎examples/ParallaxExample/components/Svg/Svg.scss

File renamed without changes.

‎examples/components/TriangleGrid/TriangleGrid.js ‎examples/ParallaxExample/components/TriangleGrid/TriangleGrid.js

File renamed without changes.

‎examples/components/TriangleGrid/TriangleGrid.scss ‎examples/ParallaxExample/components/TriangleGrid/TriangleGrid.scss

File renamed without changes.

‎examples/components/TriangleGrid/grid-purple.svg ‎examples/ParallaxExample/components/TriangleGrid/grid-purple.svg

File renamed without changes.

‎examples/components/TriangleGrid/grid-white.svg ‎examples/ParallaxExample/components/TriangleGrid/grid-white.svg

File renamed without changes.

‎examples/components/index.js ‎examples/ParallaxExample/components/index.js

File renamed without changes.

‎examples/components/shared/angle-dark-top.svg ‎examples/ParallaxExample/components/shared/angle-dark-top.svg

File renamed without changes.

‎examples/components/shared/divider.svg ‎examples/ParallaxExample/components/shared/divider.svg

File renamed without changes.

‎examples/components/shared/dot-pattern.svg ‎examples/ParallaxExample/components/shared/dot-pattern.svg

File renamed without changes.

‎examples/components/shared/noise-pattern.svg ‎examples/ParallaxExample/components/shared/noise-pattern.svg

File renamed without changes.

‎examples/index.html ‎examples/ParallaxExample/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:700i" rel="stylesheet">
99
</head>
1010
<body>
11-
<div id='root'>$react</div>
12-
<script src="/static/bundle.js"></script>
11+
<div id="root">$react</div>
12+
<script src="static/bundle.js"></script>
1313
</body>
1414
</html>

‎examples/ParallaxExample/package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "react-scroll-parallax",
3+
"version": "1.0.0",
4+
"description": "React component to create parallax scrolling effects",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "webpack --progress --colors --watch",
8+
"build:prod": "cross-env NODE_ENV=production webpack"
9+
},
10+
"keywords": [
11+
"react",
12+
"parallax",
13+
"scroll",
14+
"component"
15+
],
16+
"author": "J Scott Smith",
17+
"license": "ISC",
18+
"dependencies": {
19+
"express": "^4.14.1",
20+
"lodash": "^4.17.4",
21+
"react": "^15.4.2",
22+
"react-dom": "^15.4.2"
23+
},
24+
"devDependencies": {
25+
"babel-core": "^6.23.1",
26+
"babel-loader": "^6.3.2",
27+
"babel-preset-env": "^1.1.8",
28+
"babel-preset-react": "^6.23.0",
29+
"cross-env": "^3.1.4",
30+
"css-loader": "^0.28.0",
31+
"file-loader": "^0.11.1",
32+
"node-sass": "^4.5.0",
33+
"postcss-loader": "^1.3.3",
34+
"raw-loader": "^0.5.1",
35+
"sass-loader": "^6.0.3",
36+
"style-loader": "^0.16.1",
37+
"url-loader": "^0.5.8",
38+
"webpack": "^2.2.1",
39+
"webpack-node-externals": "^1.5.4"
40+
}
41+
}

‎postcss.config.js ‎examples/ParallaxExample/postcss.config.js

File renamed without changes.

‎examples/server.js ‎examples/ParallaxExample/server.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import { ParallaxExample } from 'components';
88

99
const app = express();
1010

11-
app.use('/static', express.static(path.resolve(__dirname, '../dist')));
12-
app.use('/static', express.static(__dirname));
11+
app.use('/static', express.static(path.resolve(__dirname, './')));
12+
// app.use('/static', express.static(__dirname));
1313

1414
app.get('*', (req, res) => {
15-
const html = fs.readFileSync(path.resolve(__dirname, './index.html')).toString();
15+
const html = fs.readFileSync(path.resolve(__dirname, '../index.html')).toString();
1616
const markup = ReactServer.renderToString(<ParallaxExample />);
1717

1818
res.send(html.replace('$react', markup));

‎examples/styles.css ‎examples/ParallaxExample/styles.css

File renamed without changes.

‎examples/styles/colors.scss ‎examples/ParallaxExample/styles/colors.scss

File renamed without changes.

‎examples/ParallaxExample/webpack.config.js

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
const PRODUCTION = process.env.NODE_ENV === 'production';
2+
3+
const path = require('path');
4+
const webpack = require('webpack');
5+
const createBabelConfig = require('./babelrc');
6+
const nodeExternals = require('webpack-node-externals');
7+
const MinifierPlugin = webpack.optimize.UglifyJsPlugin;
8+
9+
const clientConfig = {
10+
entry: path.resolve('./client.js'),
11+
output: {
12+
path: path.resolve('./dist'),
13+
filename: 'bundle.js',
14+
},
15+
16+
plugins: [
17+
PRODUCTION && new MinifierPlugin(),
18+
].filter(e => e),
19+
20+
resolve: {
21+
alias: {
22+
'react-scroll-parallax': path.resolve('../../src'),
23+
'components': path.resolve('./components'),
24+
},
25+
},
26+
27+
module: {
28+
rules: [
29+
{
30+
test: /\.js$/,
31+
include: [
32+
path.resolve('./'),
33+
path.resolve('../../src'),
34+
],
35+
loader: 'babel-loader',
36+
query: createBabelConfig(),
37+
},
38+
{
39+
test: /\.(png|jpg|jpeg|gif|svg|cur)$/,
40+
loader: 'url-loader',
41+
include: [
42+
path.resolve('./'),
43+
],
44+
},
45+
{
46+
test: /\.scss$/,
47+
include: [
48+
path.resolve('./'),
49+
],
50+
loaders: [
51+
'style-loader',
52+
{
53+
loader: 'css-loader',
54+
query: {
55+
localIdentName: '[name]_[local]_[hash:base64:3]',
56+
importLoaders: 1,
57+
},
58+
},
59+
'postcss-loader',
60+
{
61+
loader: 'sass-loader',
62+
query: {
63+
outputStyle: 'expanded',
64+
},
65+
},
66+
],
67+
},
68+
],
69+
},
70+
};
71+
72+
const serverConfig = {
73+
target: 'node',
74+
75+
watch: true,
76+
77+
externals: [nodeExternals()],
78+
79+
node: {
80+
__dirname: true,
81+
},
82+
83+
entry: path.resolve('./server.js'),
84+
output: {
85+
path: path.resolve('./dist'),
86+
filename: 'server.js',
87+
},
88+
89+
plugins: [
90+
PRODUCTION && new MinifierPlugin(),
91+
].filter(e => e),
92+
93+
resolve: {
94+
alias: {
95+
'react-scroll-parallax': path.resolve('../../src/'),
96+
'components': path.resolve('./components'),
97+
},
98+
},
99+
100+
module: {
101+
rules: [
102+
{
103+
test: /\.js$/,
104+
include: [
105+
path.resolve('./'),
106+
path.resolve('../../src'),
107+
],
108+
loader: 'babel-loader',
109+
query: createBabelConfig({ server: true }),
110+
},
111+
{
112+
test: /\.scss$/,
113+
include: [
114+
path.resolve('./'),
115+
],
116+
loaders: [
117+
{
118+
loader: 'css-loader/locals',
119+
query: {
120+
localIdentName: '[name]_[local]_[hash:base64:3]',
121+
sourceMap: false,
122+
},
123+
},
124+
'postcss-loader', {
125+
loader: 'sass-loader',
126+
query: {
127+
outputStyle: 'expanded',
128+
},
129+
},
130+
],
131+
},
132+
],
133+
},
134+
};
135+
136+
module.exports = [clientConfig, serverConfig];

0 commit comments

Comments
 (0)