Avatar Utilities, Parent-Driven AuthorHandle, and DRY Styles

Summary

Refactored the author avatar system to adopt a parent-driven approach for border color and sizing, consolidated avatar utility classes, and updated usages across article card components for improved modularity and maintainability.

Why Care

This refactor centralizes avatar styling logic, enforces DRY principles, and enables parent components to control avatar appearance, resulting in more maintainable, readable, and consistent UI code. It reduces styling duplication and paves the way for easier future enhancements.

Implementation

Changes Made

  • Added .avatar-bg-attn and size utility classes (.avatar-base, .avatar-lg, .avatar-sm) in site/src/styles/avatars.css for modular avatar border and sizing.
  • Updated AuthorHandle.astro to accept and pass the avatarClass prop directly to the Avatar component, defaulting to new utility classes.
  • Refactored Avatar.astro to merge the parent class, removing default border/background to enable full parent control.
  • Updated usages in PostCard.astro and PostCardFeature.astro to use avatarClass="avatar-bg-attn avatar-base" for consistent border and sizing.
  • Improved and expanded inline documentation for maintainability and clarity.
  • Removed obsolete avatar-bg-attn-action references.
  • Files Changed:
    text 
    src/components/articles/PostCard.astro
src/components/articles/PostCardFeature.astro
src/components/basics/AuthorHandle.astro
src/components/changelog/ChangelogEntry.astro
src/components/starwind/avatar/Avatar.astro
src/layouts/Layout.astro
src/styles/avatars.css
  • 178 insertions, 11 deletions.
  • No new dependencies or configuration changes.

Technical Details

  • Avatar border and sizing logic is now handled via composable utility classes.
  • All parent components can now specify avatar border and size via the avatarClass prop, ensuring single-source-of-truth styling.
  • Removed background color from base avatar class to prevent unwanted color bleed.
  • Inline comments were updated to clarify the new DRY and parent-driven styling pattern.
  • Example usage:
    astro 
    <AuthorHandle
  authors={authors}
  avatarClass="avatar-bg-attn avatar-base"
  ...
/>
  • No performance regressions observed.

Integration Points

  • Integration: All article card components (PostCard, PostCardFeature) now use the new avatar utility classes.
  • Required Updates: Any future components rendering avatars should use the new parent-driven pattern and utility classes.
  • Migration: No breaking changes, but all legacy usages of avatar-bg-attn-action should be updated to the new pattern for consistency.

Documentation

  • Pattern and rationale are documented inline in the relevant .astro and .css files.
  • See also:
    • content/lost-in-public/prompts/workflow/Write-a-Code-Changelog-Entry.md (changelog entry standards)
    • src/styles/avatars.css (utility class definitions)
    • Inline comments in AuthorHandle.astro and Avatar.astro for usage guidance