Merge branch 'develop/docs'

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "node_modules"
+}

bower.json

@@ -12,12 +12,10 @@
   "ignore": [
     "**/.*",
     "node_modules",
-    "bower_components",
     "test",
     "tests"
   ],
   "dependencies": {
-    "Ionicons": "ionicons#~2.0.1",
+    "Ionicons": "ionicons#~2.0.1"
-    "fullcalendar": "^2.7.1"
   }
 }

docs/config.json

@@ -0,0 +1,31 @@
+{
+  "baseUrl": "/ng2-admin/",
+  "locals": {
+    "url": "http://localhost:8080",
+    "name": "ng2-admin blog",
+    "owner": "Akveo",
+    "description": ""
+  },
+  "plugins": [
+    "./plugins/paginator.coffee"
+  ],
+  "require": {
+    "moment": "moment",
+    "_": "underscore",
+    "typogr": "typogr"
+  },
+  "jade": {
+    "pretty": true
+  },
+  "markdown": {
+    "smartLists": true,
+    "smartypants": true
+  },
+  "paginator": {
+    "perPage": 3,
+    "groupSort": {
+      "Quick Start": 1000,
+      "Customization": 900
+    }
+  }
+}

docs/contents/articles/001-getting-started/index.md

@@ -0,0 +1,42 @@
+---
+title: Getting Started
+author: vl
+sort: 999
+group: Quick Start
+template: article.jade
+---
+
+## What is ng2-admin?
+
+ng2-admin is a front-end Admin Dashboard template based on Angular 2, Bootstrap 4 and Webpack. That means all data you can see on graphs, charts tables is mocked in Javascript so you can use backend of your choice with no limitations.
+
+## How can it help me?
+
+We believe that at the moment a lot of business applications have administration/management interfaces inside of them. Sometimes it's not that obvious, but a lot of web applications have dashboards with panels, charts analytics, etc.
+
+ng2-admin aims to bootstrap the development of your product and provide ecosystem for building production-ready application or prototypes.
+
+Frameworks like Bootstrap provide a number of components, but usually it's not enough to build a real-world app. This template comes with lots of popular UI components with unified color scheme, plus it based on a modern Angular 2 framework and has a flexible components-based structure.
+
+As well you can use ng2-admin for learning purposes of Angular 2.
+
+## List of features
+
+* Responsive layout
+* High resolution
+* Bootstrap 4 CSS Framework
+* SASS
+* Webpack
+* Angular 2
+* jQuery
+* Charts (amChart, Chartist, Chart.js, Morris)
+* Maps (Google, Leaflet, amMap)
+* and many more!
+
+## I want to start developing with ng2-admin
+
+Welcome abroad!
+
+You can start with [Installation Guidelines](/ng2-admin/articles/002-installation-guidelines/). There we describe how you can download and run the template on you local machine.
+
+Good luck and have fun!

docs/contents/articles/002-installation-guidelines/index.md

@@ -0,0 +1,71 @@
+---
+title: Installation Guidelines
+author: vl
+sort: 500
+group: Quick Start
+template: article.jade
+---
+
+## Prerequisites
+
+Despite BlurAdmin can be run without any development experience, it would be much easier if you already have some development experience. In general following instructions allow you to run a local copy on your machine.
+
+## Install tools
+
+If you don't have any of these tools installed already, you will need to:
+* Download and install [git](https://git-scm.com/)
+* Download and install nodejs [https://nodejs.org](https://nodejs.org)
+
+**Note**: Make sure you have Node version >= 4.0 and NPM >= 3
+
+Once you have those, you should install these globals with `npm install --global`:
+* webpack
+```bash
+npm install --global webpack
+```
+
+* webpack-dev-server
+```bash
+npm install --global webpack-dev-server
+```
+
+* typings
+```bash
+npm install --global typings
+```
+
+* typescript
+```bash
+npm install --global typescript
+```
+
+## Clone repository and install dependencies
+
+You will need to clone the source code of ng2-admin GitHub repository:
+```bash
+git clone https://github.com/akveo/ng2-admin.git
+```
+After repository is cloned, go inside of the repository directory and install dependencies:
+```bash
+cd ng2-admin
+npm install
+```
+This will setup a working copy of ng2-admin on your local machine.
+
+## Running local copy
+
+To run a local copy in development mode, execute:
+```bash
+npm start
+```
+Go to http://0.0.0.0:3000 or http://localhost:3000 in your browser.
+
+
+To run the local copy in production mode and build the sources, execute:
+```bash
+npm run prebuild:prod && npm run build:prod && npm run server:prod
+```
+This will clear up your dist folder (where release files are located), generate release build and start built-in server.
+Now you can copy the sources from a `dist` folder and use it with any backend framework or simple put in under some web server.
+
+For addition information about build, please check out [Angular2 Webpack Starter documentation](https://github.com/AngularClass/angular2-webpack-starter)

docs/contents/articles/011-changing-color-scheme/index.md

@@ -0,0 +1,122 @@
+---
+title: Changing Color Scheme
+author: vl
+sort: 900
+group: Customization
+template: article.jade
+---
+
+We tried to make the process of color scheme customization as easy as possible. 
+
+By default ng2-admin has three built-in color profiles: ng2 (default blue sheme), mint and blur.
+This article will help you to create your own color profile.
+Let's say you want to make ng2-admin dark theme.
+
+First we advice you to take some colorscheme file as a basis. 
+For light themes we suggest taking `src/app/theme/sass/conf/colorScheme/_mint.scss` one and for dark `src/app/theme/sass/conf/colorScheme/_blue.scss` one.
+As we want a dark theme, we're taking `ng2`.
+
+1) Copy `src/app/theme/sass/conf/colorScheme/_mint.scss` to `src/app/theme/sass/conf/colorScheme/_dark.scss`.
+
+2) Include your colorscheme file in `src/app/theme/sass/conf/conf.scss`.
+
+To do this, replace 
+```scss
+@import 'colorSchemes/ng2';
+```
+
+to
+
+```scss
+@import 'colorSchemes/dark';
+```
+
+3) Rename the color scheme enabled
+
+Open `src/app/theme/theme.config.ts`.
+Uncomment the following line
+
+```javascript
+  //this._baConfig.changeTheme({name: 'my-theme'});
+``` 
+
+and put you theme name, in our case it is `dark`
+
+```javascript
+  this._baConfig.changeTheme({name: 'dark'});
+``` 
+Beside this notifies the system which scheme currently enabled, it also puts a css class to a main element of the page. Thus you can freely create theme-specific css selectors in you code without braking other themes' styles.
+
+For example like this:
+```scss
+. dark .card-body {
+  background-color: white;
+}
+```
+
+4) Change the colors
+
+Now your can start changing the colors.
+For example, after playing a bit with different colors, we changed 5 first main variables in `_dark.scss` file:
+```sass
+$body-bg: #636363;
+$bootstrap-panel-bg: rgba(#000000, 0.2);
+
+```
+
+After this is done, you need to setup javascript to use **same colors**. These color are used for javascript charts and other components (maps, etc); 
+Let's completely change the JS colors to a new set.
+To do this, add the following code to the configuration block inside `src/app/theme/theme.config.ts`:
+```javascript
+  let colorScheme = {
+    primary: '#209e91',
+    info: '#2dacd1',
+    success: '#90b900',
+    warning: '#dfb81c',
+    danger: '#e85656',
+  };
+  this._baConfig.changeColors({
+    default: '#4e4e55',
+    defaultText: '#e2e2e2',
+    border: '#dddddd',
+    borderDark: '#aaaaaa',
+
+    primary: colorScheme.primary,
+    info: colorScheme.info,
+    success: colorScheme.success,
+    warning: colorScheme.warning,
+    danger: colorScheme.danger,
+
+    primaryLight: colorHelper.tint(colorScheme.primary, 30),
+    infoLight: colorHelper.tint(colorScheme.info, 30),
+    successLight: colorHelper.tint(colorScheme.success, 30),
+    warningLight: colorHelper.tint(colorScheme.warning, 30),
+    dangerLight: colorHelper.tint(colorScheme.danger, 30),
+
+    primaryDark: colorHelper.shade(colorScheme.primary, 15),
+    infoDark: colorHelper.shade(colorScheme.info, 15),
+    successDark: colorHelper.shade(colorScheme.success, 15),
+    warningDark: colorHelper.shade(colorScheme.warning, 15),
+    dangerDark: colorHelper.shade(colorScheme.danger, 15),
+
+    dashboard: {
+      blueStone: '#005562',
+      surfieGreen: '#0e8174',
+      silverTree: '#6eba8c',
+      gossip: '#b9f2a1',
+      white: '#10c4b5',
+    },
+  });
+``` 
+Here we defined a list of main colors `colorScheme` and then made light and dark version of those using `colorHelper` methods. 
+We also defined a couple of custom colors for dashboard charts.
+
+
+That's basically it! Right now your admin application should look like this:
+
+![](new-color-scheme.png)
+
+For further reference, please look in
+- Colorscheme scss file (`src/app/theme/sass/conf/colorScheme/_ng2.scss`, `src/app/theme/sass/conf/colorScheme/_mint.scss` and `src/app/theme/sass/conf/colorScheme/_blur.scss`)
+- `src/app/theme/theme.configProvider.js` to understand which javascript colors can be changed
+- If you want to know how to change theme to blur, read [following article](/ng2-admin/articles/014-switch-to-blur-theme/)

