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

feat(website): highlight which platform to download

Browse Source
This commit is contained in:
Elian Doran 2025-09-30 21:06:19 +03:00
parent d870a260e1
commit 0be9310450
No known key found for this signature in database
2 changed files with 44 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/website/src/pages/GetStarted/get-started.css
View File

@ -87,9 +87,17 @@
}
.download-desktop {
.download-card:first-of-type { --accent-color: var(--brand-1); }
.download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
.download-card:last-of-type { --accent-color: var(--brand-3); }
.download-card {
transform: scale(0.9);
&.recommended {
transform: scale(1);
}
&:first-of-type { --accent-color: var(--brand-1); }
&:nth-of-type(2) { --accent-color: var(--brand-2); }
&:last-of-type { --accent-color: var(--brand-3); }
}
.download-footer {
text-align: center;

28
apps/website/src/pages/GetStarted/get-started.tsx
View File

@ -1,7 +1,7 @@
import { useState } from "preact/hooks";
import Card from "../../components/Card.js";
import Section from "../../components/Section.js";
import { App, Architecture, buildDownloadUrl, downloadMatrix, DownloadMatrixEntry, getArchitecture, Platform } from "../../download-helper.js";
import { App, Architecture, buildDownloadUrl, downloadMatrix, DownloadMatrixEntry, getArchitecture, getPlatform, Platform } from "../../download-helper.js";
import { usePageTitle } from "../../hooks.js";
import Button, { Link } from "../../components/Button.js";
import Icon from "../../components/Icon.js";
@ -11,6 +11,8 @@ import packageJson from "../../../../../package.json" with { type: "json" };
export default function DownloadPage() {
const [ currentArch, setCurrentArch ] = useState(getArchitecture() ?? "x64");
const userPlatform = getPlatform();
usePageTitle("Get started");
return (
@ -31,7 +33,9 @@ export default function DownloadPage() {
</div>
<div className="grid-3-cols download-desktop">
{Object.entries(downloadMatrix.desktop).map(entry => <DownloadCard app="desktop" arch={currentArch} entry={entry} />)}
{Object.entries(downloadMatrix.desktop).map(entry => (
<DownloadCard app="desktop" arch={currentArch} entry={entry} isRecommended={userPlatform === entry[0]} />
))}
</div>
<div class="download-footer">
@ -41,14 +45,21 @@ export default function DownloadPage() {
<Section title="Set up a server for access on multiple devices">
<div className="grid-2-cols download-server">
{Object.entries(downloadMatrix.server).map(entry => <DownloadCard app="server" arch={currentArch} entry={entry} />)}
{Object.entries(downloadMatrix.server).map(entry => (
<DownloadCard app="server" arch={currentArch} entry={entry} />
))}
</div>
</Section>
</>
)
}
export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: App, arch: Architecture, entry: [string, DownloadMatrixEntry] }) {
export function DownloadCard({ app, arch, entry: [ platform, entry ], isRecommended }: {
app: App,
arch: Architecture,
entry: [string, DownloadMatrixEntry],
isRecommended?: boolean;
}) {
function unwrapText(text: string | Record<Architecture, string>) {
return (typeof text === "string" ? text : text[arch]);
}
@ -58,7 +69,9 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
const restDownloads = allDownloads.filter(download => !download[1].recommended);
return (
<Card title={<>
<Card
title={
<>
{unwrapText(entry.title)}
{entry.helpUrl && (
<Link
@ -69,7 +82,10 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
<Icon svg={helpIcon} />
</Link>
)}
</>} className="download-card">
</>
}
className={`download-card ${isRecommended ? "recommended" : ""}`}
>
{unwrapText(entry.description)}
{entry.quickStartTitle && <p class="quick-start-title">{entry.quickStartTitle}</p>}