chore: watching page

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

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>

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>