feat:fetch octokit

package.json

@@ -22,6 +22,7 @@
     "@astrojs/tailwind": "5.1.0",
     "@fontsource-variable/space-grotesk": "5.0.16",
     "@fontsource/noto-sans-thai-looped": "5.0.8",
+    "@octokit/types": "12.4.0",
     "astro": "4.2.1",
     "sharp": "0.33.2",
     "tailwindcss": "3.4.1",

src/components/member/Members.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import ProfileCard from "./ProfileCard.svelte";
+  import type { OrgMember } from "./types.ts";
+  export let OrgMembers: OrgMember[];
+</script>
+
+<section>
+  <div class="container bg-blue-500">
+    <p class="text-4xl font-bold text-white">Members</p>
+    <div class="inline-flex items-center justify-center">
+      <div class="profile-container">
+        {#if !OrgMembers ||OrgMembers.length === 0}
+          <p>No Public Members found...</p>
+        {:else}
+          {#each OrgMembers as member}
+            <ProfileCard
+              username={member.login}
+              avatarURL={member.avatar_url}
+              profileURL={member.html_url}
+            />
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>

src/components/member/ProfileCard.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let username: string;
+  export let avatarURL: string;
+  export let profileURL: string;
+</script>
+
+<div>
+  <div class="m-2 inline-block">
+    <a class="no-underline" title={username} href={profileURL}>
+      <div
+        id="profile"
+        class="rounded bg-[#232428] p-2 text-white hover:scale-110"
+      >
+        <div class="flex flex-row items-center">
+          <img alt={username} class="mr-3 rounded-full" src={avatarURL} />
+          <p class="text-sm">
+            @ {username}
+          </p>
+        </div>
+      </div>
+    </a>
+  </div>
+</div>

src/components/member/types.ts

@@ -0,0 +1,6 @@
+import type { Endpoints } from "@octokit/types";
+
+export type OrgMember =
+  Endpoints["GET /orgs/{org}/public_members"]["response"]["data"][number];
+
+export type GitHubUser = Pick<OrgMember, "avatar_url" | "login" | "html_url">;

src/pages/index.astro

@@ -3,6 +3,21 @@ import Layout from "@/layouts/Layout.astro";
 
 import ISDLogo from "@/assets/isd_logo.svg";
 import { Image } from "astro:assets";
+import Members from "@/components/member/Members.svelte";
+
+const fetchOrgMembers = async () => {
+  try {
+    const res = await fetch(
+      "https://api.github.com/orgs/isd-sgcu/public_members",
+    );
+    const data = await res.json();
+    return data;
+  } catch (err) {
+    console.error(err);
+  }
+};
+const orgMembers= await fetchOrgMembers();
+console.log(orgMembers);
 ---
 
 <Layout title="Home" description="Main page">
@@ -48,6 +63,7 @@ import { Image } from "astro:assets";
         อบจ. และองค์กรต่าง ๆ ในจุฬาฯ เพื่อพัฒนาระบบเว็บไซต์ แอปพลิเคชัน
         และระบบสารสนเทศอื่น ๆ ที่อำนวยความสะดวก และเป็นประโยชน์ต่อนิสิตจุฬาฯ
       </p>
+      <Members orgMembers={orgMembers}/>
     </div>
   </section>
 </Layout>