refactor: use Supabase for events and projects data

src/lib/components/cards/EventCard.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import type { Event } from '$lib/models/event';
 
+    import placeholder from '$lib/assets/lino/lino-sablay.svg';
+
     interface Props {
         event: Event;
     }
 
     const { event }: Props = $props();
-    const { name, slug, current_session }: Event = $derived(event);
+    const { name, img_url, current_session }: Event = $derived(event);
     const { type, start, end } = $derived(current_session);
 
     const date_options = { month: 'long', day: '2-digit', year: 'numeric' } as const;
@@ -16,16 +18,15 @@
 <div
     class="bg-float text-float-foreground flex h-auto w-full flex-col overflow-hidden rounded-lg shadow-lg md:h-[32rem] md:w-72"
 >
-    {#if slug}
-        <div class="**:!m-0">
-            <img
-                src="https://assets.up-csi.org/website/images/events/{slug}/0.webp"
-                alt={name}
-                loading="lazy"
-                class="h-64 w-full shrink-0 object-cover md:h-48"
-            />
-        </div>
-    {/if}
+    <div class="**:!m-0">
+        <img
+            src={img_url ?? placeholder}
+            alt={name}
+            loading="lazy"
+            class="h-64 w-full shrink-0 object-cover md:h-48"
+        />
+    </div>
+
     <div class="!m-3 flex h-full grow flex-col gap-2 overflow-hidden p-1 *:!m-0">
         <p>{type}</p>
         <h2>{name}</h2>

src/lib/components/modals/EventModal.svelte

@@ -84,9 +84,9 @@
             </div>
 
             <div class="col-span-3 mx-4 md:col-span-1 md:mx-0">
-                {#if currentItem.picture}
+                {#if currentItem.img_url}
                     <enhanced:img
-                        src={currentItem.picture}
+                        src={currentItem.img_url}
                         alt="dummy"
                         loading="lazy"
                         class="m-0 aspect-square w-full rounded-xl object-cover md:h-90"

src/lib/data/events/index.ts

@@ -3,27 +3,35 @@ import { parse } from 'valibot';
 import { type Event, Event as EventSchema } from '$lib/models/event';
 import type { State } from '$lib/types/state';
 
+import { supabase } from '$lib/supabaseClient';
+
 import { type EventSession, dummy_session } from '$lib/types/event_session';
 
 export async function getEvents() {
-    const imports = import.meta.glob<Event>('./json/*.json');
-
-    const promises = Object.entries(imports).map(async ([_, asset]) => {
-        const event = parse(EventSchema, await asset());
-
-        const parsed_sessions: EventSession[] = [];
-        for (const detail of event.sessions) {
-            const [type, start, end, description] = detail.split('|');
-            if ((type === 'Internal' || type === 'External') && start && end) {
-                const new_session: EventSession = {
-                    type,
-                    start: new Date(start),
-                    end: new Date(end),
-                    description: description ?? null,
-                };
-                parsed_sessions.push(new_session);
-            }
-        }
+    const { data, error } = await supabase
+        .from('events')
+        .select(
+            `
+            id, name, tag, description, img_url, slug,
+            event_sessions (audience_type, start_time, end_time, session_desc)
+        `,
+        )
+        .order('id');
+
+    if (error) throw new Error('events data fetching error');
+
+    const events: Event[] = [];
+    for (const eventData of data ?? []) {
+        const event = parse(EventSchema, eventData);
+
+        const currEventSessions = eventData.event_sessions ?? [];
+
+        const parsed_sessions: EventSession[] = currEventSessions.map(s => ({
+            type: s.audience_type as 'Internal' | 'External',
+            start: new Date(s.start_time),
+            end: new Date(s.end_time),
+            description: s.session_desc ?? null,
+        }));
 
         parsed_sessions.sort((a, b) => b.end.getTime() - a.end.getTime());
 
@@ -47,8 +55,8 @@ export async function getEvents() {
         if (state === 'Past')
             current_session = parsed_sessions[parsed_sessions.length - 1] ?? dummy_session;
 
-        return { ...event, parsed_sessions, current_session, state } as Event;
-    });
+        events.push({ ...event, parsed_sessions, current_session, state } as Event);
+    }
 
-    return await Promise.all(promises);
+    return events;
 }

src/lib/data/projects/index.ts

@@ -1,29 +1,18 @@
-import type { EnhancedImgAttributes } from '@sveltejs/enhanced-img';
+import { parse, array } from 'valibot';
 
-import { parse } from 'valibot';
+import { supabase } from '$lib/supabaseClient';
 
-import { type Project, Project as ProjectSchema } from '$lib/models/project';
+import { Project as ProjectSchema } from '$lib/models/project';
 
 export async function getProjects() {
-    const imports = import.meta.glob<Project>('./json/*.json');
+    const { data, error } = await supabase.from('projects').select(`
+        name, tag, client, description,
+        project_url, project_managers, devs, end_date, imgs, slug
+    `);
 
-    const promises = Object.entries(imports).map(async ([_, asset]) => {
-        const project = parse(ProjectSchema, await asset());
+    if (error) throw new Error('project data fetching error');
 
-        const imgs: EnhancedImgAttributes['src'][] = [];
-        for (let i = 0; i < 5; i++)
-            try {
-                imgs.push(
-                    (await import(`$lib/assets/events/${project.slug}/${i}.webp?enhanced?url`))
-                        .default,
-                );
-            } catch {
-                break;
-            }
+    const projects = parse(array(ProjectSchema), data);
 
-        const parsed_project: Project = { ...project, imgs };
-        return parsed_project;
-    });
-
-    return await Promise.all(promises);
+    return projects;
 }