integrate svelte for interactivty

acmcsufoss · Sep 18, 2024 · 8bb8c5a · 8bb8c5a
1 parent f6b00a7
commit 8bb8c5a
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 131 deletions.
diff --git a/src/components/CloseIcon.svelte b/src/components/CloseIcon.svelte
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 32 32"
+  fill="none"
+>
+  <rect width="32" height="32" fill="none" />
+  <line x1="8" y1="8" x2="24" y2="24" stroke="white" stroke-width="2" />
+  <line x1="8" y1="24" x2="24" y2="8" stroke="white" stroke-width="2" />
+</svg>
diff --git a/src/components/ContributorPopup.astro b/src/components/ContributorPopup.astro
diff --git a/src/components/ContributorPopup.svelte b/src/components/ContributorPopup.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { fade, fly } from "svelte/transition";
+  import CloseIcon from "./CloseIcon.svelte";
 
-  let isOpen = true;
-  // export let contributor: any;
+  export let isOpen = false;
+  export let contributor: any;
 
   function toggleContainer() {
     isOpen = !isOpen;
@@ -16,8 +17,10 @@
     in:fly={{ y: 40, duration: 150 }}
     out:fly={{ y: 40, duration: 150 }}
   >
-    <button class="custom-close-btn" on:click={toggleContainer}> X </button>
-    <h2>Hello</h2>
+    <button class="custom-close-btn" on:click={toggleContainer}>
+      <CloseIcon />
+    </button>
+    <h2>{contributor.frontmatter.name}</h2>
   </div>
 
   <div

diff --git a/src/components/Contributors.svelte b/src/components/Contributors.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+  import ContributorPopup from "./ContributorPopup.svelte";
+
+  export let contributors: any[];
+
+  let isContributorDialogOpen = false;
+  let contributorIndex = 0;
+
+  function openContributorDialog(i: number) {
+    contributorIndex = i;
+    isContributorDialogOpen = true;
+  }
+</script>
+
+<ContributorPopup
+  contributor={contributors[contributorIndex]}
+  bind:isOpen={isContributorDialogOpen}
+/>
+
+<section class="contributors">
+  {#each contributors as contributor, i}
+    <div
+      class="contributor"
+      on:click={() => openContributorDialog(i)}
+      on:keydown={() => openContributorDialog(i)}
+      role="button"
+      tabindex="0"
+    >
+      <img
+        class="profile-image"
+        src="https://github.com/{contributor.frontmatter.githubUsername}.png"
+        alt="ACM at CSUF Icon"
+        width={32}
+        height={32}
+      />
+      <span>{contributor.frontmatter.name}</span>
+    </div>
+  {/each}
+</section>
+
+<style>
+  .contributors {
+    display: grid;
+    gap: 1rem;
+    align-items: center;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .contributor {
+    cursor: pointer;
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    border: 2px solid rgb(var(--color-secondary));
+    background-color: rgba(var(--color-secondary), 0.6);
+    transition: background-color 150ms ease;
+    font-size: 0.875rem;
+    font-weight: 500;
+    overflow-x: hidden;
+  }
+
+  .contributor:hover {
+    background-color: rgba(var(--color-secondary), 0.9);
+  }
+
+  .profile-image {
+    border-radius: 50%;
+  }
+
+  @media screen and (min-width: 640px) {
+    .contributors {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .contributor {
+      font-size: 1rem;
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    .contributors {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media screen and (min-width: 1024px) {
+    .contributors {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+</style>
diff --git a/src/components/DiagonalArrow.astro b/src/components/DiagonalArrow.astro
@@ -0,0 +1,22 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  class="arrow-icon"
+>
+  <rect width="16" height="16" fill="none"></rect>
+  <path d="M4 12 L12 4" stroke="white" stroke-width="1.5"></path>
+  <path d="M7 4 H12 V9" stroke="white" stroke-width="1.5"></path>
+</svg>
+
+<style is:global>
+  .arrow-link:hover .arrow-icon {
+    transform: translate(2px, -2px);
+  }
+
+  .arrow-icon {
+    transition: transform 0.3s ease;
+  }
+</style>
diff --git a/src/pages/fa24.astro b/src/pages/fa24.astro
@@ -1,7 +1,6 @@
 ---
-import { Image } from "astro:assets";
 import Layout from "../layouts/Layout.astro";
-import ContributorPopup from "../components/ContributorPopup.svelte";
+import Contributors from "../components/Contributors.svelte";
 
 type MarkdownEntry = {
   frontmatter: {
@@ -23,26 +22,9 @@ const contributors: MarkdownEntry[] = Object.values(
 ---
 
 <Layout title="Fall 2024 Contributors | 1st">
-  <ContributorPopup client:only="svelte" />
-
   <main>
     <h1>Fall 2024 Contributors</h1>
-    <section class="contributors">
-      {
-        contributors.map((contributor) => (
-          <div class="contributor">
-            <Image
-              class="profile-image"
-              src={`https://github.com/${contributor.frontmatter.githubUsername}.png`}
-              alt="ACM at CSUF Icon"
-              width={32}
-              height={32}
-            />
-            <span>{contributor.frontmatter.name}</span>
-          </div>
-        ))
-      }
-    </section>
+    <Contributors client:only="svelte" contributors={contributors} />
   </main>
 </Layout>
 
@@ -60,56 +42,4 @@ const contributors: MarkdownEntry[] = Object.values(
   h1 {
     text-align: center;
   }
-
-  .contributors {
-    display: grid;
-    gap: 1rem;
-    align-items: center;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .contributor {
-    cursor: pointer;
-    display: flex;
-    gap: 0.25rem;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    border: 2px solid rgb(var(--color-secondary));
-    background-color: rgba(var(--color-secondary), 0.6);
-    transition: background-color 150ms ease;
-    font-size: 0.875rem;
-    font-weight: 500;
-    overflow-x: hidden;
-  }
-
-  .contributor:hover {
-    background-color: rgba(var(--color-secondary), 0.9);
-  }
-
-  .profile-image {
-    border-radius: 50%;
-  }
-
-  @media screen and (min-width: 640px) {
-    .contributors {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .contributor {
-      font-size: 1rem;
-    }
-  }
-
-  @media screen and (min-width: 768px) {
-    .contributors {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
-  @media screen and (min-width: 1024px) {
-    .contributors {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import DiagonalArrow from "../components/DiagonalArrow.astro";
 import FloatingBoxes from "../components/FloatingBoxes.astro";
 import Layout from "../layouts/Layout.astro";
 ---
@@ -17,8 +18,14 @@ import Layout from "../layouts/Layout.astro";
       </div>
     </h2>
     <div class="semester-links">
-      <a href="/1st/fa24">Fall 2024 Contributors</a>
-      <a href="/1st/sp24">Spring 2024 Contributors</a>
+      <a class="arrow-link" href="/1st/fa24">
+        <span> Fall 2024 Contributors </span>
+        <DiagonalArrow />
+      </a>
+      <a class="arrow-link" href="/1st/sp24">
+        <span> Spring 2024 Contributors </span>
+        <DiagonalArrow />
+      </a>
     </div>
   </main>
 </Layout>