Skip to content

Commit ce5bcc4

Browse files
Prasad BhatPrasad Bhat
Prasad Bhat
authored and
Prasad Bhat
committed
docs: replace React components with HTML+CSS equivalents in Markdown files
1 parent 4a7b6be commit ce5bcc4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2808
-1799
lines changed

‎docs/faq.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,16 @@ View step by step instructions depending on your platform:
3333

3434
<Tabs>
3535
<TabItem value="github" label="GitHub" default>
36-
See our [GitHub App installation guide](./platforms/github-com.mdx) for step-by-step instructions.
36+
See our [GitHub App installation guide](./platforms/github-com.md) for step-by-step instructions.
3737
</TabItem>
3838
<TabItem value="gitlab" label="GitLab">
39-
Follow our [GitLab integration guide](/platforms/gitlab-com.mdx) to get started.
39+
Follow our [GitLab integration guide](/platforms/gitlab-com.md) to get started.
4040
</TabItem>
4141
<TabItem value="bitbucket" label="Bitbucket">
42-
Check out the [Bitbucket installation steps](/platforms/bitbucket-cloud.mdx) for detailed setup.
42+
Check out the [Bitbucket installation steps](/platforms/bitbucket-cloud.md) for detailed setup.
4343
</TabItem>
4444
<TabItem value="azure" label="Azure DevOps">
45-
View our [Azure DevOps setup guide](/platforms/azure-devops.mdx) for complete installation instructions.
45+
View our [Azure DevOps setup guide](/platforms/azure-devops.md) for complete installation instructions.
4646
</TabItem>
4747
</Tabs>
4848

