mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-27 10:02:59 +08:00
feat(website/download): section for server downloads
This commit is contained in:
Elian Doran
parent
f0ce728982
commit
235f7c8aec
@ -1,10 +1,10 @@
|
||||
import rootPackageJson from '../../../../package.json';
|
||||
|
||||
type App = "desktop";
|
||||
type App = "desktop" | "server";
|
||||
|
||||
export type Architecture = 'x64' | 'arm64';
|
||||
|
||||
export type Platform = 'mac' | 'windows' | 'linux';
|
||||
export type Platform = 'macos' | 'windows' | 'linux';
|
||||
|
||||
let version = rootPackageJson.version;
|
||||
|
||||
@ -12,10 +12,15 @@ export function buildDesktopDownloadUrl(platform: Platform, format: string, arch
|
||||
return `https://github.com/TriliumNext/Notes/releases/download/${version}/TriliumNextNotes-${version}-${platform}-${architecture}.${format}`;
|
||||
}
|
||||
|
||||
interface DownloadMatrixEntry {
|
||||
title: Record<Architecture, string>;
|
||||
description: Record<Architecture, string>;
|
||||
downloads: Record<string, { recommended?: boolean; name: string }>;
|
||||
export interface DownloadInfo {
|
||||
recommended?: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface DownloadMatrixEntry {
|
||||
title: Record<Architecture, string> | string;
|
||||
description: Record<Architecture, string> | string;
|
||||
downloads: Record<string, DownloadInfo>;
|
||||
}
|
||||
|
||||
type DownloadMatrix = Record<App, Record<Platform, DownloadMatrixEntry>>;
|
||||
@ -86,6 +91,24 @@ export const downloadMatrix: DownloadMatrix = {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
server: {
|
||||
linux: {
|
||||
title: "Self-hosted (Linux)",
|
||||
description: "Deploy Trilium Notes on your own server or VPS, compatible with most Linux distributions.",
|
||||
downloads: {
|
||||
docker: {
|
||||
recommended: true,
|
||||
name: "View on Docker Hub"
|
||||
},
|
||||
tarX64: {
|
||||
name: "x86 (.tar.xz)"
|
||||
},
|
||||
tarArm64: {
|
||||
name: "ARM (.tar.xz)"
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { Platform } from "$lib/download-helper";
|
||||
import { buildDesktopDownloadUrl, downloadMatrix, getArchitecture } from "$lib/download-helper";
|
||||
import DownloadCard from "./download-card.svelte";
|
||||
|
||||
let architectures = ["x64", "arm64"] as const;
|
||||
let architecture = getArchitecture();
|
||||
@ -27,66 +28,28 @@
|
||||
|
||||
<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[architecture]}</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>
|
||||
<DownloadCard
|
||||
{textColor} {bgColor} {hoverColor}
|
||||
{platform} {architecture} platformId={platformId as Platform} />
|
||||
{/each}
|
||||
</div>
|
||||
</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>
|
||||
<section class="max-w-6xl mx-auto px-4 mt-10">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Set up a server for access on multiple devices</h2>
|
||||
|
||||
<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 class="grid md:grid-cols-3 gap-10">
|
||||
{#each Object.entries(downloadMatrix.server) as [platformId, platform]}
|
||||
{@const textColor = "text-violet-600"}
|
||||
{@const bgColor = "bg-violet-600"}
|
||||
{@const hoverColor = "hover:bg-violet-700"}
|
||||
<DownloadCard
|
||||
{textColor} {bgColor} {hoverColor}
|
||||
{platform} {architecture} platformId={platformId as Platform} />
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
30
apps/website/src/routes/download/download-card.svelte
Normal file
30
apps/website/src/routes/download/download-card.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { buildDesktopDownloadUrl, type Architecture, type DownloadMatrixEntry, type Platform } from "$lib/download-helper";
|
||||
|
||||
export let platformId: Platform;
|
||||
export let platform: DownloadMatrixEntry;
|
||||
export let textColor: string;
|
||||
export let bgColor: string;
|
||||
export let hoverColor: string;
|
||||
export let architecture: Architecture | null = null;
|
||||
const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended);
|
||||
</script>
|
||||
|
||||
<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">{typeof platform.title === "object" ? platform.title[architecture] : platform.title}</h3>
|
||||
<p class="text-gray-700 mb-12">{typeof platform.title === "object" ? platform.description[architecture] : 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>
|
||||
Loading…
x
Reference in New Issue
Block a user