Optimize homepage query, Portable Text formatting, Events

bun.lock

@@ -7,6 +7,7 @@
         "@sanity/client": "^7.2.2",
       },
       "devDependencies": {
+        "@portabletext/svelte": "^3.0.0",
         "@skeletonlabs/skeleton": "^3.1.3",
         "@skeletonlabs/skeleton-svelte": "^1.2.1",
         "@sveltejs/adapter-auto": "^6.0.0",
@@ -97,6 +98,12 @@
 
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
 
+    "@portabletext/svelte": ["@portabletext/svelte@3.0.0", "", { "dependencies": { "@portabletext/toolkit": "^2.0.17" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-1PTbasjgyYdA/vpt4BCs3Nc0Fr8pqJQRuI6llhpNe+JgZ1EoSstzzjkSSGn9TtPW7yPls5i/7QksqhYTjUDocw=="],
+
+    "@portabletext/toolkit": ["@portabletext/toolkit@2.0.17", "", { "dependencies": { "@portabletext/types": "^2.0.13" } }, "sha512-5wj+oUaCmHm9Ay1cytPmT1Yc0SrR1twwUIc0qNQ3MtaXaNMPw99Gjt1NcA34yfyKmEf/TAB2NiiT72jFxdddIQ=="],
+
+    "@portabletext/types": ["@portabletext/types@2.0.13", "", {}, "sha512-5xk5MSyQU9CrDho3Rsguj38jhijhD36Mk8S6mZo3huv6PM+t4M/5kJN2KFIxgvt4ONpvOEs1pVIZAV0cL0Vi+Q=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.40.0", "", { "os": "android", "cpu": "arm" }, "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.40.0", "", { "os": "android", "cpu": "arm64" }, "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w=="],

package.json

@@ -2,6 +2,7 @@
 	"name": "ecsess-website",
 	"version": "0.0.1",
 	"devDependencies": {
+		"@portabletext/svelte": "^3.0.0",
 		"@skeletonlabs/skeleton": "^3.1.3",
 		"@skeletonlabs/skeleton-svelte": "^1.2.1",
 		"@sveltejs/adapter-auto": "^6.0.0",

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>
+	<p class="page-title">Events</p>
 	{#each data.events as event}
-    <div class="p-4 border-4 rounded-lg">
+		<div class="rounded-lg border-4 p-4">
 			<p>{event.name}</p>
 			<p>{event.date}</p>
 			<p>{event.location}</p>
-        <p>{event.description}</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>