Quality of life update & package migrations. Use Vercel as default adapter (#67)

* Update all packages
* Manual migration to SkeletonUI v4.8.0. Event elements has breaking tabs underline highlight
* Remove unused dependencies & Let Prettier clean everything
* Minor misc styling update

src/routes/+page.server.ts

@@ -40,4 +40,4 @@ export const load = async ({ url }) => {
 		sponsors: sponsorsResp,
 		canonical: url.href
 	};
-};
+};

src/routes/+page.svelte

@@ -77,5 +77,4 @@
 			</div>
 		</div>
 	</div>
-
 </Section>

src/routes/council/+page.server.ts

@@ -9,7 +9,7 @@ const councilQuery = `*[_type == "members"]{
   email,
   position,
   positionDescription,
-  "image": image.asset->url+"?h=200&fm=webp",
+  "image": image.asset->url+"?h=300&fm=webp",
   yearProgram
 }`;
 

src/routes/events/+page.svelte

@@ -3,8 +3,8 @@
 	import { Tabs } from '@skeletonlabs/skeleton-svelte';
 	import Section from 'components/layout/Section.svelte';
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
-	import EventTabControl from 'components/event/EventTabControl.svelte';
-	import EventTabPanel from 'components/event/EventTabPanel.svelte';
+	import EventTabsTrigger from 'components/event/EventTabsTrigger.svelte';
+	import EventTabsContent from 'components/event/EventTabsContent.svelte';
 
 	let { data } = $props();
 
@@ -20,25 +20,20 @@
 
 <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-600" direction="to-b">
 	<p class="page-title">Events</p>
-	<Tabs
-		value={group}
-		onValueChange={(e) => (group = e.value)}
-		listClasses="flex-wrap place-content-center"
-	>
-		{#snippet list()}
-			<EventTabControl value="allEvents">All Events</EventTabControl>
-			<EventTabControl value="academic">Academic</EventTabControl>
-			<EventTabControl value="professional">Professional</EventTabControl>
-			<EventTabControl value="social">Social</EventTabControl>
-			<EventTabControl value="technical">Technical</EventTabControl>
-		{/snippet}
 
-		{#snippet content()}
-			<EventTabPanel value="allEvents" category="allEvents" {events} />
-			<EventTabPanel value="academic" category="academic" {events} />
-			<EventTabPanel value="professional" category="professional" {events} />
-			<EventTabPanel value="social" category="social" {events} />
-			<EventTabPanel value="technical" category="technical" {events} />
-		{/snippet}
+	<Tabs value={group} onValueChange={(e) => (group = e.value)} composite={true}>
+		<Tabs.List>
+			<EventTabsTrigger value="allEvents">All Events</EventTabsTrigger>
+			<EventTabsTrigger value="academic">Academic</EventTabsTrigger>
+			<EventTabsTrigger value="professional">Professional</EventTabsTrigger>
+			<EventTabsTrigger value="social">Social</EventTabsTrigger>
+			<EventTabsTrigger value="technical">Technical</EventTabsTrigger>
+		</Tabs.List>
+
+		<EventTabsContent value="allEvents" category="allEvents" {events} />
+		<EventTabsContent value="academic" category="academic" {events} />
+		<EventTabsContent value="professional" category="professional" {events} />
+		<EventTabsContent value="social" category="social" {events} />
+		<EventTabsContent value="technical" category="technical" {events} />
 	</Tabs>
 </Section>

src/routes/join/+page.server.ts

@@ -1,5 +1,5 @@
 export const load = async ({ url }) => {
-  return {
-    canonical: url.href
-  };
+	return {
+		canonical: url.href
+	};
 };

src/routes/r/[shortname]/+page.svelte

@@ -8,17 +8,17 @@
 
 <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
 	<p class="page-title">Can't redirect you to <code>"r/{data.shortname}"</code>!</p>
-	<hr class="border-2 w-1/2">
+	<hr class="w-1/2 border-2" />
 	<div>
 		Maybe you were trying to get to:
 		<ul>
 			{#each data.availableShortnames as redirect}
-			<li class="list-disc list-inside text-lg my-1">
-				{redirect.name} ~
-				<Link href={redirect.url}>
-					/r/{redirect.shortname}
-				</Link>
-			</li>
+				<li class="my-1 list-inside list-disc text-lg">
+					{redirect.name} ~
+					<Link href={redirect.url}>
+						/r/{redirect.shortname}
+					</Link>
+				</li>
 			{/each}
 		</ul>
 	</div>