feat!: Implementing OS-specific download buttons (#2581)

<!--
☝️ PR title should follow conventional commits
(https://conventionalcommits.org).
In particular, the title should start with one of the following types:

- docs: 📖 Documentation (updates to the documentation or readme)
- fix: 🐞 Bug fix (a non-breaking change that fixes an issue)
- feat: ✨ New feature/enhancement (a non-breaking change that adds
functionality or improves existing one)
- feat!/fix!: ⚠️ Breaking change (fix or feature that would cause
existing functionality to change)
- chore: 🧹 Chore (updates to the build process or auxiliary tools and
libraries)
-->

### 🔗 Linked issue

<!-- If it resolves an open issue, please link the issue here. For
example "Resolves #123" -->
Partially fixes #2176 
Fixes #2586

### 📚 Description

<!-- Describe your changes in detail -->
This pull request changes the download interface of the website. To
detail, the old `Download JabRef` button is now changes based on the OS
of the system (e.g., `Windows`, `Mac`, `Linux`). Windows should have
buttons for `.msi` and `.zip`. For Linux, `.deb`, `.rpm`, and `.tar.gz`.
For Mac (both `arm64` and `x86_64`), `.dmg` and `.pkg`. Consequently,
changes in the `/download/[[os]]` path was necessary to implement
redirection (expansion from just `['win', 'mac', 'linux']`

<!-- Why is this change required? What problem does it solve? -->
This pull request solves a user problem in which the web site
automatically downloads a file which might not be apt for their package
manager and or system architecture.

#### Original Implementation for Windows

![image](https://github.com/user-attachments/assets/0ec1638d-8194-4911-956a-0a0e71b3cf4c)

#### New Implementation for Windows

![image](https://github.com/user-attachments/assets/e3f83769-c731-429c-b7cd-326b74ccbca2)

#### New Implementation for Mac

![image](https://github.com/user-attachments/assets/7750f0d4-56c1-435f-bb93-95f4faf9d66e)

#### New Implementation for Linux

![image](https://github.com/user-attachments/assets/709e4ed7-a926-487f-b297-7b6c93436ccd)

.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,30 @@
+<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
+      >{{ 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,55 @@
           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="Windows Portable"
+                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="Linux Portable"
+                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">
@@ -30,7 +68,7 @@
             Also available for
             <t-nuxtlink
               class="text-primary-500"
-              href="download"
+              href="https://github.com/JabRef/jabref/releases/latest"
               >mac OS X and Linux</t-nuxtlink
             >
             <br />
@@ -41,7 +79,7 @@
             Also available for
             <t-nuxtlink
               class="text-primary-500"
-              href="download"
+              href="https://github.com/JabRef/jabref/releases/latest"
               >Windows and Linux</t-nuxtlink
             >
             <br />
@@ -52,7 +90,7 @@
             Also available for
             <t-nuxtlink
               class="text-primary-500"
-              href="download"
+              href="https://github.com/JabRef/jabref/releases/latest"
             >
               mac OS X and Windows
             </t-nuxtlink>
@@ -77,6 +115,4 @@
 </template>
 <script setup lang="ts">
 import { isLinux, isMac, isWindows } from '~/composables/detectOs'
-
-const downloadUrl = constructDownloadUrl()
 </script>

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

@@ -20,23 +20,43 @@ definePageMeta({
   layout: false,
 
   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)) {
+    let downloadUrl = `https://github.com/JabRef/jabref/releases/download/`
+    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
+      downloadUrl += `v${latestRelease}`
       if (latestRelease) {
         downloadUrl +=
           {
-            win: `?dwl=JabRef-${latestRelease}.msi`,
-            mac: `?dwl=JabRef-${latestRelease}.pkg`,
-            linux: `?dwl=jabref_${latestRelease}_amd64.deb`,
+            win_msi: `/JabRef-${latestRelease}.msi`,
+            win_zip: `/JabRef-${latestRelease}-portable_windows.zip`,
+            mac_arm64_dmg: `/JabRef-${latestRelease}-arm64.dmg`,
+            mac_arm64_pkg: `/JabRef-${latestRelease}-arm64.pkg`,
+            mac_x86_64_dmg: `/JabRef-${latestRelease}.dmg`,
+            mac_x86_64_pkg: `/JabRef-${latestRelease}.pkg`,
+            linux_deb: `/jabref_${latestRelease}_amd64.deb`,
+            linux_rpm: `/jabref-${latestRelease}-1.x86_64.rpm`,
+            linux_tar_gz: `/JabRef-${latestRelease}-portable_linux.tar.gz`,
           }[os] ?? ''
       }
     }
 
     return await navigateTo(downloadUrl, { external: true })
   },
 })
-const downloadUrl = 'https://www.fosshub.com/JabRef.html'
+const downloadUrl = `https://github.com/JabRef/jabref/releases/download/`
 </script>

pages/index.vue

@@ -77,7 +77,7 @@
                 <ClientOnly>
                   <a
                     class="text-2xl"
-                    :href="constructDownloadUrl()"
+                    href="/#download"
                     >Download JabRef</a
                   >
                 </ClientOnly>
@@ -97,7 +97,6 @@
 </template>
 
 <script setup lang="ts">
-import { constructDownloadUrl } from '~/composables/downloads'
 definePageMeta({ layout: false })
 
 const links = [

server/e2e.test.ts

@@ -11,12 +11,12 @@ describe('index page', () => {
 })
 
 describe('download', () => {
-  it('redirects to fosshub', async () => {
+  it('downloads file from GitHub release', async () => {
     const response = await fetch('/download')
     // Client side redirect uses meta refresh
     expect(response.status).toBe(200)
     expect(await response.text()).toContain(
-      'https://www.fosshub.com/JabRef.html',
+      'https://github.com/JabRef/jabref/releases/download/',
     )
   })
 })