Skip to content

Commit fd6424e

Browse files
DevRohit06claude
DevRohit06
and
claude
committed
feat: add RequestExample/ResponseExample components to API docs and sidebar anchors
Migrate inline example request/response blocks to RequestExample and ResponseExample MDX components with tabbed cURL/JavaScript/Python samples. Add anchors config to docs-config.json for section-based sidebar switching. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent cac06e8 commit fd6424e

10 files changed

Lines changed: 597 additions & 177 deletions

‎api/delete-users-id.mdx‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ Permanently deletes a user from the system. This action cannot be undone.
2929

3030
Returns an empty object on successful deletion.
3131

32-
```json
33-
{}
34-
```
35-
3632
## Error Responses
3733

3834
| Status | Description |
@@ -53,3 +49,54 @@ Returns an empty object on successful deletion.
5349
This operation is irreversible. Consider implementing a confirmation step in your UI.
5450
</Step>
5551
</Steps>
52+
53+
<RequestExample>
54+
<Tabs items={["cURL", "JavaScript", "Python"]}>
55+
<Tab title="cURL">
56+
```bash
57+
curl -X DELETE "https://jsonplaceholder.typicode.com/users/1" \
58+
-H "Authorization: Bearer <token>"
59+
```
60+
</Tab>
61+
<Tab title="JavaScript">
62+
```javascript
63+
const response = await fetch("https://jsonplaceholder.typicode.com/users/1", {
64+
method: "DELETE",
65+
headers: {
66+
"Authorization": "Bearer <token>"
67+
}
68+
});
69+
70+
console.log(response.status); // 200
71+
```
72+
</Tab>
73+
<Tab title="Python">
74+
```python
75+
import requests
76+
77+
response = requests.delete(
78+
"https://jsonplaceholder.typicode.com/users/1",
79+
headers={"Authorization": "Bearer <token>"}
80+
)
81+
print(response.status_code)
82+
```
83+
</Tab>
84+
</Tabs>
85+
</RequestExample>
86+
87+
<ResponseExample>
88+
<Tabs items={["200", "404"]}>
89+
<Tab title="200">
90+
```json
91+
{}
92+
```
93+
</Tab>
94+
<Tab title="404">
95+
```json
96+
{
97+
"error": "User not found"
98+
}
99+
```
100+
</Tab>
101+
</Tabs>
102+
</ResponseExample>

‎api/get-posts-id-comments.mdx‎

Lines changed: 57 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -42,27 +42,6 @@ Returns an array of comment objects.
4242
Content of the comment
4343
</ResponseField>
4444

45-
## Example Response
46-
47-
```json
48-
[
49-
{
50-
"postId": 1,
51-
"id": 1,
52-
"name": "id labore ex et quam laborum",
53-
"email": "Eliseo@gardner.biz",
54-
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
55-
},
56-
{
57-
"postId": 1,
58-
"id": 2,
59-
"name": "quo vero reiciendis velit similique earum",
60-
"email": "Jayne_Kuhic@sydney.com",
61-
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
62-
}
63-
]
64-
```
65-
6645
## Related Endpoints
6746

6847
<Card title="Get Post Details" href="/api/get-posts-id" icon="lucide:file-text">
@@ -74,3 +53,60 @@ Returns an array of comment objects.
7453
| Status | Description |
7554
|--------|-------------|
7655
| `404` | Post not found - the specified post ID does not exist |
56+
57+
<RequestExample>
58+
<Tabs items={["cURL", "JavaScript", "Python"]}>
59+
<Tab title="cURL">
60+
```bash
61+
curl -X GET "https://jsonplaceholder.typicode.com/posts/1/comments"
62+
```
63+
</Tab>
64+
<Tab title="JavaScript">
65+
```javascript
66+
const response = await fetch("https://jsonplaceholder.typicode.com/posts/1/comments");
67+
const data = await response.json();
68+
console.log(data);
69+
```
70+
</Tab>
71+
<Tab title="Python">
72+
```python
73+
import requests
74+
75+
response = requests.get("https://jsonplaceholder.typicode.com/posts/1/comments")
76+
print(response.json())
77+
```
78+
</Tab>
79+
</Tabs>
80+
</RequestExample>
81+
82+
<ResponseExample>
83+
<Tabs items={["200", "404"]}>
84+
<Tab title="200">
85+
```json
86+
[
87+
{
88+
"postId": 1,
89+
"id": 1,
90+
"name": "id labore ex et quam laborum",
91+
"email": "Eliseo@gardner.biz",
92+
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
93+
},
94+
{
95+
"postId": 1,
96+
"id": 2,
97+
"name": "quo vero reiciendis velit similique earum",
98+
"email": "Jayne_Kuhic@sydney.com",
99+
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
100+
}
101+
]
102+
```
103+
</Tab>
104+
<Tab title="404">
105+
```json
106+
{
107+
"error": "Post not found"
108+
}
109+
```
110+
</Tab>
111+
</Tabs>
112+
</ResponseExample>

