From b2d3d7a1305ac6ed155cc1a25c9eab8aaac15000 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Mon, 18 Nov 2024 10:01:08 -0800
Subject: [PATCH] chore: month music page

---
 src/pages/music/index.astro      |  4 +-
 src/pages/music/this-month.astro | 67 ++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/music/this-month.astro

diff --git a/src/pages/music/index.astro b/src/pages/music/index.astro
index b063d80..3e92c67 100644
--- a/src/pages/music/index.astro
+++ b/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 />
diff --git a/src/pages/music/this-month.astro b/src/pages/music/this-month.astro
new file mode 100644
index 0000000..9e17b99
--- /dev/null
+++ b/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>