Update get-started pages

[Sachindu-Nethmin]

Purpose

Enhance the "Quick Start" documentation by providing a clear, interactive, and theme-aware experience that aligns with modern WSO2 documentation standards and follows the Microsoft Style Guide for clarity and simplicity.

Goals

• Introduce a tabbed "Source View" and "Design View" for each integration pattern.
• Ensure that diagrams and screenshots automatically switch between light and dark themes based on the user's preference.
• Modernize the architecture diagrams by replacing raw Mermaid code with high-quality themed SVGs.
• Set the code implementation as the primary (default) view to cater to developer needs first.

Approach

• Docusaurus Integration: Used <Tabs>, <TabItem>, and <ThemedImage> components to manage the interactive view.
• Theme Support: Organized light/dark PNG screenshots and SVG architecture diagrams in the static assets directory and referenced them using useBaseUrl.
• Layout Choice: Reordered the tabs across all 6 Quick Start guides so that "Source View" appears first, followed by "Design View."
• Content Style: Refined the headers and instructions to be more concise and action-oriented, following the Microsoft Style Guide.

Release note

Enhanced all Quick Start guides with an interactive tabbed interface (Source View/Design View) and theme-aware diagrams (Light/Dark mode support).

Documentation

N/A - This PR itself contains updates to the product documentation.

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? Yes
• Ran FindSecurityBugs plugin and verified report? N/A (Markdown content only)
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? Yes

Samples

All code samples in the "Source View" tabs have been verified and reflect the latest Ballerina syntax for API, Automation, AI Agent, Data Service, Event, and File integrations.

Test environment

• Tested on Docusaurus (Local)
• OS: macOS
• Browser Compatibility: Verified on Chrome and Firefox (Light and Dark modes)

Learning

Utilized Docusaurus theme-switching capabilities and Microsoft Style Guide principles to improve documentation navigation and readability.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0dc65ee5-2e89-462e-9b75-df9e73de9de5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

You can get early access to new features in CodeRabbit.

Enable the early_access setting to enable early access features such as new models, tools, and more.