Skip to content

Commit 8fe7cc6

Browse files
basetenbaseten
committed
Add examples site
1 parent e5b0027 commit 8fe7cc6

14 files changed

+120
-9
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
/dist
33
build
44
node_modules
5+
/website

‎.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
/.*
22
coverage
33
examples
4+
img
45
jest
56
src
67
test
8+
website
9+
index.html
710
jest.config.js
811
rollup.config.js

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# react-css-transform
1+
# React CSS Transform
22

33
A helper library to handle nested 2D and 3D CSS transforms using matrix multiplication,
44
drastically reducing the number of nested DOM elements required and making complex
@@ -7,4 +7,4 @@ combinations of nested transformations trivial.
77
`<Transform2d>` was initially developed while I was working at [Pest Pulse](https://www.pestpulse.com/)
88
for a zoomable/pannable map with markers.
99

10-
More docs and examples coming soon!
10+
More docs coming soon!

‎examples/3d-cubes/package-lock.json

Lines changed: 17 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/3d-cubes/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"gl-matrix": "^3.0.0",
77
"prop-types": "^15.7.2",
88
"react": "^16.8.6",
9+
"react-css-transform": "^1.1.0",
910
"react-dom": "^16.8.6"
1011
},
1112
"devDependencies": {

‎examples/3d-cubes/webpack/webpack.base.config.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// Common client-side webpack configuration used by
2-
// webpack.client.rails.hot.config and webpack.client.rails.build.config.
3-
41
const webpack = require('webpack');
52
const { resolve } = require('path');
63
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

‎examples/3d-cubes/webpack/webpack.build.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@ const TerserPlugin = require('terser-webpack-plugin');
66
const { env } = require('process');
77

88
const config = require('./webpack.base.config');
9+
910
const projectPath = resolve(__dirname, '..');
11+
const rootPath = resolve(projectPath, '..', '..');
1012

1113
const devBuild = env.NODE_ENV === 'development';
1214

1315
const buildConfig = {
1416
output: {
1517
filename: '[name]-[chunkhash].js',
1618
chunkFilename: '[name]-[chunkhash].chunk.js',
17-
path: `${projectPath}/build`,
19+
path: `${rootPath}/website/3d-cubes`,
1820
},
1921
};
2022

‎img/3d-cubes.gif

1.8 MB
Loading

‎index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>React CSS Transform Examples</title>
7+
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
8+
<link href="website/website.css" rel="stylesheet"></head>
9+
<body>
10+
<div class="wrapper">
11+
<h1>React CSS Transform Examples</h1>
12+
<ul class="examples-list">
13+
<li class="examples-list__item"><a class="examples-list__link" href="website/3d-cubes/index.html">3D Cubes</a></li>
14+
</ul>
15+
</div>
16+
</body>
17+
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"build:esm": "cross-env BABEL_ENV=esm babel src -d dist/esm",
1313
"build:cjs": "cross-env BABEL_ENV=cjs babel src -d dist/cjs",
1414
"build:umd": "rollup -c",
15-
"xprebuild": "npm run test",
15+
"prebuild": "npm run test",
1616
"build": "npm run build:umd && npm run build:esm && npm run build:cjs",
1717
"prepublishOnly": "npm run build",
1818
"lint:eslint": "eslint --config .eslintrc.json",

‎website/3d-cubes/3d-cubes-3aa152466a97c5ae7064.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/3d-cubes/3d-cubes-4f5effff8612d47bb681.js

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/3d-cubes/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>3D Cubes</title>
7+
<link href="3d-cubes-3aa152466a97c5ae7064.css" rel="stylesheet"></head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="text/javascript" src="3d-cubes-4f5effff8612d47bb681.js"></script></body>
11+
</html>

‎website/website.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
body {
2+
font-family: 'Roboto', sans-serif;
3+
font-size: 24px;
4+
line-height: 1.2;
5+
margin: 0;
6+
}
7+
8+
.wrapper {
9+
margin: 16px;
10+
}
11+
12+
.examples-list {
13+
margin: 0;
14+
padding: 0;
15+
list-style: none;
16+
}
17+
18+
.examples-list__item {
19+
margin: 0;
20+
padding: 0;
21+
list-style: none;
22+
}
23+
24+
.examples-list__link {
25+
color: #007FFF;
26+
text-decoration: none;
27+
}
28+
29+
.examples-list__link:hover {
30+
color: #007FFF;
31+
text-decoration: underline;
32+
}

0 commit comments

Comments
 (0)