feat: music index

src/pages/music/index.astro

@@ -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>

src/styles/components/tab-buttons.css

@@ -16,7 +16,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
 }
 
 [for="tracks-recent"] {
-  margin-right: var(--spacing-xs);
+  margin-right: var(--spacing-lg);
 }
 
 #tracks-recent:checked ~ [for="tracks-recent"],