implement js functions for sorting packages

src/data/packages.json

@@ -33,7 +33,7 @@
         "maintainer": "pascal",
         "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
         "dl_count": 3,
-        "last_modified": "2022-09-27:39:15.000Z"
+        "last_modified": "2022-09-27T15:39:15.000Z"
     },
     {
         "name": "h2c",
@@ -45,7 +45,7 @@
         "maintainer": "h2o",
         "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
         "dl_count": 4,
-        "last_modified": "2022-09-25:39:15.000Z"
+        "last_modified": "2022-09-25T15:39:15.000Z"
     },
     {
         "name": "libmagic",
@@ -57,7 +57,7 @@
         "maintainer": "",
         "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
         "dl_count": 5,
-        "last_modified": "2022-09-24:39:15.000Z"
+        "last_modified": "2022-09-24T15:39:15.000Z"
     },
     {
         "name": "deno",
@@ -69,7 +69,7 @@
         "maintainer": "Ryan Dahl",
         "thumb_image_url": "/Images/package-thumb-nolabel2.jpg",
         "dl_count": 6,
-        "last_modified": "2022-09-23:39:15.000Z"
+        "last_modified": "2022-09-23T15:39:15.000Z"
     },
     {
         "name": "fontconfig",
@@ -81,7 +81,7 @@
         "maintainer": "Max Miedinger",
         "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
         "dl_count": 7,
-        "last_modified": "2022-09-22:39:15.000Z"
+        "last_modified": "2022-09-22T15:39:15.000Z"
     },
     {
         "name": "pkg-config",
@@ -93,7 +93,7 @@
         "maintainer": "pascal",
         "thumb_image_url": "/Images/package-thumb-nolabel4.jpg",
         "dl_count": 8,
-        "last_modified": "2022-09-21:39:15.000Z"
+        "last_modified": "2022-09-21T15:39:15.000Z"
     },
     {
         "name": "shared-mime-info",
@@ -105,7 +105,7 @@
         "maintainer": "Mr.Mime",
         "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
         "dl_count": 9,
-        "last_modified": "2022-09-21:39:15.000Z"
+        "last_modified": "2022-09-21T15:39:15.000Z"
     },
     {
         "name": "ttfautohint",
@@ -117,7 +117,7 @@
         "maintainer": "pascal",
         "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
         "dl_count": 10,
-        "last_modified": "2022-09-20:39:15.000Z"
+        "last_modified": "2022-09-20T15:39:15.000Z"
     },
     {
         "name": "numactl",
@@ -129,7 +129,7 @@
         "maintainer": "FSS",
         "thumb_image_url": "/Images/package-thumb-nolabel2.jpg",
         "dl_count": 11,
-        "last_modified": "2022-09-19:39:15.000Z"
+        "last_modified": "2022-09-19T15:39:15.000Z"
     },
     {
         "name": "flex",
@@ -141,6 +141,6 @@
         "maintainer": "",
         "thumb_image_url": "/Images/package-thumb-nolabel4.jpg",
         "dl_count": 12,
-        "last_modified": "2022-09-18:39:15.000Z"
+        "last_modified": "2022-09-18T15:39:15.000Z"
     }
 ]

src/layouts/partials/package-grid.html

@@ -14,7 +14,7 @@
     <!-- Start Package Grid -->
 
     <div class="row package-row black-bg g-0">
-      <div class="package-grid">
+      <div id="packageGrid" class="package-grid">
         {{ range $.Site.Data.packages }}
           {{- partial "package-thumbnail.html" .}}
         {{ end }}
@@ -90,17 +90,46 @@
 </style>
 
 <script language="javascript" type="text/javascript">
+  let sortBy = 'popularity'; // last_modified
+  let sortDirection = 'desc'; // asc
   let limit = 16;
   const packages = document.querySelectorAll('.card-thumbnail');
   const packagesCount = packages.length;
 
-  function refreshDisplayedPackages() {
+  function sortPackages() {
-    for(let i = 0; i < packagesCount; i++) {
+    const packages = document.querySelectorAll('.card-thumbnail');
-      if (i >= limit) {
+    const packagesArray = Array.from(packages);
-        packages[i].classList.add('hidden');
+    const sortedPackages = packagesArray.sort((a, b) => {
-      } else {
+      if (sortBy === 'popularity') {
-        packages[i].classList.remove('hidden');
+        const aPop = +a.dataset.popularity;
+        const bPop = +b.dataset.popularity;
+        return sortDirection === 'asc' ? aPop-bPop : bPop - aPop;
+      } else { // last_modified
+        const aDate = new Date(a.dataset.last_modified);
+        const bDate = new Date(b.dataset.last_modified);
+        return sortDirection === 'asc' ? aDate-bDate : bDate - aDate;
       }
+    });
+    const grid = document.getElementById('packageGrid');
+    for(const op of packages) {
+      op.remove();
+    }
+    for(const sp of sortedPackages) {
+      grid.appendChild(sp);
+    }
+    refreshDisplayedPackages();
+  }
+
+  function refreshDisplayedPackages() {
+    const packages = document.querySelectorAll('.card-thumbnail');
+    let i = 0;
+    for(const sp of packages) {
+      if (i >= limit) {
+        sp.classList.add('hidden');
+      } else {
+        sp.classList.remove('hidden');
+      }
+      i++;
     }
   }
 
@@ -113,6 +142,5 @@
       loadMoreSection.classList.add('hidden');
     }
   },false);
-
+  sortPackages();
-  refreshDisplayedPackages();
 </script>

src/layouts/partials/package-thumbnail.html

@@ -1,4 +1,4 @@
-<div class="card card-thumbnail" style="width: 100%" popularity="{{- .dl_count -}}" last_modified="{{- .last_modified -}}">
+<div class="card card-thumbnail" style="width: 100%" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
   <figure class="card-img-top" >
     <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
     <article class="card-thumb-label">