From ff071a8146cfad2f96b83ec9d660695adde7bbf3 Mon Sep 17 00:00:00 2001 From: JovannMC Date: Fri, 17 Jan 2025 21:04:04 +0300 Subject: [PATCH] Use localStorage for cookie (& fix theme flashing) removes js-cookie --- package.json | 1 - src/app.html | 2 +- src/hooks.server.ts | 17 ----------------- src/lib/store/index.svelte.ts | 18 ++---------------- src/routes/+layout.server.ts | 11 +---------- src/routes/+layout.svelte | 16 +++++++++++++++- src/routes/+layout.ts | 14 +------------- 7 files changed, 20 insertions(+), 59 deletions(-) delete mode 100644 src/hooks.server.ts diff --git a/package.json b/package.json index e121526..722495d 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,6 @@ "@imagemagick/magick-wasm": "^0.0.31", "client-zip": "^2.4.5", "clsx": "^2.1.1", - "js-cookie": "^3.0.5", "jsmediatags": "^3.9.7", "lucide-svelte": "^0.456.0", "wasm-vips": "^0.0.11" diff --git a/src/app.html b/src/app.html index d5cc2e5..edc21c7 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/src/hooks.server.ts b/src/hooks.server.ts deleted file mode 100644 index cd470ec..0000000 --- a/src/hooks.server.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { Handle } from "@sveltejs/kit"; - -export const handle: Handle = async ({ event, resolve }) => { - let theme = event.cookies.get("theme") ?? ""; - if (theme !== "dark" && theme !== "light") { - event.cookies.set("theme", "", { - path: "/", - sameSite: "lax", - expires: new Date(2147483647 * 1000), - }); - theme = ""; - } - const res = await resolve(event, { - transformPageChunk: ({ html }) => html.replace("%theme%", theme), - }); - return res; -}; diff --git a/src/lib/store/index.svelte.ts b/src/lib/store/index.svelte.ts index 488a059..0c82e69 100644 --- a/src/lib/store/index.svelte.ts +++ b/src/lib/store/index.svelte.ts @@ -2,7 +2,6 @@ import { browser } from "$app/environment"; import { converters } from "$lib/converters"; import { error, log } from "$lib/logger"; import { VertFile } from "$lib/types"; -import JSCookie from "js-cookie"; import jsmediatags from "jsmediatags"; import type { TagType } from "jsmediatags/types"; import { writable } from "svelte/store"; @@ -183,11 +182,6 @@ class Theme { public set dark(value: boolean) { this._dark = value; if (!browser) return; - JSCookie.set("theme", this.dark ? "dark" : "light", { - path: "/", - sameSite: "lax", - expires: 2147483647, - }); log(["theme"], `set to ${this.dark ? "dark" : "light"}`); window.plausible("Theme set", { props: { theme: theme.dark ? "dark" : "light" }, @@ -195,19 +189,11 @@ class Theme { if (value) { document.documentElement.classList.add("dark"); document.documentElement.classList.remove("light"); - JSCookie.set("theme", "dark", { - path: "/", - sameSite: "lax", - expires: 2147483647, - }); + localStorage.setItem("theme", "dark"); } else { document.documentElement.classList.add("light"); document.documentElement.classList.remove("dark"); - JSCookie.set("theme", "light", { - path: "/", - sameSite: "lax", - expires: 2147483647, - }); + localStorage.setItem("theme", "light"); } } public toggle = () => { diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index c5281f1..763ee6d 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -1,13 +1,4 @@ -export const load = ({ url, request, cookies }) => { - // if the "theme" cookie isn't "dark" or "light", reset it - const theme = cookies.get("theme") ?? ""; - if (theme !== "dark" && theme !== "light") { - cookies.set("theme", "", { - path: "/", - sameSite: "lax", - expires: new Date(0), - }); - } +export const load = ({ url, request }) => { const { pathname } = url; const ua = request.headers.get("user-agent"); const isMobile = /mobile/i.test(ua || ""); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 28139a1..d6a28f1 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,7 +6,11 @@ import Navbar from "$lib/components/functional/Navbar.svelte"; import Footer from "$lib/components/visual/Footer.svelte"; import Logo from "$lib/components/visual/svg/Logo.svelte"; - import { files, gradientColor, showGradient } from "$lib/store/index.svelte"; + import { + files, + gradientColor, + showGradient, + } from "$lib/store/index.svelte"; import { InfoIcon, RefreshCw, @@ -107,6 +111,16 @@ src="{PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js" >{/if} +
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index 8c3207b..2210615 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -1,6 +1,5 @@ import { browser } from "$app/environment"; import { theme } from "$lib/store/index.svelte"; -import JSCookie from "js-cookie"; export const load = ({ data }) => { if (!browser) return; @@ -11,21 +10,10 @@ export const load = ({ data }) => { status: 200, }); }); - const themeStr = JSCookie.get("theme"); - if (typeof themeStr === "undefined") { - theme.dark = window.matchMedia("(prefers-color-scheme: dark)").matches; - JSCookie.set("theme", theme.dark ? "dark" : "light", { - sameSite: "strict", - path: "/", - expires: 2147483647, - }); - } else { - theme.dark = themeStr === "dark"; - } - theme.dark = JSCookie.get("theme") === "dark"; window.plausible("Theme set", { props: { theme: theme.dark ? "dark" : "light" }, }); + theme.dark = localStorage.getItem("theme") === "dark"; return data; };