docs: re-arrange the sidebar along four quadrants

Regroup documentation page along the following quadrants:
 - Learning-oriented tutorials nested in "Tutorials"
 - Problem-oriented how-to guides nested in "Usage scenarios"
 - Understanding-oriented explanations nested in "Behind the scenes"
 - Information-oriented reference guides nested in "Reference guides"

Remove "Key Concepts" from the sidebar, move the content of
`Concepts.md` to `Behind-the-scene.md`.

Move "Using components" entries to "Usage scenarios", remove
"Using components" page altogether and move the relevant content to
"Components" page in "Behind the scenes" section.

Rename "Reference" to "Reference guides"

Rearrange top sidebar entries, move tutorials higher up in the sidebar.

docs/README.md

@@ -11,6 +11,24 @@ http://loopback.io/doc/en/lb4/index.html.
 To contribute, please check out
 https://loopback.io/doc/en/contrib/doc-contrib.html.
 
+We are using the documentation system based on four quadrants, as described at
+https://documentation.divio.com
+
+- Learning-oriented [Tutorials](https://documentation.divio.com/tutorials/),
+  nested in [Tutorials](./site/Tutorials.md) section of the sidebar.
+
+- Problem-oriented
+  [How-to Guides](https://documentation.divio.com/how-to-guides/), nested in
+  [Usage scenarios](./site/Usage-scenarios.md) section of the sidebar.
+
+- Understanding-oriented
+  [Explanation](https://documentation.divio.com/explanation/), nested in
+  [Behind the scenes](./site/Behind-the-scene.md) section of the sidebar.
+
+- Information-oriented
+  [Reference guides](https://documentation.divio.com/reference/), nested in
+  [Reference guides](./site/Reference.md) section of the sidebar.
+
 ## API references
 
 The API docs are generated by running `npm run tsdocs` at the root directory of

docs/site/Behind-the-scene.md

@@ -1,22 +1,75 @@
 ---
 lang: en
-title: 'Components'
-keywords: LoopBack 4.0, LoopBack 4, Node.js, TypeScript, OpenAPI
+title: 'Behind the scenes'
+keywords: LoopBack 4, Node.js, TypeScript, OpenAPI, Explanations, Concepts
 sidebar: lb4_sidebar
 permalink: /doc/en/lb4/Behind-the-scene.html
 ---
 
+LoopBack 4 defines some key building blocks to represent different
+responsibilities for typical API and/or Microservice applications.
+
+![Key concepts overview diagram](imgs/key-concepts-overview-diagram.png)
+
+- [**Application**](Application.md): The central class for setting up all of
+  your module’s components, controllers, servers and bindings. The Application
+  class extends [Context](Context.md) and provides the controls for starting and
+  stopping its associated servers.
+
+- [**Server**](Server.md): An implementation for inbound transports/protocols
+  such as REST (http, https), gRPC (http2) and graphQL (http, https). It
+  typically listens on a specific endpoint (protocol/host/port), handles
+  incoming requests, and then returns appropriate responses.
+
+- [**Controller**](Controllers.md): A class that implements operations defined
+  by the application’s REST API. It implements an application’s business logic
+  and acts as a bridge between the HTTP/REST API and domain/database models. A
+  Controller operates only on processed input and abstractions of backend
+  services / databases.
+
+- [**Interceptors**](Interceptors.md): A function that intercepts static or
+  instance method invocations on a class or object.
+
+- [**Route**](Routes.md): The mapping between your API specification and an
+  Operation. It tells LoopBack which Operation to `invoke()` when given an HTTP
+  request.
+
+- [**Sequence**](Sequence.md): A stateless grouping of
+  [Actions](Sequence.md#actions) that control how a Server responds to requests.
+
+- [**Model**](Model.md): The definition of an object in respect to the
+  datasource juggler. The `@loopback/repository` module provides special
+  decorators for adding metadata to TypeScript/JavaScript classes to use them
+  with the legacy implementation of DataSource Juggler. In addition,
+  `@loopback/repository-json-schema` module uses the decorators' metadata to
+  build a matching JSON Schema.
+
+- [**DataSources**](DataSources.md): A named configuration for a Connector
+  instance that represents data in an external system.
+
+- [**Repository**](Repositories.md): A type of service that represents a
+  collection of data within a DataSource.
+
+- [**Relation**](Relations.md): A mapping between two models which describes a
+  real world link between them and exposes CRUD APIs based on the configuration.
+
+- [**Decorator**](Decorators.md): The pattern used to annotate or modify your
+  class declarations and their members with metadata.
+
 Here are the infrastructures that get all the artifacts working together:
 
-- [Context](Context.md): An abstraction of states and dependencies in your
+- [**Context**](Context.md): An abstraction of states and dependencies in your
   application that LoopBack uses to manage everything. It’s a global registry
   for everything in your app (configurations, state, dependencies, classes and
   so on).
-- [Binding](Binding.md): An abstraction of items managed by a context. Each
+
+- [**Binding**](Binding.md): An abstraction of items managed by a context. Each
   binding has a unique key within the context and a value provider to resolve
   the key to a value.
-- [Dependency Injection](Dependency-injection.md): The technique used to
+
+- [**Dependency Injection**](Dependency-injection.md): The technique used to
   separate the construction of dependencies of a class or function from its
   behavior to keep the code loosely coupled.
-- [Component](Components.md): A package that bundles one or more LoopBack
+
+- [**Component**](Components.md): A package that bundles one or more LoopBack
   extensions.

docs/site/Components.md

@@ -56,5 +56,31 @@ trouble of having to do so manually. Again it's best to check the documentation
 for the given Component/Mixin.
 " %}
 
-See [Using components](Using-components.md) and
-[Creating components](Creating-components.md) for more information.
+## Using components
+
+Components can be added to your application using the `app.component()` method.
+
+The following is an example of installing and using a component.
+
+Install the following dependencies:
+
+```sh
+npm install --save @loopback/authentication
+```
+
+To load the component in your application:
+
+```ts
+import {RestApplication} from '@loopback/rest';
+import {AuthenticationComponent} from '@loopback/authentication';
+
+const app = new RestApplication();
+// Add component to Application, which provides bindings used to resolve
+// authenticated requests in a Sequence.
+app.component(AuthenticationComponent);
+```
+
+## Creating components
+
+Please refer to [Creating components](Creating-components.md) for more
+information.

docs/site/Reference.md

@@ -1,6 +1,6 @@
 ---
 lang: en
-title: 'Reference'
+title: 'Reference guides'
 keywords: LoopBack 4.0, LoopBack 4, Node.js, TypeScript, OpenAPI
 sidebar: lb4_sidebar
 permalink: /doc/en/lb4/Reference.html