refactor: use Supabase for membership data instead of JSON

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: Code Quality
+
+on:
+    workflow_dispatch:
+    pull_request:
+    push:
+        branches:
+            - main
+
+env:
+    PUBLIC_SUPABASE_URL: ${{ vars.PUBLIC_SUPABASE_URL || 'https://your-supabase-url.supabase.co' }}
+    PUBLIC_SUPABASE_PUBLISHABLE_KEY: ${{ vars.PUBLIC_SUPABASE_PUBLISHABLE_KEY || 'your-supabase-publishable-key' }}
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout Repository
+              uses: actions/checkout@v4
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+            - name: Install Node.js
+              uses: actions/setup-node@v5
+              with:
+                  cache: pnpm
+                  cache-dependency-path: pnpm-lock.yaml
+                  node-version: 24
+            - name: Install Dependencies
+              run: pnpm install
+            - name: Check Formatters
+              run: pnpm fmt
+            - name: Run All Lints in Parallel
+              run: pnpm lint

.github/workflows/deploy.yml

@@ -2,9 +2,9 @@ name: Deploy to GitHub Pages
 
 on:
     workflow_dispatch:
-    pull_request:
     push:
-        branches: main
+        branches:
+            - main
 
 permissions:
     contents: read
@@ -15,6 +15,10 @@ concurrency:
     group: pages
     cancel-in-progress: false
 
+env:
+    PUBLIC_SUPABASE_URL: ${{ vars.PUBLIC_SUPABASE_URL || 'https://your-supabase-url.supabase.co' }}
+    PUBLIC_SUPABASE_PUBLISHABLE_KEY: ${{ vars.PUBLIC_SUPABASE_PUBLISHABLE_KEY || 'your-supabase-publishable-key' }}
+
 jobs:
     build:
         runs-on: ubuntu-latest
@@ -31,10 +35,6 @@ jobs:
                   node-version: 24
             - name: Install Dependencies
               run: pnpm install
-            - name: Check Formatters
-              run: pnpm fmt
-            - name: Run All Lints in Parallel
-              run: pnpm lint
             - name: Build Website
               run: pnpm build
             - name: Setup Pages

.gitignore

@@ -3,4 +3,6 @@
 .eslintcache
 node_modules
 build
-*.sh
+*.sh
+.env
+.env.*

package.json

@@ -20,6 +20,7 @@
         "@iconify/icons-heroicons": "^1.2.9",
         "@iconify/icons-simple-icons": "^1.2.74",
         "@iconify/svelte": "^5.0.2",
+        "@supabase/supabase-js": "^2.100.1",
         "@sveltejs/kit": "^2.47.3",
         "html-minifier": "^4.0.0",
         "svelte": "^5.41.4",

src/lib/components/cards/MemberCard.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
     import { fade } from 'svelte/transition';
 
-    import type { BoardOfficer } from '$lib/types/board_officer';
     import type { Member } from '$lib/models/member';
+    import type { Executive } from '$lib/models/executive';
 
     import MemberCardTag from '$lib/components/cards/MemberCardTag.svelte';
 
     interface Props {
-        member: BoardOfficer | Member;
-        socials?: Record<string, string>;
+        nickname: Member['nickname'] | Executive['nickname'];
+        last_name: Member['last_name'] | Executive['last_name'];
+        image_url: Member['image_url'] | Executive['image_url'];
+        socials?: Member['socials'];
+        titles?: Executive['titles'];
         color: string;
         foreground: string;
     }
 
-    const { member, socials, color, foreground }: Props = $props();
-    const { name, src, title } = $derived(member);
+    const { nickname, last_name, image_url, socials, titles, color, foreground }: Props = $props();
+
+    const name = $derived(`${nickname} ${last_name}`);
+
     let isOverlayVisible = $state(false);
 </script>
 
@@ -26,7 +31,7 @@
     onmouseleave={() => (isOverlayVisible = false)}
 >
     <img
-        src="https://assets.up-csi.org/website/images/people/{src}.webp"
+        src={image_url}
         alt={name}
         height="300px"
         loading="lazy"
@@ -37,7 +42,7 @@
             class="bg-csi-black/70 text-csi-white absolute z-10 col-start-1 row-start-1 hidden h-full w-full flex-col justify-end gap-2 p-4 md:flex"
             transition:fade={{ duration: 75 }}
         >
-            <MemberCardTag {name} {title} {socials} />
+            <MemberCardTag {name} {titles} {socials} />
         </div>
     {:else}
         <div
@@ -51,6 +56,6 @@
     {/if}
 
     <div class="col-start-1 row-start-2 flex flex-col gap-2 md:hidden">
-        <MemberCardTag {name} {title} {socials} />
+        <MemberCardTag {name} {titles} {socials} />
     </div>
 </div>

src/lib/components/cards/MemberCardTag.svelte

@@ -7,26 +7,26 @@
 
     interface Props {
         name: string;
-        title?: Position[];
+        titles?: Position[];
         socials?: Record<string, string>;
     }
 
-    const { name, title, socials }: Props = $props();
+    const { name, titles, socials }: Props = $props();
 </script>
 
 <div class="*:!m-0">
     <p class="text-md md:text-lg">{name}</p>
-    {#if title}
+    {#if titles}
         <p class="text-xs leading-tight">
-            {title.join(', ')}
+            {titles.join(', ')}
         </p>
     {/if}
 </div>
 <div class="flex flex-row flex-wrap gap-2">
     {#if socials}
         {#each Object.entries(socials) as [social, link] (social)}
             {@const { path, icon } = getSocialMedium(social)}
-            {@const href = path ? `${path}/${link}` : link}
+            {@const href = path === 'https://github.com' ? `${path}/${link}` : link}
             <a {href} target="_blank"
                 ><Icon
                     {icon}

src/lib/components/panels/ExecPanel.svelte

@@ -1,23 +1,21 @@
 <script lang="ts">
-    import type { Board } from '$lib/types/board';
-
     import { getCommitteeInfo } from '$lib/types/committees';
 
     import Card from '$lib/components/cards/MemberCard.svelte';
+    import type { Executive } from '$lib/models/executive';
 
     interface Props {
-        board: Board;
+        executives: Executive[];
     }
 
-    const { board }: Props = $props();
-    const { officers }: Board = $derived(board);
+    const { executives }: Props = $props();
     const { color, foreground } = getCommitteeInfo('Executive');
 </script>
 
 <section
     class="grid w-full grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 md:gap-6 lg:grid-cols-4 xl:grid-cols-5"
 >
-    {#each officers as member (member.name)}
-        <Card {member} {color} {foreground} />
+    {#each executives as { id, nickname, last_name, image_url, titles } (id)}
+        <Card {nickname} {last_name} {image_url} {titles} {color} {foreground} />
     {/each}
 </section>

src/lib/components/panels/TeamPanel.svelte

@@ -53,8 +53,8 @@
     >
         {#if filteredTeam}
             {@const { color, foreground } = getCommitteeInfo(currentCommittee)}
-            {#each filteredTeam as member (member.name)}
-                <Card {member} socials={member.socials} {color} {foreground} />
+            {#each filteredTeam as { id, nickname, last_name, image_url, socials } (id)}
+                <Card {nickname} {last_name} {image_url} {socials} {color} {foreground} />
             {/each}
         {/if}
     </div>