Add JDK version filtering by LTS cycle on homepage

Co-authored-by: brunoborges <129743+brunoborges@users.noreply.github.com>

Author: Copilot

site/app.js

@@ -202,10 +202,39 @@
      2. Category Filter Pills (homepage)
      ========================================================== */
   const initFilters = () => {
-    const pills = document.querySelectorAll('.filter-pill');
+    const pills = document.querySelectorAll('#categoryFilter .filter-pill');
+    const jdkPills = document.querySelectorAll('#jdkFilter .filter-pill');
     const cards = document.querySelectorAll('.tip-card');
     if (!pills.length || !cards.length) return;
 
+    let activeCategory = null;
+    let activeJdk = null;
+
+    // LTS cycle ranges: each entry covers all versions introduced since the previous LTS
+    const LTS_RANGES = {
+      '11': [9, 11],
+      '17': [12, 17],
+      '21': [18, 21],
+      '25': [22, 25]
+    };
+
+    const applyFilters = () => {
+      cards.forEach(card => {
+        const matchesCategory = !activeCategory || card.dataset.category === activeCategory;
+        let matchesJdk = true;
+        if (activeJdk) {
+          const version = parseInt(card.dataset.jdk, 10);
+          const range = LTS_RANGES[activeJdk];
+          matchesJdk = range && version >= range[0] && version <= range[1];
+        }
+        card.classList.toggle('filter-hidden', !(matchesCategory && matchesJdk));
+      });
+
+      if (window.updateViewToggleState) {
+        window.updateViewToggleState();
+      }
+    };
+
     pills.forEach(pill => {
       pill.addEventListener('click', () => {
         const category = pill.dataset.filter || 'all';
@@ -215,45 +244,46 @@
         pills.forEach(p => p.classList.remove('active'));
         if (!wasActive) pill.classList.add('active');
 
-        const showAll = (!wasActive && category === 'all');
-        const showCategory = (!wasActive && category !== 'all') ? category : null;
-
-        // Filter cards
-        cards.forEach(card => {
-          if (showAll || card.dataset.category === showCategory) {
-            card.classList.remove('filter-hidden');
-          } else {
-            card.classList.add('filter-hidden');
-          }
-        });
+        activeCategory = (!wasActive && category !== 'all') ? category : null;
 
         // Update URL hash to reflect active filter
-        const activeFilter = pill.classList.contains('active') ? category : null;
-        if (activeFilter && activeFilter !== 'all') {
-          history.replaceState(null, '', '#' + activeFilter);
+        if (activeCategory) {
+          history.replaceState(null, '', '#' + activeCategory);
         } else {
           history.replaceState(null, '', window.location.pathname + window.location.search);
         }
 
-        // Update view toggle button state
-        if (window.updateViewToggleState) {
-          window.updateViewToggleState();
-        }
+        applyFilters();
+      });
+    });
+
+    jdkPills.forEach(pill => {
+      pill.addEventListener('click', () => {
+        const version = pill.dataset.jdkFilter || 'all';
+        const wasActive = pill.classList.contains('active');
+
+        // Update active JDK pill (toggle off if re-clicked)
+        jdkPills.forEach(p => p.classList.remove('active'));
+        if (!wasActive) pill.classList.add('active');
+
+        activeJdk = (!wasActive && version !== 'all') ? version : null;
+
+        applyFilters();
       });
     });
 
     // Apply filter from a given category string (or "all" / empty for no filter)
     const applyHashFilter = (category) => {
       const target = category
-        ? document.querySelector(`.filter-pill[data-filter="${category}"]`)
+        ? document.querySelector(`#categoryFilter .filter-pill[data-filter="${category}"]`)
         : null;
       if (target) {
         target.click();
         // Scroll the filter section into view
         const section = document.getElementById('all-comparisons');
         if (section) section.scrollIntoView({ behavior: 'smooth' });
       } else {
-        const allButton = document.querySelector('.filter-pill[data-filter="all"]');
+        const allButton = document.querySelector('#categoryFilter .filter-pill[data-filter="all"]');
         if (allButton) allButton.click();
       }
     };

site/styles.css

@@ -407,6 +407,18 @@ nav {
 }
 
 /* ---------- Filter Pills ---------- */
+.filter-group {
+  margin-bottom: 40px;
+}
+
+.filter-group .filter-pills {
+  margin-bottom: 12px;
+}
+
+.filter-group .filter-pills:last-child {
+  margin-bottom: 0;
+}
+
 .filter-pills {
   display: flex;
   flex-wrap: wrap;

templates/index-card.html

@@ -1,4 +1,4 @@
-      <a href="{{cardHref}}" class="tip-card filter-hidden" data-category="{{category}}">
+      <a href="{{cardHref}}" class="tip-card filter-hidden" data-category="{{category}}" data-jdk="{{jdkVersion}}">
         <div class="tip-card-body">
           <div class="tip-card-header">
             <div class="tip-badges"><span class="badge {{category}}">{{catDisplay}}</span></div>

templates/index.html

@@ -233,6 +233,7 @@ <h1>{{site.tagline_line1}}<br><span class="gradient">{{site.tagline_line2}}</spa
       <h2 class="section-title">{{site.allComparisons}}</h2>
       <span class="section-badge">{{site.snippetsBadge}}</span>
     </div>
+    <div class="filter-group">
     <div class="filter-pills" id="categoryFilter">
       <span class="filter-label">{{filters.show}}</span>
       <button class="filter-pill" data-filter="all">{{filters.all}}</button>
@@ -248,6 +249,15 @@ <h2 class="section-title">{{site.allComparisons}}</h2>
       <button class="filter-pill" data-filter="tooling">Tooling</button>
       <button class="filter-pill" data-filter="enterprise">Enterprise</button>
     </div>
+    <div class="filter-pills" id="jdkFilter">
+      <span class="filter-label">{{filters.jdk}}</span>
+      <button class="filter-pill" data-jdk-filter="all">{{filters.all}}</button>
+      <button class="filter-pill" data-jdk-filter="11">Java 11</button>
+      <button class="filter-pill" data-jdk-filter="17">Java 17</button>
+      <button class="filter-pill" data-jdk-filter="21">Java 21</button>
+      <button class="filter-pill" data-jdk-filter="25">Java 25</button>
+    </div>
+    </div>
     <div class="view-toggle-wrap">
       <button class="view-toggle-btn" id="viewToggle" aria-label="Toggle view mode">
         <span class="view-toggle-icon">⊞</span>

translations/strings/en.yaml

@@ -33,6 +33,7 @@ sections:
 filters:
   show: 'Show:'
   all: All
+  jdk: 'JDK:'
 difficulty:
   beginner: Beginner
   intermediate: Intermediate