WOO YEA
39
README.md
|
@ -1,38 +1,5 @@
|
||||||
# create-svelte
|
# file-uploader
|
||||||
|
|
||||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
[![forthebadge](https://forthebadge.com/images/badges/license-mit.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/designed-in-ms-paint.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/gluten-free.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/powered-by-black-magic.svg)](https://forthebadge.com)
|
||||||
|
|
||||||
## Creating a project
|
A file uploading website.
|
||||||
|
|
||||||
If you're seeing this, you've probably already done this step. Congrats!
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# create a new project in the current directory
|
|
||||||
npm create svelte@latest
|
|
||||||
|
|
||||||
# create a new project in my-app
|
|
||||||
npm create svelte@latest my-app
|
|
||||||
```
|
|
||||||
|
|
||||||
## Developing
|
|
||||||
|
|
||||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# or start the server and open the app in a new browser tab
|
|
||||||
npm run dev -- --open
|
|
||||||
```
|
|
||||||
|
|
||||||
## Building
|
|
||||||
|
|
||||||
To create a production version of your app:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
You can preview the production build with `npm run preview`.
|
|
||||||
|
|
||||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"lucide-svelte": "^0.358.0",
|
||||||
"svelte-sonner": "^0.3.19"
|
"svelte-sonner": "^0.3.19"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
11
src/app.css
|
@ -1,3 +1,14 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
html {
|
||||||
|
@apply dark:bg-neutral-950;
|
||||||
|
@apply dark:text-neutral-200;
|
||||||
|
@apply transition-colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
@apply dark:text-white;
|
||||||
|
@apply transition-colors;
|
||||||
|
}
|
||||||
|
|
11
src/lib/components/GenericButton.svelte
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<script>
|
||||||
|
export let click;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button class="" on:click={click}>
|
||||||
|
<div
|
||||||
|
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</button>
|
0
src/lib/components/GenericLink.svelte
Normal file
174
src/lib/components/Logo.svelte
Normal file
After Width: | Height: | Size: 291 KiB |
7
src/lib/components/PageMeta.svelte
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
export let title;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{title}</title>
|
||||||
|
</svelte:head>
|
39
src/lib/components/ThemeHandler.svelte
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
<script>
|
||||||
|
import { browser } from '$app/environment';
|
||||||
|
import { darkMode } from '../stores';
|
||||||
|
|
||||||
|
if (browser) {
|
||||||
|
const html = document.getElementsByTagName('html')[0];
|
||||||
|
|
||||||
|
$darkMode = localStorage.getItem('darkMode') === 'true';
|
||||||
|
|
||||||
|
darkMode.subscribe(() => {
|
||||||
|
console.log(`[ThemeHandler.svelte] Current theme is ${$darkMode ? 'dark' : 'light'} mode`);
|
||||||
|
|
||||||
|
localStorage.setItem('darkMode', $darkMode);
|
||||||
|
|
||||||
|
if ($darkMode) {
|
||||||
|
console.log('[ThemeHandler.svelte] Setting dark mode from store');
|
||||||
|
html.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
console.log('[ThemeHandler.svelte] Setting light mode from store');
|
||||||
|
html.classList.remove('dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<script>
|
||||||
|
const darkMode = localStorage.getItem('darkMode') === 'true';
|
||||||
|
const html = document.getElementsByTagName('html')[0];
|
||||||
|
|
||||||
|
if (darkMode) {
|
||||||
|
console.log('[ThemeHandler.svelte] Setting dark mode from localStorage');
|
||||||
|
html.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
console.log('[ThemeHandler.svelte] Setting light mode from localStorage');
|
||||||
|
html.classList.remove('dark');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</svelte:head>
|
17
src/lib/components/ThemeSwitcher.svelte
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
import { Sun, Moon } from 'lucide-svelte';
|
||||||
|
import { darkMode } from '../stores';
|
||||||
|
import GenericButton from './GenericButton.svelte';
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
$darkMode = !$darkMode;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<GenericButton click={toggleTheme}>
|
||||||
|
{#if $darkMode}
|
||||||
|
<Sun />
|
||||||
|
{:else}
|
||||||
|
<Moon />
|
||||||
|
{/if}
|
||||||
|
</GenericButton>
|
3
src/lib/stores.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export const darkMode = writable();
|
|
@ -1,5 +1,17 @@
|
||||||
<script>
|
<script>
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
|
||||||
|
import { Toaster } from 'svelte-sonner';
|
||||||
|
|
||||||
|
import { darkMode } from '$lib/stores.js';
|
||||||
|
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
|
||||||
|
import PageMeta from '$lib/components/PageMeta.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<PageMeta title="cirro's file uploader" />
|
||||||
|
<ThemeHandler />
|
||||||
|
<Toaster theme={$darkMode ? 'dark' : 'light'} />
|
||||||
|
|
||||||
|
<div class="container py-4">
|
||||||
<slot />
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
|
@ -1,7 +1,38 @@
|
||||||
<h1 class="text-3xl font-bold underline">Hello world!</h1>
|
<script>
|
||||||
|
import { toast } from 'svelte-sonner';
|
||||||
|
import { LogIn, UserPlus } from 'lucide-svelte';
|
||||||
|
|
||||||
<style lang="postcss">
|
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
|
||||||
:global(html) {
|
import GenericButton from '$lib/components/GenericButton.svelte';
|
||||||
background-color: theme(colors.gray.400);
|
import Logo from '$lib/components/Logo.svelte';
|
||||||
|
|
||||||
|
function testToast() {
|
||||||
|
toast.error('Not Implemented');
|
||||||
}
|
}
|
||||||
</style>
|
</script>
|
||||||
|
|
||||||
|
<div class="flex justify-center items-center h-screen">
|
||||||
|
<div class="flex flex-col space-y-1.5">
|
||||||
|
<div>
|
||||||
|
<div class="max-w-sm transition-colors fill-black dark:fill-white">
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
<p>Currently hosting <strong>0</strong> files.</p>
|
||||||
|
<p>Elon musk <strong>found dead</strong> in a <strong>pool</strong></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<ThemeSwitcher />
|
||||||
|
|
||||||
|
<GenericButton click={testToast}>
|
||||||
|
<LogIn />
|
||||||
|
<p>Login</p>
|
||||||
|
</GenericButton>
|
||||||
|
|
||||||
|
<GenericButton click={testToast}>
|
||||||
|
<UserPlus />
|
||||||
|
<p>Register</p>
|
||||||
|
</GenericButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
BIN
static/favicon-dark.png
Normal file
After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 13 KiB |
950
static/favicon.svg
Normal file
After Width: | Height: | Size: 53 KiB |
BIN
static/logo.png
Normal file
After Width: | Height: | Size: 55 KiB |
1136
static/logo.svg
Normal file
After Width: | Height: | Size: 329 KiB |
|
@ -1,8 +1,10 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||||
|
darkMode: 'selector',
|
||||||
theme: {
|
theme: {
|
||||||
extend: {}
|
extend: {},
|
||||||
|
container: { center: true }
|
||||||
},
|
},
|
||||||
plugins: []
|
plugins: []
|
||||||
};
|
};
|
||||||
|
|
|
@ -913,6 +913,11 @@ locate-character@^3.0.0:
|
||||||
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
|
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
|
||||||
integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
|
integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
|
||||||
|
|
||||||
|
lucide-svelte@^0.358.0:
|
||||||
|
version "0.358.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/lucide-svelte/-/lucide-svelte-0.358.0.tgz#0eeb03986a964ac8c9ead5cf7dbe45b5d4ef38dd"
|
||||||
|
integrity sha512-KSdl/FSW5EhexI+qZH/YV/6WmuMybx1dw1VD7n53xDJCpYUm/7dftOV3yTV0KaJxN7/tDss15M62SVvLLWsXLA==
|
||||||
|
|
||||||
magic-string@^0.30.3, magic-string@^0.30.4, magic-string@^0.30.5:
|
magic-string@^0.30.3, magic-string@^0.30.4, magic-string@^0.30.5:
|
||||||
version "0.30.8"
|
version "0.30.8"
|
||||||
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
|
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
|
||||||
|
@ -1234,6 +1239,7 @@ source-map-js@^1.0.1, source-map-js@^1.0.2:
|
||||||
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
|
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
|
||||||
|
|
||||||
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
|
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
|
||||||
|
name string-width-cjs
|
||||||
version "4.2.3"
|
version "4.2.3"
|
||||||
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
|
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
|
||||||
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
|
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
|
||||||
|
@ -1252,6 +1258,7 @@ string-width@^5.0.1, string-width@^5.1.2:
|
||||||
strip-ansi "^7.0.1"
|
strip-ansi "^7.0.1"
|
||||||
|
|
||||||
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
|
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
|
||||||
|
name strip-ansi-cjs
|
||||||
version "6.0.1"
|
version "6.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
|
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
|
||||||
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
|
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
|
||||||
|
|