Compare commits
1 Commits
2c87b8dde1
..
master
| Author | SHA1 | Date | |
|---|---|---|---|
 Filip Krumpe
|
b09941f9e9 |
@@ -1,2 +1 @@
|
||||
__pycache__
|
||||
webapp2/
|
||||
@@ -11,7 +11,7 @@ Run npm install in the webapp component to instanciate the modules required by s
|
||||
cd webapp
|
||||
# to use Typescript run:
|
||||
# Node scripts/setupTypeScrupt.js
|
||||
npm ci
|
||||
npm install
|
||||
# to start a local development server for the svelte app only:
|
||||
npm run dev
|
||||
```
|
||||
@@ -32,11 +32,3 @@ In the project folder do:
|
||||
```
|
||||
|
||||
Navigate to [http://127.0.0.1:5000/index.html](http://127.0.0.1:5000/index.html) to see the result
|
||||
|
||||
|
||||
# Thanks
|
||||
|
||||
Special thanks go to
|
||||
* [Joshua Nussbaum](https://dev.to/joshnuss/creating-a-sidebar-menu-in-svelte-ih2) for providing this beautiful slider menu
|
||||
* [Linus Benkner](https://linu.us/sveltekit-with-tailwindcss-v3) for providing the blueprint for the tailwind integration
|
||||
* [The SvelteKit project](https://kit.svelte.dev/) for providing the Framework
|
||||
+2
-11
@@ -3,15 +3,6 @@
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": [
|
||||
"prettier-plugin-svelte"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.svelte",
|
||||
"options": {
|
||||
"parser": "svelte"
|
||||
}
|
||||
}
|
||||
]
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"$lib": ["src/lib"],
|
||||
"$lib/*": ["src/lib/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||
}
|
||||
Generated
+153
-1851
File diff suppressed because it is too large
Load Diff
+20
-22
@@ -1,39 +1,37 @@
|
||||
{
|
||||
"name": "webapp",
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@types/eslint": "^8.56.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
||||
"@typescript-eslint/parser": "^7.0.0",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"tslib": "^2.4.1",
|
||||
"@eslint/compat": "^1.2.5",
|
||||
"@eslint/js": "^9.18.0",
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@tailwindcss/vite": "^4.0.0",
|
||||
"eslint": "^9.18.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-svelte": "^2.46.1",
|
||||
"globals": "^15.14.0",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"autoprefixer": "^10.4.19",
|
||||
"cssnano": "^7.0.1",
|
||||
"postcss": "^8.4.38"
|
||||
"typescript-eslint": "^8.20.0",
|
||||
"vite": "^6.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
const tailwindcss = require("tailwindcss")
|
||||
const autoprefixer = require("autoprefixer")
|
||||
const cssnano = require("cssnano")
|
||||
|
||||
const mode = process.env.NODE_ENV
|
||||
const dev = mode === "development"
|
||||
|
||||
const config = {
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
autoprefixer(),
|
||||
!dev &&
|
||||
cssnano({
|
||||
preset: "default",
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
@@ -1,12 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
h1 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
h2 {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
+4
-7
@@ -1,15 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
@@ -1,44 +0,0 @@
|
||||
<script>
|
||||
export let open = false
|
||||
</script>
|
||||
|
||||
<button class="text-gray-500 hover:text-gray-700 cursor-pointer mr-4 border-none focus:outline-none" class:open on:click={() => open = !open}>
|
||||
<svg width=32 height=24>
|
||||
<line id="top" x1=0 y1=2 x2=32 y2=2/>
|
||||
<line id="middle" x1=0 y1=12 x2=24 y2=12/>
|
||||
<line id="bottom" x1=0 y1=22 x2=32 y2=22/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
min-height: 24px;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
svg line {
|
||||
stroke: currentColor;
|
||||
stroke-width: 3;
|
||||
transition: transform 0.3s ease-in-out
|
||||
}
|
||||
|
||||
button {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.open svg {
|
||||
transform: scale(0.7)
|
||||
}
|
||||
|
||||
.open #top {
|
||||
transform: translate(6px, 0px) rotate(45deg)
|
||||
}
|
||||
|
||||
.open #middle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.open #bottom {
|
||||
transform: translate(-12px, 9px) rotate(-45deg)
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
<svg width=100% height=30>
|
||||
<text x=0 y=20>ACME</text>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
text {
|
||||
fill: currentColor
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 111 B |
@@ -1,4 +0,0 @@
|
||||
<nav class="hidden text-gray-500 uppercase text-bold sm:block">
|
||||
<a href="/" class="hover:text-gray-700 hover:no-underline">Home</a>
|
||||
<a href="/about" class="hover:text-gray-700 hover:no-underline">About</a>
|
||||
</nav>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script>
|
||||
import Logo from './Logo.svelte';
|
||||
import Hamburger from './Hamburger.svelte';
|
||||
import Menu from './Menu.svelte';
|
||||
|
||||
export let sidebar = false;
|
||||
</script>
|
||||
|
||||
<header class="flex justify-between bg-gray-200 p-2 items-center text-gray-600 border-b-2">
|
||||
<nav class="flex">
|
||||
<Hamburger bind:open={sidebar} />
|
||||
<Logo />
|
||||
</nav>
|
||||
|
||||
<Menu />
|
||||
</header>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script>
|
||||
export let open = false
|
||||
|
||||
function close() {
|
||||
open = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside class="absolute w-full h-full bg-gray-200 border-r-2 shadow-lg z-10" class:open>
|
||||
<nav class="p-12 text-xl">
|
||||
<a class="block" href="/" on:click={close}>Home</a>
|
||||
<a class="block" href="/about" on:click={close}>About</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
aside {
|
||||
left: -100%;
|
||||
transition: left 0.3s ease-in-out
|
||||
}
|
||||
|
||||
.open {
|
||||
left: 0
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<script>
|
||||
import Navbar from '$lib/menu/Navbar.svelte';
|
||||
import Sidebar from '$lib/menu/Sidebar.svelte';
|
||||
import '../app.css';
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<main class="w-full h-full">
|
||||
<Sidebar bind:open />
|
||||
<Navbar bind:sidebar={open} />
|
||||
|
||||
<slot></slot>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,2 @@
|
||||
<main class="w-full h-full">
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
</main>
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<svelte:head>
|
||||
<title>About</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>About this site</h1>
|
||||
<p>TODO ...</p>
|
||||
@@ -1,14 +0,0 @@
|
||||
const config = {
|
||||
mode: "jit",
|
||||
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["Baar Sophia", "Arial"],
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
Reference in New Issue
Block a user