Merge branch 'integration/new-container-runtime' of github.com:Start9Labs/start-os into rebase/feat/domains

web/projects/marketplace/src/pages/list/item/item.component.html

@@ -2,7 +2,7 @@
   <!-- color background -->
   <div class="background">
     <img
-      [src]="pkg | mimeType | trustUrl"
+      [src]="pkg.icon| trustUrl"
       alt="{{ pkg.manifest.title }} Icon"
     />
   </div>
@@ -10,7 +10,7 @@
   <div class="overlay"></div>
   <!-- icon -->
   <img
-    [src]="pkg | mimeType | trustUrl"
+    [src]="pkg.icon | trustUrl"
     class="icon box-shadow-lg"
     alt="{{ pkg.manifest.title }} Icon"
   />

web/projects/marketplace/src/pages/list/item/item.module.ts

@@ -3,11 +3,10 @@ import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { SharedPipesModule } from '@start9labs/shared'
 import { ItemComponent } from './item.component'
-import { MimeTypePipeModule } from '../../../pipes/mime-type.pipe'
 
 @NgModule({
   declarations: [ItemComponent],
   exports: [ItemComponent],
-  imports: [CommonModule, RouterModule, SharedPipesModule, MimeTypePipeModule],
+  imports: [CommonModule, RouterModule, SharedPipesModule],
 })
 export class ItemModule {}

web/projects/marketplace/src/pages/show/dependencies/dependencies.component.html

@@ -1,22 +1,19 @@
 <div class="outer-container">
   <div class="inner-container">
-    <tui-avatar class="dep-img" [src]="getImage(dep.key)"></tui-avatar>
+    <tui-avatar class="dep-img" [src]="pkg['dependency-metadata'][dep.key].icon"></tui-avatar>
     <div class="wrapper-margin">
       <div class="inner-container-title">
         <span>
-          {{ getTitle(dep.key) }}
+          {{ pkg['dependency-metadata'][dep.key].title || dep.key }}
         </span>
         <p>
-          <ng-container [ngSwitch]="dep.value.requirement.type">
-            <span *ngSwitchCase="'required'">(required)</span>
-            <span *ngSwitchCase="'opt-out'">(required by default)</span>
-            <span *ngSwitchCase="'opt-in'">(optional)</span>
-          </ng-container>
+          @if (dep.value.optional) {
+            <span>(optional)</span>
+          } @else {
+            <span>(required)</span>
+          }
         </p>
       </div>
-      <span class="inner-container-version">
-        {{ dep.value.version | displayEmver }}
-      </span>
       <span class="inner-container-description">
         {{ dep.value.description }}
       </span>

web/projects/marketplace/src/pages/show/dependencies/dependencies.component.scss

@@ -36,16 +36,6 @@
     }
   }
 
-  &-version {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    color: rgb(250 250 250 / 0.7);
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
-
   &-description {
     font-size: 0.875rem;
     line-height: 1.25rem;

web/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts

@@ -14,14 +14,4 @@ export class DependenciesComponent {
 
   @Input({ required: true })
   dep!: KeyValue<string, Dependency>
-
-  getImage(key: string): string {
-    const icon = this.pkg['dependency-metadata'][key]?.icon
-    // @TODO fix when registry api is updated to include mimetype in icon url
-    return icon ? `data:image/png;base64,${icon}` : key.substring(0, 2)
-  }
-
-  getTitle(key: string): string {
-    return this.pkg['dependency-metadata'][key]?.title || key
-  }
 }

web/projects/marketplace/src/pipes/mime-type.pipe.ts

@@ -1,34 +0,0 @@
-import { NgModule, Pipe, PipeTransform } from '@angular/core'
-import { MarketplacePkg } from '../types'
-
-@Pipe({
-  name: 'mimeType',
-})
-export class MimeTypePipe implements PipeTransform {
-  transform(pkg: MarketplacePkg): string {
-    if (pkg.icon.startsWith('data:')) return pkg.icon
-
-    if (pkg.manifest.assets.icon) {
-      switch (pkg.manifest.assets.icon.split('.').pop()) {
-        case 'png':
-          return `data:image/png;base64,${pkg.icon}`
-        case 'jpeg':
-        case 'jpg':
-          return `data:image/jpeg;base64,${pkg.icon}`
-        case 'gif':
-          return `data:image/gif;base64,${pkg.icon}`
-        case 'svg':
-          return `data:image/svg+xml;base64,${pkg.icon}`
-        default:
-          return `data:image/png;base64,${pkg.icon}`
-      }
-    }
-    return `data:image/png;base64,${pkg.icon}`
-  }
-}
-
-@NgModule({
-  declarations: [MimeTypePipe],
-  exports: [MimeTypePipe],
-})
-export class MimeTypePipeModule {}

web/projects/marketplace/src/public-api.ts

@@ -20,7 +20,6 @@ export * from './pages/show/screenshots/screenshots.component'
 export * from './pages/show/hero/hero.component'
 
 export * from './pipes/filter-packages.pipe'
-export * from './pipes/mime-type.pipe'
 
 export * from './components/store-icon/store-icon.component'
 export * from './components/store-icon/store-icon.component.module'

web/projects/marketplace/src/types.ts

@@ -38,6 +38,7 @@ export interface MarketplacePkg {
 export interface DependencyMetadata {
   title: string
   icon: Url
+  optional: boolean
   hidden: boolean
 }
 
@@ -50,9 +51,6 @@ export interface Manifest {
     short: string
     long: string
   }
-  assets: {
-    icon: Url // filename
-  }
   replaces?: string[]
   'release-notes': string
   license: string // name of license
@@ -70,21 +68,10 @@ export interface Manifest {
   }
   dependencies: Record<string, Dependency>
   'os-version': string
+  'has-config': boolean
 }
 
 export interface Dependency {
-  version: string
-  requirement:
-    | {
-        type: 'opt-in'
-        how: string
-      }
-    | {
-        type: 'opt-out'
-        how: string
-      }
-    | {
-        type: 'required'
-      }
   description: string | null
+  optional: boolean
 }