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",
@@ -117,4 +115,4 @@
"width", "width",
"zIndex" "zIndex"
] ]
} }

View File

@@ -1,45 +1,45 @@
{ {
"name": "", "name": "openai-3-generator",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .", "lint": "prettier --check . && eslint .",
"format": "prettier --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0", "@types/eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0", "@typescript-eslint/parser": "^7.0.0",
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1", "eslint-plugin-svelte": "^2.35.1",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7", "svelte": "^4.2.7",
"svelte-check": "^3.6.0", "svelte-check": "^3.6.0",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^5.0.3", "vite": "^5.0.3",
"postcss": "8.4.38", "postcss": "8.4.38",
"autoprefixer": "10.4.19", "autoprefixer": "10.4.19",
"tailwindcss": "3.4.3", "tailwindcss": "3.4.3",
"@skeletonlabs/skeleton": "2.10.0", "@skeletonlabs/skeleton": "2.10.0",
"@skeletonlabs/tw-plugin": "0.4.0", "@skeletonlabs/tw-plugin": "0.4.0",
"vite-plugin-tailwind-purgecss": "0.3.3", "vite-plugin-tailwind-purgecss": "0.3.3",
"@tailwindcss/typography": "0.5.13", "@tailwindcss/typography": "0.5.13",
"@tailwindcss/forms": "0.5.7", "@tailwindcss/forms": "0.5.7",
"@types/node": "20.12.12" "@types/node": "20.12.12"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@floating-ui/dom": "1.6.5" "@floating-ui/dom": "1.6.5"
} }
} }

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>
<slot /> <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"> 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

@@ -7,9 +7,9 @@ const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors // Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors // for more information about preprocessors
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.
@@ -18,4 +18,4 @@ const config = {
adapter: adapter() adapter: adapter()
} }
}; };
export default config; export default config;

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;

View File

@@ -4,4 +4,4 @@ import { defineConfig } from 'vite';
export default defineConfig({ export default defineConfig({
plugins: [sveltekit(), purgeCss()] plugins: [sveltekit(), purgeCss()]
}); });