feat: Website Improvements

ci: Updated website workflow trigger paths [skip ci]

ci: Ignored docs path in nightly [skip ci]

ci: Fixed website upload dir (Ammend TODO)

ci: Fixed website workflow cache [skip ci]

ci: Added website build config [skip ci]

docs: Update README.md [skip ci]

fix ios link
added website link
updated special thanks section

docs: Updated Flathub Url, Version in Website

.github/workflows/nightly.yml

@@ -7,7 +7,8 @@ on:
     paths-ignore:
       - "*.md"
       - "docs/**"
-
+      - ".github/workflows/website.yml"
+      - ".github/workflows/release.yml"
 jobs:
   run-tests:
     runs-on: ubuntu-latest

.github/workflows/website.yml

@@ -7,6 +7,7 @@ on:
     branches: ["main"]
     paths:
       - docs/**
+      - .github/workflows/website.yml
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -33,11 +34,24 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          cache-dependency-path: docs/package-lock.json
+          node-version: 20
+          cache: 'npm'
+
+      - name: Build
+        run: |
+           cd docs
+           npm i
+           npm run build
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: "./docs/"
+          path: "./docs/dist/"
 
       - name: Setup Pages
         uses: actions/configure-pages@v5

README.md

@@ -1,6 +1,6 @@
 <img src="./docs/banner.png" width="100%" alt="Banner">
 
-# Syncara
+# [Syncara](https://syncara.app/)
 
 Sync YouTube playlists offline. Because YT Music \<insert reason here\>
 
@@ -88,7 +88,7 @@ Syncara for all platform are primarily released on Github. Tap on your device ic
 
 ### iOS and MacOS
 
-**IOS:** Unsigned (.ipa) builds are available. [Download (IOS) from here](https://github.com/khaled-0/Syncara/releases/latest/download/syncara_unsigned.ipa). <br>
+**IOS:** Unsigned (.ipa) builds are available. [Download (IOS) from here](https://github.com/khaled-0/Syncara/releases/latest/download/syncara_ios_unsigned.ipa). <br>
 **Note:** Use [Sideloadly](https://sideloadly.io/) to install it.
 Here's a [Video tutorial by @ilyassesalama](https://www.youtube.com/watch?v=r91iJ6KRcUs)
 
@@ -103,8 +103,9 @@ Alternatively, you can try the nightly (unstable) build:
 ## Special Thanks
 
 - [@ilyassesalama](https://github.com/ilyassesalama) - For providing https://syncara.app
-
+- [@PranavPurwar](https://github.com/PranavPurwar) - For building the homepage at https://syncara.app
 - To all the open source devs for their wonderful libraries.
+- And to the peoples involved with this project in various ways
 
 ## Star History
 
@@ -114,4 +115,4 @@ Alternatively, you can try the nightly (unstable) build:
    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=khaled-0/Syncara&type=Date" />
    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=khaled-0/Syncara&type=Date" />
  </picture>
-</a>
+</a>

docs/src/App.vue

@@ -77,7 +77,7 @@ if (bigScreen) {
             <img src="./assets/logo.svg" alt="Syncara logo" class="h-24 w-24 lg:h-32 lg:w-32 mb-2" />
             <h1 class="title text-3xl font-semibold">Syncara</h1>
             <h2 class="text-md lg:text-lg text-[var(--md-sys-color-on-surface-variant)] text-pretty mb-1">
-              v1.7.2
+              v0.1.7
             </h2>
             <p class="text-xl text-pretty text-center lg:text-start">
               Carry your playlists everywhere, even when offline
@@ -167,15 +167,15 @@ if (bigScreen) {
         </h2>
 
         <div v-if="bigScreen" class="flex gap-8">
-          <img v-for="ss in screenshots" v-bind:key="ss.src" :src="ss.src"
+          <img v-for="ss in screenshots" v-bind:key="ss" :src="ss"
             class="h-[40vw] hover:scale-110 transform transition duration-300 rounded-2xl"
             alt="Syncara screenshot" />
         </div>
 
         <div v-else class="flex gap-8 ps-24 pe-24">
           <Carousel class="relative w-fit lg:hidden">
             <CarouselContent>
-              <CarouselItem v-for="ss in screenshots" v-bind:key="ss.src">
+              <CarouselItem v-for="ss in screenshots" v-bind:key="ss">
                 <img :src="ss" alt="Syncara screenshot" class="w-[60vw] rounded-2xl" />
               </CarouselItem>
             </CarouselContent>
@@ -305,7 +305,7 @@ if (bigScreen) {
         </h2>
 
         <div class="flex gap-6 justify-center items-center content-center">
-          <a href="https://flathub.org/apps/details/syncara.app">
+          <a href="https://flathub.org/apps/io.github.khaled_0.TubeSync">
             <img src="https://raw.githubusercontent.com/khaled-0/Syncara/main/docs/badges/flathub.png" alt="Flathub"
               class="h-16" />
           </a>