Merge pull request #2 from phuoc-ng/react-snap

React snap

client/App.jsx

@@ -1,8 +1,17 @@
 import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import Home from './Home';
+import Centering from './layouts/Centering';
 
 const App = () => {
     return (
-        <div>Test</div>
+        <Router>
+            <Switch>
+                <Route exact={true} path='/'><Home /></Route>
+                <Route exact={true} path='/centering'><Centering /></Route>
+            </Switch>
+        </Router>
     );
 };
 

client/DetailsLayout.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Layout from './Layout';
+
+const DetailsLayout = ({ name, children }) => {
+    return (
+        <Layout>
+            <div className="flex items-center mv5 f2">
+                <Link to="/" className="link">Home</Link>
+                <div className="ph2">/</div>
+                <div className="f2">{name}</div>
+            </div>
+
+            <div className="mb5">
+                {children}
+            </div>
+        </Layout>
+    );
+};
+
+export default DetailsLayout;

client/Home.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import CenterCover from './covers/CenterCover';
+import Layout from './Layout';
+
+const Home = () => {
+    return (
+        <Layout>
+            <h2 className="f2 lh-copy">Pattern</h2>
+
+            <div className="flex flex-wrap justify-between">
+                <div className="w-30">
+                    <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                        <CenterCover />
+                        <h4 className="f4 mv0 pv3">Centering</h4>
+                    </Link>
+                </div>
+            </div>
+        </Layout>
+    );
+};
+
+export default Home;

client/Layout.jsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+
+const Layout = ({ children }) => {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+    return (
+        <div className="mw8 center">
+            {children}
+        </div>
+    );
+};
+
+export default Layout;

client/covers/CenterCover.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Dot from '../placeholders/Dot';
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+
+const CenterCover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <Dot />
+                <div className="w-50 mv1">
+                    <Line />
+                </div>
+                <div className="w-40 mv1">
+                    <Line />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default CenterCover;

client/index.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { hydrate, render } from 'react-dom';
 
 import App from './App';
 
-render(<App />, document.getElementById('root'));
+const rootElement = document.getElementById('root');
+rootElement.hasChildNodes()
+    ? hydrate(<App />, rootElement)
+    : render(<App />, rootElement);

client/layouts/Centering.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+
+const Centering = () => {
+    return (
+        <DetailsLayout name="Centering">
+            <BrowserFrame>
+                <div className="h-100 flex flex-column items-center justify-center">
+                    <div className="f1 b">CENTER</div>
+                </div>
+            </BrowserFrame>
+        </DetailsLayout>
+    );
+};
+
+export default Centering;

client/placeholders/BrowserFrame.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const BrowserFrame = ({ children }) => {
+    return (
+        <div className="br2 ba b--black-20">
+            <div className="flex pa3 bb b--black-20 items-center">
+                <div className="br-100 mr1 w1 h1 bg-red" />
+                <div className="br-100 mr1 w1 h1 bg-gold" />
+                <div className="br-100 mr1 w1 h1 bg-red" />
+            </div>
+            <div style={{ height: '512px' }}>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default BrowserFrame;

client/placeholders/Dot.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Dot = () => {
+    return (
+        <div className="bg-black-30 br-pill w1 h1" />
+    );
+};
+
+export default Dot;

client/placeholders/Frame.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Frame = ({ children }) => {
+    return (
+        <div
+            className="ba b--black-30 br2"
+            style={{
+                height: '100px',
+                width: '100px',
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Frame;

client/placeholders/Line.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Line = () => {
+    return (
+        <div
+            className="w-100 bg-black-30"
+            style={{ height: '1px' }}
+        />
+    );
+};
+
+export default Line;

package.json

@@ -1,15 +1,24 @@
 {
     "name": "csslayout",
     "scripts": {
-        "dev": "parcel client/index.html --out-dir dist/client",
-        "build": "parcel build client/index.html --out-dir dist/client"
+        "dev": "parcel client/index.html --out-dir dist",
+        "build": "parcel build client/index.html --out-dir dist",
+        "postbuild": "react-snap"
     },
     "dependencies": {
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
-        "react-router-dom": "^5.1.2"
+        "react-router-dom": "^5.1.2",
+        "react-snap": "^1.23.0"
     },
     "devDependencies": {
         "parcel-bundler": "^1.12.4"
+    },
+    "reactSnap": {
+        "source": "dist",
+        "minifyHtml": {
+            "collapseWhitespace": false,
+            "removeComments": false
+        }
     }
 }