Skip to content

fix: Use 'class' instead of 'className' in Astro MDX for proper CSS styling#4

Merged
pyros-projects merged 1 commit intomainfrom
fix/astro-css
Nov 24, 2025
Merged

fix: Use 'class' instead of 'className' in Astro MDX for proper CSS styling#4
pyros-projects merged 1 commit intomainfrom
fix/astro-css

Conversation

@pyros-projects
Copy link
Copy Markdown
Owner

🐛 Bug Fix

Fixes CSS styling issues in the Astro documentation site that worked locally but failed in production builds.


🔍 Problem

The documentation homepage () was using JSX/React syntax (className) instead of standard HTML syntax (class) for CSS class attributes.

Symptoms:

  • ✅ Worked fine in local dev server (npm run dev)
  • ❌ Failed to apply custom styles in production builds (GitHub Pages deployment)
  • Custom CSS classes (.hero-grid, .hero-pill, .aha-card, etc.) were ignored

Root Cause:
Astro's dev server is more permissive with JSX syntax, but production builds require standard HTML attributes. Starlight generates static HTML and expects class, not className.


�� Changes

Modified Files

  • docs-site/src/content/docs/index.mdx - Changed all className to class
  • pyproject.toml - Bumped version to 0.2.2

Specific Replacements

  • className="hero hero-grid"class="hero hero-grid"
  • className="hero-main"class="hero-main"
  • className="hero-copy-kicker"class="hero-copy-kicker"
  • className="hero-title"class="hero-title"
  • className="hero-code"class="hero-code"
  • className="hero-code-footer"class="hero-code-footer"
  • className="hero-subtitle"class="hero-subtitle"
  • className="hero-pill-row"class="hero-pill-row"
  • className="hero-pill"class="hero-pill"
  • className="hero-footnote"class="hero-footnote"
  • className="aha-grid"class="aha-grid"
  • className="aha-card"class="aha-card"

✅ Result

Now the documentation site displays correctly in both local development and production with:

  • 🎨 Custom gradient backgrounds
  • 💊 Styled orange pill badges
  • 🃏 Beautiful card grid layout
  • ✨ All theme colors and spacing from theme.css

�� Testing

Before: Plain unstyled HTML with default Starlight theme
After: Full custom styling with gradients, cards, and branded colors


🎯 Impact

  • Breaking changes: None
  • Scope: Documentation site only (no Python package changes except version bump)
  • Deployment: Ready to merge and deploy

*Small fix, big visual improvement/home/ai/projects/wishful && git diff main...fix/astro-css --stat 🎉

@pyros-projects pyros-projects self-assigned this Nov 24, 2025
@pyros-projects pyros-projects merged commit 4544f71 into main Nov 24, 2025
1 check passed
@pyros-projects pyros-projects deleted the fix/astro-css branch November 24, 2025 19:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant