Skip to content

Commit 4c95c6a

Browse files
leonardcserleonardcser
committed
feat(web): integrate Shiki for syntax highlighting in code blocks and update styles
1 parent 8fdcffe commit 4c95c6a

9 files changed

Lines changed: 245 additions & 211 deletions

File tree

‎apps/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"postcss": "8.5.3",
7676
"prettier": "^3.5.3",
7777
"react-markdown": "^10.1.0",
78+
"shiki": "^3.4.2",
7879
"tailwind-merge": "^3.2.0",
7980
"tailwindcss": "3.4.1",
8081
"tailwindcss-animate": "^1.0.7",

‎apps/web/src/components/deployments/api-integration-card.tsx‎

Lines changed: 23 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import type { Node } from "@xyflow/react";
2-
import { Copy, Terminal } from "lucide-react";
2+
import { Terminal } from "lucide-react";
33

44
import {
55
EXECUTE_WORKFLOW_SNIPPETS,
66
GET_EXECUTION_STATUS_SNIPPETS,
77
GET_OBJECT_SNIPPETS,
88
type SnippetParams,
99
} from "@/components/deployments/api-snippets";
10-
import { Button } from "@/components/ui/button";
10+
import { CodeBlock } from "@/components/docs/code-block";
1111
import {
1212
Card,
1313
CardContent,
1414
CardDescription,
1515
CardHeader,
1616
CardTitle,
1717
} from "@/components/ui/card";
18-
import { Code } from "@/components/ui/code";
1918
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
2019
import type {
2120
NodeTemplate,
@@ -52,11 +51,6 @@ export function ApiIntegrationCard({
5251
.filter((p) => p.type !== "body-json")
5352
.map((p) => ({ nameForForm: p.nameForForm, type: p.type })); // Adapt to SnippetParams
5453

55-
const handleCopy = (text: string) => {
56-
navigator.clipboard.writeText(text);
57-
// Consider adding a toast notification here for better UX
58-
};
59-
6054
const renderSnippets = (
6155
operation: "execute" | "status" | "getObject",
6256
language: "curl" | "javascript" | "python"
@@ -131,19 +125,19 @@ export function ApiIntegrationCard({
131125
>
132126
<TabsList className="flex flex-col justify-start h-auto gap-1 p-4 rounded-r-none *:w-full *:justify-start *:pe-10">
133127
<TabsTrigger value="execute">
134-
<span className="text-xs font-mono me-2 text-green-600">
128+
<span className="text-xs font-mono me-2 text-green-600 dark:text-green-400">
135129
POST
136130
</span>{" "}
137131
Execute Workflow
138132
</TabsTrigger>
139133
<TabsTrigger value="status">
140-
<span className="text-xs font-mono me-2 text-blue-600">
134+
<span className="text-xs font-mono me-2 text-blue-600 dark:text-blue-400">
141135
GET&nbsp;
142136
</span>{" "}
143137
Execution Status
144138
</TabsTrigger>
145139
<TabsTrigger value="getObject">
146-
<span className="text-xs font-mono me-2 text-blue-600">
140+
<span className="text-xs font-mono me-2 text-blue-600 dark:text-blue-400">
147141
GET&nbsp;
148142
</span>{" "}
149143
Object
@@ -166,65 +160,32 @@ export function ApiIntegrationCard({
166160
</TabsList>
167161
<TabsContent value="curl" className="mt-4 space-y-4">
168162
<div className="relative">
169-
<Code
163+
<CodeBlock
170164
language="bash"
171165
className="text-xs md:text-sm overflow-x-auto font-mono"
172166
>
173167
{renderSnippets("execute", "curl")}
174-
</Code>
175-
<Button
176-
size="sm"
177-
variant="ghost"
178-
className="absolute top-2 right-2 h-7 w-7 p-0"
179-
onClick={() =>
180-
handleCopy(renderSnippets("execute", "curl"))
181-
}
182-
>
183-
<Copy className="h-4 w-4" />
184-
<span className="sr-only">Copy</span>
185-
</Button>
168+
</CodeBlock>
186169
</div>
187170
</TabsContent>
188171
<TabsContent value="javascript" className="mt-4 space-y-4">
189172
<div className="relative">
190-
<Code
173+
<CodeBlock
191174
language="javascript"
192175
className="text-xs md:text-sm overflow-x-auto font-mono"
193176
>
194177
{renderSnippets("execute", "javascript")}
195-
</Code>
196-
<Button
197-
size="sm"
198-
variant="ghost"
199-
className="absolute top-2 right-2 h-7 w-7 p-0"
200-
onClick={() =>
201-
handleCopy(renderSnippets("execute", "javascript"))
202-
}
203-
>
204-
<Copy className="h-4 w-4" />
205-
<span className="sr-only">Copy</span>
206-
</Button>
178+
</CodeBlock>
207179
</div>
208180
</TabsContent>
209181
<TabsContent value="python" className="mt-4 space-y-4">
210182
<div className="relative">
211-
<Code
183+
<CodeBlock
212184
language="python"
213185
className="text-xs md:text-sm overflow-x-auto font-mono"
214186
>
215187
{renderSnippets("execute", "python")}
216-
</Code>
217-
<Button
218-
size="sm"
219-
variant="ghost"
220-
className="absolute top-2 right-2 h-7 w-7 p-0"
221-
onClick={() =>
222-
handleCopy(renderSnippets("execute", "python"))
223-
}
224-
>
225-
<Copy className="h-4 w-4" />
226-
<span className="sr-only">Copy</span>
227-
</Button>
188+
</CodeBlock>
228189
</div>
229190
</TabsContent>
230191
</Tabs>
@@ -277,63 +238,32 @@ export function ApiIntegrationCard({
277238
</TabsList>
278239
<TabsContent value="curl" className="mt-4 space-y-4">
279240
<div className="relative">
280-
<Code
241+
<CodeBlock
281242
language="bash"
282243
className="text-xs md:text-sm overflow-x-auto font-mono"
283244
>
284245
{renderSnippets("status", "curl")}
285-
</Code>
286-
<Button
287-
size="sm"
288-
variant="ghost"
289-
className="absolute top-2 right-2 h-7 w-7 p-0"
290-
onClick={() => handleCopy(renderSnippets("status", "curl"))}
291-
>
292-
<Copy className="h-4 w-4" />
293-
<span className="sr-only">Copy</span>
294-
</Button>
246+
</CodeBlock>
295247
</div>
296248
</TabsContent>
297249
<TabsContent value="javascript" className="mt-4 space-y-4">
298250
<div className="relative">
299-
<Code
251+
<CodeBlock
300252
language="javascript"
301253
className="text-xs md:text-sm overflow-x-auto font-mono"
302254
>
303255
{renderSnippets("status", "javascript")}
304-
</Code>
305-
<Button
306-
size="sm"
307-
variant="ghost"
308-
className="absolute top-2 right-2 h-7 w-7 p-0"
309-
onClick={() =>
310-
handleCopy(renderSnippets("status", "javascript"))
311-
}
312-
>
313-
<Copy className="h-4 w-4" />
314-
<span className="sr-only">Copy</span>
315-
</Button>
256+
</CodeBlock>
316257
</div>
317258
</TabsContent>
318259
<TabsContent value="python" className="mt-4 space-y-4">
319260
<div className="relative">
320-
<Code
261+
<CodeBlock
321262
language="python"
322263
className="text-xs md:text-sm overflow-x-auto font-mono"
323264
>
324265
{renderSnippets("status", "python")}
325-
</Code>
326-
<Button
327-
size="sm"
328-
variant="ghost"
329-
className="absolute top-2 right-2 h-7 w-7 p-0"
330-
onClick={() =>
331-
handleCopy(renderSnippets("status", "python"))
332-
}
333-
>
334-
<Copy className="h-4 w-4" />
335-
<span className="sr-only">Copy</span>
336-
</Button>
266+
</CodeBlock>
337267
</div>
338268
</TabsContent>
339269
</Tabs>
@@ -376,65 +306,32 @@ export function ApiIntegrationCard({
376306
</TabsList>
377307
<TabsContent value="curl" className="mt-4 space-y-4">
378308
<div className="relative">
379-
<Code
309+
<CodeBlock
380310
language="bash"
381311
className="text-xs md:text-sm overflow-x-auto font-mono"
382312
>
383313
{renderSnippets("getObject", "curl")}
384-
</Code>
385-
<Button
386-
size="sm"
387-
variant="ghost"
388-
className="absolute top-2 right-2 h-7 w-7 p-0"
389-
onClick={() =>
390-
handleCopy(renderSnippets("getObject", "curl"))
391-
}
392-
>
393-
<Copy className="h-4 w-4" />
394-
<span className="sr-only">Copy</span>
395-
</Button>
314+
</CodeBlock>
396315
</div>
397316
</TabsContent>
398317
<TabsContent value="javascript" className="mt-4 space-y-4">
399318
<div className="relative">
400-
<Code
319+
<CodeBlock
401320
language="javascript"
402321
className="text-xs md:text-sm overflow-x-auto font-mono"
403322
>
404323
{renderSnippets("getObject", "javascript")}
405-
</Code>
406-
<Button
407-
size="sm"
408-
variant="ghost"
409-
className="absolute top-2 right-2 h-7 w-7 p-0"
410-
onClick={() =>
411-
handleCopy(renderSnippets("getObject", "javascript"))
412-
}
413-
>
414-
<Copy className="h-4 w-4" />
415-
<span className="sr-only">Copy</span>
416-
</Button>
324+
</CodeBlock>
417325
</div>
418326
</TabsContent>
419327
<TabsContent value="python" className="mt-4 space-y-4">
420328
<div className="relative">
421-
<Code
329+
<CodeBlock
422330
language="python"
423331
className="text-xs md:text-sm overflow-x-auto font-mono"
424332
>
425333
{renderSnippets("getObject", "python")}
426-
</Code>
427-
<Button
428-
size="sm"
429-
variant="ghost"
430-
className="absolute top-2 right-2 h-7 w-7 p-0"
431-
onClick={() =>
432-
handleCopy(renderSnippets("getObject", "python"))
433-
}
434-
>
435-
<Copy className="h-4 w-4" />
436-
<span className="sr-only">Copy</span>
437-
</Button>
334+
</CodeBlock>
438335
</div>
439336
</TabsContent>
440337
</Tabs>

0 commit comments

Comments
 (0)