From 8d7c1f284e5f5313eed32a4c20da28dd76f37f3a Mon Sep 17 00:00:00 2001
From: Mary Guillemard <mary@mary.zone>
Date: Tue, 13 Feb 2024 19:31:21 +0100
Subject: [PATCH] Add Linux arm64 and Flathub links

Signed-off-by: Mary Guillemard <mary@mary.zone>
---
 src/i18n/locales/en/views/download.json |   7 +-
 src/views/DownloadPage.vue              | 240 ++++++++++--------------
 2 files changed, 100 insertions(+), 147 deletions(-)

diff --git a/src/i18n/locales/en/views/download.json b/src/i18n/locales/en/views/download.json
index c536189..2a2b5f0 100644
--- a/src/i18n/locales/en/views/download.json
+++ b/src/i18n/locales/en/views/download.json
@@ -6,9 +6,10 @@
   "download": "Download",
   "notSupported": "Currently not supported",
   "supportPlanned": "Support planned",
-  "supportWindows": "For Windows 10 & 11",
-  "supportLinux": "For the most common Linux distros",
-  "supportMacOS": "For macOS 12 and later (Intel and Apple Silicon)",
+  "supportWindows": "For Windows 10 & 11 (x86_64)",
+  "supportLinuxIntel": "For GNU/Linux (x86_64)",
+  "supportLinuxArm64": "For GNU/Linux (arm64)",
+  "supportMacOS": "For macOS 12 and later",
   "buildInformation": "Build information",
   "buildRelease": "This build was released on {0}",
   "assets": "assets",
diff --git a/src/views/DownloadPage.vue b/src/views/DownloadPage.vue
index 4a11153..1f60a2c 100644
--- a/src/views/DownloadPage.vue
+++ b/src/views/DownloadPage.vue
@@ -18,7 +18,8 @@ const { t } = useI18n();
 const isLoading = ref(true);
 const downloadRelease = ref<DownloadRelease>({} as DownloadRelease);
 const macosBuildUrl = ref("");
