Merge pull request #78 from coderdojo-japan/add-event-list-to-top

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

Author: Fukusan64

_includes/header.html

@@ -27,7 +27,7 @@ <h1 class="xl:block hidden mx-auto max-w-lg pt-5 px-8">
         class="flex flex-col min-h-20 items-stretch gap-2 *:px-6 *:text-center *:text-[20px] *:leading-[1.75] *:text-[#cc8f2e] [&_a]:block">
         <li><a href="/#outline">開催概要</a></li>
         <li><a href="/#session">セッション</a></li>
-        <li><a href="/events/">企画</a></li>
+        <li><a href="/events/">イベント</a></li>
         <li><a href="/contests/">コンテスト</a></li>
         <li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
         <li><a href="/sponsorship/">スポンサー募集</a></li>

_includes/navbar.html

@@ -4,7 +4,7 @@
     <ul class="flex flex-wrap min-h-20 items-center p-5 pr-0 justify-center divide-x-2 gap-y-2 *:text-[#cc8f2e] *:px-6">
       <li><a href="/#outline">開催概要</a></li>
       <li><a href="/#session">セッション</a></li>
-      <li><a href="/events/">企画</a></li>
+      <li><a href="/events/">イベント</a></li>
       <li><a href="/contests/">コンテスト</a></li>
       <li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
       <li><a href="/sponsorship/">スポンサー募集</a></li>

_includes/top/sections/event.html

@@ -0,0 +1,28 @@
+<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">EVENT</span>
+      </h2>
+      <p class="leading-7 mb-10">
+        コンテストや体験型のワークショップ等を企画しています。<br>
+        気になっていたことにチャレンジしたり、新しい道具や考え方にふれるチャンス！<br>
+        詳細は<a href="/events/" class="underline">イベント一覧</a>をご覧ください。
+      </p>
+    </div>
+  </div>
+  <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 grow">
+      <img class="w-full md:max-h-[160px] md:object-contain " 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>

_includes/top/sections/workshop.html

@@ -1,12 +1,12 @@
 ---
 layout: default
 permalink: /events/
-title: 企画
+title: イベント
 ---
 {% include navbar.html %}
 
 <h2 class="text-4xl text-center mb-8 mt-30 xl:mt-15">
-  企画
+  イベント
   <span class="block mt-5 text-2xl">EVENTS</span>
 </h2>
 

_pages/events.md

@@ -5,7 +5,7 @@ title-in-news-list: 『DojoCon Japan 2025 プログラミングコンテスト
 date: 2025-07-21T00:00:00 UTC+09:00
 categories: news
 permalink: /contests/
-tags: 企画
+tags: イベント
 ---
 
 <p>

_posts/2025-07-21-contest-outline.md

@@ -4,7 +4,7 @@ title: 『DojoCon Japan 2025 プログラミングコンテスト』応募方法
 title-in-news-list: 『DojoCon Japan 2025 プログラミングコンテスト』の応募方法を公開しました
 date: 2025-08-02T01:00:00 UTC+09:00
 categories: news
-tags: 企画
+tags: イベント
 permalink: /contests/how-to-apply/
 ---
 <style>

_posts/2025-08-02-contest-how-to-apply.md

@@ -4,7 +4,7 @@ title: DojoCon Japan 2025 スポンサー募集のお知らせ
 title-in-news-list: DojoCon Japan 2025 スポンサー募集のお知らせを掲載しました
 date: 2025-08-02T00:00:00 UTC+09:00
 categories: news
-tags: 企画
+tags: スポンサー
 permalink: /sponsorship/
 ---
 <img src="/img/common/coderdojo-nameplate.webp" class="mb-4" loading="lazy" alt="DojoCon Japan Cover Photo"

_posts/2025-08-02-sponsor-recruit-started.md

@@ -32,7 +32,7 @@ permalink: /staff/
 </div>
 
 <p class="leading-6">
-  聴きたいセッションや参加したい企画・ワークショップがあるなど、時間を調整いたしますのでお気軽にご相談ください。<br>
+  聴きたいセッションや参加したいイベント・ワークショップがあるなど、時間を調整いたしますのでお気軽にご相談ください。<br>
   皆様のご応募をお待ちしております。
 </p>
 

_posts/2025-09-01-staff.md

@@ -29,7 +29,7 @@ layout: top
 
 {% include top/sections/session.html %}
 
-{% include top/sections/workshop.html %}
+{% include top/sections/event.html %}
 
 <div class="-mx-4">
   <img class="w-full" src="/img/top/background3.webp" alt="鉄道模型を動かしている様子"/>