Svelte5 migration

.github/workflows/cd.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "18"
+          node-version: "20"
       - name: Install dependencies
         working-directory: apps/web
         run: npm ci
@@ -54,7 +54,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "18"
+          node-version: "20"
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v3
         with:

.github/workflows/pr.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "18"
+          node-version: "20"
       - name: Install dependencies
         working-directory: apps/web
         run: npm ci

apps/web/.nvmrc

@@ -1 +1 @@
-21.7.3
+20.19.6

apps/web/package.json

@@ -15,8 +15,9 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.20.4",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/canvas-confetti": "^1.6.4",
     "@types/jsdom": "^21.1.1",
     "autoprefixer": "^10.4.14",
@@ -34,19 +35,19 @@
     "react-dom": "^18.2.0",
     "sst": "2.43.2",
     "supabase": "^1.178.2",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.4.3",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "svelte-kit-sst": "2.43.2",
     "tailwindcss": "^3.3.3",
     "tslib": "^2.4.1",
     "tsx": "^4.11.0",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.0.0-alpha.20",
-    "vite": "^4.4.2"
+    "vite": "^5.0.0"
   },
   "type": "module",
   "dependencies": {
-    "@supabase/auth-helpers-sveltekit": "^0.10.1",
+    "@supabase/ssr": "^0.5.0",
     "@supabase/supabase-js": "^2.26.0",
     "canvas-confetti": "^1.9.3",
     "dotenv": "^16.4.5",
@@ -60,4 +61,4 @@
   "lint-staged": {
     "*.{js,css,md}": "prettier --write"
   }
-}
+}

apps/web/src/app.d.ts

@@ -1,16 +1,22 @@
-import { SupabaseClient, Session } from "@supabase/supabase-js";
+import type { Session, User } from "@supabase/supabase-js";
+import type { Database } from "$lib/types/supabaseTypes";
 
 declare global {
     namespace App {
         interface Locals {
-            supabase: SupabaseClient;
-            getSession(): Promise<Session | null>;
+            supabase: ReturnType<
+                typeof import("@supabase/ssr").createServerClient<Database>
+            >;
+            safeGetSession(): Promise<{
+                session: Session | null;
+                user: User | null;
+            }>;
         }
         interface PageData {
             session: Session | null;
+            user: User | null;
         }
         // interface Error {}
-        // interface PageData {}
         // interface Platform {}
     }
 }

