Adjusted nav, added stats on homepage

src/lib/index.ts

@@ -3,6 +3,25 @@ import type { OpenAPIV3_1 } from './openAPITypes';
 
 export const localStoragePrefix = 'openapigen-';
 
+export const operationCount = (openApiDoc: OpenAPIV3_1.Document) => {
+	let count = 0;
+	for (const path in openApiDoc.paths) {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		for (const method in openApiDoc.paths[path]) {
+			count++;
+		}
+	}
+	return count;
+}
+
+export const pathCount = (openApiDoc: OpenAPIV3_1.Document) => {
+	let count = 0;
+	for (const path in openApiDoc.paths) {
+		count++;
+	}
+	return count;
+}
+
 export const openApiStore = persisted<OpenAPIV3_1.Document>(`${localStoragePrefix}openApi`, {
 	openapi: '3.1.0', // OpenAPI version
 	info: {

src/routes/+page.svelte

@@ -1,26 +1,50 @@
 <script lang="ts">
+	import { openApiStore, operationCount, pathCount } from '$lib';
+
+	const stats = [
+		{
+			title: 'Paths',
+			value: pathCount($openApiStore)
+		},
+		{
+			title: 'Operation IDs',
+			value: operationCount($openApiStore)
+		}
+	];
 </script>
 
-<div class="w-full h-full flex flex-col items-center justify-center">
+<div class="w-full h-full flex flex-col">
-	<h1 class="h1">
+	<div class="flex flex-row gap-4 justify-center">
-		<span
+		{#each stats as stat}
-			class="bg-gradient-to-br from-blue-500 to-cyan-300 bg-clip-text text-transparent box-decoration-clone"
+			<div class="card w-52 p-10 text-center flex flex-col gap-4">
-		>
+				<h2 class="text-lg">{stat.title}</h2>
-			Design.
+				<p class="text-lg">
-		</span>
+					{stat.value}
-	</h1>
+				</p>
-	<h1 class="h1">
+			</div>
-		<span
+		{/each}
-			class="bg-gradient-to-br from-red-500 to-yellow-500 bg-clip-text text-transparent box-decoration-clone"
+	</div>
-		>
+	<div class="flex flex-col items-center justify-center grow">
-			Build.
+		<h1 class="h1">
-		</span>
+			<span
-	</h1>
+				class="bg-gradient-to-br from-blue-500 to-cyan-300 bg-clip-text text-transparent box-decoration-clone"
-	<h1 class="h1">
+			>
-		<span
+				Design.
-			class="bg-gradient-to-br from-pink-500 to-violet-500 bg-clip-text text-transparent box-decoration-clone"
+			</span>
-		>
+		</h1>
-			Deploy.
+		<h1 class="h1">
-		</span>
+			<span
-	</h1>
+				class="bg-gradient-to-br from-red-500 to-yellow-500 bg-clip-text text-transparent box-decoration-clone"
+			>
+				Build.
+			</span>
+		</h1>
+		<h1 class="h1">
+			<span
+				class="bg-gradient-to-br from-pink-500 to-violet-500 bg-clip-text text-transparent box-decoration-clone"
+			>
+				Deploy.
+			</span>
+		</h1>
+	</div>
 </div>

src/routes/FancyAppRail.svelte

@@ -4,7 +4,6 @@
 		AppRailAnchor,
 		AppRailTile,
 		FileButton,
-		FileDropzone,
 		LightSwitch
 	} from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';
@@ -19,16 +18,13 @@
 	$: fileName = filenamify($openApiStore.info.title) || 'openapi';
 
 	function onFileUpload(e: Event): void {
-		console.log('onFileUpload', e);
-		console.log('files', files);
 		if (!files) return;
-		console.log('files[0]', files[0]);
+
 		const file = files[0];
 		const reader = new FileReader();
 		reader.onload = () => {
 			const result = reader.result as string;
 			const isJson = file.name.endsWith('.json');
-			console.log('isJson', isJson);
 			try {
 				if (isJson) {
 					openApiStore.set(JSON.parse(result));
@@ -45,13 +41,17 @@
 
 <AppRail width="w-28" aspectRatio="aspect-[3/2]" background="variant-ghost-surface" border="ring-0">
 	<svelte:fragment slot="lead">
-		<div class="my-4">
+		<div>
 			<AppRailAnchor href="/">
-				<p class="font-bold mb-1">OpenAPI</p>
+				<div class="flex flex-col gap-2 py-4">
-				<p class=" mb-2">Generator</p>
+					<p class="font-bold">OpenAPI</p>
-				<code class="text-xs ml-2 variant-filled-success p-1 px-2 rounded-container-token">
+					<p>Generator</p>
-					3.1.0
+					<code
-				</code>
+						class="mx-auto w-min text-xs variant-filled-success p-1 px-2 rounded-container-token"
+					>
+						3.1.0
+					</code>
+				</div>
 			</AppRailAnchor>
 		</div>
 		<hr />