Add option to filter for online or in-person meetups

_includes/meetup.html

@@ -1,4 +1,4 @@
-<div class="meetup-item {{ meetup.date | date: '%Y%m' }}">
+<div class="meetup-item {{ meetup.date | date: '%Y%m' }} {% if meetup.location == 'Online' %}online{% else %}in-person{% endif %}">
   <dt>
     {% if meetup.url %}
       <a href="{{ meetup.url }}">{{ meetup.name }}</a>

_includes/meetup_filters.html

@@ -0,0 +1,152 @@
+<div class="filter-container">
+  {% assign unique_months = "" | 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_month = meetup.date | date: "%Y%m" %}
+      {% unless unique_months contains formatted_month %}
+        <div
+          class="filter-item filter-month"
+          title="{{ meetup.date | date: '%B %Y' }}"
+          onclick="toggleFilter('month', '{{ meetup.date | date: '%Y%m' }}', this)"
+        >
+          {{ meetup.date | date: "%B %Y" }}
+        </div>
+        {% assign unique_months = unique_months | push: formatted_month %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
+</div>
+
+<div class="filter-container">
+  <div class="filter-item filter-format" onclick="toggleFilter('format', 'in-person', this)">In-Person</div>
+  <div class="filter-item filter-format" onclick="toggleFilter('format', 'online', this)">Online</div>
+</div>
+
+<div class="filter-container filter-summary">
+  <div id="meetup-count"></div>
+  <div id="clear-filters" class="clear-filters" onclick="clearFilters()" style="display: none;">Clear filters</div>
+</div>
+
+<script>
+  let activeFilters = {
+    month: null,
+    format: null
+  };
+
+  function toggleFilter(filterType, value, element) {
+    if (activeFilters[filterType] === value) {
+      activeFilters[filterType] = null;
+      element.classList.remove('selected');
+    } else {
+      activeFilters[filterType] = value;
+      const filterItems = document.querySelectorAll(`.filter-${filterType}`);
+      filterItems.forEach(item => item.classList.remove('selected'));
+      element.classList.add('selected');
+    }
+    applyFilters();
+    updateClearFiltersVisibility();
+  }
+
+  function applyFilters() {
+    const meetups = document.getElementsByClassName('meetup-item');
+    let visibleCount = 0;
+
+    Array.from(meetups).forEach(meetup => {
+      const monthMatch = !activeFilters.month || meetup.classList.contains(activeFilters.month);
+      const formatMatch = !activeFilters.format || meetup.classList.contains(activeFilters.format);
+      const isVisible = monthMatch && formatMatch;
+      meetup.style.display = isVisible ? 'block' : 'none';
+      if (isVisible) visibleCount++;
+    });
+
+    updateMeetupCount(visibleCount);
+  }
+
+  function showAllMeetups() {
+    const meetups = document.getElementsByClassName('meetup-item');
+
+    Array.from(meetups).forEach(meetup => {
+      meetup.style.display = 'block';
+    });
+
+    updateMeetupCount(meetups.length);
+  }
+
+  function updateMeetupCount(count) {
+    const countElement = document.getElementById('meetup-count');
+    countElement.textContent = `Showing ${count} meetup${count !== 1 ? 's' : ''}`;
+  }
+
+  function clearFilters() {
+    activeFilters.month = null;
+    activeFilters.format = null;
+    const filterItems = document.querySelectorAll('.filter-item');
+    filterItems.forEach(item => item.classList.remove('selected'));
+    showAllMeetups();
+    updateClearFiltersVisibility();
+  }
+
+  function updateClearFiltersVisibility() {
+    const clearFiltersButton = document.getElementById('clear-filters');
+    const filtersActive = activeFilters.month !== null || activeFilters.format !== null;
+    clearFiltersButton.style.display = filtersActive ? 'block' : 'none';
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const meetups = document.getElementsByClassName('meetup-item');
+    updateMeetupCount(meetups.length);
+    updateClearFiltersVisibility();
+  });
+</script>
+
+<style>
+  .filter-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .filter-summary {
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .filter-item {
+    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;
+    }
+    &.selected:hover {
+      background-color: #a52537;
+    }
+  }
+
+  .clear-filters {
+    color: #444;
+    cursor: pointer;
+    margin-left: 8px;
+    text-decoration: underline;
+  }
+
+  .clear-filters:hover {
+    color: #c72c41;
+  }
+
+  #meetup-count {
+    font-weight: 500;
+    color: #999;
+  }
+</style>

meetups/index.html

@@ -5,7 +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 %}
+    {% include meetup_filters.html %}
     {% for meetup in meetups %}
       {% assign date = meetup.date | date: "%s" | plus: 0 %}
       {% if date >= now %}