feat(website): improve download instructions

apps/website/src/download-helper.ts

@@ -19,6 +19,7 @@ export interface DownloadMatrixEntry {
     description: Record<Architecture, string> | string;
     downloads: Record<string, DownloadInfo>;
     helpUrl?: string;
+    quickStartTitle?: string;
     quickStartCode?: string;
 }
 
@@ -43,6 +44,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).",
             },
+            quickStartTitle: "To install via Winget:",
             quickStartCode: "winget install TriliumNext.Notes",
             downloads: {
                 exe: {
@@ -71,14 +73,15 @@ export const downloadMatrix: DownloadMatrix = {
                 x64: "For most Linux distributions, compatible with x86_64 architecture.",
                 arm64: "For ARM-based Linux distributions, compatible with aarch64 architecture.",
             },
+            quickStartTitle: "Select an appropriate package format, depending on your distribution:",
             downloads: {
                 deb: {
                     recommended: true,
-                    name: "Download .deb"
+                    name: ".deb"
                 },
                 rpm: {
                     recommended: true,
-                    name: "Download .rpm"
+                    name: ".rpm"
                 },
                 flatpak: {
                     name: ".flatpak"
@@ -105,6 +108,7 @@ export const downloadMatrix: DownloadMatrix = {
                 x64: "For Intel-based Macs running macOS Big Sur or later.",
                 arm64: "For Apple Silicon Macs such as those with M1 and M2 chips.",
             },
+            quickStartTitle: "To install via Homebrew:",
             quickStartCode: "brew install --cask trilium-notes",
             downloads: {
                 dmg: {

apps/website/src/pages/GetStarted/get-started.css

@@ -32,10 +32,17 @@
         color: var(--accent-color);
     }
 
+    .quick-start-title {
+        margin-bottom: 0;
+        font-size: 0.9em;
+        color: var(--muted-color);
+    }
+
     .quick-start {
         background-color: #ececec;
         padding: 0.75em;
         border-radius: 6px;
+        margin-top: 0.5em;
 
         @media (prefers-color-scheme: dark) {
             background-color: black;

apps/website/src/pages/GetStarted/get-started.tsx

@@ -72,6 +72,7 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
         </>} className="download-card">
             {unwrapText(entry.description)}
 
+            {entry.quickStartTitle && <p class="quick-start-title">{entry.quickStartTitle}</p>}
             {entry.quickStartCode && (
                 <pre className="quick-start">
                     <code>{entry.quickStartCode}</code>

apps/website/src/style.css

@@ -15,7 +15,7 @@
     :root {
         --foreground-color: #fff;
         --background-color: #0a0e14;
-        --muted-color: #cacaca;
+        --muted-color: #c5c5c5;
         --header-background-color: rgba(0, 0, 0, 0.75);
         --card-background-color: #ffffff12;
         --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);