Merge pull request #39 from GoCon/feat/staffs-page

feat: add staffs page
GoCon · May 31, 2024 · e662f20 · e662f20
2 parents 1585509 + 35609e7
commit e662f20
Show file tree

Hide file tree

Showing 59 changed files with 509 additions and 1 deletion.
diff --git a/public/staffs/a2.png b/public/staffs/a2.png
diff --git a/public/staffs/bikiniki.webp b/public/staffs/bikiniki.webp
diff --git a/public/staffs/budougumi0617.png b/public/staffs/budougumi0617.png
diff --git a/public/staffs/chihiro.jpg b/public/staffs/chihiro.jpg
diff --git a/public/staffs/douglas_takeuchi.jpeg b/public/staffs/douglas_takeuchi.jpeg
diff --git a/public/staffs/fujiwo.png b/public/staffs/fujiwo.png
diff --git a/public/staffs/gami.png b/public/staffs/gami.png
diff --git a/public/staffs/gunzi.jpg b/public/staffs/gunzi.jpg
diff --git a/public/staffs/hikari.jpg b/public/staffs/hikari.jpg
diff --git a/public/staffs/igaryo.jpg b/public/staffs/igaryo.jpg
diff --git a/public/staffs/jackchuka.png b/public/staffs/jackchuka.png
diff --git a/public/staffs/kaminashi.png b/public/staffs/kaminashi.png
diff --git a/public/staffs/kensuke_ueno.png b/public/staffs/kensuke_ueno.png
diff --git a/public/staffs/kenta_yamaguchi.jpeg b/public/staffs/kenta_yamaguchi.jpeg
diff --git a/public/staffs/kizuku.webp b/public/staffs/kizuku.webp
diff --git a/public/staffs/kota_yagi.png b/public/staffs/kota_yagi.png
diff --git a/public/staffs/masahiro_sakuraba.png b/public/staffs/masahiro_sakuraba.png
diff --git a/public/staffs/micchie.jpeg b/public/staffs/micchie.jpeg
diff --git a/public/staffs/miki.jpg b/public/staffs/miki.jpg
diff --git a/public/staffs/mikichin.jpg b/public/staffs/mikichin.jpg
diff --git a/public/staffs/mocchi.jpeg b/public/staffs/mocchi.jpeg
diff --git a/public/staffs/momi.jpeg b/public/staffs/momi.jpeg
diff --git a/public/staffs/n9te9.png b/public/staffs/n9te9.png
diff --git a/public/staffs/nakagawa_ryotaku.png b/public/staffs/nakagawa_ryotaku.png
diff --git a/public/staffs/naotama.jpg b/public/staffs/naotama.jpg
diff --git a/public/staffs/nozomu_ikuta.png b/public/staffs/nozomu_ikuta.png
diff --git a/public/staffs/okarin.jpg b/public/staffs/okarin.jpg
diff --git a/public/staffs/onoe.jpeg b/public/staffs/onoe.jpeg
diff --git a/public/staffs/peacock.jpg b/public/staffs/peacock.jpg
diff --git a/public/staffs/rapisu.jpg b/public/staffs/rapisu.jpg
diff --git a/public/staffs/rei_suzuki.jpg b/public/staffs/rei_suzuki.jpg
diff --git a/public/staffs/remiposo.png b/public/staffs/remiposo.png
diff --git a/public/staffs/ryo_mimura.jpg b/public/staffs/ryo_mimura.jpg
diff --git a/public/staffs/ryu-ichiroh.png b/public/staffs/ryu-ichiroh.png
diff --git a/public/staffs/sadah.jpg b/public/staffs/sadah.jpg
diff --git a/public/staffs/sago35.png b/public/staffs/sago35.png
diff --git a/public/staffs/senoue.png b/public/staffs/senoue.png
diff --git a/public/staffs/shinnosuke_kishida.png b/public/staffs/shinnosuke_kishida.png
diff --git a/public/staffs/sivchari.png b/public/staffs/sivchari.png
diff --git a/public/staffs/sugar-cat.jpeg b/public/staffs/sugar-cat.jpeg
diff --git a/public/staffs/sutenyan.jpg b/public/staffs/sutenyan.jpg
diff --git a/public/staffs/suu.jpg b/public/staffs/suu.jpg
diff --git a/public/staffs/tadaaki.jpg b/public/staffs/tadaaki.jpg
diff --git a/public/staffs/takato.webp b/public/staffs/takato.webp
diff --git a/public/staffs/tamaclaw.jpg b/public/staffs/tamaclaw.jpg
diff --git a/public/staffs/terui.jpg b/public/staffs/terui.jpg
diff --git a/public/staffs/tomato3713.jpeg b/public/staffs/tomato3713.jpeg
diff --git a/public/staffs/uji.jpg b/public/staffs/uji.jpg
diff --git a/public/staffs/walkure.jpeg b/public/staffs/walkure.jpeg
diff --git a/public/staffs/yamato.webp b/public/staffs/yamato.webp
diff --git a/public/staffs/yoshi_yamaguchi.jpg b/public/staffs/yoshi_yamaguchi.jpg
diff --git a/public/staffs/yosuke_okamoto.png b/public/staffs/yosuke_okamoto.png
diff --git a/public/staffs/yuki_bobier_koshimizu.jpeg b/public/staffs/yuki_bobier_koshimizu.jpeg
diff --git a/public/staffs/zundamaru.png b/public/staffs/zundamaru.png
diff --git a/src/components/Header/index.astro b/src/components/Header/index.astro
@@ -57,7 +57,7 @@ import { concatWithBase } from "@utils/concatWithBase";
           >
         </li>
         <li><a href={concatWithBase("floorguide")}>Floor Guide</a></li>
