From 37f5d197394ed19d1a670deaf2c170c74c2bf1bf Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 16:23:12 +0300
Subject: [PATCH] feat(website): quick start for downloads

---
 apps/website/src/download-helper.ts          |  3 +++
 apps/website/src/pages/Download/download.css | 11 +++++++++++
 apps/website/src/pages/Download/download.tsx |  6 ++++++
 apps/website/src/style.css                   |  2 +-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/download-helper.ts b/apps/website/src/download-helper.ts
index a767001d9..8b1cb041d 100644
--- a/apps/website/src/download-helper.ts
+++ b/apps/website/src/download-helper.ts
@@ -19,6 +19,7 @@ export interface DownloadMatrixEntry {
     description: Record<Architecture, string> | string;
     downloads: Record<string, DownloadInfo>;
     helpUrl?: string;
+    quickStartCode?: string;
 }
 
 type DownloadMatrix = Record<App, { [ P in Platform ]?: DownloadMatrixEntry }>;
@@ -35,6 +36,7 @@ export const downloadMatrix: DownloadMatrix = {
                 x64: "Compatible with Intel or AMD devices running Windows 10 and 11.",
                 arm64: "Compatible with ARM devices (e.g. with Qualcomm Snapdragon).",
             },
+            quickStartCode: "winget install TriliumNext.Notes",
             downloads: {
                 exe: {
                     recommended: true,
@@ -131,6 +133,7 @@ export const downloadMatrix: DownloadMatrix = {
             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",
+            quickStartCode: "docker pull triliumnext/trilium\ndocker run -p 8080:8080 -d ./data:/home/node/trilium-data triliumnext/trilium",
             downloads: {
                 dockerhub: {
                     recommended: true,
diff --git a/apps/website/src/pages/Download/download.css b/apps/website/src/pages/Download/download.css
index f66c2bb05..1a8680e3d 100644
--- a/apps/website/src/pages/Download/download.css
+++ b/apps/website/src/pages/Download/download.css
@@ -45,6 +45,17 @@
     --brand-foreground-color: var(--background-color);
 }
 
+.download-card .quick-start {
+    border: 1px solid var(--muted-color);
+    padding: 0.5em;
+    border-radius: 6px;
+}
+
+.download-card .quick-start code {
+    text-wrap: wrap;
+    color: var(--muted-color);
+}
+
 .architecture-switch {
     display: flex;
     gap: 1em;
diff --git a/apps/website/src/pages/Download/download.tsx b/apps/website/src/pages/Download/download.tsx
index 9d0f6b103..2a17ca70c 100644
--- a/apps/website/src/pages/Download/download.tsx
+++ b/apps/website/src/pages/Download/download.tsx
@@ -67,6 +67,12 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
         </>} className="download-card">
             {unwrapText(entry.description)}
 
+            {entry.quickStartCode && (
+                <pre className="quick-start">
+                    <code>{entry.quickStartCode}</code>
+                </pre>
+            )}
+
             <div class="download-options">
                 <Button
                     className="recommended"
diff --git a/apps/website/src/style.css b/apps/website/src/style.css
index a05464fb1..09969b95a 100644
--- a/apps/website/src/style.css
+++ b/apps/website/src/style.css
@@ -1,7 +1,7 @@
 :root {
     --background-color: #fff;
     --foreground-color: black;
-    --muted-color: #353535;
+    --muted-color: #606060;
     --card-background-color: white;
     --card-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
     --header-background-color: rgba(255, 255, 255, 0.75);