From 7fbb752dec6aa281ccf15d288924f9a668d3cdd7 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Mon, 18 Nov 2024 10:07:06 -0800
Subject: [PATCH] chore: watching page

---
 src/pages/music/genres/[slug].astro |  2 +-
 src/pages/music/this-month.astro    |  5 +--
 src/pages/watching/index.astro      | 64 +++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/watching/index.astro

diff --git a/src/pages/music/genres/[slug].astro b/src/pages/music/genres/[slug].astro
index 4ee6dcd..284896f 100644
--- a/src/pages/music/genres/[slug].astro
+++ b/src/pages/music/genres/[slug].astro
@@ -20,7 +20,7 @@ const description = `Discover the music genre ${genre.name}, featuring ${artistC
   pageTitle={pageTitle}
   description={description}
   fullUrl={Astro.url.pathname}
-  schema="genre"
+  ogImage={genre.artists[0].image}
 >
   <a class="back-link" href="/music" title="Go back to the music index page">
     <IconArrowLeft size={18} /> Back to music
diff --git a/src/pages/music/this-month.astro b/src/pages/music/this-month.astro
index 9e17b99..78a17a0 100644
--- a/src/pages/music/this-month.astro
+++ b/src/pages/music/this-month.astro
@@ -13,8 +13,6 @@ 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;
@@ -26,8 +24,7 @@ const topGenres = mediaLinks(music.month.genres, "genre", 5);
   pageTitle={title}
   description={description}
   fullUrl={Astro.url.pathname}
-  ogImage={image}
-  schema={schema}
+  ogImage={music.month.artists[0].image}
 >
   <h2 class="page-title">{title}</h2>
   <p>
diff --git a/src/pages/watching/index.astro b/src/pages/watching/index.astro
new file mode 100644
index 0000000..40d5704
--- /dev/null
+++ b/src/pages/watching/index.astro
@@ -0,0 +1,64 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Hero from "@components/media/watching/Hero.astro";
+import Grid from "@components/media/Grid.astro";
+import Rss from "@components/blocks/banners/Rss.astro";
+import { IconMovie, IconDeviceTvOld, IconStar } from "@tabler/icons-react";
+import { fetchMovies } from "@utils/data/movies.js";
+import { fetchShows } from "@utils/data/tv.js";
+import { shuffleArray } from "@utils/helpers/general.js";
+
+const movies = await fetchMovies();
+const tv = await fetchShows();
+const featuredMovie = shuffleArray(movies.recentlyWatched)[0];
+const favoriteMovies = shuffleArray(movies.favorites);
+const favoriteShows = shuffleArray(tv.favorites);
+
+const title = "Currently watching";
+const description =
+  "Here's all of the TV and movies I've been watching presented in what is (hopefully) an organized fashion.";
+---
+
+<Layout
+  pageTitle={title}
+  description={description}
+  fullUrl={Astro.url.pathname}
+  ogImage={movies.recentlyWatched[0].backdrop}
+>
+  <h2 class="page-title">{title}</h2>
+  <Hero movie={featuredMovie} />
+  <p>{description}</p>
+  <Rss
+    url="/feeds/movies"
+    text="Subscribe to my movies feed or follow along on this page"
+  />
+  <hr />
+  <h3 id="movies">
+    <IconMovie size={18} /> Recent movies
+  </h3>
+  <Grid
+    data={movies.recentlyWatched}
+    shape="vertical"
+    count={6}
+  />
+  <h3 id="tv">
+    <IconDeviceTvOld size={18} /> Recent shows
+  </h3>
+  <Grid
+    data={tv.recentlyWatched}
+    shape="vertical"
+    count={6}
+  />
+  <h3 id="favorite-movies">
+    <a href="/watching/favorite-movies">
+      <IconStar size={18} /> Favorite movies
+    </a>
+  </h3>
+  <Grid data={favoriteMovies} shape="vertical" count={6} />
+  <h3 id="favorite-shows">
+    <a href="/watching/favorite-shows">
+      <IconStar size={18} /> Favorite shows
+    </a>
+  </h3>
+  <Grid data={favoriteShows} shape="vertical" count={6} />
+</Layout>