git: fa21b47ba1 - main - ports.cgi: enable to sort pkg result list by column

The branch main has been updated by wosch:

URL: https://cgit.FreeBSD.org/doc/commit/?id=fa21b47ba15a5ef0dca51e49effe1792d723298a

commit fa21b47ba15a5ef0dca51e49effe1792d723298a
Author:     Wolfram Schneider <wosch@FreeBSD.org>
AuthorDate: 2026-02-01 16:15:08 +0000
Commit:     Wolfram Schneider <wosch@FreeBSD.org>
CommitDate: 2026-02-01 16:15:08 +0000

    ports.cgi: enable to sort pkg result list by column
    
    You can sort the pkg result table in asc or desc order
    by clicking on the column header Release, Version
    or Build Time.
---
 website/content/en/cgi/ports.cgi | 58 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/website/content/en/cgi/ports.cgi b/website/content/en/cgi/ports.cgi
index ab61799190..ec920242da 100755
--- a/website/content/en/cgi/ports.cgi
+++ b/website/content/en/cgi/ports.cgi
@@ -53,11 +53,55 @@ a:link  { text-decoration:none; }
 a:hover { text-decoration:underline; }
 table, th, td { border: 1px solid black; border-collapse: collapse; }
 th, td { padding-left: 0.5em; padding-right: 0.5em; }
+
+span#noscript { color: red; font-size: normal; font-weight: bold; }
 </style>
 
 <link rel="search" type="application/opensearchdescription+xml" href="https://www.freebsd.org/opensearch/ports.xml" title="FreeBSD Ports" />
 `;
 
+my $no_javascript_warning = <<'EOF';
+<span id="noscript">
+<noscript>
+<p>Please enable JavaScript in your browser for sorting columns. Thanks!</p>
+</noscript>
+</span>
+EOF
+
+my $pkg_javascript = <<'EOF';
+
+<script type="text/javascript">
+let sort_directions = {}; // remember asc/desc per column
+
+function sort_table(column_index) {
+    const table = document.getElementById("pkg-result");
+    const tbody = table.tBodies[0];
+    const rows = Array.from(tbody.rows);
+
+    // toggle direction
+    const current = sort_directions[column_index] || "asc";
+    const direction = current === "asc" ? "desc" : "asc";
+    sort_directions[column_index] = direction;
+
+    rows.sort((a, b) => {
+        const a_text = a.cells[column_index].textContent.trim();
+        const b_text = b.cells[column_index].textContent.trim();
+
+        cmp = a_text.localeCompare(b_text, undefined, {
+            numeric: true,
+            sensitivity: "base"
+        });
+
+        return direction === "asc" ? cmp : -cmp;
+    });
+
+    // re-append in sorted order
+    rows.forEach(row => tbody.appendChild(row));
+}
+</script>
+
+EOF
+
 # No unlimited result set. A HTML page with 1000 results can be 10MB big.
 my $max_hits         = 1000;
 my $max_hits_default = 250;
@@ -359,6 +403,7 @@ sub package_links {
             die join( " ", @system ) . " $!\n";
         }
     }
+
     binmode( PKG_IN, ":bytes" );
 
     my $hash;
@@ -379,6 +424,7 @@ sub package_links {
         }
 
         if ( $. == 1 ) {
+
             print qq[<h2>$perl->{"name"}: $perl->{"comment"}</h2>\n];
 
             print qq[homepage: <a href="], $perl->{"www"},
@@ -392,10 +438,18 @@ sub package_links {
             print qq[<h3>Description</h3>\n];
             print "<pre>", $perl->{"desc"}, "</pre>\n";
             print qq[<h3>Download packages in *.pkg format</h3>\n];
-            print qq{<table>\n};
+
+            print $no_javascript_warning, $pkg_javascript;
+            print qq{<table id="pkg-result">\n};
             print qq{<thead>\n};
+            print qq{<tr>\n};
+            print
+qq{ <th onclick="sort_table(0)" title="click to sort asc/desc by release">Release &lt;&gt;</th>\n};
+            print
+qq{ <th onclick="sort_table(1)" title="click to sort asc/desc by version">Version &lt;&gt;</th>\n};
             print
-qq{<tr><th>Release</th><th>Version</th><th>Build Time</th></tr>\n};
+qq{ <th onclick="sort_table(2)" title="click to sort asc/desc by build time">Build Time &lt;&gt;</th>\n};
+            print qq{</tr>\n};
             print qq{</thead>\n};
             print qq{<tbody>\n};
         }