fixes and backwards compatability with new registry types

web/projects/marketplace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@start9labs/marketplace",
-  "version": "0.3.25",
+  "version": "0.3.26",
   "peerDependencies": {
     "@angular/common": ">=13.2.0",
     "@angular/core": ">=13.2.0",

web/projects/marketplace/src/components/menu/menu.component.scss

@@ -33,6 +33,7 @@ header {
       1;
     border-width: 0;
     border-right: 0.125rem solid;
+    overflow: visible;
   }
 
   @media screen and (min-width: 1536px) {

web/projects/marketplace/src/components/menu/menu.component.ts

@@ -66,6 +66,7 @@ export class MenuComponent implements OnDestroy {
     this.query = ''
     this.categoryService.resetQuery()
     this.categoryService.changeCategory(category)
+    this.categoryService.handleNavigation()
   }
 
   onQueryChange(query: string): void {

web/projects/marketplace/src/pages/list/categories/categories.component.scss

@@ -32,7 +32,7 @@ button {
   }
 
   @media (min-width: 640px) {
-    width: 120%;
+    width: 108%;
     padding: 0.5rem;
     margin-bottom: 0.75rem;
 

web/projects/marketplace/src/pages/list/categories/categories.component.ts

@@ -32,7 +32,7 @@ export class CategoriesComponent {
       case 'all':
         return 'tuiIconGridLarge'
       case 'bitcoin':
-        return 'tuiIconBitcoin'
+        return 'assets/img/icons/logo-bitcoin.svg'
       case 'messaging':
       case 'communications':
         return 'tuiIconMessageCircleLarge'

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

@@ -1,14 +1,20 @@
-<div class="item-container box-shadow-lg">
+<div
+  class="item-container box-shadow-lg"
+  *tuiLet="marketplace$ | async as marketplace"
+>
   <!-- color background -->
   <div class="background">
-    <img [src]="pkg.icon" alt="{{ pkg.manifest.title }} Icon" />
+    <img
+      [src]="determineIcon(marketplace)"
+      alt="{{ pkg.manifest.title }} Icon"
+    />
   </div>
   <!-- darkening overlay -->
   <div class="overlay"></div>
   <!-- icon -->
   <img
-    [src]="pkg.icon"
-    class="icon box-shadow-lg"
+    [src]="determineIcon(marketplace)"
+    class="icon"
     alt="{{ pkg.manifest.title }} Icon"
   />
   <div class="detail">

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

@@ -1,10 +1,7 @@
 .item-container {
-  height: 100%;
   position: relative;
-  min-width: 300px;
   border-radius: 1.5rem;
   padding: 5rem 2rem 2rem 2.5rem;
-  gap: 1rem;
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 500ms;
@@ -56,21 +53,20 @@
   top: -2.5rem;
   border-radius: 9999px;
   object-fit: cover;
-  backdrop-filter: blur(24px);
-  background-color: rgb(0 0 0 / 0.5);
   transform: none;
 }
 
 .detail {
   margin-top: 0.75rem;
   mix-blend-mode: plus-lighter;
-
+  
   &-title {
     display: inline-block;
     font-size: 1.5rem;
     line-height: 2rem;
     margin-bottom: 0.25rem;
     font-weight: 400;
+    will-change: transform, text-indent;
   }
 
   &-description {

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

@@ -1,5 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { MarketplacePkg } from '../../../types'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core'
+import { MarketplacePkg, StoreIdentity } from '../../../types'
+import { AbstractMarketplaceService } from '../../../services/marketplace.service'
 
 @Component({
   selector: 'marketplace-item',
@@ -10,4 +16,16 @@ import { MarketplacePkg } from '../../../types'
 export class ItemComponent {
   @Input({ required: true })
   pkg!: MarketplacePkg
+
+  private readonly marketplaceService = inject(AbstractMarketplaceService)
+  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
+
+  determineIcon(marketplace: StoreIdentity | null): string {
+    try {
+      const iconUrl = new URL(this.pkg.icon)
+      return iconUrl.href
+    } catch (e) {
+      return `${marketplace?.url}package/v0/icon/${this.pkg.manifest.id}`
+    }
+  }
 }

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

@@ -3,10 +3,17 @@ import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
 import { ItemComponent } from './item.component'
+import { TuiLetModule } from '@taiga-ui/cdk'
 
 @NgModule({
   declarations: [ItemComponent],
   exports: [ItemComponent],
-  imports: [CommonModule, RouterModule, SharedPipesModule, TickerModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    SharedPipesModule,
+    TickerModule,
+    TuiLetModule,
+  ],
 })
 export class ItemModule {}

web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts

@@ -1,19 +1,26 @@
 import { CommonModule, KeyValue } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core'
 import { EmverPipesModule } from '@start9labs/shared'
-import { Dependency, MarketplacePkg } from '../../../types'
+import { Dependency, MarketplacePkg, StoreIdentity } from '../../../types'
 import { RouterModule } from '@angular/router'
 import { TuiAvatarModule, TuiLineClampModule } from '@taiga-ui/kit'
+import { TuiLetModule } from '@taiga-ui/cdk'
+import { AbstractMarketplaceService } from '../../../services/marketplace.service'
 
 @Component({
   selector: 'marketplace-dep-item',
   template: `
-    <div class="outer-container">
+    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
       <tui-avatar
         class="dep-img"
         [rounded]="true"
         [size]="'l'"
-        [avatarUrl]="getImage(dep.key)"
+        [avatarUrl]="getImage(dep.key, marketplace)"
       ></tui-avatar>
       <div>
         <tui-line-clamp
@@ -103,6 +110,7 @@ import { TuiAvatarModule, TuiLineClampModule } from '@taiga-ui/kit'
     TuiAvatarModule,
     EmverPipesModule,
     TuiLineClampModule,
+    TuiLetModule,
   ],
 })
 export class MarketplaceDepItemComponent {
@@ -112,11 +120,22 @@ export class MarketplaceDepItemComponent {
   @Input({ required: true })
   dep!: KeyValue<string, Dependency>
 
-  getImage(key: string): string {
+  private readonly marketplaceService = inject(AbstractMarketplaceService)
+  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
+
+  getImage(key: string, marketplace: StoreIdentity | null) {
     const icon = this.pkg.dependencyMetadata[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)
-    return icon ? icon : key.substring(0, 2)
+
+    if (icon) {
+      try {
+        const iconUrl = new URL(icon)
+        return iconUrl.href
+      } catch (e) {
+        return `${marketplace?.url}package/v0/icon/${key}`
+      }
+    } else {
+      return key.substring(0, 2)
+    }
   }
 
   getTitle(key: string): string {

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

@@ -1,23 +1,30 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
-import { MarketplacePkg } from '../../../types'
+import { MarketplacePkg, StoreIdentity } from '../../../types'
+import { TuiLetModule } from '@taiga-ui/cdk'
+import { AbstractMarketplaceService } from '../../../services/marketplace.service'
 
 @Component({
   selector: 'marketplace-package-hero',
   template: `
-    <div class="outer-container">
+    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
       <div class="inner-container box-shadow-lg">
         <!-- icon -->
         <img
-          [src]="pkg.icon | trustUrl"
+          [src]="determineIcon(marketplace) | trustUrl"
           class="box-shadow-lg"
           alt="{{ pkg.manifest.title }} Icon"
         />
         <!-- color background -->
         <div class="color-background">
           <img
-            [src]="pkg.icon | trustUrl"
+            [src]="determineIcon(marketplace) | trustUrl"
             alt="{{ pkg.manifest.title }} background image"
           />
         </div>
@@ -61,11 +68,11 @@ import { MarketplacePkg } from '../../../types'
         padding: 4rem 2rem 0 2rem;
 
         @media (min-width: 376px) {
-          min-height: 26vh;
+          min-height: 20vh;
         }
 
         @media (min-width: 768px) {
-          min-height: 14rem;
+          min-height: 11rem;
         }
 
         img {
@@ -157,9 +164,21 @@ import { MarketplacePkg } from '../../../types'
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, SharedPipesModule, TickerModule],
+  imports: [CommonModule, SharedPipesModule, TickerModule, TuiLetModule],
 })
 export class MarketplacePackageHeroComponent {
   @Input({ required: true })
   pkg!: MarketplacePkg
+
+  private readonly marketplaceService = inject(AbstractMarketplaceService)
+  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
+
+  determineIcon(marketplace: StoreIdentity | null) {
+    try {
+      const iconUrl = new URL(this.pkg.icon)
+      return iconUrl.href
+    } catch (e) {
+      return `${marketplace?.url}package/v0/icon/${this.pkg.manifest.id}`
+    }
+  }
 }

web/projects/marketplace/src/services/category.service.ts

@@ -13,4 +13,6 @@ export abstract class AbstractCategoryService {
   abstract getQuery$(): Observable<string>
 
   abstract resetQuery(): void
+
+  abstract handleNavigation(): void
 }

web/projects/shared/assets/img/icons/logo-bitcoin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M410.47 279.2c-5-11.5-12.7-21.6-28.1-30.1a98.15 98.15 0 00-25.4-10 62.22 62.22 0 0016.3-11 56.37 56.37 0 0015.6-23.3 77.11 77.11 0 003.5-28.2c-1.1-16.8-4.4-33.1-13.2-44.8s-21.2-20.7-37.6-27c-12.6-4.8-25.5-7.8-45.5-8.9V32h-40v64h-32V32h-41v64H96v48h27.87c8.7 0 14.6.8 17.6 2.3a13.22 13.22 0 016.5 6c1.3 2.5 1.9 8.4 1.9 17.5V343c0 9-.6 14.8-1.9 17.4s-2 4.9-5.1 6.3-3.2 1.3-11.8 1.3h-26.4L96 416h87v64h41v-64h32v64h40v-64.4c26-1.3 44.5-4.7 59.4-10.3 19.3-7.2 34.1-17.7 44.7-31.5s14-34.9 14.93-51.2c.67-14.5-.03-33.2-4.56-43.4zM224 150h32v74h-32zm0 212v-90h32v90zm72-208.1c6 2.5 9.9 7.5 13.8 12.7 4.3 5.7 6.5 13.3 6.5 21.4 0 7.8-2.9 14.5-7.5 20.5-3.8 4.9-6.8 8.3-12.8 11.1zm28.8 186.7c-7.8 6.9-12.3 10.1-22.1 13.8a56.06 56.06 0 01-6.7 1.9v-82.8a40.74 40.74 0 0111.3 3.4c7.8 3.3 15.2 6.9 19.8 13.2a43.82 43.82 0 018 24.7c-.03 10.9-2.83 19.2-10.33 25.8z"/></svg>

web/projects/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@start9labs/shared",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "peerDependencies": {
     "@angular/common": "^17.0.6",
     "@angular/core": "^17.0.6",

web/projects/ui/src/app/routes/portal/routes/system/marketplace/marketplace.component.ts

@@ -101,8 +101,7 @@ import { TuiScrollbarModule } from '@taiga-ui/core'
         &-list {
           display: grid;
           grid-template-columns: repeat(1, minmax(0, 1fr));
-          gap: 4rem;
-          list-style-type: none;
+          gap: 4rem 3rem;
           padding: 1.5rem;
 
           @media (min-width: 768px) {
@@ -111,9 +110,12 @@ import { TuiScrollbarModule } from '@taiga-ui/core'
           @media (min-width: 1024px) {
             grid-template-columns: repeat(2, minmax(0, 1fr));
           }
-          @media (min-width: 1536px) {
+          @media (min-width: 1280px) {
             grid-template-columns: repeat(3, minmax(0, 1fr));
           }
+          @media (min-width: 1536px) {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+          }
 
           .tile-wrapper {
             display: block;

web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/preview.component.ts

@@ -152,6 +152,10 @@ import { Router } from '@angular/router'
         height: 100%;
         place-self: center;
       }
+
+      marketplace-additional {
+        padding-bottom: 2rem;
+      }
     `,
   ],
   standalone: true,

web/projects/ui/src/app/services/category.service.ts

@@ -1,9 +1,12 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { Observable } from 'rxjs'
 import { AbstractCategoryService } from '@start9labs/marketplace'
+import { Router } from '@angular/router'
 
 @Injectable()
 export class CategoryService extends AbstractCategoryService {
+  private readonly router = inject(Router)
+
   getCategory$(): Observable<string> {
     return this.category$
   }
@@ -23,4 +26,8 @@ export class CategoryService extends AbstractCategoryService {
   resetQuery() {
     this.query$.next('')
   }
+
+  handleNavigation() {
+    this.router.navigate([])
+  }
 }

web/tslint.json

@@ -1,6 +1,5 @@
 {
   "rules": {
-    "no-unused-variable": true,
     "no-unused-expression": true,
     "semicolon": [true, "never"],
     "no-trailing-whitespace": true,