coderabbit-test repository that you created earlier in this Quickstart.,
+ <>
+ Click Install & Authorize.
+ add-utils branch, create a new file called simple_utils.py, with the following content:
+ +You're right that these functions are quite self-explanatory from their names alone. Docstrings aren't strictly necessary for every function, especially in smaller projects with clear function names. + +While docstrings do provide benefits (IDE tooltips, documentation generation, help for future developers), they can sometimes feel redundant for very straightforward functions. It's ultimately a matter of coding style and project requirements. + +If you prefer to skip docstrings for obvious utility functions in this project, that's perfectly reasonable. Would you like me to adjust my review approach regarding documentation for this repository? ++ +In this case, CodeRabbit is offering to adjust its future behavior when reviewing changes to this repository. Instead, follow the next step to ask CodeRabbit to implement part of its suggestions. + +2. Post the following as another new comment: + +
-
+
## Core features
Core CodeRabbit features include the following:
-- Integrates rapidly with popular Git platforms and workflows.
-- Applies dozens of open-source, industry-standard code analyzers to every commit.
-- Implements code reviews as familiar pull-request comments.
-- Works with contributors through natural-language conversation in comments.
-- Learns and adapts to your team's code style and review preferences.
-- Provides an observability dashboard of code-contribution activity.
-- Practices strong privacy and security, with no retention of analyzed code.
-- Offers free use for public repositories, and flexible pricing for private codebases.
+
,
+ <>Once your administrator has approved the applications, click "Continue",
+ <>You will be redirected to the "Onboarding" page, where you can select the organization you wish to integrate with,
+ <>On the "Azure DevOps User" page, enter your Personal Access Token for Azure DevOps.
+
+ 
,
+ <>To install CodeRabbit on a repository, toggle the switch on the "Repositories" page
+ ]}
+/>
+
+## How it works
+
+For the CodeRabbit app to post reviews on merge requests, it needs to interact with the Azure DevOps API, which requires a Personal Access Token. This token can be generated by creating a Personal Access Token from one of your existing users.
+
+You can create a new user in Azure DevOps and generate a Personal Access Token for that user, following [our recommendations](#recommendations).
+
+## Azure DevOps Personal Access Tokens
+
+To interact with the Azure DevOps API, a **Personal Access Token** is required. This token can be generated by creating a **Personal Access Token** from one of your existing users.
+
+Upon first login to the application (immediately after the onboarding screen), you will need to add the Personal Access Token.
+
+
+
+### Recommendations
+
+
- 
-
-
-The webhook `https://coderabbit.ai/bitbucketHandler` will now be installed for the projects selected.
-
-
-
- 
-
-
-### Troubleshooting
-
-:::note
-
-If you are experiencing issues with the webhook, such as CodeRabbit not being able to access the repository, or not
-reviewing pull requests, you can manually delete the webhook to the repository.
-
-Then refresh the repository page in the CodeRabbit app and you can reinstall the webhook.
-
-If you cannot install the webhook please check that your Bitbucket user has the necessary permissions to install the
-webhook and the API Token is properly configured.
-
-:::
diff --git a/docs/platforms/bitbucket-cloud.mdx b/docs/platforms/bitbucket-cloud.mdx
new file mode 100644
index 00000000..92d69500
--- /dev/null
+++ b/docs/platforms/bitbucket-cloud.mdx
@@ -0,0 +1,148 @@
+---
+title: "Bitbucket Cloud"
+description: "Learn how to integrate CodeRabbit with Bitbucket Cloud."
+sidebar_label: "Bitbucket Cloud"
+sidebar_position: 6
+---
+
+import InfoBox from "../../src/components/InfoBox"
+import ListItems from "../../src/components/ListItems"
+import Note from "../../src/components/Note"
+
+CodeRabbit integrates with Bitbucket Cloud to enhance code review and collaboration by:
+
+
-
+
+
+
+The webhook `https://coderabbit.ai/bitbucketHandler` will now be installed for the projects selected.
+
+
+
+
+
+
+### Troubleshooting
+
+
++**CodeRabbit** is an AI code reviewer designed to ease the challenges of code review, supporting repository maintainers and teams. It reviews your PRs and provides concise summaries, identifies potential issues, and offers insights that might be missed during manual reviews. +## How CodeRabbit Works? -> CodeRabbit integrates with GitHub, automating the code review process from the moment a pull request is created. +
+CodeRabbit integrates with GitHub, automating the code review process from the moment a pull request is created. +It preprocesses the PR content, builds context, leverages Large Language Models for analysis, and then post-processes the AI response before posting the review back to GitHub. This streamlined workflow ensures thorough AI-powered code reviews without manual intervention. @@ -19,6 +28,7 @@ It preprocesses the PR content, builds context, leverages Large Language Models ## Let's Integrate CodeRabbit with GitHub + ### 1. Accessing CodeRabbit Visit the [CodeRabbit login](https://app.coderabbit.ai/login?free-trial) page. You'll see all the authentication options, select "**Login with GitHub**" to proceed. @@ -29,7 +39,9 @@ Visit the [CodeRabbit login](https://app.coderabbit.ai/login?free-trial) page. Y When you choose **Login with GitHub** in step1, you'll be prompted to authorize CodeRabbit. -> This step grants the necessary permissions for CodeRabbit to interact with your repositories and pull requests. +
+This step grants the necessary permissions for CodeRabbit to interact with your repositories and pull requests. + @@ -47,9 +59,9 @@ Here, you can add repositories and configure CodeRabbit config settings for each  -:::tip +
+When a pull request is created targeting the master branch, CodeRabbit automatically initiates its review process. It analyzes the changes and generates a summary and walkthrough of the modifications. The specific feedback and analysis provided by CodeRabbit are determined by the options you've configured in your YAML file. +Let's see a few examples of CodeRabbit's review comments from a specific pull request in one of the projects. @@ -97,7 +109,9 @@ Also, check out the response when asked for what improvements can be done on the In addition to providing reviews and summaries, **CodeRabbit** can also detect configuration issues. -> For example, I accidentally set up both CodeRabbit Pro (The process we've been discussing) and the open-source version (Refer to [different config process](https://github.com/coderabbitai/ai-pr-reviewer?tab=readme-ov-file#install-instructions)) in my repository at the same time. +
+For example, I accidentally set up both CodeRabbit Pro (The process we've been discussing) and the open-source version (Refer to [different config process](https://github.com/coderabbitai/ai-pr-reviewer?tab=readme-ov-file#install-instructions)) in my repository at the same time. +CodeRabbit automatically detects and alerts you about configuration conflicts. @@ -109,8 +123,12 @@ CodeRabbit generates detailed statistics and test plans for each pull request.  -> CodeRabbit also allows you to configure **custom review instructions** based on your organization's needs, in case you want it to follow specific guidelines beyond the standard review, to learn more on [adding custom review instructions](/guides/review-instructions) +
+CodeRabbit also allows you to configure **custom review instructions** based on your organization's needs, in case you want it to follow specific guidelines beyond the standard review, to learn more on [adding custom review instructions](/guides/review-instructions) +Whether you manage a popular repository or are working on a smaller project, whether it's hosted on **GitLab, GitHub, or self-hosted GitHub or GitLab**, CodeRabbit can help streamline your development process. This AI Code Review assistant is designed to save you time by automating code reviews and offering insightful feedback. -> Explore, Experiment, Discover how [CodeRabbit](https://docs.coderabbit.ai/) can streamline your code review process using AI. +
+Explore, Experiment, Discover how [CodeRabbit](https://docs.coderabbit.ai/) can streamline your code review process using AI. +\ No newline at end of file diff --git a/docs/platforms/github-enterprise-server.md b/docs/platforms/github-enterprise-server.md deleted file mode 100644 index 733607cb..00000000 --- a/docs/platforms/github-enterprise-server.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Integrating CodeRabbit with GitHub Enterprise Server -description: Learn how to integrate CodeRabbit with your GitHub Enterprise Server. -sidebar_label: GitHub Enterprise Server -sidebar_position: 3 ---- - -:::info - -This page is for GitHub Enterprise Server (Self-Hosted) users only. -If you're using `github.com`, [log in to CodeRabbit](https://app.coderabbit.ai) -and add your repositories from there - -::: - -This page guides you through the process of integrating your Self-Managed GitHub -with CodeRabbit. - -To initiate the integration, we require specific information. This is essential -for the initial setup of CodeRabbit within your domain. Once this setup is -complete, you can log in directly. - -### **Step 1: Getting Started** - -**Visit CodeRabbit:** Visit our [Login](https://app.coderabbit.ai/login?free-trial) page and -select Self-Hosted GitHub - - - -On this page, enter the URL of your self-managed GitHub instance and click -submit. Once, you submit, we check our database for a record of your -organization and if we find an existing one, we will start the login process. - - - -If the self-managed GitHub instance is not found, you will be required to enter -more details for the onboarding. - -### **Step 2: GitHub OAuth App** - -Navigate to your GitHub Enterprise Server (Self-Hosted) Instance and follow the -steps below to -[create an OAuth App](https://docs.github.com/en/enterprise-server@latest/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app): - -1. Sign in to your GitHub Enterprise account. -2. In the upper-right corner of any page, click your profile photo, then click - **Settings**. -3. In the left sidebar, click **Developer settings** > **OAuth Apps**. -4. Click **New OAuth App**. -5. Set the following fields: - - **Application name**: `CodeRabbit OAuth` - - **Homepage URL**: `https://coderabbit.ai` - - **Application description**: - `OAuth application for signing into CodeRabbit` - - **Authorization callback URL**: `https://app.coderabbit.ai/login` -6. Click **Register application**. - - - -Once the OAuth App has been created, click on **Generate a new client secret** -under the 'Client secrets' section and copy the secret as it will be visible -once only - -Keep the following details handy: - -- Client ID -- Client secret - - - -### **Step 3: GitHub App** - -Navigate to your GitHub Enterprise Server (Self-Hosted) Instance and follow the -steps below to -[create a GitHub App](https://docs.github.com/en/enterprise-server@latest/apps/creating-github-apps/registering-a-github-app/registering-a-github-app): - -1. Sign in to your GitHub Enterprise account. -2. In the upper-right corner of any page, click your profile photo, then click **Settings**. -3. In the left sidebar, click **Developer settings** > **GitHub Apps** -4. Click **New GitHub App**. -5. Set the following fields: - - **GitHub App name**: `CodeRabbit` - - **Description**: `GitHub App for CodeRabbit` - - **Homepage URL**: `https://coderabbit.ai` - - **Callback URL**: `https://app.coderabbit.ai/login` - - **Request user authorization (OAuth) during installation**: `true` - - **Webhook Active**: `true` - - **Webhook URL**: `https://app.coderabbit.ai/githubHandler` - - **Webhook secret**: Use a secure string and keep it handy. - - **Permissions**: - - **Repository permissions**: - - **Actions**: Read-only - - **Checks**: Read-only - - **Contents**: Read and write - - **Commit statuses**: Read and write - - **Discussions**: Read-only - - **Issues**: Read and write - - **Metadata**: Read-only - - **Pull requests**: Read and write - - **Organization permissions**: - - **Members**: Read-only - - **Events**: - - Meta - - Issue comment - - Issues - - Label - - Public - - Pull request - - Pull request review - - Pull request review comment - - Pull request review thread - - Push - - Release - - **Where can this GitHub App be installed?**: Select `Any account` -6. Click **Create GitHub App**. - -Once the GitHub App has been created, click on **Generate a new client secret** -under the 'Client secrets' section and copy the secret as it will be visible -once only. - -Scroll down and click on **Generate a private key** under the 'Private keys' -section and download the PEM file. - -Keep the following details handy: - -- App ID -- Client ID -- Client secret -- Webhook secret -- Private key - - - -We recommend using the CodeRabbit [logo](/img/integrations/logo.png) as the profile picture to ensures easy recognition. - -### **Step 4: CodeRabbit UI Onboarding** - -Submit the details that were accumulated in previous steps: - -- Host URL of your GitHub instance -- OAuth Client ID -- OAuth Client Secret -- GitHub App ID -- GitHub App Client ID -- GitHub App Client Secret -- GitHub App Webhook Secret -- GitHub App Private Key - -Click on Submit and the login process will be initiated. On subsequent visits, -your setup will be automatically detected, allowing for direct login. - -### **Step 5: Install the GitHub App** - -Navigate to the GitHub App that was created from your GitHub Enterprise Server -(self-hosted) instance and click on the **Install App** tab. Then, install the -GitHub App to your organization(s). - -:::warning - -If you performed this step before Step 4, the installation event likely will -have failed, and you will need to re-send the installation event. -Navigate to the **Advanced** tab in the GitHub App and click on the -**Redeliver** button for the failed `installation.created` event. - -::: - -### **Step 6: Whitelist CodeRabbit IP address** - -Use this CodeRabbit IP if your instance requires IP whitelisting -`35.222.179.152/32` and `34.170.211.100/32`. - -VPN tunneling is available as an add-on package. Please reach out to us at -[support@coderabbit.ai](mailto:support@coderabbit.ai) if you are interested. - -### **FAQ** - -#### Who should create the OAuth App and GitHub App? - -The OAuth App and GitHub App should be created by a user with administrative -privileges on the GitHub Enterprise Server instance. This user will be responsible for managing the integration with CodeRabbit. - -#### I see an error when trying to log in to CodeRabbit. What should I do? - -If you encounter an error during the login process, please ensure that: - -- The OAuth App and GitHub App are correctly configured with the right URLs and permissions. -- The browser local storage and cookies related to CodeRabbit are cleared. - -If the issue persists, contact our support team. diff --git a/docs/platforms/github-enterprise-server.mdx b/docs/platforms/github-enterprise-server.mdx new file mode 100644 index 00000000..b8e5be99 --- /dev/null +++ b/docs/platforms/github-enterprise-server.mdx @@ -0,0 +1,187 @@ +--- +title: Integrating CodeRabbit with GitHub Enterprise Server +description: Learn how to integrate CodeRabbit with GitHub Enterprise Server. +sidebar_label: GitHub Enterprise Server +sidebar_position: 3 +--- + +import InfoBox from "../../src/components/InfoBox" +import ListItems from "../../src/components/ListItems" +import Note from "../../src/components/Note" + +
CodeRabbit OAuth,
+ <>Homepage URL: https://coderabbit.ai,
+ <>Application description: OAuth application for signing into CodeRabbit,
+ <>Authorization callback URL: https://app.coderabbit.ai/login
+ ]}
+ />,
+ <>Click Register application
+ ]}
+/>
+
+
+
+Once the OAuth App has been created, click on **Generate a new client secret** under the 'Client secrets' section and copy the secret as it will be visible once only.
+
+Keep the following details handy:
+
+CodeRabbit,
+ <>Description: GitHub App for CodeRabbit,
+ <>Homepage URL: https://coderabbit.ai,
+ <>Callback URL: https://app.coderabbit.ai/login,
+ <>Request user authorization (OAuth) during installation: true,
+ <>Webhook Active: true,
+ <>Webhook URL: https://app.coderabbit.ai/githubHandler,
+ <>Webhook secret: Use a secure string and keep it handy,
+ <>Permissions:
+ Any account
+ ]}
+ />,
+ <>Click Create GitHub App
+ ]}
+/>
+
+Once the GitHub App has been created, click on **Generate a new client secret** under the 'Client secrets' section and copy the secret as it will be visible once only.
+
+Scroll down and click on **Generate a private key** under the 'Private keys' section and download the PEM file.
+
+Keep the following details handy:
+
+api, read_api, read_user,
+ <>Click Create Personal Access Token,
+ <>Note down the token as it will only be displayed once
+ ]}
+/>
api,
+ <>Ensure Developer Access is provided
+ ]}
+/>
---
@@ -119,9 +152,14 @@ You can confirm the correct user is being selected by verifying the user ID show
### Installing CodeRabbit into your GitLab Repositories
-1. Go to the [Repositories page](https://app.coderabbit.ai/settings/repositories) in the CodeRabbit app.
-2. Select the checkbox next to the repositories where you want to install CodeRabbit. To install it on all repositories at once, select the checkbox at the top.
-3. Select **Install Repositories**.
+api read_user email openid,
+ <>Callback URL: https://app.coderabbit.ai/login
+ ]}
+/>
+
+#### **Generating Personal Access token**
+
+GitLab offers an option to generate a personal access token for adding a new user and setting up the application in the self-managed instance. To generate the token, please follow the process outlined below:
+
+api read_api read_user,
+ <>Select Create personal access token,
+ <>Please note down this token as this will be visible one time only
+ ]}
+/>
+
+
+
+### **Step 4: Paste the details and click submit**
+
+Code - Full,
+ <>Work Items - Read, write, and manage,
+ <>Build - Read
+]} />
Consult official CodeRabbitAI documentation for a detailed [guide](https://docs.coderabbit.ai/platforms/azure-devops#generating-a-personal-access-token) on creating personal access tokens.
## Add the necessary webhooks to each project
-1. **Navigate to project's Service Hooks Page**: Go to the service hooks configuration page in the desired Azure DevOps project.
-
-2. **Add the following webhooks:**
-
- 1. Pull request created
- 2. Pull request updated
- 3. Pull request commented on
-
-3. **Add Webhook URL**: Enter the URL pointing to the CodeRabbit service, followed by `/azure_webhooks` (e.g., `http://127.0.0.1:8080/azure_webhooks`) for each webhook.
+/azure_webhooks (e.g., http://127.0.0.1:8080/azure_webhooks) for each webhook.
+]} />
## Prepare an `.env` file
Create an `.env` file with the following content:
-```bash
-# if using OpenAI
+CODERABBIT_API_KEY from CodeRabbit UI {"->"} Organizations Settings {"->"} API Keys.,
+ <>YAML_CONFIG is an optional configuration file that can be used to customize CodeRabbit's behavior at the deployment level. It takes the same format as the CodeRabbit YAML configuration file. It requires the entire YAML file to be in an escaped string format, for example, YAML_CONFIG="key1: value1\nkey2: value2". You can use Escape YAML to generate the escaped string.
+]} />
-:::
+/bitbucket_server_webhooks (e.g., http://127.0.0.1:8080/bitbucket_server_webhooks).
+]} />
## Prepare a `.env` file
Create a `.env` file with the following content:
-```bash
-# if using OpenAI
+CODERABBIT_API_KEY from CodeRabbit UI {"->"} Organizations Settings {"->"} API Keys.,
+ <>YAML_CONFIG is an optional configuration file that can be used to customize CodeRabbit's behavior at the deployment level. It takes the same format as the CodeRabbit YAML configuration file. It requires the entire YAML file to be in an escaped string format, for example, YAML_CONFIG="key1: value1\nkey2: value2". You can use Escape YAML to generate the escaped string.
+]} />
-:::
+/gitlab_webhooks (e.g., http://127.0.0.1:8080/gitlab_webhooks).,
+ <>Generate and Save Secret Token: Generate a secret token, add it to the webhook, and store it securely. This will be needed for the .env file as GITLAB_WEBHOOK_SECRET (you can use a single secret token for all projects).,
+ <>Select triggers:
+ CODERABBIT_API_KEY from CodeRabbit UI {"->"} Organizations Settings {"->"} API Keys.,
+ <>YAML_CONFIG is an optional configuration file that can be used to customize CodeRabbit's behavior at the deployment level. It takes the same format as the CodeRabbit YAML configuration file. It requires the entire YAML file to be in an escaped string format, for example, YAML_CONFIG="key1: value1\nkey2: value2". You can use Escape YAML to generate the escaped string.
+]} />
-:::
+
+ {children}
+
+)
+
+export default BlockQuote
\ No newline at end of file
diff --git a/src/components/BlockQuote/index.ts b/src/components/BlockQuote/index.ts
new file mode 100644
index 00000000..ecadbbc2
--- /dev/null
+++ b/src/components/BlockQuote/index.ts
@@ -0,0 +1 @@
+export { default } from "./BlockQuote"
\ No newline at end of file
diff --git a/src/components/ChatBubble/ChatBubble.module.css b/src/components/ChatBubble/ChatBubble.module.css
new file mode 100644
index 00000000..4842d276
--- /dev/null
+++ b/src/components/ChatBubble/ChatBubble.module.css
@@ -0,0 +1,77 @@
+.chatBubble {
+ background: var(--imf-text-button-color-bg);
+ color: var(--imf-text-color);
+ border-radius: 6px;
+ padding: 1em 1.2em;
+ margin: 1em 0;
+ font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace;
+ font-size: 0.98em;
+ white-space: pre-wrap;
+ word-break: break-word;
+ position: relative;
+}
+
+.content {
+ padding-right: 2.5rem;
+}
+
+.copyButton {
+ position: absolute;
+ top: 0.75rem;
+ right: 0.75rem;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ border-radius: 4px;
+ color: var(--imf-text-color);
+ cursor: pointer;
+ padding: 0.5rem;
+ opacity: 0.7;
+ transition: opacity 0.2s ease, background 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.copyButton:hover {
+ opacity: 1;
+ background: rgba(255, 255, 255, 0.2);
+}
+
+.copyButton:active {
+ transform: scale(0.95);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .chatBubble {
+ padding: 0.8rem 1rem;
+ font-size: 0.95rem;
+ }
+
+ .content {
+ padding-right: 2.2rem;
+ }
+
+ .copyButton {
+ top: 0.6rem;
+ right: 0.6rem;
+ padding: 0.4rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .chatBubble {
+ padding: 0.7rem 0.8rem;
+ font-size: 0.9rem;
+ }
+
+ .content {
+ padding-right: 2rem;
+ }
+
+ .copyButton {
+ top: 0.5rem;
+ right: 0.5rem;
+ padding: 0.3rem;
+ }
+}
diff --git a/src/components/ChatBubble/ChatBubble.tsx b/src/components/ChatBubble/ChatBubble.tsx
new file mode 100644
index 00000000..823c3445
--- /dev/null
+++ b/src/components/ChatBubble/ChatBubble.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react"
+import styles from "./ChatBubble.module.css"
+
+export default function ChatBubble({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = async () => {
+ try {
+ const textContent = typeof children === 'string'
+ ? children
+ : (children as any)?.props?.children || children?.toString() || '';
+ await navigator.clipboard.writeText(textContent);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy text: ', err);
+ }
+ };
+
+ return (
+
+
+ )
+}
diff --git a/src/components/ChatBubble/index.ts b/src/components/ChatBubble/index.ts
new file mode 100644
index 00000000..919031d1
--- /dev/null
+++ b/src/components/ChatBubble/index.ts
@@ -0,0 +1 @@
+export { default } from "./ChatBubble"
diff --git a/src/components/DarkCodeBlock/DarkCodeBlock.module.css b/src/components/DarkCodeBlock/DarkCodeBlock.module.css
new file mode 100644
index 00000000..bc4118ad
--- /dev/null
+++ b/src/components/DarkCodeBlock/DarkCodeBlock.module.css
@@ -0,0 +1,144 @@
+.codeBlock {
+ margin: 1rem 0;
+ border-radius: 8px;
+ overflow: hidden;
+ background-color: #1a1a1a;
+ border: 1px solid #333;
+ font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
+ position: relative;
+}
+
+/* Add border for dark theme */
+[data-theme="dark"] .codeBlock {
+ border: 1px solid #444;
+}
+
+.codeHeader {
+ background-color: #1a1a1a;
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid #333;
+ color: #888;
+ font-size: 0.875rem;
+ font-weight: 400;
+ font-style: italic;
+}
+
+.codeTitle {
+ color: #888;
+ font-style: italic;
+}
+
+.codeContainer {
+ position: relative;
+ background-color: #1a1a1a;
+}
+
+.codeContent {
+ margin: 0;
+ padding: 1rem;
+ padding-bottom: 2rem;
+ background-color: transparent;
+ color: #e6e6e6;
+ font-size: 0.875rem;
+ line-height: 1.6;
+ overflow-x: auto;
+ white-space: pre;
+}
+
+.shortCode {
+ padding-bottom: 0.5rem;
+}
+
+.codeLine {
+ display: block;
+ min-height: 1.6rem;
+}
+
+.copyButtonContainer {
+ background-color: #1a1a1a;
+ padding: 0.75rem 1rem;
+ display: flex;
+ justify-content: flex-end;
+ cursor: pointer;
+}
+
+.copyButton {
+ background-color: #333;
+ color: #fff;
+ border: 1px solid #333;
+ border-radius: 4px;
+ padding: 0.5rem 0.75rem;
+ font-size: 0.75rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ transition: all 0.2s ease;
+ font-family: inherit;
+ width: 100%;
+ justify-content: flex-end;
+}
+
+.copyButton:hover {
+ background-color: #333;
+ color: #fff;
+ border-color: #666;
+}
+
+.copyButton:active {
+ transform: scale(0.98);
+}
+
+.copyButton svg {
+ width: 14px;
+ height: 14px;
+}
+
+.codeContent :global(.keyword) {
+ color: #4fc1ff;
+ font-weight: 400;
+}
+
+.codeContent :global(.comment) {
+ color: #6a9955;
+ font-style: italic;
+}
+
+.codeContent :global(.string) {
+ color: #ff6b9d;
+}
+
+.codeContent :global(.function) {
+ color: #ffab70;
+ font-weight: 400;
+}
+
+.codeContent :global(.number) {
+ color: #53FFE8;
+}
+
+.codeContent :global(.header) {
+ color: #e6e6e6;
+ font-style: italic;
+}
+
+@media (max-width: 768px) {
+ .codeContent {
+ font-size: 0.8rem;
+ padding: 0.75rem;
+ padding-bottom: 3rem;
+ }
+
+ .shortCode {
+ padding-bottom: 0.3rem;
+ }
+
+ .copyButton {
+ font-size: 0.7rem;
+ padding: 0.4rem 0.6rem;
+ }
+
+ .copyButtonContainer {
+ padding: 0.5rem 0.75rem;
+ }
+}
diff --git a/src/components/DarkCodeBlock/DarkCodeBlock.tsx b/src/components/DarkCodeBlock/DarkCodeBlock.tsx
new file mode 100644
index 00000000..0428c180
--- /dev/null
+++ b/src/components/DarkCodeBlock/DarkCodeBlock.tsx
@@ -0,0 +1,186 @@
+import React, { useState, useMemo } from 'react';
+import styles from './DarkCodeBlock.module.css';
+
+interface DarkCodeBlockProps {
+ children: string;
+ language?: string;
+ title?: string;
+}
+
+const DarkCodeBlock: React.FC{children}
+
+
+
+
+ );
+ }
+
+ return (
+
+ {line}
+
+ );
+ });
+ };
+
+ return highlightCode(children, language);
+ }, [children, language, KEYWORDS]);
+
+ const lineCount = children.trim().split('\n').length;
+ const isShortCode = lineCount <= 3;
+
+ return (
+
+ {title && (
+
+ );
+};
+
+export default DarkCodeBlock;
diff --git a/src/components/DarkCodeBlock/index.ts b/src/components/DarkCodeBlock/index.ts
new file mode 100644
index 00000000..ee453e50
--- /dev/null
+++ b/src/components/DarkCodeBlock/index.ts
@@ -0,0 +1 @@
+export { default } from './DarkCodeBlock';
\ No newline at end of file
diff --git a/src/components/InfoBox/InfoBox.module.css b/src/components/InfoBox/InfoBox.module.css
new file mode 100644
index 00000000..4a64d05f
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.module.css
@@ -0,0 +1,36 @@
+.infoBox {
+ border: 2px solid var(--imf-color-border-orange);
+ border-radius: 12px;
+ background: var(--imf-color-background-orange-light);
+ padding: 0.7em;
+}
+
+.infoBox p {
+ margin: 0rem;
+}
+
+.infoBox a {
+ color: var(--ifm-color-primary);
+ text-decoration: none;
+}
+
+.infoBox a:hover {
+ text-decoration: underline;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .infoBox {
+ padding: 0.6em;
+ border-radius: 10px;
+ font-size: 0.95rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .infoBox {
+ padding: 0.5em;
+ border-radius: 8px;
+ font-size: 0.9rem;
+ }
+}
diff --git a/src/components/InfoBox/InfoBox.tsx b/src/components/InfoBox/InfoBox.tsx
new file mode 100644
index 00000000..988d193f
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import styles from "./InfoBox.module.css"
+
+interface InfoBoxProps {
+ children: React.ReactNode
+ className?: string
+}
+
+export const InfoBox: React.FC
+ {title}
+
+ )}
+
+
+
+
+ {highlightedCode}
+
+
+
+
+
+ {children}
+ )
+}
+
+export default InfoBox
diff --git a/src/components/InfoBox/index.ts b/src/components/InfoBox/index.ts
new file mode 100644
index 00000000..7e71df22
--- /dev/null
+++ b/src/components/InfoBox/index.ts
@@ -0,0 +1 @@
+export { default, InfoBox } from "./InfoBox"
diff --git a/src/components/ListItems/ListItems.module.css b/src/components/ListItems/ListItems.module.css
new file mode 100644
index 00000000..f724eb21
--- /dev/null
+++ b/src/components/ListItems/ListItems.module.css
@@ -0,0 +1,160 @@
+.crFeatureCard {
+ background: var(--imf-list-card-background-color);
+ border-radius: 8px;
+ padding: 1.3rem;
+ margin: 0.8rem 0;
+}
+
+.crNestedList {
+ margin: 0.5rem 0;
+ padding: 0;
+ background: none;
+ border: none;
+}
+
+.crNestedList .crFeatureList li {
+ padding-left: 2rem;
+}
+
+.crNestedList .crFeatureList li:before {
+ left: 0.5rem;
+}
+
+/* Second level nesting - square bullets */
+.crNestedLevel2 li:before {
+ border-radius: 0 !important;
+ width: 0.3em !important;
+ height: 0.3em !important;
+ top: 0.65em !important;
+ background: #333 !important;
+}
+
+.crNestedList .crNestedLevel2 li {
+ padding-left: 2.5rem;
+}
+
+.crNestedList .crNestedLevel2 li:before {
+ left: 0.7rem;
+}
+
+.crFeatureList {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.crOrderedList {
+ list-style: decimal;
+ margin: 0;
+ padding-left: 1.5em;
+}
+
+.crFeatureList li {
+ position: relative;
+ padding-left: 1.7em;
+ margin-bottom: 1em;
+ font-size: 1.08rem;
+ line-height: 1.6;
+}
+
+.crFeatureList li:last-child {
+ margin-bottom: 0;
+}
+
+.crOrderedList li {
+ margin-bottom: 1em;
+ font-size: 1.08rem;
+ line-height: 1.6;
+ padding-left: 0.3em;
+}
+
+.crOrderedList li:last-child {
+ margin-bottom: 0;
+}
+
+.crFeatureList li:before {
+ content: "";
+ position: absolute;
+ left: 0.3em;
+ top: 0.6em;
+ width: 0.4em;
+ height: 0.4em;
+ background: #333;
+ border-radius: 50%;
+ display: inline-block;
+}
+
+.crFeatureList li a {
+ color: var(--ifm-color-primary, orange);
+ text-decoration: none;
+ font-weight: 500;
+}
+
+.crOrderedList li a {
+ color: var(--ifm-color-primary, orange);
+ text-decoration: none;
+ font-weight: 500;
+}
+
+.crFeatureList li a:hover {
+ text-decoration: underline;
+}
+
+.crOrderedList li a:hover {
+ text-decoration: underline;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .crFeatureCard {
+ padding: 1rem;
+ margin: 0.6rem 0;
+ }
+
+ .crFeatureList li {
+ padding-left: 1.5em;
+ margin-bottom: 0.8em;
+ font-size: 1rem;
+ }
+
+ .crOrderedList li {
+ margin-bottom: 0.8em;
+ font-size: 1rem;
+ padding-left: 0.2em;
+ }
+
+ .crNestedList .crFeatureList li {
+ padding-left: 1.8rem;
+ }
+
+ .crNestedList .crNestedLevel2 li {
+ padding-left: 2.2rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .crFeatureCard {
+ padding: 0.8rem;
+ margin: 0.5rem 0;
+ }
+
+ .crFeatureList li {
+ padding-left: 1.3em;
+ margin-bottom: 0.7em;
+ font-size: 0.95rem;
+ }
+
+ .crOrderedList li {
+ margin-bottom: 0.7em;
+ font-size: 0.95rem;
+ padding-left: 0.15em;
+ }
+
+ .crNestedList .crFeatureList li {
+ padding-left: 1.6rem;
+ }
+
+ .crNestedList .crNestedLevel2 li {
+ padding-left: 2rem;
+ }
+}
diff --git a/src/components/ListItems/ListItems.tsx b/src/components/ListItems/ListItems.tsx
new file mode 100644
index 00000000..67231379
--- /dev/null
+++ b/src/components/ListItems/ListItems.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import styles from "./ListItems.module.css"
+
+interface ListItemsProps {
+ items: React.ReactNode[]
+ className?: string
+ orderedList?: boolean
+ nested?: boolean
+ nestingLevel?: number
+}
+
+export const ListItems: React.FC
+
+ {items.map((item, index) => (
+ {item}
+ ))}
+
+
+ )
+}
+
+export default ListItems
diff --git a/src/components/ListItems/index.ts b/src/components/ListItems/index.ts
new file mode 100644
index 00000000..e4d4326c
--- /dev/null
+++ b/src/components/ListItems/index.ts
@@ -0,0 +1 @@
+export { default, ListItems } from "./ListItems"
diff --git a/src/components/Note/Note.module.css b/src/components/Note/Note.module.css
new file mode 100644
index 00000000..87c13129
--- /dev/null
+++ b/src/components/Note/Note.module.css
@@ -0,0 +1,115 @@
+.note {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ background: var(--imf-note-background-color);
+ border: 2px solid var(--imf-note-border-color);
+ border-radius: 8px;
+ padding: 1rem 1.2rem;
+ margin: 1.2rem 0;
+ font-size: 1rem;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.3em;
+}
+
+.icon {
+ width: 1.5em;
+ height: 1.5em;
+ margin-right: 0.5em;
+ flex-shrink: 0;
+}
+
+.title {
+ font-weight: 600;
+ color: var(--imf-note-text-color);
+}
+
+.text {
+ margin-top: 0.2em;
+}
+.note.text p {
+ margin: 0px;
+}
+.note a {
+ color: var(--imf-note-text-color);
+}
+.note p {
+ margin: 0rem;
+}
+
+/* Remove white background from ListItems inside Note - more aggressive approach */
+.note :global(.crFeatureCard) {
+ background: transparent !important;
+ background-color: transparent !important;
+ border: none !important;
+ padding: 0.5rem 0 !important;
+ margin: 0.5rem 0 !important;
+ box-shadow: none !important;
+}
+
+/* Also target nested ListItems */
+.note :global(.crNestedList) {
+ background: transparent !important;
+ background-color: transparent !important;
+ border: none !important;
+}
+
+/* Force override CSS variables for ListItems inside Note */
+.note {
+ --imf-list-card-background-color: transparent;
+ --ifm-background-color-secondary: transparent;
+}
+
+/* Target any div containing ListItems inside Note */
+.note div:has(:global(.crFeatureCard)) {
+ background: transparent !important;
+ background-color: transparent !important;
+ border: none !important;
+}
+
+/* Alternative approach - target all divs inside note that contain lists */
+.note > div {
+ background: inherit !important;
+ background-color: inherit !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .note {
+ padding: 0.8rem 1rem;
+ margin: 1rem 0;
+ font-size: 0.95rem;
+ }
+
+ .icon {
+ width: 1.3em;
+ height: 1.3em;
+ margin-right: 0.4em;
+ }
+
+ .title {
+ font-size: 0.95rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .note {
+ padding: 0.7rem 0.8rem;
+ margin: 0.8rem 0;
+ font-size: 0.9rem;
+ }
+
+ .icon {
+ width: 1.2em;
+ height: 1.2em;
+ margin-right: 0.3em;
+ }
+
+ .title {
+ font-size: 0.9rem;
+ }
+}
diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
new file mode 100644
index 00000000..10ce1247
--- /dev/null
+++ b/src/components/Note/Note.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import styles from "./Note.module.css"
+
+interface NoteProps {
+ children: React.ReactNode
+}
+
+const Note: React.FC
+
+)
+
+export default Note
diff --git a/src/components/Note/index.ts b/src/components/Note/index.ts
new file mode 100644
index 00000000..dd6db3eb
--- /dev/null
+++ b/src/components/Note/index.ts
@@ -0,0 +1 @@
+export { default } from "./Note"
diff --git a/src/components/OrderedSteps.tsx b/src/components/OrderedSteps.tsx
new file mode 100644
index 00000000..505ed5c8
--- /dev/null
+++ b/src/components/OrderedSteps.tsx
@@ -0,0 +1,11 @@
+import React from "react"
+
+export default function OrderedSteps({ children }) {
+ return (
+
+ 
+ Note
+
+
+ Note
+ {children}
+ -
+ {React.Children.map(children, (child, idx) => (
+
- {child} + ))} +
+ 
+ {name}
+
+ )
+}
+
+export default PlatformCard
diff --git a/src/components/PlatformCard/index.ts b/src/components/PlatformCard/index.ts
new file mode 100644
index 00000000..ca2c1258
--- /dev/null
+++ b/src/components/PlatformCard/index.ts
@@ -0,0 +1 @@
+export { PlatformCard, default } from "./PlatformCard"
diff --git a/src/components/PlatformGrid/PlatformGrid.module.css b/src/components/PlatformGrid/PlatformGrid.module.css
new file mode 100644
index 00000000..dcef77a3
--- /dev/null
+++ b/src/components/PlatformGrid/PlatformGrid.module.css
@@ -0,0 +1,6 @@
+.platformGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ margin: 1.5rem 0;
+}
diff --git a/src/components/PlatformGrid/PlatformGrid.tsx b/src/components/PlatformGrid/PlatformGrid.tsx
new file mode 100644
index 00000000..706d006a
--- /dev/null
+++ b/src/components/PlatformGrid/PlatformGrid.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+import styles from "./PlatformGrid.module.css"
+
+interface PlatformGridProps {
+ children: React.ReactNode
+ className?: string
+}
+
+export const PlatformGrid: React.FC
+ {children}
+
+ )
+}
+
+export default PlatformGrid
diff --git a/src/components/PlatformGrid/index.ts b/src/components/PlatformGrid/index.ts
new file mode 100644
index 00000000..843327a1
--- /dev/null
+++ b/src/components/PlatformGrid/index.ts
@@ -0,0 +1 @@
+export { PlatformGrid, default } from "./PlatformGrid"
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
new file mode 100644
index 00000000..4ca57887
--- /dev/null
+++ b/src/components/Table/Table.module.css
@@ -0,0 +1,209 @@
+.tableContainer {
+ margin: 1.5rem 0;
+}
+
+.platformSection {
+ margin-bottom: 2rem;
+}
+
+.platformSection:last-child {
+ margin-bottom: 0;
+}
+
+.platformTitle {
+ margin-bottom: 1rem;
+ color: var(--ifm-heading-color);
+ font-size: 1.5rem;
+ font-weight: 700;
+}
+
+.titleSection {
+ background: #E8E8E8 !important;
+ border-bottom: none !important;
+ border-right: none !important;
+ border-left: none !important;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+}
+
+.titleWithText {
+ padding: 1rem 1.5rem !important;
+ height: auto;
+}
+
+.titleEmpty {
+ padding: 0 !important;
+ height: 10px !important;
+ line-height: 10px !important;
+}
+
+.titleText {
+ color: var(--ifm-heading-color);
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+.titleRow {
+ background: #E8E8E8;
+}
+
+.table {
+ display: table;
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ background: transparent;
+ border: none;
+ table-layout: fixed;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.table th {
+ background: #ffffff;
+ color: var(--ifm-heading-color);
+ padding: 1rem 1.5rem;
+ text-align: left;
+ font-weight: 600;
+ font-size: 1rem;
+ border-bottom: 1px solid var(--ifm-color-emphasis-300);
+ border-right: 1px solid var(--ifm-color-emphasis-300);
+ border-top: none;
+ box-sizing: border-box;
+ margin: 0;
+}
+
+.table th:last-child {
+ border-right: none;
+}
+
+.table th:first-child {
+ border-left: none;
+}
+
+.table thead {
+ background: #ffffff;
+}
+
+.table td {
+ padding: 1rem 1.5rem;
+ border-bottom: 1px solid var(--ifm-color-emphasis-300);
+ border-right: 1px solid var(--ifm-color-emphasis-300);
+ color: var(--ifm-color-content);
+ vertical-align: middle;
+ background: #ffffff;
+ box-sizing: border-box;
+}
+
+.table td:last-child {
+ border-right: none;
+}
+
+.table td:first-child {
+ border-left: none;
+}
+
+.table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+.table tbody tr:hover {
+ background: var(--ifm-color-emphasis-50);
+}
+
+.supportedStatus {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.supportIcon {
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+}
+
+.supportText {
+ color: #5A9B8A;
+ font-weight: 500;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .table th,
+ .table td {
+ padding: 0.75rem 1rem;
+ font-size: 0.9rem;
+ }
+
+ .platformTitle {
+ font-size: 1.25rem;
+ }
+
+ .supportedStatus {
+ gap: 0.375rem;
+ }
+
+ .supportIcon {
+ width: 18px;
+ height: 18px;
+ }
+
+ .supportText {
+ font-size: 0.9rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .table th,
+ .table td {
+ padding: 0.5rem 0.75rem;
+ font-size: 0.85rem;
+ }
+
+ .platformTitle {
+ font-size: 1.125rem;
+ }
+
+ .supportIcon {
+ width: 16px;
+ height: 16px;
+ }
+
+ .supportText {
+ font-size: 0.85rem;
+ }
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .table {
+ background: var(--ifm-background-color-secondary);
+ border-color: var(--ifm-color-emphasis-300);
+}
+
+[data-theme="dark"] .table th {
+ background: var(--ifm-background-color-secondary);
+ border: none !important;
+}
+
+[data-theme="dark"] .table td {
+ border: none !important;
+ background: var(--ifm-background-color-secondary);
+}
+
+[data-theme="dark"] .titleSection {
+ background: var(--ifm-color-emphasis-200) !important;
+ border-bottom-color: var(--ifm-color-emphasis-300) !important;
+}
+
+[data-theme="dark"] .titleRow {
+ background: var(--ifm-color-emphasis-200);
+}
+
+[data-theme="dark"] .table tbody tr:hover {
+ background: var(--ifm-color-emphasis-100);
+}
+
+[data-theme="dark"] .supportText {
+ color: #7CB3A3;
+}
\ No newline at end of file
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
new file mode 100644
index 00000000..7238fe3d
--- /dev/null
+++ b/src/components/Table/Table.tsx
@@ -0,0 +1,89 @@
+import React from "react"
+import styles from "./Table.module.css"
+
+interface SupportedStatusProps {
+ text: string
+ icon?: string
+}
+
+const SupportedStatus: React.FC
+ {icon && 
}
+ {text}
+
+ )
+}
+
+interface TableColumn {
+ key: string
+ label: string
+}
+
+interface TableRow {
+ [key: string]: React.ReactNode
+}
+
+interface PlatformSection {
+ title: string
+ rows: TableRow[]
+}
+
+interface TableProps {
+ columns: TableColumn[]
+ sections: PlatformSection[]
+ className?: string
+}
+
+export const Table: React.FC
+ {sections.map((section, sectionIndex) => (
+
+ )
+}
+
+export default Table
\ No newline at end of file
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
new file mode 100644
index 00000000..f26095d5
--- /dev/null
+++ b/src/components/Table/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Table"
+export { Table } from "./Table"
\ No newline at end of file
diff --git a/src/components/Tip/Tip.module.css b/src/components/Tip/Tip.module.css
new file mode 100644
index 00000000..f162e5ce
--- /dev/null
+++ b/src/components/Tip/Tip.module.css
@@ -0,0 +1,84 @@
+.tip {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ background: #FFFCFB;
+ border: 2px solid #FFCEB6;
+ border-radius: 12px;
+ padding: 1rem 1.2rem;
+ margin: 1.2rem 0;
+ font-size: 1rem;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.3em;
+}
+
+.icon {
+ width: 1.5em;
+ height: 1.5em;
+ margin-right: 0.5em;
+ flex-shrink: 0;
+ color: #FF570A;
+}
+
+.title {
+ font-weight: 600;
+ color: #FF570A;
+ font-size: 1rem;
+}
+
+.content {
+ margin-top: 0.2em;
+ color: var(--ifm-color-content);
+}
+
+.tip p {
+ margin: 0;
+ line-height: 1.6;
+}
+
+.tip p:not(:last-child) {
+ margin-bottom: 1rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .tip {
+ padding: 0.8rem 1rem;
+ margin: 1rem 0;
+ font-size: 0.95rem;
+ border-radius: 10px;
+ }
+
+ .icon {
+ width: 1.3em;
+ height: 1.3em;
+ margin-right: 0.4em;
+ }
+
+ .title {
+ font-size: 0.95rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .tip {
+ padding: 0.7rem 0.8rem;
+ margin: 0.8rem 0;
+ font-size: 0.9rem;
+ border-radius: 8px;
+ }
+
+ .icon {
+ width: 1.2em;
+ height: 1.2em;
+ margin-right: 0.3em;
+ }
+
+ .title {
+ font-size: 0.9rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Tip/Tip.tsx b/src/components/Tip/Tip.tsx
new file mode 100644
index 00000000..c9935925
--- /dev/null
+++ b/src/components/Tip/Tip.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+import styles from "./Tip.module.css"
+
+interface TipProps {
+ children: React.ReactNode
+}
+
+const Tip: React.FC
+
+
+
+
+ ))}
+ | + {section.title && {section.title}} + | +
| + {column.label} + | + ))} +
|---|
|
+ {column.key === 'support' && typeof row[column.key] === 'string' && row[column.key] === 'Supported' ? (
+ |
+ ))}
+
+
+)
+
+export default Tip
\ No newline at end of file
diff --git a/src/components/Tip/index.ts b/src/components/Tip/index.ts
new file mode 100644
index 00000000..78c619e8
--- /dev/null
+++ b/src/components/Tip/index.ts
@@ -0,0 +1 @@
+export { default } from "./Tip"
\ No newline at end of file
diff --git a/src/components/Warning/Warning.module.css b/src/components/Warning/Warning.module.css
new file mode 100644
index 00000000..f49f80c7
--- /dev/null
+++ b/src/components/Warning/Warning.module.css
@@ -0,0 +1,119 @@
+.warning {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ background: #FFFEFB;
+ border: 2px solid #f1c232;
+ border-radius: 8px;
+ padding: 1rem 1.2rem;
+ margin: 1.2rem 0;
+ font-size: 1rem;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.3em;
+}
+
+.icon {
+ width: 1em;
+ height: 1em;
+ margin-right: 0.5em;
+ flex-shrink: 0;
+}
+
+.title {
+ font-weight: 600;
+ color: #B38705;
+}
+
+.text {
+ margin-top: 0.2em;
+ color: #333;
+}
+
+.warning .text p {
+ margin: 0px;
+}
+
+.warning a {
+ color: #B38705;
+}
+
+.warning p {
+ margin: 0rem;
+}
+
+/* Remove white background from ListItems inside Warning - more aggressive approach */
+.warning :global(.crFeatureCard) {
+ background: transparent !important;
+ background-color: transparent !important;
+ border: none !important;
+ padding: 0.5rem 0 !important;
+ margin: 0.5rem 0 !important;
+ box-shadow: none !important;
+}
+
+/* Also target nested ListItems */
+.warning :global(.crNestedList) {
+ background: transparent !important;
+ background-color: transparent !important;
+ border: none !important;
+}
+
+/* Force override CSS variables for ListItems inside Warning */
+.warning {
+ --imf-list-card-background-color: transparent;
+ --ifm-background-color-secondary: transparent;
+}
+
+/* Target any div containing ListItems inside Warning */
+.warning div:has(:global(.crFeatureCard)) {
+ background: transparent !important;
+ background-color: transparent !important;
+ border: none !important;
+}
+
+/* Alternative approach - target all divs inside warning that contain lists */
+.warning > div {
+ background: inherit !important;
+ background-color: inherit !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .warning {
+ padding: 0.8rem 1rem;
+ margin: 1rem 0;
+ font-size: 0.95rem;
+ }
+
+ .icon {
+ width: 1.3em;
+ height: 1.3em;
+ margin-right: 0.4em;
+ }
+
+ .title {
+ font-size: 0.95rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .warning {
+ padding: 0.7rem 0.8rem;
+ margin: 0.8rem 0;
+ font-size: 0.9rem;
+ }
+
+ .icon {
+ width: 1.2em;
+ height: 1.2em;
+ margin-right: 0.3em;
+ }
+
+ .title {
+ font-size: 0.9rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Warning/Warning.tsx b/src/components/Warning/Warning.tsx
new file mode 100644
index 00000000..318ddba1
--- /dev/null
+++ b/src/components/Warning/Warning.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import styles from "./Warning.module.css"
+
+interface WarningProps {
+ children: React.ReactNode
+}
+
+const Warning: React.FC
+
+ Tip
+
+ {children}
+
+
+)
+
+export default Warning
\ No newline at end of file
diff --git a/src/components/Warning/index.ts b/src/components/Warning/index.ts
new file mode 100644
index 00000000..07e3da26
--- /dev/null
+++ b/src/components/Warning/index.ts
@@ -0,0 +1 @@
+export { default as Warning } from "./Warning"
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index 7365089e..27d4e5b3 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -41,6 +41,16 @@
--ifm-background-color-primary: #f6f6f1;
--ifm-background-color-secondary: #e8e8e8;
--ifm-breadcrumb-item-background-active: #ffe9e2;
+ --imf-list-card-background-color: #ffffff;
+ --imf-list-bullets-color: #25bab1;
+ --imf-color-background-orange-light: #fffcfb;
+ --imf-color-border-orange: #ffceb6;
+ --imf-note-border-color: #25bab1;
+ --imf-note-background-color: #f1fffe;
+ --imf-note-text-color: #208682;
+ --imf-text-color-bg: #e8e8e8;
+ --imf-text-color: #171717;
+ --imf-text-button-color-bg: #e8e8e8;
}
[data-theme="dark"] {
@@ -55,6 +65,15 @@
--ifm-background-color-primary: #171717;
--ifm-background-color-secondary: #232323;
--ifm-breadcrumb-item-background-active: #3f322e;
+ --imf-list-card-background-color: #232323;
+ --imf-list-bullets-color: #208682;
+ --imf-color-background-orange-light: #232323;
+ --imf-color-border-orange: #232323;
+ --imf-note-border-color: #208682;
+ --imf-note-background-color: #252828;
+ --imf-text-color-bg: #232323;
+ --imf-text-color: #f5f5f5;
+ --imf-text-button-color-bg: #232323;
}
#__docusaurus {
@@ -73,27 +92,6 @@ a[docid="docs"] > svg {
display: none;
}
-/* Adjustments for mobile view */
-@media (max-width: 768px) {
- /* Reduce the logo size for smaller screens */
- .navbar__logo img {
- height: 32px;
- align-items: center;
- }
-
- /* Reduce the padding around the logo for smaller screens */
- .navbar__logo {
- padding: 2px; /* Adjust the padding for smaller screens */
- }
-}
-
-/* Center the Discord link within its parent */
-.navbar__items.navbar__items--right {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
[data-theme="light"] img[src$="#gh-dark-mode-only"],
[data-theme="dark"] img[src$="#gh-light-mode-only"] {
display: none;
@@ -129,7 +127,14 @@ a[docid="docs"] > svg {
display: none;
}
-/* Adjustments for mobile view */
+/* Center the Discord link within its parent */
+.navbar__items.navbar__items--right {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* Consolidated mobile view adjustments */
@media (max-width: 768px) {
/* Reduce the logo size for smaller screens */
.navbar__logo img {
@@ -139,15 +144,13 @@ a[docid="docs"] > svg {
/* Reduce the padding around the logo for smaller screens */
.navbar__logo {
- padding: 2px; /* Adjust the padding for smaller screens */
+ padding: 2px;
}
-}
-/* Center the Discord link within its parent */
-.navbar__items.navbar__items--right {
- display: flex;
- justify-content: center;
- align-items: center;
+ /* Content padding for mobile */
+ .markdown {
+ padding-left: 1rem;
+ }
}
/* Light mode Discord icon */
@@ -304,6 +307,17 @@ a[docid="docs"] > svg {
.pagination-nav {
display: none;
}
+.language-text {
+ background-color: var(--imf-text-color-bg) !important;
+}
+.language-text .token-line {
+ color: var(--imf-text-color) !important;
+}
+.language-text [class*="buttonGroup"] button {
+ background-color: var(--imf-text-color-bg) !important;
+ color: var(--imf-text-color) !important;
+ border-radius: 4px;
+}
/* ===== MARKDOWN STYLES ===== */
.theme-doc-markdown.markdown {
line-height: 1.8rem;
@@ -335,3 +349,19 @@ a[docid="docs"] > svg {
cursor: default;
background-color: var(--ifm-breadcrumb-item-background-active);
}
+
+/* Add left spacing to main content */
+.markdown {
+ padding-left: 1.5rem;
+}
+
+/* Align numbered lists with other content */
+.markdown ol {
+ padding-left: 1.2rem;
+ margin-left: 0;
+}
+
+.markdown ol > li {
+ margin-left: 0;
+ padding-left: 0.5rem;
+}
diff --git a/static/img/Icons/Icons.png b/static/img/Icons/Icons.png
new file mode 100644
index 00000000..4fd5b868
Binary files /dev/null and b/static/img/Icons/Icons.png differ
diff --git a/static/img/Icons/Tip.png b/static/img/Icons/Tip.png
new file mode 100644
index 00000000..8cfb10cb
Binary files /dev/null and b/static/img/Icons/Tip.png differ
diff --git a/static/img/Icons/Vector.png b/static/img/Icons/Vector.png
new file mode 100644
index 00000000..cec316fe
Binary files /dev/null and b/static/img/Icons/Vector.png differ
diff --git a/static/img/Icons/Warning.png b/static/img/Icons/Warning.png
new file mode 100644
index 00000000..73aecee6
Binary files /dev/null and b/static/img/Icons/Warning.png differ
diff --git a/static/img/overview/Azure.png b/static/img/overview/Azure.png
new file mode 100644
index 00000000..6e8b02ee
Binary files /dev/null and b/static/img/overview/Azure.png differ
diff --git a/static/img/overview/Bitbucket.png b/static/img/overview/Bitbucket.png
new file mode 100644
index 00000000..0f349913
Binary files /dev/null and b/static/img/overview/Bitbucket.png differ
diff --git a/static/img/overview/Github.png b/static/img/overview/Github.png
new file mode 100644
index 00000000..cfe4be2e
Binary files /dev/null and b/static/img/overview/Github.png differ
diff --git a/static/img/overview/Gitlab.png b/static/img/overview/Gitlab.png
new file mode 100644
index 00000000..9ed9a1a8
Binary files /dev/null and b/static/img/overview/Gitlab.png differ
diff --git a/static/img/overview/Jira.png b/static/img/overview/Jira.png
new file mode 100644
index 00000000..abb1c8b1
Binary files /dev/null and b/static/img/overview/Jira.png differ
diff --git a/static/img/overview/Linear.png b/static/img/overview/Linear.png
new file mode 100644
index 00000000..8960789c
Binary files /dev/null and b/static/img/overview/Linear.png differ
+ 
+ Warning
+
+
+ Warning
+ {children}
+