gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 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>
<header>
<nav>
<a class="download-button" href="https://github.com/TriliumNext/Trilium/releases/latest">
Download now
<span class="platform"></span>
</a>
</nav>
</div>
</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 DownloadButton from './DownloadButton';
export function Header() {
const { url } = useLocation();
@ -16,6 +17,8 @@ export function Header() {
404
</a>
</nav>
<DownloadButton />
</div>
</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;
name: string;
url?: string;
}
interface DownloadMatrixEntry {
export interface DownloadMatrixEntry {
title: Record<Architecture, string> | string;
description: Record<Architecture, string> | string;
downloads: Record<string, DownloadInfo>;
@ -21,7 +23,7 @@ interface 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.
const downloadMatrix: DownloadMatrix = {
export const downloadMatrix: DownloadMatrix = {
desktop: {
windows: {
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") {
return downloadMatrix.desktop[platform]?.downloads[format].url ??
`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();
if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
return 'arm64';
@ -176,7 +178,7 @@ function getPlatform(): Platform {
}
}
function getRecommendedDownload() {
export function getRecommendedDownload() {
const architecture = getArchitecture();
const platform = getPlatform();
@ -191,18 +193,3 @@ function getRecommendedDownload() {
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 Card from '../../components/Card';
import Section from '../../components/Section';
import DownloadButton from '../../components/DownloadButton';
export function Home() {
return (
@ -9,10 +10,7 @@ export function Home() {
<div class="title-section">
<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>
<a class="download-button" href="https://github.com/TriliumNext/Trilium/releases/latest">
Download now
<span class="platform"></span>
</a>
<DownloadButton big />
</div>
<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;
}
.hero-section .download-button {
.download-button.big {
padding: 1em 2em;
margin: 1em 0;
}