feat: use nuxt-aos and improvements

ahmedrangel · Feb 14, 2024 · 1999fef · 1999fef
1 parent 579a519
commit 1999fef
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 41 deletions.
diff --git a/app.vue b/app.vue
@@ -1,11 +1,3 @@
-<script setup>
-const { $AOS } = useNuxtApp();
-
-onMounted(() => {
-  $AOS.init({ once: true, duration: 500 });
-});
-</script>
-
 <template>
   <NuxtLayout>
     <NuxtPage />

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -31,7 +31,8 @@ export default defineNuxtConfig({
   },
   modules: [
     "nuxt-icon",
-    "@nuxtjs/sitemap"
+    "@nuxtjs/sitemap",
+    "nuxt-aos"
   ],
   features: {
     inlineStyles: false,
@@ -59,5 +60,10 @@ export default defineNuxtConfig({
   },
   experimental: {
     viewTransition: true
+  },
+  aos: {
+    once: true,
+    easing: "ease-in-sine",
+    duration: 500
   }
 });
diff --git a/package.json b/package.json
@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@nuxt/eslint-config": "^0.2.0",
-    "aos": "^2.3.4",
     "bootstrap": "^5.3.2",
     "eslint": "^8.56.0",
+    "nuxt-aos": "^1.2.3",
     "nuxt-icon": "^0.6.8"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -89,17 +89,17 @@ const indexTracks = computed (() => {
   <section id="dark" class="cabecera text-white py-5">
     <div class="container pt-4 cabecera-adjust" style="overflow-x: hidden;">
       <div class="row align-items-center">
-        <div class="col-12 col-md-6 text-start d-none d-md-block" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="ease-in-sine">
+        <div class="col-12 col-md-6 text-start d-none d-md-block" data-aos="fade-right">
           <h1 class="display-4 text-uppercase">{{ SITE.name }}</h1>
           <h4 class="my-3 font-weight-light">{{ SITE.description }}</h4>
           <h5 class="mb-0 font-weight-light"><span>Contact: </span><a class="text-white" :href="`mailto:${SITE.email}`" target="_blank">{{ SITE.email }}</a></h5>
         </div>
-        <div class="col-12 col-md-12 text-center d-block d-md-none mt-4 mb-4" data-aos="zoom-in" data-aos-duration="1000" data-aos-easing="ease-in-sine">
+        <div class="col-12 col-md-12 text-center d-block d-md-none mt-4 mb-4" data-aos="zoom-in">
           <h1 class="display-4 text-uppercase mb-0">{{ SITE.name }}</h1>
           <h4 class="mt-2 mb-3 font-weight-light">{{ SITE.description }}</h4>
           <small><p class="mb-0"><span>Contact: </span><a class="text-white" :href="`mailto:${SITE.email}`" target="_blank">{{ SITE.email }}</a></p></small>
         </div>
-        <div class="col-12 col-md-6 row text-end px-0 align-items-center" data-aos="fade-left" data-aos-duration="1000" data-aos-easing="ease-in-sine">
+        <div class="col-12 col-md-6 row text-end px-0 align-items-center" data-aos="fade-left">
           <div class="col-12 col-md-7 d-none d-md-block pe-0 text-secondary">
             <h5>Latest Release:</h5>
             <NuxtLink :to="`releases/${lastTrack.year}${releaseType(lastTrack.link)}/${lastTrack.release}`" class="text-white latest-release-title" :class="{ underline : hover }">
@@ -123,7 +123,7 @@ const indexTracks = computed (() => {
       <h5 class="font-weight-light">Check out my latest releases</h5>
       <div class="row my-4 text-start">
         <!--
-        <div class="col-6 col-lg-3" data-aos="fade-in" data-aos-easing="ease-in-sine">
+        <div class="col-6 col-lg-3" data-aos="fade-in">
           <div class="item">
             <div class="cover">
               <div class="upcoming-container">
@@ -138,7 +138,7 @@ const indexTracks = computed (() => {
             </div>
           </div>
         </div>-->
-        <div v-for="(tracks, index) of indexTracks" :key="index" class="col-6 col-lg-3" data-aos="fade-in" data-aos-easing="ease-in-sine">
+        <div v-for="(tracks, index) of indexTracks" :key="index" class="col-6 col-lg-3" data-aos="fade-in">
           <div class="item">
             <div class="cover">
               <NuxtLink :to="`/releases/${tracks.year}${releaseType(tracks.link)}/${tracks.release}`">
@@ -237,12 +237,12 @@ const indexTracks = computed (() => {
         </div>
       </div>
       <div class="row text-white">
-        <div class="col-lg-6" data-aos="fade-right" data-aos-easing="ease-in-sine">
+        <div class="col-lg-6" data-aos="fade-right">
           <div class="mt-4">
-            <iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1DZ06evO0tCEnL?utm_source=generator&theme=0" width="95%" height="500" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" />
+            <iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1DZ06evO0tCEnL?utm_source=generator&theme=0" width="95%" height="500" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; fullscreen; picture-in-picture" loading="lazy" />
           </div>
         </div>
-        <div class="col-lg-6" data-aos="fade-left" data-aos-easing="ease-in-sine">
+        <div class="col-lg-6" data-aos="fade-left">
           <div class="mt-4">
             <iframe width="95%" height="500" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/38787166&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=true&amp;show_teaser=true&amp;visual=false" />
           </div>
@@ -255,22 +255,22 @@ const indexTracks = computed (() => {
       <h3 class="mt-3 text-uppercase text-white">VIDEOS</h3>
       <h5 class="font-weight-light">Featured youtube videos</h5>
       <div class="row text-white">
-        <div class="col-lg-6 mt-4" data-aos="fade-in" data-aos-easing="ease-in-sine">
+        <div class="col-lg-6 mt-4" data-aos="fade-in">
           <div class="video-container">
             <iframe width="1280" height="720" src="https://www.youtube-nocookie.com/embed/nQ0A1WWxuFY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
           </div>
         </div>
-        <div class="col-lg-6 mt-4" data-aos="fade-in" data-aos-easing="ease-in-sine">
+        <div class="col-lg-6 mt-4" data-aos="fade-in">
           <div class="video-container">
             <iframe width="1280" height="720" src="https://www.youtube-nocookie.com/embed/HRrD3Mj3sEY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
           </div>
         </div>
-        <div class="col-lg-6 mt-4" data-aos="fade-in" data-aos-easing="ease-in-sine">
+        <div class="col-lg-6 mt-4" data-aos="fade-in">
           <div class="video-container">
             <iframe width="1280" height="720" src="https://www.youtube-nocookie.com/embed/-vx3oZ4j4h0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
           </div>
         </div>
-        <div class="col-lg-6 mt-4" data-aos="fade-in" data-aos-easing="ease-in-sine">
+        <div class="col-lg-6 mt-4" data-aos="fade-in">
           <div class="video-container">
             <iframe width="1280" height="720" src="https://www.youtube-nocookie.com/embed/BwKO7sfFVAA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
           </div>
@@ -282,7 +282,7 @@ const indexTracks = computed (() => {
     <div class="container" style="overflow-x: hidden;">
       <h3 class="mt-3 text-uppercase text-white">About</h3>
       <div id="about-desc" class="row">
-        <div class="col-lg-8 my-3 font-weight-light text-justify" data-aos="fade-right" data-aos-easing="ease-in-sine">
+        <div class="col-lg-8 my-3 font-weight-light text-justify" data-aos="fade-right">
           <p>
             Ahmed Rangel, also known as
             <b><a href="https://open.spotify.com/artist/0UFz5jBFwlNKaq1JwESYnX" target="_blank" title="Bayza Spotify">Bayza</a></b>, is a <span id="age">{{ getAge() }}</span> years old electronic/dance music producer from La Chorrera, Panama <i class="em em-flag-pa" aria-role="presentation" aria-label="Panama Flag" />.
@@ -307,7 +307,7 @@ const indexTracks = computed (() => {
             <b><a href="https://www.instagram.com/differenttwinsrecords" target="_blank" title="Storm's Instagram">Different Twins Records</a></b>".
           </p>
         </div>
-        <div class="col-lg-4 text-center"><img id="covers" class="img-fluid shadow" src="/images/bayza-about.jpg" data-aos="fade-left" data-aos-easing="ease-in-sine"></div>
+        <div class="col-lg-4 text-center"><img id="covers" class="img-fluid shadow" src="/images/bayza-about.jpg" data-aos="fade-left"></div>
       </div>
     </div>
   </section>

diff --git a/pages/releases/[years]/[release].vue b/pages/releases/[years]/[release].vue
@@ -69,7 +69,7 @@ const obj = platforms(release);
     <div class="container text-secondary text-center pt-3 pb-4 px-3">
       <h3 class="mt-5 text-capitalize text-white">{{ releaseTrack.title }}</h3>
       <h4 class="font-weight-light mb-0">{{ releaseTrack.artists }}</h4>
-      <div id="reproductor" class="me-5 ms-5 px-5" data-aos="fade-in" data-aos-easing="ease-in-sine">
+      <div id="reproductor" class="me-5 ms-5 px-5" data-aos="fade-in">
         <div class="text-center py-3">
           <div class="video-container">
             <iframe width="1280" height="720" :src="`https://www.youtube-nocookie.com/embed/${releaseTrack.video}`" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen />
@@ -97,7 +97,7 @@ const obj = platforms(release);
             <h5 v-if="releaseTrack.fanlink" class="mb-0"><span class="meta-heading mb-0 text-white">Fanlink:</span></h5>
             <h6 class="mb-2"><span><a class="tag d-inline-flex align-items-center" target="_blank" :href="`https://${releaseTrack.fanlink}`">{{ releaseTrack.fanlink }}<Icon class="external-link ms-1 fa-fw" name="ri:external-link-line" /></a></span></h6>
             <div id="platforms" class="mt-2 mb-1 d-flex flex-wrap justify-content-left">
-              <div v-for="(value, index) of obj" :key="index" class="me-2 mb-2" :title="value.store_title" data-aos="fade-up" data-aos-easing="ease-in-sine">
+              <div v-for="(value, index) of obj" :key="index" class="me-2 mb-2" :title="value.store_title" data-aos="fade-up">
                 <a :class="`icons-fx text-white platform-icons ${value.id}_card rounded-circle`" :href="value.stores" target="_blank">
                   <Icon v-if="value.id !== 'anghami'" class="fa-fw" :name="value.icon" />
                   <span v-else><span class="fab fa-anghami fa-fw" aria-hidden="true">
@@ -115,7 +115,7 @@ const obj = platforms(release);
           <h4 class="m-0 text-white">More <a class="tag" :href="`/releases/${releasePageType(releaseTrack.type).type_page}`">{{ releasePageType(releaseTrack.type).release_type }}</a> by Bayza</h4>
         </div>
         <div class="row">
-          <div v-for="(item, index) of moreTracks" :key="index" class="col-6 col-lg-3" data-aos="fade-in" data-aos-easing="ease-in-sine">
+          <div v-for="(item, index) of moreTracks" :key="index" class="col-6 col-lg-3" data-aos="fade-in">
             <div class="item">
               <div class="cover">
                 <NuxtLink :to="`/releases/${item.year}${releaseType(item.link)}/${item.release}`">

diff --git a/pages/releases/[years]/index.vue b/pages/releases/[years]/index.vue
@@ -51,7 +51,7 @@ useHead({
       <h3 class="mt-5 text-uppercase text-white">Releases</h3>
       <h4 class="font-weight-light">{{ years }}</h4>
       <div class="row my-4 text-start">
-        <div v-for="(tracks, index) of listTracks" :key="index" class="col-6 col-lg-3" data-aos="fade-in" data-aos-easing="ease-in-sine">
+        <div v-for="(tracks, index) of listTracks" :key="index" class="col-6 col-lg-3" data-aos="fade-in">
           <div class="item">
             <div class="cover">
               <NuxtLink :to="`/releases/${tracks.year}${releaseType(tracks.link)}/${tracks.release}`">

diff --git a/pages/releases/index.vue b/pages/releases/index.vue
@@ -37,7 +37,7 @@ const allTracks = computed(() => {
     <div class="container text-secondary text-center py-5">
       <h3 class="mt-5 text-uppercase text-white">All Releases</h3>
       <div class="row my-4 text-start">
-        <div v-for="(tracks, index) of allTracks" :key="index" class="col-6 col-lg-3" data-aos="fade-in" data-aos-easing="ease-in-sine">
+        <div v-for="(tracks, index) of allTracks" :key="index" class="col-6 col-lg-3" data-aos="fade-in">
           <div class="item">
             <div class="cover">
               <NuxtLink :to="`/releases/${tracks.year}${releaseType(tracks.link)}/${tracks.release}`">

diff --git a/plugins/aos.client.js b/plugins/aos.client.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml