hide the home page for now and show only the docs

Author: ajaymathur

website/package.json

@@ -2,6 +2,7 @@
     "name": "website",
     "version": "0.0.0",
     "dependencies": {
+        "@atlaskit/code": "^9.0.0",
         "@atlaskit/css-reset": "^3.0.6",
         "bolt": "^0.22.6",
         "css-loader": "^2.1.1",
@@ -12,7 +13,8 @@
         "react-codemirror": "^1.0.0",
         "react-dom": "^16.3.1",
         "react-markdown": "^4.0.6",
-        "react-router-dom": "^5.0.0"
+        "react-router-dom": "^5.0.0",
+        "styled-components": "^4.2.0"
     },
     "devDependencies": {
         "@babel/core": "^7.4.0",

website/src/app.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { HashRouter as Router, Route } from 'react-router-dom';
 import '@atlaskit/css-reset';
 
 import Header from './components/Header';
@@ -10,9 +10,9 @@ import Repl from './pages/Repl';
 
 const App = () => (
   <Router>
-    <Header />
-    <Route path="/" exact component={Home} />
-    <Route path="/packages" component={PackageDoc} />
+    <Route path="*" component={Header} />
+    {/* <Route path="/" exact component={Home} /> */}
+    <Route path="/" exact component={PackageDoc} />
     <Route path="/repl" component={Repl} />
   </Router>
 );

website/src/components/Header/index.js

@@ -2,22 +2,32 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import './style.css';
 
-export default () => (
-  <nav>
-    <div className="side-bar">
-      <h1>Pretty proptypes</h1>
+export default ({ location }) => {
+  const ifPathNameEqualTo = pathName => {
+    console.log(location);
+    return location && location.pathname === pathName;
+  };
+  return (
+    <nav>
+      <h1>Extract React Types</h1>
       <div className="header-controls">
-        <label>
+        {/* <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>
+        </label> */}
+        {/* <Link to="/" className={ifPathNameEqualTo('/') ? 'active' : ''}>
+          Home
+        </Link> */}
+        <Link to="/" className={ifPathNameEqualTo('/') ? 'active' : ''}>
+          Packages
+        </Link>
+        <Link to="/repl" className={ifPathNameEqualTo('/repl') ? 'active' : ''}>
+          Try it out
+        </Link>
       </div>
-    </div>
-  </nav>
-);
+    </nav>
+  );
+};

website/src/components/Header/style.css

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

website/src/pages/PackageDoc/index.js

@@ -1,26 +1,38 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from 'react-markdown/with-html';
+import { AkCodeBlock } from '@atlaskit/code';
 import docs from '../../../DOCS';
 import './style.css';
 
+const kebabToCamelCase = string => string.replace(/-([a-z])/g, s => ` ${s[1]}`);
+
+const CodeBlock = ({ value }) => <AkCodeBlock text={value} />;
+
 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>
+    <div className="package-documentation">
+      <main>
+        <section>
+          <ul>
+            {Object.keys(docs).map(docTitle => (
+              <li key={docTitle} className={docName && docName === docTitle ? 'active' : ''}>
+                <Link to={{ pathname: '/', search: `package=${docTitle}` }}>
+                  {kebabToCamelCase(docTitle)}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+        <article>
+          <ReactMarkdown
+            source={docs[docName || Object.keys(docs)[0]]}
+            renderers={{ code: CodeBlock }}
+          />
+        </article>
+      </main>
+    </div>
   );
 }

website/src/pages/PackageDoc/style.css

@@ -1,21 +1,45 @@
+.package-documentation {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
 main {
-    display: flex;
+  display: flex;
+  padding: 20px 0;
+  width: 100%;
+  justify-content: center;
+}
+article {
+  border-left: 1px solid #ededed;
+  margin-left: 20px;
+  padding: 0 20px;
+  width: 800px;
+}
+
+article h1 {
+  position: relative;
+  padding-bottom: 15px;
 }
-article{
-    margin-left: 20px;
-    padding: 0 20px;
-    border-left: 1px solid #ededed;
+
+article h1::before {
+  position: absolute;
+  content: '';
+  bottom: 5%;
+  left: 0px;
+  width: 30%;
+  height: 3px;
+  background: linear-gradient(270deg, #6738ff, #c3ffbf);
 }
 
-sidebar ul {
-    list-style: none;
-    font-size: 1.5em;
+section ul {
+  list-style: none;
+  font-size: 1.5em;
 }
 
-sidebar ul li a {
-    color: #102b4f;
+section ul li a {
+  color: #8d8d8d;
 }
 
-sidebar ul li.active a {
-    font-weight: 500;
-}
+section ul li.active a {
+  color: #102b4f;
+}