Fix icon rendering in OpenGraph images by using hex colors for server-side rendering. (#61)

CSS variables don't resolve in Satori (server-side image renderer), breaking OG image generation. Added catppuccinColorsMocha export with Mocha hex values for server-side use while keeping CSS variables for client components to maintain automatic light/dark switching.

Author: rgbkrk

site/app/kernel/[name]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getAllKernelNames, getKernelReport } from '@/lib/data';
 import { getPassedCount, getTotalCount, hasStartupError } from '@/types/report';
-import { iconPaths, catppuccinColors, getIconKey, type ColorKey } from '@/lib/icon-paths';
+import { iconPaths, catppuccinColorsMocha, getIconKey, type ColorKey } from '@/lib/icon-paths';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-static';
@@ -21,7 +21,7 @@ function getLanguageIconSvg(language: string, kernelName: string) {
           <path
             key={i}
             d={path.d}
-            stroke={catppuccinColors[path.color as ColorKey]}
+            stroke={catppuccinColorsMocha[path.color as ColorKey]}
           />
         ))}
       </g>

site/src/lib/icon-paths.ts

@@ -19,6 +19,20 @@ export const catppuccinColors = {
   overlay: 'var(--catppuccin-color-overlay1)',
 } as const;
 
+// Mocha hex values for server-side rendering (OG images)
+// CSS variables don't work in Satori, so we need hardcoded values
+export const catppuccinColorsMocha = {
+  blue: '#89b4fa',
+  yellow: '#f9e2af',
+  peach: '#fab387',
+  red: '#f38ba8',
+  mauve: '#cba6f7',
+  green: '#a6e3a1',
+  teal: '#94e2d5',
+  text: '#cdd6f4',
+  overlay: '#7f849c',
+} as const;
+
 export type ColorKey = keyof typeof catppuccinColors;
 
 interface PathData {