feat(website/download): reorganize desktop downloads

This commit is contained in:
Elian Doran 2025-06-14 16:26:40 +03:00
parent cf47abe849
commit 45a053dfbf
No known key found for this signature in database
5 changed files with 94 additions and 83 deletions

View File

@ -10,10 +10,12 @@ export function buildDesktopDownloadUrl(platform: Platform, format: string, arch
return `https://github.com/TriliumNext/Notes/releases/download/${version}/TriliumNextNotes-${version}-${platform}-${architecture}.${format}`; return `https://github.com/TriliumNext/Notes/releases/download/${version}/TriliumNextNotes-${version}-${platform}-${architecture}.${format}`;
} }
// Keep compatibility info inline with https://github.com/electron/electron/blob/main/README.md#platform-support.
export const downloadMatrix = { export const downloadMatrix = {
desktop: { desktop: {
windows: { windows: {
title: "Windows", title: "Windows",
description: "Compatible with Windows 10 and 11.",
downloads: { downloads: {
exe: { exe: {
recommended: true, recommended: true,
@ -26,15 +28,17 @@ export const downloadMatrix = {
}, },
linux: { linux: {
title: "Linux", title: "Linux",
description: "Runs on most major distributions.",
downloads: { downloads: {
deb: { deb: {
name: "Debian/Ubuntu (.deb)" recommended: true,
name: ".deb"
}, },
rpm: { rpm: {
name: "Red Hat-based distributions (.rpm)" name: ".rpm"
}, },
flatpak: { flatpak: {
name: "Flatpak (.flatpak)" name: ".flatpak"
}, },
zip: { zip: {
name: "Portable (.zip)" name: "Portable (.zip)"
@ -43,6 +47,7 @@ export const downloadMatrix = {
}, },
macos: { macos: {
title: "macOS", title: "macOS",
description: "Works on macOS Big Sur and up.",
downloads: { downloads: {
dmg: { dmg: {
recommended: true, recommended: true,

View File

@ -8,3 +8,7 @@
<Header /> <Header />
{@render children()} {@render children()}
<footer class="container mx-auto bg-white mt-2 py-6 text-sm text-center text-gray-500">
&copy; 2024-2025 <a href="https://github.com/eliandoran" class="text-blue-500 hover:underline">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors" class="text-blue-500 hover:underline">team</a>. <br/> &copy; 2017-2024 <a href="https://github.com/zadam" class="text-blue-500 hover:underline">Adam Zivner</a>.
</footer>

View File

@ -143,7 +143,3 @@
</div> </div>
</div> </div>
</section> </section>
<footer class="container mx-auto bg-white mt-2 py-6 text-sm text-center text-gray-500">
&copy; 2024-2025 <a href="https://github.com/eliandoran" class="text-blue-500 hover:underline">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors" class="text-blue-500 hover:underline">team</a>. <br/> &copy; 2017-2024 <a href="https://github.com/zadam" class="text-blue-500 hover:underline">Adam Zivner</a>.
</footer>

View File

@ -6,8 +6,9 @@
let architecture = getArchitecture(); let architecture = getArchitecture();
</script> </script>
<section class="mt-20 max-w-6xl mx-auto px-4"> <div class="bg-gray-50 py-20">
<h2 class="text-3xl font-bold text-center mb-12">Desktop application</h2> <section class="max-w-6xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center text-gray-900 mb-12">Download the desktop application</h2>
<!-- Architecture pill selector --> <!-- Architecture pill selector -->
<div class="col-span-3 flex justify-center items-center gap-3 mb-6"> <div class="col-span-3 flex justify-center items-center gap-3 mb-6">
@ -26,20 +27,24 @@
<div class="grid md:grid-cols-3 gap-10"> <div class="grid md:grid-cols-3 gap-10">
{#each Object.entries(downloadMatrix.desktop) as [platformId, platform]} {#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
<div class="bg-white rounded-xl shadow overflow-hidden"> {@const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended)}
<div class="p-6"> {@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800")}
<h3 class="text-xl font-semibold mb-2">{platform.title} ({architecture})</h3> {@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
<div class="flex flex-wrap gap-y-2"> {@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
{#each Object.entries(platform.downloads) as [format, download]}
<a href={buildDesktopDownloadUrl(platformId as Platform, format, architecture)} class={ <div class="bg-white border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
download.recommended <h3 class="text-2xl font-semibold {textColor} mb-2">{platform.title} ({architecture})</h3>
? "py-2 px-5 bg-violet-600 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75 grow" <p class="text-gray-700 mb-12">{platform.description}</p>
: "py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" <div class="space-y-2 mt-auto w-full">
}> {#if recommended}
{download.name} <a href={buildDesktopDownloadUrl(platformId as Platform, recommended[0], architecture)} class="mt-auto block text-center {bgColor} {hoverColor} text-white font-medium py-2 px-5 rounded-full shadow transition">
{#if download.recommended} Download {recommended[1].name}
<span class="text-sm text-gray-300 ml-2">Recommended</span> </a>
{/if} {/if}
<div class="flex justify-center gap-4 text-sm {textColor} mt-2">
{#each Object.entries(platform.downloads).filter((e) => !e[1].recommended) as [format, download]}
<a href={buildDesktopDownloadUrl(platformId as Platform, format, architecture)} class="hover:underline block">
{download.name}
</a> </a>
{/each} {/each}
</div> </div>
@ -84,3 +89,5 @@
</div> </div>
</div> </div>
</section> </section>
</div>

View File

@ -2,7 +2,7 @@
import DownloadNow from "./download-now.svelte"; import DownloadNow from "./download-now.svelte";
</script> </script>
<header class="header bg-white sticky top-0 z-50"> <header class="header bg-white sticky top-0 z-50 shadow">
<div class="container mx-auto flex items-center py-5"> <div class="container mx-auto flex items-center py-5">
<a href="/" class="flex items-center gap-x-2 w-100"> <a href="/" class="flex items-center gap-x-2 w-100">
<img src="icon-color.svg" alt="Trilium Notes Logo" class="w-10 h-10"> <img src="icon-color.svg" alt="Trilium Notes Logo" class="w-10 h-10">
@ -12,10 +12,9 @@
<div class="group w-full"> <div class="group w-full">
<nav class="header-nav"> <nav class="header-nav">
<ul class="flex items-center justify-end gap-4"> <ul class="flex items-center justify-end gap-4">
<li><a href="/">Home</a></li> <li><a href="/">User Guide</a></li>
<li><a href="/about">About</a></li> <li><a href="/">Technical Guide</a></li>
<li><a href="/services">Services</a></li> <li><a href="/" class="text-violet-500">Support us</a></li>
<li><a href="/contact">Contact</a></li>
<li><DownloadNow /></li> <li><DownloadNow /></li>
</ul> </ul>
</nav> </nav>