diff --git a/website/src/app/app.component.ts b/website/src/app/app.component.ts index 6c54f9f..a85aeaa 100644 --- a/website/src/app/app.component.ts +++ b/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); } } } diff --git a/website/src/app/features/template-details/import-dialog/import-dialog.component.ts b/website/src/app/features/template-details/import-dialog/import-dialog.component.ts index 09e4cc6..6583fbe 100644 --- a/website/src/app/features/template-details/import-dialog/import-dialog.component.ts +++ b/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?:\/\/).*/)] + ), }); } diff --git a/website/src/app/features/template-gallery/template-gallery.component.ts b/website/src/app/features/template-gallery/template-gallery.component.ts index d734ff6..38567e2 100644 --- a/website/src/app/features/template-gallery/template-gallery.component.ts +++ b/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 { ) ); } + } diff --git a/website/src/app/shared/header/header.component.html b/website/src/app/shared/header/header.component.html index fd87707..a292964 100644 --- a/website/src/app/shared/header/header.component.html +++ b/website/src/app/shared/header/header.component.html @@ -6,11 +6,23 @@
- 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! -
++ 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! +
+