Skip to content

Commit 2432f16

Browse files
Michael-ObeleMichael-Obele
committed
feat: add svelte-highlight for enhanced code syntax highlighting and update installation commands
1 parent 4489fcf commit 2432f16

3 files changed

Lines changed: 125 additions & 100 deletions

File tree

‎bun.lock‎

Lines changed: 8 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"publint": "^0.3.13",
9292
"svelte": "^5.39.5",
9393
"svelte-check": "^4.3.2",
94+
"svelte-highlight": "^7.9.0",
9495
"swagger-ui": "^5.29.5",
9596
"swagger-ui-dist": "^5.29.5",
9697
"tailwind-merge": "^3.3.1",

‎src/routes/+page.svelte‎

Lines changed: 116 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
import GithubIcon from '@lucide/svelte/icons/github';
1212
import TerminalIcon from '@lucide/svelte/icons/terminal';
1313
import FileCodeIcon from '@lucide/svelte/icons/file-code';
14+
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
15+
import Highlight from 'svelte-highlight';
16+
import typescript from 'svelte-highlight/languages/typescript';
17+
import bash from 'svelte-highlight/languages/bash';
18+
import 'svelte-highlight/styles/github-dark.css';
1419
1520
// State for copy buttons
1621
let copiedStates = $state({
@@ -28,7 +33,78 @@
2833
}, 2000);
2934
}
3035
31-
const installCommand = 'npm install -D sveltekit-openapi-generator';
36+
let selectedManager = $state('bun');
37+
const installCommands = {
38+
bun: 'bun add -d sveltekit-openapi-generator',
39+
npm: 'npm install -D sveltekit-openapi-generator',
40+
pnpm: 'pnpm add -D sveltekit-openapi-generator',
41+
yarn: 'yarn add -D sveltekit-openapi-generator'
42+
};
43+
44+
let installCommand = $derived(installCommands[selectedManager as keyof typeof installCommands]);
45+
46+
const configOptions = [
47+
{
48+
option: 'info',
49+
type: 'OpenAPIV3.InfoObject',
50+
description: 'OpenAPI info section (title, version, description)',
51+
default: '-'
52+
},
53+
{
54+
option: 'servers',
55+
type: 'OpenAPIV3.ServerObject[]',
56+
description: 'OpenAPI servers configuration',
57+
default: '-'
58+
},
59+
{
60+
option: 'baseSchemasPath',
61+
type: 'string',
62+
description: 'Path to file containing shared schema definitions',
63+
default: '-'
64+
},
65+
{
66+
option: 'yamlFiles',
67+
type: 'string[]',
68+
description: 'Additional YAML files to include',
69+
default: '-'
70+
},
71+
{
72+
option: 'prependPath',
73+
type: 'string',
74+
description: "Path prefix to prepend to all routes (e.g., '/api')",
75+
default: '-'
76+
},
77+
{
78+
option: 'include',
79+
type: 'string[]',
80+
description: 'Glob patterns to include',
81+
default: "['src/routes/**/+server.ts', 'src/routes/**/+page.server.ts']"
82+
},
83+
{
84+
option: 'exclude',
85+
type: 'string[]',
86+
description: 'Glob patterns to exclude',
87+
default: '-'
88+
},
89+
{
90+
option: 'failOnErrors',
91+
type: 'boolean',
92+
description: 'Whether to fail on JSDoc parsing errors',
93+
default: 'false'
94+
},
95+
{
96+
option: 'outputPath',
97+
type: 'string',
98+
description: 'Output path for the spec file during build',
99+
default: '-'
100+
},
101+
{
102+
option: 'debounceMs',
103+
type: 'number',
104+
description: 'Debounce delay in milliseconds for file watching',
105+
default: '200'
106+
}
107+
];
32108
33109
const configExample = `import { sveltekit } from '@sveltejs/kit/vite';
34110
import { defineConfig } from 'vite';
@@ -241,7 +317,20 @@ export async function GET({ url }) {
241317
<div
242318
class="flex items-center justify-between border-b border-gray-700 bg-gray-800 px-4 py-2"
243319
>
244-
<span class="text-sm font-medium text-gray-300">Terminal</span>
320+
<div class="relative">
321+
<select
322+
bind:value={selectedManager}
323+
class="appearance-none rounded bg-gray-700 py-1 pr-8 pl-3 text-sm font-medium text-gray-300 transition outline-none hover:bg-gray-600 focus:ring-2 focus:ring-indigo-500"
324+
>
325+
<option value="bun">bun</option>
326+
<option value="npm">npm</option>
327+
<option value="pnpm">pnpm</option>
328+
<option value="yarn">yarn</option>
329+
</select>
330+
<ChevronDownIcon
331+
class="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-gray-400"
332+
/>
333+
</div>
245334
<button
246335
onclick={() => copyToClipboard(installCommand, 'install')}
247336
class="inline-flex items-center gap-2 rounded px-3 py-1 text-sm text-gray-300 transition hover:bg-gray-700"
@@ -255,9 +344,9 @@ export async function GET({ url }) {
255344
{/if}
256345
</button>
257346
</div>
258-
<pre class="overflow-x-auto p-4"><code class="text-sm text-gray-100"
259-
>{installCommand}</code
260-
></pre>
347+
<div class="overflow-x-auto p-4 text-sm">
348+
<Highlight language={bash} code={installCommand} />
349+
</div>
261350
</div>
262351
</div>
263352

@@ -306,9 +395,9 @@ export async function GET({ url }) {
306395
{/if}
307396
</button>
308397
</div>
309-
<pre class="overflow-x-auto p-4"><code class="text-sm text-gray-100"
310-
>{configExample}</code
311-
></pre>
398+
<div class="overflow-x-auto p-4 text-sm">
399+
<Highlight language={typescript} code={configExample} />
400+
</div>
312401
</div>
313402
</div>
314403

@@ -354,9 +443,9 @@ export async function GET({ url }) {
354443
{/if}
355444
</button>
356445
</div>
357-
<pre class="overflow-x-auto p-4"><code class="text-sm text-gray-100"
358-
>{endpointExample}</code
359-
></pre>
446+
<div class="overflow-x-auto p-4 text-sm">
447+
<Highlight language={typescript} code={endpointExample} />
448+
</div>
360449
</div>
361450
</div>
362451

@@ -400,9 +489,9 @@ export async function GET({ url }) {
400489
{/if}
401490
</button>
402491
</div>
403-
<pre class="overflow-x-auto p-4"><code class="text-sm text-gray-100"
404-
>{schemaExample}</code
405-
></pre>
492+
<div class="overflow-x-auto p-4 text-sm">
493+
<Highlight language={typescript} code={schemaExample} />
494+
</div>
406495
</div>
407496
</div>
408497
</div>
@@ -466,8 +555,9 @@ export async function GET({ url }) {
466555
{/if}
467556
</button>
468557
</div>
469-
<pre class="overflow-x-auto p-4"><code class="text-sm text-gray-100">{configExample}</code
470-
></pre>
558+
<div class="overflow-x-auto p-4 text-sm">
559+
<Highlight language={typescript} code={configExample} />
560+
</div>
471561
</div>
472562

473563
<!-- Advanced Configuration -->
@@ -488,89 +578,16 @@ export async function GET({ url }) {
488578
</tr>
489579
</thead>
490580
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
491-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
492-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400">info</td>
493-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">OpenAPIV3.InfoObject</td>
494-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300"
495-
>OpenAPI info section (title, version, description)</td
496-
>
497-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">-</td>
498-
</tr>
499-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
500-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400">servers</td>
501-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">OpenAPIV3.ServerObject[]</td>
502-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300"
503-
>OpenAPI servers configuration</td
504-
>
505-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">-</td>
506-
</tr>
507-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
508-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400"
509-
>baseSchemasPath</td
510-
>
511-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">string</td>
512-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300"
513-
>Path to file containing shared schema definitions</td
514-
>
515-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">-</td>
516-
</tr>
517-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
518-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400">yamlFiles</td>
519-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">string[]</td>
520-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300"
521-
>Additional YAML files to include</td
522-
>
523-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">-</td>
524-
</tr>
525-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
526-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400">prependPath</td
527-
>
528-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">string</td>
529-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300"
530-
>Path prefix to prepend to all routes (e.g., '/api')</td
531-
>
532-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">-</td>
533-
</tr>
534-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
535-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400">include</td>
536-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">string[]</td>
537-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Glob patterns to include</td>
538-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400"
539-
>['src/routes/**/+server.ts', 'src/routes/**/+page.server.ts']</td
540-
>
541-
</tr>
542-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
543-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400">exclude</td>
544-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">string[]</td>
545-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Glob patterns to exclude</td>
546-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">-</td>
547-
</tr>
548-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
549-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400"
550-
>failOnErrors</td
551-
>
552-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">boolean</td>
553-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300"
554-
>Whether to fail on JSDoc parsing errors</td
555-
>
556-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">false</td>
557-
</tr>
558-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
559-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400">outputPath</td>
560-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">string</td>
561-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300"
562-
>Output path for the spec file during build</td
563-
>
564-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">-</td>
565-
</tr>
566-
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
567-
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400">debounceMs</td>
568-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">number</td>
569-
<td class="px-6 py-4 text-gray-600 dark:text-gray-300"
570-
>Debounce delay in milliseconds for file watching</td
571-
>
572-
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">200</td>
573-
</tr>
581+
{#each configOptions as option}
582+
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
583+
<td class="px-6 py-4 font-mono text-indigo-600 dark:text-indigo-400"
584+
>{option.option}</td
585+
>
586+
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">{option.type}</td>
587+
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">{option.description}</td>
588+
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">{option.default}</td>
589+
</tr>
590+
{/each}
574591
</tbody>
575592
</table>
576593
</div>

0 commit comments

Comments
 (0)