Skip to content

Commit 9423896

Browse files
MilanPecovMilanPecov
committed
feat(cosmetics) | TOC & API
1 parent cb7933f commit 9423896

3 files changed

Lines changed: 59 additions & 57 deletions

File tree

‎src/docs-app/ui/components/api/ApiExamples.tsx‎

Lines changed: 29 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,14 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
5656
)}
5757
</div>
5858

59-
<div className="space-y-3">
60-
<div className="text-xs font-medium text-muted-foreground/70 flex items-center border-b border-border/30 pb-1.5">
61-
<Terminal className="h-3 w-3 mr-1.5" />
62-
Request Examples
63-
</div>
64-
<Tabs defaultValue="python" className="w-full">
65-
<TabsList className="w-full grid grid-cols-3 h-10 bg-background/50 backdrop-blur-sm border border-border/50 p-1">
59+
<div>
60+
<Tabs defaultValue="python" className="w-full border border-border/40 rounded-md overflow-hidden">
61+
<TabsList className="w-full grid grid-cols-3 h-7 bg-[hsl(var(--prose-pre-bg))] rounded-none p-0">
6662
<TabsTrigger
6763
value="python"
68-
className="flex items-center justify-center gap-2 text-xs font-medium py-2 data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-sm transition-all duration-200 hover:bg-muted/50"
64+
className="flex items-center justify-center gap-1 text-[11px] font-medium rounded-none bg-foreground/[0.07] text-muted-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground transition-all duration-150 hover:bg-foreground/[0.04] hover:text-foreground/80"
6965
>
70-
<svg className="h-3.5 w-3.5" viewBox="0 0 24 24">
66+
<svg className="h-3 w-3" viewBox="0 0 24 24">
7167
<path
7268
fill="currentColor"
7369
d="M12 0C5.371 0 5.125 2.611 5.125 2.611v5.318h6.964v.857H3.354S0 8.737 0 15.429c0 6.691 2.931 6.458 2.931 6.458h4.381v-3.108s-.233-3.109 3.062-3.109h5.289s2.969.049 2.969-2.865V4.692S19.287 0 12 0zM8.857 1.851c.693 0 1.25.557 1.25 1.25a1.25 1.25 0 0 1-2.5 0c0-.693.557-1.25 1.25-1.25z"
@@ -77,13 +73,13 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
7773
d="M12 24c6.629 0 6.875-2.611 6.875-2.611v-5.318H11.91v-.857h8.736S24 15.263 24 8.571c0-6.691-2.931-6.458-2.931-6.458h-4.381v3.108s.233 3.109-3.062 3.109H8.338s-2.969-.049-2.969 2.865v8.114S4.713 24 12 24zm3.143-1.851c-.693 0-1.25-.557-1.25-1.25a1.25 1.25 0 0 1 2.5 0c0 .693-.557 1.25-1.25 1.25z"
7874
/>
7975
</svg>
80-
<span>Python</span>
76+
Python
8177
</TabsTrigger>
8278
<TabsTrigger
8379
value="node"
84-
className="flex items-center justify-center gap-2 text-xs font-medium py-2 data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-sm transition-all duration-200 hover:bg-muted/50"
80+
className="flex items-center justify-center gap-1 text-[11px] font-medium rounded-none bg-foreground/[0.07] text-muted-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground transition-all duration-150 hover:bg-foreground/[0.04] hover:text-foreground/80"
8581
>
86-
<svg className="h-3.5 w-3.5" viewBox="0 0 24 24">
82+
<svg className="h-3 w-3" viewBox="0 0 24 24">
8783
<path
8884
fill="currentColor"
8985
d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm-1.584 17.375a.396.396 0 0 1-.215-.071l-.688-.409c-.103-.058-.052-.078-.019-.09.137-.048.165-.058.312-.143.015-.009.035-.006.05.004l.528.314a.067.067 0 0 0 .064 0l2.058-1.188a.068.068 0 0 0 .032-.058v-2.375c0-.024-.013-.046-.033-.057l-2.057-1.187a.067.067 0 0 0-.064 0l-2.057 1.187a.067.067 0 0 0-.033.057v2.375c0 .023.013.045.031.056l.563.326c.307.154.495-.028.495-.21v-2.344c0-.033.027-.06.06-.06h.261c.033 0 .06.027.06.06v2.344c0 .41-.223.647-.612.647-.12 0-.214 0-.476-.13l-.54-.31a.425.425 0 0 1-.205-.364v-2.375c0-.15.08-.29.205-.365l2.056-1.186a.423.423 0 0 1 .41 0l2.056 1.186a.422.422 0 0 1 .206.365v2.375a.425.425 0 0 1-.206.365l-2.056 1.185a.406.406 0 0 1-.205.073z"
@@ -93,19 +89,19 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
9389
d="M11.063 14.478c-.9 0-1.088-.414-1.088-.76 0-.033.027-.061.06-.061h.266c.03 0 .055.022.06.051.04.276.16.415.702.415.432 0 .615-.098.615-.326 0-.131-.052-.229-.724-.295-.562-.055-.909-.179-.909-.628 0-.414.349-.66.933-.66.657 0 .981.228.1022.717.002.017-.005.033-.018.046s-.03.02-.047.02h-.268a.062.062 0 0 1-.058-.047c-.064-.285-.221-.377-.611-.377-.45 0-.503.157-.503.275 0 .143.062.185.702.264.63.079.932.19.932.657-.001.448-.373.713-1.022.713z"
9490
/>
9591
</svg>
96-
<span>Node.js</span>
92+
Node.js
9793
</TabsTrigger>
9894
<TabsTrigger
9995
value="curl"
100-
className="flex items-center justify-center gap-2 text-xs font-medium py-2 data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-sm transition-all duration-200 hover:bg-muted/50"
96+
className="flex items-center justify-center gap-1 text-[11px] font-medium rounded-none bg-foreground/[0.07] text-muted-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground transition-all duration-150 hover:bg-foreground/[0.04] hover:text-foreground/80"
10197
>
102-
<Terminal className="h-3.5 w-3.5" />
103-
<span>cURL</span>
98+
<Terminal className="h-3 w-3" />
99+
cURL
104100
</TabsTrigger>
105101
</TabsList>
106102

