update to deno 2, get theme selector working

kjloveless · Oct 13, 2024 · 6d61a44 · 6d61a44
1 parent 91ca5e1
commit 6d61a44
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/deno.json b/deno.json
@@ -43,5 +43,5 @@
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
   },
-  "nodeModulesDir": true
+  "nodeModulesDir": "auto"
 }
diff --git a/islands/theme-toggle.tsx b/islands/theme-toggle.tsx
@@ -1,17 +1,23 @@
-import { useSignal } from "@preact/signals";
+import { signal } from "@preact/signals";
 
 import { Button } from "../components/ui/Button.tsx";
 import { Icons } from "../components/icons.tsx";
 
-export function ThemeToggle() {
-  const theme = useSignal("light");
+export const theme = signal("dark");
 
+export function ThemeToggle() {
   return (
     <Button
       variant="ghost"
       size="sm"
       onClick={() => {
         theme.value = theme.value === "light" ? "dark" : "light";
+        if (theme.value === "light") {
+          document.documentElement.classList.remove("dark");
+        } else {
+          document.documentElement.classList.add("dark");
+        }
+
         console.log(theme.value);
       }}
     >

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -5,9 +5,11 @@ import { siteConfig } from "../config/site.ts";
 import MainNav from "../components/main-nav.tsx";
 import SiteHeader from "../islands/site-header.tsx";
 
+import { theme } from "../islands/theme-toggle.tsx";
+
 export default function App({ Component, url }: PageProps) {
   return (
-    <html class="dark">
+    <html className={theme.value}>
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/util/mod.ts b/util/mod.ts
@@ -6,16 +6,12 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function getDomain(hostname: string) {
-  try {
-    const domainParts = hostname.split(".");
+  const domainParts = hostname.split(".");
 
-    const domain = `${domainParts[domainParts.length - 1]}
-    ${domainParts[domainParts.length]}`;
-    const subdomain = hostname.split(domain)[0];
-    return { domain, subdomain };
-  } catch (e) {
-    throw new Error(e.message);
-  }
+  const domain = `${domainParts[domainParts.length - 1]}
+  ${domainParts[domainParts.length]}`;
+  const subdomain = hostname.split(domain)[0];
+  return { domain, subdomain };
 }
 
 export const RESERVED = [