Merge pull request #332 from jpa-perl/hakodate2024-staff-core

スタッフページを作成、先行してコアスタッフの情報を掲載

2024hakodate/data/staff.js

@@ -1,7 +1,63 @@
-const coreStaff = [];
+const coreStaff = [
+  {
+    name: 'karupanerura',
+    avatar_url: './images/staff/github/karupanerura.png',
+    profile_url: 'https://github.com/karupanerura'
+  },
+  {
+    name: 'ytnobody',
+    avatar_url: './images/staff/twitter/ytnobody.jpg',
+    profile_url: 'https://twitter.com/ytnobody'
+  },
+  {
+    name: 'papix',
+    avatar_url: './images/staff/twitter/__papix__.jpg',
+    profile_url: 'https://twitter.com/__papix__'
+  },
+  {
+    name: 'PerukiFUN',
+    avatar_url: './images/staff/twitter/PerukiFUN.jpg',
+    profile_url: 'https://twitter.com/PerukiFUN'
+  },
+  {
+    name: 'masawada',
+    avatar_url: './images/staff/uploaded/masawada.jpg',
+    profile_url: 'https://twitter.com/masawada'
+  },
+  {
+    name: 'liiu',
+    avatar_url: './images/staff/twitter/_ybrliiu.jpg',
+    profile_url: 'https://twitter.com/_ybrliiu'
+  },
+  {
+    name: 'toya',
+    avatar_url: './images/staff/uploaded/toya.png',
+    profile_url: 'https://twitter.com/toya'
+  },
+  {
+    name: 'nagayama',
+    avatar_url: './images/staff/twitter/nagayama.jpg',
+    profile_url: 'https://twitter.com/nagayama'
+  },
+  {
+    name: 'xtetsuji',
+    avatar_url: './images/staff/twitter/xtetsuji.png',
+    profile_url: 'https://twitter.com/xtetsuji'
+  },
+  {
+    name: 'godan',
+    avatar_url: './images/staff/twitter/godan09.jpg',
+    profile_url: 'https://twitter.com/godan09'
+  },
+  {
+    name: 'たかね',
+    avatar_url: './images/staff/twitter/takane28.jpeg',
+    profile_url: 'https://twitter.com/takanen28',
+  }
+];
 const volunteerStaff = [];
 
 module.exports = {
   coreStaff,
-  volunteerStaff,
+  // volunteerStaff,
 }

2024hakodate/src/index.ejs

@@ -39,6 +39,7 @@
 			<a href="https://fortee.jp/yapc-hakodate-2024/timetable" class="block p-4 border-b border-gray-700 hover:bg-gray-700">タイムテーブル</a>
 			<a href="https://blog.yapcjapan.org/" class="block p-4 border-b border-gray-700 hover:bg-gray-700">BLOG</a>
 			<a href="/2024hakodate/individual-sponsors" class="block p-4 border-b border-gray-700 hover:bg-gray-700">個人スポンサー</a>
+			<a href="/2024hakodate/staff" class="block p-4 border-b border-gray-700 hover:bg-gray-700">スタッフ</a>
 			<a href="https://x.com/yapcjapan" class="block p-4">X</a>
 		</div>
 	</nav>

2024hakodate/src/partial/header.ejs

@@ -39,6 +39,7 @@
 			<a href="https://fortee.jp/yapc-hakodate-2024/timetable" class="block p-4 border-b border-gray-700 hover:bg-gray-700">タイムテーブル</a>
 			<a href="https://blog.yapcjapan.org/" class="block p-4 border-b border-gray-700 hover:bg-gray-700">BLOG</a>
 			<a href="/2024hakodate/individual-sponsors" class="block p-4 border-b border-gray-700 hover:bg-gray-700">個人スポンサー</a>
+			<a href="/2024hakodate/staff" class="block p-4 border-b border-gray-700 hover:bg-gray-700">スタッフ</a>
 			<a href="https://x.com/yapcjapan" class="block p-4">X</a>
 		</div>
 	</nav>

2024hakodate/src/staff.ejs

@@ -0,0 +1,32 @@
+<%
+const staff=[
+	{title: "コアスタッフ" , staff: locals.staff.coreStaff},
+	// {title: "当日スタッフ" , staff: locals.staff.volunteerStaff},
+];
+%>
+<%- include('partial/header'); -%>
+    <section class="section flex flex-col">
+        <h2 class="en-serif-bold text-4xl sm:text-6xl text-center mb-16">STAFF</h2>
+	<% staff.forEach(s=> { %>
+        <h3 class="en-serif-bold text-xl text-center mb-4"><%=s.title %></h3>
+		<div class="container pb-32 m-auto text-primary ">
+			<div class="p-2 mx-auto max-w-5xl">
+				<div class="flex flex-wrap justify-center gap-5">
+					<% for (const member of s.staff) { %>
+						<div class="flex-3 mt-6 text-center sm:mt-8 basis-32 sm:basis-48">
+							<a href="<%= member.profile_url %>" target="_blank">
+								<div class="">
+									<img class="object-cover rounded-full w-full" src="<%= member.avatar_url %>" alt="" />
+								</div>
+								<div class="block pt-4 font-bold">
+									<%= member.name %>
+								</div>
+							</a>
+						</div>
+						<%}%>
+				</div>
+			</div>
+		</div>
+		<%});%>
+    </section>
+<%- include('partial/footer'); -%>