-        <!-- <li><a href="#">Staff</a></li> -->
+        <li><a href={concatWithBase("staffs")}>Staff</a></li>
         <!-- <li><a href="#">English</a></li> -->
       </ul>
     </nav>

diff --git a/src/components/Staffs.astro b/src/components/Staffs.astro
@@ -0,0 +1,116 @@
+---
+import { Image } from "astro:assets";
+import { getEntry } from "astro:content";
+import { concatWithBase } from "@utils/concatWithBase";
+
+const staffs = await getEntry("staffs", "data");
+---
+
+<div class="container">
+  <div class="staffs">
+    {
+      staffs.data.map((staff) => (
+        <div class="staff">
+          <Image
+            src={concatWithBase(`staffs/${staff.avatar}`)}
+            width="120"
+            height="120"
+            loading="lazy"
+            alt={staff.name}
+            class="staff-avatar"
+          />
+          <p class="staff-name">{staff.name}</p>
+          <p class="staff-company">{staff.company}</p>
+          <p class="staff-favorite-packages">
+            {staff.favoritePackages.join(", ")}
+          </p>
+        </div>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .staffs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+
+  .staff {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    width: 342px;
+    text-decoration: none;
+    color: #222;
+    padding: 16px;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: #fff;
+    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
+
+    @media screen and (max-width: 1185px) {
+      width: calc(50% - 16px);
+    }
+
+    @media screen and (max-width: 768px) {
+      width: 100%;
+    }
+  }
+
+  .title {
+    --max-lines: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--max-lines);
+    overflow: hidden;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 1.25;
+    min-height: calc(var(--max-lines) * 1.25em);
+
+    @media screen and (max-width: 768px) {
+      --max-lines: 1;
+    }
+  }
+
+  .staff-avatar {
+    object-fit: cover;
+    border-radius: 100%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .staff-name {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    font-weight: bold;
+  }
+
+  .staff-company {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    min-height: 1.5em;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .staff-favorite-packages {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    min-height: 1.5em;
+    font-size: 14px;
+    color: #666;
+  }
+</style>
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -41,7 +41,20 @@ const sponsors = defineCollection({
   ),
 });
 
+const staffs = defineCollection({
+  type: "data",
+  schema: z.array(
+    z.object({
+      name: z.string(),
+      company: z.string().nullable(),
+      avatar: z.string(),
+      favoritePackages: z.array(z.string()),
+    }),
+  ),
+});
+
 export const collections = {
   sessions,
   sponsors,
+  staffs,
 };