イベントリストをTOPに表示できるようにする

Author: Fukusan64

_includes/top/sections/workshop.html

@@ -1,48 +1,26 @@
-{% comment %} <div
+<div
   class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto mt-20 lg:mt-48 mb-16 flex flex-col lg:flex-row-reverse items-center lg:items-start">
   <div class="w-full lg:w-2/5 mb-8">
     <div class="lg:max-w-sm lg:place-self-start lg:ml-[10%]">
       <h2 class="text-4xl mb-4 text-center lg:text-left">
-        ワークショップ
-        <span class="block mt-2 text-2xl">WORKSHOP</span>
+        イベント
+        <span class="block mt-2 text-2xl">EVENT</span>
       </h2>
       <p class="leading-7 mb-10">
-        実際にプログラミングやものづくりを体験できるコーナーです。<br />
-        気になっていたことにチャレンジしたり、新しい道具や考え方にふれるチャンス！
+        詳細は<a href="/events" class="underline">イベント一覧</a>をご覧ください。
       </p>
     </div>
   </div>
-
-  <ul class="flex flex-wrap gap-x-6 gap-y-12 lg:-mt-16 lg:w-3/5">
-    {% for i in (1..6) %}
-    <li class="flex-1 min-w-full sm:min-w-64">
-      <img class="w-full" src="https://placehold.jp/1920x1080.png" alt="セッションのイメージ">
-      <p class="mt-2">セッションタイトル。2行ぐらいあるかも</p>
-      <p class="text-xs mb-2 leading-5">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p>
-      <p class="text-xs text-gray-400 leading-5">
-        登壇者：仮の団体名・仮の登壇者の氏名<br />
-        所属：仮の所属名</p>
+  <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-12 lg:-mt-16 lg:w-3/5">
+    {%  assign events = site.data.events | slice: 0, 6 %}
+    {% for event in events %}
+    <li class="flex flex-col min-w-0">
+      <a href="{{ event.url }}" class="block hover:opacity-80 transition">
+      <img class="w-full" src="{{ event.img }}" alt="{{ event.title }}" />
+      <p class="mt-2">{{ event.title }}</p>
+      <p class="text-xs mb-2 leading-5">{{ event.outline }}</p>
+      </a>
     </li>
     {% endfor %}
   </ul>
-</div> {% endcomment %}
-
-<div
-  class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto mb-16 flex flex-col lg:flex-row-reverse items-center lg:items-start">
-  <div class="w-full lg:w-2/5 mb-8 lg:mt-15">
-    <div class="lg:max-w-sm lg:place-self-start lg:ml-[10%]">
-      <h2 class="text-4xl mb-4 text-center lg:text-left">
-        ワークショップ
-        <span class="block mt-2 text-2xl">WORKSHOP</span>
-      </h2>
-      <p class="leading-7 mb-10">
-        実際にプログラミングやものづくりを体験できるコーナーです。<br />
-        気になっていたことにチャレンジしたり、新しい道具や考え方にふれるチャンス！
-      </p>
-    </div>
-  </div>
-
-  <div class=" flex item-center justify-center h-[150px] lg:h-[300px] w-full lg:w-3/5">
-    <p class="size-full lg:text-7xl text-2xl text-gray-500 opacity-50 text-center flex items-center justify-center">Coming soon...</p>
-  </div>
 </div>