Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-04 12:45:17 +02:00
Code Issues Releases Activity

Update theme handling and add theme selection dropdown in Navbar.svelte

Browse source
This commit is contained in:
Sean Morley 2024-04-17 00:01:19 +00:00
parent 3892a3ea39
commit b76e655e38
7 changed files with 55 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />

28
src/hooks.server.ts
View file

@ -1,7 +1,8 @@
import { lucia } from "$lib/server/auth";
import type { Handle } from "@sveltejs/kit";
import { sequence } from '@sveltejs/kit/hooks';
export const handle: Handle = async ({ event, resolve }) => {
export const authHook: Handle = async ({ event, resolve }) => {
const sessionId = event.cookies.get(lucia.sessionCookieName);
if (!sessionId) {
event.locals.user = null;
@ -20,7 +21,7 @@ export const handle: Handle = async ({ event, resolve }) => {
});
}
if (!session) {
const sessionCookie = lucia.createBlankSessionCookie();
const sessionCookie:any = lucia.createBlankSessionCookie();
event.cookies.set(sessionCookie.name, sessionCookie.value, {
path: ".",
...sessionCookie.attributes,
@ -30,3 +31,26 @@ export const handle: Handle = async ({ event, resolve }) => {
event.locals.session = session;
return resolve(event);
};
export const themeHook: Handle = async ({ event, resolve }) => {
let theme:String | null = null;
const newTheme = event.url.searchParams.get("theme");
const cookieTheme = event.cookies.get("colortheme");
if(newTheme) {
theme = newTheme;
} else if (cookieTheme) {
theme = cookieTheme;
}
if (theme) {
return await resolve(event, {
transformPageChunk: ({ html }) =>
html.replace('data-theme=""', `data-theme="${theme}"`)
})
}
return await resolve(event);
}
export const handle = sequence(authHook, themeHook);

13
src/lib/components/Navbar.svelte
View file

@ -97,5 +97,18 @@
<UserAvatar {user} />
{/if}
<button class="btn btn-neutral ml-4" on:click={showModal}>About</button>
<div class="dropdown dropdown-bottom dropdown-end">
<div tabindex="0" role="button" class="btn m-1 ml-4">Themes</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
>
<form method="POST">
<li><button formaction="/?/setTheme&theme=light">Light</button></li>
<li><button formaction="/?/setTheme&theme=dark">Dark</button></li>
</form>
</ul>
</div>
</div>
</div>

4
src/lib/components/UserAvatar.svelte
View file

@ -37,8 +37,8 @@
<li><a>Profile</a></li>
<li><button on:click={navToLog}>My Log</button></li>
<li><button on:click={navToSettings}>Settings</button></li>
<form method="post" action="/" use:enhance>
<li><button>Logout</button></li>
<form method="post">
<li><button formaction="/?/logout">Logout</button></li>
</form>
</ul>
</div>

13
src/routes/+page.server.ts
View file

@ -3,7 +3,7 @@ import { fail, redirect } from "@sveltejs/kit";
import type { Actions, PageServerLoad } from "./$types";
export const load: PageServerLoad = async (event) => {
export const load: PageServerLoad = async (event: { locals: { user: any; }; }) => {
if (event.locals.user)
return {
user: event.locals.user,
@ -15,7 +15,7 @@ export const load: PageServerLoad = async (event) => {
// handle the logout action
export const actions: Actions = {
default: async (event) => {
logout: async (event) => {
if (!event.locals.session) {
return fail(401);
}
@ -28,4 +28,13 @@ export const actions: Actions = {
});
return redirect(302, "/login");
},
setTheme: async ( { url, cookies }) => {
const theme = url.searchParams.get("theme");
if (theme) {
cookies.set("colortheme", theme, {
path: "/",
maxAge: 60 * 60 * 24 * 365,
});
}
},
};

2
src/routes/login/+page.svelte
View file

@ -17,7 +17,7 @@
});
if (response.ok) {
// wait .5s before redirecting
errors = {};
goto("/login");
return;
}

2
tailwind.config.js
View file

@ -6,6 +6,6 @@ export default {
},
plugins: [require("@tailwindcss/typography"), require("daisyui")],
daisyui: {
themes: ["night"],
themes: ["light", "dark"],
},
};