fix: upcoming events logic on home and /events page

Author: adarshdigievo

package.json

@@ -4,6 +4,7 @@
   "description": "Trivandrum Python Community Website - Static Site built with 11ty",
   "scripts": {
     "build": "eleventy",
+    "test": "node tests/event-status.test.js",
     "serve": "eleventy --serve",
     "start": "eleventy --serve"
   },

src/_includes/components/events.njk

@@ -1,15 +1,15 @@
-<section id="events" class="section section--alt">
+<section id="events" class="section section--alt" data-home-events-section>
   <div class="container">
     <div class="section__header">
       <span class="section__label">// upcoming</span>
       <h2 class="section__title">Next Events</h2>
-      <p class="section__subtitle">Auto-populated from upcoming dates. All are welcome — no prior experience required.</p>
+      <p class="section__subtitle">Join our next meetup, workshop, or project night. All are welcome — no prior experience required.</p>
     </div>
 
     {% if collections.upcomingEvents.length > 0 %}
-    <div class="events-list">
+    <div class="events-list" data-home-event-list>
       {% for event in collections.upcomingEvents %}
-      <a href="{{ '/events/' | url }}{{ event.fileSlug }}/" class="event-row">
+      <a href="{{ '/events/' | url }}{{ event.fileSlug }}/" class="event-row" data-event-row data-event-date="{{ event.data.date | machineDate }}" data-event-time="{{ event.data.time }}" data-event-readable-date="{{ event.data.date | readableDate }}" data-event-year="{{ event.data.date | year }}" data-event-weekday="{{ event.data.date | dayOfWeek }}">
         <div class="event-row__date">
           <span class="event-row__month">{{ event.data.date | monthDay }}</span>
           <span class="event-row__day">{{ event.data.date | dayOfWeek }}</span>
@@ -19,12 +19,12 @@
           <div class="event-row__badges">
             <span class="badge badge--{{ event.data.type }}">{{ event.data.type | replace("-", " ") }}</span>
             {% if loop.first %}
-            <span class="badge badge--next">Next up</span>
+            <span class="badge badge--next" data-event-next-badge>Next up</span>
             {% endif %}
           </div>
           <h3 class="event-row__title">{{ event.data.title }}</h3>
           <div class="event-row__meta">
-            <span>{{ event.data.time }}</span>
+            <span data-event-meta-primary>{{ event.data.time }}</span>
             <span class="event-row__sep">·</span>
             <span>{{ event.data.venue }}</span>
           </div>
@@ -41,12 +41,12 @@
       </a>
       {% endfor %}
     </div>
-    {% else %}
-    <div class="empty-state">
+    {% endif %}
+
+    <div class="empty-state" data-home-empty-state{% if collections.upcomingEvents.length > 0 %} hidden{% endif %}>
       <p>No upcoming events right now. Stay tuned!</p>
-      <a href="{{ site.links.telegram }}" class="btn btn--outline" target="_blank" rel="noopener">Join Telegram for updates</a>
+      <a href="{{ site.links.whatsapp }}" class="btn btn--outline" target="_blank" rel="noopener">Join WhatsApp community</a>
     </div>
-    {% endif %}
 
     <div class="section__footer">
       <a href="{{ site.links.luma }}" class="btn btn--primary" target="_blank" rel="noopener">

src/_includes/event.njk

@@ -67,15 +67,15 @@
   {% include "header.njk" %}
 
   <main>
-    <article class="event-page">
+    <article class="event-page" data-event-page data-event-date="{{ date | machineDate }}">
       <div class="container">
         <a href="{{ '/events/' | url }}" class="event-page__back">← All Events</a>
 
         <header class="event-page__header">
           <div class="event-page__badges">
             <span class="badge badge--{{ type }}">{{ type | replace("-", " ") }}</span>
             {% if date | isFuture %}
-            <span class="badge badge--next">Upcoming</span>
+            <span class="badge badge--next" data-event-future-only>Upcoming</span>
             {% endif %}
           </div>
 
@@ -138,7 +138,7 @@
         {% endif %}
 
         {% if registration_url and (date | isFuture) %}
