fix: ogurls + naming for prop; recent listens timestamp

src/components/media/music/Recent.astro

@@ -33,7 +33,7 @@ const { globals } = await fetchGlobalData(Astro);
           </div>
         </div>
         <time datetime={item.chart.played_at}>
-          {new Date(item.chart.played_at).toLocaleString("en-US", {
+          {new Date(item.chart.played_at * 1000).toLocaleString("en-US", {
             timeZone: "America/Los_Angeles",
             month: "long",
             day: "numeric",

src/layouts/Layout.astro

@@ -13,7 +13,7 @@ const {
   pageTitle = globals.site_name,
   description = globals.site_description,
   ogImage = globals.avatar,
-  fullUrl = currentUrl,
+  pageUrl = currentUrl,
 } = Astro.props;
 
 const pageDescription = md(description);
@@ -46,7 +46,7 @@ const pageDescription = md(description);
       type="font/woff2"
       crossorigin="anonymous"
     />
-    <link rel="canonical" href={`${globals.url}${fullUrl}`} />
+    <link rel="canonical" href={`${globals.url}${pageUrl}`} />
     <meta
       property="og:title"
       content={pageTitle !== globals.site_name
@@ -62,7 +62,7 @@ const pageDescription = md(description);
       content={htmlToText(htmlTruncate(pageDescription))}
     />
     <meta property="og:type" content={schema || "page"} />
-    <meta property="og:url" content={fullUrl} />
+    <meta property="og:url" content={`${globals.url}${pageUrl}`} />
     <meta
       property="og:image"
       content={`${globals.cdn_url}${ogImage}?class=w800`}

src/pages/books/[isbn].astro

@@ -21,7 +21,7 @@ const description =
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={book.image}
 >
   <a class="back-link" href="/books" title="Go back to the books index page">

src/pages/books/years/[year].astro

@@ -50,7 +50,7 @@ const intro = isCurrentYear
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={bookData[0]?.image || ""}
 >
   <a href="/books" class="back-link">

src/pages/music/artists/[slug].astro

@@ -29,7 +29,7 @@ const playLabel = artist.total_plays === 1 ? "play" : "plays";
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   {artist.image}
 >
   <a href="/music" class="back-link">

src/pages/music/genres/[slug].astro

@@ -20,7 +20,7 @@ const description = `Discover the music genre ${genre.name}, featuring ${artistC
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={genre.artists[0].image}
 >
   <a class="back-link" href="/music" title="Go back to the music index page">

src/pages/music/this-month/albums/[...page].astro

@@ -44,7 +44,7 @@ const description =
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={shuffleArray(page.data)[0]?.album_art}
 >
   <a href="/music" class="back-link">

src/pages/music/this-month/artists/[...page].astro

@@ -44,7 +44,7 @@ const description = "These are the artists I've been listening to this month. Al
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={shuffleArray(page.data)[0]?.artist_art}
 >
   <a href="/music" class="back-link">

src/pages/music/this-month/index.astro

@@ -26,7 +26,7 @@ const topGenres = mediaLinks(music.month.genres, "genre", 5);
 <Layout
   pageTitle={title}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={music.month.artists[0].image}
 >
   <h2 class="page-title">{title}</h2>

src/pages/music/this-week/albums/[...page].astro

@@ -44,7 +44,7 @@ const description =
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={shuffleArray(page.data)[0]?.album_art}
 >
   <a href="/music" class="back-link">

src/pages/music/this-week/artists/[...page].astro

@@ -44,7 +44,7 @@ const description = "These are the artists I've been listening to this week. All
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={shuffleArray(page.data)[0]?.artist_art}
 >
   <a href="/music" class="back-link">

src/pages/watching/favorites/movies/[...page].astro

@@ -37,7 +37,7 @@ const description = "These are my favorite movies. There are many like them, but
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={shuffleArray(page.data)[0].backdrop}
 >
   <a href="/watching" class="back-link">

src/pages/watching/favorites/shows/[...page].astro

@@ -37,7 +37,7 @@ const description = "These are my favorite TV shows. There are many like them, b
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={shuffleArray(page.data)[0].backdrop}
 >
   <a href="/watching" class="back-link">

src/pages/watching/index.astro

@@ -25,7 +25,7 @@ const description =
 <Layout
   pageTitle={title}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={movies.recentlyWatched[0].backdrop}
 >
   <h2 class="page-title">{title}</h2>

src/pages/watching/movies/[slug].astro

@@ -25,7 +25,7 @@ const alt = `${movie.title} / ${movie.year}${movie.rating ? ` (${movie.rating})`
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={movie.backdrop}
 >
   <a class="back-link" href="/watching" title="Go back to the watching index page">

src/pages/watching/recent/movies/[...page].astro

@@ -41,7 +41,7 @@ const description =
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={shuffleArray(page.data)[0].backdrop}
 >
   <a href="/watching" class="back-link">

src/pages/watching/recent/shows/[...page].astro

@@ -42,7 +42,7 @@ const description = "All of the shows I've watched recently.";
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={shuffleArray(page.data)[0].backdrop}
 >
   <a href="/watching" class="back-link">

src/pages/watching/shows/[slug].astro

@@ -25,7 +25,7 @@ const alt = `${show.title} / ${show.year}`;
 <Layout
   pageTitle={pageTitle}
   description={description}
-  fullUrl={Astro.url.pathname}
+  pageUrl={Astro.url.pathname}
   ogImage={show.backdrop}
 >
   <a class="back-link" href="/watching" title="Go back to the watching index page">