docs(website): fix requirements and build docs, add to sidebar

fix a typo in the about box doc link.

documentation/content/docs/develop_build.md

@@ -1,24 +1,23 @@
 title: Building Simput
 ---
 
-The Simput application can be built with webpack automatically. Webpack can either gather all the source files and concatenate them with little modification, or it can build it for production which will minify the generated file.
+The Simput application can be built with webpack automatically. Webpack can either gather all the source files and concatenate them with little modification, or it can build for production which will minify the generated file.
 
 ## Building Simput
 
 In order to build the app you can run `npm run build` for quick development usage or `npm run build:release` for production usage.
 
-{% note warn For Windows users %}
-You cannot use the previous command line for building a production ready bundle.
-Instead you will need to run: `npm run build -- -p`
-{% endnote %}
+Either of these commands will generate a website in the `dist/` directory with `index.html` and scripts and supporting files to show the Simput app in a browser.
 
-Either of these commands will generate a `dist/Simput.js` file that can then be used as an external script.
+Next, `npm run bundle` can take build output and combine it into a single file, `dist/Simput.html`. This file can be given to users and opened in any modern browser to run Simput.
+
+If you are developing a type for use with Simput, please see the [oscillator example](oscillator.html) for information on how to add a new type. You will then use `npm run dev` and `npm run type:mytype` after a new `mytype` has been setup.
 
 ## Building the website
 
