From 67115f907832ce0a20007b39d087642f0007f068 Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Sat, 31 Aug 2024 02:04:51 +0800
Subject: [PATCH 1/4] Remove conditional website link from meetup.html

---
 _includes/meetup.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/_includes/meetup.html b/_includes/meetup.html
index eb78bd26..e67a11ee 100644
--- a/_includes/meetup.html
+++ b/_includes/meetup.html
@@ -10,8 +10,5 @@
   <ul>
     <li>{{ meetup.date | date: "%B %-d, %Y" }}</li>
     <li>{{ meetup.location }}</li>
-    {% if meetup.url %}
-      <li><a href="{{ meetup.url }}">Website</a></li>
-    {% endif %}
   </ul>
 </dd>

From 29184bb0e7612eb33160ce159094df2729878f1f Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Sat, 31 Aug 2024 02:48:29 +0800
Subject: [PATCH 2/4] feat: add meetup date filter and update meetup display

---
 _includes/meetup.html              | 30 +++++------
 _includes/meetup_dates_filter.html | 80 ++++++++++++++++++++++++++++++
 meetups/index.html                 |  1 +
 3 files changed, 97 insertions(+), 14 deletions(-)
 create mode 100644 _includes/meetup_dates_filter.html

diff --git a/_includes/meetup.html b/_includes/meetup.html
index e67a11ee..942c63e9 100644
--- a/_includes/meetup.html
+++ b/_includes/meetup.html
@@ -1,14 +1,16 @@
-<dt>
-  {% if meetup.url %}
-    <a href="{{ meetup.url }}">{{ meetup.name }}</a>
-  {% else %}
-    <a>{{ meetup.name }}</a>
-  {% endif %}
-</dt>
-
-<dd>
-  <ul>
-    <li>{{ meetup.date | date: "%B %-d, %Y" }}</li>
-    <li>{{ meetup.location }}</li>
-  </ul>
-</dd>
+<div class="meetup-item {{ meetup.date | date: '%Y%m' }}">
+  <dt>
+    {% if meetup.url %}
+      <a href="{{ meetup.url }}">{{ meetup.name }}</a>
+    {% else %}
+      <a>{{ meetup.name }}</a>
+    {% endif %}
+  </dt>
+  
+  <dd>
+    <ul>
+      <li>{{ meetup.date | date: "%B %-d, %Y" }}</li>
+      <li>{{ meetup.location }}</li>
+    </ul>
+  </dd>  
+</div>
diff --git a/_includes/meetup_dates_filter.html b/_includes/meetup_dates_filter.html
new file mode 100644
index 00000000..8df0336f
--- /dev/null
+++ b/_includes/meetup_dates_filter.html
@@ -0,0 +1,80 @@
+<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;
+    gap: 12px;
+    margin-bottom: 24px;
+    overflow-x: auto;
+    white-space: nowrap;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .meetup-date-clip {
+    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>
\ No newline at end of file
diff --git a/meetups/index.html b/meetups/index.html
index 598fc79a..5a196fdd 100644
--- a/meetups/index.html
+++ b/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 %}

From 71d55074c485b7e673ba449ccffd308b1cb574ac Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Sat, 31 Aug 2024 13:14:56 +0800
Subject: [PATCH 3/4] style: update meetup date clip color to #444

---
 _includes/meetup_dates_filter.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_includes/meetup_dates_filter.html b/_includes/meetup_dates_filter.html
index 8df0336f..60e09bc8 100644
--- a/_includes/meetup_dates_filter.html
+++ b/_includes/meetup_dates_filter.html
@@ -64,6 +64,7 @@
   }
 
   .meetup-date-clip {
+    color: #444;
     background-color: white;
     padding: 4px 16px;
     border-radius: 24px;

From d6d31cdf78fc5a783dce5cca8a218719ab16b068 Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Sat, 31 Aug 2024 13:16:03 +0800
Subject: [PATCH 4/4] fix: enable wrapping for meetup dates container layout

---
 _includes/meetup_dates_filter.html | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/_includes/meetup_dates_filter.html b/_includes/meetup_dates_filter.html
index 60e09bc8..896a183a 100644
--- a/_includes/meetup_dates_filter.html
+++ b/_includes/meetup_dates_filter.html
@@ -54,13 +54,10 @@
 <style>
   .meetup-dates-container {
     display: flex;
+    flex-wrap: wrap;
     gap: 12px;
     margin-bottom: 24px;
-    overflow-x: auto;
     white-space: nowrap;
-    &::-webkit-scrollbar {
-      display: none;
-    }
   }
 
   .meetup-date-clip {