diff --git a/apps/website2/src/index.html b/apps/website2/src/index.html index c11245d24..1783f2f36 100644 --- a/apps/website2/src/index.html +++ b/apps/website2/src/index.html @@ -9,10 +9,7 @@
diff --git a/apps/website3/src/components/DownloadButton.tsx b/apps/website3/src/components/DownloadButton.tsx new file mode 100644 index 000000000..38edec974 --- /dev/null +++ b/apps/website3/src/components/DownloadButton.tsx @@ -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 ( + + Download now{" "} + {platform} {architecture} + + ) +} diff --git a/apps/website3/src/components/Header.tsx b/apps/website3/src/components/Header.tsx index 033ffcb12..f6eb0598c 100644 --- a/apps/website3/src/components/Header.tsx +++ b/apps/website3/src/components/Header.tsx @@ -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 + + ); diff --git a/apps/website2/src/script.ts b/apps/website3/src/download-helper.ts similarity index 87% rename from apps/website2/src/script.ts rename to apps/website3/src/download-helper.ts index 8e0592ba5..40887c946 100644 --- a/apps/website2/src/script.ts +++ b/apps/website3/src/download-helper.ts @@ -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 | string; description: Record | string; downloads: Record; @@ -21,7 +23,7 @@ interface DownloadMatrixEntry { type DownloadMatrix = Record; // 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(".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(); diff --git a/apps/website3/src/pages/Home/index.tsx b/apps/website3/src/pages/Home/index.tsx index fb7f99118..85bee33a6 100644 --- a/apps/website3/src/pages/Home/index.tsx +++ b/apps/website3/src/pages/Home/index.tsx @@ -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() {

Organize your thoughts. Build your personal knowledge base.

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.

- - Download now - - +
diff --git a/apps/website3/src/style.css b/apps/website3/src/style.css index 558ad1062..44bba077a 100644 --- a/apps/website3/src/style.css +++ b/apps/website3/src/style.css @@ -229,7 +229,7 @@ span.text-big { opacity: 0.75; } -.hero-section .download-button { +.download-button.big { padding: 1em 2em; margin: 1em 0; }