Basic stuff

2025-03-18 00:52:29 -06:00
parent 19e6beaec4
commit a57072d6f8
8 changed files with 145 additions and 4 deletions
@@ -0,0 +1,4 @@
+<script>
+    import { Settings } from "@utils/settings.ts";
+    const settings = new Settings();
+</script>
@@ -1,17 +1,22 @@
 ---
+import "@styles/themes/default.css";
 import "@styles/global.css";
+import { ClientRouter } from "astro:transitions";
+import SettingsLoader from "@components/SettingsLoader.astro";
 ---
 <!doctype html>
 <html lang="en">
-	<head>
+    <head>
+        <SettingsLoader transition:persist />
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Radius</title>
+        <title>Radius</title>
+        <ClientRouter fallback="animate" />
 	</head>
-    <body class="h-full">
-        <div class="h-full w-full fixed">
+    <body class="h-full w-full bg-(--background)">
+        <div class="h-full w-full fixed bg-(--background)">
            <slot />
        </div>
 	</body>
@@ -0,0 +1,21 @@
+.bluelight {
+    --background: hsl(230 8% 85%) !important;
+    --foreground: hsl(229 26% 28%) !important;
+    --muted: hsl(230 12% 81%) !important;
+    --muted-foreground: hsl(230 12% 21%) !important;
+    --popover: hsl(230 8% 82%) !important;
+    --popover-foreground: hsl(229 26% 18%) !important;
+    --card: hsl(230 8% 83%) !important;
+    --card-foreground: hsl(229 26% 23%) !important;
+    --border: hsl(0 0% 80%) !important;
+    --input: hsl(0 0% 77%) !important;
+    --primary: hsl(223 42% 57%) !important;
+    --primary-foreground: hsl(0 0% 100%) !important;
+    --secondary: hsl(223 30% 75%) !important;
+    --secondary-foreground: hsl(223 30% 15%) !important;
+    --accent: hsl(230 8% 70%) !important;
+    --accent-foreground: hsl(230 8% 10%) !important;
+    --destructive: hsl(2 82% 30%) !important;
+    --destructive-foreground: hsl(2 82% 90%) !important;
+    --ring: hsl(223 42% 57%) !important;
+  }
@@ -0,0 +1,21 @@
+.cyberpunk {
+    --background: hsl(253 41% 19%) !important;
+    --foreground: hsl(157 100% 50%) !important;
+    --muted: hsl(253 12% 23%) !important;
+    --muted-foreground: hsl(253 12% 73%) !important;
+    --popover: hsl(253 41% 16%) !important;
+    --popover-foreground: hsl(157 100% 60%) !important;
+    --card: hsl(253 41% 17%) !important;
+    --card-foreground: hsl(157 100% 55%) !important;
+    --border: hsl(253 31% 24%) !important;
+    --input: hsl(253 31% 27%) !important;
+    --primary: hsl(167 100% 50%) !important;
+    --primary-foreground: hsl(167 100% 10%) !important;
+    --secondary: hsl(167 30% 25%) !important;
+    --secondary-foreground: hsl(167 30% 85%) !important;
+    --accent: hsl(253 41% 34%) !important;
+    --accent-foreground: hsl(254 41% 94%) !important;
+    --destructive: hsl(5 92% 45%) !important;
+    --destructive-foreground: hsl(0 0% 100%) !important;
+    --ring: hsl(167 100% 50%) !important;
+  }
@@ -0,0 +1,24 @@
+@import "./bluelight.css";
+@import "./cyberpunk.css";
+:root {
+    --background: hsl(214 27.37% 7.55%);
+    --foreground: hsl(212 16% 82%);
+    --muted: hsl(214 12% 16%);
+    --muted-foreground: hsl(214 12% 66%);
+    --popover: hsl(214 27% 9%);
+    --popover-foreground: hsl(212 16% 92%);
+    --card: hsl(214 23.58% 9.03%);
+    --card-foreground: hsl(212 16% 87%);
+    --border: hsl(214 17% 17%);
+    --input: hsl(214 17% 20%);
+    --primary: hsl(194.72 85% 45%);
+    --primary-foreground: hsl(189 85% 5%);
+    --secondary: hsl(221.89 18.13% 22.46%);
+    --secondary-foreground: hsl(189 30% 85%);
+    --accent: hsl(221.89 18.13% 22.46%);
+    --accent-foreground: hsl(214 27% 87%);
+    --destructive: hsl(6 96% 59%);
+    --destructive-foreground: hsl(0 0% 100%);
+    --ring: hsl(215.09 100% 98.03%);
+    --radius: hsl(0.4rem);
+}
@@ -0,0 +1,49 @@
+import { StoreManager } from "./storage";
+
+class Settings {
+    #storageManager: StoreManager<"radius||settings">;
+    static #instance = new Set(); 
+
+    static async getInstance() {
+        function *get() {
+            for (const instance of Settings.#instance.keys()) {
+                yield instance!;
+            }
+        }
+
+        const ready = (): Promise<boolean> => {
+            return new Promise((resolve) => {
+                const i = setInterval(() => {
+                    if (Settings.#instance.size !== 0) {
+                        clearInterval(i);
+                        resolve(true);
+                    }
+                }, 100);
+            })
+        } 
+
+        await ready();
+        return get().next().value! as Settings;
+    }
+
+    theme(theme: string) {
+        this.#storageManager.setVal('theme', theme);
+        theme === 'default' 
+            ? document.documentElement.className = '' 
+            : document.documentElement.className = theme;
+    }
+
+    async *#init() {
+        yield this.theme(this.#storageManager.getVal('theme'));
+    }
+
+    constructor() {
+        this.#storageManager = new StoreManager("radius||settings");
+        Settings.#instance.add(this);
+        (async() => {
+            for await (const _ of this.#init()); 
+        })();
+    }
+}
+
+export { Settings }
@@ -0,0 +1,17 @@
+class StoreManager<Prefix extends string> {
+    #prefix: string;
+    constructor(pref: Prefix) {
+        this.#prefix = pref;
+    }
+    getVal(key: string): string {
+        return localStorage.getItem(`${this.#prefix}||${key}`) as string;
+    }
+    setVal(key: string, val: string): void {
+        localStorage.setItem(`${this.#prefix}||${key}`, val);
+    }
+    removeVal(key: string): void {
+        localStorage.removeItem(`${this.#prefix}||${key}`);
+    }
+}
+
+export { StoreManager }