feat: add sorting functionality to plugins page, by name

Author: DavidGBrett

src/pages/plugins/index.astro

@@ -45,6 +45,13 @@ const hasFeaturedPlugins = featured.length > 0;
           {TAGS.map(v => <option value={v}>{v}</option>)}
         </select>
       </LabelValue>
+
+      <LabelValue label="Sort by">
+        <select aria-label="Sort by" id="sort">
+          <option value="name-asc" selected>Name (A-Z)</option>
+          <option value="name-desc">Name (Z-A)</option>
+        </select>
+      </LabelValue>
     </div>
     <div id="store" class="plugin-grid">
       {plugins.map(v => <Plugin plugin={v}/>)}
@@ -60,7 +67,7 @@ const hasFeaturedPlugins = featured.length > 0;
 
 .controls {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-top: 24px;
     position: sticky;
@@ -101,36 +108,59 @@ import {TAGS} from "@/constants";
 
 const searchInput = document.querySelector("#search") as HTMLInputElement;
 const tagsSelect = document.querySelector("#tags") as HTMLSelectElement;
+const sortSelect = document.querySelector("#sort") as HTMLSelectElement;
 const notFound = document.querySelector("#not-found") as HTMLElement;
+const store = document.querySelector("#store") as HTMLElement;
 
 const plugins = document.querySelectorAll("#store > .plugin") as NodeListOf<HTMLElement>;
+const defaultSortValue = "name-asc";
+const allowedSortValues = ["name-asc", "name-desc"];
 
-searchInput.addEventListener("input", filterPlugins);
-tagsSelect.addEventListener("change", filterPlugins);
+searchInput.addEventListener("input", onFilterChange);
+tagsSelect.addEventListener("change", onFilterChange);
+sortSelect.addEventListener("change", onSortChange);
 
 const url = new URL(window.location.href);
 
 const searchParam = url.searchParams.get("search") ?? "";
 let tagsParam: any = url.searchParams.get("tags") ?? "";
+let sortParam = url.searchParams.get("sort") ?? defaultSortValue;
 
 if (!TAGS.includes(tagsParam)) {
   tagsParam = "";
 }
 
+if (!allowedSortValues.includes(sortParam)) {
+  sortParam = defaultSortValue;
+}
+
 searchInput.value = searchParam;
 tagsSelect.value = tagsParam;
+sortSelect.value = sortParam;
 
 filterPlugins();
+applySort();
+updateUrlParams();
 
-function filterPlugins(): void {
-  let foundAtLeastOnePlugin = false;
+function onFilterChange(): void {
+  filterPlugins();
+  applySort();
+  updateUrlParams();
+}
 
-  const searchValue = searchInput.value.toLowerCase();
+function onSortChange(): void {
+  applySort();
+  updateUrlParams();
+}
+
+function updateUrlParams(): void {
+  const searchValue = searchInput.value;
   const tagsValue = tagsSelect.value;
+  const sortValue = sortSelect.value;
 
   const url = new URL(window.location.href);
   if (searchValue.length > 0) {
-    url.searchParams.set("search", searchInput.value);
+    url.searchParams.set("search", searchValue);
   } else {
     url.searchParams.delete("search");
   }
@@ -141,7 +171,20 @@ function filterPlugins(): void {
     url.searchParams.delete("tags");
   }
 
+  if (allowedSortValues.includes(sortValue)) {
+    url.searchParams.set("sort", sortValue);
+  } else {
+    url.searchParams.delete("sort");
+  }
+
   history.replaceState(null, "", url);
+}
+
+function filterPlugins(): void {
+  let foundAtLeastOnePlugin = false;
+
+  const searchValue = searchInput.value.toLowerCase();
+  const tagsValue = tagsSelect.value;
 
   for (const plugin of plugins) {
     const title = plugin.querySelector(".name")!.textContent!.toLowerCase();
@@ -168,4 +211,26 @@ function filterPlugins(): void {
     notFound.style.display = "block";
   }
 }
+
+function applySort(): void {
+  const sortValue = sortSelect.value;
+
+  if (!allowedSortValues.includes(sortValue)) {
+    return;
+  }
+
+  const sortedPlugins = Array.from(plugins).sort((a, b) => {
+    const titleA = a.querySelector(".name")!.textContent!.trim().toLowerCase();
+    const titleB = b.querySelector(".name")!.textContent!.trim().toLowerCase();
+
+    if (sortValue === "name-desc") {
+      return titleB.localeCompare(titleA);
+    }
+
+    return titleA.localeCompare(titleB);
+  });
+
+  // Re-appending existing plugin nodes moves them into sorted order (no duplicates) 
+  store.append(...sortedPlugins);
+}
 </script>