Skip to content

docs: Add icons for boxd, exe.dev, islo, and mirage #298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
corymsmith wants to merge 1 commit into from
Closed

docs: Add icons for boxd, exe.dev, islo, and mirage #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions apps/docs/src/lib/docs-navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
64 changes: 5 additions & 59 deletions apps/docs/src/pages/ecosystem/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,46 +68,11 @@ import { channels, databases, deploy, sandboxes, tooling } from '../../../../eco
<li data-ecosystem-item data-search={`${item.name} ${item.keywords ?? ''}`.toLowerCase()}>
<a class="ecosystem-item group" href={item.href} aria-label={item.name}>
<span class="ecosystem-icon" style={`--ecosystem-icon-bg: ${item.background}`}>
{
item.icon ? (
<img class:list={['ecosystem-logo', item.iconClass]} src={item.icon} alt="" loading="lazy" />
) : item.brand === 'daytona' ? (
<svg class="ecosystem-sandbox-logo ecosystem-daytona-logo text-white" viewBox="0 0 69 72" fill="none" aria-hidden="true">
<rect x="3.63965" y="48.4343" width="24.9293" height="8.54716" fill="currentColor" />
<rect x="37.1162" y="18.5193" width="28.4906" height="8.54716" fill="currentColor" />
<rect width="29.9151" height="8.54717" transform="matrix(0.707107 -0.707106 0.707107 0.707106 22.1582 21.1531)" fill="currentColor" />
<rect width="22.9746" height="8.54717" transform="matrix(-0.707107 -0.707106 -0.707107 0.707106 22.2891 42.521)" fill="currentColor" />
<rect width="24.217" height="8.54717" transform="matrix(-0.707107 0.707106 -0.707107 -0.707106 43.6572 54.4778)" fill="currentColor" />
<rect width="27.066" height="8.54717" transform="matrix(0.707107 0.707106 0.707107 -0.707106 43.5264 33.1099)" fill="currentColor" />
<rect x="22.1582" y="12.1082" width="20.6556" height="8.54718" transform="rotate(90 22.1582 12.1082)" fill="currentColor" />
<rect x="52.0732" y="42.0237" width="25.6415" height="8.54718" transform="rotate(90 52.0732 42.0237)" fill="currentColor" />
</svg>
) : item.brand === 'e2b' ? (
<svg class="ecosystem-sandbox-logo ecosystem-e2b-logo text-black" viewBox="0 0 65 18" fill="none" aria-hidden="true">
<path d="M20.2235 0V4.67645H5.49328C5.04263 4.67661 4.67645 5.0426 4.67645 5.49328V5.84494C4.67645 6.29563 5.04263 6.66161 5.49328 6.66178H20.2235V11.3382H5.49328C5.04263 11.3384 4.67645 11.7044 4.67645 12.1551V12.5067C4.67657 12.9573 5.04271 13.3222 5.49328 13.3223H20.2235V18H3.12668C1.39998 17.9996 1.98414e-05 16.5989 0 14.8721V3.12668C0.000280465 1.40008 1.40013 0.000432767 3.12668 0H20.2235Z" fill="currentColor" />
<path d="M39.2723 0C40.9992 0.000155056 42.399 1.40092 42.399 3.12791V8.36701C42.3989 10.0101 41.0672 11.3417 39.424 11.3419H36.9587C36.9413 11.3408 36.9232 11.3382 36.9057 11.3382H27.6379C27.1873 11.3384 26.8211 11.7044 26.8211 12.1551V12.5067C26.8213 12.9572 27.1874 13.3221 27.6379 13.3223H42.3903V18H22.1446V9.63299C22.1446 7.98998 23.4767 6.65732 25.1195 6.65684H27.5762C27.5967 6.65838 27.6174 6.66174 27.6379 6.66178H36.9057C37.3563 6.66171 37.7225 6.29578 37.7225 5.84494V5.49328C37.7224 5.04255 37.3563 4.67775 36.9057 4.67768H22.1755V0H39.2723Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.4379 0C63.1648 3.6786e-05 64.5655 1.39985 64.5658 3.12668V14.8721C64.5658 16.5992 63.1649 18 61.4379 18H44.3386V0H61.4379ZM49.8319 11.3382C49.3813 11.3384 49.0151 11.7044 49.0151 12.1551V12.5067C49.0152 12.9573 49.3813 13.3222 49.8319 13.3223H59.0725C59.523 13.3222 59.888 12.9574 59.8881 12.5067V12.1551C59.8881 11.7043 59.5231 11.3384 59.0725 11.3382H49.8319ZM49.8319 4.67645C49.3813 4.67661 49.0151 5.0426 49.0151 5.49328V5.84494C49.0151 6.29562 49.3813 6.66161 49.8319 6.66178H59.0725C59.5231 6.66162 59.8881 6.29571 59.8881 5.84494V5.49328C59.8881 5.04252 59.5231 4.67661 59.0725 4.67645H49.8319Z" fill="currentColor" />
</svg>
) : item.brand === 'modal' ? (
<svg class="ecosystem-sandbox-logo ecosystem-modal-logo" viewBox="0 0 404 211" fill="none" aria-hidden="true">
<path d="M163.477 4.39583L201.633 70.3333L123.035 206.604C121.453 209.242 118.64 211 115.475 211H44.4379C42.8554 211 41.2729 210.648 40.042 209.769C38.8112 209.066 37.5804 207.835 36.877 206.604L1.35875 145.062C-0.22375 142.425 -0.22375 138.908 1.35875 136.271L77.4946 4.39583C78.1979 2.98917 79.4288 1.93416 80.6596 1.23083C81.8904 0.527495 83.473 0 85.0555 0H156.092C159.257 0 162.07 1.75833 163.653 4.39583H163.477ZM402.083 136.271L325.947 4.39583C325.244 2.98917 324.013 1.93416 322.782 1.23083C321.551 0.527495 319.969 0 318.386 0H247.35C244.185 0 241.371 1.75833 239.789 4.39583L201.633 70.3333L280.23 206.604C281.813 209.242 284.626 211 287.791 211H358.828C360.41 211 361.993 210.648 363.224 209.769C364.455 209.066 365.685 207.835 366.389 206.604L401.907 145.062C403.49 142.425 403.49 138.908 401.907 136.271H402.083Z" fill="#62DE61" />
<path d="M120.396 70.3333H201.631L163.475 4.39583C161.892 1.75833 159.079 0 155.914 0H84.8773C83.2948 0 81.7123 0.351661 80.4814 1.23083L120.396 70.3333Z" fill="url(#modal-gradient-0)" />
<path d="M120.402 70.3346L80.4877 1.23206C79.2569 1.93539 78.0261 3.16623 77.3227 4.39706L1.18688 136.272C-0.395625 138.91 -0.395625 142.426 1.18688 145.064L36.7053 206.605C37.4086 208.012 38.6395 209.067 39.8703 209.77L120.402 70.3346Z" fill="url(#modal-gradient-1)" />
<path d="M201.638 70.3334H120.403L39.8711 209.769C41.1019 210.473 42.6844 211 44.2669 211H115.303C118.468 211 121.282 209.242 122.864 206.604L201.462 70.3334H201.638Z" fill="#09AF58" />
<path d="M402.094 145.062C402.798 143.656 403.325 142.249 403.325 140.667H323.497L283.583 209.769C284.814 210.472 286.396 211 287.979 211H359.015C362.18 211 364.994 209.242 366.576 206.604L402.094 145.062Z" fill="#09AF58" />
<path d="M247.18 0C245.598 0 244.015 0.351661 242.784 1.23083L323.316 140.667H403.144C403.144 139.084 402.793 137.677 401.913 136.271L325.778 4.39583C324.195 1.75833 321.382 0 318.217 0H247.18Z" fill="url(#modal-gradient-2)" />
<path d="M283.391 209.77L323.305 140.668L242.773 1.23206C241.542 1.93539 240.311 3.16623 239.608 4.39706L201.452 70.3346L280.05 206.605C280.753 208.012 281.984 209.067 283.215 209.77H283.391Z" fill="url(#modal-gradient-3)" />
<defs>
<linearGradient id="modal-gradient-0" x1="171.036" y1="-316.5" x2="110.901" y2="-316.5" gradientUnits="userSpaceOnUse"><stop stop-color="#BFF9B4" /><stop offset="1" stop-color="#80EE64" /></linearGradient>
<linearGradient id="modal-gradient-1" x1="9.45105" y1="192.187" x2="109.852" y2="18.1121" gradientUnits="userSpaceOnUse"><stop stop-color="#80EE64" /><stop offset="0.18" stop-color="#7BEB63" /><stop offset="0.36" stop-color="#6FE562" /><stop offset="0.55" stop-color="#5ADA60" /><stop offset="0.74" stop-color="#3DCA5D" /><stop offset="0.93" stop-color="#18B759" /><stop offset="1" stop-color="#09AF58" /></linearGradient>
<linearGradient id="modal-gradient-2" x1="373.78" y1="157.722" x2="273.379" y2="-16.3526" gradientUnits="userSpaceOnUse"><stop stop-color="#BFF9B4" /><stop offset="1" stop-color="#80EE64" /></linearGradient>
<linearGradient id="modal-gradient-3" x1="312.93" y1="192.89" x2="212.354" y2="18.8154" gradientUnits="userSpaceOnUse"><stop stop-color="#80EE64" /><stop offset="0.18" stop-color="#7BEB63" /><stop offset="0.36" stop-color="#6FE562" /><stop offset="0.55" stop-color="#5ADA60" /><stop offset="0.74" stop-color="#3DCA5D" /><stop offset="0.93" stop-color="#18B759" /><stop offset="1" stop-color="#09AF58" /></linearGradient>
</defs>
</svg>
) : (
<span class="ecosystem-default-grid" aria-hidden="true" />
)
}
{item.icon ? (
<img class:list={['ecosystem-logo', item.iconClass]} src={item.icon} alt="" loading="lazy" />
) : (
<span class="ecosystem-default-grid" aria-hidden="true" />
)}
</span>
<span class="ecosystem-name">{item.name}</span>
</a>
Expand Down Expand Up @@ -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. */
Expand All @@ -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;
Expand Down
81 changes: 54 additions & 27 deletions apps/ecosystem-catalog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><path fill="#fff" d="M9.552 0c1.507 0 2.729 1.237 2.729 2.762v2.76c0 1.525-1.222 2.762-2.729 2.762H8.188v1.074h1.364c1.507 0 2.729 1.236 2.729 2.761v2.762c0 1.525-1.222 2.761-2.729 2.761H8.188v1.074h1.364c1.507 0 2.729 1.237 2.729 2.762v2.76c0 1.525-1.222 2.762-2.729 2.762h-2.73c-1.507 0-2.728-1.237-2.728-2.762v-1.917H2.729C1.222 22.321 0 21.085 0 19.56v-2.762c0-1.525 1.223-2.761 2.729-2.761h1.365v-1.074H2.729C1.223 12.963 0 11.727 0 10.202V7.44c0-1.525 1.222-2.761 2.729-2.761h1.365V2.762C4.094 1.237 5.315 0 6.822 0zm9.4 0c1.507 0 2.729 1.237 2.729 2.762v1.917h1.365c1.507 0 2.728 1.237 2.728 2.761v2.762c0 1.525-1.221 2.761-2.728 2.761h-1.365v1.074h1.365c1.507 0 2.728 1.236 2.728 2.761v2.762c0 1.524-1.221 2.761-2.728 2.761h-1.365v1.917c0 1.525-1.222 2.762-2.729 2.762h-2.729c-1.507 0-2.728-1.237-2.728-2.762v-2.76c0-1.525 1.221-2.762 2.728-2.762h1.364v-1.074h-1.364c-1.507 0-2.728-1.236-2.728-2.761v-2.762c0-1.525 1.221-2.761 2.728-2.761h1.364V8.284h-1.364c-1.507 0-2.728-1.237-2.728-2.762v-2.76C13.495 1.237 14.716 0 16.223 0z"/></svg>',
);
const openTelemetryIcon = svgDataUri(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#f5a800" d="M67.648 69.797c-5.246 5.25-5.246 13.758 0 19.008 5.25 5.246 13.758 5.246 19.004 0 5.25-5.25 5.25-13.758 0-19.008-5.246-5.246-13.754-5.246-19.004 0Zm14.207 14.219a6.649 6.649 0 0 1-9.41 0 6.65 6.65 0 0 1 0-9.407 6.649 6.649 0 0 1 9.41 0c2.598 2.586 2.598 6.809 0 9.407ZM86.43 3.672l-8.235 8.234a4.17 4.17 0 0 0 0 5.875l32.149 32.149a4.17 4.17 0 0 0 5.875 0l8.234-8.235c1.61-1.61 1.61-4.261 0-5.87L92.29 3.671a4.159 4.159 0 0 0-5.86 0ZM28.738 108.895a3.763 3.763 0 0 0 0-5.31l-4.183-4.187a3.768 3.768 0 0 0-5.313 0l-8.644 8.649-.016.012-2.371-2.375c-1.313-1.313-3.45-1.313-4.75 0-1.313 1.312-1.313 3.449 0 4.75l14.246 14.242a3.353 3.353 0 0 0 4.746 0c1.3-1.313 1.313-3.45 0-4.746l-2.375-2.375.016-.012Zm43.559-81.582L54.004 45.605c-1.625 1.625-1.625 4.301 0 5.926L65.3 62.824c7.984-5.746 19.18-5.035 26.363 2.153l9.148-9.149c1.622-1.625 1.622-4.297 0-5.922L78.22 27.313a4.185 4.185 0 0 0-5.922 0ZM60.55 67.585l-6.672-6.672c-1.563-1.562-4.125-1.562-5.684 0l-23.53 23.54a4.036 4.036 0 0 0 0 5.687l13.331 13.332a4.036 4.036 0 0 0 5.688 0l15.132-15.157c-3.199-6.609-2.625-14.593 1.735-20.73Z"/></svg>',
);

