Overhaul team page

gridsome.server.js

@@ -23,11 +23,24 @@ module.exports = function (api) {
 
   api.loadSource(({ addCollection }) => {
     const organizerCollection = addCollection('Organizer');
-    organizers.forEach((organizer, index) => {
+    let committeeOrganizerMap = new Map();
+    let committeeOrderedList = [];
+    organizers.forEach((organizer) => {
+      const position = organizer.position;
+      organizer.slug = convertToSlug(organizer.name);
+      if (!committeeOrganizerMap.has(position)) {
+        committeeOrganizerMap.set(position, []);
+        committeeOrderedList.push(position);
+      }
+      committeeOrganizerMap.get(position).push(organizer);
+    });
+    committeeOrderedList = committeeOrderedList.reverse();
+    let id = 0;
+    committeeOrderedList.forEach((committee) => {
       organizerCollection.addNode({
-        id: index,
-        slug: convertToSlug(organizer.name),
-        ...organizer,
+        id: id++,
+        committeeName: committee,
+        organizers: committeeOrganizerMap.get(committee),
       });
     });
     const eventsCollection = addCollection('Event');

src/components/OrganizerInfo.vue

@@ -6,7 +6,6 @@
     />
     <div class="organizer-card--contents">
       <h1 class="organizer-card--name">{{ name }}</h1>
-      <div class="organizer-card--position">{{ position }}</div>
       <div class="organizer-card--bio">{{ bio }}</div>
       <div class="social-links">
         <span v-if="github" class="social-link">
@@ -43,13 +42,6 @@ export default {
      */
     bio: String,
 
-    /**
-     * The name of this officer's office.
-     * 
-     * Example: "Technical Coordinator"
-     */
-    position: String,
-
     /**
      * The filename of this officer's profile image.
      */
@@ -100,10 +92,6 @@ export default {
   @apply font-display font-semibold;
 }
 
-.organizer-card--position {
-  @apply text-lg text-black mb-2;
-}
-
 .organizer-card--bio {
   @apply text-black;
 }

src/layouts/GeneralLayout.vue

@@ -43,6 +43,12 @@ export default {
   @apply my-4;
 }
 
+.committee-title {
+  @apply text-3xl text-center;
+  @apply text-white font-display font-bold underline;
+  @apply my-4;
+}
+
 #tsparticles {
   width:100%;
   height:100%;

src/pages/Team.vue

@@ -2,19 +2,22 @@
   <Layout>
     <section class="team-page">
       <h1 class="page-title">The Team</h1>
-      <div class="team-page--content">
-        <g-link v-for="edge in $page.officers.edges" :key="edge.node.slug" :to="'/team'">
-          <team-member
-            :name="edge.node.name"
-            :position="edge.node.position"
-            :bio="edge.node.bio"
-            :imageName="edge.node.imageName"
-            :github="edge.node.github"
-            :website="edge.node.website"
-            :linkedin="edge.node.linkedin"
-            :key="edge.node.id"
-          ></team-member>
-        </g-link>
+      <div v-for="edge in $page.officers.edges" :key="edge.node.committeeName">
+        <h2 class="committee-title">{{ edge.node.committeeName }}</h2>
+        <div class="team-page--content">
+          <g-link :class="edge.node.organizers.length == 1 ? 'team-page--single-card' : 'team-page--multi-card'"
+            v-for="organizer in edge.node.organizers" :key="organizer.slug" :to="'/team'">
+            <team-member
+              :name="organizer.name"
+              :bio="organizer.bio"
+              :imageName="organizer.imageName"
+              :github="organizer.github"
+              :website="organizer.website"
+              :linkedin="organizer.linkedin"
+              :key="organizer.slug"
+            ></team-member>
+          </g-link>
+        </div>
       </div>
     </section>
   </Layout>
@@ -25,14 +28,16 @@ query {
   officers: allOrganizer {
     edges {
       node {
-        slug
-        name
-        position
-        bio
-        imageName
-        github
-        website
-        linkedin
+        committeeName
+        organizers {
+          slug
+          name
+          bio
+          imageName
+          github
+          website
+          linkedin
+        }
       }
     }
   }
@@ -74,7 +79,15 @@ export default {
   .team-page--content {
     @apply max-w-5xl;
     @apply mx-auto;
-    @apply grid gap-4 grid-cols-2;
+    @apply grid gap-4 grid-cols-4;
+  }
+
+  .team-page--single-card {
+    @apply col-span-2 col-start-2;
+  }
+
+  .team-page--multi-card {
+    @apply col-span-2;
   }
 }
 </style>