Add badge filtering and shop category to the site

- Introduced a new 'shops' category in the build script and README.
- Implemented badge filtering in the filter functionality, allowing users to filter entries by badge.

public/filter.js

@@ -5,6 +5,7 @@
 
   const categoryFilter = document.getElementById('category-filter');
   const regionFilter = document.getElementById('region-filter');
+  const badgeFilter = document.getElementById('badge-filter');
   const tagFilter = document.getElementById('tag-filter');
   const searchInput = document.getElementById('search-input');
   const clearFiltersBtn = document.getElementById('clear-filters');
@@ -26,6 +27,9 @@
     if (regionFilter?.value) {
       params.set('region', regionFilter.value);
     }
+    if (badgeFilter?.value) {
+      params.set('badge', badgeFilter.value);
+    }
     if (tagFilter?.value) {
       params.set('tag', tagFilter.value);
     }
@@ -51,6 +55,9 @@
     if (params.has('region') && regionFilter) {
       regionFilter.value = params.get('region');
     }
+    if (params.has('badge') && badgeFilter) {
+      badgeFilter.value = params.get('badge');
+    }
     if (params.has('tag') && tagFilter) {
       tagFilter.value = params.get('tag');
     }
@@ -64,6 +71,7 @@
   function filterEntries(shouldUpdateURL = true) {
     const categoryValue = categoryFilter?.value.toLowerCase() || '';
     const regionValue = regionFilter?.value.toLowerCase() || '';
+    const badgeValue = badgeFilter?.value.toLowerCase() || '';
     const tagValue = tagFilter?.value.toLowerCase() || '';
     const searchValue = searchInput?.value.toLowerCase().trim() || '';
 
@@ -72,15 +80,17 @@
     entries.forEach(entry => {
       const entryCategory = (entry.dataset.category || '').toLowerCase();
       const entryRegion = (entry.dataset.region || '').toLowerCase();
+      const entryBadge = (entry.dataset.badge || '').toLowerCase();
       const entryTags = (entry.dataset.tags || '').toLowerCase().split(',');
       const entryText = entry.textContent.toLowerCase();
 
       const matchesCategory = !categoryValue || entryCategory === categoryValue;
       const matchesRegion = !regionValue || entryRegion === regionValue;
+      const matchesBadge = !badgeValue || entryBadge === badgeValue;
       const matchesTag = !tagValue || entryTags.includes(tagValue);
       const matchesSearch = !searchValue || entryText.includes(searchValue);
 
-      const isVisible = matchesCategory && matchesRegion && matchesTag && matchesSearch;
+      const isVisible = matchesCategory && matchesRegion && matchesBadge && matchesTag && matchesSearch;
 
       entry.hidden = !isVisible;
       if (isVisible) visibleEntries++;
@@ -111,6 +121,7 @@
     const hasFilters = 
       (categoryFilter?.value || '') !== '' ||
       (regionFilter?.value || '') !== '' ||
+      (badgeFilter?.value || '') !== '' ||
       (tagFilter?.value || '') !== '' ||
       (searchInput?.value || '') !== '';
     
@@ -120,6 +131,7 @@
   function clearFilters() {
     if (categoryFilter) categoryFilter.value = '';
     if (regionFilter) regionFilter.value = '';
+    if (badgeFilter) badgeFilter.value = '';
     if (tagFilter) tagFilter.value = '';
     if (searchInput) searchInput.value = '';
     
@@ -138,6 +150,8 @@
       categoryFilter.value = filterValue;
     } else if (filterType === 'region' && regionFilter) {
       regionFilter.value = filterValue;
+    } else if (filterType === 'badge' && badgeFilter) {
+      badgeFilter.value = filterValue;
     } else if (filterType === 'tag' && tagFilter) {
       tagFilter.value = filterValue;
     }
@@ -171,6 +185,10 @@
     regionFilter.addEventListener('change', () => filterEntries());
   }
 
+  if (badgeFilter) {
+    badgeFilter.addEventListener('change', () => filterEntries());
+  }
+
   if (tagFilter) {
     tagFilter.addEventListener('change', () => filterEntries());
   }