From 8c2596540b63bc84607cb617badb32dc33accfb5 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Wed, 1 Apr 2026 09:34:02 -0500
Subject: [PATCH] Replace per-logo `width` with relative `scale` in logo
 carousel

The logo carousel previously used a per-logo `width` property (e.g.
`"120px"`, `"200px"`) with a fallback default of `"150px"`. This made
logo sizing an absolute, context-specific value tied to the carousel
layout.

Replace `width` with a relative `scale` multiplier (e.g. `0.8`, `1.33`)
that each consuming component can apply to its own base width. This
prepares for sharing the logo data array between `LogoCarousel` and
other components, where the base width might differ. Logos without a
`scale` property default to 1.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/LogoCarousel.jsx | 44 +++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx
index 9a590eb..ece6d11 100644
--- a/docs/snippets/LogoCarousel.jsx
+++ b/docs/snippets/LogoCarousel.jsx
@@ -31,7 +31,7 @@ export const LogoCarousel = () => {
       url: "https://autohand.ai/",
       lightSrc: "/images/logos/autohand/autohand-light.svg",
       darkSrc: "/images/logos/autohand/autohand-dark.svg",
-      width: "120px",
+      scale: 0.8,
       instructionsUrl: "https://autohand.ai/docs/working-with-autohand-code/agent-skills.html",
       sourceCodeUrl: "https://github.com/autohandai/code-cli",
     },
@@ -59,7 +59,7 @@ export const LogoCarousel = () => {
       url: "https://mux.coder.com/",
       lightSrc: "/images/logos/mux/mux-editor-light.svg",
       darkSrc: "/images/logos/mux/mux-editor-dark.svg",
-      width: "120px",
+      scale: 0.8,
       instructionsUrl: "https://mux.coder.com/agent-skills",
       sourceCodeUrl: "https://github.com/coder/mux",
     },
@@ -77,7 +77,7 @@ export const LogoCarousel = () => {
       url: "https://ampcode.com/",
       lightSrc: "/images/logos/amp/amp-logo-light.svg",
       darkSrc: "/images/logos/amp/amp-logo-dark.svg",
-      width: "120px",
+      scale: 0.8,
       instructionsUrl: "https://ampcode.com/manual#agent-skills",
     },
     {
@@ -170,7 +170,7 @@ export const LogoCarousel = () => {
       url: "https://shittycodingagent.ai/",
       lightSrc: "/images/logos/pi/pi-logo-light.svg",
       darkSrc: "/images/logos/pi/pi-logo-dark.svg",
-      width: "80px",
+      scale: 0.55,
       instructionsUrl: "https://github.com/badlogic/pi-mono/blob/main/packages/coding-agent/docs/skills.md",
       sourceCodeUrl: "https://github.com/badlogic/pi-mono",
     },
@@ -223,7 +223,7 @@ export const LogoCarousel = () => {
       url: "https://github.com/mistralai/mistral-vibe",
       lightSrc: "/images/logos/mistral-vibe/vibe-logo_black.svg",
       darkSrc: "/images/logos/mistral-vibe/vibe-logo_white.svg",
-      width: "80px",
+      scale: 0.55,
       instructionsUrl: "https://github.com/mistralai/mistral-vibe",
       sourceCodeUrl: "https://github.com/mistralai/mistral-vibe",
     },
@@ -233,7 +233,7 @@ export const LogoCarousel = () => {
       url: "https://commandcode.ai/",
       lightSrc: "/images/logos/command-code/command-code-logo-for-light.svg",
       darkSrc: "/images/logos/command-code/command-code-logo-for-dark.svg",
-      width: "200px",
+      scale: 1.33,
       instructionsUrl: "https://commandcode.ai/docs/skills",
     },
     {
@@ -242,7 +242,7 @@ export const LogoCarousel = () => {
       url: "https://ona.com",
       lightSrc: "/images/logos/ona/ona-wordmark-light.svg",
       darkSrc: "/images/logos/ona/ona-wordmark-dark.svg",
-      width: "120px",
+      scale: 0.8,
       instructionsUrl: "https://ona.com/docs/ona/agents-md#skills-for-repository-specific-workflows",
     },
     {
@@ -322,22 +322,28 @@ export const LogoCarousel = () => {
     <>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 50s linear infinite' }}>
-          {row1Doubled.map((logo, i) => (
-            <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
-              <img className="block dark:hidden object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.lightSrc} alt={logo.name} noZoom />
-              <img className="hidden dark:block object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.darkSrc} alt={logo.name} noZoom />
-            </a>
-          ))}
+          {row1Doubled.map((logo, i) => {
+            const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
+            return (
+              <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
+                <img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
+              </a>
+            );
+          })}
         </div>
       </div>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 60s linear infinite reverse' }}>
-          {row2Doubled.map((logo, i) => (
-            <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
-              <img className="block dark:hidden object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.lightSrc} alt={logo.name} noZoom />
-              <img className="hidden dark:block object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.darkSrc} alt={logo.name} noZoom />
-            </a>
-          ))}
+          {row2Doubled.map((logo, i) => {
+            const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
+            return (
+              <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
+                <img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
+              </a>
+            );
+          })}
         </div>
       </div>
     </>