Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 10:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(website/download): reorganize desktop downloads

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/website/src/lib/download-helper.ts
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}`;
}
// Keep compatibility info inline with https://github.com/electron/electron/blob/main/README.md#platform-support.
export const downloadMatrix = {
desktop: {
windows: {
title: "Windows",
description: "Compatible with Windows 10 and 11.",
downloads: {
exe: {
recommended: true,
@ -26,15 +28,17 @@ export const downloadMatrix = {
},
linux: {
title: "Linux",
description: "Runs on most major distributions.",
downloads: {
deb: {
name: "Debian/Ubuntu (.deb)"
recommended: true,
name: ".deb"
},
rpm: {
name: "Red Hat-based distributions (.rpm)"
name: ".rpm"
},
flatpak: {
name: "Flatpak (.flatpak)"
name: ".flatpak"
},
zip: {
name: "Portable (.zip)"
@ -43,6 +47,7 @@ export const downloadMatrix = {
},
macos: {
title: "macOS",
description: "Works on macOS Big Sur and up.",
downloads: {
dmg: {
recommended: true,

4
apps/website/src/routes/+layout.svelte
View File

@ -8,3 +8,7 @@
<Header />
{@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>

4
apps/website/src/routes/+page.svelte
View File

@ -143,7 +143,3 @@
</div>
</div>
</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>

145
apps/website/src/routes/download/+page.svelte
View File

@ -6,81 +6,88 @@
let architecture = getArchitecture();
</script>
<section class="mt-20 max-w-6xl mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Desktop application</h2>
<div class="bg-gray-50 py-20">
<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 -->
<div class="col-span-3 flex justify-center items-center gap-3 mb-6">
<span class="text-gray-600 font-medium mr-2">Architecture:</span>
<div class="inline-flex bg-violet-100 rounded-full shadow p-1">
{#each architectures as arch}
<button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
text-violet-700 border-violet-700
aria-pressed:bg-violet-700 aria-pressed:text-violet-100
" aria-pressed={architecture === arch} on:click={() => architecture = arch}>
{arch}
</button>
<!-- Architecture pill selector -->
<div class="col-span-3 flex justify-center items-center gap-3 mb-6">
<span class="text-gray-600 font-medium mr-2">Architecture:</span>
<div class="inline-flex bg-violet-100 rounded-full shadow p-1">
{#each architectures as arch}
<button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
text-violet-700 border-violet-700
aria-pressed:bg-violet-700 aria-pressed:text-violet-100
" aria-pressed={architecture === arch} on:click={() => architecture = arch}>
{arch}
</button>
{/each}
</div>
</div>
<div class="grid md:grid-cols-3 gap-10">
{#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
{@const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended)}
{@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800")}
{@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
{@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
<div class="bg-white border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
<h3 class="text-2xl font-semibold {textColor} mb-2">{platform.title} ({architecture})</h3>
<p class="text-gray-700 mb-12">{platform.description}</p>
<div class="space-y-2 mt-auto w-full">
{#if recommended}
<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">
Download {recommended[1].name}
</a>
{/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>
{/each}
</div>
</div>
</div>
{/each}
</div>
</div>
</section>
<div class="grid md:grid-cols-3 gap-10">
{#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
<div class="bg-white rounded-xl shadow overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">{platform.title} ({architecture})</h3>
<div class="flex flex-wrap gap-y-2">
{#each Object.entries(platform.downloads) as [format, download]}
<a href={buildDesktopDownloadUrl(platformId as Platform, format, architecture)} class={
download.recommended
? "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"
: "py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow"
}>
{download.name}
{#if download.recommended}
<span class="text-sm text-gray-300 ml-2">Recommended</span>
{/if}
<section class="mt-20 max-w-5xl mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Server</h2>
<div class="grid md:grid-cols-2 gap-10 justify-center">
<div class="bg-white rounded-xl shadow overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Docker (recommended)</h3>
<div class="flex flex-wrap gap-2">
<a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
DockerHub
</a>
{/each}
<a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="https://github.com/TriliumNext/Notes/pkgs/container/notes">
ghcr.io
</a>
</div>
<a href="#" class="block mt-4">See documentation</a>
</div>
</div>
<div class="bg-white rounded-xl shadow overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Linux</h3>
<div class="flex flex-wrap gap-y-2">
<a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
Portable for x86 devices (.tar.xz)
</a>
<a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
Portable for ARM devices (.tar.xz)
</a>
</div>
</div>
</div>
</div>
{/each}
</div>
</section>
</section>
<section class="mt-20 max-w-5xl mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Server</h2>
<div class="grid md:grid-cols-2 gap-10 justify-center">
<div class="bg-white rounded-xl shadow overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Docker (recommended)</h3>
<div class="flex flex-wrap gap-2">
<a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
DockerHub
</a>
<a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="https://github.com/TriliumNext/Notes/pkgs/container/notes">
ghcr.io
</a>
</div>
<a href="#" class="block mt-4">See documentation</a>
</div>
</div>
<div class="bg-white rounded-xl shadow overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Linux</h3>
<div class="flex flex-wrap gap-y-2">
<a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
Portable for x86 devices (.tar.xz)
</a>
<a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
Portable for ARM devices (.tar.xz)
</a>
</div>
</div>
</div>
</div>
</section>
</div>

9
apps/website/src/routes/header.svelte
View File

@ -2,7 +2,7 @@
import DownloadNow from "./download-now.svelte";
</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">
<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">
@ -12,10 +12,9 @@
<div class="group w-full">
<nav class="header-nav">
<ul class="flex items-center justify-end gap-4">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/">User Guide</a></li>
<li><a href="/">Technical Guide</a></li>
<li><a href="/" class="text-violet-500">Support us</a></li>
<li><DownloadNow /></li>
</ul>
</nav>