build(deps-dev): bump @skeletonlabs/skeleton from 1.5.1 to 2.4.0 (#18)

* build(deps-dev): bump @skeletonlabs/skeleton from 1.5.1 to 2.4.0 Bumps [@skeletonlabs/skeleton](https://github.com/skeletonlabs/skeleton) from 1.5.1 to 2.4.0. - [Release notes](https://github.com/skeletonlabs/skeleton/releases) - [Commits](https://github.com/skeletonlabs/skeleton/compare/1.5.1...@skeletonlabs/[email protected]) --- updated-dependencies: - dependency-name: "@skeletonlabs/skeleton" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * feat: migration * fix: migrated toastStores to v2 --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Soham Jaiswal <[email protected]>
cardboard-ink · Nov 10, 2023 · 76c40cb · 76c40cb
1 parent 7b086ac
commit 76c40cb
Show file tree

Hide file tree

Showing 15 changed files with 298 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -18,12 +18,15 @@
 	},
 	"devDependencies": {
 		"@floating-ui/dom": "^1.2.8",
-		"@skeletonlabs/skeleton": "^1.5.1",
+		"@iconify/svelte": "^3.1.4",
+		"@skeletonlabs/skeleton": "^2.4.0",
+		"@skeletonlabs/tw-plugin": "^0.2.4",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-node": "^1.2.4",
 		"@sveltejs/kit": "^1.5.0",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.9",
+		"@types/node": "^20.9.0",
 		"@types/bcrypt": "^5.0.1",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.62.0",
@@ -46,6 +49,7 @@
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.3.0",
+		"vite-plugin-tailwind-purgecss": "^0.1.3",
 		"zod": "^3.21.4"
 	},
 	"dependencies": {

diff --git a/skeleton b/skeleton
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="h-full overflow-hidden" data-theme="skeleton">
+	<body data-sveltekit-preload-data="hover" class="h-full overflow-hidden" data-theme="modern">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/app.postcss b/src/app.postcss
@@ -1,3 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 /*Write your global styles here, in PostCSS syntax */
 /*place global styles here */
 html,

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -2,37 +2,17 @@ import type { Handle } from '@sveltejs/kit'
 import { db } from '$lib/server/database'
 import { cleanupAuths } from '$lib/server/authclean'
 
-/*
-	You can use a custom redirect if you want...
-
-	function redirect(location: string) {
-		return new Response(undefined, {
-			status: 303,
-			headers: { location },
-		})
-	}
-
-	...and redirect pages inside hooks.server.ts
-
-	if (!session) {
-		if (event.url.pathname === '/admin') {
-			return redirect('/')
-		}
-
-		return await resolve(event)
-	}
-
-	...but doing it inside `load` for the protected
-	routes you can invalidate the data on the page
-*/
-
 export const handle: Handle = async ({ event, resolve }) => {
-	// get cookies from browser
-	// const session = event.cookies.get('session')
-
 	cleanupAuths()
+	let theme = '';
+	const cookieTheme = event.cookies.get('theme');
 	const session = event.cookies.get('guildedAuthSession')
-
+	if (cookieTheme) {
+		theme = cookieTheme
+	} else {
+		event.cookies.set('theme', 'skeleton');
+		theme = 'modern'
+	}
 	if (!session) {
 		// if there is no session load page as normal
 		return await resolve(event)
@@ -50,7 +30,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 			path: '/',
 			expires: new Date(0),
 		})
-		return await resolve(event)
+		return await resolve(event, {
+			transformPageChunk: ({ html }) => html.replace('data-theme=""', `data-theme="${theme}"`)
+		});
 	}
 
 	// if the session has expired
@@ -61,7 +43,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 			path: '/',
 			expires: new Date(0),
 		})
-		return await resolve(event)
+		return await resolve(event, {
+			transformPageChunk: ({ html }) => html.replace('data-theme=""', `data-theme="${theme}"`)
+		});
 	}
 
 	const sessionUser = user.user
@@ -78,5 +62,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 		}
 	}
 	// load page as normal
-	return await resolve(event)
+	return await resolve(event, {
+		transformPageChunk: ({ html }) => html.replace('data-theme=""', `data-theme="${theme}"`)
+	});
 }
