591 inconsistent campaign title and meta tags display (#594)

* add meta seo ready for test * add the img cover --------- Co-authored-by: skanderKhabou <[email protected]>
SaTT-Wallet · Oct 4, 2023 · f4a27ba · f4a27ba
1 parent 6136fed
commit f4a27ba
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 12 deletions.
diff --git a/src/app/campaigns/campaign-details/components/campaign-detail/campaign-detail.component.html b/src/app/campaigns/campaign-details/components/campaign-detail/campaign-detail.component.html
@@ -1,9 +1,11 @@
 <head>
-  <meta property="og:title" content="{{ 'SaTT TO THE MOON' }}" />
-  <meta property="og:description" content="{{ 'SaTT TO THE MOON' }}" />
+  <meta property="og:title" content="{{ campaign.title }}" />
+  <meta property="og:description" content="{{ campaign.description | strip}}" />
+
+  <!-- <meta property="og:description" content="{{ 'SaTT TO THE MOON' }}" /> -->
   <meta
     property="og:image"
-    content="{{ 'https://satt-token.com/assets/img/share_img_200px.png' }}"
+    content="{{ campaign.logo }}"
   />
 </head>
 <div *ngIf="!isLoading">

diff --git a/src/app/campaigns/campaign-details/components/campaign-detail/campaign-detail.component.ts b/src/app/campaigns/campaign-details/components/campaign-detail/campaign-detail.component.ts
@@ -214,9 +214,21 @@ export class CampaignDetailComponent implements OnInit {
     // this._location.back();
     this.router.navigate(['home/ad-pools']);
   }
+
+  async setMetaTags(){
+    try {
+    await this.getCampaign();
+    console.log(this.campaign , "campaign data");
+  } catch (error) {
+    console.error('Error setting meta tags', error);
+    }
+    }
+
   ngOnInit(): void {
+
+
     this.getScreenWidth = window.innerWidth;
-
+    
     this.refundButtonDisable = true;
     this.loadingData = true;
     this.CampaignService.isLoading.subscribe((res) => {
@@ -239,15 +251,15 @@ export class CampaignDetailComponent implements OnInit {
     // main.style.marginTop = '28%';
 
     // // cover.style.position = 'fixed';
-
+    
     this.campaignsStoreService.emitLogoCampaignUpdated
       .pipe(takeUntil(this.isDestroyed))
       .subscribe(() => {
         this.campaign = this.campaignsStoreService.campaign;
       });
-    this.spinner.show();
-    this.showInfoSpinner = true;
-
+      this.spinner.show();
+      this.showInfoSpinner = true;
+      
     this.totalG = {
       view: 0,
       view_satt: 0,
@@ -264,6 +276,7 @@ export class CampaignDetailComponent implements OnInit {
     this.campaignsFacade.loadKits(this.campaignId);
     this.getCryptoData();
     this.getCampaign();
+    this.setMetaTags();
     this.gettingAllproms();
     if (isPlatformBrowser(this.platformId)) {
       this.getKits();

diff --git a/...n-details/components/campaign-details-container/campaign-details-container.component.html b/...n-details/components/campaign-details-container/campaign-details-container.component.html
@@ -1,4 +1,3 @@
-
 <!-- <head>
   <meta property="og:title" content="{{ 'campaign?.title' }}" />
   <meta property="og:description" content="{{ 'campaign?.summary' }}" />
@@ -10,14 +9,13 @@
   <meta property="og:image:height" content="630" />
 </head> -->
 
-
 <ng-container *ngIf="campaign?.id === campaignId; else loading">
   <div class="content" style="min-height: 50vh">
     <router-outlet></router-outlet>
   </div>
 </ng-container>
 <ng-template #loading>
-<app-loading-logo> </app-loading-logo>
+  <app-loading-logo> </app-loading-logo>
 </ng-template>
 <!-- <div
   *ngIf="this.showmoonboy"

diff --git a/src/app/shared/pipes/strip.pipe.spec.ts b/src/app/shared/pipes/strip.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { StripPipe } from './strip.pipe';
+
+describe('StripPipe', () => {
+  it('create an instance', () => {
+    const pipe = new StripPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/pipes/strip.pipe.ts b/src/app/shared/pipes/strip.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'strip'
+})
+export class StripPipe implements PipeTransform {
+ transform(value: string): string {
+ const doc = new DOMParser().parseFromString(value, 'text/html');
+ return doc.body.textContent || '';
+ }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -72,6 +72,7 @@ import { QRCodeComponent } from './components/qr-code/qr-code.component';
 import { RoiModalComponent } from '@app/src/app/campaigns/components/roi-modal/roi-modal.component';
 import { InputRoiModalComponent } from '../src/app/campaigns/components/input-roi-modal/input-roi-modal.component';
 import { TimePipe } from './pipes/time.pipe';
+import { StripPipe } from './pipes/strip.pipe';
 
 @NgModule({
   declarations: [
@@ -109,13 +110,15 @@ import { TimePipe } from './pipes/time.pipe';
     BuyGasComponent,
     QRCodeComponent,
     InputRoiModalComponent,
-    TimePipe
+    TimePipe,
+    StripPipe
   ],
   exports: [
     //directives and components
     FilterBynamePipe,
     RoiModalComponent,
     TimePipe,
+    StripPipe,
     HeaderRegisterComponent,
     FooterComponent,
     LoadingLogoComponent,