‎docs/getting-started/adding-organizations.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Add organizations
3+
description: Learn how to add new organizations to CodeRabbit
4+
---
5+
6+
To add new organizations to CodeRabbit, follow these steps:
7+
8+
1. Navigate to [coderabbit.ai](https://coderabbit.ai)
9+
2. Click the "Refresh" button next to your organizations list to check for new organizations
10+
3. Find the organization you want to add in the list
11+
4. Click the "Grant" button next to the organization name
12+
13+
![Checking for new organizations](../../static/img/getting-started/check-for-new-orgs.png)
14+
15+
![Granting permission to organization](../../static/img/getting-started/grant-permission.png)
16+
17+
This will grant CodeRabbit access to the selected organization, allowing it to:
18+
19+
- Read organization and team membership
20+
- Read organization projects
21+
- Access user email addresses (read-only)
22+
23+
<div class="note-box">
24+
<div class="note-header">
25+
<img src="/img/icons/icons.png" alt="Note icon" class="note-icon" />
26+
<h5 class="note-title">Note</h5>
27+
</div>
28+
<div class="note-content">
29+
Organizations control which applications are allowed to access their private data. You may need organization admin approval to complete this process.
30+
</div>
31+
</div>
32+
33+
## What's next {#whats-next}
34+
35+
- [Manage your subscription](/getting-started/subscription-management)

‎docs/getting-started/adding-organizations.mdx

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎docs/getting-started/configure-coderabbit.md

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ description:
66
options.
77
---
88

9-
```mdx-code-block
10-
import SchemaViewer from "@site/src/components/SchemaViewer";
11-
import YamlEditor from "/src/components/YamlEditor/YamlEditor";
12-
```
13-
149
CodeRabbit offers various configuration options to tailor the reviews to your
1510
requirements. Configuration can be made using one of the below options, in order
1611
of precedence:
@@ -23,39 +18,47 @@ In this guide, we will cover the configuration using a YAML file. For reference,
2318

2419
## Configure CodeRabbit using a YAML File
2520

26-
:::tip
27-
28-
Move existing UI configuration to a YAML file?
29-
30-
Use the `@coderabbitai configuration` command on any PR to get the current
31-
configuration in a YAML format. You can then copy the configuration to a
32-
`.coderabbit.yaml` file in the root of your repository.
33-
34-
:::
21+
<div class="tip-box">
22+
<div class="tip-header">
23+
<svg class="tip-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
24+
<path d="M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z" fill="currentColor"/>
25+
</svg>
26+
<span class="tip-title">Tip</span>
27+
</div>
28+
<div class="tip-content">
29+
<strong>Move existing UI configuration to a YAML file?</strong><br/><br/>
30+
Use the <code>@coderabbitai configuration</code> command on any PR to get the current configuration in a YAML format. You can then copy the configuration to a <code>.coderabbit.yaml</code> file in the root of your repository.
31+
</div>
32+
</div>
3533

3634
You can add a `.coderabbit.yaml` configuration file to the root of your
3735
repositories. For a complete sample `.coderabbit.yaml` file which you can add to your repository and update as needed, see [Configuration file template](/reference/yaml-template).
3836

39-
Write your configuration file in the below editor to validate:
40-
4137
```mdx-code-block
38+
import YamlEditor from '@site/src/components/YamlEditor/YamlEditor';
39+
4240
<YamlEditor />
4341
```
4442

45-
:::note
46-
47-
`.coderabbit.yaml` configuration file should exist in the feature branch for CodeRabbit review.
48-
49-
:::
43+
<div class="note-box">
44+
<div class="note-header">
45+
<img src="/img/icons/icons.png" alt="Note icon" class="note-icon" />
46+
<h5 class="note-title">Note</h5>
47+
</div>
48+
<div class="note-content">
49+
<code>.coderabbit.yaml</code> configuration file should exist in the feature branch for CodeRabbit review.
50+
</div>
51+
</div>
5052

51-
The configuration file can be used to set the following options:
53+
The configuration file can be used to set various options.
5254

5355
```mdx-code-block
56+
import SchemaViewer from '@site/src/components/SchemaViewer';
57+
5458
<SchemaViewer />
5559
```
5660

57-
Refer:
58-
[CodeRabbit Configuration Schema](https://storage.googleapis.com/coderabbit_public_assets/schema.v2.json).
61+
Refer to: [CodeRabbit Configuration Schema](https://storage.googleapis.com/coderabbit_public_assets/schema.v2.json).
5962

6063
Please note that code reviews commence with new pull requests or incremental
6164
commits to existing pull requests once the CodeRabbit app is installed. Should
@@ -68,12 +71,14 @@ shared configuration feature to share the configuration across multiple reposito
6871

6972
To use shared configuration, you need to:
7073

71-
1. Create a `.coderabbit.yaml` file and host it in a location that is accessible
72-
to from the CodeRabbit instance.
73-
2. Create a `.coderabbit.yaml` file in the root of your repository with the
74-
following content:
74+
1. Create a `.coderabbit.yaml` file and host it in a location that is accessible to from the CodeRabbit instance.
75+
2. Create a `.coderabbit.yaml` file in the root of your repository with the following content:
76+
77+
```mdx-code-block
78+
import DarkCodeBlock from '@site/src/components/DarkCodeBlock';
7579
76-
```yaml
77-
remote_config:
78-
url: "https://your-config-location/.coderabbit.yaml"
80+
<DarkCodeBlock language="yaml">
81+
{`remote_config:
82+
url: "https://your-config-location/.coderabbit.yaml"`}
83+
</DarkCodeBlock>
7984
```

‎docs/getting-started/quickstart.md

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
---
2+
title: Quickstart
3+
sidebar_label: Quickstart
4+
description: See CodeRabbit in action, using a live GitHub repository.
5+
sidebar_position: 1
6+
---
7+
8+
9+
# Quickstart
10+
11+
This tutorial gives you a hands-on demonstration of CodeRabbit, using a real, GitHub-based repository. It guides you through the following tasks:
12+
13+
1. Integrate CodeRabbit into a GitHub-based repository that you own.
14+
2. Observe CodeRabbit perform a code review of a pull request that you initiate.
15+
3. Converse with CodeRabbit about the code review.
16+
4. Prompt CodeRabbit to generate its own improvements to the pull request.
17+
18+
When you complete this tutorial, you'll have seen CodeRabbit's code-review feature in action, and glimpsed a few of its other AI-driven abilities as well.
19+
20+
For a more general overview of CodeRabbit, see [Introduction](/).
21+
22+
<div class="note-box">
23+
<div class="note-header">
24+
<img src="/img/icons/icons.png" alt="Note icon" class="note-icon" />
25+
<h5 class="note-title">Note</h5>
26+
</div>
27+
<div class="note-content">
28+
While this tutorial focuses on GitHub, CodeRabbit also works with GitLab, Azure DevOps, and Bitbucket. For more information, see <a href="/platforms/">Integrate with Git platforms</a>.
29+
</div>
30+
</div>
31+
32+
## Before you begin
33+
34+
Create a new, private repository on GitHub. Name the new repository `coderabbit-test`, and let it have otherwise default GitHub settings.
35+
36+
## Integrate CodeRabbit with your GitHub account
37+
38+
To integrate CodeRabbit with your GitHub account, follow these steps:
39+
40+
1. Visit [the CodeRabbit login page](https://app.coderabbit.ai/login?free-trial).
41+
2. Click **Login with GitHub**.
42+
3. Click **Authorize coderabbitai**.
43+
44+
CodeRabbit takes a moment to set up the integration. After it finishes, the CodeRabbit dashboard appears.
45+
46+
## Add CodeRabbit to your repository
47+
48+
To add CodeRabbit to your test repository, follow these steps:
49+
50+
1. On the CodeRabbit dashboard, click **Add Repositories**.
51+
2. Select the **Only select repositories** radio button.
52+
3. From the **Select repositories** menu, select the `coderabbit-test` repository that you created earlier in this Quickstart.
53+
4. Click **Install & Authorize**.
54+
55+
<div class="note-box">
56+
<div class="note-header">
57+
<img src="/img/icons/icons.png" alt="Note icon" class="note-icon" />
58+
<h5 class="note-title">Note</h5>
59+
</div>
60+
<div class="note-content">
61+
CodeRabbit requests read and write access to your repository in order for its code review, issue management, and pull request generation features to work. CodeRabbit never stores your code. For more information, see <a href="https://trust.coderabbit.ai">the CodeRabbit Trust Center</a>.
62+
</div>
63+
</div>
64+
65+
5. If a CodeRabbit **Complete your signup** dialog appears, then fill it out with the requested information before continuing.
66+
67+
CodeRabbit is now ready to use with your test repository. The next steps demonstrate its core code-review features.
68+
69+
## Let CodeRabbit perform a code review
70+
71+
The following steps initiate a pull request to add a tiny and somewhat flawed Python library to your repository, triggering analysis and review from CodeRabbit.
72+
73+
Use your usual Git workflow to perform the following steps in the `coderabbit-test` repository:
74+
75+
1. Create a branch named `add-utils`.
76+
2. In that new `add-utils` branch, create a new file called `simple_utils.py`, with the following content:
77+
78+
```python
79+
# simple_utils.py - A tiny utility library
80+
81+
def reverse_string(text):
82+
"""Reverses the characters in a string."""
83+
return text[::-1]
84+
85+
def count_words(sentence):
86+
return len(sentence.split())
87+
88+
def celsius_to_fahrenheit(celsius):
89+
return (celsius * 9/5) + 32
90+
```
91+
92+
3. Commit the added file to the `add-utils` branch. Use any text you want for the commit message.
93+
4. Create a pull request that proposes to merge the `add-utils` branch into the `main` branch. Use any text you want for the pull request message.
94+
95+
After a few moments, CodeRabbit responds to the pull request using the `@coderabbitai` GitHub account. It performs the following actions, all of which are visible on the pull request's page on GitHub:
96+
97+
- If you didn't write a pull request summary, then CodeRabbit adds a new summary to the pull request.
98+
- CodeRabbit posts a comment titled **Walkthrough** containing analysis and commentary about the content of the pull request.
99+
- CodeRabbit attaches a detailed code review to the pull request as another comment.
100+
101+
Part of the review resembles the following screenshot:
102+
103+
![An example code review comment](/img/getting-started/quickstart-comment.png)
104+
105+
This shows that CodeRabbit has noticed some flaws with this Python library, including a lack of docstrings and input validation. The review comment identifies these flaws, and suggests how you might improve them.
106+
107+
## Ask CodeRabbit for more information
108+
109+
After CodeRabbit reviews a pull request, you can converse with it about its review. You can also give CodeRabbit special commands to request it to perform specific functions, such as generating appropriate code changes for you.
110+
111+
1. Post the following as a new GitHub comment attached to the pull request:
112+
113+
<div class="custom-chat-bubble">
114+
<div class="chat-content">@coderabbitai Why do all of these functions need docstrings? Isn't it obvious enough what they do?</div>
115+
<button class="copy-button" onclick="navigator.clipboard.writeText('@coderabbitai Why do all of these functions need docstrings? Isn\'t it obvious enough what they do?')" title="Copy text">
116+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
117+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
118+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
119+
</svg>
120+
</button>
121+
</div>
122+
123+
After a few moments, CodeRabbit posts its reply, explaining its motivations for its recommendation. The reply might resemble the following:
124+
125+
<div class="custom-blockquote">
126+
<p>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.</p>
127+
128+
<p>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.</p>
129+
130+
<p>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?</p>
131+
</div>
132+
133+
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.
134+
2. Post the following as another new comment:
135+
136+
<div class="custom-chat-bubble">
137+
<div class="chat-content">@coderabbitai generate docstrings</div>
138+
<button class="copy-button" onclick="navigator.clipboard.writeText('@coderabbitai generate docstrings')" title="Copy text">
139+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
140+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
141+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
142+
</svg>
143+
</button>
144+
</div>
145+
146+
After a few moments, CodeRabbit does the following:
147+
148+
- CodeRabbit creates a new branch, based on `add-utils`.
149+
- CodeRabbit commits changes to the branch that adds suggested docstrings to `add-utils`.
150+
- CodeRabbit opens a new pull request between the new branch and `add-utils`.
151+
152+
## Clean up
153+
154+
Continue experimenting with CodeRabbit in your test repository for as long as you like. When you're finished, you can delete the repository.
155+
156+
You are now ready to add CodeRabbit to other repositories that you own, and let it review some real pull requests.
157+
158+
## What's next
159+
160+
- [Integrate CodeRabbit](/platforms/) with your repositories on GitHub, GitLab, Azure DevOps, or Bitbucket.
161+
- [Configure CodeRabbit](/getting-started/configure-coderabbit) beyond its default settings.
162+
- [Add custom review instructions](/guides/review-instructions).
163+
- [Get support for CodeRabbit](/getting-started/support).
164+
- [Learn more about how CodeRabbit works](/overview/why-coderabbit).

0 commit comments

Comments
 (0)