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": [ "prettier.documentSelectors": ["**/*.svelte"],
"**/*.svelte"
],
"tailwindCSS.classAttributes": [ "tailwindCSS.classAttributes": [
"class", "class",
"accent", "accent",

View File

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

View File

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

View File

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

View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import '../app.postcss'; import '../app.postcss';
import { AppBar } from '@skeletonlabs/skeleton';
// Floating UI for Popups // Floating UI for Popups
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
@@ -7,4 +8,25 @@
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow }); storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
</script> </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 /> <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"> let tabSet: number = 0;
<div class="space-y-5"> </script>
<h1 class="h1">Let's get cracking bones!</h1>
<p>Start by exploring:</p> <TabGroup>
<ul> <Tab bind:group={tabSet} name="info" value={0}>
<li><code class="code">/src/routes/+layout.svelte</code> - barebones layout</li> <h4 class="h4">Info</h4>
<li><code class="code">/src/app.postcss</code> - app wide css</li> </Tab>
<li> <Tab bind:group={tabSet} name="authentication" value={1}>
<code class="code">/src/routes/+page.svelte</code> - this page, you can replace the contents <h4 class="h4">Authentication</h4>
</li> </Tab>
</ul> <Tab bind:group={tabSet} name="servers" value={2}>
</div> <h4 class="h4">Servers</h4>
</div> </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()], preprocess: [vitePreprocess()],
vitePlugin: { vitePlugin: {
inspector: true, inspector: true
}, },
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // 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 { join } from 'path';
import type { Config } from 'tailwindcss' import type { Config } from 'tailwindcss';
import forms from '@tailwindcss/forms'; import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography'; import typography from '@tailwindcss/typography';
import { skeleton } from '@skeletonlabs/tw-plugin' import { skeleton } from '@skeletonlabs/tw-plugin';
export default { export default {
darkMode: 'class', 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: { theme: {
extend: {}, extend: {}
}, },
plugins: [ plugins: [
forms, forms,
@@ -18,10 +21,10 @@ export default {
preset: [ preset: [
{ {
name: 'skeleton', name: 'skeleton',
enhancements: true, enhancements: true
}, }
], ]
}, }
}), })
], ]
} satisfies Config; } satisfies Config;