feat(website): multiple recommended downloads for better fit

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`
                 },

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 {

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 => (