Skip to content

Commit 6aabb8d

Browse files
mohd-khan09mohd-khan09
committed
docs: add Quickstart guide and replace FeatureList with ListItems component
1 parent 4bc9f73 commit 6aabb8d

File tree

11 files changed

+172
-40
lines changed

11 files changed

+172
-40
lines changed

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

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,35 @@ 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+
812
# Quickstart
913

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

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.
16+
<ListItems
17+
orderedList
18+
items={[
19+
"Integrate CodeRabbit into a GitHub-based repository that you own.",
20+
"Observe CodeRabbit perform a code review of a pull request that you initiate.",
21+
"Converse with CodeRabbit about the code review.",
22+
"Prompt CodeRabbit to generate its own improvements to the pull request.",
23+
]}
24+
/>
1625

1726
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.
1827

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

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-
:::
32+
<Note>
33+
While this tutorial focuses on GitHub, CodeRabbit also works with GitLab,
34+
Azure DevOps, and Bitbucket. For more information, see{" "}
35+
<a href="/platforms/">Integrate with Git platforms</a>.
36+
</Note>
2437

2538
## Before you begin
2639

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

3144
To integrate CodeRabbit with your GitHub account, follow these steps:
3245

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**.
46+
<ListItems
47+
orderedList
48+
items={[
49+
<>
50+
Visit{" "}
51+
<a href="https://app.coderabbit.ai/login?free-trial">
52+
the CodeRabbit login page
53+
</a>
54+
.
55+
</>,
56+
<>
57+
Click <strong>Login with GitHub</strong>.
58+
</>,
59+
<>
60+
Click <strong>Authorize coderabbitai</strong>.
61+
</>,
62+
]}
63+
/>
3664

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

‎docs/overview/introduction.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ description:
99
slug: "/"
1010
---
1111

12-
import FeatureList from "../../src/components/FeatureList"
12+
import ListItems from "../../src/components/ListItems"
1313
import InfoBox from "../../src/components/InfoBox"
1414
import PlatformGrid from "../../src/components/PlatformGrid"
1515
import PlatformCard from "../../src/components/PlatformCard"
@@ -37,7 +37,7 @@ Developers can interact directly with the CodeRabbit bot within their existing G
3737

3838
Core CodeRabbit features include the following:
3939

40-
<FeatureList
40+
<ListItems
4141
items={[
4242
"Integrates rapidly with popular Git platforms and workflows.",
4343
"Applies dozens of open-source, industry-standard code analyzers to every commit.",
@@ -110,7 +110,7 @@ You can integrate CodeRabbit with issue-management platforms. This lets you ask
110110

111111
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:
112112

113-
<FeatureList
113+
<ListItems
114114
items={[
115115
"All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes.",
116116
"We don't use your code, code reviews, or other collected data to train LLMs.",
@@ -147,7 +147,7 @@ As a separate, free product, CodeRabbit offers a VSCode extension that brings a
147147

148148
## What's next
149149

150-
<FeatureList
150+
<ListItems
151151
items={[
152152
<>
153153
<a href="/getting-started/quickstart/">Quickstart</a> lets you experience

‎src/components/FeatureList/FeatureList.tsx

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

‎src/components/FeatureList/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/FeatureList/FeatureList.module.css renamed to ‎src/components/ListItems/ListItems.module.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
padding: 0;
1313
}
1414

15+
.crOrderedList {
16+
list-style: decimal;
17+
margin: 0;
18+
padding-left: 1.5em;
19+
}
20+
1521
.crFeatureList li {
1622
position: relative;
1723
padding-left: 1.7em;
@@ -20,6 +26,21 @@
2026
line-height: 1.6;
2127
}
2228

29+
.crFeatureList li:last-child {
30+
margin-bottom: 0;
31+
}
32+
33+
.crOrderedList li {
34+
margin-bottom: 1em;
35+
font-size: 1.08rem;
36+
line-height: 1.6;
37+
padding-left: 0.3em;
38+
}
39+
40+
.crOrderedList li:last-child {
41+
margin-bottom: 0;
42+
}
43+
2344
.crFeatureList li:before {
2445
content: "";
2546
position: absolute;
@@ -38,6 +59,16 @@
3859
font-weight: 500;
3960
}
4061

62+
.crOrderedList li a {
63+
color: var(--ifm-color-primary, orange);
64+
text-decoration: none;
65+
font-weight: 500;
66+
}
67+
4168
.crFeatureList li a:hover {
4269
text-decoration: underline;
4370
}
71+
72+
.crOrderedList li a:hover {
73+
text-decoration: underline;
74+
}

‎src/components/ListItems/ListItems.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react"
2+
import styles from "./ListItems.module.css"
3+
4+
interface ListItemsProps {
5+
items: React.ReactNode[]
6+
className?: string
7+
orderedList?: boolean
8+
}
9+
10+
export const ListItems: React.FC<ListItemsProps> = ({
11+
items,
12+
className,
13+
orderedList = false,
14+
}) => {
15+
const ListTag = orderedList ? "ol" : "ul"
16+
const listClassName = orderedList
17+
? styles.crOrderedList
18+
: styles.crFeatureList
19+
20+
return (
21+
<div className={`${styles.crFeatureCard} ${className || ""}`}>
22+
<ListTag className={listClassName}>
23+
{items.map((item, index) => (
24+
<li key={index}>{item}</li>
25+
))}
26+
</ListTag>
27+
</div>
28+
)
29+
}
30+
31+
export default ListItems

‎src/components/ListItems/index.ts

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

‎src/components/Note/Note.module.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.note {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: flex-start;
5+
background: var(--imf-note-background-color);
6+
border: 2px solid var(--imf-note-border-color);
7+
border-radius: 8px;
8+
padding: 1rem 1.2rem;
9+
margin: 1.2rem 0;
10+
font-size: 1rem;
11+
}
12+
13+
.header {
14+
display: flex;
15+
align-items: center;
16+
margin-bottom: 0.3em;
17+
}
18+
19+
.icon {
20+
font-size: 1.3em;
21+
margin-right: 0.5em;
22+
color: #2ec4b6;
23+
flex-shrink: 0;
24+
}
25+
26+
.title {
27+
font-weight: 600;
28+
color: var(--imf-note-text-color);
29+
}
30+
31+
.text {
32+
margin-top: 0.2em;
33+
}
34+
.note.text p {
35+
margin: 0px;
36+
}
37+
.note a {
38+
color: var(--imf-note-text-color);
39+
}
40+
.note p {
41+
margin: 0rem;
42+
}

‎src/components/Note/Note.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react"
2+
import styles from "./Note.module.css"
3+
4+
interface NoteProps {
5+
children: React.ReactNode
6+
}
7+
8+
const Note: React.FC<NoteProps> = ({ children }) => (
9+
<div className={styles.note}>
10+
<div className={styles.header}>
11+
<span className={styles.icon}>ℹ️</span>
12+
<span className={styles.title}>Note</span>
13+
</div>
14+
<div className={styles.text}>{children}</div>
15+
</div>
16+
)
17+
18+
export default Note

‎src/components/Note/index.ts

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

0 commit comments

Comments
 (0)