Optimize homepage query, Portable Text formatting, Events

src/routes/+page.server.js

@@ -1,7 +1,9 @@
 import { getFromCMS } from 'utils/utils.js';
 
-// needs to concat and format this text
-const descQuery = `*[_type == "homepage"].description[].children[].text`;
+const homepageQuery = `*[_type == "homepage"]{
+	"description": description[],
+	"councilPhoto": councilPhoto.asset->url
+}[0]`;
 
 const ohQuery = `*[_type=="oh"].schedule[]{
   day,
@@ -11,10 +13,12 @@ const ohQuery = `*[_type=="oh"].schedule[]{
 }`;
 
 export const load = async () => {
+	let CMSresponse = await getFromCMS(homepageQuery);
+
 	return {
-		description: await getFromCMS(descQuery),
-		ohs: await getFromCMS(ohQuery),
-		pictures: "",
-		FAQs: "",
+		description: CMSresponse.description,
+		councilPhoto: CMSresponse.councilPhoto
+		// ohs: await getFromCMS(ohQuery),
+		// FAQs: "",
 	};
 };

src/routes/+page.svelte

@@ -1,7 +1,9 @@
 <script>
 	import Section from 'components/Section.svelte';
+	import { PortableText } from '@portabletext/svelte';
 	/** loading things from the server side */
 	let { data } = $props();
+	console.log(data);
 </script>
 
 <title> McGill ECSESS </title>
@@ -10,18 +12,18 @@
 <Section>
 	<div class="flex h-1/2 flex-col items-center justify-center text-center">
 		<p class="page-title">What is ECSESS?</p>
-		<p>{data.description}</p>
+		<div id="test">
+			<PortableText value={data.description} />
+		</div>
 	</div>
 </Section>
 
 <!-- Picture, FAQ -->
 <Section black>
+	<h1>Our student council</h1>
 	<div class="flex justify-around gap-12">
 		<div>
-			<p>PICTURES</p>
-		</div>
-		<div>
-			<p>FAQ</p>
+			<img src={data.councilPhoto} alt="ECSESS Council" />
 		</div>
 	</div>
 </Section>
@@ -29,6 +31,11 @@
 <!-- Office Hours Calendar -->
 <Section>
 	<div>
-		<p class="text-2xl">Office Hours</p>
+		<h1>FAQ</h1>
+		<p>Under development</p>
+	</div>
+	<div>
+		<h1 class="text-2xl">Office Hours</h1>
+		<p>Under development</p>
 	</div>
 </Section>

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

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

src/routes/events/+page.svelte

@@ -1,19 +1,27 @@
 <script>
-    import Section from "components/Section.svelte";
-    let {data} = $props();    
+	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>
-    {#each data.events as event}
-    <div class="p-4 border-4 rounded-lg">
-        <p>{event.name}</p>
-        <p>{event.date}</p>
-        <p>{event.location}</p>
-        <p>{event.description}</p>
-    </div>
-
-    {/each}
+	<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>