feat: introduce card with dominant border color

* put search into its own field
* rework navigation to be a card
CU-86c32zqk0

Author: uleMeshcloud

website/package.json

@@ -31,6 +31,7 @@
     "@typescript-eslint/eslint-plugin": "7",
     "@typescript-eslint/parser": "7",
     "bootstrap": "^5.3.3",
+    "colorthief": "^2.6.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.8",
     "express": "^4.18.2",

website/public/assets/meshstack-logo-black-white.png

@@ -1,7 +1,25 @@
 import { Routes } from '@angular/router';
 
+const loadTemplateGallery = () => import('./features/template-gallery').then(m => m.TemplateGalleryComponent);
+const loadTemplateDetails = () => import('./features/template-details').then(m => m.TemplateDetailsComponent);
+const loadPlatformView = () => import('./features/platform-view').then(m => m.PlatformViewComponent);
+
 export const routes: Routes = [
-  { path: 'template/:id', loadComponent: () => import('./features/template-details').then(m => m.TemplateDetailsComponent) },
-  { path: ':type', loadComponent: () => import('./features/template-gallery').then(m => m.TemplateGalleryComponent) },
-  { path: '', redirectTo: '/all', pathMatch: 'full' }
+  {
+    path: 'all',
+    loadComponent: loadTemplateGallery
+  },
+  {
+    path: 'platforms/:type',
+    loadComponent: loadPlatformView,
+  },
+  {
+    path: 'platforms/:type/definitions/:id',
+    loadComponent: loadTemplateDetails
+  },
+  {
+    path: 'definitions/:id',
+    loadComponent: loadTemplateDetails
+  },
+  { path: '', redirectTo: '/all', pathMatch: 'full' },
 ];

website/src/app/app.routes.ts

@@ -0,0 +1 @@
+export * from './platform-view.component';

website/src/app/features/platform-view/index.ts

@@ -0,0 +1,28 @@
+<div class="pt-5 ps-5 pe-5" >
+  <div class="pb-5" *ngIf="platform$ | async as platform">
+    <mst-card [label]="platform.title" [borderColorSourceImage]="platform.logo">
+      <div class="card-body d-flex" card-body>
+        <mst-logo-circle [title]="platform.title" [sourceImage]="platform.logo" [size]="'md'"></mst-logo-circle>
+        <h5 class="ms-3 card-title fw-bold align-self-center">
+          {{ platform.title }}
+        </h5>
+      </div>
+    </mst-card>
+  </div>
+
+  <h2>Platform building block definitions</h2>
+  These building block definitions provide pre-configured Terraform modules for automating common cloud tasks
+
+  <div class="row mt-4">
+    <ng-container *ngIf="templates$ | async as templates">
+      <ng-container *ngIf="templates.length > 0; else noTemplates">
+        <div class="col-sm-3 mb-3" *ngFor="let template of templates">
+          <mst-definition-card [card]="template"></mst-definition-card>
+        </div>
+      </ng-container>
+      <ng-template #noTemplates>
+        <p class="p-2">No building block definitions</p>
+      </ng-template>
+    </ng-container>
+  </div>
+</div>

website/src/app/features/platform-view/platform-view.component.html

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlatformViewComponent } from './platform-view.component';
+
+describe('PlatformViewComponent', () => {
+  let component: PlatformViewComponent;
+  let fixture: ComponentFixture<PlatformViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlatformViewComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(PlatformViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+      .toBeTruthy();
+  });
+});

website/src/app/features/platform-view/platform-view.component.scss

@@ -0,0 +1,93 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable, Subscription, forkJoin, map } from 'rxjs';
+
+import { PlatformType } from 'app/core';
+import { CardComponent } from 'app/shared/card';
+import { DefinitionCard } from 'app/shared/definition-card/definition-card';
+import { DefinitionCardComponent } from 'app/shared/definition-card/definition-card.component';
+import { LogoCircleComponent } from 'app/shared/logo-circle/logo-circle.component';
+import { PlatformData, PlatformService } from 'app/shared/platform-logo';
+import { TemplateService } from 'app/shared/template';
+
+interface PlatformVM {
+  logo: string | null;
+  title: string;
+}
+
+@Component({
+  selector: 'mst-platform-view',
+  imports: [CommonModule, DefinitionCardComponent, CardComponent, LogoCircleComponent],
+  templateUrl: './platform-view.component.html',
+  styleUrl: './platform-view.component.scss',
+  standalone: true
+})
+export class PlatformViewComponent implements OnInit, OnDestroy {
+  public platform$!: Observable<PlatformVM>;
+
+  public templates$!: Observable<DefinitionCard[]>;
+
+  private paramSubscription!: Subscription;
+
+  private platformData$!: Observable<PlatformData>;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private templateService: TemplateService,
+    private platformLogoService: PlatformService
+  ) { }
+
+  public ngOnInit(): void {
+    this.subscribeToRouteParams();
+  }
+
+  public ngOnDestroy(): void {
+    this.paramSubscription.unsubscribe();
+  }
+
+  private subscribeToRouteParams(): void {
+    this.paramSubscription = this.route.paramMap.subscribe(params => {
+      const type = params.get('type');
+
+      if (type) {
+        const templateObs$ = this.templateService.filterTemplatesByPlatformType(type as PlatformType);
+        this.platformData$ = this.platformLogoService.getAllPlatformData();
+        this.platform$ = this.platformData$.pipe(
+          map(platformData => ({
+            logo: platformData[type]?.logo ?? null,
+            title: platformData[type]?.name ?? ''
+          }),
+
+          )
+        );
+        this.templates$ = this.getTemplatesWithLogos(templateObs$, type);
+
+      } else {
+        this.router.navigate(['/all']);
+      }
+    });
+  }
+
+  private getTemplatesWithLogos(templateObs$: Observable<any>, type: string): Observable<DefinitionCard[]> {
+    return forkJoin({
+      templates: templateObs$,
+      platforms: this.platformData$
+    })
+      .pipe(
+        map(({ templates, platforms }) =>
+          templates.map(item => ({
+            cardLogo: item.logo,
+            title: item.name,
+            description: item.description,
+            routePath: `/platforms/${type}/definitions/${item.id}`,
+            supportedPlatforms: item.supportedPlatforms.map(platform => ({
+              platformType: platform,
+              imageUrl: platforms[item.platformType].logo ?? null
+            }))
+          }))
+        )
+      );
+  }
+}

website/src/app/features/platform-view/platform-view.component.spec.ts

@@ -50,7 +50,7 @@ <h5 class="card-text mt-3">to continue using this building block template</h5>
         <p>Check it out and how it can help your platform team</p>
         <a href="https://www.meshcloud.io/en/book-demo" class="btn btn-outline-primary mt-2">
           Discover meshStack
-          <img src="assets/meshstack-logo.png" alt="meshStack Logo" class="button-image" />
+          <img src="assets/meshstack-logo-black-white.png" alt="meshStack Logo" class="button-image" />
         </a>
       </div>
     </div>

website/src/app/features/platform-view/platform-view.component.ts

@@ -2,8 +2,3 @@
   width: 5rem;
   object-fit: contain;
 }
-
-.button-image {
-  width: 2rem;
-  object-fit: contain;
-}