feat(website): help button for Linux and Docker

apps/website/src/assets/boxicons/bx-help-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"/><path d="M11 16h2v2h-2zm2.27-9.75c-2.08-.75-4.47.35-5.21 2.41l1.88.68c.18-.5.56-.9 1.07-1.13s1.08-.26 1.58-.08a2.01 2.01 0 0 1 1.32 1.86c0 1.04-1.66 1.86-2.24 2.07-.4.14-.67.52-.67.94v1h2v-.34c1.04-.51 2.91-1.69 2.91-3.68a4.015 4.015 0 0 0-2.64-3.73"/></svg>

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;

apps/website/src/download-helper.ts

@@ -18,6 +18,7 @@ export interface DownloadMatrixEntry {
     title: Record<Architecture, string> | string;
     description: Record<Architecture, string> | string;
     downloads: Record<string, DownloadInfo>;
+    helpUrl?: string;
 }
 
 type DownloadMatrix = Record<App, { [ P in Platform ]?: DownloadMatrixEntry }>;
@@ -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,

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 {

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 (
-        <Card title={unwrapText(entry.title)} className="download-card">
+        <Card title={<>
+            {unwrapText(entry.title)}
+            {entry.helpUrl && (
+                <Link
+                    className="more-info"
+                    href={entry.helpUrl}
+                    openExternally
+                >
+                    <Icon svg={helpIcon} />
+                </Link>
+            )}
+        </>} className="download-card">
             {unwrapText(entry.description)}
 
             <div class="download-options">