Skip to content

fix: convert img style prop from string to JSX object in overview doc#11

Merged
LiteSun merged 1 commit intomainfrom
fix/overview-style-prop
Mar 31, 2026
Merged

fix: convert img style prop from string to JSX object in overview doc#11
LiteSun merged 1 commit intomainfrom
fix/overview-style-prop

Conversation

@LiteSun
Copy link
Copy Markdown
Contributor

@LiteSun LiteSun commented Mar 31, 2026

Summary

  • The <img> tag in docs/introduction/overview.md used an HTML-style string for the style prop (style="..."), which is invalid in JSX/React
  • React requires style to be a JavaScript object with camelCased properties
  • This caused Docusaurus static site generation (SSG) to fail for the /aisix/overview path with the error: The 'style' prop expects a mapping from style properties to values, not a string

Change

- <img ... style="width:100%; max-width:800px; margin: 20px auto; display: block;" />
+ <img ... style={{width:'100%', maxWidth:'800px', margin:'20px auto', display:'block'}} />

Test plan

  • Run pnpm build in the docs site — the /aisix/overview SSG error should be gone

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

  • Documentation
    • Updated code examples in the overview documentation to use proper React/JSX-compatible syntax conventions.

React requires the style prop to be a JavaScript object, not a string.
The string style caused Docusaurus SSG to fail with:
"The style prop expects a mapping from style properties to values, not a string."

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7d4d47ed-50df-4659-be35-d21e5da38cbf

📥 Commits

Reviewing files that changed from the base of the PR and between ba9dcc2 and ae039b8.

📒 Files selected for processing (1)
  • docs/introduction/overview.md

📝 Walkthrough

Walkthrough

Updated architecture diagram's style attribute from CSS string format to React JSX object format with camelCased CSS property names (maxWidth, margin) to ensure proper JSX rendering compatibility.

Changes

Cohort / File(s) Summary
Documentation Styling
docs/introduction/overview.md
Converted HTML style attribute from string notation to React JSX object literal with camelCased CSS properties for compatibility.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

  • moonming

Poem

🐰 A style update hops into place,
From strings to objects, a cleaner space,
CamelCase CSS makes JSX bright,
The diagram renders just right!

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately and concisely describes the main change: converting an img style prop from HTML string format to JSX object format in the overview documentation.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/overview-style-prop

Comment @coderabbitai help to get the list of available commands and usage tips.

@LiteSun LiteSun requested a review from membphis March 31, 2026 08:37
@LiteSun LiteSun merged commit 944fccf into main Mar 31, 2026
10 checks passed
@LiteSun LiteSun deleted the fix/overview-style-prop branch March 31, 2026 08:40
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