feat!: Implementing OS-specific download buttons

.gitignore

@@ -143,6 +143,9 @@ storybook-static/
 
 # End of https://www.toptal.com/developers/gitignore/api/vscode,nuxtjs,node
 
+# webstorm
+.idea/*
+
 # Automatically generated files
 apollo/gql.ts
 apollo/graphql.ts

components/DownloadButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <n-button
+    type="primary"
+    size="large"
+    style="height: 3.2em"
+  >
+    <template #icon>
+      <n-icon><Icon name="material-symbols:download"/></n-icon>
+    </template>
+    <a
+      class="text-2xl"
+      href="{{ href }}"
+    >{{ text }}</a
+    >
+  </n-button>
+</template>
+<script setup lang="ts">
+defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  href: {
+    type: String,
+    default: "",
+  }
+})
+</script>

components/LandingPageDownload.client.vue

@@ -10,17 +10,28 @@
           JabRef is free and works across all your devices.
         </h3>
         <div class="text-center">
-          <n-button
-            type="primary"
-            size="large"
-            style="height: 3.2em"
-          >
-            <a
-              class="text-2xl"
-              :href="downloadUrl"
-              >Download JabRef</a
-            >
-          </n-button>
+          <span v-if="isWindows()">
+            <n-flex justify="center">
+              <DownloadButton text=".msi" href="/download/win_msi" />
+              <DownloadButton text=".zip" href="/download/win_zip" />
+            </n-flex>
+          </span>
+
+          <span v-if="isLinux()">
+            <n-flex justify="center">
+              <DownloadButton text=".deb" href="/download/linux_deb" />
+              <DownloadButton text=".rpm" href="/download/linux_rpm" />
+              <DownloadButton text=".tar.gz" href="/download/linux_tar_gz" />
+            </n-flex>
+          </span>
+          <span v-if="isMac()">
+            <n-flex justify="center">
+              <DownloadButton text="arm64 .dmg" href="/download/mac_arm64_dmg" />
+              <DownloadButton text="arm64 .dmg" href="/download/mac_arm64_pkg" />
+              <DownloadButton text="x86_64 .dmg" href="/download/mac_x86_64_dmg" />
+              <DownloadButton text="x86_64 .pkg" href="/download/mac_x86_64_pkg" />
+            </n-flex>
+          </span>
         </div>
 
         <div class="text-center pt-8 text-sm">

composables/downloads.ts

@@ -4,9 +4,9 @@ export function constructDownloadUrl(): string {
   if (os) {
     osSuffix =
       {
-        windows: 'win',
-        mac: 'mac',
-        linux: 'linux',
+        windows: 'win_msi',
+        mac: 'mac_arm64_dmg',
+        linux: 'linux_deb',
       }[os] || ''
   }
   return `/download/${osSuffix}`

pages/download/[[os]].vue

@@ -22,15 +22,21 @@ definePageMeta({
   middleware: async (to) => {
     let downloadUrl = 'https://www.fosshub.com/JabRef.html'
     const os = to.params.os as string | undefined
-    if (os && ['win', 'mac', 'linux'].includes(os)) {
+    if (os && ['win_msi', 'win_zip', 'mac_arm64_dmg', 'mac_arm64_pkg', 'mac_x86_64_dmg', 'mac_x86_64_pkg', 'linux_deb', 'linux_rpm', 'linux_tar_gz'].includes(os)) {
       const { data } = await useFetch('/api/getLatestRelease')
       const latestRelease = data.value?.version
       if (latestRelease) {
         downloadUrl +=
           {
-            win: `?dwl=JabRef-${latestRelease}.msi`,
-            mac: `?dwl=JabRef-${latestRelease}.pkg`,
-            linux: `?dwl=jabref_${latestRelease}_amd64.deb`,
+            win_msi: `?dwl=JabRef-${latestRelease}.msi`,
+            win_zip: `?dwl=JabRef-${latestRelease}-portable_windows.zip`,
+            mac_arm64_dmg: `?dwl=JabRef-${latestRelease}-arm64.dmg`,
+            mac_arm64_pkg: `?dwl=JabRef-${latestRelease}-arm64.pkg`,
+            mac_x86_64_dmg: `?dwl=JabRef-${latestRelease}.dmg`,
+            mac_x86_64_pkg: `?dwl=JabRef-${latestRelease}.pkg`,
+            linux_deb: `?dwl=jabref_${latestRelease}_amd64.deb`,
+            linux_rpm: `?dwl=jabref_${latestRelease}.x86_64.rpm`,
+            linux_tar_gz: `?dwl=JabRef-${latestRelease}-portable_linux.tar.gz`,
           }[os] ?? ''
       }
     }

pages/index.vue

@@ -77,7 +77,7 @@
                 <ClientOnly>
                   <a
                     class="text-2xl"
-                    :href="constructDownloadUrl()"
+                    href='/#download'
                     >Download JabRef</a
                   >
                 </ClientOnly>