-Simput comes with its tools to build the website that get published on [github.io](https://kitware.github.io/simput/) which enables you to write documentation and see what it will look like once published.
+Simput comes with tools to build the website that get published on [github.io](https://kitware.github.io/simput/) which enables you to write documentation and see what it will look like once published.
 
-In order to run the tests and build the full website with its examples you can run the following command:
+In order to build the full website you can run the following command:
 
 ```sh
 $ npm run doc:www

documentation/content/docs/develop_requirement.md

@@ -26,9 +26,9 @@ Further instructions on development can be found on the [build page](https://kit
 - Linux (Fedora, Red Hat, CentOS): `sudo yum install git-core`
 
 {% note warn For Mac users %}
-You may encounter some problems when compiling. Please install Xcode from App Store first. After Xcode is installed, open Xcode and go to **Preferences -> Download -> Command Line Tools -> Install** to install command line tools.
+You may encounter some problems when compiling. Please install Xcode from the App Store first. After Xcode is installed, open Xcode and go to **Preferences -> Download -> Command Line Tools -> Install** to install command line tools.
 {% endnote %}
 
 ### Node.js
 
-The best way to install Node.js is with [nvm](https://github.com/creationix/nvm).
+The best way to install Node.js is with [nvm](https://github.com/creationix/nvm), or for Windows users, directly from [nodejs.org](https://nodejs.org/).

documentation/content/docs/index.md

@@ -2,13 +2,13 @@ title: Overview
 ---
 
 Simput is a tool for simplifying the process of writing and editing *simulation* input files.
-It can be used as standalone tool or within other platform such as HPCCloud to streamlining input definition.
+It can be used as standalone tool or within other platforms such as HPCCloud to streamline input definitions.
 
-## What is SimPut?
+## What is Simput?
 
-SimPut allow you to specify your a data model that will allow to generate UI for users to fill forms that will then be turned into a serie of text files.
+Simput allows you to specify a data model, and Simput will generate forms for users to fill in. That data will then be turned into a series of text files.
 
-The main usage that we have with Simput is to create *Input-deck* for simulation code while providing an interactive user interface with contextual documentation.
+Currently Simput is typically used to create *input-decks* for simulation code while providing an interactive user interface with contextual documentation.
 
 ## Usage
 
@@ -31,13 +31,19 @@ $ Simput
     -h, --help                    output usage information
 ```
 
-Let's open a specific model locally for edition
+Open the Simput landing page locally:
 
 ```
 $ Simput -p
 Simput listening on port 8080
 ```
 
+Or open the [latest version](http://kitware.github.io/simput/app/) online.
+
+![User Interface](simput-landing.png)
+
+Then you can click on the icon for a type to start editing, or drag a file like [this Pyfr example](https://github.com/Kitware/simput/blob/type-pyfr/samples/2DEulerVortex/model.json) onto the __Open an existing model__ box to start editing it.
+
 ![User Interface](simput-ui.png)
 
 ## Concept
@@ -46,12 +52,12 @@ Simput listening on port 8080
 
 ## Components
 
-In order to create a new input type for SimPut you will need:
+In order to create a new input type for Simput you will need:
 
-- __model.json / model.js:__ describe what kind of input are needed from the user and how those input should be layout via views.
-- __convert.js *[optional]*:__ provide a path to validate and restructure the view data model into another one easier for template engine and create a target file map (file path / content).
+- __model.json / model.js:__ describe what kind of inputs are needed from the user and how those inputs should be layed out via views.
+- __convert.js *[optional]*:__ provide a path to validate and restructure the data model into another one convenient for the template engine and create a target file map (file path / content).
 - __templates/\*.hbs *[optional]*:__ Template files to use inside convert.js to actually do the conversion into a file format.
 - __lang/en/__
-  - __label.json *[optional]*:__ Label to use for a specific langage such as `en:english`
-  - __help/{Attribute Name}/{Parameter Id} *[optional]*:__ Extended HTML snippet used for togglable help panel
+  - __label.json *[optional]*:__ labels to use in the UI for a specific langage such as `en:english`.
+  - __help/{Attribute Name}/{Parameter Id} *[optional]*:__ Extended HTML snippets used in togglable help panels for each UI element.
 

documentation/content/docs/model.md

@@ -7,7 +7,7 @@ center.half > img {
 }
 </style>
 
-SimPut works around a model definition that the user have to define initially. The model is used to describe what kind of input are needed from the user and how those input should be layout via views.
+Simput works with a model definition that must be defined initially. The model is used to describe what kinds of input are needed from the user and how those inputs should be layed out via views.
 
 ## Format
 
@@ -37,18 +37,18 @@ vs
 
 ## Model sections
 
-Let's look closer to the various section that can exist inside a `model.[json/js]` file.
+Let's look closer at the various sections that can exist inside a `model.[json/js]` file.
 
 ### Definitions
 
-The definition is the home of the various attributes that regroup parameters that we want the user to input.
-An attribute is defined by a group of parameters with a title.
-Each parameter is listed in an order manner and provide the following set of fields:
-- __id:__ Identifiant that is used inside the attribute map within the view model.
-- __type:__ ['string', 'double', 'int', 'bool', ...] The type is to properly convert user input from standard UI to their actual type.
-- __size:__ Provide how many values are required. -1 usually mean that the size is dynamic.
+The definition is the home of a set of attributes.
+An attribute is a group of parameters that we want the user to input, with a title/label.
+Each parameter is listed in the order it should appear and has the following set of fields:
+- __id:__ Identifier that is used inside the attribute map within the view model.
+- __type:__ ['string', 'double', 'int', 'bool', ...] The type is used to properly convert the strings the user inputs to their actual type.
+- __size:__ Specifies how many values are required. -1 usually means that the size is dynamic.
 - __default:__ Provide a default / initial value
-- __label *[option]*:__ User friendly label for the parameter name which can be provided within the /lang/ directory.
+- __label *[option]*:__ User friendly label for the parameter name which can be provided here, or within the /lang/ directory.
 
 ```
 module.exports = {
@@ -85,7 +85,7 @@ Attribute rendering example
 
 ##### Layout
 
-When size is bigger than 1 it makes sense to start providing a layout hint. Below we list known layout hints.
+When the `size` is bigger than 1 it makes sense to provide a layout hint. Below we list the known layout hints and show how they render.
 
 ```
 "parameters": [
@@ -147,7 +147,7 @@ Attribute rendering example
 ##### Show
 
 An additional field can be provided to dynamically show or hide a given parameter based on a neighbor's value.
-The value set is always captured within an array, which force the expression to be extracted like shown below.
+The value of a parameter is always captured within an array, which force the expression to be extracted like shown below.
 
 ```
 "parameters": [
@@ -275,7 +275,7 @@ Parameters can be dynamically composed based on other attribute parameters and c
 
 Views are meant to gather several attributes/parameters into meaningful pages that get driven based on a side menu.
 The label for a view is what will be displayed in the side menu for selecting a given view/page.
-The content of the page will be defined by the __attributes__ array content that was describe above.
+The content of the page will be defined by the __attributes__ array content that was described above.
 Instead of __attributes__, a __children__ array can be used to create a nested list of other views.
 A __size: -1__ is used for a view when you want to dynamically create/delete views in a list.
 
@@ -329,7 +329,7 @@ views : {
 Note the `readOnly` option disables the view name editing in the side menu which works well if you want to use a parameter to define that view name.
 The `noDelete` option disables the delete action on the view. That flag can either be defined in the view definition or inside the `currentViewData` that the hooks are getting passed. The 'readOnly' flag follows the same pattern regarding where its definition can be provided.
 
-To register your own hooks, you will have to create a `hooks.js` next to your model file. The following listing illustrates what that file should look like.
+To register your own hooks, create a `hooks.js` next to your model file. The following listing illustrates what that file should look like.
 
 ```
 function getExternal(dataModel) {
@@ -432,7 +432,7 @@ Each entry in that output array should be composed of:
 - __src:__ Name of the attribute that we want to extract the parameters from
 - __dst:__ List of mapping of where to store the given parameters
 
-The left side of the *dst* entry define the path where the parameter on the right side of the `=`should be stored.
+The left side of each *dst* entry defines the path where the parameter on the right side of the `=`should be stored.
 
 When we want to fill an array with objects the following pattern can be used:
 
@@ -445,7 +445,7 @@ When we want to fill an array with objects the following pattern can be used:
 ```
 
 
-The `.` on the left side define the nesting structure inside an object.
+The `.` on the left side defines the nesting structure inside an object.
 The `{xxx}` are automatically replaced on the left side with the actual value of the `xxx` parameter.
 
 ### Scripts

documentation/content/index.jade

@@ -1,6 +1,6 @@
 layout: index
-description: SimPut
-subtitle: Describe your model once then SimPut your files...
+description: Simput
+subtitle: Describe your model once then Simput your files...
 cmd: npm install -g simput && Simput
 comments: false
 ---
@@ -13,7 +13,7 @@ ul#intro-feature-list
       h3.intro-feature-title
         a(href="https://www.npmjs.com/package/simput").link Releases
         img(style="padding-left: 25px",src="https://badge.fury.io/js/simput.svg")
-      p.intro-feature-desc SimPut is available via npm and provides a simple way to generate input files to drive simulations. Provide a data model and a template, and your users can interact with a web-based form UI to create input files.
+      p.intro-feature-desc Simput is available via npm and provides a simple way to generate input files to drive simulations. Provide a data model and a template, and your users can interact with a web-based form UI to create input files.
 
 
   li.intro-feature-wrap

documentation/tpl/__en__

@@ -24,4 +24,6 @@ sidebar:
     example: Example
     vcard: Address book
     oscillator: Oscillator
+    requirements: Requirements
+    building: Building
 

documentation/tpl/__sidebar__

@@ -3,6 +3,8 @@ docs:
     overview: index.html
     model: model.html
     convert: convert.html
+    requirements: develop_requirement.html
+    building: develop_build.html
   example:
     vcard: vcard.html
     oscillator: oscillator.html

src/components/core/AboutBox/template.html

@@ -24,7 +24,7 @@
     <ul :class="$style.list">
       <li class="body-1">
         <span>Here is our</span>
-        <a href="https://kitware.github.io/simput/doc/">documentation</a>.
+        <a href="https://kitware.github.io/simput/docs/">documentation</a>.
       </li>
       <li class="body-1">
         <span>We are open source!</span>