docs/contents/articles/012-project-structure/index.md

@@ -0,0 +1,61 @@
+---
+title: Project Structure
+author: vl
+sort: 800
+group: Customization
+template: article.jade
+---
+
+Project structure was originally based on [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter#file-structure). We made some changes we thought would be better in our particular case.
+
+The directory structure of this template is as follows:
+
+```
+ng2-admin/
+   ├──config/                    * build configuration
+   │   ├──helpers.js             * helper functions for our configuration files
+   │   ├──webpack.dev.js         * development webpack config
+   │   ├──webpack.prod.js        * production webpack config
+   │   └──webpack.test.js        * testing webpack config
+   │
+   ├──src/                       * source files that will be compiled to javascript
+   │   ├──main.browser.ts        * entry file for our browser environment
+   │   │
+   │   ├──index.html             * application layout
+   │   │
+   │   ├──polyfills.ts           * polyfills file
+   │   │
+   │   ├──vendor.ts              * vendors file
+   │   │
+   │   ├──custom-typings.d.ts    * custom typings for third-party modules
+   │   │
+   │   ├──platform/              * platform dependent imports
+   │   │
+   │   ├──app/                   * application code - our working directory
+   │   │   │
+   │   │   ├──app.component.ts   * main application component
+   │   │   │
+   │   │   ├──app.loader.ts      * requires initial css styles (most important for application loading stage)
+   │   │   │
+   │   │   ├──app.menu.ts        * sidebar menu configuration
+   │   │   │
+   │   │   ├──app.state.ts       * global application state for data exchange between components
+   │   │   │
+   │   │   ├──app.scss           * application styles 
+   │   │   │
+   │   │   ├──pages/             * application pages components, place where you can create pages and fill them with components
+   │   │   │
+   │   │   └──theme/             * template global components/directives/pipes and styles
+   │   │
+   │   └──assets/                * static assets are served here
+   │
+   │
+   ├──tslint.json                * typescript lint config
+   ├──typedoc.json               * typescript documentation generator
+   ├──tsconfig.json              * config that webpack uses for typescript
+   ├──typings.json               * our typings manager
+   ├──package.json               * what npm uses to manage it's dependencies
+   ├──bower.json                 * DEPRECATED - moving to npm as primary package manager for all dependenties
+   └──.bowerrc                   * DEPRECARD - temporary bower configuration
+```
+In our template we tried to separate theme layer and presentation layer. We believe most of other templates have them combined. That's why when you start developing using them, it gets very hard for you to remove things you don't need.

docs/contents/articles/013-create-new-page/index.md

@@ -0,0 +1,68 @@
+---
+title: Create New Page
+author: vl
+sort: 300
+group: Customization
+template: article.jade
+---
+
+Blur admin uses [Angular UI router](https://github.com/angular-ui/ui-router) for navigation. 
+That means to create new page you need to basically configure `ui-router` state.
+
+We strongly recommend to follow pages structure in your application. 
+If it doesn't fit your needs please create a GitHub issue and tell us why. We would be glad to discuss. 
+
+Also we recommend to put pages to separate modules. 
+This will allow you to easily switch off some pages in the future if needed.
+
+## Page creation example
+
+0) Let's assume we want to create a blank page with title 'My New Page'
+
+1) Let's Create a new directory to contain our new page inside of `src/app/pages`. Let's call this directory `myNewPage`.
+
+2) Then let's create blank angular module to contain our page called 'myNewPage.module.js' inside of `src/app/pages/myNewPage`:
+
+```javascript
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.myNewPage', [])
+      .config(routeConfig);
+
+  /** @ngInject */
+  function routeConfig() {
+   
+  }
+
+})();
+```
+
+3) Then let's create empty html file called `my-new-page.html` inside of `src/app/pages/myNewPage`.
+
+4) Lastly let's create ui router state for this page. To do this we need to modify module.js file we created on step 2:
+```javascript
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.myNewPage', [])
+      .config(routeConfig);
+
+  /** @ngInject */
+  function routeConfig($stateProvider) {
+    $stateProvider
+        .state('myNewPage', {
+          url: '/myNewPage',
+          templateUrl: 'app/pages/myNewPage/my-new-page.html',
+          title: 'My New Page',
+          sidebarMeta: {
+            order: 800,
+          },
+        });
+  }
+
+})();
+```
+
+That's it! Your can now open your new page either from sidebar or through hash URL.
+

docs/contents/articles/014-switch-to-blur-theme/index.md

