feat(website): add dedicated card for docker in downloads

apps/website/src/download-helper.ts

@@ -4,7 +4,7 @@ export type App = "desktop" | "server";
 
 export type Architecture = 'x64' | 'arm64';
 
-export type Platform = "macos" | "windows" | "linux" | "pikapod";
+export type Platform = "macos" | "windows" | "linux" | "pikapod" | "docker";
 
 const version = rootPackageJson.version;
 
@@ -107,17 +107,13 @@ export const downloadMatrix: DownloadMatrix = {
     },
     server: {
         linux: {
-            title: "Self-hosted (Linux)",
-            description: "Deploy Trilium Notes on your own server or VPS, compatible with most Linux distributions.",
+            title: "Self-hosted on Linux",
+            description: "Deploy Trilium Notes on your own server or VPS, compatible with most distributions.",
             downloads: {
-                docker: {
-                    recommended: true,
-                    name: "View on Docker Hub",
-                    url: "https://hub.docker.com/r/triliumnext/trilium"
-                },
                 tarX64: {
+                    recommended: true,
                     name: "x86 (.tar.xz)",
-                    url: `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-Server-v${version}-linux-x64.tar.xz`
+                    url: `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-Server-v${version}-linux-x64.tar.xz`,
                 },
                 tarArm64: {
                     name: "ARM (.tar.xz)",
@@ -129,6 +125,21 @@ export const downloadMatrix: DownloadMatrix = {
                 }
             }
         },
+        docker: {
+            title: "Self-hosted using Docker",
+            description: "Easily deploy on Windows, Linux or macOS using a Docker container.",
+            downloads: {
+                dockerhub: {
+                    recommended: true,
+                    name: "View on Docker Hub",
+                    url: "https://hub.docker.com/r/triliumnext/trilium"
+                },
+                ghcr: {
+                    name: "ghcr.io",
+                    url: "https://github.com/TriliumNext/Trilium/pkgs/container/trilium"
+                }
+            }
+        },
         pikapod: {
             title: "Paid hosting",
             description: "Trilium Notes hosted on PikaPods, a paid service for easy access and management.",

apps/website/src/pages/Download/download.css

@@ -33,8 +33,10 @@
 .download-desktop .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
 .download-desktop .download-card:last-of-type { --accent-color: var(--brand-3); }
 
-.download-server .download-card:first-of-type { --accent-color: var(--brand-1); }
-.download-server .download-card:last-of-type { --accent-color: var(--brand-3); }
+.download-server .download-card {
+    --accent-color: var(--foreground-color);
+    --brand-foreground-color: var(--background-color);
+}
 
 .architecture-switch {
     display: flex;
@@ -63,10 +65,3 @@
     background-color: var(--brand-1);
     color: var(--brand-foreground-color);
 }
-
-@media (min-width: 720px) {
-    .download-server {
-        width: 75%;
-        margin: auto;
-    }
-}

apps/website/src/pages/Download/download.tsx

@@ -32,7 +32,7 @@ export default function DownloadPage() {
             </Section>
 
             <Section title="Set up a server for access on multiple devices">
-                <div className="grid-2-cols download-server">
+                <div className="grid-3-cols download-server">
                     {Object.entries(downloadMatrix.server).map(entry => <DownloadCard app="server" arch={currentArch} entry={entry} />)}
                 </div>
             </Section>