added getting started

Author: ajaymathur

docs/01-getting-started.md

@@ -0,0 +1 @@
+# Hello world

packages/babel-plugin-extract-react-types/README.md

@@ -10,14 +10,18 @@ yarn add babel-plugin-extract-react-types pretty-proptypes
 
 ## Usage
 
-`.babelrc`
+Add the plugin to your babel config.
+
+**.babelrc**
 
 ```json
 {
   "plugins": ["babel-plugin-extract-react-types"]
 }
 ```
 
+## Displaying props
+
 ```jsx
 import SomeComponent from 'somewhere';
 import Props from 'pretty-proptypes';

website/loaders/docs-loader/index.js

@@ -4,18 +4,36 @@ const fs = require('fs');
 const { promisify } = require('util');
 
 const readFile = promisify(fs.readFile);
+const readDir = promisify(fs.readdir);
 const fsStat = promisify(fs.stat);
 
 module.exports = async function docsLoader() {
-  let docs = {};
+  let docs = {
+    packageDocs: {},
+    documentation: {}
+  };
   const ws = await bolt.getWorkspaces();
 
   for (let workspace of ws) {
     const readMeExists = fs.existsSync(path.resolve(workspace.dir, 'README.md'));
     if (readMeExists) {
-      docs[workspace.name] = await readFile(path.join(workspace.dir, 'README.md'), 'utf-8');
+      docs.packageDocs[workspace.name] = await readFile(
+        path.join(workspace.dir, 'README.md'),
+        'utf-8'
+      );
     }
   }
 
-  return `export default ${JSON.stringify(docs)}`;
+  const staticDocs = await readDir(path.join(__dirname, '..', '..', '..', 'docs'));
+
+  for (let staticDoc of staticDocs) {
+    docs.documentation[staticDoc] = await readFile(
+      path.join(__dirname, '..', '..', '..', 'docs', staticDoc),
+      'utf-8'
+    );
+  }
+
+  return `export default { packageDocs: ${JSON.stringify(
+    docs.packageDocs
+  )}, staticDocs: ${JSON.stringify(docs.documentation)}}`;
 };

website/src/pages/PackageDoc/index.js

@@ -2,22 +2,40 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown/with-html';
 import { AkCodeBlock } from '@atlaskit/code';
+// import * as Documentation from '../../../docs';
 import docs from '../../../DOCS';
 import './style.css';
 
 const kebabToCamelCase = string => string.replace(/-([a-z])/g, s => ` ${s[1]}`);
+const kebabToTitleCase = string =>
+  string
+    .replace(/.md$/, '')
+    .replace(/^[0-9]*/, '')
+    .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');
+  const { packageDocs, staticDocs } = docs;
   return (
     <div className="package-documentation">
       <main>
         <section>
+          <h2>Documentation</h2>
           <ul>
-            {Object.keys(docs).map(docTitle => (
+            {Object.keys(staticDocs).map(docTitle => (
+              <li key={docTitle} className={docName && docName === docTitle ? 'active' : ''}>
+                <Link to={{ pathname: '/', search: `package=${docTitle}` }}>
+                  {kebabToTitleCase(docTitle)}
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <h2>Packages</h2>
+          <ul>
+            {Object.keys(packageDocs).map(docTitle => (
               <li key={docTitle} className={docName && docName === docTitle ? 'active' : ''}>
                 <Link to={{ pathname: '/', search: `package=${docTitle}` }}>
                   {kebabToCamelCase(docTitle)}
@@ -28,7 +46,9 @@ export default function PackageDoc({ location }) {
         </section>
         <article>
           <ReactMarkdown
-            source={docs[docName || Object.keys(docs)[0]]}
+            source={
+              staticDocs[docName] || packageDocs[docName] || staticDocs[Object.keys(staticDocs)[0]]
+            }
             renderers={{ code: CodeBlock }}
           />
         </article>