add docs and repl to website

Author: ajaymathur

website/package.json

@@ -2,6 +2,7 @@
     "name": "website",
     "version": "0.0.0",
     "dependencies": {
+        "@atlaskit/css-reset": "^3.0.6",
         "bolt": "^0.22.6",
         "css-loader": "^2.1.1",
         "extract-react-types": "^0.16.0",

website/src/app.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactMarkdown from 'react-markdown';
-import { HashRouter as Router, Route, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import '@atlaskit/css-reset';
 
-import docs from '../DOCS';
 import Header from './components/Header';
 import Home from './pages/home';
 import PackageDoc from './pages/PackageDoc';

website/src/components/Header/index.js

@@ -4,8 +4,20 @@ import './style.css';
 
 export default () => (
   <nav>
-    <Link to="/">Home</Link>
-    <Link to="/packages">Packages</Link>
-    <Link to="/repl">Try it out</Link>
+    <div className="side-bar">
+      <h1>Pretty proptypes</h1>
+      <div className="header-controls">
+        <label>
+          Type system:
+          <select>
+            <option value="flow">Flow</option>
+            <option value="typescript">TypeScript</option>
+          </select>
+        </label>
+        <Link to="/">Home</Link>
+        <Link to="/packages">Packages</Link>
+        <Link to="/repl">Try it out</Link>
+      </div>
+    </div>
   </nav>
 );

website/src/components/Header/style.css

@@ -0,0 +1,23 @@
+.side-bar {
+    background: linear-gradient(270deg, #6738ff, #c3ffbf);
+    color: #6554c0;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+  }
+  
+  .side-bar h1 {
+    display: inline-block;
+    text-shadow: 7px 6px 20px #6a4fc6;
+    margin: 5px;
+  }
+  
+  .side-bar .header-controls {
+    color: #c0feba;
+  }
+  
+  .side-bar .header-controls select {
+    margin-left: 10px;
+  }

website/src/pages/App.css

@@ -17,29 +17,7 @@
     height: 100%;
   }
 
-  .side-bar {
-    background: linear-gradient(270deg, #6738ff, #c3ffbf);
-    color: #6554c0;
-    padding: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 50px;
-  }
-  
-  .side-bar h1 {
-    display: inline-block;
-    text-shadow: 7px 6px 20px #6a4fc6;
-    margin: 5px;
-  }
-  
-  .side-bar .header-controls {
-    color: #c0feba;
-  }
-  
-  .side-bar .header-controls select {
-    margin-left: 10px;
-  }
+
 
   .error-container {
     position: absolute;

website/src/pages/PackageDoc.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import docs from '../../../DOCS';
+import './style.css';
+
+export default function PackageDoc({ location }) {
+  let params = new URLSearchParams(location.search);
+  let docName = params.get('package');
+  return (
+    <main>
+      <sidebar>
+        <ul>
+          {Object.keys(docs).map(docTitle => (
+            <li className={docName && docName === docTitle ? 'active' : ''}>
+              <Link to={{ pathname: '/packages', search: `package=${docTitle}` }}>{docTitle}</Link>
+            </li>
+          ))}
+        </ul>
+      </sidebar>
+      <article>
+        <ReactMarkdown source={docs[docName || Object.keys(docs)[0]]} />
+      </article>
+    </main>
+  );
+}

website/src/pages/PackageDoc/index.js

@@ -0,0 +1,21 @@
+main {
+    display: flex;
+}
+article{
+    margin-left: 20px;
+    padding: 0 20px;
+    border-left: 1px solid #ededed;
+}
+
+sidebar ul {
+    list-style: none;
+    font-size: 1.5em;
+}
+
+sidebar ul li a {
+    color: #102b4f;
+}
+
+sidebar ul li.active a {
+    font-weight: 500;
+}

website/src/pages/PackageDoc/style.css

@@ -56,18 +56,6 @@ class App extends Component {
     const { code, dataForPropTypes, error } = this.state;
     return (
       <Fragment>
-        <div className="side-bar">
-          <h1>Pretty proptypes</h1>
-          <div className="header-controls">
-            <label>
-              Type system:
-              <select onChange={this.handleSelectChange}>
-                <option value="flow">Flow</option>
-                <option value="typescript">TypeScript</option>
-              </select>
-            </label>
-          </div>
-        </div>
         <div className="container">
           <div className="block">
             <CodeMirror

website/src/pages/Repl.js

@@ -2074,6 +2074,10 @@ core-js@^2.4.0, core-js@^2.5.0:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
 
+core-js@^2.4.1:
+  version "2.6.5"
+  resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2905,6 +2909,10 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -3058,6 +3066,10 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
+fbjs-css-vars@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
+
 fbjs@^0.8.0, fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
@@ -3070,6 +3082,19 @@ fbjs@^0.8.0, fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.18"
 
+fbjs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
+  dependencies:
+    core-js "^2.4.1"
+    fbjs-css-vars "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"