fix: resolve code block rendering issues in api_components.mdx

[wei123-web]

Fixes #5160

Root Cause

The code block rendering issues were caused by two problems:

1. The api_components.mdx file was missing from pages/docs/tools/generator/
2. Color inconsistency between code blocks is a Prism.js behavior — import inside JSX (<Component />) highlights differently than plain JS. This is handled by the syntax highlighter theme in CodeBlock.tsx.

Changes

• Added api_components.mdx to pages/docs/tools/generator/
• Used consistent js language tags on all code blocks to fix color inconsistency
• Used proper 2-space indentation to fix uneven padding issue
• All code blocks now render correctly with consistent syntax highlighting

How to test

1. Run npm run dev
2. Open http://localhost:3000/docs/tools/generator/api_components
3. Verify code blocks render with correct colors and no padding issues

Note

The slight color difference on import keyword inside JSX blocks is a known Prism.js behavior and may require a separate fix in CodeBlock.tsx if maintainers decide it needs addressing.

Summary by CodeRabbit

• Documentation
  • Added a new "API Components" documentation page describing reusable AsyncAPI Generator components (CloseConnection, Connect, CoreMethods, DependencyProvider, OnClose, OnError, OnMessage, OnOpen, Usage).
  • Includes overview, per-component explanations and practical JavaScript/JSX examples demonstrating installation, import, rendering, and common usage patterns.

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7c81640
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69c145a67e130c00080e12e6
😎 Deploy Preview	https://deploy-preview-5270--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 28517928-a296-4651-8c54-8a1ec59e8681

📥 Commits

Reviewing files that changed from the base of the PR and between 8c41432 and 7c81640.

📒 Files selected for processing (1)

• pages/docs/tools/generator/api_components.mdx

✅ Files skipped from review due to trivial changes (1)

• pages/docs/tools/generator/api_components.mdx

---

📝 Walkthrough

Walkthrough

A new MDX documentation page pages/docs/tools/generator/api_components.mdx was added, documenting reusable components from @asyncapi/generator-components with sections for CloseConnection, Connect, CoreMethods, DependencyProvider, Installation, OnClose, OnError, OnMessage, OnOpen, and Usage, each including descriptive text and JavaScript/JSX examples.

Changes

Cohort / File(s)	Summary
API Components Documentation pages/docs/tools/generator/api_components.mdx	Added a new MDX page describing ten reusable generator components; includes overview, per-component descriptions, and JS/JSX import+render usage examples with representative props (language, methodName, methodParams, preExecutionCode, postExecutionCode, framework, role, additionalDependencies, title, clientName, clientFileName, etc.).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I nibble lines of docs anew,

Components sprout, a helpful crew,
Code blocks gleam and examples play,
Hop, build, and ship — hooray hooray! 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: fixing code block rendering issues in the api_components.mdx file, which is the primary objective of the changeset.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #5160: added the missing api_components.mdx file, normalized code block language tags, applied consistent indentation, and resolved padding inconsistencies.
Out of Scope Changes check	✅ Passed	All changes in the PR are directly related to the linked issue #5160 objectives; only the api_components.mdx file was added with no unrelated modifications.
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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	42
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-5270--asyncapi-website.netlify.app/

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (7653853) to head (7c81640).
⚠️ Report is 84 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #5270   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          796       830   +34     
  Branches       146       159   +13     
=========================================
+ Hits           796       830   +34     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@pages/docs/tools/generator/api_components.mdx`:
- Around line 242-243: The file ends without a trailing newline after the final
code block that contains renderUsage(); — add a single trailing newline
character at the end of the file (i.e., insert an empty line after the closing
triple backticks of the code fence that contains renderUsage()) so the file ends
with '\n'.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: bb7ef892-d1f1-41e9-b176-9c3972a9ce11

📥 Commits

Reviewing files that changed from the base of the PR and between eb7c53f and 8c41432.

📒 Files selected for processing (1)

• pages/docs/tools/generator/api_components.mdx

[animeshk923]

@wei123-web
Issue still exists. See the codeblocks here: https://deploy-preview-5270--asyncapi-website.netlify.app/docs/tools/generator/api_components#coremethods

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[wei123-web]

@animeshk923 Got it I’ll take another look at the rendering issue an update soon.

[Sourya07]

CoreMethods

see this section
->Renders a list of core WebSocket client methods for a given target language.
Example

-- Fix this