bruhhh this layout is giving me a headache

src/routes/+page.server.js

@@ -0,0 +1,24 @@
+import { getFromCMS } from 'utils/utils.js';
+
+const homepageQuery = `*[_type == "homepage"]{
+	"description": description[],
+	"councilPhoto": councilPhoto.asset->url
+}[0]`;
+
+const ohQuery = `*[_type=="oh"].schedule[]{
+  day,
+  startTime,
+  endTime,
+  "host": member->name
+}`;
+
+export const load = async () => {
+	let CMSresponse = await getFromCMS(homepageQuery);
+
+	return {
+		description: CMSresponse.description,
+		councilPhoto: CMSresponse.councilPhoto
+		// ohs: await getFromCMS(ohQuery),
+		// FAQs: "",
+	};
+};

src/routes/+page.svelte

@@ -1,12 +1,16 @@
 <script>
 	import FaqAccordion from 'components/FAQAccordion.svelte';
 	import Section from 'components/Section.svelte';
+	import { PortableText } from '@portabletext/svelte';
+
+	/** loading things from the server side */
+	let { data } = $props();
 
 	// Getting info from ECSESS CMS
 	let longAnswer = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 	const query = '_type:homepage';
 	
-	const data = [
+	const faqs = [
     {
       q: "A fequently asked question?",
       a: "This is a short answer",
@@ -33,29 +37,30 @@
 <Section>
 	<div class="flex h-1/2 flex-col items-center justify-center text-center">
 		<p class="page-title">What is ECSESS?</p>
-
-		<p>{description}</p>
+		<div id="test">
+			<PortableText value={data.description} />
+		</div>
 	</div>
 </Section>
 
 <!-- Picture, FAQ -->
 <Section black>
-	<div class="flex justify-around gap-12">
-		<div>
-			<h1>PICTURES</h1>
-		</div>
-		<div>
-			<h1>FAQ</h1>
-			{#each data as { q, a }}
-			<FaqAccordion entry={{ title: q, description: a }} />
-			{/each}
-		</div>
+	<div>
+		<h1>Our Student Council</h1>
+		<img src={data.councilPhoto} alt="ECSESS Council" />
+	</div>
+	<div>
+		<h1>FAQ</h1>
+		{#each faqs as { q, a }}
+		<FaqAccordion entry={{ title: q, description: a }} />
+		{/each}
 	</div>
 </Section>
-
 <!-- Office Hours Calendar -->
 <Section>
 	<div>
-		<p class="text-2xl">Office Hours</p>
+		<h1 class="text-2xl">Office Hours</h1>
+		<p>Under development</p>
 	</div>
 </Section>
+

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

@@ -0,0 +1,16 @@
+import { getFromCMS } from 'utils/utils.js';
+
+const query = `*[_type == "members"]{
+  name,
+  email,
+  position,
+  positionDescription,
+  "image": image.asset->url,
+  yearProgram
+}`;
+
+export const load = async () => {
+	return {
+		members: await getFromCMS(query)
+	};
+};

src/routes/council/+page.svelte

@@ -1,20 +1,26 @@
 <script>
+	import CouncilCard from 'components/CouncilCard.svelte';
 	import Section from 'components/Section.svelte';
+	// import CouncilMember from 'utils/schemas.ts';
+	let { data } = $props();
 </script>
 
 <title> ECSESS council </title>
-
 <Section>
 	<p class="page-title">Meet the council!</p>
 
 	<p>Group picture!</p>
-
-	<p>Here are the members of the ECSESS council!</p>
-	<div>
-		<h2>President</h2>
-		<p>Name:</p>
-		<p>Email:</p>
-		<p>Year:</p>
-		<p>Program:</p>
+	
+	<div class="flex flex-row flex-wrap items-center align-middle gap-10 p-4">
+		{#each data.members as councilMember}
+			<CouncilCard
+				name={councilMember.name}
+				position={councilMember.position}
+				email={councilMember.email}
+				positionDescription={councilMember.positionDescription}
+				yearProgram={councilMember.yearProgram}
+				image={councilMember.image}
+			></CouncilCard>
+		{/each}
 	</div>
 </Section>

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

@@ -0,0 +1,17 @@
+import { getFromCMS } from 'utils/utils.js';
+
+// needs to concat and format this text
+const eventQuery = `*[_type == "events"]{
+  name,
+  category,
+  date,
+  location,
+  description,
+  "lastUpdated": _updatedAt,
+}`;
+
+export const load = async () => {
+	return {
+		events: await getFromCMS(eventQuery),
+	};
+};

src/routes/events/+page.svelte

@@ -1,9 +1,27 @@
 <script>
-    import Section from "components/Section.svelte";
+	import { PortableText } from '@portabletext/svelte';
+	import Section from 'components/Section.svelte';
+	let { data } = $props();
 </script>
 
 <title> ECSESS Events </title>
 
 <Section>
-    <p class='page-title'>Events</p>
+	<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>
+			<PortableText value={event.description} />
+            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}
 </Section>

src/routes/r/[shortname]/+page.server.js

@@ -0,0 +1,22 @@
+import { redirect } from '@sveltejs/kit';
+import { getFromCMS } from 'utils/utils.js';
+
+const redirectQuery = `*[_type == "redirects"]{ shortname, url }`;
+
+export const load = async ({ params }) => {
+	/** @type {[{shortname: String, url: String}]} */
+	let CMSresponse = await getFromCMS(redirectQuery);
+
+	const { shortname } = params;
+
+    CMSresponse.forEach(res => {
+        if(res.shortname == shortname) {
+            // if match
+            throw redirect(302, res.url);
+        }
+    });
+
+    return {
+        shortname: shortname,
+    }
+};

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

@@ -0,0 +1,12 @@
+<script>
+	import Section from 'components/Section.svelte';
+	let { data } = $props();
+</script>
+
+<Section>
+	<p class="page-title">Where am I?</p>
+	<p>
+        Oops! We don't have a page for <code>"r/{data.shortname}"</code>.
+	</p>
+	<p>Please try again!</p>
+</Section>

src/routes/resources/+page.server.js

@@ -0,0 +1,15 @@
+import { getFromCMS } from 'utils/utils.js';
+
+// needs to concat and format this text
+const query = `*[_type == "resources"]{
+  title,
+  url,
+  description,
+  "lastUpdated":_updatedAt
+}`;
+
+export const load = async () => {
+	return {
+		resources: await getFromCMS(query)
+	};
+};

src/routes/resources/+page.svelte

@@ -1,15 +1,19 @@
 <script>
 	import Section from 'components/Section.svelte';
+	let { data } = $props();
 </script>
 
 <title> Resources </title>
 
 <Section>
-    <p class='page-title'> Resources </p>
-	
-    <h1>Resources for ECSE students at McGill University, presented by ECSESS!</h1>
+	<p class="page-title">Resources</p>
 
-	<h2>Technical</h2>
+	<h1>Resources for ECSE students at McGill University, presented by ECSESS!</h1>
 
-	<h2>Academic</h2>
+	{#each data.resources as re}
+		{re.title} <br>
+		{re.url} <br>
+		{re.description} <br>
+		<p>==============</p>
+	{/each}
 </Section>