docs: add Quickstart guide and replace FeatureList with ListItems com…

…ponent

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

@@ -5,22 +5,35 @@ 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"
+
 # 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 +43,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.
 

docs/overview/introduction.mdx

@@ -9,7 +9,7 @@ description:
 slug: "/"
 ---
 
-import FeatureList from "../../src/components/FeatureList"
+import ListItems from "../../src/components/ListItems"
 import InfoBox from "../../src/components/InfoBox"
 import PlatformGrid from "../../src/components/PlatformGrid"
 import PlatformCard from "../../src/components/PlatformCard"
@@ -37,7 +37,7 @@ Developers can interact directly with the CodeRabbit bot within their existing G
 
 Core CodeRabbit features include the following:
 
-<FeatureList
+<ListItems
 	items={[
 		"Integrates rapidly with popular Git platforms and workflows.",
 		"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
 
 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:
 
-<FeatureList
+<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.",
@@ -147,7 +147,7 @@ As a separate, free product, CodeRabbit offers a VSCode extension that brings a
 
 ## What's next
 
-<FeatureList
+<ListItems
 	items={[
 		<>
 			<a href="/getting-started/quickstart/">Quickstart</a> lets you experience

src/components/FeatureList/FeatureList.module.css → src/components/ListItems/ListItems.module.css

@@ -12,6 +12,12 @@
 	padding: 0;
 }
 
+.crOrderedList {
+	list-style: decimal;
+	margin: 0;
+	padding-left: 1.5em;
+}
+
 .crFeatureList li {
 	position: relative;
 	padding-left: 1.7em;
@@ -20,6 +26,21 @@
 	line-height: 1.6;
 }
 
+.crFeatureList li:last-child {
+	margin-bottom: 0;
+}
+
+.crOrderedList li {
+	margin-bottom: 1em;
+	font-size: 1.08rem;
+	line-height: 1.6;
+	padding-left: 0.3em;
+}
+
+.crOrderedList li:last-child {
+	margin-bottom: 0;
+}
+
 .crFeatureList li:before {
 	content: "";
 	position: absolute;
@@ -38,6 +59,16 @@
 	font-weight: 500;
 }
 
+.crOrderedList li a {
+	color: var(--ifm-color-primary, orange);
+	text-decoration: none;
+	font-weight: 500;
+}
+
 .crFeatureList li a:hover {
 	text-decoration: underline;
 }
+
+.crOrderedList li a:hover {
+	text-decoration: underline;
+}

src/components/ListItems/ListItems.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import styles from "./ListItems.module.css"
+
+interface ListItemsProps {
+	items: React.ReactNode[]
+	className?: string
+	orderedList?: boolean
+}
+
+export const ListItems: React.FC<ListItemsProps> = ({
+	items,
+	className,
+	orderedList = false,
+}) => {
+	const ListTag = orderedList ? "ol" : "ul"
+	const listClassName = orderedList
+		? styles.crOrderedList
+		: styles.crFeatureList
+
+	return (
+		<div className={`${styles.crFeatureCard} ${className || ""}`}>
+			<ListTag className={listClassName}>
+				{items.map((item, index) => (
+					<li key={index}>{item}</li>
+				))}
+			</ListTag>
+		</div>
+	)
+}
+
+export default ListItems

src/components/ListItems/index.ts

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

src/components/Note/Note.module.css

@@ -0,0 +1,42 @@
+.note {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	background: var(--imf-note-background-color);
+	border: 2px solid var(--imf-note-border-color);
+	border-radius: 8px;
+	padding: 1rem 1.2rem;
+	margin: 1.2rem 0;
+	font-size: 1rem;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	margin-bottom: 0.3em;
+}
+
+.icon {
+	font-size: 1.3em;
+	margin-right: 0.5em;
+	color: #2ec4b6;
+	flex-shrink: 0;
+}
+
+.title {
+	font-weight: 600;
+	color: var(--imf-note-text-color);
+}
+
+.text {
+	margin-top: 0.2em;
+}
+.note.text p {
+	margin: 0px;
+}
+.note a {
+	color: var(--imf-note-text-color);
+}
+.note p {
+	margin: 0rem;
+}

src/components/Note/Note.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import styles from "./Note.module.css"
+
+interface NoteProps {
+	children: React.ReactNode
+}
+
+const Note: React.FC<NoteProps> = ({ children }) => (
+	<div className={styles.note}>
+		<div className={styles.header}>
+			<span className={styles.icon}>ℹ️</span>
+			<span className={styles.title}>Note</span>
+		</div>
+		<div className={styles.text}>{children}</div>
+	</div>
+)
+
+export default Note

src/components/Note/index.ts

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

src/css/custom.css

@@ -45,6 +45,9 @@
 	--imf-list-bullets-color: #25bab1;
 	--imf-color-background-orange-light: #fffcfb;
 	--imf-color-border-orange: #ffceb6;
+	--imf-note-border-color: #25bab1;
+	--imf-note-background-color: #f1fffe;
+	--imf-note-text-color: #208682;
 }
 
 [data-theme="dark"] {
@@ -63,6 +66,8 @@
 	--imf-list-bullets-color: #208682;
 	--imf-color-background-orange-light: #232323;
 	--imf-color-border-orange: #232323;
+	--imf-note-border-color: #208682;
+	--imf-note-background-color: #252828;
 }
 
 #__docusaurus {