✨ merge webchat and ng-demo pages in /docs/example-webapps + remove t…

…ry link on header menu

_includes/code-header.html

@@ -1,6 +1,8 @@
-<div class="d-flex mt-4 mb-2">
+<div class="d-flex mt-2 mb-2">
+    {% if include.type != null %}
     <span class="mr-3 text-muted"><strong>{{ include.type }}</strong></span>
+    {% endif %}
     {% if include.link != null %}
-    <a href="{{ include.link }}" class="btn btn-sm float-right" target="restninjatab">Execute on rest ninja</a>
+    <a href="{{ include.link }}" class="btn btn-sm float-right" target="restninjatab">Execute with restninja</a>
     {% endif %}
 </div>

_includes/docs-sidebar.html

@@ -5,11 +5,11 @@ <h2>Overview</h2>
 <ul id="overview" class="collapse">
     <li><a href="/docs">Overview</a></li>
     <li><a href="/docs/faq">FAQ</a></li>
-    <li><a href="/docs/try">Try RESTHeart online</a></li>
-    <li><a href="/docs/ng-demo">Simple Web App example</a></li>
-    <li><a href="/docs/plugins/tutorial">Plugin Framework Tutorial</a></li>
+    <li><a href="/docs/plugins/tutorial">Framework Tutorial</a></li>
     <li><a href="/docs/mongodb-rest/tutorial">REST API Tutorial</a></li>
     <li><a href="/docs/mongodb-graphql/tutorial">GraphQL API Tutorial</a></li>
+    <li><a href="/docs/security/tutorial">Auth^2 Tutorial</a></li>
+    <li><a href="/docs/example-webapps">Example Web Apps built with RESTHeart</a></li>
     <li><a href="/docs/performances">Performances</a></li>
     <li><a href="/docs/tutorials">Blog posts</a></li>
     <li><a href="/docs/video-tutorials">Video Tutorials</a></li>
@@ -66,6 +66,7 @@ <h3 id="rest-api" class="mt-2">Security Plugins</h2>
     <h2 class="mt-2">Security Plugins</h2>
 </a>
 <ul id="security" class="collapse">
+    <li><a href="/docs/security/tutorial">Auth^2 Tutorial</a></li>
     <li><a href="/docs/security/authentication">Authentication</a></li>
     <li><a href="/docs/security/authorization">Authorization</a></li>
     <li><a href="/docs/security/other-security-plugins">Other Security Plugins</a></li>
@@ -76,6 +77,7 @@ <h2 class="mt-2">MongoDB Plugins</h2>
 </a>
 <ul id="mongodb" class="collapse">
     <h3 id="rest-api" class="mt-2">REST API</h2>
+        <li><a href="/docs/mongodb-rest/tutorial">Tutorial</a></li>
     <li><a href="/docs/mongodb-rest/read-docs">Read Documents</a></li>
     <li><a href="/docs/mongodb-rest/write-docs">Write Documents</a></li>
     <li><a href="/docs/mongodb-rest/files">Binary Files with GridFS</a></li>

_includes/header.html

@@ -20,12 +20,7 @@ <h2 class="text-white"><strong>REST</strong>Heart</h2>
                     </li>
                     <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/docs" | prepend: site.baseurl }}">Docs</a></li>
                     <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/docs/faq" | prepend: site.baseurl }}"><strong>FAQ</strong></a></li>
-                    <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/docs/try/" | prepend: site.baseurl }}"><strong>Try online</strong></a></li>
-                    <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/docs/setup/" | prepend: site.baseurl }}"><strong>Download</strong></a></li>
-                    <!-- <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/#features" | prepend: site.baseurl }}">Features</a></li> -->
-                    <!-- <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/use-cases" | prepend: site.baseurl }}">Use cases</a></li> -->
-                    <!-- <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/support" | prepend: site.baseurl }}">Support</a></li> -->
-                    <!-- <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="https://medium.com/softinstigate-team">Blog</a></li> -->
+                    <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/docs/setup/" | prepend: site.baseurl }}"><strong>GET</strong></a></li>
                     <li class="nav-item"><a class="ml-1 ml-lg-2 ml-xl-4" href="{{ "/contact" | prepend: site.baseurl }}">Contacts</a></li>
                 </ul>
             </div>

docs/example-webapps.adoc

