feat: staff (#930)

* feat: add staff grid components and i18n labels

* feat: add core staff info

* feat: add leader section and fix styles

* fix: x link and image paths

* feat: add volunteer, minimize images

* chore: add staff name to cSpell

* fix: linter

* chore: optimize image sizes

* fix: layout

* chore: add feature flags

* save

* save

* save

* save

* save

* save

* save

---------

Co-authored-by: ubugeeei <ubuge1122@gmail.com>

Author: Hal-Spidernight

app/constant.ts

@@ -12,6 +12,7 @@ export const HOME_HEADING_ID = {
   access: "access",
   studentSupport: "student-support",
   store: "store",
+  staff: "staff",
 
   // NOTE: Be careful as it is hardcoded in MDC
   contact: "contact-form",

app/pages/_components/SectionStaff.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { HOME_HEADING_ID } from "~/constant";
+import { useI18n, useFetch, useBreakpoint, computed } from "#imports";
+import { VFSection } from "#components";
+
+import StaffGrid from "./StaffGrid.vue";
+
+const { t } = useI18n();
+const bp = useBreakpoint();
+
+const { data: staffList } = await useFetch("/api/staffs");
+
+const leaderColumns = computed(() => {
+  return bp.value === "pc" ? 3 : 2;
+});
+
+const coreColumns = computed(() => {
+  return bp.value === "pc" ? 4 : 3;
+});
+</script>
+
+<template>
+  <VFSection :id="HOME_HEADING_ID.staff" :title="t('staff.title')">
+    <p class="staff-description">
+      {{ t('staff.description') }}
+    </p>
+    <template v-if="staffList">
+      <StaffGrid
+        :staff-list="staffList.leaders"
+        grid-mode="leader"
+        :columns="leaderColumns"
+      />
+      <StaffGrid
+        :staff-list="staffList.cores"
+        grid-mode="core"
+        :columns="coreColumns"
+      />
+
+      <VFHeading id="volunteer-staff">
+        {{ t('staff.volunteer') }}
+      </VFHeading>
+
+      <StaffGrid
+        :staff-list="staffList.volunteers"
+        grid-mode="volunteer"
+      />
+    </template>
+  </VFSection>
+</template>
+
+<style scoped>
+.staff-description {
+  margin: 2rem 0;
+  word-break: break-all;
+}
+</style>

app/pages/_components/StaffGrid.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import StaffGridItem, { type StaffItemProps } from "./StaffGridItem.vue";
+
+const {
+  staffList,
+  gridMode,
+  columns,
+} = defineProps<{
+  staffList: StaffItemProps[];
+  gridMode: "leader" | "core" | "volunteer";
+  columns?: number;
+}>();
+
+const gridClass = computed(() => `staff-grid staff-grid-${gridMode}`);
+
+const gridStyle = computed(() =>
+  columns && (gridMode === "leader" || gridMode === "core")
+    ? { gridTemplateColumns: `repeat(${columns}, 1fr)` }
+    : {},
+);
+</script>
+
+<template>
+  <div :class="gridClass" :style="gridStyle">
+    <StaffGridItem
+      v-for="(staff, idx) in staffList" :key="idx" class="staff-member"
+      v-bind="{ ...staff, gridMode }"
+    />
+  </div>
+</template>
+
+<style scoped>
+@import "~/assets/styles/custom-media-query.css";
+
+.staff-grid {
+  display: grid;
+  margin-bottom: 1.5rem;
+}
+
+.staff-grid-leader {
+  gap: 1rem;
+}
+
+.staff-grid-core {
+  gap: 0.9rem;
+}
+
+.staff-grid-volunteer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: left;
+  margin: 1.5rem 0 0 0;
+}
+</style>

app/pages/_components/StaffGridItem.vue

@@ -0,0 +1,104 @@
+<script lang="ts">
+import { computed } from "vue";
+
+export type StaffItemProps = {
+  name: string;
+  avatarUrl: string;
+  socialUrls?: {
+    x?: string;
+    github?: string;
+  };
+};
+</script>
+
+<script setup lang="ts">
+const {
+  name,
+  avatarUrl,
+  socialUrls,
+  gridMode,
+} = defineProps<StaffItemProps & { gridMode: "leader" | "core" | "volunteer" }>();
+
+const gridItemClass = computed(() => `staff-link-${gridMode}`);
+
+const linkComp = computed(() => socialUrls?.x ? socialUrls.x : socialUrls?.github);
+</script>
+
+<template>
+  <NuxtLink
+    v-if="linkComp"
+    :to="linkComp"
+    external
+    target="_blank"
+    class="staff"
+    :class="gridItemClass"
+  >
+    <img :src="avatarUrl" :alt="name" />
+    <p class="font-bold">{{ name }}</p>
+  </NuxtLink>
+
+  <div v-else class="staff" :class="gridItemClass">
+    <img v-if="avatarUrl" :src="avatarUrl" :alt="name" loading="lazy" />
+    <p class="font-bold">
+      {{ name }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+@import "~/assets/styles/custom-media-query.css";
+
+.staff {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: #444;
+  margin-bottom: 1rem;
+
+  p {
+    width: 100%;
+    text-align: left;
+    overflow-wrap: break-word;
+    color: var(--color-text-default);
+    margin-top: 1rem;
+
+    @media (--mobile) {
+      margin-top: 0.75rem;
+    }
+  }
+
+  &.staff-link-leader,
+  &.staff-link-core {
+    p {
+      font-size: 18px;
+      font-family: IBMPlexSansJP-Bold;
+
+      @media (--mobile) {
+        font-size: 16px;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+      border-radius: 8%;
+      border: 0.5px solid #ddd;
+    }
+  }
+
+  &.staff-link-volunteer {
+    margin-bottom: 0;
+
+    p {
+      margin: 0.3rem 0.6rem;
+      text-align: left;
+
+      @media (--mobile) {
+        font-size: 14px;
+        margin: 0 0.6rem;
+      }
+    }
+  }
+}
+</style>

app/pages/index.vue

@@ -17,12 +17,17 @@ import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useHead,
   useSeoMeta,
+  defineAsyncComponent,
 } from "#imports";
 
 defineRouteRules({ prerender: true });
 
 const { t } = useI18n();
 
+const SectionStaff = import.meta.vfFeatures.staff
+  ? defineAsyncComponent(() => import("./_components/SectionStaff.vue"))
+  : null;
+
 useSeoMeta({ title: "" });
 </script>
 
@@ -39,6 +44,7 @@ useSeoMeta({ title: "" });
       <SectionAccess />
       <SectionMessage />
       <SectionContact />
+      <SectionStaff v-if="SectionStaff" />
     </div>
 
     <h2 class="sns-introduction-heading">