107-
<TabsContent value="python" className="relative mt-3">
108-
<Card className="bg-muted/20 p-0 overflow-hidden rounded border border-border/50">
103+
<TabsContent value="python" className="relative mt-0">
104+
<div className="p-0 overflow-hidden">
109105
<Highlight
110106
code={examples.python}
111107
language="python"
@@ -120,10 +116,8 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
120116
}) => (
121117
<div className="relative">
122118
<pre
123-
className="p-3 font-mono text-xs whitespace-pre overflow-x-auto bg-[hsl(var(--prose-pre-bg))]"
124-
style={{
125-
margin: 0,
126-
}}
119+
className="px-2.5 py-2 font-mono text-xs whitespace-pre overflow-x-auto bg-[hsl(var(--prose-pre-bg))]"
120+
style={{ margin: 0 }}
127121
>
128122
<code className={className}>
129123
{tokens.map((line, i) => (
@@ -149,11 +143,11 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
149143
</div>
150144
)}
151145
</Highlight>
152-
</Card>
146+
</div>
153147
</TabsContent>
154148

155-
<TabsContent value="node" className="relative mt-3">
156-
<Card className="bg-muted/20 p-0 overflow-hidden rounded border border-border/50">
149+
<TabsContent value="node" className="relative mt-0">
150+
<div className="p-0 overflow-hidden">
157151
<Highlight
158152
code={examples.node}
159153
language="javascript"
@@ -168,10 +162,8 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
168162
}) => (
169163
<div className="relative">
170164
<pre
171-
className="p-3 font-mono text-xs whitespace-pre overflow-x-auto bg-[hsl(var(--prose-pre-bg))]"
172-
style={{
173-
margin: 0,
174-
}}
165+
className="px-2.5 py-2 font-mono text-xs whitespace-pre overflow-x-auto bg-[hsl(var(--prose-pre-bg))]"
166+
style={{ margin: 0 }}
175167
>
176168
<code className={className}>
177169
{tokens.map((line, i) => (
@@ -197,11 +189,11 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
197189
</div>
198190
)}
199191
</Highlight>
200-
</Card>
192+
</div>
201193
</TabsContent>
202194

203-
<TabsContent value="curl" className="relative mt-3">
204-
<Card className="bg-muted/20 p-0 overflow-hidden rounded border border-border/50">
195+
<TabsContent value="curl" className="relative mt-0">
196+
<div className="p-0 overflow-hidden">
205197
<Highlight
206198
code={examples.curl}
207199
language="bash"
@@ -216,10 +208,8 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
216208
}) => (
217209
<div className="relative">
218210
<pre
219-
className="p-3 font-mono text-xs whitespace-pre overflow-x-auto max-w-full bg-[hsl(var(--prose-pre-bg))]"
220-
style={{
221-
margin: 0,
222-
}}
211+
className="px-2.5 py-2 font-mono text-xs whitespace-pre overflow-x-auto max-w-full bg-[hsl(var(--prose-pre-bg))]"
212+
style={{ margin: 0 }}
223213
>
224214
<code className={className}>
225215
{tokens.map((line, i) => (
@@ -245,7 +235,7 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
245235
</div>
246236
)}
247237
</Highlight>
248-
</Card>
238+
</div>
249239
</TabsContent>
250240
</Tabs>
251241
</div>
@@ -270,10 +260,8 @@ const ApiExamples: React.FC<ApiExamplesProps> = ({
270260
{({ className, style, tokens, getLineProps, getTokenProps }) => (
271261
<div className="relative">
272262
<pre
273-
className="p-3 font-mono text-xs whitespace-pre overflow-x-auto bg-[hsl(var(--prose-pre-bg))]"
274-
style={{
275-
margin: 0,
276-
}}
263+
className="px-2.5 py-2 font-mono text-xs whitespace-pre overflow-x-auto bg-[hsl(var(--prose-pre-bg))]"
264+
style={{ margin: 0 }}
277265
>
278266
<code className={className}>
279267
{tokens.map((line, i) => (

‎src/docs-app/ui/components/navigation/TableOfContents.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,37 @@ interface TableOfContentsProps {
1818
*/
1919
const TableOfContents = ({ items, activeItem }: TableOfContentsProps) => {
2020
return (
21-
<div className="space-y-1">
22-
{items.map((item) => {
21+
<div>
22+
{items.map((item, index) => {
2323
const isActive = activeItem && item.href === `#${activeItem}`;
2424
const isLevel3 = item.level === 3;
2525
const isLevel4 = item.level === 4;
26+
const isTopLevel = !isLevel3 && !isLevel4;
27+
28+
// Check if next item is a child (for bottom spacing)
29+
const nextItem = items[index + 1];
30+
const hasChildrenAfter = nextItem && nextItem.level > item.level;
31+
32+
// Check if this is the first child after a parent (for top spacing)
33+
const prevItem = items[index - 1];
34+
const isFirstChild = (isLevel3 || isLevel4) && prevItem && prevItem.level < item.level;
35+
36+
// Check if this is the last child before a new parent section
37+
const isLastChildBeforeParent = (isLevel3 || isLevel4) && nextItem && nextItem.level < item.level;
2638

2739
return (
2840
<a
2941
key={item.href}
3042
href={item.href}
3143
className={cn(
32-
"block text-sm py-2 px-3 transition-colors text-muted-foreground hover:text-foreground relative",
44+
"block text-sm px-3 transition-colors text-muted-foreground hover:text-foreground relative",
3345
"before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-4 before:rounded-full before:transition-colors",
3446
isActive && "text-primary font-medium before:bg-primary"
3547
)}
3648
style={{
37-
paddingLeft: isLevel4 ? '2rem' : isLevel3 ? '1.5rem' : '0.75rem'
49+
paddingLeft: isLevel4 ? '2rem' : isLevel3 ? '1.5rem' : '0.75rem',
50+
paddingTop: isTopLevel ? '0.625rem' : isFirstChild ? '0.375rem' : '0.25rem',
51+
paddingBottom: isTopLevel && hasChildrenAfter ? '0.375rem' : isLastChildBeforeParent ? '0.5rem' : isTopLevel ? '0.625rem' : '0.25rem',
3852
}}
3953
>
4054
{item.title}

‎src/shared/themes/theme-config.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -152,9 +152,9 @@ export const themes: Record<string, ThemeDefinition> = {
152152
playgroundNav: '190 80% 50%',
153153
playgroundNavForeground: '222 47% 11%',
154154
playgroundNavHover: '190 80% 55%',
155-
featureBadgeBackground: '190 80% 50% / 0.12',
156-
featureBadgeForeground: '190 70% 70%',
157-
featureBadgeBorder: '190 80% 50% / 0.25',
155+
featureBadgeBackground: '200 20% 25% / 0.5',
156+
featureBadgeForeground: '195 18% 62%',
157+
featureBadgeBorder: '200 18% 35% / 0.4',
158158
},
159159
syntax: {
160160
keyword: '190 85% 60%', // Bright cyan for keywords (distinct from forest)
@@ -182,9 +182,9 @@ export const themes: Record<string, ThemeDefinition> = {
182182
border: '190 80% 50% / 0.3',
183183
},
184184
POST: {
185-
bg: '142 70% 50% / 0.15',
186-
text: '142 70% 65%',
187-
border: '142 70% 50% / 0.3',
185+
bg: '190 80% 50% / 0.15',
186+
text: '190 80% 70%',
187+
border: '190 80% 50% / 0.3',
188188
},
189189
PUT: {
190190
bg: '45 90% 55% / 0.15',
@@ -254,9 +254,9 @@ export const themes: Record<string, ThemeDefinition> = {
254254
playgroundNav: '168 76% 42%',
255255
playgroundNavForeground: '180 20% 98%',
256256
playgroundNavHover: '168 76% 48%',
257-
featureBadgeBackground: '168 76% 42% / 0.12',
258-
featureBadgeForeground: '168 76% 60%',
259-
featureBadgeBorder: '168 76% 42% / 0.25',
257+
featureBadgeBackground: '180 15% 24% / 0.5',
258+
featureBadgeForeground: '175 15% 60%',
259+
featureBadgeBorder: '180 14% 32% / 0.4',
260260
},
261261
syntax: {
262262
keyword: '168 85% 58%', // Emerald green for keywords
@@ -283,9 +283,9 @@ export const themes: Record<string, ThemeDefinition> = {
283283
border: '168 76% 42% / 0.3',
284284
},
285285
POST: {
286-
bg: '142 70% 50% / 0.15',
287-
text: '142 70% 65%',
288-
border: '142 70% 50% / 0.3',
286+
bg: '155 65% 45% / 0.15',
287+
text: '155 65% 60%',
288+
border: '155 65% 45% / 0.3',
289289
},
290290
PUT: {
291291
bg: '50 90% 55% / 0.15',

0 commit comments

Comments
 (0)