@@ -0,0 +1,98 @@
+---
+title: Example Web Apps built with RESTHeart
+layout: docs-adoc
+menu: overview
+---
+:page-liquid:
+
+== Introduction
+
+In this section, we'll introduce you to two web applications developed using Angular and RESTHeart, showcasing the capabilities of RESTHeart for Web Applications development.
+
+NOTE: here we use Angular. Of course you can use RESTHeart with any frontend framework!
+
+These examples demonstrate the versatility and ease of use of RESTHeart, which can be seamlessly integrated with various frontend frameworks to build dynamic web applications. Whether you are using Angular, React, or any other framework, RESTHeart provides a robust backend solution for your web development needs.
+
+== Webchat
+
+The Webchat application is a real-time chat app hosted at link:https://chat.restheart.org[chat.restheart.org^]. It enables users to engage in real-time conversations with others. What's remarkable about this application is that it requires zero lines of code for creating a real-time chat API, thanks to RESTHeart.
+
+To explore the source code and get a deeper understanding, you can access the GitHub repository at link:https://github.com/SoftInstigate/restheart-webchat[restheart-webchat GitHub repository^].
+
+Moreover, the app leverage RESTHeart link:/docs/mongodb-websocket[Change Streams]'s, allowing instant notifications to clients about any data modifications through WebSockets.
+
+[.iframe]
+++++
+<iframe src="https://chat.restheart.org" width="100%" height="600px" title="restheat-webchat"></iframe>
+++++
+
+[.mt-4]
+To gain insights into the communication flow between the web clients and RESTHeart, refer to the following diagram:
+
+[.img-fluid]
+image::/images/webchat-diagram.gif[Webchat Communication Diagram]
+
+== Messages Table View
+
+The Messages Table View application offers a simple and intuitive way to display a tabular view of _message_ documents stored in a MongoDB collection. Additionally, it provides a user-friendly form to create new messages. This application is hosted at link:https://ng-demo.restheart.org[ng-demo.restheart.org^].
+
+For those interested in exploring the source code, the GitHub repository can be found at link:https://github.com/SoftInstigate/restheart-ng-demo[restheart-ng-demo GitHub repository^].
+
+By utilizing RESTHeart, you can effortlessly build and manage this type of web application, making it a valuable tool for frontend developers looking to create interactive and data-driven experiences.
+
+Here's a live demo of the Messages Table View application:
+
+[.iframe]
+++++
+<iframe src="https://ng-demo.restheart.org" width="100%" height="600px" title="restheart-ng-demo"></iframe>
+++++
+
+[.mt-4]
+Let's examine the advantages of using RESTHeart. With the REST MongoDB API plugin, there's no need for any backend code, and the only frontend code required to interact with it is as follows:
+
+[source,typescript]
+----
+@Injectable()
+export class Service {
+  url = 'https://demo.restheart.org/messages';
+
+  constructor(private http: HttpClient) {
+  }
+
+  public get(page: number = 1): Observable<Array<any>> {
+    return this.http.get<Array<any>>(`${this.url}?pagesize=5&page=${page}`);
+  }
+
+  public size(): Observable<any> {
+    return this.http.get(`${this.url}/_size`);
+  }
+
+  public post(data: any): Observable<any> {
+    const _data = {
+      message: data.message,
+      from: data.from
+    };
+
+    return this.http.post(this.url, _data);
+  }
+}
+----
+
+== Sending a Message Using cURL
+
+In this section, we'll demonstrate how to send a chat message using the API with `curl`. By sending a POST request to link:https://demo.restheart.org/messages[demo.restheart.org/messages^], you can interact with the chat application programmatically.
+
+To send a message, use the following cURL command:
+
+[source,bash]
+----
+$ curl -i -H "Content-Type: application/json" -X POST https://demo.restheart.org/messages/ -d '{"from":"you", "message":"RESTHeart rocks!!" }'
+
+HTTP/1.1 201 Created
+----
+
+++++
+{% include code-header.html
+    link="http://restninja.io/share/1fd808b1f51037c8b2b36d43d6bc315a0325029c/3"
+%}
+++++

docs/security/tutorial.adoc

@@ -0,0 +1,12 @@
+---
+title: Auth^2 Tutorial
+layout: docs-adoc
+menu: security
+---
+
+In this upcoming tutorial, we will delve into the world of authentication and authorization for RESTHeart, exploring the fundamental aspects of securing your RESTful APIs.
+
+While the work is currently in progress, we're excited to provide you with a comprehensive guide on how to implement robust authentication and authorization mechanisms to safeguard your RESTHeart-powered applications. Stay tuned for this valuable resource that will empower you to take control of your API security.
+
+[.img-fluid.mx-auto]
+image::https://http.cat/404[not found]