Merge pull request #53 from coderdojo-japan/feature/top-member-list

TOP ページの実行委員一覧に実際のメンバー情報を表示

Author: mucho613

_data/staff.yaml

@@ -0,0 +1,66 @@
+- name: 杉山美鈴
+  site: https://unit.link/sugimisu
+  dojo: 久留米
+- name: 岸川拓磨
+  site: https://github.com/Fukusan64
+  dojo: 福岡、久留米、春日
+- name: KP
+  site: https://github.com/kp54/
+  dojo: 福岡、久留米
+- name: おごもり たかし
+  site: https://github.com/ogom/
+  dojo: なかもず、大阪狭山
+- name: 柴尾 哲也
+  site: https://my.prairie.cards/u/midnight480
+  dojo: 佐賀
+- name: やす
+  site: https://x.com/Y4s2hoL
+  dojo: 福岡、久留米
+- name: 西田慶子
+  site:
+  dojo: さが、香椎
+- name: 安川 要平
+  site: https://x.com/yasulab
+  dojo: CoderDojo Japan
+- name: 杉山 好翼
+  site:
+  dojo: 久留米
+- name: 宇都木 朗
+  site: https://x.com/a_utsuki
+  dojo: 香椎、さが、春
+- name: とり子（安東）
+  site: https://x.com/siroitori0413
+  dojo: 香椎、さが
+- name: 鳥辺 裕香
+  site: https://iwakunipg.com/
+  dojo: 岩国
+- name: KeisukeSawa
+  site: https://x.com/swamptk
+  dojo: たまち、HARUMI
+- name: 千葉 聖人
+  site: https://www.instagram.com/ba_chisan1925/
+  dojo: 岡南
+- name: 井上 一
+  site: https://xn--coderdojo-ef6q138l.jp/
+  dojo: 津山
+- name: あったかい
+  site:
+  dojo: 古河、さくら、水戸、ひたちなか、ほんごう、神楽坂
+- name: かつ
+  site: https://ja.katzueno.com/about/
+  dojo: 尾張
+- name: むーちょ
+  site: https://github.com/mucho613
+  dojo: 福岡
+- name: たくさん
+  site:
+  dojo: こだいら
+- name: いかけん
+  site: https://coderdojo-mito.com/
+  dojo: 水戸
+- name: 田代
+  site:
+  dojo: さが
+- name: 山口秀帝
+  site:
+  dojo: 津山

_includes/top/sections/staff.html

@@ -6,42 +6,59 @@ <h2 class="text-4xl text-center pt-20 xl:pt-30">
 <!-- デスクトップで表示 -->
 <div class="hidden xl:block max-w-7xl mx-auto my-24">
   <ul class="staff flex flex-wrap justify-center gap-x-36">
-    {% for i in (1..42) %}
+    {% for member in site.data.staff %}
     <li class="-mt-[74px]">
+      {% if member.site %}
+        <a href="{{ member.site }}" target="_blank">
+      {% endif %}
+
       <div class="relative aspect-[1/cos(30deg)] w-50 overflow-hidden flex items-center justify-center"
         style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
 
-        <div class="block absolute size-full opacity-0 hover:opacity-100 transition-200 transition-opacity">
+        <div class="absolute size-full opacity-0 hover:opacity-100">
           <div class="absolute size-full mix-blend-multiply bg-[#6f6f6f]"></div>
           <p class="flex flex-col items-center justify-center text-white text-center absolute size-full">
-            <span class="text-xs">肩書き</span>
-            名字 名前
-            <span class="text-xs">道場名</span>
+            {{ member.name }}
+            <span class="text-xs">{{ member.dojo }}</span>
           </p>
         </div>
-        <img class="w-full" src="https://placehold.jp/320x320.png" alt="スタッフの写真">
+        <img class="min-w-full min-h-full object-cover" src="/img/staff/{{ member.name }}.webp" alt="{{ member.name }}">
       </div>
+
+      {% if member.site %}
+        </a>
+      {% endif %}
     </li>
     {% endfor %}
+
+    {% comment %} 空の要素を入れて、最後の行のバランスを取る {% endcomment %}
+    <div class="w-50"></div>
   </ul>
 </div>
 
 <!-- モバイルで表示 -->
 <div class="block xl:hidden mx-auto mt-9 mb-20">
   <ul class="flex flex-wrap justify-center gap-x-2 gap-y-6 mx-[2%]">
-    {% for i in (1..42) %}
+    {% for member in site.data.staff %}
     <li class="flex flex-col items-center gap-y-2">
+      {% if member.site %}
+        <a href="{{ member.site }}" target="_blank" class="flex flex-col items-center gap-y-2">
+      {% endif %}
+
       <div class="relative aspect-[1/cos(30deg)] w-24 sm:w-30 overflow-hidden flex items-center justify-center"
         style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
-        <img class="w-full" src="https://placehold.jp/320x320.png" alt="スタッフの写真">
+        <img class="w-full" src="/img/staff/{{ member.name }}.webp" alt="{{ member.name }}">
       </div>
 
       <!-- モバイルで表示する、肩書きや氏名の表示 -->
-      <p class="flex flex-col text-center">
-        <span class="text-xs">肩書き</span>
-        名字 名前
-        <span class="text-xs">道場名</span>
+      <p class="flex flex-col text-center w-24 text-sm word-break">
+        {{ member.name }}
+        <span class="text-xs">{{ member.dojo }}</span>
       </p>
+
+      {% if member.site %}
+        </a>
+      {% endif %}
     </li>
     {% endfor %}
   </ul>