Skip to content

Commit 8c4444d

Browse files
PraneethKulukuri26PraneethKulukuri26
committed
feat: implement sidebar navigation, project workspace management, and core UI components for API documentation
1 parent 1b6a7a2 commit 8c4444d

11 files changed

Lines changed: 900 additions & 549 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "api-documenter",
3-
"version": "1.0.18",
3+
"version": "1.0.19",
44
"description": "Self-hosted Postman alternative with folder-level RBAC and offline-first documentation",
55
"main": "./out/main/index.js",
66
"author": "Praneeth Kulukuri",

‎src/main/index.ts‎

Lines changed: 138 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -165,186 +165,218 @@ async function generatePdfBuffer(markdownContent: string) {
165165
margin: 20mm;
166166
}
167167
body {
168-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
169-
line-height: 1.5;
168+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
169+
line-height: 1.6;
170170
color: #111827;
171171
background-color: #ffffff;
172172
margin: 0;
173173
padding: 0;
174+
-webkit-font-smoothing: antialiased;
174175
}
175176
.container {
176177
width: 100%;
178+
max-width: 800px;
179+
margin: 0 auto;
177180
}
181+
182+
/* --- Typography --- */
178183
h1 {
179-
font-size: 2.5rem;
180-
font-weight: 800;
184+
font-size: 3.5rem;
185+
font-weight: 900;
181186
color: #111827;
182187
margin-top: 0;
188+
margin-bottom: 32px;
189+
letter-spacing: -0.04em;
190+
line-height: 1.1;
191+
text-align: center;
192+
}
193+
h2 {
194+
font-size: 2.2rem;
195+
font-weight: 800;
196+
color: #111827;
197+
margin-top: 64px;
183198
margin-bottom: 24px;
184-
border-bottom: 2px solid #E5E7EB;
199+
letter-spacing: -0.02em;
200+
border-bottom: 2px solid #F3F4F6;
185201
padding-bottom: 12px;
186202
}
187-
h2 {
188-
font-size: 1.875rem;
203+
h3 {
204+
font-size: 1.6rem;
189205
font-weight: 700;
190206
color: #1F2937;
191-
margin-top: 48px;
207+
margin-top: 40px;
192208
margin-bottom: 16px;
193-
background: #F3F4F6;
194-
padding: 12px 16px;
195-
border-radius: 8px;
209+
display: flex;
210+
align-items: center;
211+
gap: 12px;
196212
}
197-
h3 {
198-
font-size: 1.5rem;
199-
font-weight: 600;
213+
h4 {
214+
font-size: 1.1rem;
215+
font-weight: 700;
200216
color: #374151;
201-
margin-top: 32px;
217+
margin-top: 28px;
202218
margin-bottom: 12px;
203-
border-left: 4px solid #3B82F6;
204-
padding-left: 16px;
205-
}
206-
h4 {
207-
font-size: 1.125rem;
208-
font-weight: 600;
209-
color: #4B5563;
210-
margin-top: 24px;
211-
margin-bottom: 8px;
212219
text-transform: uppercase;
213-
letter-spacing: 0.025em;
214-
}
215-
h5 {
216-
font-size: 1rem;
217-
font-weight: 600;
220+
letter-spacing: 0.05em;
218221
color: #6B7280;
219-
margin-top: 16px;
220-
margin-bottom: 8px;
221222
}
222223
p {
223-
margin: 12px 0;
224+
margin: 16px 0;
225+
color: #374151;
226+
font-size: 1.05rem;
224227
}
228+
229+
/* --- API Method Badges --- */
225230
.method {
226231
display: inline-block;
227-
padding: 2px 8px;
228-
border-radius: 4px;
232+
padding: 4px 10px;
233+
border-radius: 6px;
229234
font-family: monospace;
230-
font-weight: 700;
231-
font-size: 0.875rem;
235+
font-weight: 800;
236+
font-size: 0.85em;
237+
text-transform: uppercase;
238+
letter-spacing: 0.05em;
232239
margin-right: 8px;
233-
color: white;
234-
}
235-
.method-GET { background: #10B981; }
236-
.method-POST { background: #3B82F6; }
237-
.method-PUT { background: #F59E0B; }
238-
.method-DELETE { background: #EF4444; }
239-
.method-PATCH { background: #8B5CF6; }
240-
241-
/* Table of Contents Styling */
242-
.toc-link {
243-
color: #2563EB;
244-
text-decoration: none;
245-
}
246-
.toc-list {
247-
list-style: none;
248-
padding-left: 0;
249-
}
250-
.toc-item {
251-
margin-bottom: 8px;
252-
}
253-
254-
/* Page Break support */
255-
.page-break {
256-
page-break-after: always;
257-
}
258-
259-
/* Custom Header IDs for TOC anchoring */
260-
h2[id], h3[id] {
261-
scroll-margin-top: 20px;
262240
}
241+
.method-GET { background: #ECFDF5; color: #065F46; border: 1px solid #D1FAE5; }
242+
.method-POST { background: #EFF6FF; color: #1E40AF; border: 1px solid #DBEAFE; }
243+
.method-PUT { background: #FFFBEB; color: #92400E; border: 1px solid #FEF3C7; }
244+
.method-DELETE { background: #FEF2F2; color: #991B1B; border: 1px solid #FEE2E2; }
245+
.method-PATCH { background: #F5F3FF; color: #5B21B6; border: 1px solid #EDE9FE; }
263246
264247
.status-code {
265248
display: inline-block;
266-
padding: 2px 6px;
249+
padding: 2px 8px;
267250
border-radius: 4px;
268251
font-weight: 700;
269-
font-size: 0.8125rem;
252+
font-size: 0.9em;
270253
margin-left: 8px;
271254
}
272255
.status-2xx { background: #DCFCE7; color: #166534; }
273-
.status-3xx { background: #FEF3C7; color: #92400E; }
274-
.status-4xx { background: #FEE2E2; color: #991B1B; }
275-
.status-5xx { background: #FEF2F2; color: #991B1B; }
256+
.status-3xx { background: #E0F2FE; color: #075985; }
257+
.status-4xx { background: #FFEDD5; color: #9A3412; }
258+
.status-5xx { background: #FEE2E2; color: #991B1B; }
276259
277-
.endpoint-header {
278-
display: flex;
279-
align-items: center;
280-
gap: 12px;
281-
margin-bottom: 24px;
260+
/* --- Table of Contents (Premium Modern) --- */
261+
.toc-container {
262+
margin: 80px 0;
282263
}
283-
264+
.toc-title-bar {
265+
border-bottom: 3px solid #3B82F6;
266+
margin-bottom: 48px;
267+
padding-bottom: 24px;
268+
}
269+
.toc-title-bar h2 {
270+
margin: 0 !important;
271+
font-size: 3rem !important;
272+
border-bottom: none !important;
273+
color: #111827 !important;
274+
}
275+
.toc-list { display: flex; flex-direction: column; gap: 32px; }
276+
.toc-folder-group { position: relative; }
277+
.toc-folder-item { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
278+
.toc-folder-number {
279+
background: #F3F4F6;
280+
color: #3B82F6;
281+
font-weight: 800;
282+
padding: 2px 8px;
283+
border-radius: 6px;
284+
font-size: 0.9em;
285+
min-width: 32px;
286+
text-align: center;
287+
font-family: monospace;
288+
}
289+
.toc-folder-link {
290+
color: #111827;
291+
text-decoration: none;
292+
font-size: 1.4rem;
293+
font-weight: 800;
294+
}
295+
.toc-endpoints-container {
296+
border-left: 2px solid #F3F4F6;
297+
margin-left: 15px;
298+
padding-left: 32px;
299+
display: flex;
300+
flex-direction: column;
301+
gap: 12px;
302+
}
303+
.toc-endpoint-item { display: flex; align-items: center; gap: 12px; position: relative; }
304+
.toc-endpoint-item::before {
305+
content: "";
306+
position: absolute;
307+
left: -33px;
308+
top: 50%;
309+
width: 12px;
310+
height: 2px;
311+
background: #F3F4F6;
312+
}
313+
.toc-endpoint-bullet { display: none; }
314+
.toc-endpoint-link { color: #4B5563; text-decoration: none; font-size: 1.1rem; font-weight: 500; }
315+
316+
/* --- Code & Pre --- */
284317
pre {
285-
background-color: #0F172A;
286-
color: #CBD5E1;
287-
padding: 18px;
318+
background-color: #f8fafc;
319+
color: #1e293b;
320+
padding: 24px;
288321
border-radius: 12px;
289-
font-family: 'ui-monospace', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
290-
font-size: 0.875rem;
291-
line-height: 1.6;
322+
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
323+
font-size: 0.9rem;
324+
line-height: 1.7;
292325
overflow-x: auto;
293-
margin: 16px 0;
294-
border: 1px solid #1E293B;
295-
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
326+
margin: 24px 0;
327+
border: 1px solid #e2e8f0;
296328
}
297329
code {
298-
font-family: 'ui-monospace', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
299-
background-color: #F1F5F9;
300-
color: #334155;
330+
font-family: inherit;
331+
background-color: #f1f5f9;
332+
color: #475569;
301333
padding: 0.2rem 0.4rem;
302334
border-radius: 4px;
303-
font-size: 0.8125rem;
335+
font-size: 0.9em;
304336
}
305337
pre code {
306338
background-color: transparent;
307339
color: inherit;
308340
padding: 0;
309341
}
342+
343+
/* --- Tables --- */
310344
table {
311345
width: 100%;
312346
border-collapse: collapse;
313-
margin: 24px 0;
314-
font-size: 0.875rem;
347+
margin: 32px 0;
315348
}
316349
table th, table td {
317-
padding: 12px 16px;
318-
border: 1px solid #E2E8F0;
350+
padding: 14px 16px;
351+
border: 1px solid #E5E7EB;
319352
text-align: left;
320353
vertical-align: top;
321354
}
322355
table th {
323-
background-color: #F8FAFC;
356+
background-color: #F9FAFB;
324357
font-weight: 700;
325-
color: #475569;
358+
color: #374151;
326359
text-transform: uppercase;
327360
font-size: 0.75rem;
328361
letter-spacing: 0.05em;
329362
}
363+
364+
/* --- Helpers --- */
365+
.page-break {
366+
page-break-after: always;
367+
}
330368
blockquote {
331-
padding: 12px 24px;
332-
color: #64748B;
333-
border-left: 6px solid #E2E8F0;
334-
background: #F8FAFC;
369+
border-left: 4px solid #3B82F6;
370+
padding: 8px 16px;
335371
margin: 24px 0;
372+
background: #F9FAFB;
373+
color: #4B5563;
336374
font-style: italic;
337375
border-radius: 0 8px 8px 0;
338376
}
339-
.hr {
340-
border: none;
341-
border-top: 2px solid #F1F5F9;
342-
margin: 60px 0;
343-
}
344377
img {
345378
max-width: 100%;
346-
border-radius: 8px;
347-
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
379+
border-radius: 12px;
348380
}
349381
</style>
350382
</head>

0 commit comments

Comments
 (0)