gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

chore(website): reimplement download button

Browse Source
This commit is contained in:
Elian Doran 2025-09-26 23:28:58 +03:00
parent 772d4ac5a1
commit 68ef6ea142
No known key found for this signature in database
6 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/website2/src/index.html
View File

@ -9,10 +9,7 @@
<body> <body>
<header> <header>
<nav> <nav>
<a class="download-button" href="https://github.com/TriliumNext/Trilium/releases/latest">
Download now
<span class="platform"></span>
</a>
</nav> </nav>
</div> </div>
</header> </header>

17
apps/website3/src/components/DownloadButton.tsx Normal file
View File

@ -0,0 +1,17 @@
import { useLayoutEffect } from "preact/hooks";
import { getRecommendedDownload } from "../download-helper";
interface DownloadButtonProps {
big?: boolean;
}
const { architecture, platform, url } = getRecommendedDownload();
export default function DownloadButton({ big }: DownloadButtonProps) {
return (
<a className={`download-button ${big ? "big" : ""}`} href={url}>
Download now{" "}
<span class="platform">{platform} {architecture}</span>
</a>
)
}

3
apps/website3/src/components/Header.tsx
View File

@ -1,4 +1,5 @@
import { useLocation } from 'preact-iso'; import { useLocation } from 'preact-iso';
import DownloadButton from './DownloadButton';
export function Header() { export function Header() {
const { url } = useLocation(); const { url } = useLocation();
@ -16,6 +17,8 @@ export function Header() {
404 404
</a> </a>
</nav> </nav>
<DownloadButton />
</div> </div>
</header> </header>
); );

37
apps/website2/src/script.ts → apps/website3/src/download-helper.ts
View File

@ -1,18 +1,20 @@
type App = "desktop" | "server"; import rootPackageJson from '../../../package.json';
type Architecture = 'x64' | 'arm64'; export type App = "desktop" | "server";
type Platform = "macos" | "windows" | "linux" | "pikapod"; export type Architecture = 'x64' | 'arm64';
const version = "0.99.0"; export type Platform = "macos" | "windows" | "linux" | "pikapod";
interface DownloadInfo { const version = rootPackageJson.version;
export interface DownloadInfo {
recommended?: boolean; recommended?: boolean;
name: string; name: string;
url?: string; url?: string;
} }
interface DownloadMatrixEntry { export interface DownloadMatrixEntry {
title: Record<Architecture, string> | string; title: Record<Architecture, string> | string;
description: Record<Architecture, string> | string; description: Record<Architecture, string> | string;
downloads: Record<string, DownloadInfo>; downloads: Record<string, DownloadInfo>;
@ -21,7 +23,7 @@ interface DownloadMatrixEntry {
type DownloadMatrix = Record<App, { [ P in Platform ]?: DownloadMatrixEntry }>; type DownloadMatrix = Record<App, { [ P in Platform ]?: DownloadMatrixEntry }>;
// Keep compatibility info inline with https://github.com/electron/electron/blob/main/README.md#platform-support. // Keep compatibility info inline with https://github.com/electron/electron/blob/main/README.md#platform-support.
const downloadMatrix: DownloadMatrix = { export const downloadMatrix: DownloadMatrix = {
desktop: { desktop: {
windows: { windows: {
title: { title: {
@ -145,7 +147,7 @@ const downloadMatrix: DownloadMatrix = {
} }
}; };
function buildDownloadUrl(app: App, platform: Platform, format: string, architecture: Architecture): string { export function buildDownloadUrl(app: App, platform: Platform, format: string, architecture: Architecture): string {
if (app === "desktop") { if (app === "desktop") {
return downloadMatrix.desktop[platform]?.downloads[format].url ?? return downloadMatrix.desktop[platform]?.downloads[format].url ??
`https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-v${version}-${platform}-${architecture}.${format}`; `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-v${version}-${platform}-${architecture}.${format}`;
@ -156,7 +158,7 @@ function buildDownloadUrl(app: App, platform: Platform, format: string, architec
} }
} }
function getArchitecture(): Architecture { export function getArchitecture(): Architecture {
const userAgent = navigator.userAgent.toLowerCase(); const userAgent = navigator.userAgent.toLowerCase();
if (userAgent.includes('arm64') || userAgent.includes('aarch64')) { if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
return 'arm64'; return 'arm64';
@ -176,7 +178,7 @@ function getPlatform(): Platform {
} }
} }
function getRecommendedDownload() { export function getRecommendedDownload() {
const architecture = getArchitecture(); const architecture = getArchitecture();
const platform = getPlatform(); const platform = getPlatform();
@ -191,18 +193,3 @@ function getRecommendedDownload() {
url url
} }
} }
function applyAutomaticDownloadButtons() {
const buttons = document.querySelectorAll<HTMLLinkElement>(".download-button");
const { url, architecture, platform } = getRecommendedDownload();
for (const button of buttons) {
button.href = url;
const platformEl = button.querySelector(".platform");
if (!platformEl) continue;
platformEl.textContent = [ architecture, platform ].join(" ");
}
}
applyAutomaticDownloadButtons();

6
apps/website3/src/pages/Home/index.tsx
View File

@ -1,6 +1,7 @@
import { ComponentChildren } from 'preact'; import { ComponentChildren } from 'preact';
import Card from '../../components/Card'; import Card from '../../components/Card';
import Section from '../../components/Section'; import Section from '../../components/Section';
import DownloadButton from '../../components/DownloadButton';
export function Home() { export function Home() {
return ( return (
@ -9,10 +10,7 @@ export function Home() {
<div class="title-section"> <div class="title-section">
<h1>Organize your thoughts. Build your personal knowledge base.</h1> <h1>Organize your thoughts. Build your personal knowledge base.</h1>
<p>Trilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.</p> <p>Trilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.</p>
<a class="download-button" href="https://github.com/TriliumNext/Trilium/releases/latest"> <DownloadButton big />
Download now
<span class="platform"></span>
</a>
</div> </div>
<figure class="image"><img src="./src/assets/screenshot_desktop_win.png" /></figure> <figure class="image"><img src="./src/assets/screenshot_desktop_win.png" /></figure>

2
apps/website3/src/style.css
View File

@ -229,7 +229,7 @@ span.text-big {
opacity: 0.75; opacity: 0.75;
} }
.hero-section .download-button { .download-button.big {
padding: 1em 2em; padding: 1em 2em;
margin: 1em 0; margin: 1em 0;
} }