Skip to content

Update Examples page #879

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Examples page #879

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions components/examples.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
---
title: "Examples"
description: "Display code blocks at the top-right of the page on desktop devices"
description: "Display code blocks in the right sidebar on desktop devices"
icon: 'between-horizontal-start'
---

The `<RequestExample>` and `<ResponseExample>` stick code blocks to the top-right of a page even as you scroll. The components work on all pages even if you don't use an API playground.
The `<RequestExample>` and `<ResponseExample>` components display code blocks in the right sidebar to create a two-column layout that keeps examples visible while users scroll through your content. These components are designed for API documentation, but they work on all pages.

`<RequestExample>` and `<ResponseExample>` show up like regular code blocks on mobile.
Common use cases:

## Request Example
- API endpoint documentation with request and response examples
- Configuration examples alongside explanatory text
- Code samples that users reference while following instructions
- Before and after examples in tutorials

The `<RequestExample>` component works similar to [CodeGroup](/components/code-groups), but displays the request content on the right sidebar. Thus, you can put multiple code blocks inside `<RequestExample>`.
On mobile devices, `<RequestExample>` and `<ResponseExample>` components display as regular code blocks and can be scrolled past.

Please set a name on every code block you put inside RequestExample.
## RequestExample

<RequestExample>
````mdx RequestExample Example
Use `<RequestExample>` to pins code examples in the right sidebar. This component works similarly to the [CodeGroup](/components/code-groups) component, but displays the code in the sidebar instead of inline.

You can include multiple code blocks inside a single `<RequestExample>`. Each code block must have a title attribute.

````mdx RequestExample
<RequestExample>

```bash Request
Expand All @@ -25,14 +31,12 @@ Please set a name on every code block you put inside RequestExample.

</RequestExample>
````
</RequestExample>

## Response Example
## ResponseExample

The `<ResponseExample>` component is the same as `<RequestExample>` but will show up underneath it.
The `<ResponseExample>` component pins code examples in the right sidebar beneath any `<RequestExample>` content on the same page.

<ResponseExample>
````mdx ResponseExample Example
````mdx ResponseExample
<ResponseExample>

```json Response
Expand All @@ -41,4 +45,3 @@ The `<ResponseExample>` component is the same as `<RequestExample>` but will sho

</ResponseExample>
````
</ResponseExample>