Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Aug 16, 2025. It is now read-only.

Commitd9ea05d

Browse files
Prasad BhatPrasad Bhat
Prasad Bhat
authored and
Prasad Bhat
committed
docs: added custom css and icons and images
1 parentb3103bd commitd9ea05d

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
<divclass="video-container">
21-
<iframesrc="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+
<divclass="platform-integration-grid">
70+
<divclass="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+
<divclass="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+
<divclass="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+
<divclass="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+
<divclass="platform-integration-grid">
94+
<divclass="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+
<divclass="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+
<divclass="platform-integration-card">
103+
<img class="platform-integration-icon" src="img/overview/Jira.png" alt="Jira" />
104+
<span>Jira</span>
105+
</div>
106+
<divclass="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.
Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
.yamlEditorContainer {
2+
margin:1rem0;
3+
border-radius:8px;
4+
overflow: hidden;
5+
box-shadow:02px8pxrgba(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.8rem0;
224+
}
225+
}
226+
227+
@media (max-width:480px) {
228+
.yamlEditor {
229+
font-size:11px!important;
230+
}
231+
232+
.yamlEditorContainer {
233+
margin:0.6rem0;
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
importAceEditorfrom"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+
importstylesfrom"./YamlEditor.module.css"
29+
2630
importjsYamlfrom"js-yaml"
2731

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

5963
functionvalidateAndSetAnnotations(yaml){
6064
try{
61-
constdoc=jsYaml.load(yaml,{strict:true})
65+
constdoc=jsYaml.load(yaml)
6266
constisValid=validate(doc)
6367

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

153157
return(
154-
<divclassName="m4">
158+
<divclassName={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)
[8]ページ先頭
©2009-2025 Movatter.jp