v0.2.1

4 files changed, 89 insertions, 67 deletions

diff --git a/components/Details.vue b/components/Details.vue
index 2983bab..a25ac70 100644
--- a/components/Details.vue
+++ b/components/Details.vue
@@ -1,43 +1,68 @@
 <template>
-    <section v-show="data" class="space-y-4">
-        <section v-show="data.bannerImage" class="flex justify-center items-center">
-            <NuxtImg :src="data.bannerImage" class="w-full h-20 md:h-40 object-cover rounded-sm opacity-75" />
-        </section>
-        <section class="flex flex-col">
-            <h2 v-show="data.title.romaji" class="text-secondary text-2xl font-semibold">{{ data.title?.romaji }}</h2>
-            <p v-show="data.title.native" class="text-primary">{{ data.title.native }}</p>
-        </section>
-        <section class="grid grid-cols-[auto,1fr] gap-4">
-            <div class="hidden md:flex">
-                <NuxtImg v-show="data.coverImage && data.coverImage.large" :src="data.coverImage.large"
-                    class="w-full h-72 object-cover rounded-sm" />
-            </div>
-            <div class="flex flex-col gap-2">
-                <div class="flex items-center gap-1">
-                    <p v-show="data.season" class="text-primary">{{ data.season }}</p>
-                    <p v-show="data.year" class="text-primary">{{ data.year }}</p>
+    <section class="space-y-4">
+        <section class="space-y-4">
+            <section v-if="information.info.bannerImage" class="flex justify-center items-center">
+                <NuxtImg :src="information.info.bannerImage"
+                    class="w-full h-20 md:h-40 object-cover rounded-sm opacity-75" />
+            </section>
+            <section class="flex flex-col">
+                <h2 class="text-secondary text-2xl font-semibold">{{ information.info.title.romaji }}</h2>
+                <p class="text-primary">{{ information.info.title.native }}</p>
+            </section>
+            <section class="grid grid-cols-[auto,1fr] gap-4">
+                <div class="hidden md:flex">
+                    <NuxtImg :src="information.info.coverImage.large" class="w-full h-72 object-cover rounded-sm" />
                 </div>
-                <div class="flex flex-wrap items-center gap-1">
-                    <p v-show="data.episodes" class="text-primary bg-secondary rounded-sm px-2">{{ data.episodes }} Episodes
-                    </p>
-                    <p v-show="data.score && data.score.averageScore" class="text-primary bg-secondary rounded-sm px-2">{{
-                        data.score.averageScore }}%</p>
-                    <p v-show="data.format" class="text-primary bg-secondary rounded-sm px-2">{{ data.format }}</p>
-                    <p v-show="data.status" class="text-primary bg-secondary rounded-sm px-2">{{ data.status }}</p>
-                </div>
-                <div class="flex flex-wrap items-center gap-1">
-                    <div v-show="data.genres" v-for="(genre, index) in data.genres" :key="index">
-                        <p class="text-secondary bg-primary rounded-sm px-2">{{ genre }}</p>
+                <div class="flex flex-col gap-2">
+                    <div class="flex items-center gap-1">
+                        <p class="text-primary">{{ information.info.season }}</p>
+                        <p class="text-primary">{{ information.info.year }}</p>
+                    </div>
+                    <div class="flex flex-wrap items-center gap-1">
+                        <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.episodes ?
+                            information.info.episodes : "?" }} Episodes
+                        </p>
+                        <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.score.averageScore }}%</p>
+                        <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.format }}</p>
+                        <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.status }}</p>
                     </div>
+                    <div class="flex flex-wrap items-center gap-1">
+                        <div v-for="(genre, index) in information.info.genres" :key="index">
+                            <p class="text-secondary bg-primary rounded-sm px-2">{{ genre }}</p>
+                        </div>
+                    </div>
+                    <div v-html="information.info.description" class="text-primary w-full h-48 overflow-y-auto pr-2" />
                 </div>
-                <div v-show="data.description" v-html="data.description"
-                    class="text-primary w-full h-48 overflow-y-auto pr-2" />
-            </div>
+            </section>
+        </section>
+        <section class="space-y-4">
+            <section class="flex flex-col">
+                <h2 class="text-secondary text-xl font-semibold">Recommendations</h2>
+                <p class="text-primary text-sm">Recommended For You</p>
+            </section>
+            <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
+                <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1"
+                    v-for="item in information.recommendations.results.slice(0, 8)">
+                    <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" />
+                    <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
+                    <div class="flex items-center gap-1">
+                        <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
+                        <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.status }}</p>
+                    </div>
+                </NuxtLink>
+            </section>
         </section>
     </section>
 </template>
 
 <script setup>
 const { id } = defineProps(["id"]);
