Hide section if latestEvent is blank

Author: jacopen

src/pages/index.astro

@@ -14,6 +14,11 @@ import type { Conference } from '../types/conference'
 
 // 最新の3件のブログ記事を取得
 const latestPosts = await getPosts(3)
+
+// 最新のイベント（status == 'registered'）を取得
+const latestEvents = Conferences?.filter(
+  (conference) => conference.status == 'registered',
+) || []
 ---
 
 <Layout title="CloudNative Days" description="CloudNative Days はコミュニティ、企業、技術者が一堂に会し、クラウドネイティブムーブメントを牽引することを目的としたテックカンファレンスです。" ogImage="/favicon.svg" isTopPage={true}>
@@ -33,40 +38,40 @@ const latestPosts = await getPosts(3)
       </p>
     </Hero>
 
-    <section class="py-24 backdrop-blur-sm">
-      <div class="container mx-auto px-4">
-        <h2 class="text-black relative px-4 text-4xl font-bold mb-16 text-center">
-          最新のイベント
-        </h2>
-        <div class="relative">
-          <div class="flex flex-col gap-20">
-            {
-              Conferences?.filter(
-                (conference) => conference.status == 'registered',
-              ).map((conference, index) => {
-                const url = `https://event.cloudnativedays.jp/${conference.abbr}`
-                const eventDays = conference.conferenceDays
-                  .filter((day) => !day.internal)
-                  .map((day) => day.date)
-                  .join(',')
-                return (
-                  <a href={url} class="block group">
-                    <Event
-                      name={conference.name}
-                      days={eventDays}
-                      img={conference.image}
-                      theme={conference.theme}
-                      about={conference.about}
-                      align={index % 2 === 0 ? 'left' : 'right'}
-                    />
-                  </a>
-                )
-              })
-            }
+    {latestEvents.length > 0 && (
+      <section class="py-24 backdrop-blur-sm">
+        <div class="container mx-auto px-4">
+          <h2 class="text-black relative px-4 text-4xl font-bold mb-16 text-center">
+            最新のイベント
+          </h2>
+          <div class="relative">
+            <div class="flex flex-col gap-20">
+              {
+                latestEvents.map((conference, index) => {
+                  const url = `https://event.cloudnativedays.jp/${conference.abbr}`
+                  const eventDays = conference.conferenceDays
+                    .filter((day) => !day.internal)
+                    .map((day) => day.date)
+                    .join(',')
+                  return (
+                    <a href={url} class="block group">
+                      <Event
+                        name={conference.name}
+                        days={eventDays}
+                        img={conference.image}
+                        theme={conference.theme}
+                        about={conference.about}
+                        align={index % 2 === 0 ? 'left' : 'right'}
+                      />
+                    </a>
+                  )
+                })
+              }
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+    )}
 
     <section class="py-24">
       <div class="container mx-auto px-4">