Add new images and update instructions in signup and add-repo pages

karan925 · karan925 · commit 6ba0441eef84 · 2024-03-11T21:42:26.000-07:00
diff --git a/docs/about/images/CodeRabbitFlow.png b/docs/about/images/CodeRabbitFlow.png
diff --git a/docs/faq/faq.md b/docs/faq/faq.md
@@ -74,13 +74,14 @@ Yes, you can change it under the repository settings.
 
 There are hourly rate limits for each developer per repository:
 
--   Number of files reviewed per hour: 200
--   Number of reviews : 3 back to back reviews followed by 4 reviews/hour
--   Number of conversations: 25 back to back messages followed by 50 messages/hr
-
+- Number of files reviewed per hour: 200
+- Number of reviews : 3 back to back reviews followed by 4 reviews/hour
+- Number of conversations: 25 back to back messages followed by 50 messages/hr
 
 In-trial and open-source plans have lower rate limits than the paid plan. In all cases, we re-allow further reviews/conversations after a brief timeout.
 
-Please note that we're continually innovating and enhancing our application with new capabilities. Stay tuned and follow us for updates as new exciting features are built. We're committed to making your experience with CodeRabbit even better.
+:::note
+We are continually innovating and enhancing our application with new capabilities. Stay tuned and follow us for updates as new exciting features are built. We're committed to making your experience with CodeRabbit even better.
+:::
 
 If you have further questions or need additional information, don't hesitate to reach out to us at [contact@coderabbit.ai](mailto:contact@coderabbit.ai).
diff --git a/docs/get-started/add-repo.md b/docs/get-started/add-repo.md
@@ -28,14 +28,20 @@ To add additional repositories after the sign-up, go to the repositories page wi
 
 Click on the "**Add repositories**" button. Upon clicking, you'll be redirected to GitHub.
 