-const { data } = await useFetch("https://api.amvstr.me/api/v2/info/" + id, { key: id });
+const { data: information } = await useAsyncData("information", async () => {
+    const [info, recommendations] = await Promise.all([
+        $fetch("https://api.amvstr.me/api/v2/info/" + id),
+        $fetch("https://api.amvstr.me/api/v2/recommendations/" + id)
+    ]);
+
+    return { info, recommendations }
+});
 </script>
\ No newline at end of file
diff --git a/components/Popular.vue b/components/Popular.vue
index 215fbfb..9584719 100644
--- a/components/Popular.vue
+++ b/components/Popular.vue
@@ -5,12 +5,12 @@
             <p class="text-primary text-sm">Most Popular Anime</p>
         </section>
         <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
-            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data.results">
-                <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" />
-                <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
+            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in popular">
+                <NuxtImg :src="item.cover" class="w-full h-44 md:h-56 object-cover rounded-sm" />
+                <h6 class="text-primary text-sm truncate">{{ item.title }}</h6>
                 <div class="flex items-center gap-1">
-                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
-                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.seasonYear }}</p>
+                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.type }}</p>
+                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.year }}</p>
                 </div>
             </NuxtLink>
         </section>
@@ -18,5 +18,15 @@
 </template>
 
 <script setup>
-const { data } = await useFetch("https://api.amvstr.me/api/v2/popular?limit=8");
+const { data: popular } = await useFetch("https://api.amvstr.me/api/v2/popular?limit=8", {
+    transform: (popular) => {
+        return popular.results.map((anime) => ({
+            id: anime.id,
+            title: anime.title.romaji,
+            cover: anime.coverImage.large,
+            type: anime.format,
+            year: anime.seasonYear
+        }));
+    }
+});
 </script>
\ No newline at end of file
diff --git a/components/Recommendations.vue b/components/Recommendations.vue
deleted file mode 100644
index 238e300..0000000
--- a/components/Recommendations.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <section class="space-y-4">
-        <section class="flex flex-col">
-            <h2 class="text-secondary text-xl font-semibold">Recommendations</h2>
-            <p class="text-primary text-sm">Most Popular Anime</p>
-        </section>
-        <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
-            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data.results.slice(0, 8)">
-                <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" />
-                <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
-                <div class="flex items-center gap-1">
-                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
-                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.status }}</p>
-                </div>
-            </NuxtLink>
-        </section>
-    </section>
-</template>
-
-<script setup>
-const { id } = defineProps(["id"]);
-const { data } = await useFetch("https://api.amvstr.me/api/v2/recommendations/" + id, { key: id });
-</script>
\ No newline at end of file
diff --git a/components/Trending.vue b/components/Trending.vue
index efeb050..572a4be 100644
--- a/components/Trending.vue
+++ b/components/Trending.vue
@@ -5,12 +5,12 @@
             <p class="text-primary text-sm">Currently Trending Anime</p>
         </section>
         <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
-            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data.results">
-                <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" />
-                <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
+            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in trending">
+                <NuxtImg :src="item.cover" class="w-full h-44 md:h-56 object-cover rounded-sm" />
+                <h6 class="text-primary text-sm truncate">{{ item.title }}</h6>
                 <div class="flex items-center gap-1">
-                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
-                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.seasonYear }}</p>
+                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.type }}</p>
+                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.year }}</p>
                 </div>
             </NuxtLink>
         </section>
@@ -18,5 +18,15 @@
 </template>
 
 <script setup>
-const { data } = await useFetch("https://api.amvstr.me/api/v2/trending?limit=8");
+const { data: trending } = await useFetch("https://api.amvstr.me/api/v2/trending?limit=8", {
+    transform: (trending) => {
+        return trending.results.map((anime) => ({
+            id: anime.id,
+            title: anime.title.romaji,
+            cover: anime.coverImage.large,
+            type: anime.format,
+            year: anime.seasonYear
+        }));
+    }
+});
 </script>
\ No newline at end of file