Skip to content

Commit 24e6ad7

Browse files
mohd-khan09mohd-khan09
committed
docs: WIP Quickstart ##438 
1 parent 6aabb8d commit 24e6ad7

File tree

7 files changed

+91
-28
lines changed

7 files changed

+91
-28
lines changed

‎docs/getting-started/quickstart.mdx

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ sidebar_position: 1
88
import ListItems from "../../src/components/ListItems"
99
import InfoBox from "../../src/components/InfoBox"
1010
import Note from "../../src/components/Note"
11+
import CodeBlock from "@theme/CodeBlock"
12+
import ChatBubble from "../../src/components/ChatBubble"
1113

1214
# Quickstart
1315

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

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

88-
1. Create a branch named `add-utils`.
89-
90-
1. In that new `add-utils` branch, create a new file called `simple_utils.py`, with the following content:
91-
92-
```python
93-
# simple_utils.py - A tiny utility library
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
9498
95-
def reverse_string(text):
96-
"""Reverses the characters in a string."""
97-
return text[::-1]
99+
def reverse_string(text):
100+
"""Reverses the characters in a string."""
101+
return text[::-1]
98102
99-
def count_words(sentence):
100-
return len(sentence.split())
103+
def count_words(sentence):
104+
return len(sentence.split())
101105
102-
def celsius_to_fahrenheit(celsius):
103-
return (celsius * 9/5) + 32
104-
```
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+
/>
105114

106-
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:
107116

108-
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.",
109122

110-
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+
]}
111124

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

116127
Part of the review resembles the following screenshot:
117128

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

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

134-
> 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.
135-
>
136-
> 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.
137-
>
138-
> 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>
139152

140-
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.
141154

142155
1. Post the following as another new comment:
143156

‎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/OrderedSteps.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react"
2+
3+
export default function OrderedSteps({ children }) {
4+
return (
5+
<ol style={{ paddingLeft: 24 }}>
6+
{React.Children.map(children, (child, idx) => (
7+
<li style={{ marginBottom: 16 }}>{child}</li>
8+
))}
9+
</ol>
10+
)
11+
}

‎src/css/custom.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@
4848
--imf-note-border-color: #25bab1;
4949
--imf-note-background-color: #f1fffe;
5050
--imf-note-text-color: #208682;
51+
--imf-text-color-bg: #e8e8e8;
52+
--imf-text-color: #171717;
53+
--imf-text-button-color-bg: #e8e8e8;
5154
}
5255

5356
[data-theme="dark"] {
@@ -68,6 +71,9 @@
6871
--imf-color-border-orange: #232323;
6972
--imf-note-border-color: #208682;
7073
--imf-note-background-color: #252828;
74+
--imf-text-color-bg: #232323;
75+
--imf-text-color: #f5f5f5;
76+
--imf-text-button-color-bg: #e8e8e8;
7177
}
7278

7379
#__docusaurus {
@@ -315,3 +321,14 @@ a[docid="docs"] > svg {
315321
.pagination-nav {
316322
display: none;
317323
}
324+
.language-text {
325+
background-color: var(--imf-text-color-bg) !important;
326+
}
327+
.language-text .token-line {
328+
color: var(--imf-text-color) !important;
329+
}
330+
.language-text [class*="buttonGroup"] button {
331+
background-color: var(--imf-text-color-bg) !important;
332+
color: var(--imf-text-color) !important;
333+
border-radius: 4px;
334+
}

0 commit comments

Comments
 (0)