diff --git a/apps/dokploy/components/dashboard/project/add-pack.tsx b/apps/dokploy/components/dashboard/project/add-pack.tsx index a97c92f47..9abbc4eea 100644 --- a/apps/dokploy/components/dashboard/project/add-pack.tsx +++ b/apps/dokploy/components/dashboard/project/add-pack.tsx @@ -83,16 +83,26 @@ const logoSlug = (name: string) => { return LOGO_ALIASES[base] ?? base; }; -// Icon published by the registry: a brand (→ Simple Icons slug) or a colored -// monogram tile. Older/custom registries omit it — fall back to guessing a -// Simple Icons slug from the pack name, then a generic box. +// Icon published by the registry: a brand (→ Simple Icons slug), a custom +// inline logo (→ data-URI src), or a colored monogram tile. Older/custom +// registries omit it — fall back to guessing a Simple Icons slug from the pack +// name, then a generic box. type PackIcon = | { kind: "brand"; slug: string; hex?: string; title?: string } + | { kind: "custom"; src: string } | { kind: "monogram"; text: string; color?: string }; const PackLogo = ({ name, icon }: { name: string; icon?: PackIcon | null }) => { const [errored, setErrored] = useState(false); + // Custom: a self-contained logo the registry published as a data-URI. + if (icon?.kind === "custom" && icon.src) { + return ( + // biome-ignore lint/performance/noImgElement: inline data-URI logo, no next/image + {name} + ); + } + // Monogram: a colored initial tile, no network fetch. if (icon?.kind === "monogram") { return ( diff --git a/packages/server/src/setup/pack-registry.ts b/packages/server/src/setup/pack-registry.ts index fff38a249..2b0e8080f 100644 --- a/packages/server/src/setup/pack-registry.ts +++ b/packages/server/src/setup/pack-registry.ts @@ -1,8 +1,10 @@ // Store metadata published by a GitHub-Pages Nomad-Pack registry (packs.json). -// A brand icon maps to a Simple Icons slug; a monogram is a colored initial -// tile. Health is the smoke-test verdict (null = not boot-tested yet). +// A brand icon maps to a Simple Icons slug; a custom icon is a self-contained +// logo published as a data-URI; a monogram is a colored initial tile. Health is +// the smoke-test verdict (null = not boot-tested yet). export type PackIcon = | { kind: "brand"; slug: string; hex?: string; title?: string } + | { kind: "custom"; src: string } | { kind: "monogram"; text: string; color?: string }; export type PackHealth = { ok?: boolean; checkedAt?: string } | null;