Skip to content

Commit f8aa7f3

Browse files
Prasad BhatPrasad Bhat
Prasad Bhat
authored and
Prasad Bhat
committed
docs: added reusable components with Introduction Page (#438)
2 parents b3103bd + 24e6ad7 commit f8aa7f3

29 files changed

+508
-76
lines changed

‎docs/getting-started/quickstart.md renamed to ‎docs/getting-started/quickstart.mdx

Lines changed: 81 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,37 @@ description: See CodeRabbit in action, using a live GitHub repository.
55
sidebar_position: 1
66
---
77

8+
import ListItems from "../../src/components/ListItems"
9+
import InfoBox from "../../src/components/InfoBox"
10+
import Note from "../../src/components/Note"
11+
import CodeBlock from "@theme/CodeBlock"
12+
import ChatBubble from "../../src/components/ChatBubble"
13+
814
# Quickstart
915

1016
This tutorial gives you a hands-on demonstration of CodeRabbit, using a real, GitHub-based repository. It guides you through the following tasks:
1117

12-
1. Integrate CodeRabbit into a GitHub-based repository that you own.
13-
1. Observe CodeRabbit perform a code review of a pull request that you initiate.
14-
1. Converse with CodeRabbit about the code review.
15-
1. Prompt CodeRabbit to generate its own improvements to the pull request.
18+
<ListItems
19+
orderedList
20+
items={[
21+
"Integrate CodeRabbit into a GitHub-based repository that you own.",
22+
"Observe CodeRabbit perform a code review of a pull request that you initiate.",
23+
"Converse with CodeRabbit about the code review.",
24+
"Prompt CodeRabbit to generate its own improvements to the pull request.",
25+
]}
26+
/>
1627

1728
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.
1829

19-
For a more general overview of CodeRabbit, see [Introduction](/).
30+
<InfoBox>
31+
For a more general overview of CodeRabbit, see <a href="/">Introduction</a>.
32+
</InfoBox>
2033

21-
:::note
22-
While this tutorial focuses on GitHub, CodeRabbit also works with GitLab, Azure DevOps, and Bitbucket. For more information, see [Integrate with Git platforms](/platforms/).
23-
:::
34+
<Note>
35+
While this tutorial focuses on GitHub, CodeRabbit also works with GitLab,
36+
Azure DevOps, and Bitbucket. For more information, see{" "}
37+
<a href="/platforms/">Integrate with Git platforms</a>.
38+
</Note>
2439

2540
## Before you begin
2641

@@ -30,9 +45,24 @@ Create a new, private repository on GitHub. Name the new repository `coderabbit-
3045

3146
To integrate CodeRabbit with your GitHub account, follow these steps:
3247

33-
1. Visit [the CodeRabbit login page](https://app.coderabbit.ai/login?free-trial).
34-
1. Click **Login with GitHub**.
35-
1. Click **Authorize coderabbitai**.
48+
<ListItems
49+
orderedList
50+
items={[
51+
<>
52+
Visit{" "}
53+
<a href="https://app.coderabbit.ai/login?free-trial">
54+
the CodeRabbit login page
55+
</a>
56+
.
57+
</>,
58+
<>
59+
Click <strong>Login with GitHub</strong>.
60+
</>,
61+
<>
62+
Click <strong>Authorize coderabbitai</strong>.
63+
</>,
64+
]}
65+
/>
3666

3767
CodeRabbit takes a moment to set up the integration. After it finishes, the CodeRabbit dashboard appears.
3868

@@ -57,33 +87,42 @@ The following steps initiate a pull request to add a tiny and somewhat flawed Py
5787

5888
Use your usual Git workflow to perform the following steps in the `coderabbit-test` repository:
5989

60-
1. Create a branch named `add-utils`.
61-
62-
1. In that new `add-utils` branch, create a new file called `simple_utils.py`, with the following content:
63-
64-
```python
65-
# simple_utils.py - A tiny utility library
66-
67-
def reverse_string(text):
68-
"""Reverses the characters in a string."""
69-
return text[::-1]
70-
71-
def count_words(sentence):
72-
return len(sentence.split())
90+
<ListItems
91+
orderedList
92+
items={[
93+
"Create a branch named `add-utils`.",
94+
<>
95+
In that new <code>add-utils</code> branch, create a new file called <code>simple_utils.py</code>, with the following content:
96+
<CodeBlock language="python">{`
97+
# simple_utils.py - A tiny utility library
98+
99+
def reverse_string(text):
100+
"""Reverses the characters in a string."""
101+
return text[::-1]
102+
103+
def count_words(sentence):
104+
return len(sentence.split())
105+
106+
def celsius_to_fahrenheit(celsius):
107+
return (celsius \* 9/5) + 32
108+
`}</CodeBlock>
109+
</>,
110+
"Commit the added file to the `add-utils`branch. Use any text you want for the commit message.",
111+
"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.",
112+
]}
113+
/>
73114

74-
def celsius_to_fahrenheit(celsius):
75-
return (celsius * 9/5) + 32
76-
```
77-
78-
1. Commit the added file to the `add-utils` branch. Use any text you want for the commit message.
115+
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:
79116

80-
1. 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.
117+
<ListItems
118+
items={[
119+
"If you didn't write a pull request summary, then CodeRabbit adds a new summary to the pull request.",
120+
"CodeRabbit posts a comment titled **Walkthrough** containing analysis and commentary about the content of the pull request.",
121+
"CodeRabbit attaches a detailed code review to the pull request as another comment.",
81122

82-
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:
123+
]}
83124

84-
- If you didn't write a pull request summary, then CodeRabbit adds a new summary to the pull request.
85-
- CodeRabbit posts a comment titled **Walkthrough** containing analysis and commentary about the content of the pull request.
86-
- CodeRabbit attaches a detailed code review to the pull request as another comment.
125+
/>
87126

88127
Part of the review resembles the following screenshot:
89128

@@ -103,13 +142,15 @@ After CodeRabbit reviews a pull request, you can converse with it about its revi
103142

104143
After a few moments, CodeRabbit posts its reply, explaining its motivations for its recommendation. The reply might resemble the following:
105144

106-
> 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.
107-
>
108-
> 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.
109-
>
110-
> 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?
145+
<ChatBubble>
146+
{`> 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.
147+
>
148+
> 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.
149+
>
150+
> 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?`}
151+
</ChatBubble>
111152

112-
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.
153+
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.
113154

114155
1. Post the following as another new comment:
115156

‎docs/overview/introduction.md renamed to ‎docs/overview/introduction.mdx

Lines changed: 91 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ description:
99
slug: "/"
1010
---
1111

12+
import ListItems from "../../src/components/ListItems"
13+
import InfoBox from "../../src/components/InfoBox"
14+
import PlatformGrid from "../../src/components/PlatformGrid"
15+
import PlatformCard from "../../src/components/PlatformCard"
16+
1217
# Introduction
1318

1419
This page provides a conceptual introduction to CodeRabbit. For a hands-on tutorial, see [Quickstart](/getting-started/quickstart/).
@@ -18,21 +23,32 @@ This page provides a conceptual introduction to CodeRabbit. For a hands-on tutor
1823
Developers can interact directly with the CodeRabbit bot within their existing Git platform's pull request interface to add context, ask questions, or even have the bot generate code. Over time, CodeRabbit learns from user input and improves its suggestions.
1924

2025
<div class="video-container">
21-
<iframe src="https://www.youtube.com/embed/3SyUOSebG7E?si=i0oT9RAnH0PW81lY" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
26+
<iframe
27+
src="https://www.youtube.com/embed/3SyUOSebG7E?si=i0oT9RAnH0PW81lY"
28+
title="YouTube video player"
29+
frameBorder="0"
30+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
31+
referrerPolicy="strict-origin-when-cross-origin"
32+
allowFullScreen
33+
></iframe>
2234
</div>
2335

2436
## Core features
2537

2638
Core CodeRabbit features include the following:
2739

28-
- Integrates rapidly with popular Git platforms and workflows.
29-
- Applies dozens of open-source, industry-standard code analyzers to every commit.
30-
- Implements code reviews as familiar pull-request comments.
31-
- Works with contributors through natural-language conversation in comments.
32-
- Learns and adapts to your team's code style and review preferences.
33-
- Provides an observability dashboard of code-contribution activity.
34-
- Practices strong privacy and security, with no retention of analyzed code.
35-
- Offers free use for public repositories, and flexible pricing for private codebases.
40+
<ListItems
41+
items={[
42+
"Integrates rapidly with popular Git platforms and workflows.",
43+
"Applies dozens of open-source, industry-standard code analyzers to every commit.",
44+
"Implements code reviews as familiar pull-request comments.",
45+
"Works with contributors through natural-language conversation in comments.",
46+
"Learns and adapts to your team's code style and review preferences.",
47+
"Provides an observability dashboard of code-contribution activity.",
48+
"Practices strong privacy and security, with no retention of analyzed code.",
49+
"Offers free use for public repositories, and flexible pricing for private codebases.",
50+
]}
51+
/>
3652

3753
## Seamless workflow integration
3854

@@ -58,52 +74,93 @@ No matter how you tune and customize CodeRabbit, its default settings make it us
5874

5975
CodeRabbit integrates in just a few clicks with many popular Git platforms:
6076

61-
- GitHub, GitHub Enterprise Cloud, GitHub Enterprise Server,
62-
- GitLab, GitLab Self-Managed
63-
- Azure DevOps
64-
- Bitbucket Cloud
65-
66-
For more information, see [Supported Git Platforms](/platforms/).
77+
<PlatformGrid>
78+
<PlatformCard
79+
imageSrc="/img/overview/Github.png"
80+
name="GitHub, including GitHub Enterprise Server"
81+
/>
82+
<PlatformCard
83+
imageSrc="/img/overview/Gitlab.png"
84+
name="GitLab, including self-managed GitLab"
85+
/>
86+
<PlatformCard imageSrc="/img/overview/Bitbucket.png" name="Bitbucket Cloud" />
87+
<PlatformCard imageSrc="/img/overview/Azure.png" name="Azure DevOps" />
88+
</PlatformGrid>
89+
<InfoBox>
90+
For more information, see <a href="/platforms/">Supported Git Platforms</a>.
91+
</InfoBox>
6792

6893
### Issue-management integration
6994

7095
You can integrate CodeRabbit with issue-management platforms. This lets you ask CodeRabbit to create tickets during code reviews, or chat with CodeRabbit about your code from within issue comments. Compatible platforms include the following:
7196

72-
- GitHub Issues
73-
- GitLab Issues
74-
- Jira
75-
- Linear
97+
<PlatformGrid>
98+
<PlatformCard imageSrc="img/overview/Github.png" name="GitHub Issues" />
99+
<PlatformCard imageSrc="img/overview/Gitlab.png" name="GitLab Issues" />
100+
<PlatformCard imageSrc="img/overview/Jira.png" name="Jira" />
101+
<PlatformCard imageSrc="img/overview/Linear.png" name="Linear" />
102+
</PlatformGrid>
76103

77-
For more information, see [Issue Creation](/guides/issue-creation) and [Issue Chat](/guides/issue-chat).
104+
<InfoBox>
105+
For more information, see <a href="/guides/issue-creation">Issue Creation</a>{" "}
106+
and <a href="/guides/issue-chat">Issue Chat</a>.
107+
</InfoBox>
78108

79109
## Data privacy and security
80110

81111
CodeRabbit collects only the minimum amount of information needed to provide you with our code review services. Our privacy and security posture centers around protecting your data through ephemerality:
82112

83-
- All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes.
84-
- We don't use your code, code reviews, or other collected data to train LLMs.
85-
- CodeRabbit doesn't share any collected customer data with third parties.
86-
- We keep all customer data confidential, and isolated by organization.
87-
- Our data collection and storage practices comply with SOC 2 and GDPR standards.
88-
89-
For more information about how we protect your data, see [the CodeRabbit Trust Center](https://trust.coderabbit.ai).
113+
<ListItems
114+
items={[
115+
"All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes.",
116+
"We don't use your code, code reviews, or other collected data to train LLMs.",
117+
"CodeRabbit doesn't share any collected customer data with third parties.",
118+
"Works with contributors through natural-language conversation in comments.",
119+
"We keep all customer data confidential, and isolated by organization.",
120+
"Our data collection and storage practices comply with SOC 2 and GDPR standards.",
121+
]}
122+
/>
123+
124+
<InfoBox>
125+
For more information about how we protect your data, see{" "}
126+
<a href="https://trust.coderabbit.ai">the CodeRabbit Trust Center</a>.
127+
</InfoBox>
90128

91129
## Flexible pricing, free for public repositories
92130

93131
Public repositories can use the Pro tier of CodeRabbit at no charge, including all of the code-review features described on this page. Rate limits might apply.
94132

95-
For private repositories, a number of pricing tiers are available. These range from a Free tier that offers unlimited code-change summaries, to an Enterprise tier with access to advanced features and SLA support. For more information, see [Pricing](https://www.coderabbit.ai/pricing).
133+
For private repositories, a number of pricing tiers are available. These range from a Free tier that offers unlimited code-change summaries, to an Enterprise tier with access to advanced features and SLA support.
134+
135+
<InfoBox>
136+
For more information, see{" "}
137+
<a href="https://www.coderabbit.ai/pricing">Pricing</a>.
138+
</InfoBox>
96139

97140
## Review local changes from within VSCode
98141

99142
As a separate, free product, CodeRabbit offers a VSCode extension that brings a subset of core CodeRabbit features to VSCode. This lets you use the power of CodeRabbit to tune and tidy your code changes locally before pushing your changes into a formal pull request for more thorough reviews.
100143

101-
For more information, see [Review local changes](/code-editors).
144+
<InfoBox>
145+
For more information, see <a href="/code-editors">Review local changes</a>.
146+
</InfoBox>
102147

103148
## What's next
104149

105-
- [Quickstart](/getting-started/quickstart/) lets you experience your first CodeRabbit code review first-hand.
106-
107-
- [Review local changes](/code-editors) guides you through installing and using a subset of CodeRabbit features directly from your code editor.
108-
109-
- [Why CodeRabbit?](/overview/why-coderabbit) dives further into the philosophies and technologies that drive CodeRabbit.
150+
<ListItems
151+
items={[
152+
<>
153+
<a href="/getting-started/quickstart/">Quickstart</a> lets you experience
154+
your first CodeRabbit code review first-hand.
155+
</>,
156+
<>
157+
<a href="/code-editors">Review local changes</a> guides you through
158+
installing and using a subset of CodeRabbit features directly from your
159+
code editor.
160+
</>,
161+
<>
162+
<a href="/overview/why-coderabbit">Why CodeRabbit?</a> dives further into
163+
the philosophies and technologies that drive CodeRabbit.
164+
</>,
165+
]}
166+
/>

‎docusaurus.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -273,8 +273,8 @@ const config: Config = {
273273
],
274274
},
275275
prism: {
276-
theme: prismThemes.github,
277-
darkTheme: prismThemes.dracula,
276+
theme: prismThemes.nightOwl,
277+
darkTheme: prismThemes.nightOwl,
278278
},
279279
algolia: {
280280
// The application ID provided by Algolia

‎src/components/ChatBubble/ChatBubble.module.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.chatBubble {
2+
background: var(--imf-text-button-color-bg);
3+
color: #222;
4+
border-radius: 6px;
5+
padding: 1em 1.2em;
6+
margin: 1em 0;
7+
font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace;
8+
font-size: 0.98em;
9+
white-space: pre-wrap;
10+
word-break: break-word;
11+
}

‎src/components/ChatBubble/ChatBubble.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react"
2+
import styles from "./ChatBubble.module.css"
3+
4+
export default function ChatBubble({
5+
children,
6+
}: {
7+
children: React.ReactNode
8+
}) {
9+
return <div className={styles.chatBubble}>{children}</div>
10+
}

‎src/components/ChatBubble/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./ChatBubble"

‎src/components/InfoBox/InfoBox.module.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.infoBox {
2+
border: 2px solid var(--imf-color-border-orange);
3+
border-radius: 12px;
4+
background: var(--imf-color-background-orange-light);
5+
padding: 0.7em;
6+
}
7+
8+
.infoBox p {
9+
margin: 0rem;
10+
}
11+
12+
.infoBox a {
13+
color: var(--ifm-color-primary);
14+
text-decoration: none;
15+
}
16+
17+
.infoBox a:hover {
18+
text-decoration: underline;
19+
}

0 commit comments

Comments
 (0)