feat(website): quick start for downloads

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,

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;

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"

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);