docs/2024hakodate/staff.html

@@ -0,0 +1 @@
+<html><head><script nomodule defer src="https://yapcjapan.org/2024hakodate/index.runtime.c588e682.js"></script><script type="module" src="https://yapcjapan.org/2024hakodate/index.runtime.0f4329bb.js"></script><title>YAPC::Hakodate 2024</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,500;0,700;1,500;1,700&family=Roboto:wght@400;500;700&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"><link rel="stylesheet" type="text/css" href="https://yapcjapan.org/2024hakodate/index.90a648d5.css"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="YAPC::Hakodate 2024"><meta name="twitter:image" content="https://yapcjapan.org/2024hakodate/images/ogimage.png"><meta property="og:title" content="YAPC::Hakodate 2024"><meta property="og:description" content="YAPC::Hakodate 2024"><meta property="og:image" content="https://yapcjapan.org/2024hakodate/images/ogimage.png"><link rel="icon" href="https://yapcjapan.org/2024hakodate/favicon.c43a506e.svg" type="image/svg+xml"></head><body class="bg-default text-default"> <nav class="bg-gray-800 text-white"> <div class="flex items-center justify-between"> <div> <div class="bg-key flex h-10 items-center pl-4 sm:h-14 sm:w-40 tri-right w-32"> <a href="/2024hakodate/"> <img class="sm:w-8 w-6" src="https://yapcjapan.org/2024hakodate/logo_small.f6dbd5f1.svg" alt="YAPC::Hakodate 2024"> </a> </div> </div> <button id="menu-btn" class="focus:outline-none hamburger material-symbols-outlined" aria-label="メニューを開く"> menu </button> </div> <div id="menu" class="hidden"> <a href="https://fortee.jp/yapc-hakodate-2024/timetable" class="block border-b border-gray-700 hover:bg-gray-700 p-4">タイムテーブル</a> <a href="https://blog.yapcjapan.org/" class="block border-b border-gray-700 hover:bg-gray-700 p-4">BLOG</a> <a href="/2024hakodate/individual-sponsors" class="block border-b border-gray-700 hover:bg-gray-700 p-4">個人スポンサー</a> <a href="/2024hakodate/staff" class="block border-b border-gray-700 hover:bg-gray-700 p-4">スタッフ</a> <a href="https://x.com/yapcjapan" class="block p-4">X</a> </div> </nav> <script>document.getElementById("menu-btn").addEventListener("click",function(){document.getElementById("menu").classList.toggle("hidden")});</script> <section class="flex flex-col section"> <h2 class="en-serif-bold mb-16 sm:text-6xl text-4xl text-center">STAFF</h2> <h3 class="en-serif-bold mb-4 text-center text-xl">コアスタッフ</h3> <div class="container m-auto pb-32 text-primary"> <div class="max-w-5xl mx-auto p-2"> <div class="flex flex-wrap gap-5 justify-center"> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://github.com/karupanerura" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/karupanerura.e65a4eee.png" alt> </div> <div class="block font-bold pt-4"> karupanerura </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/ytnobody" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/ytnobody.bc3b7d86.jpg" alt> </div> <div class="block font-bold pt-4"> ytnobody </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/__papix__" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/__papix__.c068ed56.jpg" alt> </div> <div class="block font-bold pt-4"> papix </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/PerukiFUN" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/PerukiFUN.dc13e3be.jpg" alt> </div> <div class="block font-bold pt-4"> PerukiFUN </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/masawada" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/masawada.93aa001e.jpg" alt> </div> <div class="block font-bold pt-4"> masawada </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/_ybrliiu" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/_ybrliiu.2868ab46.jpg" alt> </div> <div class="block font-bold pt-4"> liiu </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/toya" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/toya.7f976f95.png" alt> </div> <div class="block font-bold pt-4"> toya </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/nagayama" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/nagayama.856ddc27.jpg" alt> </div> <div class="block font-bold pt-4"> nagayama </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/xtetsuji" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/xtetsuji.83204816.png" alt> </div> <div class="block font-bold pt-4"> xtetsuji </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/godan09" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/godan09.a3e2ef0e.jpg" alt> </div> <div class="block font-bold pt-4"> godan </div> </a> </div> <div class="basis-32 flex-3 mt-6 sm:basis-48 sm:mt-8 text-center"> <a href="https://twitter.com/takanen28" target="_blank"> <div> <img class="object-cover rounded-full w-full" src="https://yapcjapan.org/2024hakodate/takane28.539e151f.jpeg" alt> </div> <div class="block font-bold pt-4"> たかね </div> </a> </div> </div> </div> </div> </section> <footer class="flex flex-col items-center mb-10 mt-32 mx-auto text-jpa"> <img src="https://yapcjapan.org/2024hakodate/jpa.b330cbdc.png" alt="JPA" class="w-[90px]"> <p class="mt-3 text-jpa text-xs">© Japan Perl Association</p> </footer> <script src="https://yapcjapan.org/2024hakodate/index.b69b61b2.js" type="module"></script><script src="https://yapcjapan.org/2024hakodate/index.f156f1db.js" nomodule defer></script> </body></html>