Feat/marketplace show links (#2105)

* closes #2084, rearranges marketplace show, app show, and donation link for Start9

* use url query param if present when fetching license and instructions

* remove log

* chore: Add some checking

* chore: Update something about validation

* chore: Update to use correct default

Co-authored-by: BluJ <mogulslayer@gmail.com>

frontend/projects/marketplace/src/pages/show/about/about.component.html

@@ -21,6 +21,6 @@
 <ion-item-divider>Description</ion-item-divider>
 <ion-item lines="none" color="transparent">
   <ion-label>
-    {{ pkg.manifest.description.long }}
+    <h2>{{ pkg.manifest.description.long }}</h2>
   </ion-label>
 </ion-item>

frontend/projects/marketplace/src/pages/show/additional/additional.component.html

@@ -1,3 +1,24 @@
+<div
+  *ngIf="pkg.manifest['marketing-site'] as url"
+  style="padding: 4px 0 10px 14px"
+>
+  <ion-button [href]="url" target="_blank" rel="noreferrer" color="tertiary">
+    View marketing website
+    <ion-icon slot="end" name="open-outline"></ion-icon>
+  </ion-button>
+</div>
+
+<ng-container *ngIf="pkg.manifest.replaces as replaces">
+  <div *ngIf="replaces.length" class="ion-padding-bottom">
+    <ion-item-divider>Intended to replace</ion-item-divider>
+    <ul>
+      <li *ngFor="let app of replaces">
+        {{ app }}
+      </li>
+    </ul>
+  </div>
+</ng-container>
+
 <ion-item-divider>Additional Info</ion-item-divider>
 <ion-grid *ngIf="pkg.manifest as manifest">
   <ion-row>
@@ -89,19 +110,6 @@
           </ion-label>
           <ion-icon slot="end" name="open-outline"></ion-icon>
         </ion-item>
-        <ion-item
-          [href]="manifest['marketing-site']"
-          [disabled]="!manifest['marketing-site']"
-          target="_blank"
-          rel="noreferrer"
-          detail="false"
-        >
-          <ion-label>
-            <h2>Marketing Site</h2>
-            <p>{{ manifest['marketing-site'] || 'Not provided' }}</p>
-          </ion-label>
-          <ion-icon slot="end" name="open-outline"></ion-icon>
-        </ion-item>
       </ion-item-group>
     </ion-col>
   </ion-row>

frontend/projects/marketplace/src/pages/show/additional/additional.component.ts

@@ -18,6 +18,7 @@ import {
 } from '@start9labs/shared'
 import { MarketplacePkg } from '../../../types'
 import { AbstractMarketplaceService } from '../../../services/marketplace.service'
+import { ActivatedRoute } from '@angular/router'
 
 @Component({
   selector: 'marketplace-additional',
@@ -31,12 +32,15 @@ export class AdditionalComponent {
   @Output()
   version = new EventEmitter<string>()
 
+  readonly url = this.route.snapshot.queryParamMap.get('url') || undefined
+
   constructor(
     private readonly alertCtrl: AlertController,
     private readonly modalCtrl: ModalController,
     private readonly emver: Emver,
     private readonly marketplaceService: AbstractMarketplaceService,
     private readonly toastCtrl: ToastController,
+    private readonly route: ActivatedRoute,
   ) {}
 
   async copy(address: string): Promise<void> {
@@ -84,6 +88,7 @@ export class AdditionalComponent {
     const content = this.marketplaceService.fetchStatic$(
       this.pkg.manifest.id,
       title,
+      this.url,
     )
 
     const modal = await this.modalCtrl.create({

frontend/projects/marketplace/src/types.ts

@@ -47,6 +47,7 @@ export interface MarketplaceManifest<T = unknown> {
     short: string
     long: string
   }
+  replaces?: string[]
   'release-notes': string
   license: string // type of license
   'wrapper-repo': Url