From 0e47ad92aa30c0076fbf97fb047eaeec264026c1 Mon Sep 17 00:00:00 2001
From: Kenimarru <chehami.kamal@mail.com>
Date: Sat, 6 Jan 2024 16:12:26 +0100
Subject: v0.2.1

---
 app.vue                        | 16 ++++++++
 assets/css/tailwind.scss       | 11 ------
 components/Details.vue         | 89 +++++++++++++++++++++++++++---------------
 components/Popular.vue         | 22 ++++++++---
 components/Recommendations.vue | 23 -----------
 components/Trending.vue        | 22 ++++++++---
 nuxt.config.ts                 |  4 +-
 package-lock.json              |  4 +-
 package.json                   |  2 +-
 9 files changed, 110 insertions(+), 83 deletions(-)
 create mode 100644 app.vue
 delete mode 100644 assets/css/tailwind.scss
 delete mode 100644 components/Recommendations.vue

diff --git a/app.vue b/app.vue
new file mode 100644
index 0000000..66ade36
--- /dev/null
+++ b/app.vue
@@ -0,0 +1,16 @@
+<template>
+    <NuxtLoadingIndicator color="#0A8754" />
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+</template>
+
+<style>
+* {
+    @apply scroll-smooth transition-all font-outfit
+}
+
+body {
+    @apply bg-background
+}
+</style>
\ No newline at end of file
diff --git a/assets/css/tailwind.scss b/assets/css/tailwind.scss
deleted file mode 100644
index f331009..0000000
--- a/assets/css/tailwind.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-* {
-    @apply scroll-smooth transition-all font-outfit
-}
-
-body {
-    @apply bg-background
-}
\ No newline at end of file
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
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 896dbac..5df5281 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 export default defineNuxtConfig({
     modules: ["@nuxtjs/tailwindcss", "@nuxt/image", "@nuxtjs/google-fonts", "nuxt-icon"],
-    devtools: { enabled: false },
-    tailwindcss: { viewer: false, cssPath: "./assets/css/tailwind.scss" },
+    devtools: { enabled: true },
+    tailwindcss: { viewer: false },
     googleFonts: {
         families: {
             Outfit: [400, 500, 600, 700],
diff --git a/package-lock.json b/package-lock.json
index 1cc890b..d769cb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "hiruki",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "hiruki",
-            "version": "0.2.0",
+            "version": "0.2.1",
             "hasInstallScript": true,
             "devDependencies": {
                 "@nuxt/image": "^1.1.0",
diff --git a/package.json b/package.json
index ecb8b59..e067dd6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hiruki",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "private": true,
     "type": "module",
     "scripts": {
-- 
cgit v1.2.3