Skip to content

Commit e734107

Browse files
Michael-ObeleMichael-Obele
committed
refactor: update styles and structure in layout and documentation pages
1 parent ae09b6c commit e734107

File tree

4 files changed

+68
-54
lines changed

4 files changed

+68
-54
lines changed

‎src/routes/+layout.svelte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@
3333
class="flex items-center space-x-2 text-xl font-bold transition hover:opacity-80"
3434
>
3535
<span class="text-2xl">🚀</span>
36-
<span
37-
class="hidden bg-linear-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent sm:inline dark:from-indigo-400 dark:to-purple-400"
38-
>
36+
<span class="hidden text-indigo-600 sm:inline dark:text-indigo-400">
3937
SvelteKit OpenAPI
4038
</span>
4139
</a>

‎src/routes/+page.svelte‎

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import spec from 'virtual:openapi-spec';
32
import RocketIcon from '@lucide/svelte/icons/rocket';
43
import ZapIcon from '@lucide/svelte/icons/zap';
54
import PackageIcon from '@lucide/svelte/icons/package';
@@ -13,9 +12,6 @@
1312
import TerminalIcon from '@lucide/svelte/icons/terminal';
1413
import FileCodeIcon from '@lucide/svelte/icons/file-code';
1514
16-
const pathCount = Object.keys(spec.paths || {}).length;
17-
const schemaCount = Object.keys(spec.components?.schemas || {}).length;
18-
1915
// State for copy buttons
2016
let copiedStates = $state({
2117
install: false,
@@ -43,6 +39,11 @@ export default defineConfig({
4339
openapiPlugin({
4440
baseSchemasPath: 'src/lib/schemas.js',
4541
prependPath: '/api',
42+
info: {
43+
title: 'My API',
44+
version: '1.0.0',
45+
description: 'My API Description'
46+
},
4647
outputPath: 'static/openapi.json'
4748
}),
4849
sveltekit()
@@ -139,9 +140,7 @@ export async function GET({ url }) {
139140
</svelte:head>
140141

141142
<!-- Hero Section -->
142-
<section
143-
class="relative overflow-hidden bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-indigo-900 dark:via-purple-900 dark:to-pink-900"
144-
>
143+
<section class="relative overflow-hidden bg-indigo-600 dark:bg-slate-900">
145144
<div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8">
146145
<div class="mx-auto max-w-4xl text-center text-white">
147146
<div
@@ -187,26 +186,6 @@ export async function GET({ url }) {
187186
</div>
188187
</div>
189188
</div>
190-
191-
<!-- Stats Banner -->
192-
<div class="border-t border-white/20 bg-white/10 backdrop-blur">
193-
<div class="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
194-
<div class="grid grid-cols-1 gap-6 text-center text-white sm:grid-cols-3">
195-
<div>
196-
<div class="text-4xl font-bold">{pathCount}</div>
197-
<div class="mt-1 text-sm opacity-90">API Endpoints (Demo)</div>
198-
</div>
199-
<div>
200-
<div class="text-4xl font-bold">{schemaCount}</div>
201-
<div class="mt-1 text-sm opacity-90">Schemas (Demo)</div>
202-
</div>
203-
<div>
204-
<div class="text-4xl font-bold">{spec.info.version}</div>
205-
<div class="mt-1 text-sm opacity-90">API Version</div>
206-
</div>
207-
</div>
208-
</div>
209-
</div>
210189
</section>
211190

212191
<!-- Features Section -->
@@ -455,6 +434,45 @@ export async function GET({ url }) {
455434
</div>
456435
</section>
457436

437+
<!-- Configuration Section -->
438+
<section id="configuration" class="bg-white py-20 dark:bg-gray-950">
439+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
440+
<div class="mx-auto max-w-4xl">
441+
<div class="mb-12 text-center">
442+
<h2 class="mb-4 text-4xl font-bold text-gray-900 dark:text-white">Configuration</h2>
443+
<p class="text-lg text-gray-600 dark:text-gray-400">
444+
Customize your API documentation details in <code
445+
class="rounded bg-gray-100 px-2 py-1 text-sm dark:bg-gray-800">vite.config.ts</code
446+
>
447+
</p>
448+
</div>
449+
<div
450+
class="relative overflow-hidden rounded-xl border border-gray-200 bg-gray-900 dark:border-gray-700"
451+
>
452+
<div
453+
class="flex items-center justify-between border-b border-gray-700 bg-gray-800 px-4 py-2"
454+
>
455+
<span class="text-sm font-medium text-gray-300">vite.config.ts</span>
456+
<button
457+
onclick={() => copyToClipboard(configExample, 'config')}
458+
class="inline-flex items-center gap-2 rounded px-3 py-1 text-sm text-gray-300 transition hover:bg-gray-700"
459+
>
460+
{#if copiedStates.config}
461+
<CheckIcon class="h-4 w-4 text-green-400" />
462+
<span>Copied!</span>
463+
{:else}
464+
<CopyIcon class="h-4 w-4" />
465+
<span>Copy</span>
466+
{/if}
467+
</button>
468+
</div>
469+
<pre class="overflow-x-auto p-4"><code class="text-sm text-gray-100">{configExample}</code
470+
></pre>
471+
</div>
472+
</div>
473+
</div>
474+
</section>
475+
458476
<!-- Live Demo Section -->
459477
<section class="bg-gray-50 py-20 dark:bg-gray-900">
460478
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
@@ -505,9 +523,7 @@ export async function GET({ url }) {
505523
</section>
506524

507525
<!-- CTA Section -->
508-
<section
509-
class="bg-linear-to-br from-indigo-600 to-purple-600 py-20 dark:from-indigo-900 dark:to-purple-900"
510-
>
526+
<section class="bg-indigo-700 py-20 dark:bg-indigo-900">
511527
<div class="container mx-auto px-4 text-center sm:px-6 lg:px-8">
512528
<h2 class="mb-6 text-4xl font-bold text-white">Ready to Get Started?</h2>
513529
<p class="mb-10 text-xl text-white/90">

‎src/routes/docs/+page.svelte‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -52,26 +52,26 @@
5252
</svelte:head>
5353

5454
<div class="min-h-screen bg-gray-50 dark:bg-gray-950">
55-
<header
56-
class="bg-linear-to-br from-indigo-600 via-purple-600 to-purple-700 px-4 py-16 text-center text-white shadow-lg dark:from-indigo-900 dark:via-purple-900 dark:to-pink-900"
57-
>
58-
<div class="container mx-auto">
59-
<h1 class="mb-4 text-5xl font-bold">API Documentation</h1>
60-
<p class="text-xl opacity-90">
61-
Explore and test the API endpoints interactively with Swagger UI
62-
</p>
63-
<div class="mt-6 flex flex-col items-center justify-center gap-3 text-sm sm:flex-row">
64-
<div class="flex items-center gap-2 rounded-lg bg-white/20 px-4 py-2 backdrop-blur">
65-
<span class="font-semibold">Endpoints:</span>
66-
<span>{Object.keys(spec.paths || {}).length}</span>
67-
</div>
68-
<div class="flex items-center gap-2 rounded-lg bg-white/20 px-4 py-2 backdrop-blur">
69-
<span class="font-semibold">Schemas:</span>
70-
<span>{Object.keys(spec.components?.schemas || {}).length}</span>
71-
</div>
72-
<div class="flex items-center gap-2 rounded-lg bg-white/20 px-4 py-2 backdrop-blur">
73-
<span class="font-semibold">Version:</span>
74-
<span>{spec.info.version}</span>
55+
<header>
56+
<div class="bg-indigo-700 px-4 py-16 text-center text-white shadow-lg dark:bg-slate-900">
57+
<div class="container mx-auto">
58+
<h1 class="mb-4 text-5xl font-bold">API Documentation</h1>
59+
<p class="text-xl opacity-90">
60+
Explore and test the API endpoints interactively with Swagger UI
61+
</p>
62+
<div class="mt-6 flex flex-col items-center justify-center gap-3 text-sm sm:flex-row">
63+
<div class="flex items-center gap-2 rounded-lg bg-white/20 px-4 py-2 backdrop-blur">
64+
<span class="font-semibold">Endpoints:</span>
65+
<span>{Object.keys(spec.paths || {}).length}</span>
66+
</div>
67+
<div class="flex items-center gap-2 rounded-lg bg-white/20 px-4 py-2 backdrop-blur">
68+
<span class="font-semibold">Schemas:</span>
69+
<span>{Object.keys(spec.components?.schemas || {}).length}</span>
70+
</div>
71+
<div class="flex items-center gap-2 rounded-lg bg-white/20 px-4 py-2 backdrop-blur">
72+
<span class="font-semibold">Version:</span>
73+
<span>{spec.info.version}</span>
74+
</div>
7575
</div>
7676
</div>
7777
</div>

‎static/favicon.svg‎

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)