From 3f7ef1b238f5e0c257e77955a7a52b965521999a Mon Sep 17 00:00:00 2001
From: Jonathan Lebon <jonathan@jlebon.com>
Date: Mar 30 2020 20:51:28 +0000
Subject: [PATCH 1/2] coreos: add pretty label for 4k native raw image


---

diff --git a/sites/static/js/coreos-download.js b/sites/static/js/coreos-download.js
index 7eab9ad..996d756 100644
--- a/sites/static/js/coreos-download.js
+++ b/sites/static/js/coreos-download.js
@@ -20,6 +20,7 @@ const prettyPlatforms = {
   "aliyun": "Alibaba Cloud",
   "metal": {
     "raw.xz": "Raw",
+    "4k.raw.xz": "Raw (4k Native)",
     "iso": "ISO",
     "pxe": "PXE",
     "installer.iso": "Installer (ISO)",

From 2cf18e6a4af4314c98b53393103fea7604ddefd9 Mon Sep 17 00:00:00 2001
From: Jonathan Lebon <jonathan@jlebon.com>
Date: Mar 30 2020 21:27:46 +0000
Subject: [PATCH 2/2] coreos: sort entries by pretty name


Use the pretty name for sorting the entries instead of by the underlying
format name.

This makes e.g. `Raw (4k Native)` appear close to `Raw` instead of at
the very top (due to its format being `4k.raw.xz` which ranks higher
than e.g. `iso` but lower than `raw.xz`).

---

diff --git a/sites/static/js/coreos-download.js b/sites/static/js/coreos-download.js
index 996d756..a8bcd78 100644
--- a/sites/static/js/coreos-download.js
+++ b/sites/static/js/coreos-download.js
@@ -280,8 +280,18 @@ var coreos_download_app = new Vue({
         const release = getMember(artifacts[platform], "release");
         const formats = getMember(artifacts[platform], "formats");
         if (formats) {
+          prettyFormats = [];
+          // in the case where each individual format has a separate pretty
+          // name, we want the artifacts listed in alphabetical order
           for (var format in formats) {
-            const prettyPlatform = getPrettyPlatform(platform, format);
+              pretty = getPrettyPlatform(getPrettyPlatform(platform, format));
+              prettyFormats.push({format: format, pretty: pretty});
+          }
+          prettyFormats.sort(function(a, b) { return a.pretty.localeCompare(b.pretty); });
+          for (i = 0; i < prettyFormats.length; i++) {
+            const format = prettyFormats[i].format;
+            const prettyPlatform = prettyFormats[i].pretty;
+
             // XXX: the conditions to display the extension here are quickly
             // hacked in; if adding any further conditions this should be
             // handled elsewhere in a better organized structure.