Lost of formatting improvements, add code-caption, next, gettig-start…

…ed templates, etc

_config.yml

@@ -14,6 +14,8 @@ company_name: IBM / StrongLoop
 github_editme_path: strongloop/loopback.io/blob/gh-pages/pages
 # if you're using Github, provide the basepath to the branch you've created for reviews, following the sample here. if not, leave this value blank.
 
+google_analytics: UA-37775386-1
+
 disqus_shortname:
 # if you're using disqus for comments, add the shortname here. if not, leave this value blank.
 

_data/repos.json

@@ -18,8 +18,6 @@
   { "org": "strongloop", "repoName":  "loopback-example-mixins"},
   { "org": "strongloop", "repoName":  "loopback-example-offline-sync"},
   { "org": "strongloop", "repoName":  "loopback-example-passport"},
-  { "org": "strongloop", "repoName":  "loopback-example-pubsub"},
-  { "org": "strongloop", "repoName":  "loopback-example-push"},
   { "org": "strongloop", "repoName":  "loopback-example-relations"},
   { "org": "strongloop", "repoName":  "loopback-example-storage"},
   { "org": "strongloop", "repoName":  "loopback-example-user-management"},

_data/sidebars/lb2_sidebar.yml

@@ -395,7 +395,7 @@ entries:
         output: 'web'
         subfolderitems:
 
-        - title: 'Database connectors'
+        - title: 'Database connectors overview'
           url: /doc/en/lb2/Database-connectors.html
           output: 'web, pdf'
 
@@ -483,7 +483,7 @@ entries:
         output: 'web'
         subfolderitems:
 
-        - title: 'Non-database connectors'
+        - title: 'Other connectors overview'
           url: /doc/en/lb2/Non-database-connectors.html
           output: 'web, pdf'
 

_includes/code-caption.html

@@ -0,0 +1,4 @@
+
+<div markdown="1" style="font-weight: bold; font-size: 110%; padding: 0px; margin:0px 0px -10px 0px;">
+{{include.content}}
+</div>

_includes/content/gs-prereqs.html

@@ -1,5 +1,10 @@
-<div markdown="span" class="alert alert-warning" role="alert"><i class="fa fa-warning"></i>
-**Prerequisite**: Install command-line tools as described in [Installing StrongLoop](/doc/{{include.lang}}/lb2/Installation.html).
-<br/>
+<div markdown="1" class="alert alert-warning" role="alert"><i class="fa fa-warning"></i>
+{% if include.two %}**Prerequisites**:
+
+- Install command-line tools as described in [Installation](/doc/{{include.lang}}/lb2/Installation.html).
+- Follow [Getting started with LoopBack](/doc/{{include.lang}}/lb2/Getting-started-with-LoopBack.html)
+{% else %} **Prerequisite**: Install command-line tools as described in [Installation](/doc/{{include.lang}}/lb2/Installation.html).
+{% endif %}
 **Recommended**: Read [LoopBack core concepts](/doc/{{include.lang}}/lb2/LoopBack-core-concepts).
 </div>
+{%include toc.html %}

_includes/next.html

@@ -0,0 +1,2 @@
+<div markdown="1" style="font-size: 11pt; border: 1px solid #cccccc; background-color: #EBF5EB; padding: 10px 10px 0 10px; border-radius: 3px; margin: 10px 50px 10px 50px;"><span style="font-weight: bold;">Next</span>: {{include.content}}
+</div>

css/customstyles.css

@@ -1181,8 +1181,10 @@ div.box.box1 {
   border: 1px solid #cccccc;
   background-color: #EBF5EB;
   padding: 10px;
-  border-radius: 3px; 
+  border-radius: 3px;
   margin: 10px auto 20px auto;
   width: 680px;
   padding: 10px;
 }
+
+pre.highlight {margin-top: 0;}

doc/index.md

