Skip to content

Commit d9ea05d

Browse files
Prasad BhatPrasad Bhat
Prasad Bhat
authored and
Prasad Bhat
committed
docs: added custom css and icons and images
1 parent b3103bd commit d9ea05d

File tree

14 files changed

+1771
-46
lines changed

14 files changed

+1771
-46
lines changed

‎docs/overview/introduction.md

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

12+
1213
# Introduction
1314

1415
This page provides a conceptual introduction to CodeRabbit. For a hands-on tutorial, see [Quickstart](/getting-started/quickstart/).
@@ -18,7 +19,14 @@ This page provides a conceptual introduction to CodeRabbit. For a hands-on tutor
1819
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.
1920

2021
<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>
22+
<iframe
23+
src="https://www.youtube.com/embed/3SyUOSebG7E?si=i0oT9RAnH0PW81lY"
24+
title="YouTube video player"
25+
frameBorder="0"
26+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
27+
referrerPolicy="strict-origin-when-cross-origin"
28+
allowFullScreen
29+
></iframe>
2230
</div>
2331
2432
## Core features
@@ -58,21 +66,48 @@ No matter how you tune and customize CodeRabbit, its default settings make it us
5866

5967
CodeRabbit integrates in just a few clicks with many popular Git platforms:
6068

61-
- GitHub, GitHub Enterprise Cloud, GitHub Enterprise Server,
62-
- GitLab, GitLab Self-Managed
63-
- Azure DevOps
64-
- Bitbucket Cloud
65-
69+
<div class="platform-integration-grid">
70+
<div class="platform-integration-card">
71+
<img class="platform-integration-icon" src="/img/overview/Github.png" alt="GitHub, including GitHub Enterprise Server" />
72+
<span>GitHub, including GitHub Enterprise Server</span>
73+
</div>
74+
<div class="platform-integration-card">
75+
<img class="platform-integration-icon" src="/img/overview/Gitlab.png" alt="GitLab, including self-managed GitLab" />
76+
<span>GitLab, including self-managed GitLab</span>
77+
</div>
78+
<div class="platform-integration-card">
79+
<img class="platform-integration-icon" src="/img/overview/Bitbucket.png" alt="Bitbucket Cloud" />
80+
<span>Bitbucket Cloud</span>
81+
</div>
82+
<div class="platform-integration-card">
83+
<img class="platform-integration-icon" src="/img/overview/Azure.png" alt="Azure DevOps" />
84+
<span>Azure DevOps</span>
85+
</div>
86+
</div>
6687
For more information, see [Supported Git Platforms](/platforms/).
6788

6889
### Issue-management integration
6990

7091
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:
7192

72-
- GitHub Issues
73-
- GitLab Issues
74-
- Jira
75-
- Linear
93+
<div class="platform-integration-grid">
94+
<div class="platform-integration-card">
95+
<img class="platform-integration-icon" src="img/overview/Github.png" alt="GitHub Issues" />
96+
<span>GitHub Issues</span>
97+
</div>
98+
<div class="platform-integration-card">
99+
<img class="platform-integration-icon" src="img/overview/Gitlab.png" alt="GitLab Issues" />
100+
<span>GitLab Issues</span>
101+
</div>
102+
<div class="platform-integration-card">
103+
<img class="platform-integration-icon" src="img/overview/Jira.png" alt="Jira" />
104+
<span>Jira</span>
105+
</div>
106+
<div class="platform-integration-card">
107+
<img class="platform-integration-icon" src="img/overview/Linear.png" alt="Linear" />
108+
<span>Linear</span>
109+
</div>
110+
</div>
76111

77112
For more information, see [Issue Creation](/guides/issue-creation) and [Issue Chat](/guides/issue-chat).
78113

@@ -83,6 +118,7 @@ CodeRabbit collects only the minimum amount of information needed to provide you
83118
- All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes.
84119
- We don't use your code, code reviews, or other collected data to train LLMs.
85120
- CodeRabbit doesn't share any collected customer data with third parties.
121+
- Works with contributors through natural-language conversation in comments.
86122
- We keep all customer data confidential, and isolated by organization.
87123
- Our data collection and storage practices comply with SOC 2 and GDPR standards.
88124

