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

@@ -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/template-details/import-dialog/import-dialog.component.html

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

website/src/app/features/template-details/import-dialog/import-dialog.component.scss

@@ -1,30 +1,16 @@
-<div class="header pt-0 ps-5 pe-5 pb-2">
-  <div class="row w-25">
-    <form [formGroup]="searchForm" (ngSubmit)="onSearch()">
-      <div class="input-group mt-3 me-auto">
-        <input
-          type="text"
-          class="form-control"
-          aria-label="Search"
-          formControlName="searchTerm"
-          (keyup.enter)="onSearch()"
-          placeholder="Search"
-        />
-        <button class="btn btn-primary" type="submit" (click)="onSearch()">
-          <i class="fa-solid fa-magnifying-glass"></i>
-        </button>
-      </div>
-    </form>
-  </div>
-  <div class="pt-5">
+<div class="pt-5 ps-5 pe-5">
+  <ng-container>
     <mst-navigation></mst-navigation>
-  </div>
-</div>
+    <div *ngIf="!(isSearch$ | async)" class="pt-5 pb-5">
+      <h2>All building block definitions</h2>
+      These are pre-configured Terraform modules for automating common cloud tasks across AWS, Azure, GCP, and custom
+      cloud platforms, enabling rapid and consistent infrastructure provisioning and management
+    </div>
+  </ng-container>
 
-<div class="pt-4 ps-5 pe-5">
   <div class="row">
     <ng-container *ngIf="templates$ | async as templates">
-      <p class="pb-2" *ngIf="isSearch && templates.length">{{ templates.length }} templates found</p>
+      <p class="pb-2" *ngIf="(isSearch$ | async) && templates.length">{{ templates.length }} templates found</p>
       <ng-container *ngIf="templates.length > 0; else noTemplates">
         <div class="col-sm-3 mb-3" *ngFor="let template of templates">
           <mst-card [card]="template"></mst-card>

website/src/app/features/template-gallery/template-gallery.component.html

@@ -1,14 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable, Subscription, forkJoin, map, tap } from 'rxjs';
+import { Observable, Subscription, forkJoin, map } from 'rxjs';
 
 import { PlatformType } from 'app/core';
 import { CardComponent } from 'app/shared/card';
 import { Card } from 'app/shared/card/card';
 import { NavigationComponent } from 'app/shared/navigation';
 import { PlatformLogoData, PlatformLogoService } from 'app/shared/platform-logo';
+import { SearchService } from 'app/shared/search-bar/search.service';
 import { TemplateService } from 'app/shared/template';
 
 @Component({
@@ -21,42 +22,35 @@ import { TemplateService } from 'app/shared/template';
 export class TemplateGalleryComponent implements OnInit, OnDestroy {
   public templates$!: Observable<Card[]>;
 
-  public searchForm!: FormGroup;
-
-  public isSearch = false;
+  public isSearch$!: Observable<boolean>;
 
   private paramSubscription!: Subscription;
 
+  private searchSubscription!: Subscription;
+
   private logos$!: Observable<PlatformLogoData>;
 
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private fb: FormBuilder,
     private templateService: TemplateService,
+    private searchService: SearchService,
     private platformLogoService: PlatformLogoService
-  ) {}
+  ) { }
 
   public ngOnInit(): void {
-    this.initializeSearchForm();
     this.subscribeToRouteParams();
+    this.subscribeToSearchTerm();
+    this.isSearch$ = this.searchService.getSearchTerm$()
+      .pipe(
+        map(searchTerm =>
+          searchTerm === '' ? false : true)
+      );
   }
 
   public ngOnDestroy(): void {
     this.paramSubscription.unsubscribe();
-  }
-
-  public onSearch(): void {
-    const searchTerm = this.searchForm.value.searchTerm;
-    this.templates$ = this.getTemplatesWithLogos(this.templateService.search(searchTerm));
-    this.isSearch = !!searchTerm;
-    this.router.navigate(['/all']);
-  }
-
-  private initializeSearchForm(): void {
-    this.searchForm = this.fb.group({
-      searchTerm: ['']
-    });
+    this.searchSubscription.unsubscribe();
   }
 
   private subscribeToRouteParams(): void {
@@ -69,19 +63,25 @@ export class TemplateGalleryComponent implements OnInit, OnDestroy {
     });
   }
 