apps/web/src/app.pcss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto:wght@300;400;700&family=Playfair+Display:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto:wght@300;400;700&family=Playfair+Display:wght@400;700;900&family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;500;600;700;900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -115,3 +115,66 @@ body.font-playfair .serif-lowercase {
 body.font-jetbrains .section-header {
     font-size: 0.8rem;
 }
+
+/* ============================================
+   BRUTALIST LANDING PAGE STYLES
+   ============================================ */
+
+/* Massive headline typography */
+.headline-massive {
+    font-family: "Playfair Display", serif;
+    font-size: clamp(3rem, 12vw, 10rem);
+    font-weight: 900;
+    line-height: 0.9;
+    letter-spacing: -0.03em;
+    text-transform: uppercase;
+}
+
+.headline-large {
+    font-family: "Playfair Display", serif;
+    font-size: clamp(2rem, 6vw, 5rem);
+    font-weight: 700;
+    line-height: 1;
+}
+
+/* Rotated text for sideways labels */
+.rotated-text {
+    font-family: "Inter", sans-serif;
+    font-size: clamp(0.65rem, 1vw, 0.85rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.25em;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+}
+
+/* Body text using Inter */
+.body-inter {
+    font-family: "Inter", sans-serif;
+}
+
+/* 3D perspective container */
+.perspective-container {
+    perspective: 1000px;
+    perspective-origin: 50% 50%;
+}
+
+.preserve-3d {
+    transform-style: preserve-3d;
+}
+
+/* GPU acceleration for animations */
+.gpu-accelerated {
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+}
+
+/* Brutalist borders */
+.brutalist-border {
+    border: 4px solid black;
+}
+
+.brutalist-border-thin {
+    border: 2px solid black;
+}

apps/web/src/hooks.server.ts

@@ -2,27 +2,55 @@ import {
     PUBLIC_SUPABASE_URL,
     PUBLIC_SUPABASE_ANON_KEY
 } from "$env/static/public";
-import { type Database } from "$lib/types/supabaseTypes";
-import { createSupabaseServerClient } from "@supabase/auth-helpers-sveltekit";
+import type { Database } from "$lib/types/supabaseTypes";
+import { createServerClient } from "@supabase/ssr";
 import type { Handle } from "@sveltejs/kit";
 
 export const handle: Handle = async ({ event, resolve }) => {
-    event.locals.supabase = createSupabaseServerClient<Database>({
-        supabaseUrl: PUBLIC_SUPABASE_URL,
-        supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
-        event
-    });
+    event.locals.supabase = createServerClient<Database>(
+        PUBLIC_SUPABASE_URL,
+        PUBLIC_SUPABASE_ANON_KEY,
+        {
+            cookies: {
+                getAll: () => event.cookies.getAll(),
+                setAll: cookiesToSet => {
+                    cookiesToSet.forEach(({ name, value, options }) => {
+                        event.cookies.set(name, value, {
+                            ...options,
+                            path: "/"
+                        });
+                    });
+                }
+            }
+        }
+    );
 
-    event.locals.getSession = async () => {
+    event.locals.safeGetSession = async () => {
         const {
             data: { session }
         } = await event.locals.supabase.auth.getSession();
-        return session;
+
+        if (!session) {
+            return { session: null, user: null };
+        }
+
+        const {
+            data: { user },
+            error
+        } = await event.locals.supabase.auth.getUser();
+
+        if (error) {
+            return { session: null, user: null };
+        }
+
+        return { session, user };
     };
 
     return resolve(event, {
         filterSerializedResponseHeaders(name) {
-            return name === "content-range";
+            return (
+                name === "content-range" || name === "x-supabase-api-version"
+            );
         }
     });
 };

apps/web/src/lib/components/general/AppHeader.svelte

@@ -2,7 +2,12 @@
     import { goto } from "$app/navigation";
     import { modalStore } from "$lib/stores/modal";
     import { panelStore } from "$lib/stores/panel";
-    import { darkTheme, getStyles, isMobile } from "$lib/stores/styles";
+    import {
+        calColors,
+        darkTheme,
+        getStyles,
+        isMobile
+    } from "$lib/stores/styles";
     import type { SupabaseClient } from "@supabase/supabase-js";
     import { getContext } from "svelte";
 
@@ -13,10 +18,15 @@
         goto("/");
     };
 
-    $: cssVarStyles = getStyles("0");
+    // Make reactive to color/theme changes
+    let cssVarStyles = $derived.by(() => {
+        $calColors; // track dependency
+        $darkTheme; // track dependency
+        return getStyles("0");
+    });
 
     // Spinning animation state for theme toggle
-    let spinning = false;
+    let spinning = $state(false);
 
     const toggleTheme = () => {
         spinning = true;
@@ -43,7 +53,7 @@ dark:border-zinc-700 border-zinc-200"
         </div>
 
         <div id="right" class="sm:space-x-6 space-x-4 flex items-center">
-            <button on:click={toggleTheme} class="btn-circ">
+            <button onclick={toggleTheme} class="btn-circ">
                 {#if $darkTheme}
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -73,7 +83,7 @@ dark:border-zinc-700 border-zinc-200"
                 {/if}
             </button>
 
-            <button class="btn-circ" on:click={() => panelStore.open("theme")}>
+            <button class="btn-circ" onclick={() => panelStore.open("theme")}>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -93,7 +103,7 @@ dark:border-zinc-700 border-zinc-200"
 
             <button
                 class="btn-circ"
-                on:click={() => modalStore.push("feedback")}>
+                onclick={() => modalStore.push("feedback")}>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -111,7 +121,7 @@ dark:border-zinc-700 border-zinc-200"
                 {/if}
             </button>
 
-            <button class="btn-circ" on:click={handleLogout}>
+            <button class="btn-circ" onclick={handleLogout}>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -135,11 +145,19 @@ dark:border-zinc-700 border-zinc-200"
 
 <style lang="postcss">
     .btn-circ {
-        @apply flex items-center gap-1 dark:text-zinc-100;
+        @apply flex items-center gap-1;
+    }
+
+    :global(.dark) .btn-circ {
+        @apply text-zinc-100;
     }
 
     .btn-circ:hover {
-        @apply text-zinc-600 dark:text-zinc-300 duration-150;
+        @apply text-zinc-600 duration-150;
+    }
+
+    :global(.dark) .btn-circ:hover {
+        @apply text-zinc-300;
     }
 
     .btn-icon {

apps/web/src/lib/components/general/Feedback.svelte

@@ -8,10 +8,11 @@
     import { goto } from "$app/navigation";
 
     const supabase = getContext("supabase") as SupabaseClient;
-    export let showModal: boolean = false;
 
-    let feedback: string = "";
-    let isError: boolean = false;
+    let { showModal = false }: { showModal?: boolean } = $props();
+
+    let feedback: string = $state("");
+    let isError: boolean = $state(false);
 
     // Submit feedback to the database
     const submitFeedback = async () => {
@@ -40,7 +41,7 @@
 </script>
 
 <StdModal title="Feedback" stdClose={true} {showModal}>
-    <div slot="main">
+    {#snippet main()}
         <div>
             <p class="mb-2">
                 We always love to hear any feedback about TigerJunction! Whether
@@ -72,5 +73,5 @@
             className="w-full"
             scheme="1"
             onClick={submitFeedback} />
-    </div>
+    {/snippet}
 </StdModal>