The Subheading prop that lied about its own color
I found this one during a UI/UX review pass, not while actually looking for it: every place this site renders a blog subheading passes color="blue" to the shared @vdaluz/astro-blog package’s Subheading component. Six call sites - blog index, single post, project-filtered index, in both English and Spanish.
Open the component and the color map is:
const colorClasses = {
blue: 'text-accent',
gray: 'text-muted',
};
blue doesn’t map to a blue class. It maps to text-accent. And on this site, --accent is defined as 0 255 0 - neon green. So every “Dev Log” and “Deep Cut Atlas” subheading label on the site has been rendering in green while the code loudly claims it’s blue.
Nothing was actually broken. The page looked right. That’s what made it worth fixing rather than ignoring: a prop name that disagrees with what it does is a trap for the next person who touches this code, especially since this package is shared with vdaluz.com too, which has its own accent color. Someone reads color="blue", assumes it’s decorative and safe to leave alone, and doesn’t realize the actual rendered color comes entirely from this site’s token contract, not the prop value.
The fix ended up being simpler than “rename the prop” - I checked the component’s default first:
const { text, align = 'left', color = 'blue' } = Astro.props;
'blue' is already the default. So instead of touching the shared package (which would mean a version bump affecting both sites) or swapping in a differently-misleading string, I just deleted the prop from all six call sites. Zero visual change, confirmed by grepping the built HTML before and after - same text-accent class on the same span. The only thing that changed is that nobody reading this repo’s code will be told a color that isn’t true.
Small fix, but it’s a good reminder that “harmless” and “fine to ignore” aren’t the same thing. This one would have stayed harmless right up until someone needed to actually change the accent color and went looking for “blue” in the codebase.
Related reading
A two-column hero, and how much "tighten the spacing" actually moved
Measuring the fold instead of arguing about it: 1017.5px of scroll to the first content section became 611px, and the last 40px came from exactly one padding class.
The badge that had nowhere to go
A status pill with shrink-0 and nowrap, a title with no min-w-0, and a flex row with no give anywhere - horizontal scroll at 320px, in two languages.
One CSS rule to unify two card systems, and the zombie server that lied about it
Making shared-package post cards match the homepage's look without forking the component - and two 'failing' pages that were really a leftover process holding a port.