chore: misc cleanup

src/components/Footer.astro

@@ -2,20 +2,10 @@
 import NavLink from "@components/nav/NavLink.astro";
 import { fetchGlobalData } from "@utils/data/global/index.js";
 
-const { updated } = Astro.props;
 const { nav } = await fetchGlobalData(Astro);
 ---
 
 <footer style={updated ? undefined : "margin-top: var(--spacing-3xl)"}>
-  {
-    updated && (
-      <p class="updated">
-        <em>
-          This page was last updated on {new Date(updated).toLocaleDateString()}
-        </em>
-      </p>
-    )
-  }
   <nav aria-label="Social icons" class="social">
     {
       nav.footer_icons.map((link) => (

src/components/Metadata.astro

@@ -1,150 +0,0 @@
----
-import { escapeHtml } from "@utils/helpers/general.js";
-import { fetchGlobalData } from "@utils/data/global/index.js";
-
-const {
-  schema = "page",
-  pageTitle: titleOverride,
-  description: descriptionOverride,
-  ogImage: ogImageOverride,
-  fullUrl,
-  post,
-  artist,
-  movie,
-  movies,
-  show,
-  tv,
-  book,
-  books,
-  genre,
-  year,
-} = Astro.props;
-const { globals } = await fetchGlobalData(Astro);
-
-let pageTitle = globals.site_name;
-let pageDescription = globals.site_description;
-let ogImage = `${globals.cdn_url}${globals.avatar}`;
-
-switch (schema) {
-  case "blog":
-    pageTitle = post?.title || pageTitle;
-    pageDescription = post?.description || pageDescription;
-    ogImage = `${globals.cdn_url}${post?.image}`;
-    break;
-  case "music":
-  case "music-index":
-  case "music-period":
-    pageTitle = schema === "music" ? `Music / ${titleOverride}` : "Music";
-    if (schema === "music") {
-      ogImage = `${globals.cdn_url}${post?.image}`;
-    } else if (schema === "music-index") {
-      ogImage = `${globals.cdn_url}${movies?.week?.artists[0]?.grid?.image}`;
-    } else if (schema === "music-period") {
-      ogImage = `${globals.cdn_url}${post?.image}`;
-    }
-    break;
-  case "artist":
-    pageTitle = `Artists / ${artist?.name}`;
-    pageDescription = artist?.description || pageDescription;
-    ogImage = `${globals.cdn_url}${artist?.image}`;
-    break;
-  case "genre":
-    pageTitle = `Music / ${genre?.name}`;
-    pageDescription = genre?.description || pageDescription;
-    ogImage = `${globals.cdn_url}${genre?.artists[0]?.image}`;
-    break;
-  case "book":
-    pageTitle = `Books / ${book?.title} by ${book?.author}`;
-    pageDescription = book?.review || book?.description || pageDescription;
-    ogImage = `${globals.cdn_url}${book?.image}`;
-    break;
-  case "books":
-    pageTitle = "Books";
-    const overviewBook = books?.all?.find((b) => b.status === "started");
-    ogImage = `${globals.cdn_url}${overviewBook?.image}`;
-    break;
-  case "books-year":
-    const bookYear = year?.data?.find((b) => b.status === "finished");
-    ogImage = `${globals.cdn_url}${bookYear?.image}`;
-    break;
-  case "movie":
-    pageTitle = `Movies / ${movie?.title}`;
-    if (movie?.rating) {
-      pageTitle += ` (${movie.rating})`;
-    }
-    pageDescription = movie?.review || movie?.description || pageDescription;
-    ogImage = `${globals.cdn_url}${movie?.backdrop}`;
-    break;
-  case "favorite-movies":
-    pageTitle = "Favorite movies";
-    const favoriteMovie = movies?.favorites?.[0];
-    ogImage = `${globals.cdn_url}${favoriteMovie?.backdrop}`;
-    break;
-  case "show":
-    pageTitle = `Show / ${show?.title}`;
-    pageDescription = show?.review || show?.description || pageDescription;
-    ogImage = `${globals.cdn_url}${show?.backdrop}`;
-    break;
-  case "favorite-shows":
-    pageTitle = "Favorite shows";
-    const favoriteShow = tv?.favorites?.[0];
-    ogImage = `${globals.cdn_url}${favoriteShow?.backdrop}`;
-    break;
-  case "watching":
-    pageTitle = "Watching";
-    const overviewMovie = movies?.recentlyWatched?.[0];
-    ogImage = `${globals.cdn_url}${overviewMovie?.backdrop}`;
-    break;
-  case "page":
-    pageTitle = titleOverride || pageTitle;
-    pageDescription = descriptionOverride || pageDescription;
-    break;
-  default:
-    break;
-}
-
-if (titleOverride) pageTitle = titleOverride;
-if (descriptionOverride) pageDescription = descriptionOverride;
-if (ogImageOverride) ogImage = ogImageOverride;
-
-if (pageTitle !== globals.site_name && schema !== "blog")
-  pageTitle = `${pageTitle} / ${globals.site_name}`;
-
-const escapedPageDescription = escapeHtml(pageDescription);
----
-
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta name="color-scheme" content="light dark" />
-<title>{pageTitle}</title>
-<link rel="canonical" href={fullUrl} />
-<meta property="og:title" content={pageTitle} />
-<meta name="description" content={escapedPageDescription} />
-<meta property="og:description" content={escapedPageDescription} />
-<meta property="og:type" content={schema === "blog" ? "article" : "website"} />
-<meta property="og:url" content={fullUrl} />
-<meta property="og:image" content={`${ogImage}?class=w800`} />
-<meta name="theme-color" content={globals.theme_color} />
-<meta name="fediverse:creator" content={globals.mastodon} />
-<meta name="generator" content="Astro" />
-<meta name="robots" content="noai, noimageai" />
-<link
-  href={`${globals.cdn_url}${globals.avatar_transparent}?class=w50`}
-  rel="icon"
-  sizes="any"
-/>
-<link
-  href={`${globals.cdn_url}${globals.avatar_transparent}?class=w50&type=svg`}
-  rel="icon"
-  type="image/svg+xml"
-/>
-<link
-  href={`${globals.cdn_url}${globals.avatar}?class=w800`}
-  rel="apple-touch-icon"
-/>
-<link
-  type="application/atom+xml"
-  rel="alternate"
-  title={`Posts / ${globals.site_name}`}
-  href={`${globals.url}/feeds/posts`}
-/>

src/layouts/Layout.astro

@@ -2,21 +2,20 @@
 import "@styles/index.css";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-import Metadata from "@components/Metadata.astro";
 import { fetchGlobalData } from "@utils/data/global/index.js";
+import { escapeHtml } from "@utils/helpers/general.js";
 
-const {
-  schema = "page",
-  pageTitle,
-  description,
-  ogImage,
-  fullUrl,
-  updated,
-  ...otherProps
-} = Astro.props;
 const { globals } = await fetchGlobalData(Astro);
 const currentUrl = Astro.url.pathname;
 const isProduction = import.meta.env.MODE === "production";
+const {
+  schema = "page",
+  pageTitle = globals.site_name,
+  description = globals.site_description,
+  ogImage = globals.avatar,
+  fullUrl = currentUrl,
+  updated,
+} = Astro.props;
 ---
 
 <!doctype html>
@@ -40,13 +39,43 @@ const isProduction = import.meta.env.MODE === "production";
       type="font/woff2"
       crossorigin="anonymous"
     />
-    <Metadata
+    <meta charset="utf-8" />
-      schema={schema}
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-      pageTitle={pageTitle}
+    <meta name="color-scheme" content="light dark" />
-      description={description}
+    <title>{pageTitle}</title>
-      ogImage={ogImage}
+    <link rel="canonical" href={fullUrl} />
-      fullUrl={fullUrl}
+    <meta property="og:title" content={pageTitle} />
-      {...otherProps}
+    <meta name="description" content={escapeHtml(description)} />
+    <meta property="og:description" content={escapeHtml(description)} />
+    <meta
+      property="og:type"
+      content={schema || "page"}
+    />
+    <meta property="og:url" content={fullUrl} />
+    <meta property="og:image" content={`${globals.cdn_url}${ogImage}?class=w800`} />
+    <meta name="theme-color" content={globals.theme_color} />
+    <meta name="fediverse:creator" content={globals.mastodon} />
+    <meta name="generator" content="Astro" />
+    <meta name="robots" content="noai, noimageai" />
+    <link
+      href={`${globals.cdn_url}${globals.avatar_transparent}?class=w50`}
+      rel="icon"
+      sizes="any"
+    />
+    <link
+      href={`${globals.cdn_url}${globals.avatar_transparent}?class=w50&type=svg`}
+      rel="icon"
+      type="image/svg+xml"
+    />
+    <link
+      href={`${globals.cdn_url}${globals.avatar}?class=w800`}
+      rel="apple-touch-icon"
+    />
+    <link
+      type="application/atom+xml"
+      rel="alternate"
+      title={`Posts / ${globals.site_name}`}
+      href={`${globals.url}/feeds/posts`}
     />
     <script defer src="/scripts/index.js" is:inline></script>
     {
@@ -76,8 +105,7 @@ const isProduction = import.meta.env.MODE === "production";
           <slot />
         </div>
       </main>
-      <Footer updated={updated} />
+      <Footer />
     </div>
-
   </body>
 </html>

src/pages/[permalink].astro

@@ -23,7 +23,6 @@ const currentUrl = Astro.url.pathname;
   pageTitle={page.title}
   description={page.description}
   ogImage={page.open_graph_image}
-  updated={page.updated}
   currentUrl={currentUrl}
 >
   {page.blocks.map((block) => <BlockRenderer block={block} />)}

src/pages/blogroll.astro

@@ -8,14 +8,19 @@ import {
 } from "@tabler/icons-react";
 import { fetchBlogroll } from "@utils/data/blogroll.js";
 
+export const prerender = true;
+
 const blogroll = await fetchBlogroll();
-const currentUrl = Astro.url.pathname;
 const title = "Blogroll";
 const description =
   "These are awesome blogs that I enjoy and you may enjoy too.";
 ---
 
-<Layout pageTitle={title} description={description} currentUrl={currentUrl}>
+<Layout
+  pageTitle={title}
+  description={description}
+  currentUrl={Astro.url.pathname}
+>
   <h2 class="page-title">{title}</h2>
   <p>
     You can <a

src/pages/books/[isbn].astro

@@ -13,12 +13,18 @@ const book = await fetchBookByUrl(Astro.url.pathname);
 if (!book) return Astro.redirect("/404", 404);
 
 const alt = `${book.title}${book.author ? ` by ${book.author}` : ""}`;
-const pageTitle = `Books / ${book.title}`;
+const pageTitle = `${book.title} by ${book.author} / Books`;
-const description = book.description || `Details about the book ${book.title}`;
+const description =
+  book.description || `Details about ${book.title} by ${book.author}.`;
 const { globals } = await fetchGlobalData(Astro);
 ---
 
-<Layout pageTitle={pageTitle} description={description} schema="book">
+<Layout
+  pageTitle={pageTitle}
+  description={description}
+  fullUrl={Astro.url.pathname}
+  ogImage={book.image}
+>
   <a class="back-link" href="/books" title="Go back to the books index page">
     <IconArrowLeft size={18} /> Back to books
   </a>

src/pages/books/index.astro

@@ -6,12 +6,13 @@ import { fetchBooks } from "@utils/data/books.js";
 import { fetchGlobalData } from "@utils/data/global/index.js";
 import { md, htmlTruncate } from "@utils/helpers/general.js";
 
+export const prerender = true;
+
 const books = await fetchBooks();
 const { globals } = await fetchGlobalData(Astro);
 const title = "Currently reading";
 const description = "Here's what I'm reading at the moment.";
 const updated = new Date().toISOString();
-const schema = "books";
 const currentYear = new Date().getFullYear();
 const bookData = books.all
   .filter((book) => book.status === "started")
@@ -32,9 +33,8 @@ const bookYearLinks = (years) =>
 <Layout
   pageTitle={title}
   description={description}
-  updated={updated}
   currentUrl={Astro.url.pathname}
-  schema={schema}
+  ogImage={bookData[0].image}
 >
   <h2 class="page-title">{title}</h2>
   <p>

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

@@ -11,6 +11,8 @@ import { fetchGlobalData } from "@utils/data/global/index.js";
 import { fetchBooks } from "@utils/data/books.js";
 import { DateTime } from "luxon";
 
+export const prerender = true;
+
 const { globals } = await fetchGlobalData(Astro);
 const books = await fetchBooks();
 const { year } = Astro.params;
@@ -42,7 +44,8 @@ const intro = isCurrentYear
 <Layout
   pageTitle={pageTitle}
   description={description}
-  schema="books-year"
+  fullUrl={Astro.url.pathname}
+  ogImage={bookData[0].image}
 >
   <a href="/books" class="back-link">
     <IconArrowLeft size={18} /> Back to books

src/pages/index.astro

@@ -5,23 +5,12 @@ import RecentActivity from "@components/home/RecentActivity.astro";
 import RecentPosts from "@components/home/RecentPosts.astro";
 import { fetchGlobalData } from "@utils/data/global/index.js";
 
+export const prerender = true;
+
 const { globals } = await fetchGlobalData(Astro);
-const schema = "blog";
-const pageTitle = globals.site_name;
-const description = "This is a blog post description";
-const ogImage = globals.cdn_url + globals.avatar;
-const fullUrl = globals.url + "/blog/my-post";
-const themeColor = globals.theme_color;
 ---
 
-<Layout
+<Layout>
-  pageTitle={pageTitle}
-  description={description}
-  ogImage={ogImage}
-  fullUrl={fullUrl}
-  themeColor={themeColor}
-  schema={schema}
->
   <Intro intro={globals.intro} />
   <RecentActivity />
   <RecentPosts />

src/pages/links.astro

@@ -5,6 +5,8 @@ import RssBanner from "@components/blocks/banners/Rss.astro";
 import { fetchLinks } from "@utils/data/links.js";
 import { fetchGlobalData } from "@utils/data/global/index.js";
 
+export const prerender = true;
+
 const { globals } = await fetchGlobalData(Astro);
 const links = await fetchLinks();
 const title = "Links";

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

@@ -2,7 +2,13 @@
 import Layout from "@layouts/Layout.astro";
 import ToggleContent from "@components/utils/ToggleContent.astro";
 import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
-import { IconArrowLeft, IconHeart, IconNeedle, IconMapPin, IconDeviceSpeaker } from "@tabler/icons-react";
+import {
+  IconArrowLeft,
+  IconHeart,
+  IconNeedle,
+  IconMapPin,
+  IconDeviceSpeaker,
+} from "@tabler/icons-react";
 import { fetchGlobalData } from "@utils/data/global/index.js";
 import { fetchArtistByUrl } from "@utils/data/dynamic/artistByUrl.js";
 
@@ -17,7 +23,12 @@ const alt = `${artist.name} / ${artist.country}`;
 const playLabel = artist.total_plays === 1 ? "play" : "plays";
 ---
 
-<Layout pageTitle={pageTitle} description={description} schema="artist">
+<Layout
+  pageTitle={pageTitle}
+  description={description}
+  fullUrl={Astro.url.pathname}
+  {artist.image}
+>
   <a href="/music" class="back-link">
     <IconArrowLeft size={18} /> Back to music
   </a>
@@ -42,25 +53,37 @@ const playLabel = artist.total_plays === 1 ? "play" : "plays";
       <div class="media-meta">
         <span class="title"><strong>{artist.name}</strong></span>
         <span class="sub-meta country">
-          <IconMapPin size={18} /> {artist.country}
+          <IconMapPin size={18} />
+          {artist.country}
         </span>
-        {artist.favorite && (
+        {
-          <span class="sub-meta favorite">
+          artist.favorite && (
-            <IconHeart size={18} /> This is one of my favorite artists!
+            <span class="sub-meta favorite">
-          </span>
+              <IconHeart size={18} /> This is one of my favorite artists!
-        )}
+            </span>
-        {artist.tattoo && (
+          )
-          <span class="sub-meta tattoo">
+        }
-            <IconNeedle size={18} /> I have a tattoo inspired by this artist!
+        {
-          </span>
+          artist.tattoo && (
-        )}
+            <span class="sub-meta tattoo">
-        {artist.total_plays > 0 && (
+              <IconNeedle size={18} /> I have a tattoo inspired by this artist!
-          <span class="sub-meta">
+            </span>
-            <strong class="highlight-text">{artist.total_plays} {playLabel}</strong>
+          )
-          </span>
+        }
-        )}
+        {
+          artist.total_plays > 0 && (
+            <span class="sub-meta">
+              <strong class="highlight-text">
+                {artist.total_plays} {playLabel}
+              </strong>
+            </span>
+          )
+        }
         <span class="sub-meta">
-          <a href={artist.genre.url} title={`Learn more about ${artist.genre.name}`}>
+          <a
+            href={artist.genre.url}
+            title={`Learn more about ${artist.genre.name}`}
+          >
             {artist.genre.name}
           </a>
         </span>
@@ -76,58 +99,69 @@ const playLabel = artist.total_plays === 1 ? "play" : "plays";
       shows={artist.shows}
     />
 
-    {artist.description && (
+    {
-      <>
+      artist.description && (
-        <h2>Overview</h2>
+        <>
-        <ToggleContent content={artist.description} />
+          <h2>Overview</h2>
-      </>
+          <ToggleContent content={artist.description} />
-    )}
+        </>
+      )
+    }
 
-    {artist.concerts && (
+    {
-      <>
+      artist.concerts && (
-        <p id="concerts" class="concerts">
+        <>
-          <IconDeviceSpeaker size={18} /> I've seen this artist live!
+          <p id="concerts" class="concerts">
-        </p>
+            <IconDeviceSpeaker size={18} /> I've seen this artist live!
-        <ul>
+          </p>
-          {artist.concerts.map((concert) => {
+          <ul>
-            const venue = concert.venue_latitude && concert.venue_longitude
+            {artist.concerts.map((concert) => {
-              ? `<a href="https://www.openstreetmap.org/?mlat=${concert.venue_latitude}&mlon=${concert.venue_longitude}#map=18/${concert.venue_latitude}/${concert.venue_longitude}">${concert.venue_name_short}</a>`
+              const venue =
-              : concert.venue_name_short;
+                concert.venue_latitude && concert.venue_longitude
+                  ? `<a href="https://www.openstreetmap.org/?mlat=${concert.venue_latitude}&mlon=${concert.venue_longitude}#map=18/${concert.venue_latitude}/${concert.venue_longitude}">${concert.venue_name_short}</a>`
+                  : concert.venue_name_short;
 
-            return (
+              return (
-              <li>
+                <li>
-                On <strong class="highlight-text">{concert.date.toLocaleString(DateTime.DATE_MED)}</strong>
+                  On{" "}
-                {venue && <> at {venue}</>}
+                  <strong class="highlight-text">
-                {concert.notes && (
+                    {concert.date.toLocaleString(DateTime.DATE_MED)}
-                  <span> — {concert.notes}</span>
+                  </strong>
-                )}
+                  {venue && <> at {venue}</>}
-              </li>
+                  {concert.notes && <span> — {concert.notes}</span>}
-            );
+                </li>
-          })}
+              );
-        </ul>
+            })}
-      </>
+          </ul>
-    )}
+        </>
+      )
+    }
 
-    {artist.albums && (
+    {
-      <>
+      artist.albums && (
-        <table>
+        <>
-          <tr>
+          <table>
-            <th>Album</th>
-            <th>Plays</th>
-            <th>Year</th>
-          </tr>
-          {artist.albums.map((album) => (
             <tr>
-              <td>{album.name}</td>
+              <th>Album</th>
-              <td>{album.total_plays}</td>
+              <th>Plays</th>
-              <td>{album.release_year}</td>
+              <th>Year</th>
             </tr>
-          ))}
+            {artist.albums.map((album) => (
-        </table>
+              <tr>
-        <p>
+                <td>{album.name}</td>
-          <em>These are the albums by this artist that are in my collection, not necessarily a comprehensive discography.</em>
+                <td>{album.total_plays}</td>
-        </p>
+                <td>{album.release_year}</td>
-      </>
+              </tr>
-    )}
+            ))}
+          </table>
+          <p>
+            <em>
+              These are the albums by this artist that are in my collection, not
+              necessarily a comprehensive discography.
+            </em>
+          </p>
+        </>
+      )
+    }
   </article>
 </Layout>

src/pages/posts/[...page].astro

@@ -8,6 +8,8 @@ import Paginator from "@components/nav/Paginator.astro";
 import { md } from "@utils/helpers/general.js";
 import { DateTime } from "luxon";
 
+export const prerender = true;
+
 const posts = await fetchAllPosts();
 const { page } = Astro.props;
 const { globals } = await fetchGlobalData(Astro);

src/pages/posts/[year]/[title].astro

@@ -49,7 +49,6 @@ const htmlContent = md(post.content);
   pageTitle={post.title}
   description={post.description}
   ogImage={post.open_graph_image}
-  updated={post.updated}
   currentUrl={currentUrl}
 >
   <article class="standalone">