@@ -92,7 +128,9 @@ For more information about how we protect your data, see [the CodeRabbit Trust C
92128

93129
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.
94130

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).
131+
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.
132+
133+
For more information, see [Pricing](https://www.coderabbit.ai/pricing).
96134

97135
## Review local changes from within VSCode
98136

@@ -103,7 +141,5 @@ For more information, see [Review local changes](/code-editors).
103141
## What's next
104142

105143
- [Quickstart](/getting-started/quickstart/) lets you experience your first CodeRabbit code review first-hand.
106-
107144
- [Review local changes](/code-editors) guides you through installing and using a subset of CodeRabbit features directly from your code editor.
108-
109145
- [Why CodeRabbit?](/overview/why-coderabbit) dives further into the philosophies and technologies that drive CodeRabbit.

‎src/components/YamlEditor/YamlEditor.module.css

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
.yamlEditorContainer {
2+
margin: 1rem 0;
3+
border-radius: 8px;
4+
overflow: hidden;
5+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
6+
}
7+
8+
.yamlEditor {
9+
border-radius: 8px;
10+
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace !important;
11+
font-size: 14px !important;
12+
line-height: 1.5 !important;
13+
}
14+
15+
/* Dark theme styling to match the image - using higher specificity */
16+
.yamlEditor .ace_editor,
17+
.yamlEditor .ace_editor.ace_terminal,
18+
.yamlEditor .ace_scroller,
19+
.yamlEditor .ace_content {
20+
background-color: #000000 !important;
21+
color: #ffffff !important;
22+
}
23+
24+
.yamlEditor .ace_gutter,
25+
.yamlEditor .ace_editor.ace_terminal .ace_gutter {
26+
background-color: #000000 !important;
27+
color: #6c6c6c !important;
28+
border-right: 1px solid #404040 !important;
29+
}
30+
31+
.yamlEditor .ace_gutter-active-line,
32+
.yamlEditor .ace_editor.ace_terminal .ace_gutter-active-line {
33+
background-color: #404040 !important;
34+
}
35+
36+
.yamlEditor .ace_line,
37+
.yamlEditor .ace_editor.ace_terminal .ace_line {
38+
background-color: #000000 !important;
39+
}
40+
41+
.yamlEditor .ace_cursor,
42+
.yamlEditor .ace_editor.ace_terminal .ace_cursor {
43+
color: #ffffff !important;
44+
}
45+
46+
.yamlEditor .ace_selection,
47+
.yamlEditor .ace_editor.ace_terminal .ace_selection {
48+
background-color: #44475a !important;
49+
}
50+
51+
.yamlEditor .ace_selected-word,
52+
.yamlEditor .ace_editor.ace_terminal .ace_selected-word {
53+
background-color: #44475a !important;
54+
}
55+
56+
.yamlEditor .ace_active-line,
57+
.yamlEditor .ace_editor.ace_terminal .ace_active-line {
58+
background-color: #44475a !important;
59+
}
60+
61+
/* Additional overrides for all possible background elements */
62+
.yamlEditor .ace_layer,
63+
.yamlEditor .ace_text-layer,
64+
.yamlEditor .ace_marker-layer,
65+
.yamlEditor .ace_cursor-layer {
66+
background-color: #000000 !important;
67+
}
68+
69+
/* Global override for any remaining elements */
70+
.yamlEditor * {
71+
background-color: transparent !important;
72+
}
73+
74+
.yamlEditor .ace_editor,
75+
.yamlEditor .ace_editor *,
76+
.yamlEditor .ace_scroller,
77+
.yamlEditor .ace_content {
78+
background-color: #000000 !important;
79+
}
80+
81+
/* YAML syntax highlighting to match the image - using higher specificity */
82+
.yamlEditor .ace_comment,
83+
.yamlEditor .ace_editor.ace_terminal .ace_comment {
84+
color: #999999 !important;
85+
font-style: italic !important;
86+
}
87+
88+
/* Target lines that start with # (comments) */
89+
.yamlEditor .ace_text-layer .ace_line:first-child,
90+
.yamlEditor .ace_text-layer .ace_line:first-child * {
91+
color: #999999 !important;
92+
font-style: italic !important;
93+
}
94+
95+
/* More specific targeting for any element containing comment-like content */
96+
.yamlEditor [class*="comment"],
97+
.yamlEditor [class*="Comment"] {
98+
color: #999999 !important;
99+
font-style: italic !important;
100+
}
101+
102+
.yamlEditor .ace_string,
103+
.yamlEditor .ace_editor.ace_terminal .ace_string {
104+
color: #ff84d6 !important;
105+
}
106+
107+
.yamlEditor .ace_constant.ace_numeric,
108+
.yamlEditor .ace_editor.ace_terminal .ace_constant.ace_numeric {
109+
color: #b5cea8 !important;
110+
}
111+
112+
.yamlEditor .ace_constant.ace_language,
113+
.yamlEditor .ace_editor.ace_terminal .ace_constant.ace_language {
114+
color: #569cd6 !important;
115+
font-weight: bold !important;
116+
}
117+
118+
.yamlEditor .ace_variable,
119+
.yamlEditor .ace_editor.ace_terminal .ace_variable {
120+
color: #ffffff !important;
121+
}
122+
123+
.yamlEditor .ace_keyword,
124+
.yamlEditor .ace_editor.ace_terminal .ace_keyword {
125+
color: #ffffff !important;
126+
}
127+
128+
.yamlEditor .ace_storage,
129+
.yamlEditor .ace_editor.ace_terminal .ace_storage {
130+
color: #ffffff !important;
131+
}
132+
133+
.yamlEditor .ace_entity.ace_name.ace_tag,
134+
.yamlEditor .ace_editor.ace_terminal .ace_entity.ace_name.ace_tag {
135+
color: #ffffff !important;
136+
}
137+
138+
.yamlEditor .ace_markup.ace_heading,
139+
.yamlEditor .ace_editor.ace_terminal .ace_markup.ace_heading {
140+
color: #ffffff !important;
141+
}
142+
143+
/* Light theme support */
144+
[data-theme="light"] .yamlEditor .ace_editor {
145+
background-color: #ffffff !important;
146+
color: #24292e !important;
147+
}
148+
149+
[data-theme="light"] .yamlEditor .ace_gutter {
150+
background-color: #f6f8fa !important;
151+
color: #6a737d !important;
152+
border-right: 1px solid #e1e4e8 !important;
153+
}
154+
155+
[data-theme="light"] .yamlEditor .ace_gutter-active-line {
156+
background-color: #f6f8fa !important;
157+
}
158+
159+
[data-theme="light"] .yamlEditor .ace_line {
160+
background-color: #ffffff !important;
161+
}
162+
163+
[data-theme="light"] .yamlEditor .ace_cursor {
164+
color: #24292e !important;
165+
}
166+
167+
[data-theme="light"] .yamlEditor .ace_selection {
168+
background-color: #c8e1ff !important;
169+
}
170+
171+
[data-theme="light"] .yamlEditor .ace_selected-word {
172+
background-color: #c8e1ff !important;
173+
}
174+
175+
[data-theme="light"] .yamlEditor .ace_active-line {
176+
background-color: #f6f8fa !important;
177+
}
178+
179+
[data-theme="light"] .yamlEditor .ace_comment {
180+
color: #999999 !important;
181+
}
182+
183+
[data-theme="light"] .yamlEditor .ace_string {
184+
color: #032f62 !important;
185+
}
186+
187+
[data-theme="light"] .yamlEditor .ace_constant.ace_numeric {
188+
color: #005cc5 !important;
189+
}
190+
191+
[data-theme="light"] .yamlEditor .ace_constant.ace_language {
192+
color: #d73a49 !important;
193+
font-weight: bold !important;
194+
}
195+
196+
[data-theme="light"] .yamlEditor .ace_variable {
197+
color: #005cc5 !important;
198+
}
199+
200+
[data-theme="light"] .yamlEditor .ace_keyword {
201+
color: #d73a49 !important;
202+
}
203+
204+
[data-theme="light"] .yamlEditor .ace_storage {
205+
color: #d73a49 !important;
206+
}
207+
208+
[data-theme="light"] .yamlEditor .ace_entity.ace_name.ace_tag {
209+
color: #005cc5 !important;
210+
}
211+
212+
[data-theme="light"] .yamlEditor .ace_markup.ace_heading {
213+
color: #005cc5 !important;
214+
}
215+
216+
/* Responsive design */
217+
@media (max-width: 768px) {
218+
.yamlEditor {
219+
font-size: 12px !important;
220+
}
221+
222+
.yamlEditorContainer {
223+
margin: 0.8rem 0;
224+
}
225+
}
226+
227+
@media (max-width: 480px) {
228+
.yamlEditor {
229+
font-size: 11px !important;
230+
}
231+
232+
.yamlEditorContainer {
233+
margin: 0.6rem 0;
234+
}
235+
}

‎src/components/YamlEditor/YamlEditor.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,15 @@ import React, { useState, useEffect } from "react"
1818

1919
import AceEditor from "react-ace"
2020
import "ace-builds/src-noconflict/theme-github"
21+
import "ace-builds/src-noconflict/theme-monokai"
22+
import "ace-builds/src-noconflict/theme-terminal"
2123
import "ace-builds/src-noconflict/ext-language_tools"
2224

2325
import "ace-builds/webpack-resolver"
2426
import "ace-builds/src-noconflict/mode-yaml"
2527

28+
import styles from "./YamlEditor.module.css"
29+
2630
import jsYaml from "js-yaml"
2731

2832
import Ajv from "ajv"
@@ -58,7 +62,7 @@ export default function YamlEditor() {
5862

5963
function validateAndSetAnnotations(yaml) {
6064
try {
61-
const doc = jsYaml.load(yaml, { strict: true })
65+
const doc = jsYaml.load(yaml)
6266
const isValid = validate(doc)
6367

6468
if (!isValid && validate.errors) {
@@ -151,24 +155,26 @@ export default function YamlEditor() {
151155
}
152156

153157
return (
154-
<div className="m4">
158+
<div className={styles.yamlEditorContainer}>
155159
<AceEditor
156160
mode="yaml"
157-
theme="github"
161+
theme="terminal"
158162
onChange={onChange}
159163
value={value}
160164
name="yaml-editor"
165+
className={styles.yamlEditor}
161166
editorProps={{ $blockScrolling: true }}
162167
setOptions={{
163168
useWorker: false,
164169
showPrintMargin: false,
165170
showGutter: true,
171+
fontSize: 14,
172+
fontFamily: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
166173
}}
167174
annotations={annotations}
168175
width="100%"
169176
height="400px"
170177
/>
171-
<br />
172178
</div>
173179
)
174180
}

0 commit comments

Comments
 (0)