WOO YEA

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
-
-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.
+A file uploading website.

package.json

@@ -24,6 +24,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"lucide-svelte": "^0.358.0",
 		"svelte-sonner": "^0.3.19"
 	}
 }

src/app.css

@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+	@apply dark:bg-neutral-950;
+	@apply dark:text-neutral-200;
+	@apply transition-colors;
+}
+
+strong {
+	@apply dark:text-white;
+	@apply transition-colors;
+}

src/lib/components/GenericButton.svelte

@@ -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>

src/lib/components/PageMeta.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let title;
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+</svelte:head>

src/lib/components/ThemeHandler.svelte

@@ -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>

src/lib/components/ThemeSwitcher.svelte

@@ -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>

src/lib/stores.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const darkMode = writable();

src/routes/+layout.svelte

@@ -1,5 +1,17 @@
 <script>
 	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>
 
+<PageMeta title="cirro's file uploader" />
+<ThemeHandler />
+<Toaster theme={$darkMode ? 'dark' : 'light'} />
+
+<div class="container py-4">
 	<slot />
+</div>

src/routes/+page.svelte

@@ -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">
-	:global(html) {
-		background-color: theme(colors.gray.400);
+	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
+	import GenericButton from '$lib/components/GenericButton.svelte';
+	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>

tailwind.config.js

@@ -1,8 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
+	darkMode: 'selector',
 	theme: {
-		extend: {}
+		extend: {},
+		container: { center: true }
 	},
 	plugins: []
 };

yarn.lock

@@ -913,6 +913,11 @@ locate-character@^3.0.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
   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:
   version "0.30.8"
   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==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   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-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"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==