docs: download from readme

README.md

@@ -1,12 +1,44 @@
 <div align="center">
 
-<img src="./assets/macos-icon.png" alt="" height="150px" />
-
-# [GitLight](https://gitlight.app)
-
-GitHub & GitLab notifications on your desktop
-
-![Latest release](https://img.shields.io/github/v/release/colinlienard/gitlight?color=%236040ff&label=Latest%20release)
+<img src="./assets/macos-icon.png" alt="" height="128px" />
+
+# GitLight
+
+GitHub & GitLab notifications on your desktop • [gitlight.app](https://gitlight.app)
+
+<table>
+  <tbody>
+    <tr>
+      <td>Download for</td>
+      <td>      
+        <a href="https://gitlight.app/download/windows">
+          <img src="./assets/windows.png"> Windows
+        </a>
+      </td>
+      <td>
+        <a href="https://gitlight.app/download/apple-silicon">
+          <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="./assets/apple-dark.png">
+            <img src="./assets/apple-light.png">
+          </picture> Apple Silicon
+        </a>
+      </td>
+      <td>
+        <a href="https://gitlight.app/download/mac-intel">
+          <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="./assets/apple-dark.png">
+            <img src="./assets/apple-light.png">
+          </picture> Mac Intel
+        </a>
+      </td>
+      <td>
+        <a href="https://gitlight.app/download/linux">
+          <img src="./assets/linux.png"> Linux
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
 </div>
 
@@ -18,7 +50,8 @@ GitHub & GitLab notifications on your desktop
 
 Better GitHub notifications and ~~GitLab push notifications~~ (not yet). Available on **MacOS**, **Windows**, **Linux** and in the **browser**. Free and open-source.
 
-> **Warning**: GitLight is currently in development so bugs may be present
+> [!IMPORTANT]  
+> GitLight is currently in development so bugs may be present
 
 ## Features
 

src/lib/components/landing/DownloadButton.svelte

@@ -1,40 +1,13 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { sineInOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
 	import { Button } from '$lib/components';
 	import { LinuxIcon, MacosIcon, WindowsIcon } from '$lib/icons';
-	import type { GithubRelease } from '$lib/types';
-
-	type OS = 'appleSilicon' | 'macIntel' | 'windows' | 'linux';
 
 	export let show = true;
 	export let position: 'center' | 'bottom' = 'center';
 
 	let open = false;
-	let releases: Record<OS, string> = { appleSilicon: '', macIntel: '', windows: '', linux: '' };
-
-	onMount(async () => {
-		const response = await fetch('https://api.github.com/repos/colinlienard/gitlight/releases');
-		const data = (await response.json()) as GithubRelease[];
-		const { assets } = data[0];
-		releases = {
-			appleSilicon: assets.find(({ name }) => name.endsWith('aarch64.dmg'))
-				?.browser_download_url as string,
-			macIntel: assets.find(({ name }) => name.endsWith('x64.dmg'))?.browser_download_url as string,
-			windows: assets.find(({ name }) => name.endsWith('.msi'))?.browser_download_url as string,
-			linux: assets.find(({ name }) => name.endsWith('.AppImage'))?.browser_download_url as string
-		};
-	});
-
-	function handleDownload(os: OS) {
-		return () => {
-			open = false;
-			const link = document.createElement('a');
-			link.href = releases[os];
-			link.click();
-		};
-	}
 </script>
 
 <div
@@ -46,19 +19,19 @@
 	<slot />
 	{#if show && open}
 		<div class="tooltip {position}" transition:fade={{ duration: 150, easing: sineInOut }}>
-			<Button on:click={handleDownload('appleSilicon')}>
+			<Button href="https://gitlight.app/download/windows">
+				<WindowsIcon />
+				Download for Windows
+			</Button>
+			<Button href="https://gitlight.app/download/apple-silicon">
 				<MacosIcon />
 				Download for Apple Silicon
 			</Button>
-			<Button on:click={handleDownload('macIntel')}>
+			<Button href="https://gitlight.app/download/mac-intel">
 				<MacosIcon />
 				Download for Mac Intel
 			</Button>
-			<Button on:click={handleDownload('windows')}>
-				<WindowsIcon />
-				Download for Windows
-			</Button>
-			<Button on:click={handleDownload('linux')}>
+			<Button href="https://gitlight.app/download/linux">
 				<LinuxIcon />
 				Download for Linux
 			</Button>

src/routes/download/[os]/+server.ts

@@ -0,0 +1,28 @@
+import { redirect } from '@sveltejs/kit';
+import type { GithubRelease } from '$lib/types';
+
+export async function GET({ params }) {
+	async function getDownloadUrl(os: 'aarch64.dmg' | 'x64.dmg' | '.msi' | '.AppImage') {
+		const response = await fetch('https://api.github.com/repos/colinlienard/gitlight/releases');
+		const data = (await response.json()) as GithubRelease[];
+		const { assets } = data[0];
+		return assets.find(({ name }) => name.endsWith(os))?.browser_download_url as string;
+	}
+
+	switch (params.os) {
+		case 'apple-silicon':
+			throw redirect(302, await getDownloadUrl('aarch64.dmg'));
+
+		case 'mac-intel':
+			throw redirect(302, await getDownloadUrl('x64.dmg'));
+
+		case 'windows':
+			throw redirect(302, await getDownloadUrl('.msi'));
+
+		case 'linux':
+			throw redirect(302, await getDownloadUrl('.AppImage'));
+
+		default:
+			return new Response('Not found', { status: 404 });
+	}
+}