diff --git a/apps/website/src/assets/boxicons/bx-help-circle.svg b/apps/website/src/assets/boxicons/bx-help-circle.svg
new file mode 100644
index 000000000..73335bc11
--- /dev/null
+++ b/apps/website/src/assets/boxicons/bx-help-circle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/website/src/components/Card.tsx b/apps/website/src/components/Card.tsx
index 97d7c54cb..c55f39a6d 100644
--- a/apps/website/src/components/Card.tsx
+++ b/apps/website/src/components/Card.tsx
@@ -2,7 +2,7 @@ import { ComponentChildren } from "preact";
import Button from "./Button";
interface CardProps {
- title: string;
+ title: ComponentChildren;
imageUrl?: string;
className?: string;
moreInfoUrl?: string;
diff --git a/apps/website/src/download-helper.ts b/apps/website/src/download-helper.ts
index db51f1729..a767001d9 100644
--- a/apps/website/src/download-helper.ts
+++ b/apps/website/src/download-helper.ts
@@ -18,6 +18,7 @@ export interface DownloadMatrixEntry {
title: Record | string;
description: Record | string;
downloads: Record;
+ helpUrl?: string;
}
type DownloadMatrix = Record;
@@ -109,6 +110,7 @@ export const downloadMatrix: DownloadMatrix = {
linux: {
title: "Self-hosted on Linux",
description: "Deploy Trilium Notes on your own server or VPS, compatible with most distributions.",
+ helpUrl: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Packaged%20version%20for%20Linux.html",
downloads: {
tarX64: {
recommended: true,
@@ -128,6 +130,7 @@ export const downloadMatrix: DownloadMatrix = {
docker: {
title: "Self-hosted using Docker",
description: "Easily deploy on Windows, Linux or macOS using a Docker container.",
+ helpUrl: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.html",
downloads: {
dockerhub: {
recommended: true,
diff --git a/apps/website/src/pages/Download/download.css b/apps/website/src/pages/Download/download.css
index cc726d7f7..f66c2bb05 100644
--- a/apps/website/src/pages/Download/download.css
+++ b/apps/website/src/pages/Download/download.css
@@ -5,6 +5,16 @@
.download-card h3 {
color: var(--accent-color);
font-size: 1.5em;
+ position: relative;
+}
+
+.download-card h3 a.more-info {
+ margin-left: 0.5em;
+ right: 0;
+}
+
+.download-card h3 a.more-info .bx {
+ vertical-align: sub;
}
.download-options {
diff --git a/apps/website/src/pages/Download/download.tsx b/apps/website/src/pages/Download/download.tsx
index 058e8d474..9d0f6b103 100644
--- a/apps/website/src/pages/Download/download.tsx
+++ b/apps/website/src/pages/Download/download.tsx
@@ -5,6 +5,8 @@ import { App, Architecture, buildDownloadUrl, downloadMatrix, DownloadMatrixEntr
import "./download.css";
import { usePageTitle } from "../../hooks";
import Button, { Link } from "../../components/Button";
+import Icon from "../../components/Icon";
+import helpIcon from "../../assets/boxicons/bx-help-circle.svg?raw";
export default function DownloadPage() {
const [ currentArch, setCurrentArch ] = useState(getArchitecture());
@@ -51,7 +53,18 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
const restDownloads = allDownloads.filter(download => !download[1].recommended);
return (
-
+
+ {unwrapText(entry.title)}
+ {entry.helpUrl && (
+
+
+
+ )}
+ >} className="download-card">
{unwrapText(entry.description)}