fix: switch to adapter-vercel and fix CSP nonce mismatch

apps/web/package.json

@@ -15,7 +15,8 @@
 		"@devcard/shared": "workspace:*"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-node": "^5.5.4",
+		"@sveltejs/adapter-vercel": "^6.3.3",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"svelte": "^5.51.0",

apps/web/src/routes/devcard/[id]/+page.server.ts

@@ -19,10 +19,12 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
 
 		const card = await res.json();
 		return { card };
-	} catch (error) {
-		if (error && typeof error === 'object' && 'status' in error) {
-			throw error;
+	} catch (err) {
+			// Check if err is a SvelteKit error object
+			if (err && typeof err === 'object' && 'status' in err) {
+				throw err;
+			}
+			// err is unknown, so throw a new error object
+			throw error(500, 'Failed to connect to backend');
 		}
-		throw error(500, 'Failed to connect to backend');
-	}
 };

apps/web/src/routes/u/[username]/+page.svelte

@@ -3,8 +3,8 @@
   import { onMount } from 'svelte';
 
   let { data } = $props();
-  const profile = data.profile;
-  const error = data.error;
+  const profile = $derived(data.profile);
+  const error = $derived(data.error);
 
   const platformColors: Record<string, string> = {
     github: '#181717', linkedin: '#0A66C2', twitter: '#000000',
@@ -17,7 +17,8 @@
   let mounted = $state(false);
   let copyMessage = $state('');
   let copyStatus = $state<'success' | 'error'>('success');
-  let copyMessageTimeout: ReturnType<typeof setTimeout>;
+  let copyMessageTimeout: ReturnType<typeof setTimeout> | undefined;
+  let copyTimeout: ReturnType<typeof setTimeout>;
 
   onMount(() => {
     mounted = true;

apps/web/svelte.config.js

@@ -1,30 +1,30 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapterVercel from '@sveltejs/adapter-vercel';
+import adapterNode from '@sveltejs/adapter-node';
+
+const isCI = process.env.CI === 'true';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	kit: {
-		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
-		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter(),
-		csp: {
-			mode: 'auto',
-			directives: {
-				'default-src': ['self'],
-				'script-src': ['self', 'unsafe-inline'],
-				'style-src': ['self', 'unsafe-inline', 'https://fonts.googleapis.com'],
-				'img-src': ['self', 'data:', 'https:'],
-				'connect-src': ['self'],
-				'font-src': ['self', 'data:', 'https:', 'https://fonts.gstatic.com'],
-				'object-src': ['none'],
-				'base-uri': ['self'],
-				'frame-ancestors': ['none']
-			}
-		}
-	},
-	vitePlugin: {
-		dynamicCompileOptions: ({ filename }) => ({ runes: !filename.includes('node_modules') })
-	}
+  kit: {
+    adapter: isCI ? adapterNode() : adapterVercel(),
+    csp: {
+      mode: 'hash',
+      directives: {
+        'default-src': ['self'],
+        'script-src': ['self'],
+        'style-src': ['self', 'unsafe-inline', 'https://fonts.googleapis.com'],
+        'img-src': ['self', 'data:', 'https:'],
+        'connect-src': ['self', 'http://localhost:3000'],
+        'font-src': ['self', 'data:', 'https:', 'https://fonts.gstatic.com'],
+        'object-src': ['none'],
+        'base-uri': ['self'],
+        'frame-ancestors': ['none']
+      }
+    }
+  },
+  vitePlugin: {
+    dynamicCompileOptions: ({ filename }) => ({ runes: !filename.includes('node_modules') })
+  }
 };
 
-export default config;
+export default config;