-const linuxBuildUrl = ref("");
+const linuxIntelBuildUrl = ref("");
+const linuxArm64BuildUrl = ref("");
 const windowBuildUrl = ref("");
 
 onMounted(() => {
@@ -46,8 +47,10 @@ const fetchBuilds = async () => {
         if (asset.name.endsWith("win_x64.zip")) {
           windowBuildUrl.value = asset.browser_download_url;
         } else if (asset.name.endsWith("linux_x64.tar.gz")) {
-          linuxBuildUrl.value = asset.browser_download_url;
-        } 
+          linuxIntelBuildUrl.value = asset.browser_download_url;
+        } else if (asset.name.endsWith("linux_arm64.tar.gz")) {
+          linuxArm64BuildUrl.value = asset.browser_download_url;
+        }
       } else if (asset.name.startsWith("test-ava-ryujinx")) {
         if (asset.name.endsWith("macos_universal.app.tar.gz")) {
           macosBuildUrl.value = asset.browser_download_url;
@@ -66,111 +69,55 @@ const fetchBuilds = async () => {
   <div>
     <!-- Download -->
     <div class="bg-gray-50">
-      <div
-        class="container xl:max-w-7xl mx-auto px-4 py-16 lg:px-8 lg:py-32 space-y-16"
-      >
+      <div class="container xl:max-w-7xl mx-auto px-4 py-16 lg:px-8 lg:py-32 space-y-16">
         <!-- Heading -->
         <div class="text-center">
-          <i18n-t
-            class="text-3xl md:text-4xl font-extrabold mb-4"
-            keypath="views.download.title1"
-            tag="h2"
-          >
-            <span
-              class="bg-clip-text text-transparent bg-gradient-to-r from-sky-500 to-red-500"
-              >{{ t("views.download.title2") }}</span
-            >
+          <i18n-t class="text-3xl md:text-4xl font-extrabold mb-4" keypath="views.download.title1" tag="h2">
+            <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-500 to-red-500">{{
+              t("views.download.title2") }}</span>
           </i18n-t>
           <div class="w-12 h-1.5 bg-gray-200 rounded-lg mb-3 mx-auto"></div>
-          <i18n-t
-            class="md:text-lg text-gray-600 md:leading-relaxed font-medium lg:w-2/3 mx-auto"
-            keypath="views.download.subTitle"
-            tag="h2"
-          >
-            <a :href="GUIDE_URL" class="text-sky-500 underline"
-              >{{ t("views.download.startupGuide") }}
+          <i18n-t class="md:text-lg text-gray-600 md:leading-relaxed font-medium lg:w-2/3 mx-auto"
+            keypath="views.download.subTitle" tag="h2">
+            <a :href="GUIDE_URL" class="text-sky-500 underline">{{ t("views.download.startupGuide") }}
             </a>
           </i18n-t>
         </div>
 
         <!-- Features -->
-        <div
-          v-if="!isLoading"
-          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6"
-        >
+        <div v-if="!isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
           <!-- Windows -->
-          <a
-            :href="windowBuildUrl"
-            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100"
-          >
+          <a :href="windowBuildUrl"
+            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100">
             <div
-              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0"
-            ></div>
+              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0">
+            </div>
             <div class="relative text-center">
-              <div
-                class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4"
-              >
+              <div class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4">
                 {{ downloadRelease.tag_name }}
               </div>
               <div class="relative w-12 mb-8 text-indigo-500 mx-auto">
-                <img
-                  alt="windows logo"
-                  src="/assets/images/icons/windows.png"
-                />
+                <img alt="windows logo" src="/assets/images/icons/windows.png" />
               </div>
               <h4 class="text-lg font-semibold mb-1 text-gray-900">Windows</h4>
               <p class="leading-relaxed text-gray-500 text-sm font-medium">
                 {{ t("views.download.supportWindows") }}
               </p>
               <div
-                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500"
-              >
-                <span>{{ t("views.download.download") }}</span>
-              </div>
-            </div>
-          </a>
-
-          <!-- Linux -->
-          <a
-            :href="linuxBuildUrl"
-            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100"
-          >
-            <div
-              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0"
-            ></div>
-            <div class="relative text-center">
-              <div
-                class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4"
-              >
-                {{ downloadRelease.tag_name }}
-              </div>
-              <div class="relative w-12 mb-8 text-indigo-500 mx-auto">
-                <img alt="linux logo" src="/assets/images/icons/linux.png" />
-              </div>
-              <h4 class="text-lg font-semibold mb-1 text-gray-900">Linux</h4>
-              <p class="leading-relaxed text-gray-500 text-sm font-medium">
-                {{ t("views.download.supportLinux") }}
-              </p>
-              <div
-                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500"
-              >
+                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500">
                 <span>{{ t("views.download.download") }}</span>
               </div>
             </div>
           </a>
 
           <!-- Mac OS -->
-          <a
-            :href="macosBuildUrl"
-            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100"
-          >
+          <a :href="macosBuildUrl"
+            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100">
             <div
-              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0"
-            ></div>
+              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0">
+            </div>
             <div class="relative text-center">
-              <div
-                class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4"
-              >
+              <div class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4">
                 {{ downloadRelease.tag_name }}
               </div>
               <div class="relative w-12 mb-8 text-indigo-500 mx-auto">
@@ -181,50 +128,86 @@ const fetchBuilds = async () => {
                 {{ t("views.download.supportMacOS") }}
               </p>
               <div
-                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500"
-              >
+                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500">
+                <span>{{ t("views.download.download") }}</span>
+              </div>
+            </div>
+          </a>
+
+          <!-- Linux x86_64 -->
+          <a :href="linuxIntelBuildUrl"
+            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100">
+            <div
+              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0">
+            </div>
+            <div class="relative text-center">
+              <div class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4">
+                {{ downloadRelease.tag_name }}
+              </div>
+              <div class="relative w-12 mb-8 text-indigo-500 mx-auto">
+                <img alt="linux logo" src="/assets/images/icons/linux.png" />
+              </div>
+              <h4 class="text-lg font-semibold mb-1 text-gray-900">Linux</h4>
+              <p class="leading-relaxed text-gray-500 text-sm font-medium">
+                {{ t("views.download.supportLinuxIntel") }}
+              </p>
+              <div
+                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500">
+                <span>{{ t("views.download.download") }}</span>
+              </div>
+            </div>
+          </a>
+
+          <!-- Linux arm64 -->
+          <a :href="linuxArm64BuildUrl"
+            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100">
+            <div
+              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0">
+            </div>
+            <div class="relative text-center">
+              <div class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4">
+                {{ downloadRelease.tag_name }}
+              </div>
+              <div class="relative w-12 mb-8 text-indigo-500 mx-auto">
+                <img alt="linux logo" src="/assets/images/icons/linux.png" />
+              </div>
+              <h4 class="text-lg font-semibold mb-1 text-gray-900">Linux</h4>
+              <p class="leading-relaxed text-gray-500 text-sm font-medium">
+                {{ t("views.download.supportLinuxArm64") }}
+              </p>
+              <div
+                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500">
                 <span>{{ t("views.download.download") }}</span>
               </div>
             </div>
           </a>
         </div>
 
+        <div class="flex justify-center">
+          <a href='https://flathub.org/apps/org.ryujinx.Ryujinx'>
+            <img width='240' alt='Download on Flathub' src='https://flathub.org/api/badge?locale=en' />
+          </a>
+        </div>
+
         <!-- LDN Build -->
-        <div
-          class="p-10 lg:py-10 lg:px-16 bg-white rounded text-center relative"
-        >
+        <div class="p-10 lg:py-10 lg:px-16 bg-white rounded text-center relative">
           <div class="space-y-10">
             <!-- Heading -->
             <div class="text-center">
-              <i18n-t
-                class="text-2xl md:text-2xl font-extrabold mb-4"
-                tag="h2"
-                keypath="views.download.ldnBuildTitle"
-              >
+              <i18n-t class="text-2xl md:text-2xl font-extrabold mb-4" tag="h2" keypath="views.download.ldnBuildTitle">
                 <span class="text-sky-600">{{
                   t("views.download.ldnBuild")
                 }}</span>
               </i18n-t>
-              <h3
-                class="text-lg md:text-xl md:leading-relaxed font-medium text-gray-600"
-              >
+              <h3 class="text-lg md:text-xl md:leading-relaxed font-medium text-gray-600">
                 {{ t("views.download.ldnBuildDescription") }}
               </h3>
             </div>
 
-            <div
-              class="flex flex-col sm:flex-row sm:items-center sm:justify-center space-y-4 sm:space-y-0 sm:space-x-2"
-            >
-              <GButton
-                :href="LDN_BUILD_URL"
-                rounded
-                variant="light-gray"
-                size="elg"
-              >
+            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-center space-y-4 sm:space-y-0 sm:space-x-2">
+              <GButton :href="LDN_BUILD_URL" rounded variant="light-gray" size="elg">
                 <template #icon>
-                  <InformationCircleIcon
-                    class="opacity-50 hi-solid hi-information-circle inline-block w-5 h-5"
-                  />
+                  <InformationCircleIcon class="opacity-50 hi-solid hi-information-circle inline-block w-5 h-5" />
                 </template>
                 {{ t("views.download.learnMore") }}
               </GButton>
@@ -233,39 +216,25 @@ const fetchBuilds = async () => {
         </div>
 
         <!-- Build -->
-        <div
-          v-if="!isLoading"
-          class="md:flex items-center rounded-lg ring-1 ring-gray-50 ring-opacity-5 bg-white"
-        >
+        <div v-if="!isLoading" class="md:flex items-center rounded-lg ring-1 ring-gray-50 ring-opacity-5 bg-white">
           <div class="grow p-5 lg:p-6">
             <h4 class="text-xl font-bold mb-1">
               {{ t("views.download.buildInformation") }}
             </h4>
-            <i18n-t
-              class="leading-relaxed text-gray-500 mb-5"
-              keypath="views.download.buildRelease"
-              tag="p"
-            >
+            <i18n-t class="leading-relaxed text-gray-500 mb-5" keypath="views.download.buildRelease" tag="p">
               <span class="font-semibold">
                 {{ dayjs(downloadRelease.published_at).format("YYYY-MM-DD") }}
               </span>
             </i18n-t>
             <h5 class="flex items-center my-8">
-              <span
-                class="text-sm uppercase tracking-wide text-blue-600 font-semibold mr-3"
-              >
+              <span class="text-sm uppercase tracking-wide text-blue-600 font-semibold mr-3">
                 GitHub
               </span>
-              <span
-                aria-hidden="true"
-                class="grow bg-indigo-50 rounded h-0.5"
-              ></span>
+              <span aria-hidden="true" class="grow bg-indigo-50 rounded h-0.5"></span>
             </h5>
 
             <!-- Github Info -->
-            <div
-              class="lg:flex lg:space-x-12 space-y-4 lg:space-y-0 font-medium"
-            >
+            <div class="lg:flex lg:space-x-12 space-y-4 lg:space-y-0 font-medium">
               <ul class="space-y-4 text-sm">
                 <!-- Assets -->
                 <li class="flex items-center space-x-2">
@@ -298,13 +267,7 @@ const fetchBuilds = async () => {
                 </li>
               </ul>
               <div>
-                <GButton
-                  :href="downloadRelease.html_url"
-                  rounded
-                  variant="sky"
-                  size="lg"
-                  extra-class="space-x-2 w-full"
-                >
+                <GButton :href="downloadRelease.html_url" rounded variant="sky" size="lg" extra-class="space-x-2 w-full">
                   <template #icon>
                     <ExternalLinkIcon class="opacity-50 inline-block w-5 h-5" />
                   </template>
@@ -312,13 +275,7 @@ const fetchBuilds = async () => {
                 </GButton>
               </div>
               <div>
-                <GButton
-                  :href="OLDER_BUILD_URL"
-                  rounded
-                  variant="grey"
-                  size="lg"
-                  extra-class="space-x-2 w-full"
-                >
+                <GButton :href="OLDER_BUILD_URL" rounded variant="grey" size="lg" extra-class="space-x-2 w-full">
                   <template #icon>
                     <ExternalLinkIcon class="opacity-50 inline-block w-5 h-5" />
                   </template>
@@ -333,15 +290,10 @@ const fetchBuilds = async () => {
             <div class="p-5 lg:p-6 text-center rounded-lg bg-sky-50">
               <a :href="downloadRelease.author.html_url">
                 <div>
-                  <img
-                    :src="downloadRelease.author.avatar_url"
-                    alt="Author avatar"
-                    class="w-16 h-16 inline-block"
-                  />
+                  <img :src="downloadRelease.author.avatar_url" alt="Author avatar" class="w-16 h-16 inline-block" />
                 </div>
                 <div
-                  class="inline-flex space-x-1 items-center text-xs uppercase tracking-wider font-semibold px-3 py-1 bg-indigo-200 bg-opacity-50 text-sky-600 rounded-full mb-4"
-                >
+                  class="inline-flex space-x-1 items-center text-xs uppercase tracking-wider font-semibold px-3 py-1 bg-indigo-200 bg-opacity-50 text-sky-600 rounded-full mb-4">
                   <span>{{ downloadRelease.author.login }}</span>
                 </div>
               </a>