Skip to content

Commit 2991900

Browse files
Prasad BhatPrasad Bhat
Prasad Bhat
authored and
Prasad Bhat
committed
docs: added quickstart page (#438)
1 parent f8aa7f3 commit 2991900

File tree

9 files changed

+397
-78
lines changed

9 files changed

+397
-78
lines changed

‎docs/getting-started/quickstart.mdx

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ 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"
118
import CodeBlock from "@theme/CodeBlock"
129
import ChatBubble from "../../src/components/ChatBubble"
10+
import DarkCodeBlock from "../../src/components/DarkCodeBlock"
11+
import InfoBox from "../../src/components/InfoBox"
12+
import ListItems from "../../src/components/ListItems"
13+
import Note from "../../src/components/Note"
1314

1415
# Quickstart
1516

@@ -70,14 +71,21 @@ CodeRabbit takes a moment to set up the integration. After it finishes, the Code
7071

7172
To add CodeRabbit to your test repository, follow these steps:
7273

73-
1. On the CodeRabbit dashboard, click **Add Repositories**. A GitHub repository-access dialog appears.
74-
1. Select the **Only select repositories** radio button.
75-
1. From the **Select repositories** menu, select the `coderabbit-test` repository that you created earlier in this Quickstart.
76-
1. Click **Install & Authorize**.
77-
:::note
78-
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 [the CodeRabbit Trust Center](https://trust.coderabbit.ai).
79-
:::
80-
1. If a CodeRabbit **Complete your signup** dialog appears, then fill it out with the requested information before continuing.
74+
<ListItems
75+
orderedList
76+
items={[
77+
<>On the CodeRabbit dashboard, click <strong>Add Repositories</strong>.</>,
78+
<>Select the <strong>Only select repositories</strong> radio button.</>,
79+
<>From the <strong>Select repositories</strong> menu, select the <code>coderabbit-test</code> repository that you created earlier in this Quickstart.</>,
80+
<>
81+
Click <strong>Install & Authorize</strong>.
82+
<Note>
83+
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>.
84+
</Note>
85+
</>,
86+
<>If a CodeRabbit <strong>Complete your signup</strong> dialog appears, then fill it out with the requested information before continuing.</>,
87+
]}
88+
/>
8189

8290
CodeRabbit is now ready to use with your test repository. The next steps demonstrate its core code-review features.
8391

@@ -93,19 +101,18 @@ Use your usual Git workflow to perform the following steps in the `coderabbit-te
93101
"Create a branch named `add-utils`.",
94102
<>
95103
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
104+
<DarkCodeBlock language="python">{`# simple_utils.py - A tiny utility library
98105
99106
def reverse_string(text):
100-
"""Reverses the characters in a string."""
101-
return text[::-1]
107+
"""Reverses the characters in a string."""
108+
return text[::-1]
102109
103110
def count_words(sentence):
104-
return len(sentence.split())
111+
return len(sentence.split())
105112
106113
def celsius_to_fahrenheit(celsius):
107-
return (celsius \* 9/5) + 32
108-
`}</CodeBlock>
114+
return (celsius * 9/5) + 32
115+
`}</DarkCodeBlock>
109116
</>,
110117
"Commit the added file to the `add-utils`branch. Use any text you want for the commit message.",
111118
"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.",
@@ -116,12 +123,10 @@ After a few moments, CodeRabbit responds to the pull request using the `@coderab
116123

117124
<ListItems
118125
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.",
122-
123-
]}
124-
126+
<>If you didn't write a pull request summary, then CodeRabbit adds a new summary to the pull request.</>,
127+
<>CodeRabbit posts a comment titled <strong>Walkthrough</strong> containing analysis and commentary about the content of the pull request.</>,
128+
<>CodeRabbit attaches a detailed code review to the pull request as another comment.</>,
129+
]}
125130
/>
126131

127132
Part of the review resembles the following screenshot:
@@ -136,33 +141,31 @@ After CodeRabbit reviews a pull request, you can converse with it about its revi
136141

137142
1. Post the following as a new GitHub comment attached to the pull request:
138143

139-
```text
140-
@coderabbitai Why do all of these functions need docstrings? Isn't it obvious enough what they do?
141-
```
144+
<ChatBubble>@coderabbitai Why do all of these functions need docstrings? Isn't it obvious enough what they do?</ChatBubble>
142145

143-
After a few moments, CodeRabbit posts its reply, explaining its motivations for its recommendation. The reply might resemble the following:
146+
After a few moments, CodeRabbit posts its reply, explaining its motivations for its recommendation. The reply might resemble the following:
144147

145148
<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?`}
149+
{`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.
150+
151+
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.
152+
153+
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?`}
151154
</ChatBubble>
152155

153156
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.
154157

155-
1. Post the following as another new comment:
158+
2. Post the following as another new comment:
156159

157-
```text
158-
@coderabbitai generate docstrings
159-
```
160+
<ChatBubble>@coderabbitai generate docstrings</ChatBubble>
160161

161-
After a few moments, CodeRabbit does the following:
162+
After a few moments, CodeRabbit does the following:
162163

