RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use localStorage for cookie (& fix theme flashing) 

removes js-cookie
This commit is contained in:
JovannMC 2025-01-17 21:04:04 +03:00
parent 35c697cac5
commit ff071a8146
No known key found for this signature in database
7 changed files with 20 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -44,7 +44,6 @@
"@imagemagick/magick-wasm": "^0.0.31", "@imagemagick/magick-wasm": "^0.0.31",
"client-zip": "^2.4.5", "client-zip": "^2.4.5",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"js-cookie": "^3.0.5",
"jsmediatags": "^3.9.7", "jsmediatags": "^3.9.7",
"lucide-svelte": "^0.456.0", "lucide-svelte": "^0.456.0",
"wasm-vips": "^0.0.11" "wasm-vips": "^0.0.11"

2
src/app.html
View File

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

17
src/hooks.server.ts
View File

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

18
src/lib/store/index.svelte.ts
View File

@ -2,7 +2,6 @@ import { browser } from "$app/environment";
import { converters } from "$lib/converters"; import { converters } from "$lib/converters";
import { error, log } from "$lib/logger"; import { error, log } from "$lib/logger";
import { VertFile } from "$lib/types"; import { VertFile } from "$lib/types";
import JSCookie from "js-cookie";
import jsmediatags from "jsmediatags"; import jsmediatags from "jsmediatags";
import type { TagType } from "jsmediatags/types"; import type { TagType } from "jsmediatags/types";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
@ -183,11 +182,6 @@ class Theme {
public set dark(value: boolean) { public set dark(value: boolean) {
this._dark = value; this._dark = value;
if (!browser) return; if (!browser) return;
JSCookie.set("theme", this.dark ? "dark" : "light", {
path: "/",
sameSite: "lax",
expires: 2147483647,
});
log(["theme"], `set to ${this.dark ? "dark" : "light"}`); log(["theme"], `set to ${this.dark ? "dark" : "light"}`);
window.plausible("Theme set", { window.plausible("Theme set", {
props: { theme: theme.dark ? "dark" : "light" }, props: { theme: theme.dark ? "dark" : "light" },
@ -195,19 +189,11 @@ class Theme {
if (value) { if (value) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
document.documentElement.classList.remove("light"); document.documentElement.classList.remove("light");
JSCookie.set("theme", "dark", { localStorage.setItem("theme", "dark");
path: "/",
sameSite: "lax",
expires: 2147483647,
});
} else { } else {
document.documentElement.classList.add("light"); document.documentElement.classList.add("light");
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
JSCookie.set("theme", "light", { localStorage.setItem("theme", "light");
path: "/",
sameSite: "lax",
expires: 2147483647,
});
} }
} }
public toggle = () => { public toggle = () => {

11
src/routes/+layout.server.ts
View File

@ -1,13 +1,4 @@
export const load = ({ url, request, cookies }) => { export const load = ({ url, request }) => {
// 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),
});
}
const { pathname } = url; const { pathname } = url;
const ua = request.headers.get("user-agent"); const ua = request.headers.get("user-agent");
const isMobile = /mobile/i.test(ua || ""); const isMobile = /mobile/i.test(ua || "");

16
src/routes/+layout.svelte
View File

@ -6,7 +6,11 @@
import Navbar from "$lib/components/functional/Navbar.svelte"; import Navbar from "$lib/components/functional/Navbar.svelte";
import Footer from "$lib/components/visual/Footer.svelte"; import Footer from "$lib/components/visual/Footer.svelte";
import Logo from "$lib/components/visual/svg/Logo.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 { import {
InfoIcon, InfoIcon,
RefreshCw, RefreshCw,
@ -107,6 +111,16 @@
src="{PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js" src="{PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js"
></script>{/if} ></script>{/if}
<script src="/coi-serviceworker.min.js"></script> <script src="/coi-serviceworker.min.js"></script>
<script>
// Apply theme before DOM is loaded
let theme = localStorage.getItem("theme");
if (theme !== "light" && theme !== "dark") {
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
theme = prefersDark ? "dark" : "light";
}
document.documentElement.classList.add(theme);
</script>
</svelte:head> </svelte:head>
<div class="flex flex-col min-h-screen h-full"> <div class="flex flex-col min-h-screen h-full">

14
src/routes/+layout.ts
View File

@ -1,6 +1,5 @@
import { browser } from "$app/environment"; import { browser } from "$app/environment";
import { theme } from "$lib/store/index.svelte"; import { theme } from "$lib/store/index.svelte";
import JSCookie from "js-cookie";
export const load = ({ data }) => { export const load = ({ data }) => {
if (!browser) return; if (!browser) return;
@ -11,21 +10,10 @@ export const load = ({ data }) => {
status: 200, 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", { window.plausible("Theme set", {
props: { theme: theme.dark ? "dark" : "light" }, props: { theme: theme.dark ? "dark" : "light" },
}); });
theme.dark = localStorage.getItem("theme") === "dark";
return data; return data;
}; };