export const channels: EcosystemItem[] = [
{
name: 'Discord',
Expand Down Expand Up @@ -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/',
Expand All @@ -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/',
Expand All @@ -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[] = [
{
Expand Down Expand Up @@ -417,14 +444,14 @@ const homepageOrderIndex = new Map(homepageOrder.map((name, index) => [name, ind
const seenIcons = new Set<string>();

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;
Expand Down
32 changes: 32 additions & 0 deletions apps/ecosystem-icons.ts
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions apps/www/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ? (
<svg class="h-[54%] w-[48%] text-white" viewBox="0 0 69 72" fill="none" aria-hidden="true">
<rect x="3.63965" y="48.4343" width="24.9293" height="8.54716" fill="currentColor"/><rect x="37.1162" y="18.5193" width="28.4906" height="8.54716" fill="currentColor"/><rect width="29.9151" height="8.54717" transform="matrix(.707107 -.707106 .707107 .707106 22.1582 21.1531)" fill="currentColor"/><rect width="22.9746" height="8.54717" transform="matrix(-.707107 -.707106 -.707107 .707106 22.2891 42.521)" fill="currentColor"/><rect width="24.217" height="8.54717" transform="matrix(-.707107 .707106 -.707107 -.707106 43.6572 54.4778)" fill="currentColor"/><rect width="27.066" height="8.54717" transform="matrix(.707107 .707106 .707107 -.707106 43.5264 33.1099)" fill="currentColor"/><rect x="22.1582" y="12.1082" width="20.6556" height="8.54718" transform="rotate(90 22.1582 12.1082)" fill="currentColor"/><rect x="52.0732" y="42.0237" width="25.6415" height="8.54718" transform="rotate(90 52.0732 42.0237)" fill="currentColor"/>
</svg>
) : app.brand === 'e2b' ? (
<span class="text-2xl font-black tracking-[-0.08em] text-gray-950 sm:text-3xl" aria-hidden="true">E2B</span>
) : null}
</span>
</a>
Expand Down
Loading