chore: month music page

src/pages/music/index.astro

@@ -55,13 +55,13 @@ if (import.meta.env.MODE === "development") {
       {music.week.totalTracks} tracks
     </strong>{" "}
     this week. Most of that has been{" "}
-    <span set:html={mediaLinks(music.week.genres, "genre", 5)}></span>
+    <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>
+    <a href="/music/concerts">check out the concerts I've been to</a>.
   </p>
   <p class="music">
     <NowPlaying staticContent={nowPlayingStaticContent} client:load />

src/pages/music/this-month.astro

@@ -0,0 +1,67 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Grid from "@components/media/Grid.astro";
+import Chart from "@components/media/music/Chart.astro";
+import { IconMicrophone2, IconVinyl, IconPlaylist } from "@tabler/icons-react";
+import { fetchGlobalData } from "@utils/data/global/index.js";
+import { fetchMusicData } from "@utils/data/music.js";
+import { mediaLinks } from "@utils/helpers/media.js";
+
+const { globals } = await fetchGlobalData(Astro);
+const music = await fetchMusicData();
+
+const title = "This month / Music";
+const description =
+  "This is everything I've been listening to this month — it's collected in a database as I listen to it and displayed here.";
+const image = music.month.artists[0]?.image || "";
+const schema = "music-period";
+
+const artistCount = music.month.artists.length;
+const albumCount = music.month.albums.length;
+const totalTracks = music.month.totalTracks;
+const topGenres = mediaLinks(music.month.genres, "genre", 5);
+---
+
+<Layout
+  pageTitle={title}
+  description={description}
+  fullUrl={Astro.url.pathname}
+  ogImage={image}
+  schema={schema}
+>
+  <h2 class="page-title">{title}</h2>
+  <p>
+    I've listened to <strong class="highlight-text"
+      >{artistCount} artists</strong
+    >,
+    <strong class="highlight-text">{albumCount} albums</strong> and
+    <strong class="highlight-text">{totalTracks} tracks</strong> this month. Most
+    of that has been <span set:html={topGenres} />.
+  </p>
+  <p>
+    <strong class="highlight-text">Take a look at what I've listened to</strong>
+    <a href="/music">this week</a> or <a href="/music/concerts"
+      >check out the concerts I've been to</a
+    >.
+  </p>
+  <hr />
+  <h3 id="artists">
+    <IconMicrophone2 size={18} /> Artists
+  </h3>
+  <Grid
+    globals={globals}
+    data={music.month.artists}
+    shape="square"
+    count={8}
+    loading="eager"
+  />
+  <h3 id="albums">
+    <IconVinyl size={18} /> Albums
+  </h3>
+  <Grid globals={globals} data={music.month.albums} shape="square" count={8} />
+
+  <h3 id="tracks">
+    <IconPlaylist size={18} /> Tracks
+  </h3>
+  <Chart data={music.month.tracks} count={10} />
+</Layout>