disable client side rendering, removing 99% of javascript

SuperchupuDev · SuperchupuDev · commit ea8863138c11 · 2026-03-06T13:57:49.000+01:00
diff --git a/src/app.html b/src/app.html
@@ -5,7 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body>
 		%sveltekit.body%
 	</body>
 </html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,12 +2,8 @@
   import Moon from "@lucide/svelte/icons/moon";
   import Sun from "@lucide/svelte/icons/sun";
   import SunMoon from "@lucide/svelte/icons/sun-moon";
-  import type { FormEventHandler } from "svelte/elements";
   import Logo from "$lib/components/Logo.svelte";
 
-  const oninput: FormEventHandler<HTMLInputElement> = (e) =>
-    localStorage.setItem("theme", e.currentTarget.id);
-
   let { children } = $props();
 </script>
 
@@ -29,24 +25,32 @@
   </nav>
   <theme-picker aria-label="Selector de temas" role="radiogroup">
     <label aria-label="Predeterminado">
-      <input type="radio" name="theme" id="system" {oninput} checked />
+      <input type="radio" name="theme" id="system" checked />
       <SunMoon />
     </label>
     <label aria-label="Claro">
-      <input type="radio" name="theme" id="light" {oninput} />
+      <input type="radio" name="theme" id="light" />
       <Sun />
     </label>
     <label aria-label="Oscuro">
-      <input type="radio" name="theme" id="dark" {oninput} />
+      <input type="radio" name="theme" id="dark" />
       <Moon />
     </label>
   </theme-picker>
   <script>
-    // needs to be an inline script so that it runs asap
+    // this is the only javascript that runs in the entire site
+    // all it does is saving and loading the saved theme
+    // all other logic is pure html/css
     const theme = localStorage.getItem("theme");
     if (theme) {
       document.getElementById(theme).checked = true;
     }
+
+    const oninput = (e) => localStorage.setItem("theme", e.target.id);
+
+    document.getElementById("system").addEventListener("input", oninput);
+    document.getElementById("light").addEventListener("input", oninput);
+    document.getElementById("dark").addEventListener("input", oninput);
   </script>
 </header>
 {@render children()}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1,2 +1,5 @@
+import { dev } from '$app/environment';
+
+export const csr = dev;
 export const prerender = true;
 export const ssr = true;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -100,7 +100,7 @@
       </sponsors-section>
     </div>
     <enhanced:img
-      src="$lib/assets/etsii.jpg?w=800;400"
+      src="$lib/assets/etsii.jpg?w=600;400"
       width="400"
       sizes="400px"
       alt="Edificio de la ETSII"
