set up base layout

This commit is contained in:
Malte Teichert
2024-05-19 17:20:22 +02:00
parent 98969c8173
commit f2467815a1
9 changed files with 130 additions and 82 deletions

View File

@@ -1,7 +1,5 @@
{
"prettier.documentSelectors": [
"**/*.svelte"
],
"prettier.documentSelectors": ["**/*.svelte"],
"tailwindCSS.classAttributes": [
"class",
"accent",

View File

@@ -1,5 +1,5 @@
{
"name": "",
"name": "openai-3-generator",
"version": "0.0.1",
"private": true,
"scripts": {

View File

@@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
autoprefixer: {}
}
};

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />

View File

@@ -1,5 +1,6 @@
<script lang="ts">
import '../app.postcss';
import { AppBar } from '@skeletonlabs/skeleton';
// Floating UI for Popups
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
@@ -7,4 +8,25 @@
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
</script>
<div class="w-full h-full">
<AppBar>
<svelte:fragment slot="lead">
<h4 class="h4">
OpenAPI generator
<code class="ml-2 variant-filled-success p-1 px-2 rounded-container-token"> 3.0.0 </code>
</h4>
</svelte:fragment>
<svelte:fragment slot="trail">
<a
href="https://swagger.io/docs/specification/basic-structure/"
target="_blank"
class="btn variant-filled-surface"
>
Schema Reference
</a>
</svelte:fragment>
</AppBar>
<div class="mx-8 my-4">
<slot />
</div>
</div>

View File

@@ -1,15 +1,40 @@
<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
<script lang="ts">
import { TabGroup, Tab } from '@skeletonlabs/skeleton';
<div class="container h-full mx-auto flex justify-center items-center">
<div class="space-y-5">
<h1 class="h1">Let's get cracking bones!</h1>
<p>Start by exploring:</p>
<ul>
<li><code class="code">/src/routes/+layout.svelte</code> - barebones layout</li>
<li><code class="code">/src/app.postcss</code> - app wide css</li>
<li>
<code class="code">/src/routes/+page.svelte</code> - this page, you can replace the contents
</li>
</ul>
</div>
</div>
let tabSet: number = 0;
</script>
<TabGroup>
<Tab bind:group={tabSet} name="info" value={0}>
<h4 class="h4">Info</h4>
</Tab>
<Tab bind:group={tabSet} name="authentication" value={1}>
<h4 class="h4">Authentication</h4>
</Tab>
<Tab bind:group={tabSet} name="servers" value={2}>
<h4 class="h4">Servers</h4>
</Tab>
<Tab bind:group={tabSet} name="paths" value={3}>
<h4 class="h4">Paths</h4>
</Tab>
<Tab bind:group={tabSet} name="components" value={4}>
<h4 class="h4">Components</h4>
</Tab>
<svelte:fragment slot="panel">
{#if tabSet === 0}
<p>Info</p>
{/if}
{#if tabSet === 1}
<p>Authentication</p>
{/if}
{#if tabSet === 2}
<p>Servers</p>
{/if}
{#if tabSet === 3}
<p>Paths</p>
{/if}
{#if tabSet === 4}
<p>Components</p>
{/if}
</svelte:fragment>
</TabGroup>

View File

@@ -9,7 +9,7 @@ const config = {
preprocess: [vitePreprocess()],
vitePlugin: {
inspector: true,
inspector: true
},
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

View File

@@ -1,14 +1,17 @@
import { join } from 'path'
import type { Config } from 'tailwindcss'
import { join } from 'path';
import type { Config } from 'tailwindcss';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import { skeleton } from '@skeletonlabs/tw-plugin'
import { skeleton } from '@skeletonlabs/tw-plugin';
export default {
darkMode: 'class',
content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
content: [
'./src/**/*.{html,js,svelte,ts}',
join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
],
theme: {
extend: {},
extend: {}
},
plugins: [
forms,
@@ -18,10 +21,10 @@ export default {
preset: [
{
name: 'skeleton',
enhancements: true,
},
],
},
}),
],
enhancements: true
}
]
}
})
]
} satisfies Config;