A website inspired by Last.fm that will keep track of your listening statistics
lastfm
music
statistics
Changes on the client side: creating new emtpy pages, updating list item component for artist and creating scrobble count component.
+110
-4
+20
-1
web/components/catalog/ArtistListItem.svelte
+20
-1
web/components/catalog/ArtistListItem.svelte
···
2
2
import { GET_ArtistsByID } from "$routes";
3
3
import { type Artist } from "$schemas/responses";
4
4
import { Link } from "@inertiajs/svelte";
5
+
import Scrobble from "$components/catalog/Scrobble.svelte";
5
6
6
7
type Props = {
7
8
artist: Artist;
···
25
26
26
27
{#if trailing === "scrobbles"}
27
28
<div class="scrobbles">
28
-
{artist.count}
29
+
<Scrobble count={artist.count} />
29
30
</div>
30
31
{/if}
31
32
</article>
···
51
52
52
53
article:has(> .scrobbles) > .text {
53
54
grid-column-end: 3;
55
+
}
56
+
57
+
img {
58
+
width: var(--spacing-10);
59
+
height: var(--spacing-10);
60
+
border-radius: 50%;
61
+
object-fit: cover;
62
+
border: var(--theme-default-border);
63
+
}
64
+
65
+
.text > :global(a) {
66
+
font-size: var(--text-sm);
67
+
line-height: var(--text-sm--line-height);
68
+
font-weight: var(--font-weight-medium);
69
+
70
+
&:hover {
71
+
text-decoration: underline;
72
+
}
54
73
}
55
74
</style>
+27
web/components/catalog/Scrobble.svelte
+27
web/components/catalog/Scrobble.svelte
···
1
+
<script lang="ts">
2
+
type Props = {
3
+
count: number;
4
+
};
5
+
6
+
let { count }: Props = $props();
7
+
</script>
8
+
9
+
<div>
10
+
{count}
11
+
</div>
12
+
13
+
<style>
14
+
div {
15
+
padding-inline: var(--spacing-2);
16
+
height: var(--spacing-6);
17
+
display: flex;
18
+
align-items: center;
19
+
justify-content: center;
20
+
background-color: var(--color-secondary);
21
+
color: var(--color-secondary-contrast);
22
+
font-size: var(--text-xs);
23
+
line-height: var(--text-xs--line-height);
24
+
font-weight: var(--font-weight-medium);
25
+
border-radius: 9999px;
26
+
}
27
+
</style>
+2
-2
web/styles/colors.css
+2
-2
web/styles/colors.css
···
34
34
--theme-default-border: 1px solid var(--color-muted-200);
35
35
}
36
36
37
-
@media (prefers-color-scheme: dark) {
37
+
/*@media (prefers-color-scheme: dark) {
38
38
:root {
39
39
--mixin-color-light-100: #fff 20%;
40
40
--mixin-color-light-200: #fff 50%;
···
73
73
74
74
--theme-default-border: 1px solid var(--color-muted-200);
75
75
}
76
-
}
76
+
}*/
77
77
}
+20
web/views/friends/Index.svelte
+20
web/views/friends/Index.svelte
···
1
+
<script lang="ts">
2
+
type Props = {};
3
+
4
+
let {}: Props = $props();
5
+
</script>
6
+
7
+
<div class="content">
8
+
<header class="header">
9
+
<hgroup>
10
+
<h1 class="h1">Friends</h1>
11
+
<p class="subtitle">
12
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut magnam
13
+
velit, exercitationem quis laboriosam earum fuga!
14
+
</p>
15
+
</hgroup>
16
+
</header>
17
+
</div>
18
+
19
+
<style>
20
+
</style>
+21
-1
web/views/library/artists/Index.svelte
+21
-1
web/views/library/artists/Index.svelte
···
21
21
<header class="header">
22
22
<hgroup>
23
23
<h1 class="h1">Artists</h1>
24
+
<p class="subtitle">
25
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique
26
+
illum, reiciendis officia consequatur harum id amet beatae aliquid
27
+
mollitia fugiat voluptas corrupti repudiandae ad suscipit quae
28
+
explicabo tenetur facilis. Amet, quasi necessitatibus.
29
+
</p>
24
30
</hgroup>
25
31
</header>
26
32
27
-
<section>
33
+
<section class="artists">
28
34
{#each artists.items as item}
29
35
<ArtistListItem artist={item} />
30
36
{/each}
31
37
</section>
32
38
</div>
39
+
40
+
<style>
41
+
.content {
42
+
display: flex;
43
+
flex-direction: column;
44
+
gap: var(--spacing-4);
45
+
}
46
+
47
+
.artists {
48
+
display: flex;
49
+
flex-direction: column;
50
+
gap: var(--spacing-2);
51
+
}
52
+
</style>
+20
web/views/mixtapes/Index.svelte
+20
web/views/mixtapes/Index.svelte
···
1
+
<script lang="ts">
2
+
type Props = {};
3
+
4
+
let {}: Props = $props();
5
+
</script>
6
+
7
+
<div class="content">
8
+
<header class="header">
9
+
<hgroup>
10
+
<h1 class="h1">Mixtapes</h1>
11
+
<p class="subtitle">
12
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut magnam
13
+
velit, exercitationem quis laboriosam earum fuga!
14
+
</p>
15
+
</hgroup>
16
+
</header>
17
+
</div>
18
+
19
+
<style>
20
+
</style>