feat(website): multiple recommended downloads for better fit

This commit is contained in:
Elian Doran
2025-09-27 16:39:10 +03:00
parent 9919d0cbfa
commit b99f5b2cbe
3 changed files with 21 additions and 9 deletions

View File

@@ -70,7 +70,8 @@ export const downloadMatrix: DownloadMatrix = {
name: "Download .deb" name: "Download .deb"
}, },
rpm: { rpm: {
name: ".rpm" recommended: true,
name: "Download .rpm"
}, },
flatpak: { flatpak: {
name: ".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`, url: `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-Server-v${version}-linux-x64.tar.xz`,
}, },
tarArm64: { tarArm64: {
recommended: true,
name: "ARM (.tar.xz)", name: "ARM (.tar.xz)",
url: `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-Server-v${version}-linux-arm64.tar.xz` url: `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-Server-v${version}-linux-arm64.tar.xz`
}, },

View File

@@ -32,13 +32,19 @@
flex-direction: column; flex-direction: column;
} }
.download-options .recommended-options {
align-self: stretch;
display: flex;
gap: 1em;
}
.download-options a.recommended { .download-options a.recommended {
display: block; display: block;
background: var(--accent-color); background: var(--accent-color);
color: var(--brand-foreground-color); color: var(--brand-foreground-color);
border-radius: calc(infinity * 1px); border-radius: calc(infinity * 1px);
margin: 1em 0; margin: 1em 0;
align-self: stretch; flex-grow: 1;
} }
.download-options .other-options { .download-options .other-options {

View File

@@ -49,7 +49,7 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
} }
const allDownloads = Object.entries(entry.downloads); 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); const restDownloads = allDownloads.filter(download => !download[1].recommended);
return ( return (
@@ -74,12 +74,16 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
)} )}
<div class="download-options"> <div class="download-options">
<Button <div className="recommended-options">
className="recommended" {recommendedDownloads.map(recommendedDownload => (
href={buildDownloadUrl(app, platform as Platform, recommendedDownload[0], arch)} <Button
text={recommendedDownload[1].name} className="recommended"
openExternally={!!recommendedDownload[1].url} href={buildDownloadUrl(app, platform as Platform, recommendedDownload[0], arch)}
/> text={recommendedDownload[1].name}
openExternally={!!recommendedDownload[1].url}
/>
))}
</div>
<div class="other-options"> <div class="other-options">
{restDownloads.map(download => ( {restDownloads.map(download => (