feat: music index
This commit is contained in:
parent
42237f57cb
commit
09e3662a88
2 changed files with 130 additions and 1 deletions
129
src/pages/music/index.astro
Normal file
129
src/pages/music/index.astro
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
---
|
||||||
|
import Layout from "@layouts/Layout.astro";
|
||||||
|
import Grid from "@components/media/Grid.astro";
|
||||||
|
import Recent from "@components/media/music/Recent.astro";
|
||||||
|
import Chart from "@components/media/music/Chart.astro";
|
||||||
|
import NowPlaying from "@components/blocks/NowPlaying.jsx";
|
||||||
|
import {
|
||||||
|
IconMicrophone2,
|
||||||
|
IconVinyl,
|
||||||
|
IconPlaylist,
|
||||||
|
IconCalendarTime,
|
||||||
|
} from "@tabler/icons-react";
|
||||||
|
import { fetchGlobalData } from "@utils/data/global/index.js";
|
||||||
|
import { fetchMusicData } from "@utils/data/music.js";
|
||||||
|
import { fetchNowPlaying } from "@utils/data/nowPlaying.js";
|
||||||
|
import { fetchAlbumReleases } from "@utils/data/albumReleases.js";
|
||||||
|
import { mediaLinks } from "@utils/helpers/media.js";
|
||||||
|
|
||||||
|
export const prerender = true;
|
||||||
|
|
||||||
|
const { globals } = await fetchGlobalData(Astro);
|
||||||
|
const music = await fetchMusicData();
|
||||||
|
const albumReleases = await fetchAlbumReleases();
|
||||||
|
|
||||||
|
const title = "Music";
|
||||||
|
const description =
|
||||||
|
"This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here.";
|
||||||
|
|
||||||
|
let nowPlayingStaticContent = "Nothing playing.";
|
||||||
|
|
||||||
|
if (import.meta.env.MODE === "development") {
|
||||||
|
const nowPlayingData = await fetchNowPlaying();
|
||||||
|
nowPlayingStaticContent = nowPlayingData.content;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout
|
||||||
|
pageTitle={title}
|
||||||
|
description={description}
|
||||||
|
currentUrl={Astro.url.pathname}
|
||||||
|
ogImage={music.week.artists[0].image}
|
||||||
|
>
|
||||||
|
<h2 class="page-title">{title}</h2>
|
||||||
|
<p>
|
||||||
|
I've listened to{" "}
|
||||||
|
<strong class="highlight-text">
|
||||||
|
{music.week.artists.length} artists
|
||||||
|
</strong>
|
||||||
|
,{" "}
|
||||||
|
<strong class="highlight-text">
|
||||||
|
{music.week.albums.length} albums
|
||||||
|
</strong>
|
||||||
|
, and{" "}
|
||||||
|
<strong class="highlight-text">
|
||||||
|
{music.week.totalTracks} tracks
|
||||||
|
</strong>{" "}
|
||||||
|
this week. Most of that has been{" "}
|
||||||
|
<span set:html={mediaLinks(music.week.genres, "genre", 5)}></span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong class="highlight-text">Take a look at what I've listened to</strong
|
||||||
|
>{" "}
|
||||||
|
<a href="/music/this-month">this month</a> or{" "}
|
||||||
|
<a href="/music/concerts">check out the concerts I've been to.</a>
|
||||||
|
</p>
|
||||||
|
<p class="music">
|
||||||
|
<NowPlaying staticContent={nowPlayingStaticContent} client:load />
|
||||||
|
</p>
|
||||||
|
<hr />
|
||||||
|
<h3 id="artists">
|
||||||
|
<IconMicrophone2 size={24} /> Artists
|
||||||
|
</h3>
|
||||||
|
<Grid
|
||||||
|
globals={globals}
|
||||||
|
data={music.week.artists}
|
||||||
|
shape="square"
|
||||||
|
count={8}
|
||||||
|
loading="eager"
|
||||||
|
/>
|
||||||
|
<h3 id="albums">
|
||||||
|
<IconVinyl size={24} /> Albums
|
||||||
|
</h3>
|
||||||
|
<Grid globals={globals} data={music.week.albums} shape="square" count={8} />
|
||||||
|
<h3 id="tracks">
|
||||||
|
<IconPlaylist size={24} /> Tracks
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
id="tracks-recent"
|
||||||
|
name="track-options"
|
||||||
|
type="radio"
|
||||||
|
aria-hidden="true"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
id="tracks-chart"
|
||||||
|
name="track-options"
|
||||||
|
type="radio"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<label for="tracks-recent" class="button" data-toggle="tracks-recent">
|
||||||
|
Recent
|
||||||
|
</label>
|
||||||
|
<label for="tracks-chart" class="button" data-toggle="tracks-chart">
|
||||||
|
This week
|
||||||
|
</label>
|
||||||
|
<div class="tracks-recent">
|
||||||
|
<Recent globals={globals} data={music.recent} />
|
||||||
|
</div>
|
||||||
|
<div class="tracks-chart">
|
||||||
|
<Chart data={music.week.tracks} count={10} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
albumReleases.upcoming.length > 0 && (
|
||||||
|
<>
|
||||||
|
<h3 id="album-releases">
|
||||||
|
<IconCalendarTime size={24} /> Anticipated albums
|
||||||
|
</h3>
|
||||||
|
<Grid
|
||||||
|
globals={globals}
|
||||||
|
data={albumReleases.upcoming}
|
||||||
|
shape="square"
|
||||||
|
count={8}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Layout>
|
||||||
|
|
@ -16,7 +16,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
|
||||||
}
|
}
|
||||||
|
|
||||||
[for="tracks-recent"] {
|
[for="tracks-recent"] {
|
||||||
margin-right: var(--spacing-xs);
|
margin-right: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#tracks-recent:checked ~ [for="tracks-recent"],
|
#tracks-recent:checked ~ [for="tracks-recent"],
|
||||||
|
|
|
||||||
Reference in a new issue