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,7 +1,30 @@
 <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">
+	<div class="flex flex-row gap-4 justify-center">
+		{#each stats as stat}
+			<div class="card w-52 p-10 text-center flex flex-col gap-4">
+				<h2 class="text-lg">{stat.title}</h2>
+				<p class="text-lg">
+					{stat.value}
+				</p>
+			</div>
+		{/each}
+	</div>
+	<div class="flex flex-col items-center justify-center grow">
 		<h1 class="h1">
 			<span
 				class="bg-gradient-to-br from-blue-500 to-cyan-300 bg-clip-text text-transparent box-decoration-clone"
@@ -24,3 +47,4 @@
 			</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>
-				<p class=" mb-2">Generator</p>
-				<code class="text-xs ml-2 variant-filled-success p-1 px-2 rounded-container-token">
+				<div class="flex flex-col gap-2 py-4">
+					<p class="font-bold">OpenAPI</p>
+					<p>Generator</p>
+					<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 />