added the getting started docs

Author: ajaymathur

docs/01-getting-started.md

@@ -1,3 +1,52 @@
 # Getting Started
 
+Please add pretty-proptypes as dependency to the project,
 
+```sh
+yarn add pretty-proptypes
+```
+
+## Using webpack loader
+
+Add the extract-react-types-loader as dev dependency,
+
+```bash
+yarn add extract-react-types-loader  --dev
+```
+
+We can use webpack's inline loader feature to create documentation,
+
+```jsx
+import Props from 'pretty-proptypes';
+
+// render the props documentation on the page
+<Props
+    heading="My Cool Component"
+    props={require('!!extract-react-types-loader!../MyCoolComponent')}
+/>
+```
+
+## Using Babel plugin
+
+Add the babel-plugin-extract-react-types as dev dependency,
+
+```bash
+yarn add babel-plugin-extract-react-types  --dev
+```
+
+Update the babel config to use this plugin,
+
+```js
+{
+  "plugins": ["babel-plugin-extract-react-types"]
+}
+```
+
+```js
+import MyCoolComponent from 'MyCoolComponent';
+import Props from 'pretty-proptypes';
+ 
+<Props 
+    heading="My Cool Component"
+    props={MyCoolComponent)}
+```

website/src/app.js

@@ -1,10 +1,10 @@
 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';
-import Home from './pages/home';
+// import Home from './pages/home';
 import PackageDoc from './pages/PackageDoc';
 import Repl from './pages/repl';
 

website/src/pages/PackageDoc/index.js

@@ -11,9 +11,13 @@ const kebabToTitleCase = string =>
   string
     .replace(/.md$/, '')
     .replace(/^[0-9]*/, '')
-    .replace(/-([a-z])/g, s => ` ${s[1]}`);
+    .replace(/-([a-z])/g, s => ` ${s[1].toUpperCase()}`);
 
-const CodeBlock = ({ value }) => <AkCodeBlock text={value} />;
+const CodeBlock = ({ value }) => (
+  <div style={{ marginTop: '10px' }}>
+    <AkCodeBlock text={value} />
+  </div>
+);
 
 export default function PackageDoc({ location }) {
   let params = new URLSearchParams(location.search);
@@ -26,7 +30,15 @@ export default function PackageDoc({ location }) {
           <h2>Documentation</h2>
           <ul>
             {Object.keys(staticDocs).map(docTitle => (
-              <li key={docTitle} className={docName && docName === docTitle ? 'active' : ''}>
+              <li
+                key={docTitle}
+                className={
+                  (docName && docName === docTitle) ||
+                  (docName == null && docTitle === '01-getting-started.md')
+                    ? 'active'
+                    : ''
+                }
+              >
                 <Link to={{ pathname: '/', search: `package=${docTitle}` }}>
                   {kebabToTitleCase(docTitle)}
                 </Link>