TOPにスポンサーのリストを追加

_data/sponsors.yml

@@ -0,0 +1,62 @@
+# - id:   ID（スポンサーページのアンカータグになります）
+#   name: スポンサー名
+#   logo: ロゴ画像ファイルのパス
+#   link: ロゴ画像をクリックした際のリンク先
+#   type: スポンサー種別（platinum, gold, silver, bronze, inkind, individual）
+#   message:  スポンサー紹介文
+
+- id: cygames
+  name: 株式会社<wbr>Cygames
+  logo:
+  link:
+  type: gold
+  message:
+
+- id: sakura_internet
+  name: さくら<wbr>インターネット<wbr>株式会社
+  logo:
+  link:
+  type: silver
+  message:
+
+- id: sunnyside_systems
+  name: サニーサイド<wbr>システムズ<wbr>合同会社
+  logo:
+  link:
+  type: bronze
+  message:
+
+- id: dojoletter
+  name: DojoLetter<wbr>編集部
+  logo:
+  link:
+  type: bronze
+  message:
+
+- id: unique_i_net
+  name: ユニーク･<wbr>アイネット<wbr>株式会社
+  logo:
+  link:
+  type: bronze
+  message:
+
+- id: ma
+  name: 一般社団法人<wbr>MA<wbr>（ProtoPedia）
+  logo:
+  link:
+  type: inkind
+  message:
+
+- id: nulab
+  name: 株式会社<wbr>ヌーラボ<wbr>（Backlog）
+  logo:
+  link:
+  type: inkind
+  message:
+
+- id: yasslab
+  name: YassLab <wbr>株式会社<wbr>（Doorkeeper）
+  logo:
+  link:
+  type: inkind
+  message:

_includes/top/sections/sponsor.html

@@ -1,45 +1,62 @@
+{% assign gold_sponsors       = site.data.sponsors | where: "type", "gold"       %}
+{% assign silver_sponsors     = site.data.sponsors | where: "type", "silver"     %}
+{% assign bronze_sponsors     = site.data.sponsors | where: "type", "bronze"     %}
+{% assign inkind_sponsors     = site.data.sponsors | where: "type", "inkind"     %}
+{% assign individual_sponsors = site.data.sponsors | where: "type", "individual" %}
+
 <h2 class="text-4xl text-center">
   スポンサー
   <span class="block mt-5 text-2xl">SPONSOR</span>
 </h2>
 
-<h3 class="text-2xl mt-22 mx-8 text-center mb-4">ゴールドスポンサー
+<h3 class="text-2xl mt-10 mx-8 text-center mb-4">ゴールドスポンサー
   <span class="block text-base mt-1">GOLD SPONSOR</span>
 </h3>
 
-<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
-  <img class="w-full max-w-3xl mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ゴールドスポンサーのロゴ">
+<div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl w-full mx-auto">
+  {% for sponsor in gold_sponsors %}
+  <div class="w-full mb-5">
+    {% comment %} <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ"> {% endcomment %}
+    <p class="w-full text-center break-keep text-3xl">{{ sponsor.name }}</p>
+  </div>
+  {% endfor %}
 </div>
 
-<h3 class="text-2xl mt-22 mx-8 text-center mb-4">シルバースポンサー
+<h3 class="text-2xl mt-10 mx-8 text-center mb-4">シルバースポンサー
   <span class="block text-base mt-1">SILVER SPONSOR</span>
 </h3>
 
-<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
-  <div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="シルバースポンサーのロゴ">
-  </div>
-  <div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="シルバースポンサーのロゴ">
+<div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl mx-auto">
+  {% for sponsor in silver_sponsors %}
+  <div class="_max-w-[500px] w-full mb-5">
+    {% comment %} <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ"> {% endcomment %}
+    <p class="w-full text-center break-keep text-3xl">{{ sponsor.name }}</p>
   </div>
+  {% endfor %}
 </div>
 
-<h3 class="text-2xl mt-22 mx-8 text-center mb-4">ブロンズスポンサー
+<h3 class="text-2xl mt-10 mx-8 text-center mb-4">ブロンズスポンサー
   <span class="block text-base mt-1">BRONZE SPONSOR</span>
 </h3>
 
-<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
-  <div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ブロンズスポンサーのロゴ">
-  </div>
-  <div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ブロンズスポンサーのロゴ">
+<div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl mx-auto">
+  {% for sponsor in bronze_sponsors %}
+  <div class="_max-w-[300px] w-full mb-5">
+    {% comment %} <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ"> {% endcomment %}
+    <p class="text-center break-keep text-3xl">{{ sponsor.name }}</p>
   </div>
+  {% endfor %}
 </div>
 
-<h3 class="text-2xl mt-22 mx-8 text-center mb-4">インカインドスポンサー
+<h3 class="text-2xl mt-10 mx-8 text-center mb-4">インカインドスポンサー
   <span class="block text-base mt-1">IN-KIND SPONSOR</span>
 </h3>
 
-<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
-  <div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="インカインドスポンサーのロゴ">
-  </div>
-  <div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="インカインドスポンサーのロゴ">
+<div class="flex justify-center flex-wrap gap-x-8 px-8 max-w-3xl mx-auto">
+  {% for sponsor in inkind_sponsors %}
+  <div class="_max-w-[270px] w-full mb-5">
+    {% comment %} <img class="w-full mx-auto mb-3" src="{{ sponsor.logo }}" alt="{{ sponsor.name | strip_html }}のロゴ"> {% endcomment %}
+    <p class="w-full text-center break-keep text-3xl">{{ sponsor.name }}</p>
   </div>
+  {% endfor %}
 </div>