Merge branch 'develop' of https://github.com/SaTT-Wallet/Frontend int…

…o tokenpreview
SaTT-Wallet · Sep 29, 2023 · 78a8a14 · 78a8a14
2 parents 63fd261 + 4c8fbba
commit 78a8a14
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 36 deletions.
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,18 +1,14 @@
 
-
-  <head>
+<!-- <head>
   <meta property="og:title" content="{{ 'campaign?.title' }}" />
   <meta property="og:description" content="{{ 'campaign?.summary' }}" />
   <meta property="og:image" content="{{ 'ogImageUrl' }}" />
-
-  <!-- <meta property="og:title" [attr.content]="campaign?.title" />
+ <meta property="og:title" [attr.content]="campaign?.title" />
   <meta property="og:description" [attr.content]="limitDescription(campaign?.summary)" />
-  <meta property="og:image" [attr.content]="ogImageUrl" /> -->
+  <meta property="og:image" [attr.content]="ogImageUrl" /> 
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
-
-</head>
-
+</head> -->
 
 
 <ng-container *ngIf="campaign?.id === campaignId; else loading">
@@ -21,8 +17,7 @@
   </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/...ign-details/components/campaign-details-container/campaign-details-container.component.ts b/...ign-details/components/campaign-details-container/campaign-details-container.component.ts
@@ -55,6 +55,12 @@ export class CampaignDetailsContainerComponent implements OnInit {
       )
       .subscribe();
     this.campaign$ = this.campaignsStoreService.campaign$;
+    // this.meta.updateTag({ property: 'og:title', content: this.campaign.title });
+    // this.meta.updateTag({
+    //   property: 'og:description',
+    //   content: this.campaign.description
+    // });
+    // this.meta.updateTag({ property: 'og:image', content: this.ogImageUrl });
     /*if (isPlatformServer(this.platformId)) {
       this.meta.addTag({
         name: 'og:image:secure_url',
@@ -146,12 +152,7 @@ export class CampaignDetailsContainerComponent implements OnInit {
       setTimeout(() => {
         this.showmoonboy = campaign.id === this.campaignId;
       }, 1000);
-      this.meta.updateTag({ property: 'og:title', content: campaign.title });
-      this.meta.updateTag({
-        property: 'og:description',
-        content: campaign.description
-      });
-      this.meta.updateTag({ property: 'og:image', content: this.ogImageUrl });
+
       /*this.ogImageUrl = campaign.coverSrcMobile.includes('ipfs') ? ipfsURL + campaign.coverSrcMobile.substring(27, campaign.coverSrcMobile.length) : campaign.coverSrcMobile;
       this.meta.updateTag({ property: 'og:title', content: campaign.title });
       this.meta.updateTag({ property: 'og:description', content: campaign.description });
@@ -288,30 +289,65 @@ export class CampaignDetailsContainerComponent implements OnInit {
         },
         `name='twitter'`
       );*/
+      this.updateMetaTags(campaign);
     });
   }
+  updateMetaTags(campaign: Campaign) {
+    if (campaign) {
+      this.ogImageUrl = campaign.coverSrcMobile.includes('ipfs')
+        ? ipfsURL + campaign.coverSrcMobile.substring(27, campaign.coverSrcMobile.length)
+        : campaign.coverSrcMobile;
+
+      this.meta.updateTag({ property: 'og:title', content: campaign.title });
+      this.meta.updateTag({ property: 'og:description', content: campaign.description });
+      this.meta.updateTag({ property: 'og:image', content: this.ogImageUrl });
+
+      this.meta.updateTag({ property: 'og:image:width', content: '1200' });
+      this.meta.updateTag({ property: 'og:image:height', content: '630' });
+
+      this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
+      this.meta.updateTag({ name: 'twitter:image', content: this.ogImageUrl });
+    }
+  }
 
   imageImported(image: any) {
     this.campaignsStoreService.updateOneById({ cover: image });
   }
   limitDescription(description: string | undefined, maxLength: number = 200): string {
     return description ? description.slice(0, maxLength) : '';
   }
+
+
+  updateMetaTags(campaign: Campaign) {
+    if (campaign) {
+      this.ogImageUrl = campaign.coverSrcMobile.includes('ipfs')
+        ? ipfsURL + campaign.coverSrcMobile.substring(27, campaign.coverSrcMobile.length)
+        : campaign.coverSrcMobile;
+
+      this.meta.updateTag({ property: 'og:title', content: campaign.title });
+      this.meta.updateTag({ property: 'og:description', content: campaign.description });
+      this.meta.updateTag({ property: 'og:image', content: this.ogImageUrl });
+
+
+      this.meta.updateTag({ property: 'og:image:width', content: '1200' });
+      this.meta.updateTag({ property: 'og:image:height', content: '630' });
+
+      this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
+      this.meta.updateTag({ name: 'twitter:image', content: this.ogImageUrl });
+    }
+  }
+
   ngOnDestroy(): void {
+    // Remove or update any additional meta tags when the component is destroyed
+    this.meta.updateTag({ name: 'og:title', content: '' });
+    this.meta.updateTag({ name: 'og:image', content: '' });
+    this.meta.updateTag({ name: 'og:description', content: '' });
+    this.meta.updateTag({ name: 'og:type', content: '' });
+    this.meta.updateTag({ name: 'twitter:card', content: '' });
+
     this.isDestroyed.next('');
     this.isDestroyed.unsubscribe();
     this.campaignsStoreService.clearDataStore();
-    // location.reload();
-    this.meta.updateTag({ name: 'og:title', content: '' }, `name='og:title'`);
-    this.meta.updateTag({ name: 'og:image', content: '' }, `name='og:image'`);
-    this.meta.updateTag(
-      { name: 'og:description', content: '' },
-      `name='og:description'`
-    );
-    this.meta.updateTag({ name: 'og:type', content: '' }, `name='og:type'`);
-    this.meta.updateTag(
-      { name: 'twitter:card', content: '' },
-      `name='twitter:card'`
-    );
   }
+
 }
diff --git a/src/index.html b/src/index.html
@@ -25,10 +25,8 @@
     <!-- iOS Safari -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="#1f2337" />
-    <meta name="twitter:card" content="summary">
 
-
-   <title>SaTT - Smart advertising Transaction Token</title>
+    <!-- <meta name="twitter:card" content="summary"> -->
 
     <!-- <title>SaTT - Smart advertising Transaction Token</title> -->
 
@@ -46,12 +44,13 @@
     <meta property="og:image" content="https://satt-token.com/assets/img/share_img_200px.png" />
     <meta property="og:title" content="SaTT - Smart advertising Transaction Token" />
     -->
-
-    <meta name="keyword" content="crypto, blockchain, social media, farming,  earning crypto, profitable,  marketing, influencers, brand, SaTT,  token, Trust, wallet">
+
+
+    <meta
+    name="keyword"
+     content="crypto, blockchain, social media, farming,  earning crypto, profitable,  marketing, influencers, brand, SaTT,  token, Trust, wallet"
+    />
 
-  </meta>
-
-
     <!--<meta
       name="facebook-domain-verification"
       content="ag3bpno6r3diau1vlmnxrmf0i6g4vd"