Add Month Filter To Meetup Page (#739)

* Remove conditional website link from meetup.html

* feat: add meetup date filter and update meetup display

* style: update meetup date clip color to #444

* fix: enable wrapping for meetup dates container layout

Author: adriangohjw

_includes/meetup.html

@@ -1,21 +1,20 @@
-<dt>
-  {% if meetup.url %}
-    <a href="{{ meetup.url }}">{{ meetup.name }}</a>
-  {% else %}
-    <a>{{ meetup.name }}</a>
-  {% endif %}
-
-  {% if meetup.status %}
-    <div class="status" data-phrase="{{ meetup.status }}"></div>
-  {% endif %}
-</dt>
-
-<dd>
-  <ul>
-    <li>{{ meetup.date | date: "%B %-d, %Y" }}</li>
-    <li>{{ meetup.location }}</li>
+<div class="meetup-item {{ meetup.date | date: '%Y%m' }}">
+  <dt>
     {% if meetup.url %}
-      <li><a href="{{ meetup.url }}">Website</a></li>
+      <a href="{{ meetup.url }}">{{ meetup.name }}</a>
+    {% else %}
+      <a>{{ meetup.name }}</a>
+    {% endif %}
+
+    {% if meetup.status %}
+      <div class="status" data-phrase="{{ meetup.status }}"></div>
     {% endif %}
-  </ul>
-</dd>
+  </dt>
+  
+  <dd>
+    <ul>
+      <li>{{ meetup.date | date: "%B %-d, %Y" }}</li>
+      <li>{{ meetup.location }}</li>
+    </ul>
+  </dd>  
+</div>

_includes/meetup_dates_filter.html

@@ -0,0 +1,78 @@
+<div class="meetup-dates-container">
+  {% assign unique_dates = "" | split: "" %}
+  {% assign now = "now" | date: "%Y-%m-%d 00:00:00" | date: "%s" | plus: 0 %}
+  {% for meetup in meetups %}
+    {% assign date = meetup.date | date: "%s" | plus: 0 %}
+    {% if date >= now %}
+      {% assign formatted_date = meetup.date | date: "%Y%m" %}
+      {% unless unique_dates contains formatted_date %}
+        <div class="meetup-date-clip"
+             title="{{ meetup.date | date: '%B %Y' }}"
+             onclick="toggleByYearMonth(`{{ meetup.date | date: '%Y%m' }}`, this)">
+          {{ meetup.date | date: "%B %Y" }}
+        </div>
+        {% assign unique_dates = unique_dates | push: formatted_date %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
+</div>
+
+<script>
+  function toggleByYearMonth(yearMonthToShow, element) {
+    const isElementSelected = element.classList.contains('selected');
+    if (isElementSelected) {
+      showAllMeetups();
+      element.classList.remove('selected');
+    } else {
+      showMeetups(yearMonthToShow);
+
+      const clips = document.querySelectorAll('.meetup-date-clip');
+      clips.forEach(clip => clip.classList.remove('selected'));
+      element.classList.add('selected');
+    } 
+  }
+
+  function showAllMeetups() {
+    const meetups = document.getElementsByClassName('meetup-item');
+    Array.from(meetups).forEach(meetup => {
+      meetup.style.display = 'block';
+    });
+  }
+
+  function showMeetups(yearMonth) {
+    const meetups = document.getElementsByClassName('meetup-item');
+    Array.from(meetups).forEach(meetup => {
+      if (meetup.classList.contains(yearMonth)) {
+        meetup.style.display = 'block';
+      } else {
+        meetup.style.display = 'none';
+      }
+    });
+  }
+</script>
+
+<style>
+  .meetup-dates-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .meetup-date-clip {
+    color: #444;
+    background-color: white;
+    padding: 4px 16px;
+    border-radius: 24px;
+    white-space: nowrap;
+    &:hover {
+      background-color: #f0f0f0;
+      cursor: pointer;
+    }
+    &.selected {
+      background-color: #c72c41;
+      color: white;
+    }
+  }
+</style>

meetups/index.html

@@ -5,6 +5,7 @@
   <dl>
     {% assign now = "now" | date: "%Y-%m-%d 00:00:00" | date: "%s" | plus: 0 %}
     {% assign meetups = site.data.meetups | sort: "date" %}
+    {% include meetup_dates_filter.html %}
     {% for meetup in meetups %}
       {% assign date = meetup.date | date: "%s" | plus: 0 %}
       {% if date >= now %}