From b3a7325554f94b03338e2c00b210faa6427f7842 Mon Sep 17 00:00:00 2001
From: Evgeniy Patlan <evgeniy.patlan@percona.com>
Date: Wed, 18 Mar 2026 15:22:43 +0200
Subject: [PATCH 1/3] Add package repository install instructions page

Add /download/packages/ page with interactive install instructions
for RPM, DEB, and SUSE-based Linux distributions. Includes version
and OS dropdowns, step-by-step commands, and copy-to-clipboard
functionality. Add Packages link under Download nav submenu.

Signed-off-by: Evgeniy Patlan <evgeniy.patlan@percona.com>
---
 content/download/packages/index.md |  71 ++++++
 templates/default.html             |   7 +-
 templates/packages.html            | 338 +++++++++++++++++++++++++++++
 3 files changed, 415 insertions(+), 1 deletion(-)
 create mode 100644 content/download/packages/index.md
 create mode 100644 templates/packages.html

diff --git a/content/download/packages/index.md b/content/download/packages/index.md
new file mode 100644
index 00000000..313c6105
--- /dev/null
+++ b/content/download/packages/index.md
@@ -0,0 +1,71 @@
++++
+template = "packages.html"
+title = "Package Repository"
+description = "Install Valkey on Linux using official RPM and DEB packages"
+
+[extra]
+repo_url = "https://download.valkey.io/packaging"
+gpg_key_url = "https://download.valkey.io/packaging/GPG-KEY-valkey.asc"
+
+versions = ["9.0", "8.1", "8.0"]
+
+[[extra.os_groups]]
+label = "RHEL / Oracle Linux"
+entries = [
+  { value = "el8", name = "Oracle Linux 8 / RHEL 8", type = "rpm", pkg = "dnf" },
+  { value = "el9", name = "Oracle Linux 9 / RHEL 9", type = "rpm", pkg = "dnf" },
+  { value = "el10", name = "Oracle Linux 10 / RHEL 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.os_groups]]
+label = "Rocky Linux"
+entries = [
+  { value = "rocky8", name = "Rocky Linux 8", type = "rpm", pkg = "dnf" },
+  { value = "rocky9", name = "Rocky Linux 9", type = "rpm", pkg = "dnf" },
+  { value = "rocky10", name = "Rocky Linux 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.os_groups]]
+label = "AlmaLinux"
+entries = [
+  { value = "alma8", name = "AlmaLinux 8", type = "rpm", pkg = "dnf" },
+  { value = "alma9", name = "AlmaLinux 9", type = "rpm", pkg = "dnf" },
+  { value = "alma10", name = "AlmaLinux 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.os_groups]]
+label = "Amazon Linux"
+entries = [
+  { value = "amzn2023", name = "Amazon Linux 2023", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.os_groups]]
+label = "Fedora"
+entries = [
+  { value = "fedora39", name = "Fedora 39", type = "rpm", pkg = "dnf" },
+  { value = "fedora40", name = "Fedora 40", type = "rpm", pkg = "dnf" },
+  { value = "fedora41", name = "Fedora 41", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.os_groups]]
+label = "openSUSE"
+entries = [
+  { value = "opensuse-15.5", name = "openSUSE Leap 15.5", type = "suse", pkg = "zypper" },
+  { value = "opensuse-15.6", name = "openSUSE Leap 15.6", type = "suse", pkg = "zypper" },
+]
+
+[[extra.os_groups]]
+label = "Debian"
+entries = [
+  { value = "debian11", name = "Debian 11 (Bullseye)", type = "deb", pkg = "" },
+  { value = "debian12", name = "Debian 12 (Bookworm)", type = "deb", pkg = "" },
+  { value = "debian13", name = "Debian 13 (Trixie)", type = "deb", pkg = "" },
+]
+
+[[extra.os_groups]]
+label = "Ubuntu"
+entries = [
+  { value = "ubuntu2204", name = "Ubuntu 22.04 (Jammy)", type = "deb", pkg = "" },
+  { value = "ubuntu2404", name = "Ubuntu 24.04 (Noble)", type = "deb", pkg = "" },
+]
++++
diff --git a/templates/default.html b/templates/default.html
index 715d37af..e9c4e042 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -43,7 +43,12 @@
         onclick="window.toggleHeaderMenu();"
       ></div>
       <nav role="navigation" aria-label="Main">
-        <a role="menuitem" href="/download/">Download</a>
+        <div class="has-submenu">
+          <a role="menuitem" href="/download/">Download</a>
+          <div class="submenu">
+            <a role="menuitem" href="/download/packages/">Packages</a>
+          </div>
+        </div>
 
         <div class="has-submenu">
           <a role="menuitem" href="/docs/">Documentation</a>
diff --git a/templates/packages.html b/templates/packages.html
new file mode 100644
index 00000000..427e0570
--- /dev/null
+++ b/templates/packages.html
@@ -0,0 +1,338 @@
+{% extends "fullwidth.html" %}
+
+{% block main_content %}
+<style>
+  .pkg-selector {
+    background: #f1f0fa;
+    border: 1px solid #eaeaea;
+    border-radius: 10px;
+    padding: 1.75rem;
+    margin: 0 0 2rem;
+  }
+  .pkg-selector-row {
+    display: flex;
+    gap: 1rem;
+  }
+  .pkg-selector-col {
+    flex: 1;
+  }
+  .pkg-selector label {
+    font-weight: 600;
+    display: block;
+    margin-bottom: 0.4rem;
+    font-size: 0.95rem;
+    color: #002a3a;
+  }
+  .pkg-selector select {
+    width: 100%;
+    padding: 0.6rem 0.75rem;
+    font-size: 0.95rem;
+    border: 1px solid #eaeaea;
+    border-radius: 6px;
+    background: #fff;
+    color: #1a2026;
+    appearance: auto;
+  }
+  .pkg-selector select:focus {
+    outline: none;
+    border-color: #6983ff;
+    box-shadow: 0 0 0 3px rgba(105,131,255,0.15);
+  }
+  @media (max-width: 600px) {
+    .pkg-selector-row { flex-direction: column; }
+  }
+
+  .pkg-instructions { display: none; margin-top: 1.5rem; }
+  .pkg-instructions.active { display: block; }
+
+  .pkg-instructions h2 {
+    color: #002a3a;
+    font-size: 1.4rem;
+    font-weight: 700;
+    margin-bottom: 1.25rem;
+  }
+
+  .pkg-step {
+    margin: 1.25rem 0;
+  }
+  .pkg-step-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+  .pkg-step-num {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #6983ff;
+    color: #fff;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    font-size: 0.8rem;
+    font-weight: 700;
+    margin-right: 0.6rem;
+    flex-shrink: 0;
+  }
+  .pkg-step-title {
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: #002a3a;
+  }
+
+  .pkg-instructions pre {
+    background: #1a2026;
+    color: #e0e6ed;
+    padding: 1rem 1.25rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    font-size: 0.875rem;
+    font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, monospace;
+    position: relative;
+    line-height: 1.5;
+  }
+  .pkg-instructions pre .pkg-copy-btn {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: rgba(255,255,255,0.1);
+    color: rgba(255,255,255,0.6);
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 5px;
+    padding: 0.2rem 0.6rem;
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-family: inherit;
+    transition: all 0.2s;
+  }
+  .pkg-instructions pre .pkg-copy-btn:hover {
+    background: rgba(255,255,255,0.2);
+    color: #fff;
+  }
+
+  #pkg-no-selection p {
+    color: #6b7a8d;
+    text-align: center;
+    padding: 2rem 0;
+    font-size: 1rem;
+  }
+
+  .pkg-gpg-section {
+    margin-top: 2.5rem;
+    padding-top: 2rem;
+    border-top: 1px solid #eaeaea;
+  }
+  .pkg-gpg-section h2 { margin-bottom: 0.75rem; }
+  .pkg-gpg-section p { color: #6b7a8d; }
+  .pkg-gpg-section a { color: #0053b8; text-decoration: none; }
+  .pkg-gpg-section a:hover { color: #6983ff; text-decoration: underline; }
+</style>
+
+<p>Install Valkey on your Linux distribution using official RPM and DEB packages.</p>
+
+<div class="pkg-selector">
+  <div class="pkg-selector-row">
+    <div class="pkg-selector-col">
+      <label for="version-select">Valkey version</label>
+      <select id="version-select" onchange="showInstructions()">
+        <option value="">-- Choose version --</option>
+        {% for ver in page.extra.versions %}
+        <option value="{{ ver }}">Valkey {{ ver }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="pkg-selector-col">
+      <label for="os-select">Operating system</label>
+      <select id="os-select" onchange="showInstructions()">
+        <option value="">-- Choose your OS --</option>
+        {% for group in page.extra.os_groups %}
+        <optgroup label="{{ group.label }}">
+          {% for entry in group.entries %}
+          <option value="{{ entry.value }}"
+                  data-name="{{ entry.name }}"
+                  data-type="{{ entry.type }}"
+                  data-pkg="{{ entry.pkg }}">
+            {{ entry.name }}
+          </option>
+          {% endfor %}
+        </optgroup>
+        {% endfor %}
+      </select>
+    </div>
+  </div>
+</div>
+
+<div id="pkg-no-selection" class="pkg-instructions active">
+  <p>Select a Valkey version and your operating system to get installation instructions.</p>
+</div>
+
+<div id="rpm-instructions" class="pkg-instructions">
+  <h2>Install Valkey <span class="pkg-ver-name"></span> on <span class="pkg-os-name"></span></h2>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">1</span><span class="pkg-step-title">Import the GPG signing key</span></div>
+    <pre id="rpm-step1"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">2</span><span class="pkg-step-title">Add the Valkey repository</span></div>
+    <pre id="rpm-step2"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">3</span><span class="pkg-step-title">Install Valkey</span></div>
+    <pre id="rpm-step3"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">4</span><span class="pkg-step-title">Start Valkey</span></div>
+    <pre id="rpm-step4"></pre>
+  </div>
+</div>
+
+<div id="suse-instructions" class="pkg-instructions">
+  <h2>Install Valkey <span class="pkg-ver-name"></span> on <span class="pkg-os-name"></span></h2>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">1</span><span class="pkg-step-title">Import the GPG signing key</span></div>
+    <pre id="suse-step1"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">2</span><span class="pkg-step-title">Add the Valkey repository</span></div>
+    <pre id="suse-step2"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">3</span><span class="pkg-step-title">Install Valkey</span></div>
+    <pre id="suse-step3"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">4</span><span class="pkg-step-title">Start Valkey</span></div>
+    <pre id="suse-step4"></pre>
+  </div>
+</div>
+
+<div id="deb-instructions" class="pkg-instructions">
+  <h2>Install Valkey <span class="pkg-ver-name"></span> on <span class="pkg-os-name"></span></h2>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">1</span><span class="pkg-step-title">Install prerequisites</span></div>
+    <pre id="deb-step1"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">2</span><span class="pkg-step-title">Import the GPG signing key</span></div>
+    <pre id="deb-step2"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">3</span><span class="pkg-step-title">Add the Valkey repository</span></div>
+    <pre id="deb-step3"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">4</span><span class="pkg-step-title">Install Valkey</span></div>
+    <pre id="deb-step4"></pre>
+  </div>
+  <div class="pkg-step">
+    <div class="pkg-step-header"><span class="pkg-step-num">5</span><span class="pkg-step-title">Start Valkey</span></div>
+    <pre id="deb-step5"></pre>
+  </div>
+</div>
+
+<div class="pkg-gpg-section">
+  <h2>GPG Key</h2>
+  <p>All packages are signed with our GPG key. Download the public key:
+  <a href="{{ page.extra.gpg_key_url }}">GPG-KEY-valkey.asc</a></p>
+</div>
+
+<script>
+var REPO_URL = "{{ page.extra.repo_url }}";
+
+function showInstructions() {
+  var osSel = document.getElementById("os-select");
+  var verSel = document.getElementById("version-select");
+  var os = osSel.value;
+  var ver = verSel.value;
+  var sections = document.querySelectorAll(".pkg-instructions");
+  for (var i = 0; i < sections.length; i++) sections[i].classList.remove("active");
+
+  if (!os || !ver) {
+    document.getElementById("pkg-no-selection").classList.add("active");
+    return;
+  }
+
+  var opt = osSel.selectedOptions[0];
+  var osName = opt.dataset.name;
+  var osType = opt.dataset.type;
+  var osPkg = opt.dataset.pkg;
+  var repoBase = REPO_URL + "/valkey-" + ver;
+
+  var names = document.querySelectorAll(".pkg-os-name");
+  for (var i = 0; i < names.length; i++) names[i].textContent = osName;
+  var vnames = document.querySelectorAll(".pkg-ver-name");
+  for (var i = 0; i < vnames.length; i++) vnames[i].textContent = ver;
+
+  if (osType === "rpm") {
+    document.getElementById("rpm-instructions").classList.add("active");
+    document.getElementById("rpm-step1").textContent =
+      "sudo rpm --import " + REPO_URL + "/GPG-KEY-valkey.asc";
+    document.getElementById("rpm-step2").textContent =
+      "sudo tee /etc/yum.repos.d/valkey.repo << 'EOF'\n" +
+      "[valkey]\n" +
+      "name=Valkey " + ver + " Packages for " + osName + "\n" +
+      "baseurl=" + repoBase + "/rpm/" + os + "/$basearch/\n" +
+      "enabled=1\n" +
+      "gpgcheck=1\n" +
+      "gpgkey=" + REPO_URL + "/GPG-KEY-valkey.asc\n" +
+      "EOF";
+    document.getElementById("rpm-step3").textContent =
+      "sudo " + osPkg + " makecache\nsudo " + osPkg + " install valkey";
+    document.getElementById("rpm-step4").textContent =
+      "sudo systemctl enable --now valkey";
+
+  } else if (osType === "suse") {
+    document.getElementById("suse-instructions").classList.add("active");
+    document.getElementById("suse-step1").textContent =
+      "sudo rpm --import " + REPO_URL + "/GPG-KEY-valkey.asc";
+    document.getElementById("suse-step2").textContent =
+      "sudo zypper addrepo --gpgcheck --refresh \\\n" +
+      "  " + repoBase + "/rpm/" + os + "/\\$basearch/ \\\n" +
+      "  valkey";
+    document.getElementById("suse-step3").textContent =
+      "sudo zypper refresh\nsudo zypper install valkey";
+    document.getElementById("suse-step4").textContent =
+      "sudo systemctl enable --now valkey";
+
+  } else if (osType === "deb") {
+    document.getElementById("deb-instructions").classList.add("active");
+    document.getElementById("deb-step1").textContent =
+      "sudo apt-get update\nsudo apt-get install -y curl gpg";
+    document.getElementById("deb-step2").textContent =
+      "curl -fsSL " + REPO_URL + "/GPG-KEY-valkey.asc \\\n" +
+      "  | sudo gpg --dearmor -o /usr/share/keyrings/valkey-archive-keyring.gpg";
+    document.getElementById("deb-step3").textContent =
+      "ARCH=$(dpkg --print-architecture)\n" +
+      "echo \"deb [signed-by=/usr/share/keyrings/valkey-archive-keyring.gpg] " +
+      repoBase + "/deb/" + os + "/ ${ARCH}/\" \\\n" +
+      "  | sudo tee /etc/apt/sources.list.d/valkey.list";
+    document.getElementById("deb-step4").textContent =
+      "sudo apt-get update\nsudo apt-get install -y valkey-server";
+    document.getElementById("deb-step5").textContent =
+      "sudo systemctl enable --now valkey-server";
+  }
+
+  addCopyButtons();
+}
+
+function addCopyButtons() {
+  var blocks = document.querySelectorAll(".pkg-instructions.active pre");
+  for (var i = 0; i < blocks.length; i++) {
+    var existing = blocks[i].querySelector(".pkg-copy-btn");
+    if (existing) existing.remove();
+    var btn = document.createElement("button");
+    btn.className = "pkg-copy-btn";
+    btn.textContent = "Copy";
+    btn.onclick = (function(pre) {
+      return function() {
+        navigator.clipboard.writeText(pre.textContent.replace("Copy", "").trim());
+        this.textContent = "Copied!";
+        var b = this;
+        setTimeout(function() { b.textContent = "Copy"; }, 2000);
+      };
+    })(blocks[i]);
+    blocks[i].appendChild(btn);
+  }
+}
+</script>
+{% endblock main_content %}

From b27f23466ffd8f127b8278968ca4be548cadd25a Mon Sep 17 00:00:00 2001
From: Evgeniy Patlan <evgeniy.patlan@percona.com>
Date: Wed, 18 Mar 2026 15:35:23 +0200
Subject: [PATCH 2/3] Fix URL escaping in packages template

Add Tera safe filter to repo_url and gpg_key_url outputs to prevent
HTML entity encoding of forward slashes in generated URLs.

Signed-off-by: Evgeniy Patlan <evgeniy.patlan@percona.com>
---
 templates/packages.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/packages.html b/templates/packages.html
index 427e0570..12290b72 100644
--- a/templates/packages.html
+++ b/templates/packages.html
@@ -233,11 +233,11 @@ <h2>Install Valkey <span class="pkg-ver-name"></span> on <span class="pkg-os-nam
 <div class="pkg-gpg-section">
   <h2>GPG Key</h2>
   <p>All packages are signed with our GPG key. Download the public key:
-  <a href="{{ page.extra.gpg_key_url }}">GPG-KEY-valkey.asc</a></p>
+  <a href="{{ page.extra.gpg_key_url | safe }}">GPG-KEY-valkey.asc</a></p>
 </div>
 
 <script>
-var REPO_URL = "{{ page.extra.repo_url }}";
+var REPO_URL = "{{ page.extra.repo_url | safe }}";
 
 function showInstructions() {
   var osSel = document.getElementById("os-select");

From 167d8f9f210fa0d89ea663febf817287018a9209 Mon Sep 17 00:00:00 2001
From: Evgeniy Patlan <evgeniy.patlan@percona.com>
Date: Mon, 27 Apr 2026 21:49:57 +0300
Subject: [PATCH 3/3] Scope packages-page OS matrix per Valkey version and fix
 font sizing

Restructure the packages page so each Valkey version owns its own list
of supported operating systems instead of sharing a single global list.
A new distro added for a future release (e.g. AlmaLinux 11 in 9.1) no
longer surfaces under older versions where it was never built.

The OS dropdown is now rebuilt from the selected version's matrix and
preserves the previous selection when it remains valid; an empty matrix
falls back to a "no packages available" message.

Also fix the inline CSS unit base. The site sets html { font-size: 10px }
in sass/_valkey.scss, so the original rem values rendered the page text
about 1.6x smaller than intended. All rem values in the page-local style
block are rescaled against the 10px base, restoring the intended sizes.

Signed-off-by: Evgeniy Patlan <evgeniy.patlan@percona.com>
---
 content/download/packages/index.md | 150 +++++++++++++++++++++++++++--
 templates/packages.html            | 134 +++++++++++++++++---------
 2 files changed, 231 insertions(+), 53 deletions(-)

diff --git a/content/download/packages/index.md b/content/download/packages/index.md
index 313c6105..b7eab837 100644
--- a/content/download/packages/index.md
+++ b/content/download/packages/index.md
@@ -7,9 +7,141 @@ description = "Install Valkey on Linux using official RPM and DEB packages"
 repo_url = "https://download.valkey.io/packaging"
 gpg_key_url = "https://download.valkey.io/packaging/GPG-KEY-valkey.asc"
 
-versions = ["9.0", "8.1", "8.0"]
+# Each Valkey version owns its own OS matrix so a distro added for a future
+# release can't accidentally appear under older versions.
 
-[[extra.os_groups]]
+[[extra.versions]]
+name = "9.0"
+
+[[extra.versions.os_groups]]
+label = "RHEL / Oracle Linux"
+entries = [
+  { value = "el8", name = "Oracle Linux 8 / RHEL 8", type = "rpm", pkg = "dnf" },
+  { value = "el9", name = "Oracle Linux 9 / RHEL 9", type = "rpm", pkg = "dnf" },
+  { value = "el10", name = "Oracle Linux 10 / RHEL 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "Rocky Linux"
+entries = [
+  { value = "rocky8", name = "Rocky Linux 8", type = "rpm", pkg = "dnf" },
+  { value = "rocky9", name = "Rocky Linux 9", type = "rpm", pkg = "dnf" },
+  { value = "rocky10", name = "Rocky Linux 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "AlmaLinux"
+entries = [
+  { value = "alma8", name = "AlmaLinux 8", type = "rpm", pkg = "dnf" },
+  { value = "alma9", name = "AlmaLinux 9", type = "rpm", pkg = "dnf" },
+  { value = "alma10", name = "AlmaLinux 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "Amazon Linux"
+entries = [
+  { value = "amzn2023", name = "Amazon Linux 2023", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "Fedora"
+entries = [
+  { value = "fedora39", name = "Fedora 39", type = "rpm", pkg = "dnf" },
+  { value = "fedora40", name = "Fedora 40", type = "rpm", pkg = "dnf" },
+  { value = "fedora41", name = "Fedora 41", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "openSUSE"
+entries = [
+  { value = "opensuse-15.5", name = "openSUSE Leap 15.5", type = "suse", pkg = "zypper" },
+  { value = "opensuse-15.6", name = "openSUSE Leap 15.6", type = "suse", pkg = "zypper" },
+]
+
+[[extra.versions.os_groups]]
+label = "Debian"
+entries = [
+  { value = "debian11", name = "Debian 11 (Bullseye)", type = "deb", pkg = "" },
+  { value = "debian12", name = "Debian 12 (Bookworm)", type = "deb", pkg = "" },
+  { value = "debian13", name = "Debian 13 (Trixie)", type = "deb", pkg = "" },
+]
+
+[[extra.versions.os_groups]]
+label = "Ubuntu"
+entries = [
+  { value = "ubuntu2204", name = "Ubuntu 22.04 (Jammy)", type = "deb", pkg = "" },
+  { value = "ubuntu2404", name = "Ubuntu 24.04 (Noble)", type = "deb", pkg = "" },
+]
+
+
+[[extra.versions]]
+name = "8.1"
+
+[[extra.versions.os_groups]]
+label = "RHEL / Oracle Linux"
+entries = [
+  { value = "el8", name = "Oracle Linux 8 / RHEL 8", type = "rpm", pkg = "dnf" },
+  { value = "el9", name = "Oracle Linux 9 / RHEL 9", type = "rpm", pkg = "dnf" },
+  { value = "el10", name = "Oracle Linux 10 / RHEL 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "Rocky Linux"
+entries = [
+  { value = "rocky8", name = "Rocky Linux 8", type = "rpm", pkg = "dnf" },
+  { value = "rocky9", name = "Rocky Linux 9", type = "rpm", pkg = "dnf" },
+  { value = "rocky10", name = "Rocky Linux 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "AlmaLinux"
+entries = [
+  { value = "alma8", name = "AlmaLinux 8", type = "rpm", pkg = "dnf" },
+  { value = "alma9", name = "AlmaLinux 9", type = "rpm", pkg = "dnf" },
+  { value = "alma10", name = "AlmaLinux 10", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "Amazon Linux"
+entries = [
+  { value = "amzn2023", name = "Amazon Linux 2023", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "Fedora"
+entries = [
+  { value = "fedora39", name = "Fedora 39", type = "rpm", pkg = "dnf" },
+  { value = "fedora40", name = "Fedora 40", type = "rpm", pkg = "dnf" },
+  { value = "fedora41", name = "Fedora 41", type = "rpm", pkg = "dnf" },
+]
+
+[[extra.versions.os_groups]]
+label = "openSUSE"
+entries = [
+  { value = "opensuse-15.5", name = "openSUSE Leap 15.5", type = "suse", pkg = "zypper" },
+  { value = "opensuse-15.6", name = "openSUSE Leap 15.6", type = "suse", pkg = "zypper" },
+]
+
+[[extra.versions.os_groups]]
+label = "Debian"
+entries = [
+  { value = "debian11", name = "Debian 11 (Bullseye)", type = "deb", pkg = "" },
+  { value = "debian12", name = "Debian 12 (Bookworm)", type = "deb", pkg = "" },
+  { value = "debian13", name = "Debian 13 (Trixie)", type = "deb", pkg = "" },
+]
+
+[[extra.versions.os_groups]]
+label = "Ubuntu"
+entries = [
+  { value = "ubuntu2204", name = "Ubuntu 22.04 (Jammy)", type = "deb", pkg = "" },
+  { value = "ubuntu2404", name = "Ubuntu 24.04 (Noble)", type = "deb", pkg = "" },
+]
+
+
+[[extra.versions]]
+name = "8.0"
+
+[[extra.versions.os_groups]]
 label = "RHEL / Oracle Linux"
 entries = [
   { value = "el8", name = "Oracle Linux 8 / RHEL 8", type = "rpm", pkg = "dnf" },
@@ -17,7 +149,7 @@ entries = [
   { value = "el10", name = "Oracle Linux 10 / RHEL 10", type = "rpm", pkg = "dnf" },
 ]
 
-[[extra.os_groups]]
+[[extra.versions.os_groups]]
 label = "Rocky Linux"
 entries = [
   { value = "rocky8", name = "Rocky Linux 8", type = "rpm", pkg = "dnf" },
@@ -25,7 +157,7 @@ entries = [
   { value = "rocky10", name = "Rocky Linux 10", type = "rpm", pkg = "dnf" },
 ]
 
-[[extra.os_groups]]
+[[extra.versions.os_groups]]
 label = "AlmaLinux"
 entries = [
   { value = "alma8", name = "AlmaLinux 8", type = "rpm", pkg = "dnf" },
@@ -33,13 +165,13 @@ entries = [
   { value = "alma10", name = "AlmaLinux 10", type = "rpm", pkg = "dnf" },
 ]
 
-[[extra.os_groups]]
+[[extra.versions.os_groups]]
 label = "Amazon Linux"
 entries = [
   { value = "amzn2023", name = "Amazon Linux 2023", type = "rpm", pkg = "dnf" },
 ]
 
-[[extra.os_groups]]
+[[extra.versions.os_groups]]
 label = "Fedora"
 entries = [
   { value = "fedora39", name = "Fedora 39", type = "rpm", pkg = "dnf" },
@@ -47,14 +179,14 @@ entries = [
   { value = "fedora41", name = "Fedora 41", type = "rpm", pkg = "dnf" },
 ]
 
-[[extra.os_groups]]
+[[extra.versions.os_groups]]
 label = "openSUSE"
 entries = [
   { value = "opensuse-15.5", name = "openSUSE Leap 15.5", type = "suse", pkg = "zypper" },
   { value = "opensuse-15.6", name = "openSUSE Leap 15.6", type = "suse", pkg = "zypper" },
 ]
 
-[[extra.os_groups]]
+[[extra.versions.os_groups]]
 label = "Debian"
 entries = [
   { value = "debian11", name = "Debian 11 (Bullseye)", type = "deb", pkg = "" },
@@ -62,7 +194,7 @@ entries = [
   { value = "debian13", name = "Debian 13 (Trixie)", type = "deb", pkg = "" },
 ]
 
-[[extra.os_groups]]
+[[extra.versions.os_groups]]
 label = "Ubuntu"
 entries = [
   { value = "ubuntu2204", name = "Ubuntu 22.04 (Jammy)", type = "deb", pkg = "" },
diff --git a/templates/packages.html b/templates/packages.html
index 12290b72..f14982af 100644
--- a/templates/packages.html
+++ b/templates/packages.html
@@ -2,16 +2,18 @@
 
 {% block main_content %}
 <style>
+  /* Note: this site sets html { font-size: 10px } in sass/_valkey.scss,
+     so 1rem = 10px here. All rem values below are sized against that base. */
   .pkg-selector {
     background: #f1f0fa;
     border: 1px solid #eaeaea;
     border-radius: 10px;
-    padding: 1.75rem;
-    margin: 0 0 2rem;
+    padding: 2.8rem;
+    margin: 0 0 3.2rem;
   }
   .pkg-selector-row {
     display: flex;
-    gap: 1rem;
+    gap: 1.6rem;
   }
   .pkg-selector-col {
     flex: 1;
@@ -19,14 +21,14 @@
   .pkg-selector label {
     font-weight: 600;
     display: block;
-    margin-bottom: 0.4rem;
-    font-size: 0.95rem;
+    margin-bottom: 0.6rem;
+    font-size: 1.5rem;
     color: #002a3a;
   }
   .pkg-selector select {
     width: 100%;
-    padding: 0.6rem 0.75rem;
-    font-size: 0.95rem;
+    padding: 1rem 1.2rem;
+    font-size: 1.5rem;
     border: 1px solid #eaeaea;
     border-radius: 6px;
     background: #fff;
@@ -42,23 +44,23 @@
     .pkg-selector-row { flex-direction: column; }
   }
 
-  .pkg-instructions { display: none; margin-top: 1.5rem; }
+  .pkg-instructions { display: none; margin-top: 2.4rem; }
   .pkg-instructions.active { display: block; }
 
   .pkg-instructions h2 {
     color: #002a3a;
-    font-size: 1.4rem;
+    font-size: 2.2rem;
     font-weight: 700;
-    margin-bottom: 1.25rem;
+    margin-bottom: 2rem;
   }
 
   .pkg-step {
-    margin: 1.25rem 0;
+    margin: 2rem 0;
   }
   .pkg-step-header {
     display: flex;
     align-items: center;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.8rem;
   }
   .pkg-step-num {
     display: inline-flex;
@@ -66,42 +68,42 @@
     justify-content: center;
     background: #6983ff;
     color: #fff;
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 2.4rem;
+    height: 2.4rem;
     border-radius: 50%;
-    font-size: 0.8rem;
+    font-size: 1.3rem;
     font-weight: 700;
-    margin-right: 0.6rem;
+    margin-right: 1rem;
     flex-shrink: 0;
   }
   .pkg-step-title {
     font-weight: 600;
-    font-size: 0.95rem;
+    font-size: 1.5rem;
     color: #002a3a;
   }
 
   .pkg-instructions pre {
     background: #1a2026;
     color: #e0e6ed;
-    padding: 1rem 1.25rem;
+    padding: 1.6rem 2rem;
     border-radius: 8px;
     overflow-x: auto;
-    font-size: 0.875rem;
+    font-size: 1.4rem;
     font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, monospace;
     position: relative;
     line-height: 1.5;
   }
   .pkg-instructions pre .pkg-copy-btn {
     position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
+    top: 0.8rem;
+    right: 0.8rem;
     background: rgba(255,255,255,0.1);
     color: rgba(255,255,255,0.6);
     border: 1px solid rgba(255,255,255,0.15);
     border-radius: 5px;
-    padding: 0.2rem 0.6rem;
+    padding: 0.3rem 1rem;
     cursor: pointer;
-    font-size: 0.75rem;
+    font-size: 1.2rem;
     font-family: inherit;
     transition: all 0.2s;
   }
@@ -110,19 +112,20 @@
     color: #fff;
   }
 
-  #pkg-no-selection p {
+  #pkg-no-selection p,
+  #pkg-no-packages p {
     color: #6b7a8d;
     text-align: center;
-    padding: 2rem 0;
-    font-size: 1rem;
+    padding: 3.2rem 0;
+    font-size: 1.6rem;
   }
 
   .pkg-gpg-section {
-    margin-top: 2.5rem;
-    padding-top: 2rem;
+    margin-top: 4rem;
+    padding-top: 3.2rem;
     border-top: 1px solid #eaeaea;
   }
-  .pkg-gpg-section h2 { margin-bottom: 0.75rem; }
+  .pkg-gpg-section h2 { margin-bottom: 1.2rem; }
   .pkg-gpg-section p { color: #6b7a8d; }
   .pkg-gpg-section a { color: #0053b8; text-decoration: none; }
   .pkg-gpg-section a:hover { color: #6983ff; text-decoration: underline; }
@@ -134,29 +137,17 @@
   <div class="pkg-selector-row">
     <div class="pkg-selector-col">
       <label for="version-select">Valkey version</label>
-      <select id="version-select" onchange="showInstructions()">
+      <select id="version-select" onchange="onVersionChange()">
         <option value="">-- Choose version --</option>
         {% for ver in page.extra.versions %}
-        <option value="{{ ver }}">Valkey {{ ver }}</option>
+        <option value="{{ ver.name }}">Valkey {{ ver.name }}</option>
         {% endfor %}
       </select>
     </div>
     <div class="pkg-selector-col">
       <label for="os-select">Operating system</label>
-      <select id="os-select" onchange="showInstructions()">
+      <select id="os-select" onchange="showInstructions()" disabled>
         <option value="">-- Choose your OS --</option>
-        {% for group in page.extra.os_groups %}
-        <optgroup label="{{ group.label }}">
-          {% for entry in group.entries %}
-          <option value="{{ entry.value }}"
-                  data-name="{{ entry.name }}"
-                  data-type="{{ entry.type }}"
-                  data-pkg="{{ entry.pkg }}">
-            {{ entry.name }}
-          </option>
-          {% endfor %}
-        </optgroup>
-        {% endfor %}
       </select>
     </div>
   </div>
@@ -166,6 +157,10 @@
   <p>Select a Valkey version and your operating system to get installation instructions.</p>
 </div>
 
+<div id="pkg-no-packages" class="pkg-instructions">
+  <p>No packages are available for the selected Valkey version yet.</p>
+</div>
+
 <div id="rpm-instructions" class="pkg-instructions">
   <h2>Install Valkey <span class="pkg-ver-name"></span> on <span class="pkg-os-name"></span></h2>
   <div class="pkg-step">
@@ -238,6 +233,57 @@ <h2>GPG Key</h2>
 
 <script>
 var REPO_URL = "{{ page.extra.repo_url | safe }}";
+var PKG_VERSIONS = {{ page.extra.versions | json_encode | safe }};
+var PKG_VERSION_MAP = {};
+for (var i = 0; i < PKG_VERSIONS.length; i++) {
+  PKG_VERSION_MAP[PKG_VERSIONS[i].name] = PKG_VERSIONS[i];
+}
+
+function onVersionChange() {
+  var verSel = document.getElementById("version-select");
+  var osSel = document.getElementById("os-select");
+  var ver = verSel.value;
+  var prevOs = osSel.value;
+
+  // Reset OS dropdown.
+  osSel.innerHTML = '<option value="">-- Choose your OS --</option>';
+  osSel.disabled = true;
+
+  if (!ver) {
+    showInstructions();
+    return;
+  }
+
+  var verData = PKG_VERSION_MAP[ver];
+  var groups = verData && verData.os_groups ? verData.os_groups : [];
+  if (groups.length === 0) {
+    var sections = document.querySelectorAll(".pkg-instructions");
+    for (var s = 0; s < sections.length; s++) sections[s].classList.remove("active");
+    document.getElementById("pkg-no-packages").classList.add("active");
+    return;
+  }
+
+  for (var g = 0; g < groups.length; g++) {
+    var optgroup = document.createElement("optgroup");
+    optgroup.label = groups[g].label;
+    var entries = groups[g].entries || [];
+    for (var e = 0; e < entries.length; e++) {
+      var entry = entries[e];
+      var opt = document.createElement("option");
+      opt.value = entry.value;
+      opt.dataset.name = entry.name;
+      opt.dataset.type = entry.type;
+      opt.dataset.pkg = entry.pkg || "";
+      opt.textContent = entry.name;
+      if (entry.value === prevOs) opt.selected = true;
+      optgroup.appendChild(opt);
+    }
+    osSel.appendChild(optgroup);
+  }
+  osSel.disabled = false;
+
+  showInstructions();
+}
 
 function showInstructions() {
   var osSel = document.getElementById("os-select");