Skip to content

Commit 4bc9f73

Browse files
mohd-khan09mohd-khan09
committed
docs: convert introduction to MDX and add React components for better UI
1 parent b296a2f commit 4bc9f73

File tree

20 files changed

+275
-34
lines changed

20 files changed

+275
-34
lines changed

‎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 FeatureList from "../../src/components/FeatureList"
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+
<FeatureList
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+
<FeatureList
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+
<FeatureList
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+
/>

‎src/components/FeatureList/FeatureList.module.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.crFeatureCard {
2+
background: var(--imf-list-card-background-color);
3+
border-radius: 8px;
4+
padding: 1.3rem;
5+
margin: 0.8rem 0;
6+
border: 2px solid var(--ifm-background-color-secondary);
7+
}
8+
9+
.crFeatureList {
10+
list-style: none;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
.crFeatureList li {
16+
position: relative;
17+
padding-left: 1.7em;
18+
margin-bottom: 1em;
19+
font-size: 1.08rem;
20+
line-height: 1.6;
21+
}
22+
23+
.crFeatureList li:before {
24+
content: "";
25+
position: absolute;
26+
left: 0.3em;
27+
top: 0.5em;
28+
width: 0.6em;
29+
height: 0.6em;
30+
background: var(--imf-list-bullets-color);
31+
border-radius: 50%;
32+
display: inline-block;
33+
}
34+
35+
.crFeatureList li a {
36+
color: var(--ifm-color-primary, orange);
37+
text-decoration: none;
38+
font-weight: 500;
39+
}
40+
41+
.crFeatureList li a:hover {
42+
text-decoration: underline;
43+
}

‎src/components/FeatureList/FeatureList.tsx

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

‎src/components/FeatureList/index.ts

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

‎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+
}

‎src/components/InfoBox/InfoBox.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react"
2+
import styles from "./InfoBox.module.css"
3+
4+
interface InfoBoxProps {
5+
children: React.ReactNode
6+
className?: string
7+
}
8+
9+
export const InfoBox: React.FC<InfoBoxProps> = ({ children, className }) => {
10+
return (
11+
<div className={`${styles.infoBox} ${className || ""}`}>{children}</div>
12+
)
13+
}
14+
15+
export default InfoBox

‎src/components/InfoBox/index.ts

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

‎src/components/PlatformCard/PlatformCard.module.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.platformCard {
2+
display: flex;
3+
align-items: center;
4+
background: var(--imf-list-card-background-color);
5+
border-radius: 8px;
6+
padding: 1.3rem;
7+
border: 2px solid var(--ifm-background-color-secondary);
8+
}
9+
10+
.platformIcon {
11+
width: 32px;
12+
height: 32px;
13+
margin-right: 16px;
14+
}
15+
16+
[data-theme="dark"] .platformIcon {
17+
filter: invert(1);
18+
}

‎src/components/PlatformCard/PlatformCard.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react"
2+
import styles from "./PlatformCard.module.css"
3+
4+
interface PlatformCardProps {
5+
imageSrc: string
6+
name: string
7+
className?: string
8+
}
9+
10+
export const PlatformCard: React.FC<PlatformCardProps> = ({
11+
imageSrc,
12+
name,
13+
className,
14+
}) => {
15+
return (
16+
<div className={`${styles.platformCard} ${className || ""}`}>
17+
<img className={styles.platformIcon} src={imageSrc} alt={name} />
18+
<span>{name}</span>
19+
</div>
20+
)
21+
}
22+
23+
export default PlatformCard

‎src/components/PlatformCard/index.ts

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

0 commit comments

Comments
 (0)