add meta data (#5641)

* fix(pages): fix titles and descriptions

* fix(pages): titles and discriptions

* fix(pages): tripple

* fix(pages): fix titles

* feat(app): add og logo

docs/app/@theme/components/footer/footer.component.html

@@ -36,7 +36,7 @@
       </a>
     </li>
     <li class="copy">
-      &copy; 2015-2018 <a href="https://hubs.ly/H0n52JD0" target="_blank">Akveo LLC</a><br>
+      &copy; 2015-{{currentYear}} <a href="https://hubs.ly/H0n52JD0" target="_blank">Akveo LLC</a><br>
       Documentation licensed under CC BY 4.0.
     </li>
   </ul>

docs/app/@theme/components/footer/footer.component.ts

@@ -12,4 +12,7 @@ import { Component } from '@angular/core';
   templateUrl: './footer.component.html',
 })
 export class NgxLandingFooterComponent {
+  get currentYear() {
+    return new Date().getFullYear();
+  }
 }

docs/app/app.module.ts

@@ -18,6 +18,7 @@ import { LandingSharedModule } from './shared/landing-shared.module';
 import { DOCS, STRUCTURE } from './app.options';
 const docs = require('../output.json');
 import { structure  } from '../structure';
+import {MetadataService} from '../../src/app/@core/utils/metadata.service';
 
 @NgModule({
   declarations: [
@@ -36,6 +37,7 @@ import { structure  } from '../structure';
   bootstrap: [AppComponent],
   providers: [
     Title,
+    MetadataService,
     { provide: STRUCTURE, useValue: structure },
     { provide: DOCS, useValue: docs },
   ],

docs/app/pages/docs/landing-docs.component.ts

@@ -4,18 +4,18 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
-import { takeWhile, withLatestFrom, map } from 'rxjs/operators';
+import {Component, OnDestroy} from '@angular/core';
+import {Router} from '@angular/router';
+import {map, takeWhile, withLatestFrom} from 'rxjs/operators';
 import {
-  NbThemeService,
+  NbMediaBreakpoint,
   NbMenuItem,
   NbSidebarService,
-  NbMediaBreakpoint,
-} from '@nebular/theme';
+  NbThemeService} from '@nebular/theme';
 
-import { NgxMenuService } from '../../@theme/services/menu.service';
-import { NgxPaginationService } from '../../@theme/services/pagination.service';
+import {NgxMenuService} from '../../@theme/services/menu.service';
+import {NgxPaginationService} from '../../@theme/services/pagination.service';
+import {MetadataService} from '../../../../src/app/@core/utils/metadata.service';
 
 @Component({
   selector: 'ngx-landing-docs',
@@ -34,7 +34,12 @@ export class LandingDocsComponent implements OnDestroy {
     private router: Router,
     private themeService: NbThemeService,
     private sidebarService: NbSidebarService,
-    private paginationService: NgxPaginationService) {
+    private paginationService: NgxPaginationService,
+    private metadataService: MetadataService) {
+
+    this.metadataService.updateDescription('Free and Open Source ngx-admin to bootstrap the development of ' +
+      'your product or to learn Angular. Over 40+ Angular Components and 60+ Usage Examples.');
+    this.metadataService.updateTitle('A front-end admin dashboard on Angular 9+, Bootstrap 4+ and Nebular.');
 
     this.themeService.changeTheme('docs-page');
     this.paginationService.setPaginationItems('/docs');

docs/app/pages/docs/page/ngx-admin-landing-page.component.ts

@@ -6,7 +6,6 @@
 
 import { Component, Inject, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Title } from '@angular/platform-browser';
 import {
   filter,
   map,
@@ -21,6 +20,7 @@ import { fromEvent } from 'rxjs';
 
 import { NgxStructureService } from '../../../@theme/services/structure.service';
 import { NgxTocStateService } from '../../../@theme/services/toc-state.service';
+import {MetadataService} from '../../../../../src/app/@core/utils/metadata.service';
 
 @Component({
   selector: 'ngx-admin-landing-page',
@@ -38,7 +38,7 @@ export class NgxAdminLandingPageComponent implements OnDestroy, OnInit {
               private activatedRoute: ActivatedRoute,
               private structureService: NgxStructureService,
               private tocState: NgxTocStateService,
-              private titleService: Title) {
+              private metaDataService: MetadataService) {
   }
 
   get showSettings() {
@@ -63,7 +63,8 @@ export class NgxAdminLandingPageComponent implements OnDestroy, OnInit {
         }),
         filter(item => item),
         tap((item: any) => {
-          this.titleService.setTitle(`Nebular - ${item.name}`);
+          this.metaDataService.updateTitle(`Nebular - ${item.name}`);
+          this.metaDataService.updateDescription(item.description);
         }),
         publishReplay(),
         refCount(),

docs/app/pages/home/landing-home.component.ts

@@ -6,6 +6,7 @@
 
 import { Component } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import {MetadataService} from '../../../../src/app/@core/utils/metadata.service';
 
 @Component({
   selector: 'ngx-landing-home',
@@ -13,8 +14,10 @@ import { NbThemeService } from '@nebular/theme';
   styleUrls: ['./landing-home.component.scss'],
 })
 export class LandingHomeComponent {
-
-  constructor(private themeService: NbThemeService) {
+  constructor(private themeService: NbThemeService, private metadataService: MetadataService) {
+    this.metadataService.updateDescription('Save more than $33,000 using ngx-admin for personal and commercial' +
+      ' use. The dashboard is based on Angular 9+ and Bootstrap 4+. Completely FREE and MIT licensed.');
+    this.metadataService.updateTitle('Ngx-admin - most popular admin dashboard on Angular 9+ and Nebular.');
     this.themeService.changeTheme('ngx-landing');
   }
 }

docs/app/pages/home/material-landing/material-landing.component.html

@@ -1,6 +1,8 @@
 <nb-layout>
   <nb-layout-header fixed>
-    <ngx-landing-header></ngx-landing-header>
+    <ngx-landing-header>
+      <ngx-material-theme-link></ngx-material-theme-link>
+    </ngx-landing-header>
   </nb-layout-header>
 
   <nb-layout-column class="main-section">

docs/app/pages/home/material-landing/material-landing.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import {MetadataService} from '../../../../../src/app/@core/utils/metadata.service';
 
 @Component({
   selector: 'ngx-material-landing',
@@ -10,7 +11,10 @@ import { NbThemeService } from '@nebular/theme';
   ],
 })
 export class MaterialLandingComponent {
-  constructor(private themeService: NbThemeService) {
+  constructor(private themeService: NbThemeService, private metadataService: MetadataService) {
+    this.metadataService.updateDescription('Ngx-admin material works perfectly with Angular Material and Nebular.' +
+      ' Over 40+ Angular Components and 60+ Usage Examples.Take the best from both!');
+    this.metadataService.updateTitle('Ngx-admin material dashboard template based on Angular 9+ and Bootstrap 4+');
     this.themeService.changeTheme('ngx-landing-material');
   }
 }

docs/index.html

@@ -2,10 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>ngx-admin: Free Open Source admin dashboard template based on Angular, Bootstrap</title>
+  <title>The most popular admin dashboard based on Angular 9+ and Nebular.</title>
 
-  <meta name="description" content="Get Free Open Source admin dashboard template, based on Angular, Bootstrap and Nebular. ngx-admin includes 4 responsive themes, 30+ UI components with 60+ examples.">
+  <meta name="description" content="Save more than $33,000 using ngx-admin for personal and commercial use. The dashboard is based on Angular 9+ and Bootstrap 4+. Completely FREE and MIT licensed.">
   <meta name="keywords" content="ngx-admin LP, admin panel template, admin dashboard, bootstrap templates, angular bootstrap, admin template, free dashboard emplates, angular dashboard, angular templates free, angular template admin, angular template admin free, create a template  ngular, angular template builder, angular template download, angular template dashboard, angular ecommerce template, angular  emplate free download, angular template github, angular template guide, angular ng-template, angular template in component, angular template theme, angular template ui, angular template website, angular template with bootstrap, angular template 2017, angular template 2018, angular 6 template free, angular 6 template free download, angular 6 template github, angular 6 template  dmin, angular 6 template, angular 6 templates free download, open source template, open source responsive admin templates, admin  anel template free download, angular admin panel template, dashboard templates, angular admin panel template github backend bundle net core entity framework rest api">
+  <meta property="og:image" content="assets/img/logo.jpg"/>
 
   <base href="/">
 

docs/structure.ts

@@ -17,6 +17,7 @@ export const structure = [
       {
         type: 'page',
         name: 'Installation Guidelines',
+        description: 'A guideline to install ngx-admin on your machine: backend integration, tools you need to be installed.',
         children: [
           {
             type: 'block',
@@ -28,6 +29,7 @@ export const structure = [
       {
         type: 'page',
         name: 'Server deployment',
+        description: 'How to set up your web-server to better serve the application on Angular.',
         children: [
           {
             type: 'block',
@@ -45,6 +47,7 @@ export const structure = [
       {
         type: 'page',
         name: 'Theme System',
+        description: 'Theme System in is a set of rules we put into how SCSS files and variables are organized. Theme Map | Component Variables |  Built-in-Themes',
         children: [
           {
             type: 'block',
@@ -56,6 +59,7 @@ export const structure = [
       {
         type: 'page',
         name: 'Change Theme',
+        description: 'How to change the current theme in ngx-admin. Switch from Cosmic to Default. Runtime Theme Switch.',
         children: [
           {
             type: 'block',
@@ -67,6 +71,7 @@ export const structure = [
       {
         type: 'page',
         name: 'Backend integration',
+        description: 'Approaches of integration of ngx-admin application with backend API. Integration with JSON REST server, angular-cli/webpack-dev-server setup.',
         children: [
           {
             type: 'block',

src/app/@core/core.module.ts

@@ -57,6 +57,7 @@ import { MockDataModule } from './mock/mock-data.module';
 import { AbService } from './utils/ab.service';
 import {CurrentThemeService} from './utils/theme.service';
 import {ThemeGuard} from './guard/theme.guard';
+import {MetadataService} from './utils/metadata.service';
 
 const socialLinks = [
   {
@@ -153,6 +154,7 @@ export const NB_CORE_PROVIDERS = [
   LayoutService,
   PlayerService,
   SeoService,
+  MetadataService,
   StateService,
   AbService,
   CurrentThemeService,

src/app/@core/utils/metadata.service.ts

@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {Meta, Title} from '@angular/platform-browser';
+
+@Injectable()
+export class MetadataService {
+
+  constructor(
+    private title: Title,
+    private meta: Meta,
+  ) {}
+
+  updateTitle(title: string) {
+    this.title.setTitle(title);
+  }
+
+  updateDescription(desc: string) {
+    this.meta.updateTag({ name: 'description', content: desc });
+  }
+
+
+}

src/app/pages/dashboard/dashboard.component.ts

@@ -3,6 +3,7 @@ import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators' ;
 import { SolarData } from '../../@core/data/solar';
 import { AbService } from '../../@core/utils/ab.service';
+import {MetadataService} from '../../@core/utils/metadata.service';
 
 interface CardSettings {
   title: string;
@@ -85,6 +86,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   };
 
   constructor(private themeService: NbThemeService,
+              private metaDataService: MetadataService,
               private solarService: SolarData,
               private abService: AbService) {
     this.themeService.getJsTheme()
@@ -101,6 +103,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.metaDataService.updateTitle('Ngx-admin IoT dashboard on Angular 9+ and Nebular.');
+
     this.abService.onAbEvent(AbService.VARIANT_HIDE_CALL_ACTION)
       .pipe(takeWhile(() => this.alive))
       .subscribe(() => this.showCallAction = false );

src/app/pages/e-commerce/e-commerce.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { takeWhile } from 'rxjs/operators';
 import { AbService } from '../../@core/utils/ab.service';
+import {MetadataService} from '../../@core/utils/metadata.service';
 
 @Component({
   selector: 'ngx-ecommerce',
@@ -11,9 +12,12 @@ export class ECommerceComponent implements OnInit, OnDestroy {
   private alive = true;
   showCallAction = true;
 
-  constructor (private abService: AbService) {}
+  constructor (private abService: AbService,
+               private metaDataService: MetadataService) {}
 
   ngOnInit() {
+    this.metaDataService.updateTitle('Ngx-admin e-commerce dashboard on Angular 9+ and Nebular.');
+
     this.abService.onAbEvent(AbService.VARIANT_HIDE_CALL_ACTION)
       .pipe(takeWhile(() => this.alive))
       .subscribe(() => this.showCallAction = false );

src/app/pages/pages.component.ts

@@ -1,18 +1,27 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 
-import { MENU_ITEMS } from './pages-menu';
+import {MENU_ITEMS} from './pages-menu';
+import {NbMenuItem, NbMenuService} from '@nebular/theme';
+import {takeUntil} from 'rxjs/operators';
+import {Subject} from 'rxjs';
+import {MetadataService} from '../@core/utils/metadata.service';
 
 @Component({
   selector: 'ngx-pages',
   styleUrls: ['pages.component.scss'],
   template: `
-    <ngx-sample-layout>
-      <nb-menu [items]="menu"></nb-menu>
-      <router-outlet></router-outlet>
-    </ngx-sample-layout>
+      <ngx-sample-layout>
+          <nb-menu [items]="menu"></nb-menu>
+          <router-outlet></router-outlet>
+      </ngx-sample-layout>
   `,
 })
-export class PagesComponent implements OnInit {
+export class PagesComponent implements OnInit, OnDestroy {
+  destroy$: Subject<boolean> = new Subject<boolean>();
+
+  constructor(private menuService: NbMenuService,
+              private metaDataService: MetadataService) {
+  }
 
   menu = MENU_ITEMS;
 
@@ -20,5 +29,19 @@ export class PagesComponent implements OnInit {
     if (window['dataLayer']) {
       window['dataLayer'].push({'event': 'optimize.activate'});
     }
+
+    this.menuService
+      .onItemSelect()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data: { tag: string; item: NbMenuItem }) => {
+        if (data.item.title !== 'E-commerce' && data.item.title !== 'IoT Dashboard')
+          this.metaDataService.updateTitle(`Ngx-admin dashboard by Akveo| ${data.item.title}`);
+      });
   }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
 }

src/index.html

@@ -2,9 +2,11 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>ngx-admin - Angular 9, Bootstrap 4 Admin dashboard template</title>
-  <meta name="description" content="Free Angular 9 Bootstrap admin dashboard template.">
-  <meta name="keywords" content="admin,dashboard,template,angular 9,bootstrap,panel,html,css,javascript">
+
+  <title>Ngx-admin e-commerce dashboard on Angular 9+ and Nebular.</title>
+  <meta name="description" content="Free Angular 8 Bootstrap admin dashboard template.">
+  <meta name="keywords" content="admin,dashboard,template,angular 8,bootstrap,panel,html,css,javascript">
+  <meta property="og:image" content="assets/images/logo.jpg"/>
 
   <base href="/">