@@ -0,0 +1,82 @@
+---
+title: Enabling blur theme
+author: kd
+sort: 850
+group: Customization
+template: article.jade
+---
+
+If you want to switch theme to the blur, you need to follow 3 simple steps:
+
+1) Blur color scheme needs some javascript to calculate initial background offsets for panels.
+That's why we need to tell the system that we want to use blur theme by specifying this in `src/app/theme/theme.config.ts`:
+```javascript
+  this._baConfig.changeTheme({name: 'blur'});
+```
+
+2) Also you need to change some colors. 
+For our blur theme we use following configuration:
+```javascript
+  let colorScheme = {
+    primary: '#209e91',
+    info: '#2dacd1',
+    success: '#90b900',
+    warning: '#dfb81c',
+    danger: '#e85656',
+  };
+  this._baConfig.changeColors({
+    default: '#4e4e55',
+    defaultText: '#e2e2e2',
+    border: '#dddddd',
+    borderDark: '#aaaaaa',
+
+    primary: colorScheme.primary,
+    info: colorScheme.info,
+    success: colorScheme.success,
+    warning: colorScheme.warning,
+    danger: colorScheme.danger,
+
+    primaryLight: colorHelper.tint(colorScheme.primary, 30),
+    infoLight: colorHelper.tint(colorScheme.info, 30),
+    successLight: colorHelper.tint(colorScheme.success, 30),
+    warningLight: colorHelper.tint(colorScheme.warning, 30),
+    dangerLight: colorHelper.tint(colorScheme.danger, 30),
+
+    primaryDark: colorHelper.shade(colorScheme.primary, 15),
+    infoDark: colorHelper.shade(colorScheme.info, 15),
+    successDark: colorHelper.shade(colorScheme.success, 15),
+    warningDark: colorHelper.shade(colorScheme.warning, 15),
+    dangerDark: colorHelper.shade(colorScheme.danger, 15),
+
+    dashboard: {
+      blueStone: '#005562',
+      surfieGreen: '#0e8174',
+      silverTree: '#6eba8c',
+      gossip: '#b9f2a1',
+      white: '#10c4b5',
+    },
+  });
+```
+3) CSS should also be recompiled. 
+Before running build command, switch to *blur* color profile.
+To do so replace theme in `src/app/theme/sass/conf/conf.scss`:
+ 
+```scss
+@import 'colorScheme/ng2';
+```
+ 
+to
+ 
+```scss
+@import 'colorScheme/blur';
+```
+
+Additionaly, if you would like to use some different background, replace the following images:
+
+- `src/assets/img/blur-bg.jpg` (main background image)
+- `src/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels)
+
+We suggest using 10px Gaussian blur to blur an original image.
+
+_________________________________________ 
+That's it! You have successfully blurred your theme! Run `npm start` and check it out.

docs/contents/articles/051-sidebar/index.md

@@ -0,0 +1,58 @@
+---
+title: Sidebar
+author: vl
+sort: 900
+group: Components
+template: article.jade
+---
+
+Sidebar is used to provide convenient way of navigation in the application. 
+Application support only one sidebar per angular application. 
+That means sidebar is basically a singletone object.
+Currently sidebar supports level 1 and 2 sub menus.
+ 
+Sidebar can be added to the page using `BaSidebar` component:
+```html
+<ba-sidebar></ba-sidebar>
+```
+
+At the moment sidebar menu items configuration and Angular 2 Router should be configured independently. We probably will come up with a better solution once new Angular Router is released and stable.
+
+
+## Menu Configuration
+
+All menu items are located inside `src/app/app.menu.ts` file. The file contain a list of Menu Item objects with the following fields:
+
+```javascript
+  {
+    title: 'Dashboard', // menu item title
+    component: 'Dashboard', // component where the menu should lead, has a priority over url property
+    url: 'http://google.com' // manual url address (used only when component is not specified)
+    icon: 'ion-android-home', // icon class
+    target: '_blank', // link target attribute (used only when url is specified)
+    selected: false,  // is item selected
+    expanded: false, // is item expanded (used only when subItems list specified)
+    order: 0 // order in a list
+  }
+```
+You also can define a list of sub-menu items like this:
+```javascript
+  {
+    title: 'Charts',
+    component: 'Charts',
+    icon: 'ion-stats-bars',
+    selected: false,
+    expanded: false,
+    order: 200,
+    subMenu: [  // list of sub-menu items
+      {
+        title: 'Chartist.Js', // sub-item title
+        component: 'ChartistJs'  // sum-item component 
+      },
+    ]
+  }
+```
+
+## Routes configuration
+
+Routes configuration is specified in the Page Components according to Angular 2 Router specification. More information you can find [here](https://angular.io/docs/ts/latest/guide/router-deprecated.html).

docs/contents/css/main.css

@@ -0,0 +1,987 @@
+html {
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #484848;
+  line-height: 1.28
+}
+
+p {
+  margin: 0 0 10px
+}
+
+.subHeader {
+  font-size: 21px;
+  font-weight: 200;
+  line-height: 30px;
+  margin-bottom: 10px
+}
+
+em {
+  font-style: italic
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 10px 0;
+  font-family: inherit;
+  font-weight: bold;
+  line-height: 20px;
+  color: inherit;
+  text-rendering: optimizelegibility
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+  font-weight: normal;
+  color: #7b7b7b
+}
+
+h1, h2, h3 {
+  line-height: 40px
+}
+
+h1 {
+  font-size: 39px
+}
+
+h2 {
+  font-size: 31px
+}
+
+h3 {
+  font-size: 23px
+}
+
+h4 {
+  font-size: 16px
+}
+
+h5 {
+  font-size: 14px
+}
+
+h6 {
+  font-size: 11px
+}
+
+h1 small {
+  font-size: 24px
+}
+
+h2 small {
+  font-size: 18px
+}
+
+h3 small {
+  font-size: 16px
+}
+
+h4 small {
+  font-size: 14px
+}
+
+ul, ol {
+  margin: 0 0 10px 25px;
+  padding: 0
+}
+
+ul ul, ul ol, ol ol, ol ul {
+  margin-bottom: 0
+}
+
+li {
+  line-height: 20px
+}
+
+a {
+  color: #285eb8;
+  text-decoration: none
+}
+
+a:hover, a:focus {
+  color: #234fb8;
+  text-decoration: underline
+}
+
+a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px
+}
+
+.center {
+  text-align: center
+}
+
+html * {
+  color-profile: sRGB;
+  rendering-intent: auto
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: none;
+  margin: 0;
+  padding: 0
+}
+
+html {
+  background: #f9f9f9
+}
+
+.browser-mockup {
+  border-top: 2em solid #F3F3F3;
+  position: relative;
+  border-radius: 3px 3px 0 0
+}
+
+.browser-mockup:before {
+  display: block;
+  position: absolute;
+  content: '';
+  top: -1.25em;
+  left: 1em;
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 50%;
+  background-color: #f44;
+  box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
+}
+
+.browser-mockup > * {
+  display: block;
+  border: 1px solid #ddd;
+  width: 100%;
+}
+
+.left {
+  float: left
+}
+
+.right {
+  float: right
+}
+
+.container {
+  padding-top: 50px;
+  min-width: 1060px
+}
+
+.wrap {
+  width: 1060px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px
+}
+
+.skinnyWrap {
+  width: 690px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px
+}
+
+hr {
+  height: 0;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #eee
+}
+
+ul, li {
+  margin-left: 20px
+}
+
+li + li {
+  margin-top: 10px
+}
+
+h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor {
+  margin-top: -50px;
+  position: absolute
+}
+
+h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link {
+  display: inline
+}
+
+.hash-link {
+  color: #aaa;
+  display: none
+}
+
+.nav-main {
+  background: #222;
+  color: #fafafa;
+  position: fixed;
+  top: 0;
+  height: 50px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  width: 100%;
+  z-index: 100
+}
+
+.nav-main:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.nav-main a {
+  color: #e9e9e9;
+  text-decoration: none
+}
+
+.nav-main .nav-site-internal {
+  margin: 0 0 0 20px
+}
+
+.nav-main .nav-site-external {
+  float: right;
+  margin: 0
+}
+
+.nav-main .nav-site li {
+  margin: 0
+}
+
+.nav-main .nav-site li > a {
+  box-sizing: content-box;
+  padding: 0 10px;
+  line-height: 50px;
+  display: inline-block;
+  height: 50px;
+  color: #ddd
+}
+
+.nav-main .nav-site li > a:hover {
+  color: #fff
+}
+
+.nav-main .nav-site li > a.active {
+  color: #fafafa;
+  border-bottom: 3px solid #00abff;
+  background: #333
+}
+
+.nav-main .nav-home {
+  color: #ffffff;
+  font-size: 24px;
+  line-height: 50px;
+  height: 50px;
+  display: inline-block
+}
+
+.nav-main .nav-home .blur-label {
+  color: #00abff;
+}
+
+.nav-main .nav-logo {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: 9px;
+}
+
+.nav-main ul {
+  display: inline-block;
+  vertical-align: top
+}
+
+.nav-main li {
+  display: inline
+}
+
+.hero {
+  padding-bottom: 75px;
+}
+
+.hero .hero-content {
+  color: #e9e9e9;
+  font-weight: 300;
+  background: #313131;
+  padding-top: 50px;
+}
+
+.hero .text {
+  font-size: 64px;
+  text-align: center
+}
+
+.hero .minitext {
+  font-size: 16px;
+  text-align: center;
+  text-transform: uppercase
+}
+
+.hero strong {
+  color: #00abff;
+  font-weight: 400
+}
+
+.white-text {
+  color: rgb(249, 249, 249);
+}
+
+.hero .admin-screenshots {
+  margin-top: 40px;
+  display: flex;
+  flex-direction: row;
+}
+
+.hero .admin-screenshot {
+  width: 100%;
+  padding: 0 15px;
+  text-align: center;
+}
+
+.admin-screenshot img {
+  width: 100%;
+}
+
+.demo-link {
+  display: block;
+  position: relative;
+  line-height: 0;
+}
+
+.demo-link:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: 52px;
+  background-image: linear-gradient(to bottom, transparent, rgb(249, 259, 249));
+}
+
+.demo-link .demo-link-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  content: 'Demo';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  color: rgb(249, 249, 249);
+  font-size: 32px;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+}
+
+.demo-link:hover .demo-link-label {
+  opacity: 1;
+}
+
+.buttons-unit {
+  margin-top: 60px;
+  text-align: center
+}
+
+.buttons-unit a {
+  color: #61dafb
+}
+
+.buttons-unit .button {
+  font-size: 24px;
+  background: #00abff;
+  color: #fafafa;
+}
+
+.buttons-unit .button:active, .buttons-unit .button:focus {
+  background: #00abff;
+  text-decoration: none;
+}
+
+.buttons-unit.downloads {
+  margin: 30px 0
+}
+
+.index-block {
+  padding: 40px 0;
+}
+
+.index-block h1 {
+  text-align: center;
+}
+
+.index-block.black {
+  background: #f2f2f2;
+}
+
+.why-items {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  margin-top: 15px;
+  padding-top: 15px;
+}
+
+.why-item {
+  flex: 33%;
+  text-align: center;
+  padding: 0 15px;
+}
+
+.why-item img {
+  width: 110px;
+}
+
+.nav-docs {
+  color: #2d2d2d;
+  font-size: 14px;
+  float: left;
+  width: 210px
+}
+
+.nav-docs ul {
+  list-style: none;
+  margin: 0
+}
+
+.nav-docs ul ul {
+  margin: 6px 0 0 20px
+}
+
+.nav-docs li {
+  line-height: 16px;
+  margin: 0 0 6px
+}
+
+.nav-docs h3 {
+  text-transform: uppercase;
+  font-size: 14px
+}
+
+.nav-docs a {
+  color: #666;
+  display: block
+}
+
+.nav-docs a:hover {
+  text-decoration: none;
+  color: #285eb8
+}
+
+.nav-docs a.active {
+  color: #285eb8
+}
+
+.nav-docs a.external:after {
+  content: "";
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  padding-left: 5px;
+  background-image: url("../img/external.png");
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+  font-size: 10px;
+  line-height: 1em;
+  opacity: 0.5
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
+  .nav-docs a.external:after {
+    background-image: url("../img/external_2x.png");
+    background-size: 10px 10px
+  }
+}
+
+.nav-docs .nav-docs-section {
+  border-bottom: 1px solid #ccc;
+  border-top: 1px solid #eee;
+  padding: 12px 0
+}
+
+.nav-docs .nav-docs-section:first-child {
+  padding-top: 0;
+  border-top: 0
+}
+
+.nav-docs .nav-docs-section:last-child {
+  padding-bottom: 0;
+  border-bottom: 0
+}
+
+.nav-blog li {
+  margin-bottom: 5px
+}
+
+.nav-docs-right {
+  display: block;
+  float: right;
+  line-height: 50px;
+}
+
+.nav-docs-right a {
+  color: #00abff;
+  text-decoration: none;
+}
+
+.nav-docs-right a:hover {
+  text-decoration: underline;
+}
+
+.home-section {
+  margin: 50px 0
+}
+
+.home-divider {
+  border-top-color: #bbb;
+  margin: 0 auto;
+  width: 400px
+}
+
+.skinny-row:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.skinny-col {
+  float: left;
+  margin-left: 40px;
+  width: 305px
+}
+
+.skinny-col:first-child {
+  margin-left: 0
+}
+
+.marketing-row {
+  margin: 50px 0
+}
+
+.marketing-row:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.marketing-col {
+  float: left;
+  margin-left: 40px;
+  width: 280px
+}
+
+.marketing-col h3 {
+  color: #2d2d2d;
+  font-size: 24px;
+  font-weight: normal;
+  text-transform: uppercase
+}
+
+.marketing-col p {
+  font-size: 16px
+}
+
+.marketing-col:first-child {
+  margin-left: 0
+}
+
+#examples h3, .home-presentation h3 {
+  color: #2d2d2d;
+  font-size: 24px;
+  font-weight: normal;
+  margin-bottom: 5px
+}
+
+#examples p {
+  margin: 0 0 25px 0;
+  max-width: 600px
+}
+
+#examples .example {
+  margin-top: 60px
+}
+
+#examples #todoExample {
+  font-size: 14px
+}
+
+#examples #todoExample ul {
+  list-style-type: square;
+  margin: 0 0 10px 0
+}
+
+#examples #todoExample input {
+  border: 1px solid #ccc;
+  font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  padding: 3px;
+  width: 150px
+}
+
+#examples #todoExample button {
+  font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  margin-left: 5px;
+  padding: 4px 10px
+}
+
+#examples #markdownExample textarea {
+  border: 1px solid #ccc;
+  font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  margin-bottom: 10px;
+  padding: 5px
+}
+
+.home-bottom-section {
+  margin-bottom: 100px
+}
+
+.docs-nextprev:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.jsxCompiler {
+  margin: 0 auto;
+  padding-top: 20px;
+  width: 1220px
+}
+
+.jsxCompiler label.compiler-option {
+  display: block;
+  margin-top: 5px
+}
+
+.jsxCompiler #jsxCompiler {
+  margin-top: 20px
+}
+
+.jsxCompiler .playgroundPreview {
+  padding: 0;
+  width: 600px;
+  word-wrap: break-word
+}
+
+.jsxCompiler .playgroundPreview pre {
+  font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.5
+}
+
+.jsxCompiler .playgroundError {
+  padding: 15px 20px
+}
+
+.docs-prev {
+  float: left
+}
+
+.docs-next {
+  float: right
+}
+
+footer {
+  font-size: 13px;
+  font-weight: 600;
+  margin-top: 66px;
+  margin-bottom: 18px;
+  overflow: auto
+}
+
+section.black content {
+  padding-bottom: 18px
+}
+
+.blogContent {
+  padding-top: 20px
+}
+
+.blogContent:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.blogContent blockquote {
+  padding: 5px 15px;
+  margin: 20px 0;
+  background-color: #f8f5ec;
+  border-left: 5px solid #f7ebc6
+}
+
+.blogContent h2 > code {
+  font-size: inherit;
+  line-height: inherit;
+  color: #555;
+  background-color: rgba(0, 0, 0, 0.04)
+}
+
+.documentationContent {
+  padding-top: 20px
+}
+
+.documentationContent:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.documentationContent .subHeader {
+  font-size: 24px
+}
+
+.documentationContent h2 {
+  margin-top: 30px
+}
+
+.documentationContent blockquote {
+  padding: 15px 30px 15px 15px;
+  margin: 20px 0;
+  background-color: rgba(204, 122, 111, 0.1);
+  border-left: 5px solid rgba(191, 87, 73, 0.2)
+}
+
+.documentationContent blockquote h4 {
+  margin-top: 0
+}
+
+.documentationContent blockquote p {
+  margin-bottom: 0
+}
+
+.documentationContent blockquote p:first-child {
+  font-weight: bold;
+  font-size: 17.5px;
+  line-height: 20px;
+  margin-top: 0;
+  text-rendering: optimizelegibility
+}
+
+.docs-prevnext {
+  padding-top: 40px;
+  padding-bottom: 40px
+}
+
+.button {
+  background: -webkit-linear-gradient(#9a9a9a, #646464);
+  background: linear-gradient(#9a9a9a, #646464);
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 18px;
+  font-weight: 400;
+  margin: 0 12px;
+  display: inline-block;
+  color: #fafafa;
+  text-decoration: none;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  text-decoration: none
+}
+
+.button:hover {
+  text-decoration: none
+}
+
+.button:active {
+  box-shadow: none
+}
+
+.hero .button {
+  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3)
+}
+
+.button.blue {
+  background: -webkit-linear-gradient(#77a3d2, #4783c2);
+  background: linear-gradient(#77a3d2, #4783c2)
+}
+
+.row {
+  padding-bottom: 4px
+}
+
+.row .span4 {
+  width: 33.33%;
+  display: table-cell
+}
+
+.row .span8 {
+  width: 66.66%;
+  display: table-cell
+}
+
+.row .span6 {
+  width: 50%;
+  display: table-cell
+}
+
+p {
+  margin: 10px 0
+}
+
+.highlight {
+  padding: 10px;
+  margin-bottom: 20px
+}
+
+figure {
+  text-align: center
+}
+
+.inner-content {
+  float: right;
+  width: 650px
+}
+
+.nosidebar .inner-content {
+  float: none;
+  margin: 0 auto
+}
+
+.inner-content img {
+  max-width: 100%;
+}
+
+.inner-content table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.inner-content th, .inner-content td {
+  padding: 0.25rem;
+  text-align: left;
+  border: 1px solid #ccc;
+}
+
+.inner-content tbody tr:nth-child(odd) {
+  background: #eee;
+}
+
+h1:after {
+  content: "";
+  display: table;
+  clear: both
+}
+
+.edit-page-link {
+  float: right;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-top: 17px
+}
+
+.post-list-item + .post-list-item {
+  margin-top: 60px
+}
+
+/* code styling */
+
+code {
+  font-family: 'Anonymous Pro', sans-serif;
+  font-size: 0.85em;
+  color: #000;
+}
+
+pre code {
+  display: block;
+  line-height: 1.1;
+  color: #333333;
+  background: #f8f5ec;
+  padding: 30px 14px 14px;
+  position: relative;
+  overflow-x: auto;
+}
+
+pre code:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #c2c0bc;
+  background-color: #f1ede4;
+  content: "Code";
+}
+
+p code {
+  padding: 0.1em 0.3em 0.2em;
+  border-radius: 0.3em;
+  position: relative;
+  background: #fffff3;
+
+  white-space: nowrap;
+}
+
+/* syntax hl stuff */
+
+code.lang-markdown {
+  color: #424242;
+}
+
+code.lang-markdown .header,
+code.lang-markdown .strong {
+  font-weight: bold;
+}
+
+code.lang-markdown .emphasis {
+  font-style: italic;
+}
+
+code.lang-markdown .horizontal_rule,
+code.lang-markdown .link_label,
+code.lang-markdown .code,
+code.lang-markdown .header,
+code.lang-markdown .link_url {
+  color: #555;
+}
+
+code.lang-markdown .blockquote,
+code.lang-markdown .bullet {
+  color: #bbb;
+}
+
+/* Tomorrow Theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+.tomorrow-comment, pre .comment, pre .title {
+  color: #8e908c;
+}
+
+.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
+  color: #c82829;
+}
+
+.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
+  color: #f5871f;
+}
+
+.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
+  color: #eab700;
+}
+
+.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
+  color: #718c00;
+}
+
+.tomorrow-aqua, pre .css .hexcolor {
+  color: #3e999f;
+}
+
+.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
+  color: #4271ae;
+}
+
+.tomorrow-purple, pre .keyword, pre .javascript .function {
+  color: #8959a8;
+}
+
+/* media queries */
+
+@media screen and (max-width: 960px) {
+  .nav-main {
+    position: static
+  }
+
+  .container {
+    padding-top: 0
+  }
+}

docs/contents/images/why-design.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><circle cx="55" cy="55" r="55" style="fill:#00abff;"/><g><g><path d="M81.937,24.303C81.205,23.507,80.166,23,79,23H31c-2.209,0-4,1.791-4,4v56c0,2.209,1.791,4,4,4h48     c2.209,0,4-1.791,4-4V27C83,25.957,82.591,25.015,81.937,24.303z" style="fill:#F0F1F1;"/></g><g><path d="M31,29c0-1.104,0.895-2,2-2h12c1.105,0,2,0.896,2,2v30.239l4.436-4.436     C51.179,54.623,51,54.338,51,54V44c0-0.552,0.448-1,1-1h10c0.338,0,0.622,0.179,0.803,0.436l4.632-4.632     C67.179,38.623,67,38.338,67,38V28c0-0.552,0.448-1,1-1h10c0.338,0,0.622,0.179,0.803,0.436l3.133-3.133     C81.205,23.507,80.166,23,79,23H31c-2.209,0-4,1.791-4,4v52.239l4-4V29z M51,28c0-0.552,0.448-1,1-1h10c0.552,0,1,0.448,1,1v10     c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1V28z" style="fill:#FFFFFF;"/></g><g><path d="M45,27H33c-1.105,0-2,0.896-2,2v46.239V81c0,1.104,0.895,2,2,2h12c1.105,0,2-0.896,2-2V59.239V29     C47,27.896,46.105,27,45,27z" style="fill:#F4D0A1;"/></g><g><path d="M45,27H33c-1.105,0-2,0.896-2,2v46.239l16-16V29C47,27.896,46.105,27,45,27z" style="fill:#F8E1C2;"/></g><g><path d="M52,39h10c0.552,0,1-0.448,1-1V28c0-0.552-0.448-1-1-1H52c-0.552,0-1,0.448-1,1v10     C51,38.552,51.448,39,52,39z" style="fill:#F79392;"/></g><g><path d="M78.803,27.436C78.622,27.179,78.338,27,78,27H68c-0.552,0-1,0.448-1,1v10     c0,0.338,0.179,0.623,0.436,0.803C67.598,38.918,67.786,39,68,39h10c0.552,0,1-0.448,1-1V28     C79,27.786,78.918,27.599,78.803,27.436z" style="fill:#FACB1B;"/></g><g><path d="M78,27H68c-0.552,0-1,0.448-1,1v10c0,0.338,0.179,0.623,0.436,0.803l11.368-11.368     C78.622,27.179,78.338,27,78,27z" style="fill:#FBE158;"/></g><g><path d="M62.803,43.436C62.622,43.179,62.338,43,62,43H52c-0.552,0-1,0.448-1,1v10     c0,0.338,0.179,0.623,0.436,0.803C51.598,54.918,51.786,55,52,55h10c0.552,0,1-0.448,1-1V44     C63,43.786,62.918,43.599,62.803,43.436z" style="fill:#12B2A0;"/></g><g><path d="M62,43H52c-0.552,0-1,0.448-1,1v10c0,0.338,0.179,0.623,0.436,0.803l11.368-11.368     C62.622,43.179,62.338,43,62,43z" style="fill:#47C4B7;"/></g><g><path d="M39,43h-4v4l1.876,30.024C36.946,78.135,37.867,79,38.98,79H39h0.02     c1.113,0,2.034-0.865,2.104-1.976L43,47v-4H39z" style="fill:#84462D;"/></g><g><path d="M35,43v4l1.876,30.024C36.946,78.135,37.867,79,38.98,79H39V43H35z" style="fill:#9C6144;"/></g><g><path d="M79,54c0,0.552-0.448,1-1,1H68c-0.552,0-1-0.448-1-1V44c0-0.552,0.448-1,1-1h10     c0.552,0,1,0.448,1,1V54z" style="fill:#47C4B7;"/></g><g><path d="M63,70c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1V60c0-0.552,0.448-1,1-1h10     c0.552,0,1,0.448,1,1V70z" style="fill:#40C9E7;"/></g><g><path d="M79,70c0,0.552-0.448,1-1,1H68c-0.552,0-1-0.448-1-1V60c0-0.552,0.448-1,1-1h10     c0.552,0,1,0.448,1,1V70z" style="fill:#40C9E7;"/></g><g><path d="M79,82c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1v-6c0-0.552,0.448-1,1-1h26     c0.552,0,1,0.448,1,1V82z" style="fill:#F4D0A1;"/></g><g><path d="M39,30L39,30c0,0-5,5.687-5,9c0,1.851,0.713,3.175,1.811,4H39h3.189     C43.287,42.175,44,40.851,44,39C44,35.687,39.001,30.001,39,30z" style="fill:#3E3E3F;"/></g><g><path d="M34,39c0,1.851,0.713,3.175,1.811,4H39V30h0C39,30,34,35.687,34,39z" style="fill:#5B5C5F;"/></g><g><polygon points="39,43 35,43 35,47 39,47 43,47 43,43    " style="fill:#F3B607;"/></g><g><polygon points="35.811,43 35,43 35,47 39,47 39,43    " style="fill:#FACB1B;"/></g></g></g></svg>

docs/contents/images/why-structure.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><circle cx="55" cy="55" r="55" style="fill:#00abff;"/><g><g><path d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84     C24.719,87,23,85.281,23,83.16V26.84z" style="fill:#FFFFFF;"/><path d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z" style="fill:#F0F1F1;"/></g><path d="M52,70h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H52c-0.551,0-1,0.448-1,1v5    C51,69.552,51.449,70,52,70z" style="fill:#E2E4E5;"/><path d="M62,72H52c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5    C65,70.654,63.654,72,62,72z M52,63c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1    H52z" style="fill:#B6BCBD;"/><path d="M30,70h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H30c-0.551,0-1,0.448-1,1v5    C29,69.552,29.449,70,30,70z" style="fill:#E2E4E5;"/><path d="M40,72H30c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5    C43,70.654,41.654,72,40,72z M30,63c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1    H30z" style="fill:#B6BCBD;"/><path d="M41,50h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H41c-0.551,0-1,0.448-1,1v5    C40,49.552,40.449,50,41,50z" style="fill:#9CE5F4;"/><g><polygon points="50.272,52 48.014,52 52.728,61 54.986,61    " style="fill:#CFD3D4;"/></g><g><polygon points="41.728,52 37.014,61 39.272,61 43.986,52    " style="fill:#CFD3D4;"/></g><path d="M51,52H41c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5    C54,50.654,52.654,52,51,52z M41,43c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1    H41z" style="fill:#40C9E7;"/><g><path d="M84.144,57.498L62.941,81.466l-5.877,1.21c-0.17-0.818-0.593-1.593-1.267-2.189     c-0.674-0.596-1.495-0.922-2.328-0.991l0.484-5.981l21.203-23.967L84.144,57.498z" style="fill:#F4D0A1;"/></g><g><path d="M84.115,57.473c0.016,0.014,0.017,0.038,0.003,0.054L63.397,80.95     c-0.033,0.038-0.086-0.002-0.062-0.047c0.651-1.2,0.414-2.728-0.653-3.672c-1.126-0.996-2.785-0.995-3.905-0.062     c-0.032,0.027-0.075-0.011-0.052-0.046c0.79-1.225,0.589-2.871-0.537-3.868c-1.079-0.955-2.648-0.993-3.762-0.173     c-0.036,0.027-0.077-0.015-0.047-0.049l20.752-23.458c0.014-0.016,0.038-0.017,0.054-0.003L84.115,57.473z" style="fill:#059BBF;"/></g><g><rect height="2" style="fill:#FACB1B;" transform="matrix(0.749 0.6626 -0.6626 0.749 55.1274 -39.9673)" width="12" x="74.313" y="51.774"/></g><g><path d="M84.996,47.571l-0.09-0.08c-2.457-2.174-6.211-1.944-8.385,0.513l-0.04,0.045L85.469,56     l0.04-0.045C87.683,53.498,87.453,49.744,84.996,47.571z" style="fill:#F79392;"/></g><g><path d="M84.119,57.527L63.371,80.979c-0.03,0.034-0.077-0.002-0.055-0.042     c0.674-1.205,0.444-2.753-0.634-3.707c-1.124-0.994-2.777-0.995-3.897-0.068c-0.019,0.015-0.041-0.008-0.025-0.026l20.865-23.586     c0.014-0.016,0.038-0.017,0.053-0.003l4.437,3.925C84.131,57.487,84.133,57.511,84.119,57.527z" style="fill:#0484AB;"/></g><g><path d="M57.064,82.675l-3.918,0.807l0.323-3.987c0.833,0.069,1.654,0.395,2.328,0.991     C56.471,81.082,56.894,81.857,57.064,82.675z" style="fill:#3E3E3F;"/></g></g></g></svg>

docs/contents/index.json

@@ -0,0 +1,4 @@
+{
+  "template": "index.jade",
+  "activeHome": true
+}

docs/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "wintersmith": "2.3.1",
+    "moment": "2.3.x",
+    "underscore": "1.4.x",
+    "typogr": "0.5.x"
+  },
+  "private": true
+}

docs/plugins/paginator.coffee

@@ -0,0 +1,44 @@
+
+module.exports = (env, callback) ->
+  ### Paginator plugin. Defaults can be overridden in config.json
+      e.g. "paginator": {"perPage": 10} ###
+
+  defaults =
+    template: 'index.jade' # template that renders pages
+    articles: 'articles' # directory containing contents to paginate
+    first: 'index.html' # filename/url for first page
+    filename: 'page/%d/index.html' # filename for rest of pages
+    perPage: 2 # number of articles per page
+    groupSort: {}
+
+  # assign defaults any option not set in the config file
+  options = env.config.paginator or {}
+  for key, value of defaults
+    options[key] ?= defaults[key]
+
+  getArticles = (contents) ->
+    # helper that returns a list of articles found in *contents*
+    # note that each article is assumed to have its own directory in the articles directory
+    articles = contents[options.articles]._.directories.map (item) -> item.index
+    # skip articles that does not have a template associated
+    articles = articles.filter (item) -> item.template isnt 'none'
+    # sort article by date
+    articles.sort (a, b) -> b.metadata.sort - a.metadata.sort
+    groupedArticlesObj = articles.reduce (acc, curr) ->
+      groupName = curr.metadata.group
+      if not acc[groupName]
+        acc[groupName] =
+          groupName: groupName
+          items: []
+      acc[groupName].items.push curr
+      return acc
+    , {}
+    groupedArticles = (val for key, val of groupedArticlesObj)
+    groupedArticles.sort (a, b) -> (options.groupSort[b.groupName] || 0) - (options.groupSort[a.groupName] || 0)
+    return groupedArticles
+
+  # add the article helper to the environment so we can use it later
+  env.helpers.getGroupedArticles = getArticles
+
+  # tell the plugin manager we are done
+  callback()

docs/templates/article.jade

@@ -0,0 +1,21 @@
+
+extends layout
+
+block title
+  | BlurAdmin documentation - #{page.title]
+
+block content
+  section.content.wrap.documentationContent
+    div.nav-docs
+      each group in groupedArticles
+        div.nav-docs.section
+          h3=group.groupName
+          ul
+            each article in group.items
+              li
+                a(href=article.url)(class= locals.page === article ? 'active': '')= article.title
+    div.inner-content
+      h1=locals.page.title
+      div.subHeader
+      != typogr(page.html).typogrify()
+

docs/templates/index.jade

@@ -0,0 +1,59 @@
+
+extends layout
+
+block title
+  | Admin HTML template based on Angular 2, Bootstrap 4 and Webpack
+
+block content
+  div.hero
+    div.hero-content
+      div.wrap
+        div.text
+          strong ng2-#[span.white-text admin]
+        div.minitext Angular 2 admin panel front-end framework
+        div.buttons-unit
+          a.button(href=installationArticleUrl) Installation guidelines
+          a.button(href=firstArticleUrl) Documentation
+        div.admin-screenshots
+          div.admin-screenshot
+            div.browser-mockup
+              a.demo-link(href='http://akveo.com/ng2-admin/',target='_blank')
+                img(src=contents.images['sky-preview.png'].url)
+                span.demo-link-label Demo
+  div.index-block
+    div.wrap
+      h1 Why ng2-admin?
+      div.why-items
+        div.why-item
+          img(src=contents.images['why-structure.svg'].url)
+          h4 Awesome structure
+          p Component-based structure is the best choice for large Angular 2 applications.
+        div.why-item
+          img(src=contents.images['why-design.svg'].url)
+          h4 Neat design
+          p We have put a lot of efforts and carefully selected each color and font for this template!
+        div.why-item
+          img(src=contents.images['why-practices.svg'].url)
+          h4 Ease for customization
+          p Check out #[a(href='/blur-admin/articles/011-changing-color-scheme') our article], where we describe how you can create different look in just 2 minutes!
+  div.index-block.black
+    div.wrap
+      h1 Is it free?
+      p Yes, ng2-admin is completely free and MIT licensed. That means you can do with it whatever you want.
+
+  div.index-block
+    div.wrap
+      h1 How can I support you guys?
+      p Here's what you can do:
+      ul
+        li Star #[a(href='https://github.com/akveo/blur-admin',target='_blank') our GitHub repo]
+        li Create pull requests, submit bugs, suggest new features
+        li Follow #[a(href='https://twitter.com/akveo_inc',target='_blank') us on Twitter]
+        li Like #[a(href='https://www.facebook.com/akveo/',target='_blank') our page on Facebook]
+  div.index-block.black
+    div.wrap
+      h1 Can I hire you?
+      p Yes! We are available for hire. Visit #[a(href='http://akveo.com',target='_blank') our homepage]
+        | or simply leave us a note at #[a(href='mailto:contact@akveo.com') contact@akveo.com].
+        | We will be happy to work with you!
+

docs/templates/layout.jade

@@ -0,0 +1,44 @@
+doctype html
+block vars
+  - var bodyclass = null;
+  - var groupedArticles = env.helpers.getGroupedArticles(contents);
+  - var firstArticleUrl = groupedArticles[0].items[0].url
+  - var installationArticleUrl = groupedArticles[0].items[1].url
+html(lang='en')
+  head
+    block head
+      meta(charset='utf-8')
+      meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
+      meta(name='viewport', content='width=device-width')
+      meta(name='keywords', content='admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript')
+      title
+        block title
+          = locals.name
+      link(rel='alternate', href=locals.url+'/feed.xml', type='application/rss+xml', title=locals.description)
+      link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic')
+      link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css')
+
+      link(rel='stylesheet', href=contents.css['main.css'].url)
+      link(rel='shortcut icon', href=contents.images['favicon.png'].url)
+  body(class=bodyclass)
+    div.container
+      div.nav-main
+        div.wrap
+          a.nav-home(href=contents['index'].url)
+            img.nav-logo(src=contents.images['logo.png'].url, width=24,height=24)
+            | #[span.blur-label ng2-]admin
+          ul.nav-site.nav-site-internal
+            li
+              a(class= locals.page.metadata.activeHome ? 'active': '')(href=contents['index'].url) Home
+            li
+              a(class= !locals.page.metadata.activeHome ? 'active': '')(href=firstArticleUrl) Docs
+          span.nav-docs-right
+            | Need some help? Let us know! #[a(href='mailto:contact@akveo.com') contact@akveo.com]
+      block content
+        h2 Welcome to blur admin!
+      footer.wrap
+        div.left Powered by Angular 2, Bootstrap 4, Webpack and many more...
+        div.right
+          | © 2015–2016 Akveo LLC<br />
+          | Documentation licensed under #[a(href='https://creativecommons.org/licenses/by/4.0/') CC BY 4.0].
+    a(href='https://github.com/akveo/ng2-admin', class='github-fork-ribbon', title="Star & Fork on GitHub")

package.json

@@ -26,6 +26,7 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "font-awesome": "^4.6.1",
     "font-awesome-sass-loader": "^1.0.1",
+    "fullcalendar": "^2.7.2",
     "google-maps": "^3.2.1",
     "jquery": "^2.2.3",
     "jquery-slimscroll": "^1.3.6",

src/app/app.menu.ts

@@ -128,5 +128,14 @@ export const menuItems = [
         }]
       }
     ]
+  },
+  {
+    title: 'External Link',
+    url: 'http://akveo.com',
+    icon: 'ion-android-exit',
+    selected: false,
+    expanded: false,
+    order: 800,
+    target: '_blank'
   }
 ];

src/app/theme/components/baSidebar/baSidebar.html

@@ -3,7 +3,11 @@
     <li *ngFor="let item of menuItems" class="al-sidebar-list-item"
         [ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
 
-      <a *ngIf="!item.subMenu" [routerLink]="[item.component]" class="al-sidebar-list-link">
+
+      <a *ngIf="!item.component && !item.subMenu" [attr.href]="item.url || ''" [attr.target]="item.target || ''" class="al-sidebar-list-link">
+        <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
+      </a>
+      <a *ngIf="item.component && !item.subMenu" [routerLink]="[item.component]" [attr.target]="item.target || ''" class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
       </a>
 
@@ -27,12 +31,18 @@
               [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
             <li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
                 [ngClass]="{selected: subitem.selected}">
-              <a (mouseenter)="hoverItem($event, item)" [routerLink]="[item.component, subitem.component, subSubitem.component]">
+              <a *ngIf="!item.component" (mouseenter)="hoverItem($event, item)" [attr.href]="subSubitem.url || ''" [attr.target]="subSubitem.target || ''">
+                {{ subSubitem.title }}</a>
+              <a *ngIf="item.component" (mouseenter)="hoverItem($event, item)" [attr.target]="subSubitem.target || ''" [routerLink]="[item.component, subitem.component, subSubitem.component]">
                 {{ subSubitem.title }}</a>
             </li>
           </ul>
-          <a *ngIf="!subitem.subMenu" [routerLink]="[item.component, subitem.component]"
+          <a *ngIf="!item.component && !subitem.subMenu" [attr.href]="subitem.url || ''"
-             (mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
+             (mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
+            {{ subitem.title}}
+          </a>
+          <a *ngIf="item.component && !subitem.subMenu" [routerLink]="[item.component, subitem.component]"
+             (mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
             {{ subitem.title}}
           </a>
         </li>

src/app/theme/theme.config.ts

@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import {BaThemeConfigProvider} from './theme.configProvider';
+import {colorHelper} from './theme.constants';
 
 @Injectable()
 export class BaThemeConfig {
@@ -9,13 +10,45 @@ export class BaThemeConfig {
   }
 
   private _config() {
-    // this._baConfig.changeTheme({blur: true});
+    // this._baConfig.changeTheme({name: 'my-theme'});
-    //
+
+    // let colorScheme = {
+    //   primary: '#209e91',
+    //   info: '#2dacd1',
+    //   success: '#90b900',
+    //   warning: '#dfb81c',
+    //   danger: '#e85656',
+    // };
     // this._baConfig.changeColors({
-    //   default: 'rgba(#000000, 0.2)',
+    //   default: '#4e4e55',
-    //   defaultText: '#ffffff',
+    //   defaultText: '#e2e2e2',
+    //   border: '#dddddd',
+    //   borderDark: '#aaaaaa',
+    //
+    //   primary: colorScheme.primary,
+    //   info: colorScheme.info,
+    //   success: colorScheme.success,
+    //   warning: colorScheme.warning,
+    //   danger: colorScheme.danger,
+    //
+    //   primaryLight: colorHelper.tint(colorScheme.primary, 30),
+    //   infoLight: colorHelper.tint(colorScheme.info, 30),
+    //   successLight: colorHelper.tint(colorScheme.success, 30),
+    //   warningLight: colorHelper.tint(colorScheme.warning, 30),
+    //   dangerLight: colorHelper.tint(colorScheme.danger, 30),
+    //
+    //   primaryDark: colorHelper.shade(colorScheme.primary, 15),
+    //   infoDark: colorHelper.shade(colorScheme.info, 15),
+    //   successDark: colorHelper.shade(colorScheme.success, 15),
+    //   warningDark: colorHelper.shade(colorScheme.warning, 15),
+    //   dangerDark: colorHelper.shade(colorScheme.danger, 15),
+    //
     //   dashboard: {
-    //     white: '#ffffff',
+    //     blueStone: '#005562',
+    //     surfieGreen: '#0e8174',
+    //     silverTree: '#6eba8c',
+    //     gossip: '#b9f2a1',
+    //     white: '#10c4b5',
     //   },
     // });
   }