feat: capture original meshStack URL when user visits hub from meshStack

website/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, Inject, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnDestroy, PLATFORM_ID } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
@@ -13,19 +13,44 @@ import { FooterComponent } from './shared/footer';
   templateUrl: './app.component.html',
   standalone: true
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy{
   constructor(@Inject(PLATFORM_ID) private platformId: Object) {
-    this.loadPlausible();
+    // Ensure we are in the browser (not SSR)
+    if (isPlatformBrowser(this.platformId)) {
+      this.loadPlausible();
+      this.setupMessageListener();
+    }
   }
 
-  loadPlausible() {
-    // Ensure we are in the browser (not SSR)
+  public ngOnDestroy(): void {
+    this.removeMessageListener();
+  }
+
+  public loadPlausible() {
+    const script = document.createElement('script');
+    script.src = 'https://plausible.cluster.dev.meshcloud.io/js/script.js';
+    script.setAttribute('data-domain', 'hub.meshcloud.io');
+    script.defer = true;
+    document.head.appendChild(script);
+  }
+
+  private setupMessageListener(): void {
     if (isPlatformBrowser(this.platformId)) {
-      const script = document.createElement('script');
-      script.src = 'https://plausible.cluster.dev.meshcloud.io/js/script.js';
-      script.setAttribute('data-domain', 'hub.meshcloud.io');
-      script.defer = true;
-      document.head.appendChild(script);
+      window.addEventListener('message', this.handleMessage.bind(this), false);
+    }
+  }
+
+  private removeMessageListener(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      window.removeEventListener('message', this.handleMessage.bind(this), false);
+    }
+  }
+
+  private handleMessage(event: MessageEvent): void {
+    const originUrl = event.data.originUrl;
+
+    if (typeof originUrl === 'string') {
+      localStorage.setItem('referrerUrl', originUrl);
     }
   }
 }

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

@@ -31,8 +31,11 @@ export class ImportDialogComponent implements OnInit {
   ) { }
 
   public ngOnInit(): void {
+    const originUrl = localStorage.getItem('referrerUrl') ?? '';
     this.form = this.fb.group({
-      meshStackUrl: this.fb.nonNullable.control('', [Validators.required, Validators.pattern(/^(https?:\/\/).*/)]),
+      meshStackUrl: this.fb.nonNullable.control(
+        originUrl, [Validators.required, Validators.pattern(/^(https?:\/\/).*/)]
+      ),
     });
   }
 

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

@@ -48,10 +48,7 @@ export class TemplateGalleryComponent implements OnInit, OnDestroy {
 
   public onSearch(): void {
     const searchTerm = this.searchForm.value.searchTerm;
-    this.templates$ = this.getTemplatesWithLogos(
-      this.templateService.search(searchTerm)
-    );
-
+    this.templates$ = this.getTemplatesWithLogos(this.templateService.search(searchTerm));
     this.isSearch = !!searchTerm;
     this.router.navigate(['/all']);
   }
@@ -93,4 +90,5 @@ export class TemplateGalleryComponent implements OnInit, OnDestroy {
         )
       );
   }
+
 }

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

@@ -6,11 +6,23 @@
     <h1 class="title">Welcome to meshStack Hub!</h1>
   </div>
 
-  <div class="w-50">
-    <p class="text-dark">
-      Find ready-to-use Terraform modules to integrate with meshStack. Automate cloud governance or roll out commonly
-      used cloud resources. Built for scalability and security, these modules help you build your platform faster!
-      Explore the collection below and get started!
-    </p>
+  <div class="d-flex justify-content-between">
+    <div class="w-50">
+      <p class="text-dark">
+        Find ready-to-use Terraform modules to integrate with meshStack. Automate cloud governance or roll out commonly
+        used cloud resources. Built for scalability and security, these modules help you build your platform faster!
+        Explore the collection below and get started!
+      </p>
+    </div>
+    <span class="user-select-all text-truncate" style="color: transparent; width: 21ch; max-height: 4rem;">
+      Eggcelent! 🥚 <br>Now copy & paste me! <br>
+      You've cracked the clue wide open LOL
+      And this my friend, is an example of *what not to do* when hiding content.
+      #Accessibility Talk
+      You've discovered what was meant to hide,
+      a div transparent just like we tried.
+      Now for your next, look up hiiiigh
+      where muscles pull and ceiling tiles lie.
+    </span>
   </div>
-</header>
+</header>