From 63357faedcfc482e0b47db0af3d269dcb8fe5b40 Mon Sep 17 00:00:00 2001 From: Cory Smith Date: Thu, 18 Jun 2026 09:46:25 -0600 Subject: [PATCH] docs: Add icons for boxd, exe.dev, islo, and mirage + extracting out to new file. Removing smolvm for now. --- apps/docs/src/lib/docs-navigation.ts | 18 ++--- apps/docs/src/pages/ecosystem/index.astro | 64 ++---------------- apps/ecosystem-catalog.ts | 81 +++++++++++++++-------- apps/ecosystem-icons.ts | 32 +++++++++ apps/www/src/pages/index.astro | 6 -- 5 files changed, 100 insertions(+), 101 deletions(-) create mode 100644 apps/ecosystem-icons.ts diff --git a/apps/docs/src/lib/docs-navigation.ts b/apps/docs/src/lib/docs-navigation.ts index 6d8cbf64..5366c44e 100644 --- a/apps/docs/src/lib/docs-navigation.ts +++ b/apps/docs/src/lib/docs-navigation.ts @@ -1,15 +1,15 @@ export type DocsNavItem = | { - title: string; - slug: string; - anchor?: string; - icon?: 'home'; - items?: DocsNavItem[]; - } + title: string; + slug: string; + anchor?: string; + icon?: 'home'; + items?: DocsNavItem[]; + } | { - title: string; - href: string; - }; + title: string; + href: string; + }; export interface DocsNavGroup { title?: string; diff --git a/apps/docs/src/pages/ecosystem/index.astro b/apps/docs/src/pages/ecosystem/index.astro index 59cfdf91..40f37451 100644 --- a/apps/docs/src/pages/ecosystem/index.astro +++ b/apps/docs/src/pages/ecosystem/index.astro @@ -68,46 +68,11 @@ import { channels, databases, deploy, sandboxes, tooling } from '../../../../eco
  • - { - item.icon ? ( - - ) : item.brand === 'daytona' ? ( - - ) : item.brand === 'e2b' ? ( - - ) : item.brand === 'modal' ? ( - - ) : ( - @@ -329,12 +294,6 @@ import { channels, databases, deploy, sandboxes, tooling } from '../../../../eco height: 58%; } - .ecosystem-sandbox-logo { - width: 62%; - height: auto; - max-height: 62%; - } - /* Default placeholder for ecosystem items without a logo: a 30deg white drafting grid over a light blue gradient, brighter at the top as if lit from above (the homepage blue accent). Clipped to the rounded tile. */ @@ -348,19 +307,6 @@ import { channels, databases, deploy, sandboxes, tooling } from '../../../../eco linear-gradient(180deg, #5a98f6 0%, #3173ea 100%); } - .ecosystem-daytona-logo { - width: 48%; - max-height: 54%; - } - - .ecosystem-e2b-logo { - width: 80%; - } - - .ecosystem-modal-logo { - width: 66%; - } - .ecosystem-mark { color: white; font-size: 2.1rem; diff --git a/apps/ecosystem-catalog.ts b/apps/ecosystem-catalog.ts index 69d54123..fc81b636 100644 --- a/apps/ecosystem-catalog.ts +++ b/apps/ecosystem-catalog.ts @@ -1,9 +1,20 @@ +import { + boxdIcon, + braintrustIcon, + daytonaIcon, + e2bIcon, + exeDevIcon, + isloIcon, + mirageIcon, + modalIcon, + openTelemetryIcon +} from './ecosystem-icons'; + export interface EcosystemItem { name: string; href: string; icon?: string; mark?: string; - brand?: 'daytona' | 'e2b' | 'modal'; background: string; iconClass?: string; keywords?: string; @@ -16,23 +27,12 @@ function sortEcosystemItems(a: EcosystemItem, b: EcosystemItem): number { } function sortEcosystemItemsLogoFirst(a: EcosystemItem, b: EcosystemItem): number { - const aHasLogo = Boolean(a.icon ?? a.brand ?? a.mark); - const bHasLogo = Boolean(b.icon ?? b.brand ?? b.mark); + const aHasLogo = Boolean(a.icon ?? a.mark); + const bHasLogo = Boolean(b.icon ?? b.mark); if (aHasLogo !== bHasLogo) return aHasLogo ? -1 : 1; return sortEcosystemItems(a, b); } -function svgDataUri(svg: string): string { - return `data:image/svg+xml,${encodeURIComponent(svg)}`; -} - -const braintrustIcon = svgDataUri( - '', -); -const openTelemetryIcon = svgDataUri( - '', -); - export const channels: EcosystemItem[] = [ { name: 'Discord', @@ -238,8 +238,14 @@ export const deploy: EcosystemItem[] = [ }, ].sort(sortEcosystemItems); -export const sandboxes: EcosystemItem[] = [ - { name: 'boxd', href: '/docs/ecosystem/sandboxes/boxd/', background: '#2563eb' }, +const sandboxItems: EcosystemItem[] = [ + { + name: 'boxd', + href: '/docs/ecosystem/sandboxes/boxd/', + icon: boxdIcon, + background: '#000000', + iconClass: 'w-1/2! h-1/2!', + }, { name: 'Cloudflare Sandbox', href: '/docs/ecosystem/sandboxes/cloudflare/', @@ -256,27 +262,46 @@ export const sandboxes: EcosystemItem[] = [ { name: 'Daytona', href: '/docs/ecosystem/sandboxes/daytona/', - brand: 'daytona', + icon: daytonaIcon, background: '#181717', + iconClass: 'w-1/2! h-1/2!', homepageRank: 9, }, { name: 'E2B', href: '/docs/ecosystem/sandboxes/e2b/', - brand: 'e2b', + icon: e2bIcon, background: '#ffffff', + iconClass: 'w-3/4! h-3/4!', homepageRank: 17, }, - { name: 'exe.dev', href: '/docs/ecosystem/sandboxes/exedev/', background: '#2563eb' }, - { name: 'islo', href: '/docs/ecosystem/sandboxes/islo/', background: '#2563eb' }, - { name: 'Mirage', href: '/docs/ecosystem/sandboxes/mirage/', background: '#2563eb' }, + { + name: 'exe.dev', + href: '/docs/ecosystem/sandboxes/exedev/', + icon: exeDevIcon, + background: '#ffffff', + }, + { + name: 'islo', + href: '/docs/ecosystem/sandboxes/islo/', + icon: isloIcon, + background: '#ffffff', + iconClass: 'w-3/4! h-3/4! max-h-3/4!', + }, + { + name: 'Mirage', + href: '/docs/ecosystem/sandboxes/mirage/', + icon: mirageIcon, + background: '#000000', + iconClass: 'w-[62%]! h-auto! max-h-[62%]!', + }, { name: 'Modal', href: '/docs/ecosystem/sandboxes/modal/', - brand: 'modal', + icon: modalIcon, background: '#ffffff', + iconClass: 'w-2/3! h-2/3!', }, - { name: 'smolvm', href: '/docs/ecosystem/sandboxes/smolvm/', background: '#2563eb' }, { name: 'Vercel Sandbox', href: '/docs/ecosystem/sandboxes/vercel/', @@ -285,7 +310,9 @@ export const sandboxes: EcosystemItem[] = [ iconClass: 'monochrome-white ecosystem-logo-small', homepageRank: 4, }, -].sort(sortEcosystemItemsLogoFirst); +]; + +export const sandboxes = sandboxItems.sort(sortEcosystemItemsLogoFirst); export const databases: EcosystemItem[] = [ { @@ -417,14 +444,14 @@ const homepageOrderIndex = new Map(homepageOrder.map((name, index) => [name, ind const seenIcons = new Set(); export const homepageEcosystemItems = catalog - .filter((item) => item.icon || item.brand === 'daytona' || item.brand === 'e2b') + .filter((item) => item.icon) .sort( (a, b) => (homepageOrderIndex.get(a.name) ?? Number.MAX_SAFE_INTEGER) - - (homepageOrderIndex.get(b.name) ?? Number.MAX_SAFE_INTEGER) || sortEcosystemItems(a, b), + (homepageOrderIndex.get(b.name) ?? Number.MAX_SAFE_INTEGER) || sortEcosystemItems(a, b), ) .filter((item) => { - const identity = item.icon ?? item.brand; + const identity = item.icon; if (!identity || seenIcons.has(identity)) return false; seenIcons.add(identity); return true; diff --git a/apps/ecosystem-icons.ts b/apps/ecosystem-icons.ts new file mode 100644 index 00000000..bcdc33c4 --- /dev/null +++ b/apps/ecosystem-icons.ts @@ -0,0 +1,32 @@ +export function svgDataUri(svg: string): string { + return `data:image/svg+xml,${encodeURIComponent(svg)}`; +} + +export const braintrustIcon = svgDataUri( + '', +); +export const openTelemetryIcon = svgDataUri( + '', +); +export const exeDevIcon = svgDataUri( + '', +); + +export const daytonaIcon = svgDataUri( + ' ', +); +export const e2bIcon = svgDataUri( + ' ', +); +export const modalIcon = svgDataUri( + ' ', +); +export const boxdIcon = svgDataUri( + ' ', +); +export const isloIcon = svgDataUri( + ' ', +); +export const mirageIcon = svgDataUri( + ' ', +); diff --git a/apps/www/src/pages/index.astro b/apps/www/src/pages/index.astro index 3b5ce21b..f497a7af 100644 --- a/apps/www/src/pages/index.astro +++ b/apps/www/src/pages/index.astro @@ -408,12 +408,6 @@ const piCells = piPixelPattern.flatMap((line, sourceRow) => app.iconClass?.includes('ecosystem-logo-large') ? 'h-[82%] w-[82%]' : app.iconClass?.includes('ecosystem-logo-small') ? 'h-[48%] w-[48%]' : 'h-[61%] w-[61%]', (app.iconClass?.includes('monochrome-white') || app.iconClass?.includes('invert')) && 'brightness-0 invert', ]} src={app.icon} alt="" loading="lazy" /> - ) : app.brand === 'daytona' ? ( - - ) : app.brand === 'e2b' ? ( - ) : null}