diff --git a/src/lib/stores/stores.ts b/src/lib/stores/stores.ts
@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+// Session based theme store. Grabs the current theme from the current body.
+export const storeTheme = writable(browser ? document.body.getAttribute('data-theme') ?? '' : 'skeleton');
diff --git a/src/routes/(protected)/settings/sessions/+page.server.ts b/src/routes/(protected)/settings/sessions/+page.server.ts
@@ -1,8 +1,6 @@
 import { redirect } from '@sveltejs/kit'
 
 import { db } from '$lib/server/database'
-
-import { toastStore, type ToastSettings } from '@skeletonlabs/skeleton'
 import type { GuildedAuthSession } from '@prisma/client'
 
 export const load = async ({ locals, cookies }) => {
@@ -48,12 +46,6 @@ export const actions = {
     const id = data.get('identifier') as string
 
     if (id === cookies.get('guildedAuthSession')) {
-      const t: ToastSettings = {
-        message: "Can't terminate current session.",
-        background: 'variant-filled-error',
-        timeout: 3000,
-      }
-      toastStore.trigger(t);
       throw redirect(302, '/settings/sessions')
     }
 

diff --git a/src/routes/(protected)/settings/your-apps/+page.svelte b/src/routes/(protected)/settings/your-apps/+page.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
   import { Avatar, clipboard } from '@skeletonlabs/skeleton';
-  import { toastStore, type ToastSettings } from '@skeletonlabs/skeleton';
 	import type { PageData } from './$types';
 
   export let data: PageData;
 
   const {myApps} = data;
-
 </script>
 
 <div class="flex s"></div>

diff --git a/src/routes/(protected)/settings/your-apps/[id]/+page.svelte b/src/routes/(protected)/settings/your-apps/[id]/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import AvatarInput from '$lib/client/ui/AvatarInput.svelte';
 	import BannerInput from '$lib/client/ui/BannerInput.svelte';
-	import { toastStore, type ToastSettings } from '@skeletonlabs/skeleton';
+	import { getToastStore, type ToastSettings } from '@skeletonlabs/skeleton';
 	import { superForm } from 'sveltekit-superforms/client';
     import {clipboard} from '@skeletonlabs/skeleton'
-
+    const toastStore = getToastStore();
     export let data;
 
     const {app} = data
@@ -23,7 +23,7 @@
         })
         );
         if (!req) return;
