Introduction & Quickstart Page Styling

docs/getting-started/quickstart.md → docs/getting-started/quickstart.mdx

@@ -5,22 +5,37 @@ description: See CodeRabbit in action, using a live GitHub repository.
 sidebar_position: 1
 ---
 
+import ListItems from "../../src/components/ListItems"
+import InfoBox from "../../src/components/InfoBox"
+import Note from "../../src/components/Note"
+import CodeBlock from "@theme/CodeBlock"
+import ChatBubble from "../../src/components/ChatBubble"
+
 # Quickstart
 
 This tutorial gives you a hands-on demonstration of CodeRabbit, using a real, GitHub-based repository. It guides you through the following tasks:
 
-1. Integrate CodeRabbit into a GitHub-based repository that you own.
-1. Observe CodeRabbit perform a code review of a pull request that you initiate.
-1. Converse with CodeRabbit about the code review.
-1. Prompt CodeRabbit to generate its own improvements to the pull request.
+<ListItems
+	orderedList
+	items={[
+		"Integrate CodeRabbit into a GitHub-based repository that you own.",
+		"Observe CodeRabbit perform a code review of a pull request that you initiate.",
+		"Converse with CodeRabbit about the code review.",
+		"Prompt CodeRabbit to generate its own improvements to the pull request.",
+	]}
+/>
 
 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.
 
-For a more general overview of CodeRabbit, see [Introduction](/).
+<InfoBox>
+	For a more general overview of CodeRabbit, see <a href="/">Introduction</a>.
+</InfoBox>
 
-:::note
-While this tutorial focuses on GitHub, CodeRabbit also works with GitLab, Azure DevOps, and Bitbucket. For more information, see [Integrate with Git platforms](/platforms/).
-:::
+<Note>
+	While this tutorial focuses on GitHub, CodeRabbit also works with GitLab,
+	Azure DevOps, and Bitbucket. For more information, see{" "}
+	<a href="/platforms/">Integrate with Git platforms</a>.
+</Note>
 
 ## Before you begin
 
@@ -30,9 +45,24 @@ Create a new, private repository on GitHub. Name the new repository `coderabbit-
 
 To integrate CodeRabbit with your GitHub account, follow these steps:
 
-1. Visit [the CodeRabbit login page](https://app.coderabbit.ai/login?free-trial).
-1. Click **Login with GitHub**.
-1. Click **Authorize coderabbitai**.
+<ListItems
+	orderedList
+	items={[
+		<>
+			Visit{" "}
+			<a href="https://app.coderabbit.ai/login?free-trial">
+				the CodeRabbit login page
+			</a>
+			.
+		</>,
+		<>
+			Click <strong>Login with GitHub</strong>.
+		</>,
+		<>
+			Click <strong>Authorize coderabbitai</strong>.
+		</>,
+	]}
+/>
 
 CodeRabbit takes a moment to set up the integration. After it finishes, the CodeRabbit dashboard appears.
 
@@ -57,33 +87,42 @@ The following steps initiate a pull request to add a tiny and somewhat flawed Py
 
 Use your usual Git workflow to perform the following steps in the `coderabbit-test` repository:
 
-1. Create a branch named `add-utils`.
-
-1. In that new `add-utils` branch, create a new file called `simple_utils.py`, with the following content:
-
-   ```python
-   # simple_utils.py - A tiny utility library
-
-   def reverse_string(text):
-       """Reverses the characters in a string."""
-       return text[::-1]
-
-   def count_words(sentence):
-       return len(sentence.split())
+<ListItems
+	orderedList
+	items={[
+		"Create a branch named `add-utils`.",
+		<>
+			In that new <code>add-utils</code> branch, create a new file called <code>simple_utils.py</code>, with the following content:
+			<CodeBlock language="python">{`
+# simple_utils.py - A tiny utility library
+
+def reverse_string(text):
+"""Reverses the characters in a string."""
+return text[::-1]
+
+def count_words(sentence):
+return len(sentence.split())
+
+def celsius_to_fahrenheit(celsius):
+return (celsius \* 9/5) + 32
+`}</CodeBlock>
+		</>,
+		"Commit the added file to the `add-utils`branch. Use any text you want for the commit message.",
+		"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.",
+]}
+/>
 
-   def celsius_to_fahrenheit(celsius):
-       return (celsius * 9/5) + 32
-   ```
-
-1. Commit the added file to the `add-utils` branch. Use any text you want for the commit message.
+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:
 
-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.
+<ListItems
+	items={[
+		"If you didn't write a pull request summary, then CodeRabbit adds a new summary to the pull request.",
+		"CodeRabbit posts a comment titled **Walkthrough** containing analysis and commentary about the content of the pull request.",
+		"CodeRabbit attaches a detailed code review to the pull request as another comment.",
 
-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:
+    ]}
 
-- If you didn't write a pull request summary, then CodeRabbit adds a new summary to the pull request.
-- CodeRabbit posts a comment titled **Walkthrough** containing analysis and commentary about the content of the pull request.
-- CodeRabbit attaches a detailed code review to the pull request as another comment.
+/>
 
 Part of the review resembles the following screenshot:
 
@@ -103,13 +142,15 @@ After CodeRabbit reviews a pull request, you can converse with it about its revi
 
    After a few moments, CodeRabbit posts its reply, explaining its motivations for its recommendation. The reply might resemble the following:
 
-   > 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.
-   >
-   > 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.
-   >
-   > 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?
+<ChatBubble>
+	{`> 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.
+>
+> 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.
+>
+> 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?`}
+</ChatBubble>
 
-   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.
+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.
 
 1. Post the following as another new comment:
 

docs/overview/introduction.md → docs/overview/introduction.mdx

@@ -9,6 +9,11 @@ description:
 slug: "/"
 ---
 
+import ListItems from "../../src/components/ListItems"
+import InfoBox from "../../src/components/InfoBox"
+import PlatformGrid from "../../src/components/PlatformGrid"
+import PlatformCard from "../../src/components/PlatformCard"
+
 # Introduction
 
 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
 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.
 
 <div class="video-container">
-  <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>
+	<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>
 </div>
 
 ## Core features
 
 Core CodeRabbit features include the following:
 
-- Integrates rapidly with popular Git platforms and workflows.
-- Applies dozens of open-source, industry-standard code analyzers to every commit.
-- Implements code reviews as familiar pull-request comments.
-- Works with contributors through natural-language conversation in comments.
-- Learns and adapts to your team's code style and review preferences.
-- Provides an observability dashboard of code-contribution activity.
-- Practices strong privacy and security, with no retention of analyzed code.
-- Offers free use for public repositories, and flexible pricing for private codebases.
+<ListItems
+	items={[
+		"Integrates rapidly with popular Git platforms and workflows.",
+		"Applies dozens of open-source, industry-standard code analyzers to every commit.",
+		"Implements code reviews as familiar pull-request comments.",
+		"Works with contributors through natural-language conversation in comments.",
+		"Learns and adapts to your team's code style and review preferences.",
+		"Provides an observability dashboard of code-contribution activity.",
+		"Practices strong privacy and security, with no retention of analyzed code.",
+		"Offers free use for public repositories, and flexible pricing for private codebases.",
+	]}
+/>
 
 ## Seamless workflow integration
 
@@ -58,52 +74,93 @@ No matter how you tune and customize CodeRabbit, its default settings make it us
 
 CodeRabbit integrates in just a few clicks with many popular Git platforms:
 
-- GitHub, GitHub Enterprise Cloud, GitHub Enterprise Server,
-- GitLab, GitLab Self-Managed
-- Azure DevOps
-- Bitbucket Cloud
-
-For more information, see [Supported Git Platforms](/platforms/).
+<PlatformGrid>
+	<PlatformCard
+		imageSrc="/img/overview/Github.png"
+		name="GitHub, including GitHub Enterprise Server"
+	/>
+	<PlatformCard
+		imageSrc="/img/overview/Gitlab.png"
+		name="GitLab, including self-managed GitLab"
+	/>
+	<PlatformCard imageSrc="/img/overview/Bitbucket.png" name="Bitbucket Cloud" />
+	<PlatformCard imageSrc="/img/overview/Azure.png" name="Azure DevOps" />
+</PlatformGrid>
+<InfoBox>
+	For more information, see <a href="/platforms/">Supported Git Platforms</a>.
+</InfoBox>
 
 ### Issue-management integration
 
 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:
 
-- GitHub Issues
-- GitLab Issues
-- Jira
-- Linear
+<PlatformGrid>
+	<PlatformCard imageSrc="img/overview/Github.png" name="GitHub Issues" />
+	<PlatformCard imageSrc="img/overview/Gitlab.png" name="GitLab Issues" />
+	<PlatformCard imageSrc="img/overview/Jira.png" name="Jira" />
+	<PlatformCard imageSrc="img/overview/Linear.png" name="Linear" />
+</PlatformGrid>
 
-For more information, see [Issue Creation](/guides/issue-creation) and [Issue Chat](/guides/issue-chat).
+<InfoBox>
+	For more information, see <a href="/guides/issue-creation">Issue Creation</a>{" "}
+	and <a href="/guides/issue-chat">Issue Chat</a>.
+</InfoBox>
 
 ## Data privacy and security
 
 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:
 
-- All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes.
-- We don't use your code, code reviews, or other collected data to train LLMs.
-- CodeRabbit doesn't share any collected customer data with third parties.
-- We keep all customer data confidential, and isolated by organization.
-- Our data collection and storage practices comply with SOC 2 and GDPR standards.
-
-For more information about how we protect your data, see [the CodeRabbit Trust Center](https://trust.coderabbit.ai).
+<ListItems
+	items={[
+		"All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes.",
+		"We don't use your code, code reviews, or other collected data to train LLMs.",
+		"CodeRabbit doesn't share any collected customer data with third parties.",
+		"Works with contributors through natural-language conversation in comments.",
+		"We keep all customer data confidential, and isolated by organization.",
+		"Our data collection and storage practices comply with SOC 2 and GDPR standards.",
+	]}
+/>
+
+<InfoBox>
+	For more information about how we protect your data, see{" "}
+	<a href="https://trust.coderabbit.ai">the CodeRabbit Trust Center</a>.
+</InfoBox>
 
 ## Flexible pricing, free for public repositories
 
 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.
 
-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).
+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.
+
+<InfoBox>
+	For more information, see{" "}
+	<a href="https://www.coderabbit.ai/pricing">Pricing</a>.
+</InfoBox>
 
 ## Review local changes from within VSCode
 
 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.
 
-For more information, see [Review local changes](/code-editors).
+<InfoBox>
+	For more information, see <a href="/code-editors">Review local changes</a>.
+</InfoBox>
 
 ## What's next
 
-- [Quickstart](/getting-started/quickstart/) lets you experience your first CodeRabbit code review first-hand.
-
-- [Review local changes](/code-editors) guides you through installing and using a subset of CodeRabbit features directly from your code editor.
-
-- [Why CodeRabbit?](/overview/why-coderabbit) dives further into the philosophies and technologies that drive CodeRabbit.
+<ListItems
+	items={[
+		<>
+			<a href="/getting-started/quickstart/">Quickstart</a> lets you experience
+			your first CodeRabbit code review first-hand.
+		</>,
+		<>
+			<a href="/code-editors">Review local changes</a> guides you through
+			installing and using a subset of CodeRabbit features directly from your
+			code editor.
+		</>,
+		<>
+			<a href="/overview/why-coderabbit">Why CodeRabbit?</a> dives further into
+			the philosophies and technologies that drive CodeRabbit.
+		</>,
+	]}
+/>

docusaurus.config.ts

@@ -273,8 +273,8 @@ const config: Config = {
 			],
 		},
 		prism: {
-			theme: prismThemes.github,
-			darkTheme: prismThemes.dracula,
+			theme: prismThemes.nightOwl,
+			darkTheme: prismThemes.nightOwl,
 		},
 		algolia: {
 			// The application ID provided by Algolia

src/components/ChatBubble/ChatBubble.module.css

@@ -0,0 +1,11 @@
+.chatBubble {
+	background: var(--imf-text-button-color-bg);
+	color: #222;
+	border-radius: 6px;
+	padding: 1em 1.2em;
+	margin: 1em 0;
+	font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace;
+	font-size: 0.98em;
+	white-space: pre-wrap;
+	word-break: break-word;
+}

src/components/ChatBubble/ChatBubble.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import styles from "./ChatBubble.module.css"
+
+export default function ChatBubble({
+	children,
+}: {
+	children: React.ReactNode
+}) {
+	return <div className={styles.chatBubble}>{children}</div>
+}

src/components/ChatBubble/index.ts

@@ -0,0 +1 @@
+export { default } from "./ChatBubble"

src/components/InfoBox/InfoBox.module.css

@@ -0,0 +1,19 @@
+.infoBox {
+	border: 2px solid var(--imf-color-border-orange);
+	border-radius: 12px;
+	background: var(--imf-color-background-orange-light);
+	padding: 0.7em;
+}
+
+.infoBox p {
+	margin: 0rem;
+}
+
+.infoBox a {
+	color: var(--ifm-color-primary);
+	text-decoration: none;
+}
+
+.infoBox a:hover {
+	text-decoration: underline;
+}