Add marketplace thumbnail

Author: Shellishack

.changeset/pre.json

@@ -38,6 +38,7 @@
     "real-knives-rest",
     "rude-ducks-design",
     "sad-tables-join",
+    "sharp-memes-give",
     "shiny-doodles-jump",
     "slick-roses-fix",
     "social-donkeys-cross",

.changeset/sharp-memes-give.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Update types

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-alpha.32
+
+### Patch Changes
+
+- Update types
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-alpha.32
+
 ## 0.1.1-alpha.31
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-alpha.31",
+  "version": "0.1.1-alpha.32",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -38,7 +38,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-alpha.31",
+    "@pulse-editor/shared-utils": "0.1.1-alpha.32",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-alpha.32
+
+### Patch Changes
+
+- Update types
+
 ## 0.1.1-alpha.31
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-alpha.31",
+    "version": "0.1.1-alpha.32",
     "main": "dist/main.js",
     "files": [
         "dist"

npm-packages/shared-utils/src/types/types.ts

@@ -122,7 +122,7 @@ export type ExtensionConfig = {
   materialIcon?: string;
   extensionType?: ExtensionTypeEnum;
   fileTypes?: string[];
-  preview?: string;
+  thumbnail?: string;
   enabledPlatforms?: Record<string, boolean>;
 
   // Extension or user installed agents

web/components/extension/preview.tsx

@@ -14,6 +14,7 @@ import { useContext, useEffect, useState } from "react";
 import ContextMenu from "../interface/context-menu";
 import { EditorContext } from "../providers/editor-context-provider";
 import { getPlatform } from "@/lib/platform-api/platform-checker";
+import { getRemoteClientBaseURL } from "@/lib/module-federation/remote";
 
 export default function ExtensionPreview({
   extension,
@@ -52,6 +53,8 @@ export default function ExtensionPreview({
     );
     setIsInstalled(foundExt !== undefined);
     setIsEnabled(foundExt?.isEnabled ?? false);
+
+    console.log("Extension preview loaded", extension);
   }, [extension]);
 
   function toggleExtension() {
@@ -116,7 +119,25 @@ export default function ExtensionPreview({
               isOpen: true,
             }));
           }}
-        ></Button>
+        >
+          {extension.config.thumbnail ? (
+            <img
+              src={
+                getRemoteClientBaseURL(
+                  extension.remoteOrigin,
+                  extension.config.id,
+                  extension.config.version,
+                ) +
+                "/" +
+                extension.config.thumbnail
+              }
+              alt={extension.config.displayName}
+              className="h-full w-full rounded-md object-cover"
+            />
+          ) : (
+            <Skeleton className="h-full w-full" isLoaded={false}></Skeleton>
+          )}
+        </Button>
         {isShowInfo && (
           <div className="absolute bottom-0.5 left-1/2 flex w-full -translate-x-1/2 justify-center gap-x-0.5">
             <Button color="secondary" size="sm">

web/components/modals/extension-marketplace-modal.tsx

@@ -50,15 +50,16 @@ export default function ExtensionMarketplaceModal({
         .then((res) => res.json())
         .then((body) => {
           const fetchedExts: ExtensionMeta[] = body;
-          const extensions: Extension[] = fetchedExts.map((ext) => {
+          const extensions: Extension[] = fetchedExts.map((extMeta) => {
             return {
               config: {
-                id: ext.name,
-                version: ext.version,
-                author: ext.user ? ext.user.name : ext.org.name,
-                description: ext.description ?? "No description available",
-                displayName: ext.displayName ?? ext.name,
-                visibility: ext.visibility,
+                id: extMeta.name,
+                version: extMeta.version,
+                author: extMeta.user ? extMeta.user.name : extMeta.org.name,
+                description: extMeta.description ?? "No description available",
+                displayName: extMeta.displayName ?? extMeta.name,
+                visibility: extMeta.visibility,
+                thumbnail: extMeta.thumbnail,
               },
               isEnabled: true,
               remoteOrigin: `${process.env.NEXT_PUBLIC_CDN_URL}/${process.env.NEXT_PUBLIC_STORAGE_CONTAINER}`,

web/lib/module-federation/remote.ts

@@ -12,3 +12,19 @@ export function getRemote(remoteOrigin: string, id: string, version: string) {
     },
   ];
 }
+
+export function getRemoteClientBaseURL(
+  remoteOrigin: string,
+  id: string,
+  version: string,
+) {
+  return `${remoteOrigin}/${id}/${version}/client`;
+}
+
+export function getRemoteServerBaseURL(
+  remoteOrigin: string,
+  id: string,
+  version: string,
+) {
+  return `${remoteOrigin}/${id}/${version}/server`;
+}