-        const data = await req.json().catch(() => {
+        const data = await (req as Response).json().catch(() => {
         toastStore.trigger({
             message: 'Failed to update secret, please update again!',
             background: 'variant-filled-error',

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -12,19 +12,42 @@
 	// Page from here
 	import { page } from '$app/stores'
 	import Avatar from '$lib/client/ui/Avatar.svelte'
-	import { LightSwitch, Toast, Modal, AppShell } from '@skeletonlabs/skeleton';
-	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
-
+	import { LightSwitch, Toast, Modal, AppShell, initializeStores, storePopup, ListBox, ListBoxItem, getDrawerStore, popup } from '@skeletonlabs/skeleton';
+	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
 	let modalVisible = false
 	const toggleModalVisibility = () => {
 		modalVisible = !modalVisible
 	}
-
-	import '@skeletonlabs/skeleton/themes/theme-skeleton.css'
-	import '@skeletonlabs/skeleton/styles/skeleton.css'
+	import Icon from '@iconify/svelte';
 	import '../app.postcss';
 	import { goto } from '$app/navigation';
-
+	import type { SubmitFunction } from '@sveltejs/kit';
+	import { storeTheme } from '$lib/stores/stores';
+	import { enhance } from '$app/forms';
+	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
+	initializeStores()
+	const drawerStore = getDrawerStore();
+	const setTheme: SubmitFunction = ({ data }) => {
+		const theme = data.get('theme')?.toString();
+		if (theme) {
+			document.body.setAttribute('data-theme', theme);
+			$storeTheme = theme;
+		}
+	};
+	const themes = [
+        { type: 'skeleton', name: 'Skeleton', icon: '💀' },
+        { type: 'wintry', name: 'Wintry', icon: '🌨️' },
+        { type: 'modern', name: 'Modern', icon: '🤖' },
+        { type: 'rocket', name: 'Rocket', icon: '🚀' },
+        { type: 'seafoam', name: 'Seafoam', icon: '🧜‍♀️' },
+        { type: 'vintage', name: 'Vintage', icon: '📺' },
+        { type: 'sahara', name: 'Sahara', icon: '🏜️' },
+        { type: 'hamlindigo', name: 'Hamlindigo', icon: '👔' },
+        { type: 'gold-nouveau', name: 'Gold Nouveau', icon: '💫' },
+        { type: 'crimson', name: 'Crimson', icon: '⭕' }
+        // { type: 'seasonal', name: 'Seasonal', icon: '🎆' }
+        // { type: 'test', name: 'Test', icon: '🚧' },
+	];
 	let sidebar: string = 'sidebar'
 
 	$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
@@ -48,7 +71,43 @@
 				</h1>
 				<div class="rhs">
 					{#if !$page.data.user}
-						<LightSwitch />
+					<button class="btn hover:variant-soft-primary" use:popup={{ event: 'click', target: 'theme', closeQuery: 'a[href]' }}>
+						<Icon icon="fa6-solid:palette" class="text-lg" />
+						<span class="hidden md:inline-block">Theme</span>
+						<Icon icon="fa-solid:caret-down" class="opacity-50" />
+					</button>
+					<!-- popup -->
+					<div class="card p-4 w-60 shadow-xl" data-popup="theme">
+						<div class="space-y-4">
+							<section class="flex justify-between items-center">
+								<h6 class="h6">Mode</h6>
+								<LightSwitch />
+							</section>
+							<hr />
+							<nav class="list-nav p-4 -m-4 max-h-64 lg:max-h-[500px] overflow-y-auto">
+								<form method="post" action="/?/setTheme" use:enhance={setTheme}>
+									<ul>
+										<!-- , badge -->
+										{#each themes as { icon, name, type }}
+											<li>
+												<button
+													class="option w-full h-full"
+													type="submit"
+													name="theme"
+													value={type}
+													class:bg-primary-active-token={$storeTheme === type}
+												>
+													<span>{icon}</span>
+													<span class="flex-auto text-left">{name}</span>
+													<!-- {#if badge}<span class="badge variant-filled-secondary">{badge}</span>{/if} -->
+												</button>
+											</li>
+										{/each}
+									</ul>
+								</form>
+							</nav>
+						</div>
+					</div>
 						<a href="/login">Login with Guilded</a>
 					{/if}
 
@@ -59,7 +118,43 @@
 								<Avatar src={$page.data.user.avatar} size={50}></Avatar>
 							</button>
 							<div class="modal card bg-inital z-10" class:visible="{modalVisible}" on:mouseenter={() => modalVisible = true} on:mouseleave={() => modalVisible = false}>
-								<LightSwitch />
+								<button class="btn hover:variant-soft-primary" use:popup={{ event: 'click', target: 'theme', closeQuery: 'a[href]' }}>
+									<Icon icon="fa6-solid:palette" class="text-lg" />
+									<span class="hidden md:inline-block">Theme</span>
+									<Icon icon="fa-solid:caret-down" class="opacity-50" />
+								</button>
+								<!-- popup -->
+								<div class="card p-4 w-60 shadow-xl" data-popup="theme">
+									<div class="space-y-4">
+										<section class="flex justify-between items-center">
+											<h6 class="h6">Mode</h6>
+											<LightSwitch />
+										</section>
+										<hr />
+										<nav class="list-nav p-4 -m-4 max-h-64 lg:max-h-[500px] overflow-y-auto">
+											<form method="post" action="/?/setTheme" use:enhance={setTheme}>
+												<ul>
+													<!-- , badge -->
+													{#each themes as { icon, name, type }}
+														<li>
+															<button
+																class="option w-full h-full"
+																type="submit"
+																name="theme"
+																value={type}
+																class:bg-primary-active-token={$storeTheme === type}
+															>
+																<span>{icon}</span>
+																<span class="flex-auto text-left">{name}</span>
+																<!-- {#if badge}<span class="badge variant-filled-secondary">{badge}</span>{/if} -->
+															</button>
+														</li>
+													{/each}
+												</ul>
+											</form>
+										</nav>
+									</div>
+								</div>
 								<div class="lg:hidden">
 									<nav class="list-nav flex flex-col gap-2">
 										<a href="/" class="{classesActive('/')}">🏠 Home</a>

diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
@@ -0,0 +1,12 @@
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	// This action is called when the user clicks the theme button
+	setTheme: async ({ cookies, request }) => {
+		const formData = await request.formData();
+		const theme = formData.get('theme')?.toString() ?? 'skeleton';
+		// Sets the selected theme to the cookie
+		cookies.set('theme', theme, { path: '/' });
+		return { theme };
+	}
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs