feat(core): add discover page with who are using ngx

demo/src/app/app.module.ts

@@ -15,13 +15,14 @@ import { routes } from './app.routing';
 import { DocumentationComponent } from './common/documentation/documentation.component';
 import { LandingComponent } from './common/landing/landing.component';
 import { TopMenuComponent } from './common/top-menu/top-menu.component';
+import { DiscoverComponent } from './common/discover/discover.component';
 import { DocsModule } from './docs';
 import { NgApiDoc } from './docs/api-docs/api-docs.model';
 import { StyleManager } from './theme/style-manager';
 import { ThemeStorage } from './theme/theme-storage';
 
 @NgModule({
-  declarations: [AppComponent, DocumentationComponent, TopMenuComponent, LandingComponent],
+  declarations: [AppComponent, DocumentationComponent, TopMenuComponent, LandingComponent, DiscoverComponent],
   imports: [
     BrowserAnimationsModule,
     DocsModule,

demo/src/app/app.routing.ts

@@ -1,5 +1,6 @@
 import { LandingComponent } from './common/landing/landing.component';
 import { DocumentationComponent } from './common/documentation/documentation.component';
+import { DiscoverComponent } from './common/discover/discover.component';
 
 export const routes = [
   {
@@ -12,6 +13,11 @@ export const routes = [
     data: ['Documentation'],
     component: DocumentationComponent
   },
+  {
+    path: 'discover',
+    data: ['Discover'],
+    component: DiscoverComponent
+  },
   {
     path: 'accordion',
     data: ['Accordion', {moduleName: 'AccordionModule', moduleFolder: 'accordion'}],

demo/src/app/common/discover/discover.component.html

@@ -0,0 +1,96 @@
+<demo-section>
+      <h2>Table of contents</h2>
+      <ol>
+        <li><a routerLink="." fragment="users">Who is using ngx-bootstrap</a></li>
+        <li><a routerLink="." fragment="vision">Vision</a></li>
+        <li><a routerLink="." fragment="releases">Versioning and Releases</a></li>
+        <li><a routerLink="." fragment="changelog">Changelog</a></li>
+        <li><a routerLink="." fragment="team">Team</a></li>
+        <li><a routerLink="." fragment="community">Community</a></li>
+      </ol>
+
+      <h2 id="users">Who is using <span class="pln">ngx-bootstrap</span></h2>
+
+  <p>Some time ago, we've started to investigate <a href="https://github.com/valor-software/ngx-bootstrap/issues/5168" target="_blank">companies, which using library ngx-bootstrap</a> in their projects.</p>
+  <p>We know, that for now, we have more than <a href="https://github.com/valor-software/ngx-bootstrap/network/dependents" target="_blank">36000 dependents</a>, but let's see who are they: </p>
+  <div class="container">
+    <div class="col-md-6">
+      <pre class="card card-block card-group">
+        <img src="https://www.lumeer.io/wp-content/themes/lumeer/assets/img/logo-big.svg" alt="Lumeer" width="250" height="100">
+        <a href="https://www.lumeer.io/" target="_blank">https://www.lumeer.io/</a>
+        <br>Lumeer | Easy visual tool for project and team <br>management, that covers all your needs</pre>
+    </div>
+
+  <div class="col-md-6">
+      <pre class="card card-block card-group">
+        <img src="https://user-images.githubusercontent.com/663563/57700709-ceca2800-765a-11e9-9484-a7a9bb1e6485.png" alt="Sustainablebuildings" width="250" height="100">
+        <a href="https://sustainablebuildings.nl" target="_blank">https://sustainablebuildings.nl</a>
+        <br>SaaS product that give users insight in their power, <br>gas consumption and other data.</pre>
+    </div>
+
+  <div class="col-md-6">
+      <pre class="card card-block card-group">
+        <img src="https://marketplace.vmware.com/resources/profiles/emc-corporation__1534778173832.png" alt="Dell Emc" width="250">
+        <a href="https://www.dellemc.com/en-us/index.htm" target="_blank">https://www.dellemc.com/</a>
+        <br>Dell EMC US | Data Storage, Cloud, Converged <br>and Data Protection</pre>
+    </div>
+
+   <div class="col-md-6">
+      <pre class="card card-block card-group">
+        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Soci%C3%A9t%C3%A9_G%C3%A9n%C3%A9rale.svg/279px-Soci%C3%A9t%C3%A9_G%C3%A9n%C3%A9rale.svg.png" alt="Société Générale" width="250">
+        <a href="https://www.societegenerale.com/en/home" target="_blank">Société Générale</a>
+        <br>Societe Generale Group | The Bank serving 31 million <br>clients worldwide.</pre>
+    </div>
+
+  <div class="col-md-6">
+      <pre class="card card-block card-group">
+        <img src="http://www.azerothcore.org/images/logo.png" alt="AzerothCore" width="120">
+        <a href="http://www.azerothcore.org/" target="_blank">http://www.azerothcore.org/</a>
+        <br>AzerothCore, a no-profit organisation composed by <br>volunteers who have a passion for open source.</pre>
+    </div>
+  </div>
+
+  <div>If your company also using ngx-bootstrap and you want to be in this list:
+    just add an appropriate comment to <a href="https://github.com/valor-software/ngx-bootstrap/issues/5168" target="_blank">this investigation issue: 5168.</a></div>
+
+  <h2 id="vision">Vision</h2>
+      <h4>Our goals</h4>
+
+      <h2 id="releases">Versioning and Releases </h2>
+      <div>Link to compatibility table</div>
+      <div>Link to the nearest Milestone</div>
+      <div>TODO - our global plans for 1-2 years</div>
+
+      <h2 id="compatibility">Changelog</h2>
+      <p>NGX-bootstrap strictly follows .... Versioning 2.0.0.
+
+        All notable changes are described in the CHANGELOG.md file. (TODO link)</p>
+
+      <h2 id="team">Team</h2>
+
+      <p>An overview of the founding team and core contributors to NGX-bootstrap</p>
+
+      <p>
+        NGX-bootstrap is maintained by a small group of invaluable core contributors, with the massive support and involvement of our community.
+      </p>
+
+      <h4>Active Core Team</h4>
+      <div>Person Image/Person Name/Position?/Link to github+twitter+medium+blog+etc</div>
+      <div>Person Image/Person Name/Position?/Link to github+twitter+medium+blog+etc</div>
+      <div>Person Image/Person Name/Position?/Link to github+twitter+medium+blog+etc</div>
+
+      <h4>Frequent contributors</h4>
+      <div>Person Image/Person Name/Position?/Link to github+twitter+medium+blog+etc</div>
+      <div>Person Image/Person Name/Position?/Link to github+twitter+medium+blog+etc</div>
+      <div>Person Image/Person Name/Position?/Link to github+twitter+medium+blog+etc</div>
+
+      <h2 id="community">Community</h2>
+
+      <p>Chat with us on Slack (TODO link)</p>.
+      <p>For help using NGX-bootstrap, ask on StackOverflow using the tag ngx-bootstrap. (TODO link)</p>
+      <p>Follow @NGX-bootstrap and our core team member @valorkin on Twitter.(TODO link)</p>
+
+      <p>If you also would like to show support or simply give back to Open Source community, please consider becoming a backer sponsor of ngx-bootstrap on OpenCollective.</p>
+
+      <object type="image/svg+xml" data="https://opencollective.com/ngx-bootstrap/tiers/backer.svg"></object>
+</demo-section>

demo/src/app/common/discover/discover.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'discover',
+  templateUrl: './discover.component.html'
+})
+export class DiscoverComponent {
+  name = `Native Angular widgets for Bootstrap 3 and Bootstrap 4 - Discover more`;
+  src = 'https://github.com/valor-software/ngx-bootstrap';
+}

demo/src/app/common/sidebar/sidebar.component.html

@@ -18,12 +18,13 @@
       <li [routerLinkActive]="['active']"
           [routerLinkActiveOptions]="{exact: true}">
         <a routerLink="/{{routes[1].path}}">{{routes[1].data}}</a>
+        <a routerLink="/{{routes[2].path}}">{{routes[2].data}}</a>
       </li>
     </ul>
 
     <h4 class="sidebar-title">Components</h4>
     <ul class="sidebar-list">
-      <li *ngFor="let route of routes | slice:2 | SearchFilter:search.text"
+      <li *ngFor="let route of routes | slice:3 | SearchFilter:search.text"
           [routerLinkActive]="['active']"
           [routerLinkActiveOptions]="{exact: true}">
         <a routerLink="/{{route.path}}">{{route.data[0]}}</a>