Refactor event, gallery, and members pages: replace Astro.glob with import.meta.glob for eager loading of content, ensuring better performance and handling of optional chaining for frontmatter properties.

src/pages/events.astro

@@ -2,14 +2,15 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import EventFilterSearch from '../components/EventFilterSearch.jsx';
 
-const events = await Astro.glob('../../content/events/*.md');
+const eventFiles = Object.values(await import.meta.glob('../../content/events/*.md', { eager: true })) as any[];
-const sortedEvents = events.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date));
+const events = eventFiles;
+const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0) - new Date(a.frontmatter?.date || 0));
 ---
 
 <BaseLayout>
   <!-- Page Header -->
   <section class="relative py-16 px-4 text-center text-white overflow-hidden bg-gradient-to-br from-nigerian-green-500 via-kente-gold-500 to-ankara-red-500" data-animate-on-scroll="fade-in">
-    <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
+    <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.1\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
     <div class="relative z-10 max-w-4xl mx-auto">
       <div class="flex items-center justify-center gap-2 mb-4 text-sm">
         <a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
@@ -20,7 +21,7 @@ const sortedEvents = events.sort((a, b) => new Date(b.frontmatter.date) - new Da
         Our Events
       </h1>
       <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">
-        Explore our upcoming and past events. Use the filters and search bar to find what're looking for!
+        Explore our upcoming and past events. Use the filters and search bar to find what you're looking for!
       </p>
     </div>
   </section>

src/pages/gallery.astro

@@ -2,8 +2,8 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import ImageGallery from '../components/ImageGallery.jsx';
 
-const galleryData = await Astro.glob('../../content/gallery/gallery-sample.md');
+const galleryFiles = Object.values(await import.meta.glob('../../content/gallery/gallery-sample.md', { eager: true })) as any[];
-const images = galleryData[0]?.frontmatter.images || [];
+const images = galleryFiles[0]?.frontmatter?.images || [];
 ---
 
 <BaseLayout>
@@ -12,7 +12,6 @@ const images = galleryData[0]?.frontmatter.images || [];
     <p class="text-center text-lg text-gray-600 mb-10">
       Explore moments of joy, culture, and community from our past events and activities.
     </p>
-
     <ImageGallery images={images} client:load />
   </section>
 </BaseLayout>

src/pages/members.astro

@@ -1,14 +1,14 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
-const membersData = await Astro.glob('../../content/members/members-sample.md');
+const memberFiles = Object.values(await import.meta.glob('../../content/members/members-sample.md', { eager: true })) as any[];
-const intro = membersData[0]?.frontmatter.intro || '';
+const intro = memberFiles[0]?.frontmatter?.intro || '';
-const members = membersData[0]?.frontmatter.members || [];
+const members = memberFiles[0]?.frontmatter?.members || [];
 ---
 
 <BaseLayout>
   <!-- Page Header -->
   <section class="relative py-16 px-4 text-center text-white overflow-hidden bg-gradient-to-br from-nigerian-green-500 via-kente-gold-500 to-ankara-red-500" data-animate-on-scroll="fade-in">
-    <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
+    <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.1\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
     <div class="relative z-10 max-w-4xl mx-auto">
       <div class="flex items-center justify-center gap-2 mb-4 text-sm">
         <a href="/" class="text-white/80 hover:text-white transition-colors">🏠 Home</a>
@@ -29,13 +29,15 @@ const members = membersData[0]?.frontmatter.members || [];
     <div class="text-gray-700 whitespace-pre-line">{intro}</div>
   </section>
 
-  <section class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-4 mb-20" data-animate-on-scroll="fade-in">
+  <section class="max-w-6xl mx-auto mb-20" data-animate-on-scroll="fade-in">
-    {members.map(member => (
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-4">
-      <div class="card bg-base-100 shadow-lg rounded-xl flex flex-col items-center p-4 transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
+      {Array.isArray(members) && members.map((member: any) => (
-        <img src={member.image} alt={member.name} class="w-40 h-40 object-cover rounded-lg mb-4" />
+        <div class="card bg-base-100 shadow-lg rounded-xl flex flex-col items-center p-4 transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
-        <h3 class="font-bold text-lg text-primary mb-1">{member.name}</h3>
+          <img src={member.image} alt={member.name} class="w-40 h-40 object-cover rounded-lg mb-4" />
-        <p class="text-sm text-gray-600">{member.role}</p>
+          <h3 class="font-bold text-lg text-primary mb-1">{member.name}</h3>
-      </div>
+          <p class="text-sm text-gray-600">{member.role}</p>
-    ))}
+        </div>
+      ))}
+    </div>
   </section>
 </BaseLayout>