chore: update docs pages with preamble, update nav (#341)

* updating with home page and new nav

* move title to readme

* cleanup list hang a bit more

* Fixed left nav scrolling issue

* Refactored the left nav to group and sort nav items

Author: jbadan

.eslintignore

@@ -5,4 +5,5 @@
 *.snap
 *.svg
 *.sh
+*.md
 node_modules/**

.gitignore

@@ -10,6 +10,9 @@
 /build
 /lib
 
+# Readme copy for github pages site
+/src/_playground/documentation/Home/README.md
+
 # misc
 .DS_Store
 .env.local

README.md

@@ -1,3 +1,5 @@
+# Fundamental React
+
 [![npm version](https://badge.fury.io/js/fundamental-react.svg)](//www.npmjs.com/package/fundamental-react)
 [![Build Status](https://travis-ci.org/SAP/fundamental-react.svg?branch=master)](https://travis-ci.org/SAP/fundamental-react)
 [![Coverage Status](https://coveralls.io/repos/github/SAP/fundamental-react/badge.svg?branch=master)](https://coveralls.io/github/SAP/fundamental-react?branch=master)
@@ -19,7 +21,7 @@ You will need to install [Node and Node Package Manager](https://www.npmjs.com/g
 
 ## Getting Started
 
-For an existing react application, follow the steps bellow:
+For an existing react application, follow the steps below:
 
 1. Install fundamental-react
 
@@ -34,29 +36,22 @@ For an existing react application, follow the steps bellow:
     ```
 
 1. Import components as needed. See [Component Documentation](https://sap.github.io/fundamental-react/) for examples and API details.
-```javascript
-import { Alert } from 'fundamental-react/lib/Alert/Alert';
-```
-
-or
-
-```javascript
-import { Alert } from 'fundamental-react';
-```
-
+    ```javascript
+    import { Alert } from 'fundamental-react/lib/Alert/Alert';
+    ```
+    or
+    ```javascript
+    import { Alert } from 'fundamental-react';
+    ```
 
-note: Importing from `lib` 
-```javascript
-import { Alert } from 'fundamental-react/lib/Alert/Alert;'
-``` 
-is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly.
+    > **NOTE:** Importing from `lib` is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly.
 
 
 ## Versioning
 
-The `fundamental-react` library follows [Semantic Versioning](https://semver.org/). These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).
+The `fundamental-react` library follows [Semantic Versioning](https://semver.org/). These components strictly adhere to the `[MAJOR].[MINOR].[PATCH]` numbering system (also known as `[BREAKING].[FEATURE].[FIX]`).
 
-Merges to the `master` branch will be published as a prerelease. Prereleases will include an **rc** version (_e.g._ [MAJOR].[MINOR].[PATCH]-rc.[RC]).
+Merges to the `master` branch will be published as a prerelease. Prereleases will include an **rc** version (_e.g._ `[MAJOR].[MINOR].[PATCH]-rc.[RC]`).
 
 ## Known Issues
 
@@ -68,7 +63,7 @@ If you encounter an issue or want to request a feature, you can [create an issue
 
 ## Contributing
 
-If you want to contribute, please check the [Contribution Guidelines](./.github/CONTRIBUTING.md). Also see our [Developer Guide to Getting Started](https://github.com/SAP/fundamental-react/wiki/Developer-Guide).
+If you want to contribute, please check the [Contribution Guidelines](https://github.com/SAP/fundamental-react/blob/master/.github/CONTRIBUTING.md). Also see our [Developer Guide to Getting Started](https://github.com/SAP/fundamental-react/wiki/Developer-Guide).
 
 ## License
 

package-lock.json

@@ -88,6 +88,7 @@
     "fs-extra": "7.0.0",
     "gh-pages": "^2.0.1",
     "github-api": "^3.0.0",
+    "group-array": "^0.3.3",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",

package.json

@@ -47,6 +47,10 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
     process.exit(1);
 }
 
+fs.copyFile('README.md', 'src/_playground/documentation/Home/README.md', (err) => {
+    if (err) throw err;
+});
+
 // Process CLI arguments
 const argv = process.argv.slice(2);
 const writeStatsJson = argv.indexOf('--stats') !== -1;

scripts/build.js

@@ -42,6 +42,10 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
     process.exit(1);
 }
 
+fs.copyFile('README.md', 'src/_playground/documentation/Home/README.md', (err) => {
+    if (err) throw err;
+});
+
 // Tools like Cloud9 rely on this.
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 const HOST = process.env.HOST || '0.0.0.0';

scripts/start.js

@@ -1,6 +1,6 @@
 import './App.scss';
 import '@babel/polyfill';
-import Routes from './Routes';
+import { Routes } from './Routes';
 import React, { Component } from 'react';
 
 class App extends Component {

src/_playground/App.js

@@ -31,21 +31,26 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
             }
 
             .frDocs-Nav {
-                list-style: none;
                 border-top: 2px solid #dbe7f3;
                 height: 90%;
                 overflow: auto;
 
+                .frDocs-Nav__list {
+                    list-style: none;
+                }
+
                 .frDocs-Nav__headers {
                     color: #424e5a;
                     padding: 15px 20px;
                     display: block;
+                    font-weight: 700;
+                    font-size: 1.25rem;
                 }
 
                 .frDocs-Nav__item {
                     display: block;
                     color: #21262c;
-                    font-size: 0.875rem;
+                    font-size: 1rem;
                     position: relative;
                     padding: 13px 40px;
                 }
@@ -69,17 +74,17 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
             padding-bottom: 2rem;
             background-color: white;
             margin-right: auto;
-            margin-left: auto;
+            margin-left: 12px;
             padding-left: 1rem;
             padding-right: 1rem;
 
-            .frDocs-Content__header {
+            .frDocs-Content__header, h1 {
                 margin: 12px 0;
                 margin-top: 2rem;
                 font-size: 2.2rem;
             }
 
-            .frDocs-Content__description {
+            .frDocs-Content__description, p {
                 margin-bottom: 1.5rem;
                 font-size: 1rem;
                 font-weight: 300;
@@ -108,6 +113,35 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
                 transition: background-color .25s;
             }
 
+            .frDocs-markdown {
+
+                ol, ul {
+                    padding-left: 2rem;
+                }
+
+                pre {
+                    margin: 25px 0px;
+                    background-color: #fff !important;
+                    white-space: pre-wrap;
+                    white-space: -moz-pre-wrap;
+                    white-space: -pre-wrap;
+                    white-space: -o-pre-wrap;
+                    word-wrap: break-word;
+                    display: flex;
+                    padding: 1rem;
+                    font-size: 13px;
+                    line-height: 1.42857143;
+                    color: #333;
+                    word-break: break-all;
+                    border: 1px solid #ccc;
+                    border-radius: 4px;
+
+                    code {
+                        display: block;
+                    }
+                }
+            }
+
             .frDocs-Content__separator {
                 display: block;
                 margin: 2rem 0;