✅[outreachy] Registry : Add to favorites #5447

assets/js/addToFavorites.js

@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function () {
+  let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
+
+  document.querySelectorAll('.favorite-btn').forEach(function (button) {
+    const registryId = button.getAttribute('data-registry-id');
+
+    if (favorites.includes(registryId)) {
+      button.innerHTML = '<i class="fa-solid fa-star"></i> Remove from Favorites';
+      button.classList.add('btn-success');
+      button.classList.remove('btn-outline-primary');
+    }
+
+    button.addEventListener('click', function () {
+      if (favorites.includes(registryId)) {
+        favorites = favorites.filter((id) => id !== registryId);
+        localStorage.setItem('favorites', JSON.stringify(favorites));
+        button.innerHTML =
+          '<i class="fa-regular fa-star"></i> Add to favorites';
+        button.classList.add('btn-outline-primary');
+        button.classList.remove('btn-success');
+      } else {
+        favorites.push(registryId);
+        localStorage.setItem('favorites', JSON.stringify(favorites));
+        button.innerHTML = '<i class="fa-solid fa-star"></i> Remove from Favorites';
+        button.classList.add('btn-success');
+        button.classList.remove('btn-outline-primary');
+      }
+    });
+  });
+});

assets/js/registrySearch.js

@@ -239,3 +239,27 @@ function parseUrlParams() {
   selectedLanguage = urlParams.get('language') || 'all';
   selectedComponent = urlParams.get('component') || 'all';
 }
+
+document.addEventListener('DOMContentLoaded', function () {
+  const filterBtn = document.getElementById('filter-favorites-btn');
+  const registryItems = document.querySelectorAll('.registry-entry');
+
+  filterBtn.addEventListener('click', function () {
+    let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
+
+    if (filterBtn.textContent.includes('Show Favorites')) {
+      registryItems.forEach(function (item) {
+        const registryId = item.getAttribute('data-registry-id');
+        if (!favorites.includes(registryId)) {
+          item.style.display = 'none';
+        }
+      });
+      filterBtn.textContent = 'Show All';
+    } else {
+      registryItems.forEach(function (item) {
+        item.style.display = '';
+      });
+      filterBtn.textContent = 'Show Favorites';
+    }
+  });
+});

layouts/partials/ecosystem/registry/entry.html

@@ -217,6 +217,13 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
         {{ $demoUrl := printf "href=%q" (printf .) | safeHTMLAttr -}}
         <a {{ $demoUrl }} target="_blank" rel="noopener" class="card-link"><i class="fa-solid fa-shapes" aria-hidden="true"></i>&nbsp;Demo Service</a>
         {{- end -}}
+        <!-- Add to Favorites Button -->
+        <div class="text-end">
+            <button class="btn btn-link p-0 favorite-btn" data-registry-id="{{ ._key }}">
+                <i class="fa-regular fa-star"></i> Add to favorites
+            </button>
+        </div>
         </div>
     </li>
   {{ end -}}
+{{ partial "script.html" (dict "src" "js/addToFavorites.js") -}}

layouts/shortcodes/ecosystem/registry/search-form.html

@@ -57,6 +57,11 @@
       <button type="button" class="btn btn-outline-danger"
         onclick="document.getElementById('input-s').value = ''; document.getElementById('input-language').value = 'all';document.getElementById('input-component').value = 'all';document.getElementById('searchForm').submit();">Reset</button>
 
+      <!-- Show Favorites Button -->
+      <button type="button" id="filter-favorites-btn" class="btn" style="border-color: #6a0dad; color: #6a0dad;">
+        Show Favorites
+      </button>
+
       <button class="btn btn-outline-secondary dropdown-toggle" id="languageDropdown" type="button"
         data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</button>
       <div class="dropdown-menu" id="languageFilter">