refactor: track routes

ahmedrangel · Sep 13, 2024 · f80088d · f80088d
1 parent 1b9f433
commit f80088d
Show file tree

Hide file tree

Showing 12 changed files with 316 additions and 288 deletions.
diff --git a/app/assets/css/bayza.css b/app/assets/css/bayza.css
@@ -251,11 +251,11 @@ b a:hover, b NuxtLink:hover {
 }
 
 .scrolled-down{
-    transform:translateY(-100%); transition: all 0.3s ease-in-out;
+    transform: translateY(-100%);
 }
 
 .scrolled-up{
-    transform:translateY(0); transition: all 0.3s ease-in-out;
+    transform: translateY(0);
 }
 
 #track-info {
@@ -316,8 +316,7 @@ b a:hover, b NuxtLink:hover {
 }
 
 #navbar {
-    background: transparent;
-    font-size: 1.3rem;
+    transition: all 0.3s ease-in-out;
 }
 
 #navbar img {

diff --git a/app/components/Comp/Navbar.vue b/app/components/Comp/Navbar.vue
@@ -3,6 +3,7 @@ const nav = ref("nav");
 const logoNav = ref("logoNav");
 const collapsibleNav = ref("CollapsibleNav");
 const { $bootstrap } = useNuxtApp();
+const scrolledDown = ref(false);
 
 const collapseNav = () => {
   if (collapsibleNav.value.classList.contains("show")) {
@@ -11,16 +12,7 @@ const collapseNav = () => {
 };
 
 const onScroll = () => {
-  if ((document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) || (window.innerWidth < 767)) {
-    nav.value.style.background = "#121212";
-    nav.value.style.fontSize = "1rem";
-    logoNav.value.style.width = 100;
-  }
-  else {
-    nav.value.style.background = "transparent";
-    nav.value.style.fontSize = "1.3rem";
-    logoNav.value.style.width = 130;
-  }
+  scrolledDown.value = (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10 || window.width < 767);
 };
 
 let last_scroll_top = 0;
@@ -45,7 +37,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <nav id="navbar" ref="nav" class="navbar navbar-expand-md navbar-dark px-4 py-2 fixed-top smart-scroll">
+  <nav id="navbar" ref="nav" class="navbar navbar-expand-md navbar-dark px-4 py-2 fixed-top smart-scroll" :class="scrolledDown ? 'bg-darkest h6' : 'bg-transparent h5'">
     <NuxtLink class="navbar-brand" to="/">
       <img ref="logoNav" src="/images/bayza-logo.svg" width="100">
     </NuxtLink>
@@ -61,7 +53,7 @@ onMounted(() => {
           <span id="navbardrop" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Releases</span>
           <div class="dropdown-menu">
             <NuxtLink class="dropdown-item" to="/releases" @click="collapseNav()">All</NuxtLink>
-            <NuxtLink class="dropdown-item" to="/releases/all-bootlegs" @click="collapseNav()">Bootlegs</NuxtLink>
+            <NuxtLink class="dropdown-item" to="/releases/bootlegs" @click="collapseNav()">Bootlegs</NuxtLink>
             <NuxtLink class="dropdown-item" to="/releases/2024" @click="collapseNav()">2024</NuxtLink>
             <NuxtLink class="dropdown-item" to="/releases/2023" @click="collapseNav()">2023</NuxtLink>
             <NuxtLink class="dropdown-item" to="/releases/2022" @click="collapseNav()">2022</NuxtLink>

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -114,13 +114,13 @@ const featuredVideos = [
           <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.id}`" class="text-white latest-release-title" :class="{ underline: hover }">
+              <NuxtLink :to="`/track/${lastTrack.id}`" class="text-white latest-release-title" :class="{ underline: hover }">
                 <h3 class="font-weight-light">{{ lastTrack.title }}</h3>
               </NuxtLink>
               <div><h5 class="font-weight-light">by {{ lastTrack.artists }}</h5></div>
               <small><p class="mb-0 mt-1">{{ dateFormat(lastTrack.date) }}</p></small>
             </div>
-            <NuxtLink :to="`/releases/${lastTrack.year}${releaseType(lastTrack.link)}/${lastTrack.id}`" class="col-12 col-md-5 d-none d-md-block p-0 latest-release-cover" @mouseover="hover=true" @mouseout="hover=false">
+            <NuxtLink :to="`/track/${lastTrack.id}`" class="col-12 col-md-5 d-none d-md-block p-0 latest-release-cover" @mouseover="hover=true" @mouseout="hover=false">
               <div class="me-0 text-start px-2">
                 <img id="covers" class="mx-auto d-flex w-100" :src="`/images/releases/${lastTrack.year}/${lastTrack.cover}.jpg`" alt="" style="max-width:230px;">
               </div>
@@ -152,7 +152,7 @@ const featuredVideos = [
           <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.id}`">
+                <NuxtLink :to="`/track/${tracks.id}`">
                   <div class="overflow-hidden">
                     <img id="covers" class="img-fx img-fluid release-color-covers scale-on-hover" :src="`/images/releases/${tracks.year}/${tracks.cover}.jpg`" :alt="`${tracks.artists} - ${tracks.title}`">
                   </div>
@@ -164,7 +164,7 @@ const featuredVideos = [
             </div>
           </div>
         </div>
-        <NuxtLink class="btn btn-outline-releases px-4 py-1" to="/releases/" data-aos="flip-left">See all releases</NuxtLink>
+        <NuxtLink class="btn btn-outline-releases px-4 py-1" to="/releases" data-aos="flip-left">See all releases</NuxtLink>
       </div>
     </section>
     <section id="music" class="bg-dark text-secondary text-center py-5">

diff --git a/app/pages/releases/[years]/index.vue → app/pages/releases/[years].vue b/app/pages/releases/[years]/index.vue → app/pages/releases/[years].vue
@@ -1,11 +1,12 @@
-<script setup>
+<script setup lang="ts">
 definePageMeta({ layout: "site" });
 
 const { params } = useRoute();
 const { years } = params;
 
 const listTracks = computed(() => {
-  return isBootleg(years).filter(el => new Date(el.date) <= Date.now());
+  if (years === "bootlegs") return tracks.filter(el => el.type === "bootleg");
+  return tracks.filter(el => el.year === Number(years));
 });
 
 if (!listTracks.value[0]) {
@@ -22,12 +23,11 @@ const description = `${listTracks.value[0].year} ${listTracks.value[0].type}`;
 useSeoMeta({
   title: `${years} | ${SITE.name}`,
   description: description,
-  keywords: `releases, ${listTracks.value[0].year}, ${listTracks.value[0].type}, singles, stream, music, dance, EDM`,
   // OG
   ogUrl: `${SITE.url}/releases/${years}`,
   ogType: "website",
   ogTitle: title,
-  ogSieName: SITE.name,
+  ogSiteName: SITE.name,
   ogDescription: description,
   ogImage: `${SITE.url}/${SITE.cover}`,
   ogImageWidth: 300,
@@ -56,7 +56,7 @@ useHead({
           <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.id}`">
+                <NuxtLink :to="`/track/${tracks.id}`">
                   <div class="overflow-hidden">
                     <img id="covers" class="img-fx img-fluid release-color-covers scale-on-hover" :src="`/images/releases/${tracks.year}/${tracks.cover}.jpg`" :alt="`${tracks.artists} - ${tracks.title}`">
                   </div>

diff --git a/app/pages/releases/index.vue b/app/pages/releases/index.vue
@@ -4,7 +4,6 @@ definePageMeta({ layout: "site" });
 useSeoMeta({
   title: `Releases | ${SITE.name}`,
   description: "Releases",
-  keywords: "releases, singles, stream, music, dance, EDM",
   // OG
   ogUrl: `${SITE.url}/releases`,
   ogType: "website",
@@ -28,7 +27,7 @@ useHead({
 });
 
 const allTracks = computed(() => {
-  return tracks.sort((a, b) => new Date(b.date) - new Date(a.date)).filter(el => new Date(el.date) <= Date.now());
+  return tracks.sort((a, b) => new Date(b.date) - new Date(a.date)).filter(el => new Date(el.date) <= Date.now() && el.id);
 });
 </script>
 
@@ -38,11 +37,11 @@ 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">
-          <template v-for="(tracks, index) of allTracks" :key="index">
-            <div v-if="tracks.id" class="col-6 col-lg-3" data-aos="fade-in">
+          <template v-for="(tracks, i) of allTracks" :key="i">
+            <div 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.id}`">
+                  <NuxtLink :to="`/track/${tracks.id}`">
                     <div class="overflow-hidden">
                       <img id="covers" class="img-fx img-fluid release-color-covers scale-on-hover" :src="`/images/releases/${tracks.year}/${tracks.cover}.jpg`" :alt="`${tracks.artists} - ${tracks.title}`">
                     </div>

diff --git a/app/pages/releases/[years]/[release].vue → app/pages/track/[id].vue b/app/pages/releases/[years]/[release].vue → app/pages/track/[id].vue
@@ -1,44 +1,51 @@
-<script setup>
+<script setup lang="ts">
 definePageMeta({ layout: "site" });
 const { params } = useRoute();
-const { years, release } = params;
+const { id } = params;
 
-const releaseTrack = computed(() => {
+const track = computed(() => {
   return tracks.filter((elem) => {
-    return elem.id === release;
+    return elem.id === id;
   })[0];
-});
+}).value;
+
+if (!track) {
+  throw createError({
+    statusCode: 404,
+    message: "Music not found",
+    fatal: true
+  });
+}
 
 const moreTracks = computed(() => {
-  return isReleaseBootleg(years).filter(el => new Date(el.date) <= Date.now()).slice(0, 8);
+  return isReleaseBootleg(track.type).filter(el => Number(new Date(el.date)) <= Date.now() && el.id !== id && el.id).slice(0, 8);
 });
 
-const url = `${SITE.url}/releases/${years}/${release}`;
-const imageUrl = `${SITE.url}/images/releases/${years}/${releaseTrack.value.cover}.jpg`;
-const title = `${releaseTrack.value.artists} - ${releaseTrack.value.title}`;
-const description = releaseTrack.value.description != null ? releaseTrack.value.description : releaseTrack.value.title;
+const url = `${SITE.url}/track/${id}`;
+const imageUrl = `${SITE.url}/images/releases/${track.year}/${track.cover}.jpg`;
+const title = `${track.artists} - ${track.title}`;
+const description = track.description != null ? track.description : track.title;
 
 const schemaOrg = {
   "@context": "http://schema.org",
   "@type": "MusicRecording",
-  "name": releaseTrack.value.title,
+  "name": track.title,
   "url": url,
   "image": imageUrl,
-  "genre": releaseTrack.value.genre,
-  "duration": releaseTrack.value.duration,
-  "datePublished": new Date(releaseTrack.value.date),
+  "genre": track.genre,
+  "duration": track.duration,
+  "datePublished": new Date(track.date),
   "byArtist": [{
     "@type": "MusicGroup",
-    "name": releaseTrack.value.artists
+    "name": track.artists
   }]
 };
 
 useSeoMeta({
-  title: `${years} | ${SITE.name}`,
+  title: `${title} | ${SITE.name}`,
   description: description,
-  keywords: `release, ${releaseTrack.value.title}, ${releaseTrack.value.genre}, ${releaseTrack.value.year}, play, stream, download, fanlink, music, EDM`,
   // OG
-  ogUrl: `${SITE.url}/releases/${years}/${release}`,
+  ogUrl: url,
   ogType: "website",
   ogTitle: title,
   ogSiteName: SITE.name,
@@ -57,13 +64,13 @@ useSeoMeta({
 
 useHead({
   script: [{ type: "application/ld+json", children: JSON.stringify(schemaOrg) }],
-  link: [{ rel: "canonical", href: `${SITE.url}/releases/${years}/${release}` }]
+  link: [{ rel: "canonical", href: url }]
 });
 
 const platformOrder = ["spotify", "apple", "soundcloud", "youtube", "deezer", "beatport", "itunes", "yandex", "vk", "anghami", "amazon-music", "tidal", "tiktok", "bandcamp"];
-const fanlinkKeys = releaseTrack.value?.fanlinks ? (Object.keys(releaseTrack.value.fanlinks)).sort((a, b) => platformOrder.indexOf(a) - platformOrder.indexOf(b)) : null;
+const fanlinkKeys = track?.fanlinks ? (Object.keys(track.fanlinks)).sort((a, b) => platformOrder.indexOf(a) - platformOrder.indexOf(b)) as Platforms[] : null;
 
-const platformMatch = (name) => {
+const platformMatch = (name: string) => {
   return SITE.platforms.find(el => el.id === name);
 };
 </script>
@@ -72,51 +79,51 @@ const platformMatch = (name) => {
   <main>
     <section id="releases" class="bg-darkest">
       <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 v-if="releaseTrack.video" id="reproductor" class="mx-5 px-5 pt-3" data-aos="fade-in">
-          <VideoContainer :video-id="releaseTrack.video" />
+        <h3 class="mt-5 text-capitalize text-white">{{ track.title }}</h3>
+        <h4 class="font-weight-light mb-0">{{ track.artists }}</h4>
+        <div v-if="track.video" id="reproductor" class="mx-5 px-5 pt-3" data-aos="fade-in">
+          <VideoContainer :video-id="track.video" />
         </div>
         <div id="track-info" class="row mt-4 mb-4 pt-3 bg-dark">
           <div class="col-12 col-lg-5 info text-center mb-3 px-3">
-            <img class="img-fx img-fluid release-color-covers" :src="`/images/releases/${releaseTrack.year}/${releaseTrack.cover}.jpg`" :alt="`${releaseTrack.artists} - ${releaseTrack.title}`">
+            <img class="img-fx img-fluid release-color-covers" :src="`/images/releases/${track.year}/${track.cover}.jpg`" :alt="`${track.artists} - ${track.title}`">
           </div>
           <div class="track-info-tags col-12 col-lg-7 meta text-justify px-3">
             <div class="tags">
-              <span v-if="releaseTrack.description">
+              <span v-if="track.description">
                 <h5 class="mb-0"><span class="meta-heading mb-0 text-white">Description:</span></h5>
                 <!-- eslint-disable-next-line vue/no-v-html -->
-                <h6 class="mb-2"><span v-html="releaseTrack.description" /></h6>
+                <h6 class="mb-2"><span v-html="track.description" /></h6>
               </span>
-              <span v-if="releaseTrack.genre">
+              <span v-if="track.genre">
                 <h5 class="mb-0"><span class="meta-heading mb-0 text-white">Genre:</span></h5>
-                <h6 class="mb-2"><span class="tag">{{ releaseTrack.genre }}</span></h6>
+                <h6 class="mb-2"><span class="tag">{{ track.genre }}</span></h6>
               </span>
-              <span v-if="releaseTrack.album">
+              <span v-if="track.album">
                 <h5 class="mb-0"><span class="meta-heading mb-0 text-white">Album:</span></h5>
-                <h6 class="mb-2"><span class="tag">{{ releaseTrack.album }}</span></h6>
+                <h6 class="mb-2"><span class="tag">{{ track.album }}</span></h6>
               </span>
-              <span v-if="releaseTrack.label">
+              <span v-if="track.label">
                 <h5 class="mb-0"><span class="meta-heading mb-0 text-white">Label:</span></h5>
-                <h6 class="mb-2"><span class="tag">{{ releaseTrack.label }}</span></h6>
+                <h6 class="mb-2"><span class="tag">{{ track.label }}</span></h6>
               </span>
-              <span v-if="releaseTrack.date">
+              <span v-if="track.date">
                 <h5 class="mb-0"><span class="meta-heading mb-0 text-white">Release date:</span></h5>
-                <h6 class="mb-2"><span class="tag">{{ dateFormat(releaseTrack.date) }}</span></h6>
+                <h6 class="mb-2"><span class="tag">{{ dateFormat(track.date) }}</span></h6>
               </span>
-              <span v-if="releaseTrack.duration">
+              <span v-if="track.duration">
                 <h5 class="mb-0"><span class="meta-heading mb-0 text-white">Duration:</span></h5>
-                <h6 class="mb-2"><span class="tag">{{ releaseTrack.duration }}</span></h6>
+                <h6 class="mb-2"><span class="tag">{{ track.duration }}</span></h6>
               </span>
-              <span v-if="releaseTrack.fanlink">
+              <span v-if="track.fanlink">
                 <h5 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>
+                <h6 class="mb-2"><span><a class="tag d-inline-flex align-items-center" target="_blank" :href="`https://${track.fanlink}`">{{ track.fanlink }}<Icon class="external-link ms-1 fa-fw" name="ri:external-link-line" /></a></span></h6>
               </span><div id="platforms" class="mt-2 mb-1 d-flex flex-wrap justify-content-left">
                 <template v-for="(platform, i) of fanlinkKeys" :key="i">
-                  <div v-if="releaseTrack?.fanlinks[platform] && platformMatch(platform)" class="m-1" data-aos="fade-up">
-                    <a class="icons-hover text-white platform-icons rounded-3 d-flex justify-content-center align-items-center" :href="releaseTrack.fanlinks[platform]" target="_blank" :title="platformMatch(platform).title" :style="{ background: platformMatch(platform).background, color: platformMatch(platform).color + '!important' }">
-                      <Icon v-if="platformMatch(platform).icon" :name="platformMatch(platform).icon" style="font-size: 25px" />
-                      <img v-else :src="platformMatch(platform).logo" style="height: 25px;">
+                  <div v-if="track.fanlinks && track.fanlinks[platform] && platformMatch(platform)" class="m-1" data-aos="fade-up">
+                    <a class="icons-hover text-white platform-icons rounded-3 d-flex justify-content-center align-items-center" :href="track.fanlinks[platform]" target="_blank" :title="platformMatch(platform)?.title" :style="{ background: platformMatch(platform)?.background, color: platformMatch(platform)?.color + '!important' }">
+                      <Icon v-if="platformMatch(platform)?.icon" :name="String(platformMatch(platform)?.icon)" style="font-size: 25px" />
+                      <img v-else :src="platformMatch(platform)?.logo" style="height: 25px;">
                     </a>
                   </div>
                 </template>
@@ -127,13 +134,13 @@ const platformMatch = (name) => {
         <div style="border-top: 2px solid #bbbbbb; width: 30%;" />
         <div id="more_tracks" class="pt-4 text-start">
           <div id="more_releases" class="pb-4">
-            <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>
+            <h4 class="m-0 text-white">More <a class="tag" :href="`/releases/${releasePageType(track.type).type_page}`">{{ releasePageType(track.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">
+            <div v-for="(item, i) of moreTracks" :key="i" 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.id}`">
+                  <NuxtLink :to="`/track/${item.id}`">
                     <div class="overflow-hidden">
                       <img id="covers" class="img-fx img-fluid release-color-covers scale-on-hover" :src="`/images/releases/${item.year}/${item.cover}.jpg`" :alt="`${item.artists} - ${item.title}`">
                     </div>

diff --git a/app/types/index.d.ts b/app/types/index.d.ts
@@ -0,0 +1,5 @@
+declare global {
+  type Platforms = "amazon" | "amazon-music" | "apple" | "bandcamp" | "beatport" | "deezer" | "download" | "itunes" | "soundcloud" | "spotify" | "tidal" | "tiktok" | "yandex" | "youtube";
+}
+
+export {};