Merge branch 'main' into SEO

src/routes/+layout.svelte

@@ -1,8 +1,12 @@
 <script>
 	import '../app.css';
+	import { dev } from '$app/environment';
+    import { inject } from '@vercel/analytics';
 	import Navbar from 'components/NavBar.svelte';
 	import Footer from 'components/Footer.svelte';
 
+	inject({ mode: dev ? 'development' : 'production' });
+
 	let { children } = $props();
 </script>
 

src/routes/+page.server.ts

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

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

@@ -1,18 +1,27 @@
+import type { EventPost } from '$lib/schemas';
 import { getFromCMS } from '$lib/utils.js';
 
-// needs to concat and format this text
 const eventQuery = `*[_type == "events"]{
   name,
   category,
   date,
   location,
   description,
+  reglink, 
+  paylink,
+  "thumbnail": thumbnail.asset->url+"?h=800&fm=webp", 
   "lastUpdated": _updatedAt,
 }`;
 
 export const load = async ({ url }) => {
+	let listOfEvents: EventPost[] = await getFromCMS(eventQuery);
+
+	let sortedEvents = listOfEvents.sort(
+		(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+	);
+
 	return {
-		events: await getFromCMS(eventQuery),
+		events: sortedEvents,
 		canonical: url.href
 	};
 };

src/routes/events/+page.svelte

@@ -1,10 +1,16 @@
-<script>
-	import { PortableText } from '@portabletext/svelte';
+<script lang="ts">
 	import Section from 'components/Section.svelte';
 	import SeoMetaTags from 'components/SeoMetaTags.svelte';
 	let { data } = $props();
-</script>
 
+	import EventTabControl from 'components/EventTabControl.svelte';
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+	import EventTabPanel from 'components/EventTabPanel.svelte';
+	import type { EventPost } from '$lib/schemas';
+
+	let events: EventPost[] = data.events ?? [];
+	let group = $state('allEvents');
+</script>
 
 <SeoMetaTags
 	title="Events by ECSESS"
@@ -14,22 +20,25 @@
 
 <Section>
 	<p class="page-title">Events</p>
-	{#each data.events as event}
-		<div class="rounded-lg border-4 p-4">
-			<p>{event.name}</p>
-			<p>{event.date}</p>
-			<p>{event.location}</p>
-			{#if event.description}
-				<PortableText value={event.description} />
-			{/if}
-			Category:
-			<div class="list">
-				<ul class="list-inside list-disc space-y-2">
-					{#each event.category as cat}
-						<li>{cat}</li>
-					{/each}
-				</ul>
-			</div>
-		</div>
-	{/each}
+	<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>
 </Section>

src/routes/resources/+page.svelte

@@ -14,11 +14,13 @@
 <Section>
 	<p class="page-title">Resources</p>
 
-	<div class="flex flex-col gap-8">
+	<div class="grid gap-4">
 		{#each data.resources as re}
-			<ResourceCard title={re.title} link={re.url}>
-				{re.description}
-			</ResourceCard>
+			<ResourceCard
+				title={re.title}
+				link={re.url}
+				description={re.description}
+			/>
 		{/each}
 	</div>
 </Section>