+  private subscribeToSearchTerm(): void {
+    this.searchSubscription = this.searchService.searchTerm$.subscribe(searchTerm => {
+      this.templates$ = this.getTemplatesWithLogos(this.templateService.search(searchTerm));
+      this.router.navigate(['/all']);
+    });
+  }
+
   private getTemplatesWithLogos(templateObs$: Observable<any>): Observable<Card[]> {
     return forkJoin({
       templates: templateObs$,
       logos: this.logos$
     })
       .pipe(
-        tap(() => (this.isSearch = false)),
         map(({ templates, logos }) =>
           templates.map(item => ({
             cardLogo: item.logo,
             title: item.name,
             description: item.description,
-            detailsRoute: `/template/${item.id}`,
+            routePath: `/template/${item.id}`,
             supportedPlatforms: item.supportedPlatforms.map(platform => ({
               platformType: platform,
               imageUrl: logos[item.platformType] ?? null
@@ -90,5 +90,4 @@ export class TemplateGalleryComponent implements OnInit, OnDestroy {
         )
       );
   }
-
 }

website/src/app/features/template-gallery/template-gallery.component.ts

@@ -1,31 +1,38 @@
 <div
-  class="card text-center"
+  class="card"
   tabindex="0"
   role="card"
   [attr.aria-label]="card.title"
-  (click)="goToDetails()"
-  (keyup.enter)="goToDetails()"
+  (click)="navigateToRoutePath()"
+  (keyup.enter)="navigateToRoutePath()"
+  [ngStyle]="config.borderDominantColorOfLogo ? { 'border-color': borderColor, 'border-width': '0.15rem' } : {}"
 >
-  <span class="card-label">Building Block</span>
-
   <div class="card-body">
-    <div class="d-flex justify-content-center">
-      <div class="circle">
+    <div
+      class="d-flex justify-content-center mt-2"
+      [ngClass]="config.titleNextToLogo ? 'flex-row align-items-stretch' : 'flex-column align-items-center'"
+    >
+      <div class="circle shadow" [ngClass]="{ 'circle-sm': config.titleNextToLogo }">
         <img *ngIf="card.cardLogo; else unknownLogo" [src]="card.cardLogo" [alt]="'Logo for ' + card.title" />
         <ng-template #unknownLogo>
           <img src="assets/meshstack-logo.png" alt="Unknown Logo" />
         </ng-template>
       </div>
-    </div>
-    <div class="d-flex justify-content-center mt-3">
-      <div class="container">
-        <h5 class="card-title fw-bold">{{ card.title }}</h5>
-        <p class="card-text text-start mt-3">{{ card.description }}</p>
+      <div class="d-flex">
+        <h5
+          class="card-title align-self-center text-center fw-bold m-0"
+          [ngClass]="config.titleNextToLogo ? 'ms-3 h6' : 'mt-3'"
+        >
+          {{ card.title }}
+        </h5>
       </div>
     </div>
+    <div class="d-flex mt-3 justify-content-center">
+      <p class="card-text ps-3 pe-3">{{ card.description }}</p>
+    </div>
   </div>
 
-  <div class="card-footer">
+  <div class="card-footer" *ngIf="config.showFooter">
     <div class="d-flex flex-row-reverse justify-content-between">
       <ng-container *ngFor="let platform of card.supportedPlatforms">
         <img [src]="platform.imageUrl" [alt]="platform.platformType" class="footer-icon" />

website/src/app/shared/card/card.component.html

@@ -5,6 +5,7 @@
   transition: transform 0.3s;
   cursor: pointer;
   box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
+  border-radius: 0.5rem; // Added to make the card border rounder
 
   &:hover {
     transform: scale(1.05);
@@ -32,13 +33,18 @@
 }
 
 .circle {
-  width: 5rem;
-  height: 5rem;
+  width: 5.5rem;
+  height: 5.5rem;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 
+  &.circle-sm {
+    width: 3rem;
+    height: 3rem;
+  }
+
   img {
     width: 75%;
     height: 75%;

website/src/app/shared/card/card.component.scss

@@ -1,8 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
+import ColorThief from 'colorthief';
 
-import { Card } from './card';
+import { Card, CardConfig } from './card';
 
 @Component({
   selector: 'mst-card',
@@ -13,12 +14,58 @@ import { Card } from './card';
 })
 export class CardComponent {
   @Input()
-  public card!: Card;
+  public set card(value: Card) {
+    this._card = value;
+    this.updateBorderColor();
+  }
 
-  constructor(private router: Router) {}
+  public get card(): Card {
+    return this._card;
+  }
 
-  public goToDetails() {
-    this.router.navigate([this.card.detailsRoute]);
+  @Input()
+  public set config(value: CardConfig) {
+    this._config = value;
+    this.updateBorderColor();
   }
-}
 
+  public get config(): CardConfig {
+    return this._config;
+  }
+
+  public borderColor = '';
+
+  private _card!: Card;
+
+  private _config: CardConfig = {
+    titleNextToLogo: false,
+    showFooter: true,
+    borderDominantColorOfLogo: false
+  };
+
+  constructor(private router: Router) { }
+
+  public navigateToRoutePath(): void {
+    if (this.card.routePath) {
+      this.router.navigate([this.card.routePath]);
+    }
+  }
+
+  private updateBorderColor(): void {
+    if (!this.card?.cardLogo || !this.config.borderDominantColorOfLogo) {
+      this.borderColor = '';
+
+      return;
+    }
+
+    if (typeof window !== 'undefined') {
+      const img = new Image();
+      img.src = this.card.cardLogo;
+      img.onload = () => {
+        const colorThief = new ColorThief();
+        const dominantColor = colorThief.getColor(img);
+        this.borderColor = `rgb(${dominantColor.join(',')})`;
+      };
+    }
+  }
+}

website/src/app/shared/card/card.component.ts

@@ -3,7 +3,13 @@ import { PlatformType } from 'app/core';
 export interface Card {
   cardLogo: string | null;
   title: string;
-  description: string;
-  detailsRoute: string;
+  description: string | null;
+  routePath: string;
   supportedPlatforms: { platformType: PlatformType; imageUrl: string }[];
 }
+
+export interface CardConfig {
+  titleNextToLogo: boolean;
+  showFooter: boolean;
+  borderDominantColorOfLogo: boolean;
+}