Adjusted nav, added stats on homepage

This commit is contained in:
Luke Hagar
2024-05-24 21:59:08 -05:00
parent 1ece978a60
commit 6473e60893
3 changed files with 76 additions and 33 deletions

View File

@@ -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: {

View File

@@ -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">
<h1 class="h1">
<span
class="bg-gradient-to-br from-blue-500 to-cyan-300 bg-clip-text text-transparent box-decoration-clone"
>
Design.
</span>
</h1>
<h1 class="h1">
<span
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 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"
>
Design.
</span>
</h1>
<h1 class="h1">
<span
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>

View File

@@ -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">
3.1.0
</code>
<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 />