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

File tree

3 files changed

+125
-100
lines changed

3 files changed

+125
-100
lines changed

‎bun.lock‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"publint": "^0.3.13",
3636
"svelte": "^5.39.5",
3737
"svelte-check": "^4.3.2",
38+
"svelte-highlight": "^7.9.0",
3839
"swagger-ui": "^5.29.5",
3940
"swagger-ui-dist": "^5.29.5",
4041
"tailwind-merge": "^3.3.1",
@@ -547,7 +548,7 @@
547548

548549
"hastscript": ["[email protected]", "", { "dependencies": { "@types/hast": "^2.0.0", "comma-separated-tokens": "^1.0.0", "hast-util-parse-selector": "^2.0.0", "property-information": "^5.0.0", "space-separated-tokens": "^1.0.0" } }, "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w=="],
549550

550-
"highlight.js": ["highlight.js@10.7.3", "", {}, "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="],
551+
"highlight.js": ["highlight.js@11.11.1", "", {}, "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w=="],
551552

552553
"highlightjs-vue": ["[email protected]", "", {}, "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="],
553554

@@ -851,6 +852,8 @@
851852

852853
"svelte-check": ["[email protected]", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-RYP0bEwenDXzfv0P1sKAwjZSlaRyqBn0Fz1TVni58lqyEiqgwztTpmodJrGzP6ZT2aHl4MbTvWP6gbmQ3FOnBg=="],
853854

855+
"svelte-highlight": ["[email protected]", "", { "dependencies": { "highlight.js": "11.11.1" } }, "sha512-226LBTtvTnM2L2JkQq8mZeKEeMfPLYyta7VxZatFT4UPX5zdHEerKeMTvrfbxm7MVTWc7TPThsNoVdhWC177KQ=="],
856+
854857
"svelte-toolbelt": ["[email protected]", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
855858

856859
"svelte2tsx": ["[email protected]", "", { "dependencies": { "dedent-js": "^1.0.1", "scule": "^1.3.0" }, "peerDependencies": { "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0", "typescript": "^4.9.4 || ^5.0.0" } }, "sha512-cSci+mYGygYBHIZLHlm/jYlEc1acjAHqaQaDFHdEBpUueM9kSTnPpvPtSl5VkJOU1qSJ7h1K+6F/LIUYiqC8VA=="],
@@ -1055,8 +1058,12 @@
10551058

10561059
"@testing-library/dom/aria-query": ["[email protected]", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
10571060

1061+
"lowlight/highlight.js": ["[email protected]", "", {}, "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="],
1062+
10581063
"pretty-format/react-is": ["[email protected]", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
10591064

1065+
"react-syntax-highlighter/highlight.js": ["[email protected]", "", {}, "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="],
1066+
10601067
"refractor/prismjs": ["[email protected]", "", {}, "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA=="],
10611068

10621069
"remarkable/argparse": ["[email protected]", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="],

‎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)