-![Untitled](./images/add1.png)
+![AddRepo](./images/cr_add_repo_light.png#gh-light-mode-only)
+
+<!-- ![AddRepo](./images/cr_add_repo_light.png#gh-light-mode-only) -->
 
 Upon successful installation, you will be automatically redirected back to the CodeRabbit UI. Here, you can view the list of repositories that CodeRabbit now has access to.
 
-![Untitled](./images/add4.png)
+:::note
+
+For **GitLab** the flow is slightly different. All the repositories display by default and you can toggle and enable the ones where the CodeRabbit app should be installed.
+
+![AddRepo](./images/cr_add_repo_gitlab_light.png#gh-light-mode-only)
 
-Note for GitLab the flow is slightly different. All the repositories display by default and you can toggle and enable the ones where the CodeRabbit app should be installed.
+:::
 
 ### **Need help?**
 
-If you require assistance, our support team is here to help. Simply click on the help icon within the CodeRabbit user interface. For more detailed information, please refer to the "Support" section. Additionally, consider joining the CodeRabbit Discord community to connect with other users and access a wealth of knowledge about using CodeRabbit effectively.
+If you require assistance, our support team is here to help. Simply click on the help icon within the CodeRabbit user interface. For more detailed information, please refer to the "Support" section. Additionally, consider joining the CodeRabbit **Discord** community to connect with other users and access a wealth of knowledge about using CodeRabbit effectively.
diff --git a/docs/get-started/images/cr_add_repo_gitlab_light.png b/docs/get-started/images/cr_add_repo_gitlab_light.png
diff --git a/docs/get-started/images/cr_add_repo_light.png b/docs/get-started/images/cr_add_repo_light.png
diff --git a/docs/get-started/signup.md b/docs/get-started/signup.md
@@ -45,9 +45,11 @@ After selecting the organization, you will be directed to a GitHub repositories
 
 ![Untitled](./images/add3.png)
 
-After you have installed the CodeRabbit app, the reviews will start automatically with the new pull requests or incremental commits to existing pull requests. To trigger reviews on existing pull requests, post @coderabbitai review as a comment on the pull request.
+After you have installed the CodeRabbit app, the reviews will start automatically with the new pull requests or incremental commits to existing pull requests. To trigger reviews on existing pull requests, post "@coderabbitai review" as a comment on the pull request.
 
-Note that the automatic code review behavior can be changed to "On-Demand". To make this change, go to the repository settings in the UI or modify the appropriate setting in the YAML file to disable reviews.
+:::tip
+The automatic code review behavior can be changed to "On-Demand". To make this change, go to the repository settings in the UI or modify the appropriate setting in the YAML file to disable reviews.
+:::
 
 ### **Need help?**
 
diff --git a/docs/guides/coderabbit-commands.md b/docs/guides/coderabbit-commands.md
@@ -4,6 +4,7 @@ description: Efficiently manage your PR reviews with our intuitive commands. Use
 sidebar_label: CodeRabbit Commands
 image: "/preview_meta.jpg"
 ---
+
 <head>
  <meta charSet="utf-8" />
   <meta name="title" content="CodeRabbit Commands" />
@@ -25,26 +26,28 @@ Manage your PR reviews with the following commands:
 
 By default, CodeRabbit automatically reviews all pull requests. Additionally, for each pull request, it will review all incremental commits. However, this behavior can be overridden using the following commands:
 
-- **Pause Reviews**: 
+- **Pause Reviews**:
   - Use `@coderabbitai pause` in a PR comment to halt ongoing reviews.
-  
-- **Resume Reviews**: 
+- **Resume Reviews**:
   - Enter `@coderabbitai resume` in a PR comment to continue paused reviews.
-  
-- **On-Demand Reviews**: 
+- **On-Demand Reviews**:
   - Disable automatic reviews for your repository to switch to on-demand reviews.
-  - Use `@coderabbitai review` in a PR comment. This command will override all review filters that might be set up in the repository settings and will initiate a one-time review.  
-  
-- **Skip Specific PR**: 
+  - Use `@coderabbitai review` in a PR comment. This command will override all review filters that might be set up in the repository settings and will initiate a one-time review.
+- **Skip Specific PR**:
+
   - To exclude a specific PR from review, include `@coderabbitai ignore` in the PR description.
 
 - **Resolve Command**:
+
   - Use `@coderabbitai resolve` to mark all the CodeRabbit review comments as resolved all at once.
 
 - **Help Command**:
   - You can at any time post `@coderabbitai help` in a PR comment to get the list of all valid commands.
 
-**Note:** Ensure you input these commands as PR comments. For direct bot interactions, use review comments on code diffs or files.
+:::note
+Ensure you input these commands as PR comments. For direct bot interactions, enter your input in the review comments of a code diff or file.
+:::
 
 ### Feedback
+
 If you have suggestions for additional commands or improvements, we would love to hear from you! Please submit your feedback to our support team.
diff --git a/docs/guides/customize-coderabbit.md b/docs/guides/customize-coderabbit.md
@@ -32,7 +32,7 @@ specific requirements. Customizations can be made using one of the below options
 
 Customization defined in the YAML file overrides the settings in the UI.
 
-#### 1. Customize CodeRabbit using a YAML File[](https://coderabbit.ai/docs/get-started/customize-coderabbit)
+### 1. Customize CodeRabbit using a YAML File[](https://coderabbit.ai/docs/get-started/customize-coderabbit)
 
 You can add a `.coderabbit.yaml` configuration file to your repositories. Below
 is a sample YAML file that can be used as a starting point and change as needed:
@@ -73,8 +73,10 @@ chat:
   auto_reply: true
 ```
 
-**Note**: `.coderabbit.yaml` file should be placed at the root directory of the
+:::note
+`.coderabbit.yaml` file should be placed at the root directory of the
 repository.
+:::
 
 Yaml settings:
 
@@ -193,10 +195,12 @@ Refer:
 
 </details>
 
-#### 2. Customize CodeRabbit through the UI [](https://coderabbit.ai/docs/get-started#2-customize-coderabbit-through-the-ui-dashboard)
+### 2. Customize CodeRabbit through the UI [](https://coderabbit.ai/docs/get-started#2-customize-coderabbit-through-the-ui-dashboard)
 
 Reviews can also be customized through the UI under repository settings:
 
+---
+
 ### Review Customization[](https://coderabbit.ai/docs/get-started#review-customization)
 
 [](../get-started/images/tailor2.png)
@@ -214,6 +218,8 @@ language is English.
 **Disable High Level Summary:** This allows disabling high level summary added
 with the pull request description.
 
+---
+
 ### Review Filters [](https://coderabbit.ai/docs/get-started#review-filters)
 
 [](../get-started/images/tailor3.png)
diff --git a/docs/guides/prompt-customization.md b/docs/guides/prompt-customization.md
@@ -4,6 +4,7 @@ sidebar_label: Prompt Customization
 description: Accelerate Code Reviews with AI
 image: "/preview_meta.jpg"
 ---
+
 <head>
  <meta charSet="utf-8" />
   <meta name="title" content="CodeRabbit: AI-powered Code Reviews" />
@@ -23,9 +24,7 @@ image: "/preview_meta.jpg"
 
 ### Path based instructions[](https://coderabbit.ai/docs/prompt-customization#path-based-instructions)
 
-This section explains how to add custom code review instructions for the entire project or specific file paths in your project using glob patterns. Developers can provide tailored review guidelines based on the file paths. These instructions are needed only if you want the reviewer to follow specific instructions besides the standard review. 
-
-### Overview[](https://coderabbit.ai/docs/prompt-customization#overview)
+This section explains how to add custom code review instructions for the entire project or specific file paths in your project using glob patterns. Developers can provide tailored review guidelines based on the file paths. These instructions are needed only if you want the reviewer to follow specific instructions besides the standard review.
 
 Adding file path prompts allows developers to specify custom instructions for different parts of the codebase. For example, you may want to enforce style guide by file types or directories.
 
@@ -37,13 +36,15 @@ Adding file path prompts allows developers to specify custom instructions for di
 
 **path:** `tests/**.*`
 
-**instructions:** Review the following unit test code written using the Mocha test library. 
+**instructions:** Review the following unit test code written using the Mocha test library.
 Ensure that:
 The code adheres to best practices associated with Mocha.
 Descriptive test names are used to clearly convey the intent of each test.
 
-### Notes[](https://coderabbit.ai/docs/prompt-customization#best-practices)
+:::note
 
 - Paths accept glob patterns.
 - Instructions generally work well for specific additional instructions. However, they are not that effective if you are instructing AI not to do something.
-- Test the review feedback on pull requests and tailor as necessary. 
+- Test the review feedback on pull requests and tailor as necessary.
+
+:::
diff --git a/docs/integrations/self-hosted-gitlab.md b/docs/integrations/self-hosted-gitlab.md
@@ -28,7 +28,7 @@ To initiate the integration, we require specific information. This is essential
 
 ### **Step 1: Getting Started**
 
-**Visit CodeRabbit:** Land on to our login page https://coderabbit.ai/login and select Self-Hosted GitLab
+**Visit CodeRabbit:** Land on to our [Login](https://coderabbit.ai/login) page and select Self-Hosted GitLab
 
 ![login-page](./images/login-page.png)
 
@@ -46,15 +46,15 @@ If this is the first time you are signing up with your instance, we need an admi
 
 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:
 
-1.  Login to your self-hosted instance. Ensure sure you have admin rights.
-2.  On the left sidebar, select your avatar.
-3.  Select Edit profile.
-4.  On the left sidebar, select Access Tokens.
-5.  Select Add new token.
-6.  Enter a name and expiry date for the token. We need this for the initial setup, so the minimum expiry time is sufficient. 
-7.  If you do not enter an expiry date, the expiry date is automatically set to 365 days later than the current date.
-8.  Make sure, you select the scope: `api`
-9.  Select Create personal access token.
+1. Login to your self-hosted instance. Ensure sure you have admin rights.
+2. On the left sidebar, select your avatar.
+3. Select Edit profile.
+4. On the left sidebar, select Access Tokens.
+5. Select Add new token.
+6. Enter a name and expiry date for the token. We need this for the initial setup, so the minimum expiry time is sufficient.
+7. If you do not enter an expiry date, the expiry date is automatically set to 365 days later than the current date.
+8. Make sure, you select the scope: `api`
+9. Select Create personal access token.
 10. Please note down this token as this will be visible one time only
 
 ![Untitled](./images/admin-access-token.png)
@@ -64,10 +64,10 @@ GitLab offers an option to generate a personal access token for adding a new use
 - Submit the access token.
 - We will handle the setup process for you.
 - On subsequent visits, your setup will be automatically detected, allowing for direct login.
-![Untitled](./images/self-hosted-page.png)
+  ![Untitled](./images/self-hosted-page.png)
 
 ### **Step 5: Whitelist CodeRabbit IP address**
 
-Use this CodeRabbit IP if your instance requires IP whitelisting `35.222.179.152/32` 
+Use this CodeRabbit IP if your instance requires IP whitelisting `35.222.179.152/32`
 
-- Furthermore, please refer to our Get Started Guide to make the most of CodeRabbit [here](../get-started/add-repo.md). 
+- Furthermore, please refer to our Get Started Guide to make the most of CodeRabbit [here](../get-started/add-repo.md).
