ryujinx-archive/Ryujinx-Website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Linux arm64 and Flathub links

Browse source 
Signed-off-by: Mary Guillemard <mary@mary.zone>
This commit is contained in:
Mary Guillemard 2024-02-13 19:31:21 +01:00
parent f838065fd8
commit 8d7c1f284e
2 changed files with 100 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/i18n/locales/en/views/download.json
View file

@ -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",

240
src/views/DownloadPage.vue
View file

@ -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>