@@ -10,10 +10,11 @@ summary: LoopBack is a highly-extensible, open-source Node.js framework that ena
 {% include warning.html content="
 This is a draft site for LoopBack documentation.  Until it goes live, please refer to
 [docs.strongloop.com](http://docs.strongloop.com/display/LB) for the official documentation.
-See [Background](#background) below for more information.
+See [Background](#background-new-documentation-site) below for more information.
 " %}
 
 This site contains draft docs for:
+
 - [LoopBack 2.x](en/lb2) - Content has been migrated; testing underway.
 - [LoopBack 3.0](en/lb3) - Currently has a draft navigation sidebar, only some 3.0-specific content.
 - [Contributing to LoopBack docs](contrib) - some information specifically for doc. contributors.

pages/en/lb2/Accessing-related-models.md

@@ -10,11 +10,8 @@ summary:
 ---
 
 {% include important.html content="
-
 When accessing a related model, the active ACL is still the one for the model you are calling.
-So even if your model has DENY ALL permissions set, if the model relating to it has no ACL, then all the relation endpoints will be open.
-This can be a security risk because, for example, `GET /OpenModel/{id}/ACLSecuredModel` will allow full access to `ACLSecuredModel` through the `OpenModel` relations.
-
+So even if your model has DENY ALL permissions set, if the model relating to it has no ACL, then all the relation endpoints will be open. This can be a security risk because, for example, `GET /OpenModel/{id}/ACLSecuredModel` will allow full access to `ACLSecuredModel` through the `OpenModel` relations.
 " %}
 
 ## Restricting access to related models
@@ -25,9 +22,7 @@ LoopBack automatically creates a set of _related model methods_ corresponding
 In the following list, _modelName_ is the name of the related model and _modelNamePlural_ is the plural form of the related model name. 
 
 {% include note.html content="
-
 In the method names below, the separators are _double_ underscores, \_\_.
-
 " %}
 
 **belongsTo**:
@@ -78,19 +73,15 @@ For example, if a **User hasMany projects**, LoopBack creates these routes (amo
 * `/api/users/:id/projects/count` - related model method is `\_\_count\_\_projects`
 
 {% include important.html content="
-
-If a model has a `DENY ALL` permission (for example a built-in model such as the User model), but related models have no ACLs,
-the related models will still not be accessible through the User model.
+If a model has a `DENY ALL` permission (for example a built-in model such as the User model), but related models have no ACLs,the related models will still not be accessible through the User model.
 So, for example, even if the books model's default ACL is `ALLOW $authenticated` for `GET /books`,
 the route `GET /user/{id}/books` default will still be DENY ALL.
-
 " %}
 
 To configure access control to such routes, set the permission on the related model methods in the model definition JSON file.
 For example, the ACL for the User model definition JSON file (`user.json`) for these routes might look like this, for example:
 
-**/common/models/user.json**
-
+{% include code-caption.html content="/common/models/user.json" %}
 ```javascript
 "acls": [{
   "principalType": "ROLE",

pages/en/lb2/Add-a-custom-Express-route.md

@@ -2,17 +2,16 @@
 title: "Add a custom Express route"
 lang: en
 layout: page
+toc: false
 keywords: LoopBack
-tags:
+tags: [getting_started]
 sidebar: lb2_sidebar
 permalink: /doc/en/lb2/Add-a-custom-Express-route.html
-summary:
+summary: Because LoopBack is built on Express, you can add custom routes just as you do in Express.
 ---
 
 {% include content/gs-prereqs.html lang=page.lang %}
 
-Because LoopBack is built on Express, you can add custom routes just as you do in Express.
-
 In this part of the tutorial, you're going to add a new custom route.
 
 {% include note.html content="
@@ -45,9 +44,8 @@ For more information on boot scripts, see [Defining boot scripts](/doc/{{page.l
 
 For example, add a new boot script named `routes.js` in `/server/boot` directory, with this code:
 
-**/server/boot/routes.js**
-
-```js
+{% include code-caption.html content="/server/boot/routes.js" %}
+```javascript
 module.exports = function(app) {
   // Install a "/ping" route that returns "pong"
   app.get('/ping', function(req, res) {
@@ -58,9 +56,8 @@ module.exports = function(app) {
 
 As an aside, you could have just as well used [Express router middleware](http://expressjs.com/4x/api.html#router) instead, like this:
 
-**/server/boot/routes.js**
-
-```js
+{% include code-caption.html content="/server/boot/routes.js" %}
+```javascript
 module.exports = function(app) {
   var router = app.loopback.Router();
   router.get('/ping', function(req, res) {
@@ -72,9 +69,8 @@ module.exports = function(app) {
 
 In fact you can also add routes right in `server.js` using the Express API.  For example, add this call to [`app.use()`](http://expressjs.com/4x/api.html#app.use) just before the call to `app.start()`:
 
-**server/server.js**
-
-```
+{% include code-caption.html content="server/server.js" %}
+```javascript
 ...
 app.use('/express-status', function(req, res, next) {
   res.json({ running: true });
@@ -96,4 +92,5 @@ Now, run the application again:
 
 Load [http://0.0.0.0:3000/ping](http://0.0.0.0:3000/ping).  You'll see "pong" as the response. 
 
-Next:  Check out [Next steps](/doc/{{page.lang}}/lb2/Next-steps.html) for information on what to read next.
+{% include next.html content="Check out [Next steps](Next-steps.html) for information on what to read next."
+%}

pages/en/lb2/Add-a-static-web-page.md

@@ -2,17 +2,16 @@
 title: "Add a static web page"
 lang: en
 layout: page
+toc: false
 keywords: LoopBack
-tags:
+tags: [getting_started]
 sidebar: lb2_sidebar
 permalink: /doc/en/lb2/Add-a-static-web-page.html
-summary:
+summary: LoopBack leverages Express middleware to make it easy to serve up static content such as web pages.
 ---
 
 {% include content/gs-prereqs.html lang=page.lang %}
 
-LoopBack leverages [Express middleware](http://expressjs.com/guide/using-middleware.html) to make it easy to serve up static content such as web pages.
-
 {% include note.html content="
 If you followed the previous steps in the tutorial, skip down to [Introduction to middleware](#introduction-to-middleware).
 
@@ -31,11 +30,11 @@ $ npm install
 ## Introduction to middleware
 
 {% include note.html content="
-LoopBack is built on [Express](http://expressjs.com/), one of the most popular Node application frameworks.  The top-level LoopBack `app` object inherits all the methods and properties of the [Express `app` object](http://expressjs.com/en/4x/api.html#app). See [Working with LoopBack objects](/doc/en/lb2/Working-with-LoopBack-objects).
+LoopBack is built on [Express](http://expressjs.com/), one of the most popular Node application frameworks.  The top-level LoopBack `app` object inherits all the methods and properties of the
+[Express `app` object](http://expressjs.com/en/4x/api.html#app). See [Working with LoopBack objects](/doc/en/lb2/Working-with-LoopBack-objects).
 " %}
 
-Before continuing, you need to understand a basic concept that LoopBack inherits from Express: middleware.  
-
+Before continuing, you need to understand the basics of [Express middleware](http://expressjs.com/guide/using-middleware.html).
 _Middleware_ is simply a JavaScript function with access to the request object (`req`) representing the HTTP request, the response object (`res`) representing the HTTP response, and the next middleware in line in the request-response cycle of an Express application, commonly denoted by a variable named `next`. Middleware can:
 
 *   Execute any code.
@@ -47,8 +46,7 @@ LoopBack middleware is exactly like [Express middleware](http://expressjs.com/g
 
 When you create an application with the [Application generator](/doc/{{page.lang}}/lb2/Application-generator), it creates a `server/middleware.json` file that specifies what middleware is executed in which phase.  Registering new middleware is as simple as editing this JSON file:
 
-**server/middleware.json**  
-
+{% include code-caption.html content="server/middleware.json" %}
 ```js
 {
   "initial:before": {
@@ -94,9 +92,8 @@ First, you have to disable the default route handler for the root URL.   Rememb
 
 This happens because by default the scaffolded application has a boot script named `root.js` that sets up route-handling middleware for the root route ("/"):
 
-**server/boot/root.js**
-
-```js
+{% include code-caption.html content="server/boot/root.js" %}
+```javascript
 module.exports = function(server) { // Install a `/` route that returns server status
   var router = server.loopback.Router();
   router.get('/', server.loopback.status());
@@ -114,19 +111,17 @@ Next, you need to define static middleware to serve files in the `/client` dir
 
 Edit `server/middleware.json`.  Look for the "files" entry:
 
-**server/middleware.json**
-
-```js
+{% include code-caption.html content="server/middleware.json" %}
+```javascript
 ...
 "files": {},
 ...
 ```
 
 Add the following:
 
-**server/middleware.json**
-
-```js
+{% include code-caption.html content="server/middleware.json" %}
+```javascript
 ...
 "files": {
   "loopback#static": {
@@ -142,9 +137,9 @@ These lines define _[static middleware](/doc/{{page.lang}}/lb2/Defining-middlew
 
 Now, the application will serve any files you put in the `/client` directory as static (client-side) content.  So, to see it in action, add an HTML file to `/client`.  For example, add a file named `index.html` with this content:
 
-**/client/index.html**
+{% include code-caption.html content="/client/index.html" %}
 
-```
+```html
 <head><title>LoopBack</title></head>
 <body>
     <h1>LoopBack Rocks!</h1>
@@ -164,4 +159,5 @@ When you load [http://0.0.0.0:3000/](http://0.0.0.0:3000/) now instead of the
 
 {% include image.html file="5570648.png" alt="" %}
 
-Next: In [Add a custom Express route](/doc/{{page.lang}}/lb2/Add-a-custom-Express-route.html), you'll add a simple route handler in the same way you would in an Express application.
+{% include next.html content="In [Add a custom Express route](Add-a-custom-Express-route.html), you'll add a simple route handler in the same way you would in an Express application."
+%}

pages/en/lb2/Adding-remote-methods-to-built-in-models.md

@@ -22,8 +22,7 @@ Normally, to add a remote method to the User model, you would add it in `/commo
 However, for built-in models however, this file would override the built-in model definition,
 so instead you have to create and attach our remote method in a boot script; for example:
 
-**server/boot/userRemoteMethods.js**
-
+{% include code-caption.html content="server/boot/userRemoteMethods.js" %}
 ```javascript
 module.exports = function(app) {
   const User = app.models.User;
@@ -56,8 +55,7 @@ Instead you can define ACLs in [`model-config.json`](/doc/{{page.lang}}/lb2/mode
 
 For example:
 
-**server/model-config.json**
-
+{% include code-caption.html content="server/model-config.json" %}
 ```javascript
 {
   "User": {

pages/en/lb2/Android-SDK.md

@@ -514,8 +514,7 @@ if (currentUser != null) {
 Most applications will need to extend the built-in User model with additional properties and methods. 
 Consider the example of an e-shop, where the user is modeled as a `Customer`, with an additional property `address`.
 
-**models.json**
-
+{% include code-caption.html content="models.json" %}
 ```javascript
 "customer": {
   "properties": {

pages/en/lb2/AngularJS-JavaScript-SDK.md

@@ -167,8 +167,7 @@ You can configure some aspects of the generated services within the AngularJS cl
 This object is available to configuration blocks only; for more information, see
 [Module Loading & Dependencies](https://docs.angularjs.org/guide/module#module-loading-dependencies) in the AngularJS documentation.
 
-**app.js**
-
+{% include code-caption.html content="app.js" %}
 ```javascript
 angular.module('my-app-module')
   .config(function(LoopBackResourceProvider) {
@@ -203,8 +202,7 @@ Look at the method `Product.find(filter, callback)` to illustrate the differen
 
 On the server, one can write the following code to find all products named 'Pen':
 
-**server-code.js**
-
+{% include code-caption.html content="server-code.js" %}
 ```javascript
 Product.find({ 
     where: {
@@ -216,8 +214,7 @@ Product.find({ 
 
 The AngularJS code to perform the same operation is:
 
-**angular-code.js**
-
+{% include code-caption.html content="angular-code.js" %}
 ```javascript
 $scope.products = Product.find({
     filter: {
@@ -322,8 +319,7 @@ to the latest version of loopback-datasource-juggler to fix the problem.
 
 For example, consider the two following model definitions:
 
-**common/models/products.json**
-
+{% include code-caption.html content="common/models/products.json" %}
 ```javascript
 {
   "name": "Product",
@@ -337,8 +333,7 @@ For example, consider the two following model definitions:
 }
 ```
 
-**common/models/categories.json**
-
+{% include code-caption.html content="common/models/categories.json" %}
 ```javascript
 {
   "name": "Category",