-        <div class="event-page__cta">
+        <div class="event-page__cta" data-event-future-only>
           <a href="{{ registration_url }}" class="btn btn--primary btn--lg" target="_blank" rel="noopener">Register for this event →</a>
         </div>
         {% endif %}

src/events-page.njk

@@ -15,12 +15,11 @@ permalink: events/index.html
       </a>
     </div>
 
-    {% if collections.upcomingEvents.length > 0 %}
-    <div class="events-page__group">
+    <div class="events-page__group" data-event-group="upcoming"{% if collections.upcomingEvents.length == 0 %} hidden{% endif %}>
       <h3 class="events-page__group-title">Upcoming</h3>
-      <div class="events-list">
+      <div class="events-list" data-event-list="upcoming">
         {% for event in collections.upcomingEvents %}
-        <a href="{{ '/events/' | url }}{{ event.fileSlug }}/" class="event-row">
+        <a href="{{ '/events/' | url }}{{ event.fileSlug }}/" class="event-row" data-event-row data-event-date="{{ event.data.date | machineDate }}" data-event-time="{{ event.data.time }}" data-event-readable-date="{{ event.data.date | readableDate }}" data-event-year="{{ event.data.date | year }}" data-event-weekday="{{ event.data.date | dayOfWeek }}">
           <div class="event-row__date">
             <span class="event-row__month">{{ event.data.date | monthDay }}</span>
             <span class="event-row__day">{{ event.data.date | dayOfWeek }}</span>
@@ -30,12 +29,12 @@ permalink: events/index.html
             <div class="event-row__badges">
               <span class="badge badge--{{ event.data.type }}">{{ event.data.type | replace("-", " ") }}</span>
               {% if loop.first %}
-              <span class="badge badge--next">Next up</span>
+              <span class="badge badge--next" data-event-next-badge>Next up</span>
               {% endif %}
             </div>
             <h3 class="event-row__title">{{ event.data.title }}</h3>
             <div class="event-row__meta">
-              <span>{{ event.data.time }}</span>
+              <span data-event-meta-primary>{{ event.data.time }}</span>
               <span class="event-row__sep">·</span>
               <span>{{ event.data.venue }}</span>
             </div>
@@ -59,14 +58,12 @@ permalink: events/index.html
         {% endfor %}
       </div>
     </div>
-    {% endif %}
 
-    {% if collections.pastEvents.length > 0 %}
-    <div class="events-page__group">
+    <div class="events-page__group" data-event-group="past"{% if collections.pastEvents.length == 0 %} hidden{% endif %}>
       <h3 class="events-page__group-title">Past</h3>
-      <div class="events-list">
+      <div class="events-list" data-event-list="past">
         {% for event in collections.pastEvents %}
-        <a href="{{ '/events/' | url }}{{ event.fileSlug }}/" class="event-row event-row--past">
+        <a href="{{ '/events/' | url }}{{ event.fileSlug }}/" class="event-row event-row--past" data-event-row data-event-date="{{ event.data.date | machineDate }}" data-event-time="{{ event.data.time }}" data-event-readable-date="{{ event.data.date | readableDate }}" data-event-year="{{ event.data.date | year }}" data-event-weekday="{{ event.data.date | dayOfWeek }}">
           <div class="event-row__date">
             <span class="event-row__month">{{ event.data.date | monthDay }}</span>
             <span class="event-row__day">{{ event.data.date | year }}</span>
@@ -81,7 +78,7 @@ permalink: events/index.html
             </div>
             <h3 class="event-row__title">{{ event.data.title }}</h3>
             <div class="event-row__meta">
-              <span>{{ event.data.date | readableDate }}</span>
+              <span data-event-meta-primary>{{ event.data.date | readableDate }}</span>
               <span class="event-row__sep">·</span>
               <span>{{ event.data.venue }}</span>
             </div>
@@ -105,6 +102,5 @@ permalink: events/index.html
         {% endfor %}
       </div>
     </div>
-    {% endif %}
   </div>
 </section>