feat(website): integrate download matrix for server

apps/website/src/lib/download-helper.ts

@@ -1,13 +1,81 @@
-function getArchitecture() {
+export type Architecture = 'x64' | 'arm64';
+
+type Platform = 'mac' | 'windows' | 'linux';
+
+type Apps = 'desktop';
+
+export const downloadMatrix = {
+    desktop: {
+        windows: {
+            title: "Windows",
+            downloads: {
+                exe: {
+                    recommended: true,
+                    name: "Installer (.exe)",
+                    x64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-windows-x64.exe",
+                    arm64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-windows-arm64.exe"
+                },
+                zip: {
+                    name: "Portable (.zip)",
+                    x64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-windows-x64.zip",
+                    arm64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-windows-arm64.zip"
+                }
+            }
+        },
+        linux: {
+            title: "Linux",
+            downloads: {
+                deb: {
+                    name: "Debian/Ubuntu (.deb)",
+                    x64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-linux-x64.deb",
+                    arm64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-linux-arm64.deb"
+                },
+                rpm: {
+                    name: "Red Hat-based distributions (.rpm)",
+                    x64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-linux-x64.rpm",
+                    arm64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-linux-arm64.rpm"
+                },
+                flatpak: {
+                    name: "Flatpak (.flatpak)",
+                    x64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-linux-x64.flatpak",
+                    arm64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-linux-arm64.flatpak"
+                },
+                zip: {
+                    name: "Portable (.zip)",
+                    x64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-linux-x64.zip",
+                    arm64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-linux-arm64.zip"
+                }
+            }
+        },
+        mac: {
+            title: "macOS",
+            downloads: {
+                dmg: {
+                    recommended: true,
+                    name: "Installer (.dmg)",
+                    x64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-macos-x64.dmg",
+                    arm64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-macos-arm64.dmg"
+                },
+                zip: {
+                    name: "Portable (.zip)",
+                    x64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-macos-x64.zip",
+                    arm64: "https://github.com/TriliumNext/Notes/releases/download/nightly/TriliumNextNotes-develop-macos-arm64.zip"
+                }
+            }
+        }
+    }
+};
+
+function getArchitecture(): Architecture {
     const userAgent = navigator.userAgent.toLowerCase();
-    if (userAgent.includes('x86_64') || userAgent.includes('x64') || userAgent.includes('amd64')) {
+    if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
-        return 'x64';
-    } else if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
         return 'arm64';
     }
+
+    return "x64";
 }
 
-function getPlatform() {
+function getPlatform(): Platform {
     const userAgent = navigator.userAgent.toLowerCase();
     if (userAgent.includes('macintosh') || userAgent.includes('mac os x')) {
         return "mac";
@@ -18,7 +86,7 @@ function getPlatform() {
     }
 }
 
-function getDownloadLink(platform: string, architecture: string) {
+function getDownloadLink(platform: Platform, architecture: Architecture) {
     const baseUrl = 'https://example.com/downloads';
     let url;
     if (platform === 'mac') {
@@ -41,9 +109,5 @@ function getDownloadLink(platform: string, architecture: string) {
 export function getRecommendedDownload() {
     const architecture = getArchitecture();
     const platform = getPlatform();
-    console.log(`Detected platform: ${platform}, architecture: ${architecture}`);
-    if (!architecture || !platform) {
-        return null;
-    }
     return getDownloadLink(platform, architecture);
 }

apps/website/src/routes/download/+page.svelte

@@ -1,9 +1,14 @@
+<script>
+    import { downloadMatrix } from "$lib/download-helper";
+
+    let architecture = 'x64';
+</script>
+
 <section class="mt-20 max-w-6xl mx-auto px-4">
     <h2 class="text-3xl font-bold text-center mb-12">Desktop application</h2>
 
-    <div class="grid md:grid-cols-3 gap-10">
     <!-- Architecture pill selector -->
-        <div class="col-span-3 flex justify-center items-center gap-3">
+    <div class="col-span-3 flex justify-center items-center gap-3 mb-6">
         <span class="text-gray-600 font-medium mr-2">Architecture:</span>
         <div class="inline-flex bg-violet-100 rounded-full shadow p-1">
             <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
@@ -20,63 +25,28 @@
         </div>
     </div>
 
+    <div class="grid md:grid-cols-3 gap-10">
+        {#each Object.values(downloadMatrix.desktop) as platform}
         <div class="bg-white rounded-xl shadow overflow-hidden">
             <div class="p-6">
-                <h3 class="text-xl font-semibold mb-2">Windows</h3>
+                <h3 class="text-xl font-semibold mb-2">{platform.title}</h3>
-                
                 <div class="flex flex-wrap gap-y-2">
-                    <a class="py-2 px-5 bg-violet-600 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75 grow" href="#">
+                    {#each Object.values(platform.downloads) as download}
-                        Installer (.exe)
+                        <a href={download[architecture]} class={
+                            download.recommended
+                            ? "py-2 px-5 bg-violet-600 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75 grow"
+                            : "py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow"
+                            }>
+                            {download.name}
+                            {#if download.recommended}
                             <span class="text-sm text-gray-300 ml-2">Recommended</span>
+                            {/if}
                         </a>
-
+                    {/each}
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        Portable (.zip)
-                    </a>
-                </div>
-            </div>
-        </div>
-
-        <div class="bg-white rounded-xl shadow overflow-hidden">
-            <div class="p-6">
-                <h3 class="text-xl font-semibold mb-2">Linux</h3>
-
-                <div class="flex flex-wrap gap-y-2">                    
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        Debian-based distributions (.deb)
-                    </a>
-
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        Red Hat-based distributions (.rpm)
-                    </a>
-
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        Flatpak (.flatpak)
-                    </a>
-
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        Portable (.zip)
-                    </a>
-                </div>
-            </div>
-        </div>
-
-        <div class="bg-white rounded-xl shadow overflow-hidden">
-            <div class="p-6">
-                <h3 class="text-xl font-semibold mb-2">macOS</h3>
-
-                <div class="flex flex-wrap gap-y-2">
-                    <a class="py-2 px-5 bg-violet-600 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75 grow" href="#">
-                        Disk image (.dmg)
-                        <span class="text-sm text-gray-300 ml-2">Recommended</span>
-                    </a>
-
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        Portable (.zip)
-                    </a>
                 </div>
             </div>
         </div>
+        {/each}
     </div>
 </section>