From b99f5b2cbea9a1b146eecfd41dc116e441250ad4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 16:39:10 +0300
Subject: [PATCH] feat(website): multiple recommended downloads for better fit

---
 apps/website/src/download-helper.ts          |  4 +++-
 apps/website/src/pages/Download/download.css |  8 +++++++-
 apps/website/src/pages/Download/download.tsx | 18 +++++++++++-------
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/website/src/download-helper.ts b/apps/website/src/download-helper.ts
index dec619660..fed594168 100644
--- a/apps/website/src/download-helper.ts
+++ b/apps/website/src/download-helper.ts
@@ -70,7 +70,8 @@ export const downloadMatrix: DownloadMatrix = {
                     name: "Download .deb"
                 },
                 rpm: {
-                    name: ".rpm"
+                    recommended: true,
+                    name: "Download .rpm"
                 },
                 flatpak: {
                     name: ".flatpak"
@@ -125,6 +126,7 @@ export const downloadMatrix: DownloadMatrix = {
                     url: `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-Server-v${version}-linux-x64.tar.xz`,
                 },
                 tarArm64: {
+                    recommended: true,
                     name: "ARM (.tar.xz)",
                     url: `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-Server-v${version}-linux-arm64.tar.xz`
                 },
diff --git a/apps/website/src/pages/Download/download.css b/apps/website/src/pages/Download/download.css
index bc20741c4..a174a2c65 100644
--- a/apps/website/src/pages/Download/download.css
+++ b/apps/website/src/pages/Download/download.css
@@ -32,13 +32,19 @@
     flex-direction: column;
 }
 
+.download-options .recommended-options {
+    align-self: stretch;
+    display: flex;
+    gap: 1em;
+}
+
 .download-options a.recommended {
     display: block;
     background: var(--accent-color);
     color: var(--brand-foreground-color);
     border-radius: calc(infinity * 1px);
     margin: 1em 0;
-    align-self: stretch;
+    flex-grow: 1;
 }
 
 .download-options .other-options {
diff --git a/apps/website/src/pages/Download/download.tsx b/apps/website/src/pages/Download/download.tsx
index 2a17ca70c..9b6dda1dc 100644
--- a/apps/website/src/pages/Download/download.tsx
+++ b/apps/website/src/pages/Download/download.tsx
@@ -49,7 +49,7 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
     }
 
     const allDownloads = Object.entries(entry.downloads);
-    const recommendedDownload = allDownloads.find(download => download[1].recommended);
+    const recommendedDownloads = allDownloads.filter(download => download[1].recommended);
     const restDownloads = allDownloads.filter(download => !download[1].recommended);
 
     return (
@@ -74,12 +74,16 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
             )}
 
             <div class="download-options">
-                <Button
-                    className="recommended"
-                    href={buildDownloadUrl(app, platform as Platform, recommendedDownload[0], arch)}
-                    text={recommendedDownload[1].name}
-                    openExternally={!!recommendedDownload[1].url}
-                />
+                <div className="recommended-options">
+                    {recommendedDownloads.map(recommendedDownload => (
+                        <Button
+                            className="recommended"
+                            href={buildDownloadUrl(app, platform as Platform, recommendedDownload[0], arch)}
+                            text={recommendedDownload[1].name}
+                            openExternally={!!recommendedDownload[1].url}
+                        />
+                    ))}
+                </div>
 
                 <div class="other-options">
                     {restDownloads.map(download => (