commit 5fc204339f46146ad0989df8b716eac795ad7f79
parent 4bb3ee3ea642d05001cc409362c92cf97f4769f9
Author: minerva-jupiter <ryouturn@gmail.com>
Date: Thu, 20 Mar 2025 19:28:10 +0900
deploy songlust
Diffstat:
6 files changed, 19 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vite + Vue + TS</title>
+ <title>yt-audio-player</title>
</head>
<body>
<div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
@@ -15,15 +15,14 @@ import { RouterView } from 'vue-router'
<router-link to="/" class="nav-link">Home</router-link>
</li>
<li class="nav-item">
- <router-link to="/artists" class="nav-link">Artists</router-link>
- </li>
- <li class="nav-item">
<router-link to="/about" class="nav-link">About</router-link>
</li>
</ul>
</div>
</nav>
- <RouterView/>
+ <div class="container">
+ <RouterView/>
+ </div>
</div>
</template>
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
@@ -1,11 +1,10 @@
<script setup lang="ts">
import albums from '../assets/albums.json';
-albums[0].Albums[0].items[0].snippet.thumbnails.default.url
</script>
<template>
- <h1>AlbumList</h1>
- <div class="card" style="width: 18rem;" v-for="(Albums, index) in albums[$route.params.artist_id].Albums">
+ <h1>AlbumList: {{ albums[$route.params.artist_id].AlbumArtist }}</h1>
+ <div class="card m-3" style="width: 18rem;" v-for="(Albums, index) in albums[$route.params.artist_id].Albums" @click="() => $router.push(`/artist/${$route.params.artist_id}/album/${index}`)">
<img class="card-img-top" :src=Albums.items[0].snippet.thumbnails.medium.url alt="Album Cover" />
<div class="card-body">
<h5 class="card-title">{{ Albums.AlbumTitle }}</h5>
diff --git a/src/components/ArtistsList.vue b/src/components/ArtistsList.vue
@@ -4,7 +4,7 @@ import albums from '../assets/albums.json';
<template>
<h1>ArtistList</h1>
- <div class="card" style="width: 18rem;" v-for="(artists, index) in albums" @click="() => $router.push(`/albums/${index}`)">
+ <div class="card m-3" style="width: 18rem;" v-for="(artists, index) in albums" @click="() => $router.push(`/artist/${index}`)">
<div class="card-body">
<h5 class="card-title">{{ artists.AlbumArtist }}</h5>
</div>
diff --git a/src/components/SongList.vue b/src/components/SongList.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import albums from '../assets/albums.json';
+</script>
+
+<template>
+ <h1>{{ albums[$route.params.artist_id].Albums[$route.params.album_id].AlbumTitle }}</h1>
+</template>+
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
@@ -1,13 +1,13 @@
import { createRouter, createWebHashHistory } from "vue-router";
import About from "./components/About.vue";
-import HelloWorld from "./components/HelloWorld.vue";
import AlbumList from "./components/AlbumList.vue";
import ArtistsList from "./components/ArtistsList.vue";
+import SongList from "./components/SongList.vue";
const routes = [
- { path: '/', name: "Home", component: HelloWorld },
+ { path: '/', name: "Home", component: ArtistsList },
{ path: '/about', name: "About", component: About },
- { path: '/artists', component: ArtistsList},
- { path: '/albums/:artist_id', component: AlbumList}
+ { path: '/artist/:artist_id', component: AlbumList},
+ { path: '/artist/:artist_id/album/:album_id', component: SongList}
];
export const router = createRouter({
