Auto stash before merge of "master" and "origin/master"

src/app/homepage/pages/components/components.component.html

@@ -11,7 +11,7 @@ <h3>Components</h3>
      The controllers should only handle HTTP requests and delegate more complex tasks to the <strong>components</strong>. 
      The components are a plain TypeScript classes with <code>@Component()</code> decorator.
    </p>
-   <blockquote>
+   <blockquote class="info">
     <strong>Hint</strong> Since Nest enables the possibility to design, organize the dependencies in more OO-way, we strongly recommend
     to follow the <strong>SOLID</strong> principles.
   </blockquote>
@@ -50,7 +50,7 @@ <h4>Dependency Injection</h4>
     Nest is built around the strong design pattern, which is commonly known as a <strong>Dependency Injection</strong>.
     There's a great article about this concept in the <a href="https://angular.io/guide/dependency-injection" target="blank">official Angular documentation</a>.
   </p>
-  <blockquote>
+  <blockquote class="info">
     <strong>Hint</strong> Learn more about the <strong>Dependency Injection</strong> in Nest <a href="http://docs.nestjs.com/fundamentals/dependency-injection" target="blank">here</a>.
   </blockquote> 
   <p>

src/app/homepage/pages/controllers/controllers.component.html

@@ -59,7 +59,7 @@ <h4>Request object</h4>
     In fact, Nest is using express <a href="http://expressjs.com/en/api.html#req" target="blank">request object</a>.
     We can force Nest to inject the request object into handler using <code>@Req()</code> decorator.
   </p>
-  <blockquote class="warning">
+  <blockquote class="info">
     <strong>Hint</strong> There's a <code>@types/express</code> package and we strongly recommend to use it (<code>Request</code> has its own typings).
   </blockquote>
   <span class="filename">
@@ -144,7 +144,7 @@ <h4>Async / await</h4>
     We love modern JavaScript, and we know that the data extraction is mostly <strong>asynchronous</strong>.
     That's why Nest supports <code>async</code> functions, and works pretty well with them.
   </p>
-  <blockquote>
+  <blockquote class="info">
     <strong>Hint</strong> Learn more about <code>async / await</code> <a href="https://kamilmysliwiec.com/typescript-2-1-introduction-async-await" target="blank">here</a>!
   </blockquote>
   <p>

src/app/homepage/pages/exception-filters/exception-filters.component.html

@@ -24,8 +24,8 @@ <h4>HttpException</h4>
   </span>
    <pre [class.hide]="createMethodT.isJsActive"><code class="language-typescript">{{ createMethod }}</code></pre>
    <pre [class.hide]="!createMethodT.isJsActive"><code class="language-typescript">{{ createMethodJs }}</code></pre>
-   <blockquote>
-      <strong>Notice</strong> I've used the <code>HttpStatus</code> here. It's just a helper enum imported from the <code>@nestjs/common</code> package.
+   <blockquote class="warning">
+      <strong>Warning</strong> I have used the <code>HttpStatus</code> here. It's a helper enum imported from the <code>@nestjs/common</code> package.
     </blockquote>
     <p>
       Now when the client will call this endpoint, the response would looks like below:
@@ -103,7 +103,7 @@ <h4>Exception Filters</h4>
     <p>
       The <code>response</code> is a native express <a href="http://expressjs.com/en/api.html#res" target="blank">response object</a>. The <code>exception</code> is a currently processed exception.
     </p>
-    <blockquote class="warning">
+    <blockquote class="info">
       <strong>Hint</strong> Every exception filter should implement the <code>ExceptionFilter</code> interface. It forces to provide the <code>catch()</code> method with the proper signature.
     </blockquote>
     <p>
@@ -119,8 +119,8 @@ <h4>Exception Filters</h4>
     </span>
     <pre [class.hide]="forbiddenCreateMethodWithFilterT.isJsActive"><code class="language-typescript">{{ forbiddenCreateMethodWithFilter }}</code></pre>
     <pre [class.hide]="!forbiddenCreateMethodWithFilterT.isJsActive"><code class="language-typescript">{{ forbiddenCreateMethodWithFilterJs }}</code></pre>
-    <blockquote>
-      <strong>Hint</strong> The <code>@UseFilters()</code> decorator is imported from the <code>@nestjs/common</code> package.
+    <blockquote class="warning">
+      <strong>Warning</strong> The <code>@UseFilters()</code> decorator is imported from the <code>@nestjs/common</code> package.
     </blockquote>
     <p>
       We've used the <code>@UseFilters()</code> decorator here. Same as <code>@Catch()</code>, it takes infinite count of parameters.

src/app/homepage/pages/middlewares/middlewares.component.html

@@ -51,7 +51,7 @@ <h4>Where to put the middlewares?</h4>
   </span>
   <pre [class.hide]="applicationModuleT.isJsActive"><code class="language-typescript">{{ applicationModule }}</code></pre>
   <pre [class.hide]="!applicationModuleT.isJsActive"><code class="language-typescript">{{ applicationModuleJs }}</code></pre>
-  <blockquote>
+  <blockquote class="info">
     <strong>Hint</strong> We could pass here (inside <code>forRoutes()</code>) the single object and just use <code>RequestMethod.ALL</code>.
   </blockquote>
   <p>
@@ -69,7 +69,7 @@ <h4>Where to put the middlewares?</h4>
   </span>
   <pre [class.hide]="applicationModuleByControllersT.isJsActive"><code class="language-typescript">{{ applicationModuleByControllers }}</code></pre>
   <pre [class.hide]="!applicationModuleByControllersT.isJsActive"><code class="language-typescript">{{ applicationModuleByControllersJs }}</code></pre>  
-  <blockquote>
+  <blockquote class="info">
     <strong>Hint</strong> The <code>apply()</code> method can take single middleware or an <strong>array of middlewares</strong>.
   </blockquote>
   <h4>Pass arguments to the middleware</h4>
@@ -128,7 +128,7 @@ <h4>Functional Middlewares</h4>
   </span>
   <pre [class.hide]="applyFunctionalMiddlewareT.isJsActive"><code class="language-typescript">{{ applyFunctionalMiddleware }}</code></pre>
   <pre [class.hide]="!applyFunctionalMiddlewareT.isJsActive"><code class="language-typescript">{{ applyFunctionalMiddlewareJs }}</code></pre>
-  <blockquote class="warning">
+  <blockquote class="info">
     <strong>Hint</strong> Let's consider to use <strong>functional middlewares</strong> everytime when your middleware doesn't have any dependencies.
   </blockquote>
 </div>

src/styles.scss

@@ -62,6 +62,12 @@ blockquote {
     &::before { background: #ed8529; }
     strong, a { color: #ed8529; }
   }
+
+  &.info {
+    background: rgba(8, 148, 226, 0.038);
+    &::before { background: #0894e2; }
+    strong, a { color: #0894e2 }
+  }
 }
 
 figure {