Skip to content

Commit c7e9f8e

Browse files
ajaymathurajaymathur
committed
add docs and repl to website
1 parent 710c983 commit c7e9f8e

File tree

11 files changed

+133
-68
lines changed

11 files changed

+133
-68
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@atlaskit/build-releases": "^3.0.3",
23+
"@atlaskit/css-reset": "^3.0.6",
2324
"@babel/core": "^7.4.0",
2425
"@babel/plugin-syntax-flow": "^7.2.0",
2526
"@babel/plugin-syntax-jsx": "^7.2.0",

‎website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "website",
33
"version": "0.0.0",
44
"dependencies": {
5+
"@atlaskit/css-reset": "^3.0.6",
56
"bolt": "^0.22.6",
67
"css-loader": "^2.1.1",
78
"extract-react-types": "^0.16.0",

‎website/src/app.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import ReactMarkdown from 'react-markdown';
4-
import { HashRouter as Router, Route, Link } from 'react-router-dom';
3+
import { BrowserRouter as Router, Route } from 'react-router-dom';
4+
import '@atlaskit/css-reset';
55

6-
import docs from '../DOCS';
76
import Header from './components/Header';
87
import Home from './pages/home';
98
import PackageDoc from './pages/PackageDoc';

‎website/src/components/Header/index.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,20 @@ import './style.css';
44

55
export default () => (
66
<nav>
7-
<Link to="/">Home</Link>
8-
<Link to="/packages">Packages</Link>
9-
<Link to="/repl">Try it out</Link>
7+
<div className="side-bar">
8+
<h1>Pretty proptypes</h1>
9+
<div className="header-controls">
10+
<label>
11+
Type system:
12+
<select>
13+
<option value="flow">Flow</option>
14+
<option value="typescript">TypeScript</option>
15+
</select>
16+
</label>
17+
<Link to="/">Home</Link>
18+
<Link to="/packages">Packages</Link>
19+
<Link to="/repl">Try it out</Link>
20+
</div>
21+
</div>
1022
</nav>
1123
);

‎website/src/components/Header/style.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.side-bar {
2+
background: linear-gradient(270deg, #6738ff, #c3ffbf);
3+
color: #6554c0;
4+
padding: 15px;
5+
display: flex;
6+
align-items: center;
7+
justify-content: space-between;
8+
height: 50px;
9+
}
10+
11+
.side-bar h1 {
12+
display: inline-block;
13+
text-shadow: 7px 6px 20px #6a4fc6;
14+
margin: 5px;
15+
}
16+
17+
.side-bar .header-controls {
18+
color: #c0feba;
19+
}
20+
21+
.side-bar .header-controls select {
22+
margin-left: 10px;
23+
}

‎website/src/pages/App.css

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,7 @@
1717
height: 100%;
1818
}
1919

20-
.side-bar {
21-
background: linear-gradient(270deg, #6738ff, #c3ffbf);
22-
color: #6554c0;
23-
padding: 15px;
24-
display: flex;
25-
align-items: center;
26-
justify-content: space-between;
27-
height: 50px;
28-
}
29-
30-
.side-bar h1 {
31-
display: inline-block;
32-
text-shadow: 7px 6px 20px #6a4fc6;
33-
margin: 5px;
34-
}
35-
36-
.side-bar .header-controls {
37-
color: #c0feba;
38-
}
39-
40-
.side-bar .header-controls select {
41-
margin-left: 10px;
42-
}
20+
4321

4422
.error-container {
4523
position: absolute;

‎website/src/pages/PackageDoc.js

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎website/src/pages/PackageDoc/index.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import ReactMarkdown from 'react-markdown';
4+
import docs from '../../../DOCS';
5+
import './style.css';
6+
7+
export default function PackageDoc({ location }) {
8+
let params = new URLSearchParams(location.search);
9+
let docName = params.get('package');
10+
return (
11+
<main>
12+
<sidebar>
13+
<ul>
14+
{Object.keys(docs).map(docTitle => (
15+
<li className={docName && docName === docTitle ? 'active' : ''}>
16+
<Link to={{ pathname: '/packages', search: `package=${docTitle}` }}>{docTitle}</Link>
17+
</li>
18+
))}
19+
</ul>
20+
</sidebar>
21+
<article>
22+
<ReactMarkdown source={docs[docName || Object.keys(docs)[0]]} />
23+
</article>
24+
</main>
25+
);
26+
}

‎website/src/pages/PackageDoc/style.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
main {
2+
display: flex;
3+
}
4+
article{
5+
margin-left: 20px;
6+
padding: 0 20px;
7+
border-left: 1px solid #ededed;
8+
}
9+
10+
sidebar ul {
11+
list-style: none;
12+
font-size: 1.5em;
13+
}
14+
15+
sidebar ul li a {
16+
color: #102b4f;
17+
}
18+
19+
sidebar ul li.active a {
20+
font-weight: 500;
21+
}

‎website/src/pages/Repl.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,6 @@ class App extends Component {
5656
const { code, dataForPropTypes, error } = this.state;
5757
return (
5858
<Fragment>
59-
<div className="side-bar">
60-
<h1>Pretty proptypes</h1>
61-
<div className="header-controls">
62-
<label>
63-
Type system:
64-
<select onChange={this.handleSelectChange}>
65-
<option value="flow">Flow</option>
66-
<option value="typescript">TypeScript</option>
67-
</select>
68-
</label>
69-
</div>
70-
</div>
7159
<div className="container">
7260
<div className="block">
7361
<CodeMirror

0 commit comments

Comments
 (0)