From 18a41b3b3f321c219af432d51f7210725d66cf9f Mon Sep 17 00:00:00 2001 From: Santiago Lo Coco Date: Wed, 24 Apr 2024 14:17:13 +0200 Subject: [PATCH] Add navbar and use localStorage for theme --- .prettierignore | 4 + src/app.html | 17 +- src/hooks.server.ts | 13 +- src/lib/components/NavBar.svelte | 239 +++++++++++++++++++++++++- src/lib/components/ThemePicker.svelte | 124 ++++++++++--- src/routes/+layout.svelte | 5 +- src/routes/about/+page.svelte | 38 ++++ static/favicon.png | Bin 1571 -> 2246950 bytes svelte.config.js | 30 +--- tailwind.config.js | 2 + tsconfig.json | 5 - 11 files changed, 406 insertions(+), 71 deletions(-) create mode 100644 src/routes/about/+page.svelte diff --git a/.prettierignore b/.prettierignore index 75dc494..2cfe6fe 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,3 +2,7 @@ pnpm-lock.yaml package-lock.json yarn.lock +**/node_modules +**/.svelte-kit +**/.vercel +.prettierignore \ No newline at end of file diff --git a/src/app.html b/src/app.html index 98dfe47..156004f 100644 --- a/src/app.html +++ b/src/app.html @@ -1,12 +1,27 @@ - + + %sveltekit.head% + +
%sveltekit.body%
diff --git a/src/hooks.server.ts b/src/hooks.server.ts index c5e03b9..28e002a 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -1,14 +1,16 @@ import type { Handle } from "@sveltejs/kit" -export type Theme = "light" | "dark" | "auto" +// export type Theme = "light" | "dark" | "auto" +export type Theme = "light" | "dark" export const isValidTheme = ( theme: FormDataEntryValue | null -): theme is Theme => - !!theme && (theme === "light" || theme === "dark" || theme === "auto") +): theme is Theme => !!theme && (theme === "light" || theme === "dark") +// !!theme && (theme === "light" || theme === "dark" || theme === "auto") export const handle: Handle = async ({ event, resolve }) => { - const theme = event.cookies.get("theme") ?? "auto" + // const theme = event.cookies.get("theme") ?? "auto" + const theme = event.cookies.get("theme") ?? "dark" if (isValidTheme(theme)) { event.locals.theme = theme } @@ -18,7 +20,8 @@ export const handle: Handle = async ({ event, resolve }) => { }) const response = await resolve(event, { - transformPageChunk: ({ html }) => html.replace("%THEME%", theme), + // transformPageChunk: ({ html }) => html.replace("%THEME%", theme === "auto" ? "dark" : theme), + // transformPageChunk: ({ html }) => html.replace("%THEME%", theme), }) return response diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte index 7d83c84..de63abc 100644 --- a/src/lib/components/NavBar.svelte +++ b/src/lib/components/NavBar.svelte @@ -1,19 +1,240 @@ -
-
- BreakOften + -