cleanup env and move storage to utils

Author: xlc-dev

.env.example

@@ -1,33 +1,21 @@
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { ColorModeProvider, ColorModeScript, createLocalStorageManager } from "@kobalte/core";
-import { Suspense, Show } from "solid-js";
-
-import "./app.css";
-
-const ENABLE_COLOR_MODE = import.meta.env.VITE_ENABLE_COLOR_MODE === "true";
+import { Suspense } from "solid-js";
 
 export default function App() {
-  let storageManager: ReturnType<typeof createLocalStorageManager>;
-
-  if (ENABLE_COLOR_MODE) {
-    storageManager = createLocalStorageManager("theme");
-  }
+  const storageManager = createLocalStorageManager("theme");
 
   return (
-    <Router
-      base={import.meta.env.SERVER_BASE_URL}
-      root={(props) => (
-        <Show when={ENABLE_COLOR_MODE} fallback={<Suspense>{props.children}</Suspense>}>
-          <>
-            <ColorModeScript storageType={storageManager.type} />
-            <ColorModeProvider storageManager={storageManager}>
-              <Suspense>{props.children}</Suspense>
-            </ColorModeProvider>
-          </>
-        </Show>
-      )}>
-      <FileRoutes />
-    </Router>
+    <>
+      <ColorModeScript storageType={storageManager.type} />
+      <ColorModeProvider storageManager={storageManager}>
+        <Suspense>
+          <Router base={import.meta.env.SERVER_BASE_URL}>
+            <FileRoutes />
+          </Router>
+        </Suspense>
+      </ColorModeProvider>
+    </>
   );
 }

public/robots.txt

@@ -1,7 +1,7 @@
 import { MetaProvider, Title } from "@solidjs/meta";
 import { Show } from "solid-js";
 
-import { createStorageSignal } from "~/storage";
+import { createStorageSignal } from "~/utils";
 
 import { ThemeToggle } from "~/components/ui/ThemeToggle";
 import { Flex } from "~/components/ui/Flex";

src/app.tsx

@@ -1,6 +1,8 @@
 import type { ClassValue } from "clsx";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { Accessor, Setter } from "solid-js";
+import { createSignal, createEffect, onMount, on } from "solid-js";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -10,3 +12,26 @@ export function getCSSVar(name: string) {
   const css = getComputedStyle(document.documentElement);
   return css.getPropertyValue(name).trim();
 }
+
+export function createStorageSignal<T>(key: string, defaultValue: T): [Accessor<T>, Setter<T>] {
+  const [value, setValue] = createSignal<T>(defaultValue);
+
+  onMount(() => {
+    const item = localStorage.getItem(key);
+    if (item != null) {
+      try {
+        setValue(JSON.parse(item));
+      } catch {
+        /* ignore malformed */
+      }
+    }
+  });
+
+  createEffect(
+    on(value, (v) => {
+      localStorage.setItem(key, JSON.stringify(v));
+    })
+  );
+
+  return [value, setValue];
+}