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 19 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

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

@ -6,7 +6,7 @@
grid-column: 1 / 4; grid-column: 1 / 4;
} }
.download-card { .download-card {
h3 { h3 {
color: var(--accent-color); color: var(--accent-color);
font-size: 1.5em; font-size: 1.5em;
@ -87,9 +87,17 @@
} }
.download-desktop { .download-desktop {
.download-card:first-of-type { --accent-color: var(--brand-1); } .download-card {
.download-card:nth-of-type(2) { --accent-color: var(--brand-2); } transform: scale(0.9);
.download-card:last-of-type { --accent-color: var(--brand-3); }
&.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 { .download-footer {
text-align: center; text-align: center;

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

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