Skip to content

Conversation

@kylemclaren
Copy link
Collaborator

@kylemclaren kylemclaren commented Dec 29, 2025

Summary

Part 1: Folder consolidation

  • Move PixelBlast.tsx and StarBorder.tsx from src/components/ to src/components/react/

Part 2: Convert presentational components to pure Astro (zero JS)

Instead of wrapping every React component with client:load, convert purely presentational components to native Astro:

Component Before After
Callout React + client:load Pure Astro (0 JS)
Param React + client:load Pure Astro (0 JS)
ParamTable React + client:load Pure Astro (0 JS)
StatusCodes React + client:load Pure Astro (0 JS)
StatusBadge React + client:load Pure Astro (0 JS)
APIBody React wrapper Direct React import (used by parent)
Snippet React wrapper Direct React import (used by parent)

Why this is better:

  • Components without state/effects don't need React hydration
  • Presentational components render as static HTML with zero JavaScript
  • APIBody/Snippet must stay React because they're consumed via Children.forEach by parent components

Test plan

  • Build passes (pnpm build)
  • Verify Callout renders correctly with all types (info, warning, danger, tip)
  • Verify StatusCodes/StatusBadge display correct colors
  • Verify Param/ParamTable render parameter docs correctly
  • Verify APIEndpoint tabs still work (APIBody used inside)

🤖 Generated with Claude Code

- Move PixelBlast.tsx and StarBorder.tsx from src/components/ to src/components/react/
- Add Astro wrappers for all React components that were missing them:
  - APIBody, AnimatedList, Callout, DotPattern, Param, ParamTable,
    Snippet, StatusBadge, StatusCodes
- Update all MDX files to import from Astro wrappers instead of @/components/react
- Update 404.astro and SearchDialog.tsx imports

This ensures consistent component organization:
- All React components live in src/components/react/
- All components used in MDX have Astro wrappers in src/components/

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@github-actions
Copy link

github-actions bot commented Dec 29, 2025

Preview Deployment

Name URL
Preview https://pr-22-superfly-sprites-docs.fly.dev

Commit: 0d0bb11

Instead of wrapping React components with client:load, convert
purely presentational components to native Astro:

- Callout, Param, ParamTable, StatusCodes, StatusBadge → pure Astro
- Delete unnecessary wrappers (AnimatedList, DotPattern, APIBody, Snippet)
- APIBody/Snippet stay as React imports (used by parent React components)

This ships zero JavaScript for static UI components.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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.

2 participants