163-
- CodeRabbit creates a new branch, based on `add-utils`.
164-
- CodeRabbit commits changes to the branch that adds suggested docstrings to `add-utils`.
165-
- CodeRabbit opens a new pull request between the new branch and `add-utils`.
164+
<ListItems items={[
165+
<>CodeRabbit creates a new branch, based on `add-utils`.</>,
166+
<>CodeRabbit commits changes to the branch that adds suggested docstrings to `add-utils`.</>,
167+
<>CodeRabbit opens a new pull request between the new branch and `add-utils`.</>,
168+
]} />
166169

167170
## Clean up
168171

@@ -172,8 +175,10 @@ You are now ready to add CodeRabbit to other repositories that you own, and let
172175

173176
## What's next
174177

175-
- [Integrate CodeRabbit](/platforms/) with your repositories on GitHub, GitLab, Azure DevOps, or Bitbucket.
176-
- [Configure CodeRabbit](/getting-started/configure-coderabbit) beyond its default settings.
177-
- [Add custom review instructions](/guides/review-instructions).
178-
- [Get support for CodeRabbit](/getting-started/support).
179-
- [Learn more about how CodeRabbit works](/overview/why-coderabbit).
178+
<ListItems items={[
179+
<><a href="/platforms/">Integrate CodeRabbit</a> with your repositories on GitHub, GitLab, Azure DevOps, or Bitbucket.</>,
180+
<><a href="/getting-started/configure-coderabbit">Configure CodeRabbit</a> beyond its default settings.</>,
181+
<><a href="/guides/review-instructions">Add custom review instructions</a>.</>,
182+
<><a href="/getting-started/support">Get support for CodeRabbit</a>.</>,
183+
<><a href="/overview/why-coderabbit">Learn more about how CodeRabbit works</a>.</>,
184+
]} />

‎src/components/DarkCodeBlock/DarkCodeBlock.module.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
.codeBlock {
2+
margin: 1rem 0;
3+
border-radius: 8px;
4+
overflow: hidden;
5+
background-color: #1a1a1a;
6+
border: none;
7+
font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
8+
position: relative;
9+
}
10+
11+
.codeHeader {
12+
background-color: #1a1a1a;
13+
padding: 0.75rem 1rem;
14+
border-bottom: 1px solid #333;
15+
color: #888;
16+
font-size: 0.875rem;
17+
font-weight: 400;
18+
font-style: italic;
19+
}
20+
21+
.codeTitle {
22+
color: #888;
23+
font-style: italic;
24+
}
25+
26+
.codeContainer {
27+
position: relative;
28+
background-color: #1a1a1a;
29+
}
30+
31+
.codeContent {
32+
margin: 0;
33+
padding: 1rem;
34+
padding-bottom: 2rem;
35+
background-color: transparent;
36+
color: #e6e6e6;
37+
font-size: 0.875rem;
38+
line-height: 1.6;
39+
overflow-x: auto;
40+
white-space: pre;
41+
}
42+
43+
.codeLine {
44+
display: block;
45+
min-height: 1.6rem;
46+
}
47+
48+
.copyButtonContainer {
49+
background-color: #1a1a1a;
50+
padding: 0.75rem 1rem;
51+
display: flex;
52+
justify-content: flex-end;
53+
cursor: pointer;
54+
}
55+
56+
.copyButton {
57+
background-color: #333;
58+
color: #fff;
59+
border: 1px solid #333;
60+
border-radius: 4px;
61+
padding: 0.5rem 0.75rem;
62+
font-size: 0.75rem;
63+
cursor: pointer;
64+
display: flex;
65+
align-items: center;
66+
gap: 0.5rem;
67+
transition: all 0.2s ease;
68+
font-family: inherit;
69+
width: 100%;
70+
justify-content: flex-end;
71+
}
72+
73+
.copyButton:hover {
74+
background-color: #333;
75+
color: #fff;
76+
border-color: #666;
77+
}
78+
79+
.copyButton:active {
80+
transform: scale(0.98);
81+
}
82+
83+
.copyButton svg {
84+
width: 14px;
85+
height: 14px;
86+
}
87+
88+
.codeContent :global(.keyword) {
89+
color: #4fc1ff;
90+
font-weight: 400;
91+
}
92+
93+
.codeContent :global(.comment) {
94+
color: #6a9955;
95+
font-style: italic;
96+
}
97+
98+
.codeContent :global(.string) {
99+
color: #ff6b9d;
100+
}
101+
102+
.codeContent :global(.function) {
103+
color: #ffab70;
104+
font-weight: 400;
105+
}
106+
107+
.codeContent :global(.number) {
108+
color: #53FFE8;
109+
}
110+
111+
.codeContent :global(.header) {
112+
color: #e6e6e6;
113+
font-style: italic;
114+
}
115+
116+
@media (max-width: 768px) {
117+
.codeContent {
118+
font-size: 0.8rem;
119+
padding: 0.75rem;
120+
padding-bottom: 3rem;
121+
}
122+
123+
.copyButton {
124+
font-size: 0.7rem;
125+
padding: 0.4rem 0.6rem;
126+
}
127+
128+
.copyButtonContainer {
129+
padding: 0.5rem 0.75rem;
130+
}
131+
}

0 commit comments

Comments
 (0)