Add a downloads page (#40)

* add github link to navbar

* add downloads page

* translate comment

* Use an automatic nightly link per #14.

* adjust the width so the title doesn't look off

src/components/Download.vue

@@ -0,0 +1,50 @@
+<script setup lang='ts'>
+import { type Ref, ref } from 'vue'
+import Button from './Button.vue'
+
+const releasesArray: Ref<any> = ref(null)
+releasesArray.value = await fetch('https://raw.githubusercontent.com/PlayCover/PlaySite/master/releases.json').then(response =>
+  response.json(),
+).then(data => data)
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center h-auto py-[60px] px-[40px] lg:h-[70vh]">
+    <div class="items-center justify-center mx-auto max-w-[1250px]">
+      <div class="flex md:flex-col flex-col-reverse lg:flex-row justify-center relative">
+        <div class="">
+          <p class="font-lufga text-4xl mt-8 sm:text-5xl lg:text-6xl font-semibold lg:w-[75%] md:mt-0">
+            Choose the version of <span class="text-[#7587F5]">PlayCover</span>
+            you would like to
+            <span class="text-[#66D6D7]">download</span>.
+          </p>
+          <p class="pt-4 text-gray-700 dark:text-gray-300 font-lufga text-lg sm:text-xl lg:w-[50%]">
+            The nightly build has the newest features and bug fixes, but may be unstable.
+            The latest build is thoroughly tested and is recommended for most users.
+          </p>
+        </div>
+        <div class="flex flex-col items-center justify-center gap-2 ease-in relative mx-auto flex-[0_0_auto] max-w-[310px] xxs:max-w-[460px] w-[469px] left-auto h-[535px] right-[0] bottom-0">
+          <a :href="releasesArray[0].assets[0].browser_download_url">
+            <Button class="py-2 px-10 text-[36px] w-auto flex flex-col items-center justify-center" size="lg">
+              Latest
+              <span class="text-[#bbb] text-[14px]">{{ releasesArray[0].name }}</span>
+            </Button>
+          </a>
+          <a href="https://nightly.link/playcover/playcover/workflows/2.nightly_release/develop?status=completed">
+            <Button class="py-1 px-5 text-[24px] w-auto" size="lg">
+              Nightly
+            </Button>
+          </a>
+          <a href="/changelog">
+            <Button class="py-1 px-5 text-[24px] w-auto" size="lg">
+              Older
+            </Button>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+</style>

src/components/NavBar.vue

@@ -55,7 +55,7 @@ onMounted(() => {
         </div>
       </div>
       <div class="hidden md:flex items-center space-x-4">
-        <a href="https://github.com/PlayCover/PlayCover/releases">
+        <a href="/download">
           <Button size="lg"> Download </Button>
         </a>
       </div>

src/components/Release.vue

@@ -43,12 +43,17 @@ const markdownHTML = marked.parse(markdown)
             }}</span>
           </div>
           <div v-html="markdownHTML" />
-          <div class="pt-5 pb-1.5">
+          <div class="pt-5 pb-1.5 flex flex-row gap-3">
             <a :href="props.release.html_url" target="_blank" rel="noreferrer">
               <Button size="sm">
                 Read more
               </Button>
             </a>
+            <a :href="props.release.assets[0].browser_download_url" target="_blank" rel="noreferrer">
+              <Button size="sm">
+                Download
+              </Button>
+            </a>
           </div>
         </div>
       </div>

src/pages/download.astro

@@ -0,0 +1,8 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Downloads from "../components/Download.vue";
+---
+
+<Layout title="Download - PlayCover">
+    <Downloads />
+</Layout>

src/pages/index.astro

@@ -9,7 +9,7 @@ import FeaturedGames from '../components/FeaturedGames.vue';
 		<Home>
 			<FeaturedGames client:load />
 		</Home>
-		<!--  componente feature games como slot de home y que se cargue desde el cliente evitando una super isla -->
+		<!--  Featured games component as a slot for home and loaded from the client to avoid a "super island" -->
 	</main>
 </Layout>
 

src/utils/statics.ts

@@ -63,6 +63,11 @@ const pages = [
     url: 'https://discord.gg/RNCHsQHr3S',
     openInNewTab: true,
   },
+  {
+    name: 'GitHub',
+    url: 'https://github.com/PlayCover/PlayCover',
+    openInNewTab: true,
+  },
 ];
 
 export { featuredGames, pages };