About

Transparency

The Ripped Guide stores 0 Cookies in your Browser.

We use Privacy-first Umami Analytics to measure site activity.

This does not log any personal information apart from Country of Visit, Resolution, User-Agent and Referrer.

If you wish to opt-out, install uBlock Origin on your browser.

Contributing

Feel free to contribute to the Guide by making a Pull Request or an Issue in our docs repo.
If you think you can help out with the code, feel free to make a PR in our site repo.

Formatting

This website is built using Vite and React with a custom MDX rendering setup. You can write regular Markdown along with custom React components directly in .mdx files.

In brief, here's how a document works:

---
title: My Page
description: A short description for embeds
---

# Header

Here is normal text.

> Quote

## Subheading

Here is a [link](https://ripped.guide)

Here is *italic text*, **bold text**, and **_italic and bold text_**

Here is an unordered list:
- item 1
- item 2

Here is an ordered list:
1. item 1
2. item 2

Here is a superscript^1^

Here is a table:
| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Value 1  | Value 2  | Value 3  |

You can also use HTML tags:

Here is
<u>underlined text</u>
Here is
<small>small text</small>
Here is
<span className="text-red-500">red color text</span>

Rendered Version:

Header

Here is normal text.

Quote

Subheading

Here is a link.

Here is italic text, bold text, italic and bold text, and inline code.

Here is an unordered list:

item 1
item 2

Here is an ordered list:

item 1
item 2

Here is a superscript¹.

Here is a table:

Column 1	Column 2	Column 3
Value 1	Value 2	Value 3

You can also use HTML tags:

Here is underlined text
Here is small text
Here is red color text

Custom Components

We provide several custom MDX components you can use anywhere within the .mdx files.

1. Alerts

Alerts call attention to important information.

<Alert type="info">Here is some helpful information.</Alert>
<Alert type="warn">Watch out! This is a warning.</Alert>
<Alert type="danger">Danger! Do not proceed further.</Alert>

Example:

2. Collapsible

Collapsible sections help hide lengthy information behind an expandable header.

<Collapsible title="My Expandable Section" description="Click here to expand the section" icon="info">
  Here is the hidden content!
</Collapsible>

Example:

Here is the hidden content!

3. Tabs

Tabs allow you to structure content conditionally without taking up too much vertical space.

<Tabs>
  <Tab label="Windows">Download the `.exe` file.</Tab>
  <Tab label="macOS">Download the `.dmg` file.</Tab>
</Tabs>

Example:

Download the .exe file.

4. RouteHeader

Used to document API endpoints efficiently.

<RouteHeader method="GET" url="/api/v1/users/{user.id}" unauthenticated>
  Get User Info
</RouteHeader>

Example:

Get User Info

GET/api/v1/users/{user.id}

5. Changelog

Displays release notes in an organized timeline structure.

<Changelog>
  <ChangelogEntry version="v1.2.0" date="October 24, 2026">
    - Added a new feature - Fixed a bug
  </ChangelogEntry>
  <ChangelogEntry version="v1.1.0" date="September 5, 2026">
    - Initial release
  </ChangelogEntry>
</Changelog>

Example:

v1.2.0

October 24, 2026

Added a new feature - Fixed a bug

v1.1.0

September 5, 2026

Initial release

6. YouTube Embed

Embeds a YouTube video responsively.

<YouTubeEmbed src="https://www.youtube.com/embed/dQw4w9WgXcQ" />

Example:

Thanks to our Contributors:

Loading contributors...