WoA download support + make the buttons nicer

Added a color gitlab logo to top nav

Author: GreemDev

src/components/cta.astro

@@ -8,6 +8,9 @@ export const PLATFORM_LINKS = {
     windows: {
         href: Consts.WINDOWS_URL,
     },
+    windowsarm: {
+        href: Consts.WINDOWSARM_URL,
+    },
     macOS: {
         href: Consts.MACOS_URL,
     },
@@ -25,7 +28,10 @@ type PlaformLinksType = Record<string, { store?: string; href: string }>
 
 let os: string
 if (uaString.includes("Windows")) {
-    os = "windows"
+    if (uaString.includes("ARM"))
+        os = "windowsarm"
+    else
+        os = "windows"
 } else if (uaString.includes("Macintosh")) {
     os = "macOS"
 } else if (uaString.includes("ARM")) {
@@ -50,7 +56,7 @@ const { isDownloadPage = false } = Astro.props
         // as it only leads to the download page
         !(isDownloadPage && os === "unknown") && (
             <div class="dl-button">
-                <CtaButton label="Download" href={href} primary />
+                <CtaButton label="Download" primary />
             </div>
         )
     }
@@ -74,8 +80,14 @@ const { isDownloadPage = false } = Astro.props
 
     .dl-button {
         display: flex;
+        cursor: pointer;
         flex-direction: column;
         gap: 1rem;
     }
 
 </style>
+
+<script is:inline define:vars={{ href }}>
+    document.querySelector("div.dl-button")
+        .addEventListener('click', () => window.open(href, '_blank'))
+</script>

src/components/downloadbutton.astro

@@ -1,13 +1,16 @@
 ---
+
 interface Props {
     href: string
     primary: boolean
+    dl: string
 }
 
-const { href, primary } = Astro.props
+const { href, primary, dl } = Astro.props
+
 ---
 
-<a href={href} class:list={["dl-button", primary && "primary"]}>
+<a class:list={["dl-button", primary && "primary", dl]}>
     <slot />
 </a>
 
@@ -49,4 +52,9 @@ const { href, primary } = Astro.props
             }
         }
     }
-</style>
+</style>
+
+<script is:inline define:vars={{ href, dl }}>
+    document.querySelector("a." + dl)
+        .addEventListener('click', () => window.open(href, '_blank'))
+</script>

src/components/downloadtile.astro

@@ -17,7 +17,7 @@ const { name, stores } = Astro.props
     <div class="cta">
         {
             stores.map((store) => (
-                <DownloadButton href={store.url} primary={store.primary}>
+                <DownloadButton href={store.url} primary={store.primary} dl={store.tag}>
                     {store.name}
                 </DownloadButton>
             ))

src/components/layout/footer.astro

@@ -12,21 +12,15 @@ import "./styleconstants.astro"
         <div class="links">
             <span>Get Started</span>
             <a href="/download">Download</a>
-        </div>
-        <div class="links">
-            <span>Wiki</span>
             <a href="https://git.ryujinx.app/ryubing/ryujinx/-/wikis/Setup-&-Configuration-Guide" target="_blank">Setup Guide</a>
         </div>
         <div class="links socials">
             <span>Socials</span>
             <a href="https://discord.gg/ryujinx">
                 Discord
             </a>
-            <a href="https://bsky.app/profile/ryujinx.app">
-                Bluesky
-            </a>
             <a href="https://git.ryujinx.app/ryubing/ryujinx">
-                Gitlab
+                GitLab
             </a>
         </div>
     </div>

src/components/layout/navbar.astro

@@ -2,6 +2,7 @@
 import NavLinks from "./navlinks.astro"
 import wordmark from "../../assets/wordmark.svg"
 import MenuIcon from "../../assets/menu.svg"
+
 import "./styleconstants.astro"
 ---
 
@@ -42,7 +43,18 @@ import "./styleconstants.astro"
             margin: 0 auto;
         }
 
+        .gitlab-logo {
+          display: flex;
+          width: 32px;
+          height: 32px;
+          transform: translateY(-5px);
+          gap: 1.5rem;
+          z-index: -1;
+          animation: slide-down 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+        }
+
         .links {
+            transform: translateX(-35px);
             display: flex;
             gap: 1.5rem;
 
@@ -62,6 +74,7 @@ import "./styleconstants.astro"
         .wordmark {
             width: 140px;
             max-width: 250px;
+            transform: translateY(-5px);
             height: auto;
             display: block;
         }

src/components/layout/navlinks.astro

@@ -1,7 +1,10 @@
 ---
-
+import GitLabIcon from "../../assets/gitlab.svg"
 ---
 
+<a href="https://git.ryujinx.app">
+    <img class="gitlab-logo" src={GitLabIcon.src} alt="GitLab" />
+</a>
 <a href="/download">Download</a>
 <a href="/donate">Donate</a>
 <a href="https://ldn.ryujinx.app/">LDN</a>

src/pages/download/index.astro

@@ -45,11 +45,13 @@ backgroundColor="#150E2A"
             stores={[
                 {
                     name: "Download x64",
+                    tag: "winx64",
                     url: Consts.WINDOWS_URL,
                     primary: true,
                 },
                 {
                     name: "Download ARM",
+                    tag: "winarm64",
                     url: Consts.WINDOWSARM_URL,
                     primary: true,
                 }
@@ -65,6 +67,7 @@ backgroundColor="#150E2A"
             stores={[
                 {
                     name: "Download",
+                    tag: "macos",
                     url: Consts.MACOS_URL,
                     primary: true,
                 },
@@ -79,11 +82,13 @@ backgroundColor="#150E2A"
             stores={[
                 {
                     name: "Download x64",
+                    tag: "linuxx64",
                     url: Consts.LINUX_URL,
                     primary: true,
                 },
                 {
                     name: "Download ARM",
+                    tag: "linuxarm64",
                     url: Consts.LINUXARM_URL,
                     primary: true,
                 },
@@ -98,11 +103,13 @@ backgroundColor="#150E2A"
             stores={[
                 {
                     name: "Download x64",
+                    tag: "aix64",
                     url: Consts.APPIMAGE_URL,
                     primary: true,
                 },
                                 {
                     name: "Download ARM",
+                    tag: "aiarm64",
                     url: Consts.APPIMAGEARM_URL,
                     primary: true,
                 },