feat(demo-app): added github link & enhanced meta tags data with description and image

Author: llorenspujol

projects/demo-app/src/app/app.component.html

@@ -1,4 +1,12 @@
-
+<div class="app-header">
+    <h1>{{title}}</h1>
+    <a href="https://github.com/katoid/angular-grid-layout" target="_blank">
+        <button mat-icon-button>
+            <mat-icon svgIcon="github" class="github-icon">
+            </mat-icon>
+        </button>
+    </a>
+</div>
 <router-outlet></router-outlet>
 
 

projects/demo-app/src/app/app.component.scss

@@ -2,4 +2,26 @@
     width: 100%;
     display: block;
     background: #121212;
+    box-sizing: border-box;
+
+    .app-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 24px;
+        background-color: #222222;
+        border-bottom: 1px solid #424242;
+
+        h1 {
+            margin-bottom: 0;
+        }
+
+        mat-icon.github-icon {
+            line-height: 32px;
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+
 }

projects/demo-app/src/app/app.component.ts

@@ -1,14 +1,28 @@
 import { Component } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ActivatedRoute, Router, RoutesRecognized } from '@angular/router';
 
+const defaultTitle = 'Angular Grid Layout';
 
 @Component({
     selector: 'ktd-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
 })
 export class KtdAppComponent {
+    title: string = defaultTitle;
 
+    constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer, private router: Router, private readonly route: ActivatedRoute) {
+        this.matIconRegistry.addSvgIcon(
+            `github`,
+            this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/logos/github.svg`)
+        );
 
-    constructor() {
+        this.router.events.subscribe((data) => {
+            if (data instanceof RoutesRecognized) {
+                this.title = data.state.root.firstChild?.data.title || defaultTitle;
+            }
+        });
     }
 }

projects/demo-app/src/app/app.module.ts

@@ -3,6 +3,9 @@ import { NgModule } from '@angular/core';
 import { KtdAppComponent } from './app.component';
 import { KtdAppRoutingModule } from './app-routing.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [
@@ -11,7 +14,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
-        KtdAppRoutingModule
+        KtdAppRoutingModule,
+        HttpClientModule,
+        MatIconModule,
+        MatButtonModule
     ],
     providers: [],
     bootstrap: [KtdAppComponent]

projects/demo-app/src/app/custom-handles/custom-handles.component.html

@@ -1,4 +1,3 @@
-<h1>Angular Grid Layout - Custom handles</h1>
 <div class="grid-container">
     <ktd-grid cols="12"
               rowHeight="50"

projects/demo-app/src/app/custom-handles/custom-handles.module.ts

@@ -6,7 +6,11 @@ import { RouterModule, Routes } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 
 const routes: Routes = [
-    {path: 'custom-handles', component: KtdCustomHandlesComponent},
+    {
+        path: 'custom-handles',
+        component: KtdCustomHandlesComponent,
+        data: {title: 'Angular Grid Layout - Custom handles'}
+    },
 ];
 
 @NgModule({

projects/demo-app/src/app/playground/playground.component.html

@@ -1,4 +1,3 @@
-<h1>Angular Grid Layout - Playground</h1>
 <div class="playground-container">
     <div class="layout-json">
     </div>

projects/demo-app/src/app/playground/playground.module.ts

@@ -10,7 +10,11 @@ import { MatInputModule } from '@angular/material/input';
 import { MatChipsModule } from '@angular/material/chips';
 
 const routes: Routes = [
-    {path: 'playground', component: KtdPlaygroundComponent},
+    {
+        path: 'playground',
+        component: KtdPlaygroundComponent,
+        data: {title: 'Angular Grid Layout - Playground'}
+    },
 ];
 
 

projects/demo-app/src/app/real-life-example/real-life-example.component.html

@@ -1,4 +1,3 @@
-<h1>Angular Grid Layout - Real life example</h1>
 <div class="grid-container">
     <ktd-grid [cols]="cols"
               [rowHeight]="rowHeight"

projects/demo-app/src/app/real-life-example/real-life-example.module.ts

@@ -11,7 +11,11 @@ import { KtdTableSortingComponent } from './table-sorting/table-sorting.componen
 import { MatSortModule } from '@angular/material/sort';
 
 const routes: Routes = [
-    {path: 'real-life-example', component: KtdRealLifeExampleComponent},
+    {
+        path: 'real-life-example',
+        component: KtdRealLifeExampleComponent,
+        data: {title: 'Angular Grid Layout - Real life example'}
+    },
 ];
 
 @NgModule({