Add API integration for schedule, sponsors, and speakers

- Integrate with Copia Events API for dynamic content
- Add Vite proxy to handle CORS for API requests
- Schedule page now fetches tracks, sessions, and speaker data from API
- Talk titles and abstracts pulled from speaker.talk_title/talk_abstract
- Sponsors page fetches sponsor data with tier grouping from API
- Speakers page fetches speaker profiles from API
- Force light mode by removing all dark mode CSS
- Improve sponsor toast UX with "Tap for details" indicator
- Add migration guide for applying changes to other projects

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: Matt

MIGRATION_GUIDE.md

@@ -91,12 +91,6 @@
 		color: var(--color-primary);
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.nav-link.active {
-			color: var(--color-text-light);
-		}
-	}
-
 	@media (min-width: 768px) {
 		.header {
 			padding: var(--space-md) var(--space-xl);

helsing-ad/~$ wording.docx

@@ -7,7 +7,7 @@
 	}
 
 	interface Speaker {
-		id: number;
+		id: string | number;
 		name: string;
 		photo?: string;
 		title?: string;
@@ -102,7 +102,7 @@
 				{/if}
 				{#if speaker.social?.linkedin}
 					<a
-						href="https://linkedin.com/in/{speaker.social.linkedin}"
+						href={speaker.social.linkedin.startsWith('http') ? speaker.social.linkedin : `https://linkedin.com/in/${speaker.social.linkedin}`}
 						target="_blank"
 						rel="noopener noreferrer"
 						aria-label="{speaker.name} on LinkedIn"

src/lib/components/Header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	interface Sponsor {
-		id: number;
+		id: string | number;
 		name: string;
 		tier: string;
 		logo: string;

src/lib/components/SpeakerCard.svelte

@@ -3,7 +3,7 @@
 	import { base } from '$app/paths';
 
 	interface SponsorAd {
-		id: number;
+		id: string | number;
 		name: string;
 		tier: string;
 		logo: string;
@@ -28,7 +28,6 @@
 	let expanded = $state(false);
 	let progress = $state(0);
 	let dismissed = $state(false);
-	let isDarkMode = $state(false);
 
 	let progressInterval: ReturnType<typeof setInterval>;
 	let hideTimeout: ReturnType<typeof setTimeout>;
@@ -104,15 +103,6 @@
 	}
 
 	onMount(() => {
-		// Detect dark mode
-		const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-		isDarkMode = darkModeQuery.matches;
-
-		const handleColorSchemeChange = (e: MediaQueryListEvent) => {
-			isDarkMode = e.matches;
-		};
-		darkModeQuery.addEventListener('change', handleColorSchemeChange);
-
 		// Show first ad after a short delay
 		const initialDelay = setTimeout(() => {
 			showAd();
@@ -123,7 +113,6 @@
 			clearInterval(progressInterval);
 			clearTimeout(hideTimeout);
 			clearTimeout(nextAdTimeout);
-			darkModeQuery.removeEventListener('change', handleColorSchemeChange);
 		};
 	});
 
@@ -137,11 +126,8 @@
 		return path;
 	}
 
-	// Get the correct logo based on dark/light mode
+	// Get the logo (always light mode)
 	function getLogo(ad: SponsorAd): string {
-		if (isDarkMode && ad.logoDark) {
-			return resolveAsset(ad.logoDark);
-		}
 		return resolveAsset(ad.logo);
 	}
 </script>
@@ -171,6 +157,12 @@
 					<span class="sponsor-message">{currentAd.message}</span>
 					<span class="sponsor-name">{currentAd.name}</span>
 					<span class="sponsor-tier">{currentAd.tier} sponsor</span>
+					<span class="tap-hint">
+						Tap for details
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+							<polyline points="9 18 15 12 9 6"/>
+						</svg>
+					</span>
 				</div>
 
 				<button
@@ -307,14 +299,19 @@
 		width: 100%;
 		text-align: left;
 		cursor: pointer;
+		transition: transform var(--transition-fast), box-shadow var(--transition-fast);
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.toast {
-			border-color: var(--color-yellow);
-		}
+	.toast:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
 	}
 
+	.toast:active {
+		transform: translateY(0);
+	}
+
+
 	.progress-bar {
 		position: absolute;
 		top: 0;
@@ -374,6 +371,29 @@
 		text-overflow: ellipsis;
 	}
 
+	.tap-hint {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-size: var(--text-xs);
+		font-weight: 600;
+		color: var(--color-primary);
+		margin-top: 2px;
+	}
+
+	.tap-hint svg {
+		animation: bounce-right 1s ease-in-out infinite;
+	}
+
+	@keyframes bounce-right {
+		0%, 100% {
+			transform: translateX(0);
+		}
+		50% {
+			transform: translateX(3px);
+		}
+	}
+
 	.close-btn {
 		display: flex;
 		align-items: center;

src/lib/components/SponsorCard.svelte

@@ -8,8 +8,8 @@
 	}
 
 	interface Talk {
-		id: number;
-		track: number;
+		id: string | number;
+		track: string | number;
 		time: string;
 		duration: number;
 		title: string;

src/lib/components/SponsorToast.svelte

@@ -2,14 +2,14 @@
 	import { onMount } from 'svelte';
 
 	interface Track {
-		id: number;
+		id: string | number;
 		name: string;
 	}
 
 	interface Props {
 		tracks: Track[];
-		selectedTrack: number;
-		onSelect: (trackId: number) => void;
+		selectedTrack: string | number;
+		onSelect: (trackId: string | number) => void;
 	}
 
 	let { tracks, selectedTrack, onSelect }: Props = $props();

src/lib/components/TalkCard.svelte

@@ -137,24 +137,3 @@ a {
 	border: 0;
 }
 
-/* Dark Mode */
-@media (prefers-color-scheme: dark) {
-	:root {
-		--color-white: #1C1C1E;
-		--color-black: #F5F5F7;
-		--color-surface: #1C1C1E;
-		--color-text: #F5F5F7;
-		--color-text-muted: #98989D;
-		--color-gray-100: #000000;
-		--color-gray-200: #2C2C2E;
-		--color-gray-300: #3A3A3C;
-		--color-gray-600: #98989D;
-		--color-gray-800: #D1D1D6;
-		--color-primary: #B366F9; /* Lighter purple for dark mode contrast */
-		--color-primary-dark: #9A3EF0;
-		--color-primary-light: #C88FFF;
-		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-		--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
-	}
-}