‎api/get-posts-id.mdx‎

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,6 @@ Retrieves detailed information about a specific blog post.
3636
Full content of the post
3737
</ResponseField>
3838

39-
## Example Response
40-
41-
```json
42-
{
43-
"userId": 1,
44-
"id": 1,
45-
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
46-
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
47-
}
48-
```
49-
5039
## Related Endpoints
5140

5241
<CardGroup cols={2}>
@@ -63,3 +52,50 @@ Retrieves detailed information about a specific blog post.
6352
| Status | Description |
6453
|--------|-------------|
6554
| `404` | Post not found - the specified ID does not exist |
55+
56+
<RequestExample>
57+
<Tabs items={["cURL", "JavaScript", "Python"]}>
58+
<Tab title="cURL">
59+
```bash
60+
curl -X GET "https://jsonplaceholder.typicode.com/posts/1"
61+
```
62+
</Tab>
63+
<Tab title="JavaScript">
64+
```javascript
65+
const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
66+
const data = await response.json();
67+
console.log(data);
68+
```
69+
</Tab>
70+
<Tab title="Python">
71+
```python
72+
import requests
73+
74+
response = requests.get("https://jsonplaceholder.typicode.com/posts/1")
75+
print(response.json())
76+
```
77+
</Tab>
78+
</Tabs>
79+
</RequestExample>
80+
81+
<ResponseExample>
82+
<Tabs items={["200", "404"]}>
83+
<Tab title="200">
84+
```json
85+
{
86+
"userId": 1,
87+
"id": 1,
88+
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
89+
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
90+
}
91+
```
92+
</Tab>
93+
<Tab title="404">
94+
```json
95+
{
96+
"error": "Post not found"
97+
}
98+
```
99+
</Tab>
100+
</Tabs>
101+
</ResponseExample>

‎api/get-posts.mdx‎

Lines changed: 51 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -44,25 +44,6 @@ Returns an array of post objects.
4444
Content of the post
4545
</ResponseField>
4646

47-
## Example Response
48-
49-
```json
50-
[
51-
{
52-
"userId": 1,
53-
"id": 1,
54-
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
55-
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita..."
56-
},
57-
{
58-
"userId": 1,
59-
"id": 2,
60-
"title": "qui est esse",
61-
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor..."
62-
}
63-
]
64-
```
65-
6647
## Filtering Examples
6748

6849
### Get posts by a specific user
@@ -76,3 +57,54 @@ GET /posts?userId=1
7657
```bash
7758
GET /posts?_start=10&_limit=5
7859
```
60+
61+
<RequestExample>
62+
<Tabs items={["cURL", "JavaScript", "Python"]}>
63+
<Tab title="cURL">
64+
```bash
65+
curl -X GET "https://jsonplaceholder.typicode.com/posts?_limit=10"
66+
```
67+
</Tab>
68+
<Tab title="JavaScript">
69+
```javascript
70+
const response = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=10");
71+
const data = await response.json();
72+
console.log(data);
73+
```
74+
</Tab>
75+
<Tab title="Python">
76+
```python
77+
import requests
78+
79+
response = requests.get(
80+
"https://jsonplaceholder.typicode.com/posts",
81+
params={"_limit": 10}
82+
)
83+
print(response.json())
84+
```
85+
</Tab>
86+
</Tabs>
87+
</RequestExample>
88+
89+
<ResponseExample>
90+
<Tabs items={["200"]}>
91+
<Tab title="200">
92+
```json
93+
[
94+
{
95+
"userId": 1,
96+
"id": 1,
97+
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
98+
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita..."
99+
},
100+
{
101+
"userId": 1,
102+
"id": 2,
103+
"title": "qui est esse",
104+
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor..."
105+
}
106+
]
107+
```
108+
</Tab>
109+
</Tabs>
110+
</ResponseExample>

0 commit comments

Comments
 (0)