feat(common): add discovery page (valor-software#5332)

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,63 @@
+<demo-section>
+  <div class="image-responsive img-fluid main-logo">
+    <img class="mx-auto center-block d-block" src="assets/images/logos/ngx-bootstrap-logo.svg"
+         alt="ngx-bootstrap" width="200" height="200">
+  </div>
+
+  <h1 align="center">
+    <a href="https://github.com/valor-software/ngx-bootstrap">ngx-bootstrap</a>
+  </h1>
+
+  <p align="center">
+    The best way to quickly integrate <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3</a> or <a
+    href="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <a href="https://angular.io/">Angular</a>
+  </p>
+
+  <h2>Table of contents</h2>
+  <ol>
+    <li><a routerLink="." fragment="users">Who is using ngx-bootstrap</a></li>
+    <li><a routerLink="." fragment="releases">Versioning and Releases</a></li>
+    <li><a routerLink="." fragment="changelog">Changelog</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">40000 dependents</a>, but
+    let's see who are they: </p>
+  <div class="container">
+    <div class="row">
+      <div class="col-xl-6 col-md-12 col-sm-12 col-xs-12 company-card" *ngFor="let company of companies">
+        <a class="company-info-wrapper" href="{{company.link}}" target="_blank">
+          <div class="logo-name">
+            <img src="{{company.logo}}" alt="{{company.name}} logo">
+          </div>
+          <div class="company-description">{{company.description}}</div>
+        </a>
+      </div>
+    </div>
+  </div>
+  <br/>
+  <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="releases">Versioning and Releases </h2>
+  <div>We make all possible to make ngx-bootstrap wide-compatible. Compatibility table you can find in the <a target="_blank" href="#/documentation#compatibility">documentation</a>.</div>
+  <div>All our issues , enhancements, feature requests, which would be taken into work first you can find in the nearest <a target="_blank" href="https://github.com/valor-software/ngx-bootstrap/milestones">Milestone</a>.</div>
+
+  <h2 id="compatibility">Changelog</h2>
+  <p> All notable changes are described in the <a target="_blank" href="https://github.com/valor-software/ngx-bootstrap/blob/development/CHANGELOG.md">CHANGELOG.md</a> file.</p>
+
+  <h2 id="community">Community</h2>
+
+  <p>Chat with us on <a target="_blank" href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">Slack</a>.</p>
+  <p>For help using NGX-bootstrap, ask on <a target="_blank" href="https://stackoverflow.com/questions/tagged/ngx-bootstrap">StackOverflow</a> using the tag <b>ngx-bootstrap</b>.</p>
+  <p>Follow our core team member <a href="https://twitter.com/valorkin" target="_blank">@valorkin</a> on Twitter.</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 <a href="https://opencollective.com/ngx-bootstrap" target="_blank">OpenCollective</a>.</p>
+</demo-section>

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

@@ -0,0 +1,26 @@
+.company-card {
+  height: 150px;
+  padding: 8px 0;
+
+  .logo-name {
+    padding: 16px;
+  }
+
+  img {
+    width: 125px;
+  }
+
+  .company-info-wrapper {
+    height: 100%;
+    border: 1px solid lightgray;
+    border-radius: 4px;
+    margin: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-right: 8px;
+
+    text-transform: none;
+    color: inherit;
+  }
+}

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

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'discover',
+  templateUrl: './discover.component.html',
+  styleUrls: ['discover.component.scss']
+})
+
+export class DiscoverComponent {
+  name = `Native Angular widgets for Bootstrap 3 and Bootstrap 4 - Discover more`;
+  src = 'https://github.com/valor-software/ngx-bootstrap';
+
+  companies = [
+    {
+      logo: 'https://www.lumeer.io/wp-content/themes/lumeer/assets/img/logo-big.svg',
+      name: 'Lumeer',
+      description: 'Easy visual tool for project and team management, that covers all your needs',
+      link: 'https://www.lumeer.io/'
+    },
+    {
+      logo: 'https://user-images.githubusercontent.com/663563/57700709-ceca2800-765a-11e9-9484-a7a9bb1e6485.png',
+      name: 'Sustainablebuildings',
+      description: 'SaaS product that give users insight in their power, gas consumption and other data',
+      link: 'https://sustainablebuildings.nl'
+    },
+    {
+      logo: 'https://marketplace.vmware.com/resources/profiles/emc-corporation__1534778173832.png',
+      name: 'Dell EMC US',
+      description: 'Data Storage, Cloud, Converged and Data Protection',
+      link: 'https://www.dellemc.com/en-us/index.htm'
+    },
+    {
+      logo: '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',
+      name: 'Societe Generale Group',
+      description: 'The Bank serving 31 million clients worldwide',
+      link: 'https://www.societegenerale.com/en/home'
+    },
+    {
+      logo: 'http://www.azerothcore.org/images/logo.png',
+      name: 'AzerothCore',
+      description: 'AzerothCore, a no-profit organisation composed by volunteers who have a passion for open source',
+      link: 'http://www.azerothcore.org/'
+    },
+    {
+      logo: 'https://res.cloudinary.com/developerhub/image/upload/v1561908888/1/gmoiyrndwsboeffgiz1x.svg',
+      name: 'DeveloperHub',
+      description: 'DeveloperHub.io - Hosted Documentation Portals for Product And API Docs',
+      link: 'https://developerhub.io'
+    }
+  ];
+}

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>