From 31f89a8267adeb62b8e8d07efcfd2f89eb2aa2e8 Mon Sep 17 00:00:00 2001 From: Philip Zeyliger Date: Thu, 15 Jan 2026 18:24:44 -0800 Subject: [PATCH] shelley: change favicon to Cool S MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I couldn't find a good shell SVG anywhere with licensing that I could be sure of, so I drew a cool S in Excalidraw, and the 90's are back. Prompt: Let's try to fix https://github.com/boldsoftware/shelley/issues/18 by changing the favicon. I want to preserve the fact that the favicons have random colors and therefore keep it in svg. Let's do the "Cool S" (https://en.wikipedia.org/wiki/Cool_S) as our image for now; that should be easy to draw in svg. Replace the scallop shell design with the iconic "Cool S" (also known as the Stussy S or Super S), using the hand-drawn Excalidraw SVG directly to preserve the sketchy aesthetic. The color varies by hostname hash (hue 0-360°) while keeping saturation and lightness constant for consistent appearance. Fixes https://github.com/boldsoftware/shelley/issues/18 Co-authored-by: Shelley --- server/handlers.go | 72 +++++++++++++++----------------------- ui/src/services/favicon.ts | 5 +-- 2 files changed, 31 insertions(+), 46 deletions(-) diff --git a/server/handlers.go b/server/handlers.go index 397a65419acfcd3018434ac86916f46f59d23b12..c54dfc724fb3796ebce54f941b05c80328365dfd 100644 --- a/server/handlers.go +++ b/server/handlers.go @@ -305,54 +305,38 @@ func hashString(s string) uint32 { return hash } -// generateFaviconSVG creates a seashell favicon with color based on hostname hash +// generateFaviconSVG creates a Cool S favicon with color based on hostname hash +// Big colored circle background with the Cool S inscribed in white func generateFaviconSVG(hostname string) string { hash := hashString(hostname) h := hash % 360 - s := 55 - l := 65 - lightL := l + 15 - if lightL > 90 { - lightL = 90 - } - darkL := l - 15 - if darkL < 40 { - darkL = 40 - } - strokeL := darkL - 15 - if strokeL < 25 { - strokeL = 25 - } - - return fmt.Sprintf(` - - - - - - - - - - - - - - - + bgColor := fmt.Sprintf("hsl(%d, 70%%, 55%%)", h) + // White S on colored background - good contrast on any saturated hue + strokeColor := "#ffffff" + + // Original Cool S viewBox: 0 0 171 393 (tall rectangle) + // Square viewBox 0 0 400 400 with circle, S scaled and centered inside + // S dimensions: 171x393, scale 0.97 gives 166x381, centered in 400x400 + return fmt.Sprintf(` + + + + + + + + + + + + + + + + + `, - h, s, lightL, - h, s, l, - h, s, darkL, - h, s-10, strokeL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, + bgColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, ) } diff --git a/ui/src/services/favicon.ts b/ui/src/services/favicon.ts index a1ce030c787556db7823885aba97884a80e63444..595aca6eff30fab16f2e2a70f676d8257438d019 100644 --- a/ui/src/services/favicon.ts +++ b/ui/src/services/favicon.ts @@ -34,10 +34,11 @@ function addStatusDot(svg: string, status: FaviconStatus): string { const svgWithoutClose = svg.substring(0, closingTagIndex); // Add the status dot in the bottom-right corner + // New viewBox is 400x400, so position dot near bottom-right at ~350,350 const dotColor = status === "working" ? "#f59e0b" : "#22c55e"; const statusDot = ` - - + + `; return svgWithoutClose + statusDot + "";