Skip to content

Commit eb0ec56

Browse files
Kyle McLarenclaude
Kyle McLaren
and
claude
committed
Style sidebar method badges: icon-only, auto-expand, unbold labels
- Change sidebar badges to use icon characters (↙, ↗, ✕, ⚡) matching MethodHeader - Auto-expand nested groups (collapsed: false) - Unbold sidebar group labels - Add CSS for method badge colors matching main content 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 6bc1580 commit eb0ec56

File tree

3 files changed

+95
-39
lines changed

3 files changed

+95
-39
lines changed

‎scripts/generate-api-docs.ts‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1197,17 +1197,18 @@ interface SidebarGroup {
11971197
type SidebarItem = SidebarLink | SidebarGroup;
11981198

11991199
function getMethodBadge(method: string): SidebarBadge {
1200-
const variants: Record<string, SidebarBadge['variant']> = {
1201-
GET: 'note',
1202-
POST: 'success',
1203-
PUT: 'caution',
1204-
PATCH: 'caution',
1205-
DELETE: 'danger',
1206-
WSS: 'tip',
1200+
// Icon characters matching MethodHeader component
1201+
const icons: Record<string, string> = {
1202+
GET: '↙',
1203+
POST: '↗',
1204+
PUT: '↗',
1205+
PATCH: '↗',
1206+
DELETE: '✕',
1207+
WSS: '⚡',
12071208
};
12081209
return {
1209-
text: method,
1210-
variant: variants[method.toUpperCase()] || 'default',
1210+
text: icons[method.toUpperCase()] || method,
1211+
variant: 'default',
12111212
class: `sidebar-method-${method.toLowerCase()}`,
12121213
};
12131214
}
@@ -1239,7 +1240,7 @@ function generateSidebarItems(
12391240
}));
12401241
items.push({
12411242
label: page.title,
1242-
collapsed: true,
1243+
collapsed: false,
12431244
items: endpointItems,
12441245
});
12451246
} else {
@@ -1261,7 +1262,7 @@ function generateSidebarItems(
12611262
}));
12621263
items.push({
12631264
label: getCategoryTitle(category),
1264-
collapsed: true,
1265+
collapsed: false,
12651266
items: endpointItems,
12661267
});
12671268
} else {

‎src/lib/sidebar.ts‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -118,147 +118,147 @@ export const sidebarConfig: SidebarGroup[] = [
118118
{ label: 'Overview', slug: `api/${apiVersion}` },
119119
{
120120
label: 'Sprites',
121-
collapsed: true,
121+
collapsed: false,
122122
items: [
123123
{
124124
label: 'Create Sprite',
125125
link: `/api/${apiVersion}/sprites#create-sprite`,
126-
badge: { text: 'POST', variant: 'success' as const },
126+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-post' },
127127
},
128128
{
129129
label: 'List Sprites',
130130
link: `/api/${apiVersion}/sprites#list-sprites`,
131-
badge: { text: 'GET', variant: 'note' as const },
131+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
132132
},
133133
{
134134
label: 'Get Sprite',
135135
link: `/api/${apiVersion}/sprites#get-sprite`,
136-
badge: { text: 'GET', variant: 'note' as const },
136+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
137137
},
138138
{
139139
label: 'Update Sprite',
140140
link: `/api/${apiVersion}/sprites#update-sprite`,
141-
badge: { text: 'PUT', variant: 'caution' as const },
141+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-put' },
142142
},
143143
{
144144
label: 'Delete Sprite',
145145
link: `/api/${apiVersion}/sprites#delete-sprite`,
146-
badge: { text: 'DELETE', variant: 'danger' as const },
146+
badge: { text: '✕', variant: 'default' as const, class: 'sidebar-method-delete' },
147147
},
148148
],
149149
},
150150
{
151151
label: 'Checkpoints',
152-
collapsed: true,
152+
collapsed: false,
153153
items: [
154154
{
155155
label: 'Create Checkpoint',
156156
link: `/api/${apiVersion}/checkpoints#create-checkpoint`,
157-
badge: { text: 'POST', variant: 'success' as const },
157+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-post' },
158158
},
159159
{
160160
label: 'List Checkpoints',
161161
link: `/api/${apiVersion}/checkpoints#list-checkpoints`,
162-
badge: { text: 'GET', variant: 'note' as const },
162+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
163163
},
164164
{
165165
label: 'Get Checkpoint',
166166
link: `/api/${apiVersion}/checkpoints#get-checkpoint`,
167-
badge: { text: 'GET', variant: 'note' as const },
167+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
168168
},
169169
{
170170
label: 'Restore Checkpoint',
171171
link: `/api/${apiVersion}/checkpoints#restore-checkpoint`,
172-
badge: { text: 'POST', variant: 'success' as const },
172+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-post' },
173173
},
174174
],
175175
},
176176
{
177177
label: 'Exec',
178-
collapsed: true,
178+
collapsed: false,
179179
items: [
180180
{
181181
label: 'Execute Command',
182182
link: `/api/${apiVersion}/exec#execute-command`,
183-
badge: { text: 'WSS', variant: 'tip' as const },
183+
badge: { text: '⚡', variant: 'default' as const, class: 'sidebar-method-wss' },
184184
},
185185
{
186186
label: 'List Exec Sessions',
187187
link: `/api/${apiVersion}/exec#list-exec-sessions`,
188-
badge: { text: 'GET', variant: 'note' as const },
188+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
189189
},
190190
{
191191
label: 'Attach to Exec Session',
192192
link: `/api/${apiVersion}/exec#attach-to-exec-session`,
193-
badge: { text: 'WSS', variant: 'tip' as const },
193+
badge: { text: '⚡', variant: 'default' as const, class: 'sidebar-method-wss' },
194194
},
195195
{
196196
label: 'Kill Exec Session',
197197
link: `/api/${apiVersion}/exec#kill-exec-session`,
198-
badge: { text: 'POST', variant: 'success' as const },
198+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-post' },
199199
},
200200
],
201201
},
202202
{
203203
label: 'Policy',
204-
collapsed: true,
204+
collapsed: false,
205205
items: [
206206
{
207207
label: 'Get Network Policy',
208208
link: `/api/${apiVersion}/policy#get-network-policy`,
209-
badge: { text: 'GET', variant: 'note' as const },
209+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
210210
},
211211
{
212212
label: 'Set Network Policy',
213213
link: `/api/${apiVersion}/policy#set-network-policy`,
214-
badge: { text: 'POST', variant: 'success' as const },
214+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-post' },
215215
},
216216
],
217217
},
218218
{
219219
label: 'HTTP Proxy',
220-
collapsed: true,
220+
collapsed: false,
221221
items: [
222222
{
223223
label: 'TCP Proxy',
224224
link: `/api/${apiVersion}/proxy#tcp-proxy`,
225-
badge: { text: 'WSS', variant: 'tip' as const },
225+
badge: { text: '⚡', variant: 'default' as const, class: 'sidebar-method-wss' },
226226
},
227227
],
228228
},
229229
{
230230
label: 'Services',
231-
collapsed: true,
231+
collapsed: false,
232232
items: [
233233
{
234234
label: 'List Services',
235235
link: `/api/${apiVersion}/services#list-services`,
236-
badge: { text: 'GET', variant: 'note' as const },
236+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
237237
},
238238
{
239239
label: 'Get Service',
240240
link: `/api/${apiVersion}/services#get-service`,
241-
badge: { text: 'GET', variant: 'note' as const },
241+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
242242
},
243243
{
244244
label: 'Create Service',
245245
link: `/api/${apiVersion}/services#create-service`,
246-
badge: { text: 'PUT', variant: 'caution' as const },
246+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-put' },
247247
},
248248
{
249249
label: 'Start Service',
250250
link: `/api/${apiVersion}/services#start-service`,
251-
badge: { text: 'POST', variant: 'success' as const },
251+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-post' },
252252
},
253253
{
254254
label: 'Stop Service',
255255
link: `/api/${apiVersion}/services#stop-service`,
256-
badge: { text: 'POST', variant: 'success' as const },
256+
badge: { text: '↗', variant: 'default' as const, class: 'sidebar-method-post' },
257257
},
258258
{
259259
label: 'Get Service Logs',
260260
link: `/api/${apiVersion}/services#get-service-logs`,
261-
badge: { text: 'GET', variant: 'note' as const },
261+
badge: { text: '↙', variant: 'default' as const, class: 'sidebar-method-get' },
262262
},
263263
],
264264
},

‎src/styles/custom.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1689,3 +1689,58 @@ h2.method-title {
16891689
width: 32px;
16901690
height: 16px;
16911691
}
1692+
1693+
/* ============================================================================
1694+
Sidebar Method Badges - Icon-only badges matching main content
1695+
============================================================================ */
1696+
1697+
/* Unbold sidebar group labels (nested groups like Sprites, Checkpoints, etc.) */
1698+
.sidebar-content details > summary > div > span {
1699+
font-weight: 400 !important;
1700+
}
1701+
1702+
/* Base badge styling for sidebar method icons */
1703+
.sidebar-content .sl-badge.default {
1704+
font-family: var(--sl-font-system-mono);
1705+
font-size: 0.75rem;
1706+
font-weight: 500;
1707+
padding: 0.125rem 0.25rem;
1708+
margin-left: 0.375rem;
1709+
border-radius: 0.25rem;
1710+
line-height: 1;
1711+
}
1712+
1713+
/* GET - Green (↙ arrow down-left) */
1714+
.sidebar-content .sl-badge.sidebar-method-get {
1715+
color: var(--http-get);
1716+
background: var(--http-get-faint);
1717+
border: 1px solid oklch(0.723 0.219 142.7 / 0.3);
1718+
}
1719+
1720+
/* POST - Blue (↗ arrow up-right) */
1721+
.sidebar-content .sl-badge.sidebar-method-post {
1722+
color: var(--http-post);
1723+
background: var(--http-post-faint);
1724+
border: 1px solid oklch(0.623 0.214 259 / 0.3);
1725+
}
1726+
1727+
/* PUT - Orange (↗ arrow up-right, same as POST) */
1728+
.sidebar-content .sl-badge.sidebar-method-put {
1729+
color: var(--http-put);
1730+
background: var(--http-put-faint);
1731+
border: 1px solid oklch(0.705 0.213 47.6 / 0.3);
1732+
}
1733+
1734+
/* DELETE - Red (✕) */
1735+
.sidebar-content .sl-badge.sidebar-method-delete {
1736+
color: var(--http-delete);
1737+
background: var(--http-delete-faint);
1738+
border: 1px solid oklch(0.577 0.245 27.3 / 0.3);
1739+
}
1740+
1741+
/* WSS - Purple (⚡) */
1742+
.sidebar-content .sl-badge.sidebar-method-wss {
1743+
color: var(--http-ws);
1744+
background: var(--http-ws-faint);
1745+
border: 1px solid oklch(0.558 0.288 302.3 / 0.3);
1746+
}

0 commit comments

Comments
 (0)