diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index b467210..0a9d050 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,36 +1,36 @@
 ---
-import NavLink from '@components/nav/NavLink.astro';
-import { fetchGlobalData } from '@utils/data/global/index.js';
+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>
-  )}
+<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 => (
-      <NavLink
-          url={link.permalink}
-          title={link.title}
-          icon={link.icon}
-        />
-    ))}
+    {
+      nav.footer_icons.map((link) => (
+        <NavLink url={link.permalink} title={link.title} icon={link.icon} />
+      ))
+    }
   </nav>
   <nav aria-label="Secondary site navigation" class="sub-pages">
-    {nav.footer_text.map((link, index) => (
-      <>
-        <NavLink
-          url={link.permalink}
-          title={link.title}
-          icon={link.icon}
-        />
-        {index < nav.footer_text.length - 1 && <span>/</span>}
-      </>
-    ))}
+    {
+      nav.footer_text.map((link, index) => (
+        <>
+          <NavLink url={link.permalink} title={link.title} icon={link.icon} />
+          {index < nav.footer_text.length - 1 && <span>/</span>}
+        </>
+      ))
+    }
   </nav>
 </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3d7e809..6f6e45b 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,19 +1,23 @@
 ---
-import Menu from '@components/nav/Menu.astro';
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import Menu from "@components/nav/Menu.astro";
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 const { siteName, url } = Astro.props;
 const { nav } = await fetchGlobalData(Astro);
-const isHomePage = url === '/';
+const isHomePage = url === "/";
 ---
 
 <section class="main-title">
   <h1>
-    {isHomePage ? (
-      siteName
-    ) : (
-      <a href="/" tabindex="0">{siteName}</a>
-    )}
+    {
+      isHomePage ? (
+        siteName
+      ) : (
+        <a href="/" tabindex="0">
+          {siteName}
+        </a>
+      )
+    }
   </h1>
   <Menu nav={nav} />
-</section>
\ No newline at end of file
+</section>
diff --git a/src/components/IconMapper.astro b/src/components/IconMapper.astro
index d0a39f2..8858d9a 100644
--- a/src/components/IconMapper.astro
+++ b/src/components/IconMapper.astro
@@ -15,29 +15,29 @@ import {
   IconCoffee,
   IconDeviceWatch,
   IconHeartHandshake,
-} from '@tabler/icons-react';
+} from "@tabler/icons-react";
 
 const { icon } = Astro.props;
 
 const iconComponents = {
   article: IconArticle,
   headphones: IconHeadphones,
-  'device-tv-old': IconDeviceTvOld,
+  "device-tv-old": IconDeviceTvOld,
   books: IconBooks,
   link: IconLink,
-  'info-circle': IconInfoCircle,
+  "info-circle": IconInfoCircle,
   search: IconSearch,
   rss: IconRss,
-  'brand-mastodon': IconBrandMastodon,
+  "brand-mastodon": IconBrandMastodon,
   mail: IconMail,
-  'brand-github': IconBrandGithub,
-  'brand-npm': IconBrandNpm,
+  "brand-github": IconBrandGithub,
+  "brand-npm": IconBrandNpm,
   coffee: IconCoffee,
-  'device-watch': IconDeviceWatch,
-  'heart-handshake': IconHeartHandshake,
+  "device-watch": IconDeviceWatch,
+  "heart-handshake": IconHeartHandshake,
 };
 
 const SelectedIcon = iconComponents[icon?.toLowerCase()] || null;
 ---
 
-{SelectedIcon ? <SelectedIcon size={24} /> : null}
\ No newline at end of file
+{SelectedIcon ? <SelectedIcon size={24} /> : null}
diff --git a/src/components/Metadata.astro b/src/components/Metadata.astro
index f6830e3..482b7ba 100644
--- a/src/components/Metadata.astro
+++ b/src/components/Metadata.astro
@@ -1,6 +1,6 @@
 ---
 import { escapeHtml } from "@utils/helpers/general.js";
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 const {
   schema = "page",
@@ -107,7 +107,8 @@ if (titleOverride) pageTitle = titleOverride;
 if (descriptionOverride) pageDescription = descriptionOverride;
 if (ogImageOverride) ogImage = ogImageOverride;
 
-if (pageTitle !== globals.site_name && schema !== "blog") pageTitle = `${pageTitle} / ${globals.site_name}`;
+if (pageTitle !== globals.site_name && schema !== "blog")
+  pageTitle = `${pageTitle} / ${globals.site_name}`;
 
 const escapedPageDescription = escapeHtml(pageDescription);
 ---
diff --git a/src/components/blocks/AssociatedMedia.astro b/src/components/blocks/AssociatedMedia.astro
index 3f2aef2..368be5e 100644
--- a/src/components/blocks/AssociatedMedia.astro
+++ b/src/components/blocks/AssociatedMedia.astro
@@ -1,4 +1,6 @@
 ---
+import IconMapper from "@components/IconMapper.astro";
+
 const {
   artists = [],
   books = [],
diff --git a/src/components/blocks/BlockRenderer.astro b/src/components/blocks/BlockRenderer.astro
index 02c0c35..2ac4255 100644
--- a/src/components/blocks/BlockRenderer.astro
+++ b/src/components/blocks/BlockRenderer.astro
@@ -3,17 +3,17 @@ import { fetchAllPosts } from "@data/posts.js";
 import { fetchAnalyticsData } from "@data/analytics.js";
 import { fetchLinks } from "@data/links.js";
 
-import AddonLinks from '@components/blocks/links/AddonLinks.astro';
-import AssociatedMedia from '@components/blocks//AssociatedMedia.astro';
-import GitHub from '@components/blocks/banners/GitHub.astro';
-import Hero from '@components/blocks//Hero.astro';
-import Modal from '@components/blocks//Modal.astro';
-import Npm from '@components/blocks/banners/Npm.astro';
-import Rss from '@components/blocks/banners/Rss.astro';
-import YouTubePlayer from '@components/blocks//YouTubePlayer.astro';
+import AddonLinks from "@components/blocks/links/AddonLinks.astro";
+import AssociatedMedia from "@components/blocks//AssociatedMedia.astro";
+import GitHub from "@components/blocks/banners/GitHub.astro";
+import Hero from "@components/blocks//Hero.astro";
+import Modal from "@components/blocks//Modal.astro";
+import Npm from "@components/blocks/banners/Npm.astro";
+import Rss from "@components/blocks/banners/Rss.astro";
+import YouTubePlayer from "@components/blocks//YouTubePlayer.astro";
 
-import { md } from '@utils/helpers/general.js';
-import { getPopularPosts } from '@utils/getPopularPosts.js';
+import { md } from "@utils/helpers/general.js";
+import { getPopularPosts } from "@utils/getPopularPosts.js";
 
 const analytics = await fetchAnalyticsData();
 const links = await fetchLinks();
@@ -22,42 +22,26 @@ const popularPosts = getPopularPosts(posts, analytics);
 const { block } = Astro.props;
 ---
 
-{block.type === 'addon_links' && (
-  <AddonLinks popularPosts={popularPosts} links={links} />
-)}
+{
+  block.type === "addon_links" && (
+    <AddonLinks popularPosts={popularPosts} links={links} />
+  )
+}
 
-{block.type === 'associated_media' && (
-  <AssociatedMedia media={block.media} />
-)}
+{block.type === "associated_media" && <AssociatedMedia media={block.media} />}
 
-{block.type === 'divider' && (
-  <div set:html={md(block.markup)}></div>
-)}
+{block.type === "divider" && <div set:html={md(block.markup)} />}
 
-{block.type === 'github_banner' && (
-  <GitHub url={block.url} />
-)}
+{block.type === "github_banner" && <GitHub url={block.url} />}
 
-{block.type === 'hero' && (
-  <Hero image={block.image} alt={block.alt} />
-)}
+{block.type === "hero" && <Hero image={block.image} alt={block.alt} />}
 
-{block.type === 'markdown' && (
-  <div set:html={md(block.text)}></div>
-)}
+{block.type === "markdown" && <div set:html={md(block.text)} />}
 
-{block.type === 'npm_banner' && (
-  <Npm url={block.url} command={block.command} />
-)}
+{block.type === "npm_banner" && <Npm url={block.url} command={block.command} />}
 
-{block.type === 'modal' && (
-  <Modal content={block.content} />
-)}
+{block.type === "modal" && <Modal content={block.content} />}
 
-{block.type === 'rss_banner' && (
-  <Rss url={block.url} text={block.text} />
-)}
+{block.type === "rss_banner" && <Rss url={block.url} text={block.text} />}
 
-{block.type === 'youtube_player' && (
-  <YouTubePlayer url={block.url} />
-)}
\ No newline at end of file
+{block.type === "youtube_player" && <YouTubePlayer url={block.url} />}
diff --git a/src/components/blocks/Hero.astro b/src/components/blocks/Hero.astro
index 38d040a..95b857a 100644
--- a/src/components/blocks/Hero.astro
+++ b/src/components/blocks/Hero.astro
@@ -1,8 +1,8 @@
 ---
-import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 const { image, alt } = Astro.props;
-const globals = await fetchGlobals(Astro);
+const { globals } = await fetchGlobalData(Astro);
 ---
 
 <div class="hero">
diff --git a/src/components/blocks/NowPlaying.astro b/src/components/blocks/NowPlaying.astro
index cfcaf08..d41968b 100644
--- a/src/components/blocks/NowPlaying.astro
+++ b/src/components/blocks/NowPlaying.astro
@@ -1,7 +1,7 @@
 ---
-import { fetchNowPlaying } from '@utils/data/nowPlaying.js';
+import { fetchNowPlaying } from "@utils/data/nowPlaying.js";
 
-const isProduction = import.meta.env.MODE === 'production';
+const isProduction = import.meta.env.MODE === "production";
 const nowPlayingData = await fetchNowPlaying();
 ---
 
@@ -10,12 +10,12 @@ const nowPlayingData = await fetchNowPlaying();
   <p>{nowPlayingData.content}</p>
 </noscript>
 
-{isProduction && (<script type="module">
+{isProduction && (<script type="module" is:inline>
   async function updateNowPlaying() {
-    const response = await fetch('/api/now-playing');
+    const response = await fetch("/api/now-playing");
     if (response.ok) {
       const data = await response.json();
-      document.getElementById('now-playing-content').innerHTML = data.content;
+      document.getElementById("now-playing-content").innerHTML = data.content;
     }
   }
 
diff --git a/src/components/blocks/YouTubePlayer.astro b/src/components/blocks/YouTubePlayer.astro
index 1040ecd..fb341c7 100644
--- a/src/components/blocks/YouTubePlayer.astro
+++ b/src/components/blocks/YouTubePlayer.astro
@@ -1,7 +1,7 @@
 ---
-import YoutubeVideo from '@npm/youtube-video-element/dist/react.js';
+import YoutubeVideo from "@npm/youtube-video-element/dist/react.js";
 
 const { url } = Astro.props;
 ---
 
-<YoutubeVideo src={url} controls />
\ No newline at end of file
+<YoutubeVideo src={url} controls />
diff --git a/src/components/blocks/banners/Error.astro b/src/components/blocks/banners/Error.astro
index 1cb1034..b61d0a1 100644
--- a/src/components/blocks/banners/Error.astro
+++ b/src/components/blocks/banners/Error.astro
@@ -1,8 +1,9 @@
 ---
-import { IconAlertCircle } from '@tabler/icons-react';
+import { IconAlertCircle } from "@tabler/icons-react";
 
-const { text } = Astro.props
+const { text } = Astro.props;
 ---
+
 <div class="banner error">
-  <p><IconAlertCircle size={24} />{ text }</p>
-</div>
\ No newline at end of file
+  <p><IconAlertCircle size={24} />{text}</p>
+</div>
diff --git a/src/components/blocks/banners/GitHub.astro b/src/components/blocks/banners/GitHub.astro
index d294c77..87a6111 100644
--- a/src/components/blocks/banners/GitHub.astro
+++ b/src/components/blocks/banners/GitHub.astro
@@ -1,9 +1,13 @@
 ---
-import { IconBrandGithub } from '@tabler/icons-react';
+import { IconBrandGithub } from "@tabler/icons-react";
 
 const { url } = Astro.props;
 ---
 
 <div class="banner github">
-  <p><IconBrandGithub size={24} /> Take a look at <a href={url}>the GitHub repository for this project</a>. (Give it a star if you feel like it.)</p>
-</div>
\ No newline at end of file
+  <p>
+    <IconBrandGithub size={24} /> Take a look at <a href={url}
+      >the GitHub repository for this project</a
+    >. (Give it a star if you feel like it.)
+  </p>
+</div>
diff --git a/src/components/blocks/banners/Npm.astro b/src/components/blocks/banners/Npm.astro
index bbde0d3..15e878d 100644
--- a/src/components/blocks/banners/Npm.astro
+++ b/src/components/blocks/banners/Npm.astro
@@ -1,5 +1,5 @@
 ---
-import { IconBrandNpm } from '@tabler/icons-react';
+import { IconBrandNpm } from "@tabler/icons-react";
 
 const { url, command } = Astro.props;
 ---
@@ -7,6 +7,7 @@ const { url, command } = Astro.props;
 <div class="banner npm">
   <p>
     <IconBrandNpm size={24} />
-    <a href={url}>You can take a look at this package on NPM</a> or install it by running <code>{command}</code>.
+    <a href={url}>You can take a look at this package on NPM</a> or install it by
+    running <code>{command}</code>.
   </p>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/blocks/banners/OldPost.astro b/src/components/blocks/banners/OldPost.astro
index 74126ca..4ff0e32 100644
--- a/src/components/blocks/banners/OldPost.astro
+++ b/src/components/blocks/banners/OldPost.astro
@@ -1,14 +1,17 @@
 ---
-import { IconClockX } from '@tabler/icons-react';
+import { IconClockX } from "@tabler/icons-react";
 
 const { isOldPost } = Astro.props;
 ---
 
-{isOldPost && (
-  <div class="banner old-post">
-    <p>
-      <IconClockX size={24} />
-      This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.
-    </p>
-  </div>
-)}
\ No newline at end of file
+{
+  isOldPost && (
+    <div class="banner old-post">
+      <p>
+        <IconClockX size={24} />
+        This post is over 3 years old. I've probably changed my mind since it
+        was written and it <em>could</em> be out of date.
+      </p>
+    </div>
+  )
+}
diff --git a/src/components/blocks/banners/Rss.astro b/src/components/blocks/banners/Rss.astro
index 88ee308..07fb99b 100644
--- a/src/components/blocks/banners/Rss.astro
+++ b/src/components/blocks/banners/Rss.astro
@@ -1,5 +1,5 @@
 ---
-import { IconRss } from '@tabler/icons-react';
+import { IconRss } from "@tabler/icons-react";
 
 const { url, text } = Astro.props;
 ---
@@ -9,4 +9,4 @@ const { url, text } = Astro.props;
     <IconRss size={24} />
     <a href={url}>{text}</a>.
   </p>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/blocks/banners/Warning.astro b/src/components/blocks/banners/Warning.astro
index f91f433..c850160 100644
--- a/src/components/blocks/banners/Warning.astro
+++ b/src/components/blocks/banners/Warning.astro
@@ -1,5 +1,5 @@
 ---
-import { IconAlertTriangle } from '@tabler/icons-react';
+import { IconAlertTriangle } from "@tabler/icons-react";
 
 const { text } = Astro.props;
 ---
@@ -9,4 +9,4 @@ const { text } = Astro.props;
     <IconAlertTriangle size={24} />
     {text}
   </p>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/blocks/links/PopularPosts.astro b/src/components/blocks/links/PopularPosts.astro
index e52f5bc..3a7511f 100644
--- a/src/components/blocks/links/PopularPosts.astro
+++ b/src/components/blocks/links/PopularPosts.astro
@@ -1,21 +1,24 @@
 ---
 const { popularPosts } = Astro.props;
-import { IconChartBarPopular } from '@tabler/icons-react';
+import { IconChartBarPopular } from "@tabler/icons-react";
 ---
-{popularPosts && popularPosts.length > 0 && (
-  <article>
-    <h3>
-      <a class="article" href="/posts">
-        <IconChartBarPopular size={24} />
-        Popular posts
-      </a>
-    </h3>
-    <ol type="1">
-      {popularPosts.slice(0, 5).map((post) => (
-        <li>
-          <a href={post.url}>{post.title}</a>
-        </li>
-      ))}
-    </ol>
-  </article>
-)}
+
+{
+  popularPosts && popularPosts.length > 0 && (
+    <article>
+      <h3>
+        <a class="article" href="/posts">
+          <IconChartBarPopular size={24} />
+          Popular posts
+        </a>
+      </h3>
+      <ol type="1">
+        {popularPosts.slice(0, 5).map((post) => (
+          <li>
+            <a href={post.url}>{post.title}</a>
+          </li>
+        ))}
+      </ol>
+    </article>
+  )
+}
diff --git a/src/components/blocks/links/RecentLinks.astro b/src/components/blocks/links/RecentLinks.astro
index 71930cf..89c090b 100644
--- a/src/components/blocks/links/RecentLinks.astro
+++ b/src/components/blocks/links/RecentLinks.astro
@@ -1,26 +1,32 @@
 ---
 const { links } = Astro.props;
-import { IconLink } from '@tabler/icons-react';
+import { IconLink } from "@tabler/icons-react";
 ---
-{links && links.length > 0 && (
-  <article>
-    <h3>
-      <a class="link" href="/links">
-        <IconLink size={24} />
-        Recent links
-      </a>
-    </h3>
-    <ul>
-      {links.slice(0, 5).map((link) => (
-        <li>
-          <a href={link.link} title={link.title}>
-            {link.title}
-          </a>
-          {link.author && (
-            <> via <a href={link.author.url}>{link.author.name}</a></>
-          )}
-        </li>
-      ))}
-    </ul>
-  </article>
-)}
+
+{
+  links && links.length > 0 && (
+    <article>
+      <h3>
+        <a class="link" href="/links">
+          <IconLink size={24} />
+          Recent links
+        </a>
+      </h3>
+      <ul>
+        {links.slice(0, 5).map((link) => (
+          <li>
+            <a href={link.link} title={link.title}>
+              {link.title}
+            </a>
+            {link.author && (
+              <>
+                {" "}
+                via <a href={link.author.url}>{link.author.name}</a>
+              </>
+            )}
+          </li>
+        ))}
+      </ul>
+    </article>
+  )
+}
diff --git a/src/components/home/RecentActivity.astro b/src/components/home/RecentActivity.astro
index 0027473..0884455 100644
--- a/src/components/home/RecentActivity.astro
+++ b/src/components/home/RecentActivity.astro
@@ -1,12 +1,12 @@
 ---
-import { fetchMusicData } from '@utils/data/music.js';
-import { fetchShows } from '@utils/data/tv.js';
-import { fetchMovies } from '@utils/data/movies.js';
-import { fetchBooks } from '@utils/data/books.js';
-import { fetchLinks } from '@utils/data/links.js';
-import { IconActivity } from '@tabler/icons-react';
+import { fetchMusicData } from "@utils/data/music.js";
+import { fetchShows } from "@utils/data/tv.js";
+import { fetchMovies } from "@utils/data/movies.js";
+import { fetchBooks } from "@utils/data/books.js";
+import { fetchLinks } from "@utils/data/links.js";
+import { IconActivity } from "@tabler/icons-react";
 
-import Rss from '@components/blocks/banners/Rss.astro';
+import Rss from "@components/blocks/banners/Rss.astro";
 
 const music = await fetchMusicData();
 const tv = await fetchShows();
@@ -27,17 +27,42 @@ const link = links[0];
     Recent activity
   </h2>
   <ul>
-    <li><span class="music">Top track this week:</span> <a href={track.artist_url}>{track.track_name} by {track.artist_name}</a></li>
-    <li><span class="tv">Last episode watched:</span> <strong class="highlight-text">{show.formatted_episode}</strong> of <a href={show.url}>{show.title}</a></li>
-    <li><span class="movies">Last movie watched:</span> <a href={movie.url}>{movie.title}</a>{movie.rating ? ` (${movie.rating})` : ''}</li>
-    <li><span class="books">Last book finished:</span> <a href={book.url}>{book.title}</a> by {book.author}{book.rating ? ` (${book.rating})` : ''}</li>
+    <li>
+      <span class="music">Top track this week:</span>
+      <a href={track.artist_url}>{track.track_name} by {track.artist_name}</a>
+    </li>
+    <li>
+      <span class="tv">Last episode watched:</span>
+      <strong class="highlight-text">{show.formatted_episode}</strong> of <a
+        href={show.url}>{show.title}</a>
+    </li>
+    <li>
+      <span class="movies">Last movie watched:</span>
+      <a href={movie.url}>{movie.title}</a>{
+        movie.rating ? ` (${movie.rating})` : ""
+      }
+    </li>
+    <li>
+      <span class="books">Last book finished:</span>
+      <a href={book.url}>{book.title}</a> by {book.author}{
+        book.rating ? ` (${book.rating})` : ""
+      }
+    </li>
     <li>
       <span class="link">Last link shared:</span>
       <a href={link.link}>{link.title}</a>
-      {link.author && (
-        <span> via <a href={link.author.url}>{link.author.name}</a></span>
-      )}
+      {
+        link.author && (
+          <span>
+            {" "}
+            via <a href={link.author.url}>{link.author.name}</a>
+          </span>
+        )
+      }
     </li>
   </ul>
-  <Rss url="/feeds" text="Subscribe to my movies, books, links or activity feed(s)" />
-</article>
\ No newline at end of file
+  <Rss
+    url="/feeds"
+    text="Subscribe to my movies, books, links or activity feed(s)"
+  />
+</article>
diff --git a/src/components/home/RecentPosts.astro b/src/components/home/RecentPosts.astro
index 32be80c..77222d8 100644
--- a/src/components/home/RecentPosts.astro
+++ b/src/components/home/RecentPosts.astro
@@ -1,7 +1,7 @@
 ---
-import { IconClock, IconStar, IconArrowRight } from '@tabler/icons-react';
-import { fetchAllPosts } from '@utils/data/posts.js';
-import { md } from '@utils/helpers/general.js';
+import { IconClock, IconStar, IconArrowRight } from "@tabler/icons-react";
+import { fetchAllPosts } from "@utils/data/posts.js";
+import { md } from "@utils/helpers/general.js";
 
 const posts = await fetchAllPosts();
 ---
@@ -10,24 +10,26 @@ const posts = await fetchAllPosts();
   <IconClock size={24} />
   Recent posts
 </h2>
-{posts.slice(0, 5).map(post => (
-  <article key={post.url}>
-    <div class="post-meta">
-      {post.featured && <IconStar size={16} />}
-      <time datetime={post.date}>
-        {new Date(post.date).toLocaleDateString('en-US', {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric',
-        })}
-      </time>
-    </div>
-    <h3>
-      <a href={post.url}>{post.title}</a>
-    </h3>
-    <p set:html={md(post.description)}></p>
-  </article>
-))}
+{
+  posts.slice(0, 5).map((post) => (
+    <article key={post.url}>
+      <div class="post-meta">
+        {post.featured && <IconStar size={16} />}
+        <time datetime={post.date}>
+          {new Date(post.date).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </time>
+      </div>
+      <h3>
+        <a href={post.url}>{post.title}</a>
+      </h3>
+      <p set:html={md(post.description)} />
+    </article>
+  ))
+}
 <a class="icon-link" href="/posts">
   View all posts <IconArrowRight size={16} />
-</a>
\ No newline at end of file
+</a>
diff --git a/src/components/media/Grid.astro b/src/components/media/Grid.astro
index 1d4bc3c..00fc8ab 100644
--- a/src/components/media/Grid.astro
+++ b/src/components/media/Grid.astro
@@ -1,6 +1,6 @@
 ---
-import Paginator from '@components/nav/Paginator.astro';
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import Paginator from "@components/nav/Paginator.astro";
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 const { data, count, shape, pagination, loading = "lazy" } = Astro.props;
 const { globals } = await fetchGlobalData(Astro);
@@ -9,24 +9,24 @@ const hidePagination = pageCount <= 1;
 
 function getImageAttributes(item, shape) {
   let imageUrl = item.grid.image;
-  let imageClass = '';
+  let imageClass = "";
   let width = 0;
   let height = 0;
 
   switch (shape) {
-    case 'poster':
+    case "poster":
       imageUrl = item.grid.backdrop;
-      imageClass = 'banner';
+      imageClass = "banner";
       width = 256;
       height = 170;
       break;
-    case 'square':
-      imageClass = 'square';
+    case "square":
+      imageClass = "square";
       width = 200;
       height = 200;
       break;
-    case 'vertical':
-      imageClass = 'vertical';
+    case "vertical":
+      imageClass = "vertical";
       width = 200;
       height = 307;
       break;
@@ -37,36 +37,39 @@ function getImageAttributes(item, shape) {
 ---
 
 <div class={`media-grid ${shape}`}>
-  {data.slice(0, count).map((item) => {
-    const alt = item.grid.alt?.replace(/['"]/g, '');
-    const { imageUrl, imageClass, width, height } = getImageAttributes(item, shape);
+  {
+    data.slice(0, count).map((item) => {
+      const alt = item.grid.alt?.replace(/['"]/g, "");
+      const { imageUrl, imageClass, width, height } = getImageAttributes(
+        item,
+        shape
+      );
 
-    return (
-      <a href={item.grid.url} title={alt}>
-        <div class="item media-overlay">
-          <div class="meta-text">
-            <div class="header">{item.grid.title}</div>
-            <div class="subheader">{item.grid.subtext}</div>
-          </div>
-          <img
-            srcSet={`
+      return (
+        <a href={item.grid.url} title={alt}>
+          <div class="item media-overlay">
+            <div class="meta-text">
+              <div class="header">{item.grid.title}</div>
+              <div class="subheader">{item.grid.subtext}</div>
+            </div>
+            <img
+              srcSet={`
               ${globals.cdn_url}${imageUrl}?class=${imageClass}sm&type=webp ${width}w,
               ${globals.cdn_url}${imageUrl}?class=${imageClass}md&type=webp ${width * 2}w
             `}
-            sizes={`(max-width: 450px) ${width}px, ${width * 2}px`}
-            src={`${globals.cdn_url}${imageUrl}?class=${imageClass}sm&type=webp`}
-            alt={alt}
-            loading={loading}
-            decoding="async"
-            width={width}
-            height={height}
-          />
-        </div>
-      </a>
-    );
-  })}
+              sizes={`(max-width: 450px) ${width}px, ${width * 2}px`}
+              src={`${globals.cdn_url}${imageUrl}?class=${imageClass}sm&type=webp`}
+              alt={alt}
+              loading={loading}
+              decoding="async"
+              width={width}
+              height={height}
+            />
+          </div>
+        </a>
+      );
+    })
+  }
 </div>
 
-{!hidePagination && (
-  <Paginator pagination={pagination} />
-)}
+{!hidePagination && <Paginator pagination={pagination} />}
diff --git a/src/components/media/music/Chart.astro b/src/components/media/music/Chart.astro
index b4670f3..9963623 100644
--- a/src/components/media/music/Chart.astro
+++ b/src/components/media/music/Chart.astro
@@ -1,29 +1,33 @@
 ---
-import ProgressBar from '@components/media/ProgressBar.astro';
+import ProgressBar from "@components/media/ProgressBar.astro";
 
 const { data, count } = Astro.props;
 ---
 
 <div class="music-chart">
   <ol type="1">
-    {data.slice(0, count).map((item) => {
-      const percentage = `${item.chart.percentage}%`;
-      const playsLabel = item.chart.plays === 1 ? 'play' : 'plays';
+    {
+      data.slice(0, count).map((item) => {
+        const percentage = `${item.chart.percentage}%`;
+        const playsLabel = item.chart.plays === 1 ? "play" : "plays";
 
-      return (
-        <li value={item.chart.rank}>
-          <div class="item">
-            <div class="info">
-              <a class="title" href={item.chart.url}>{item.chart.title}</a>
-              <span class="subtext">{item.chart.artist}</span>
-              <span class="subtext">
-                {item.chart.plays} {playsLabel}
-              </span>
+        return (
+          <li value={item.chart.rank}>
+            <div class="item">
+              <div class="info">
+                <a class="title" href={item.chart.url}>
+                  {item.chart.title}
+                </a>
+                <span class="subtext">{item.chart.artist}</span>
+                <span class="subtext">
+                  {item.chart.plays} {playsLabel}
+                </span>
+              </div>
+              <ProgressBar percentage={percentage} />
             </div>
-            <ProgressBar percentage={percentage} />
-          </div>
-        </li>
-      );
-    })}
+          </li>
+        );
+      })
+    }
   </ol>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/media/music/Recent.astro b/src/components/media/music/Recent.astro
index 576d5e1..58d5e12 100644
--- a/src/components/media/music/Recent.astro
+++ b/src/components/media/music/Recent.astro
@@ -1,44 +1,48 @@
 ---
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 const { data } = Astro.props;
 const { globals } = await fetchGlobalData(Astro);
 ---
 
 <div class="music-chart">
-  {data.slice(0, 10).map((item) => (
-    <div class="item">
-      <div class="meta">
-        <a href={item.chart.url}>
-          <img
-            srcSet={`
+  {
+    data.slice(0, 10).map((item) => (
+      <div class="item">
+        <div class="meta">
+          <a href={item.chart.url}>
+            <img
+              srcSet={`
               ${globals.cdn_url}${item.chart.image}?class=w50&type=webp 50w,
               ${globals.cdn_url}${item.chart.image}?class=w100&type=webp 100w
             `}
-            sizes="(max-width: 450px) 50px, 100px"
-            src={`${globals.cdn_url}${item.chart.image}?class=w50&type=webp`}
-            alt={item.chart.alt.replace(/['"]/g, '')}
-            loading="lazy"
-            decoding="async"
-            width="64"
-            height="64"
-          />
-        </a>
-        <div class="meta-text">
-          <a class="title" href={item.chart.url}>{item.chart.title}</a>
-          <span class="subtext">{item.chart.subtext}</span>
+              sizes="(max-width: 450px) 50px, 100px"
+              src={`${globals.cdn_url}${item.chart.image}?class=w50&type=webp`}
+              alt={item.chart.alt.replace(/['"]/g, "")}
+              loading="lazy"
+              decoding="async"
+              width="64"
+              height="64"
+            />
+          </a>
+          <div class="meta-text">
+            <a class="title" href={item.chart.url}>
+              {item.chart.title}
+            </a>
+            <span class="subtext">{item.chart.subtext}</span>
+          </div>
         </div>
+        <time dateTime={item.chart.played_at}>
+          {new Date(item.chart.played_at).toLocaleString("en-US", {
+            timeZone: "America/Los_Angeles",
+            month: "long",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+            hour12: true,
+          })}
+        </time>
       </div>
-      <time dateTime={item.chart.played_at}>
-        {new Date(item.chart.played_at).toLocaleString("en-US", {
-          timeZone: "America/Los_Angeles",
-          month: "long",
-          day: "numeric",
-          hour: "numeric",
-          minute: "numeric",
-          hour12: true,
-        })}
-      </time>
-    </div>
-  ))}
+    ))
+  }
 </div>
diff --git a/src/components/media/watching/Hero.astro b/src/components/media/watching/Hero.astro
index ce972dd..d3c97b3 100644
--- a/src/components/media/watching/Hero.astro
+++ b/src/components/media/watching/Hero.astro
@@ -1,5 +1,5 @@
 ---
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import { fetchGlobalData } from "@utils/data/global/index.js";
 import Hero from "@components/blocks/Hero.astro";
 
 const { movie } = Astro.props;
diff --git a/src/components/nav/Menu.astro b/src/components/nav/Menu.astro
index cb64300..9e926a7 100644
--- a/src/components/nav/Menu.astro
+++ b/src/components/nav/Menu.astro
@@ -1,6 +1,6 @@
 ---
-import { IconMenu2, IconX } from '@tabler/icons-react';
-import NavLink from './NavLink.astro';
+import { IconMenu2, IconX } from "@tabler/icons-react";
+import NavLink from "./NavLink.astro";
 
 const { nav } = Astro.props;
 ---
@@ -16,15 +16,17 @@ const { nav } = Astro.props;
     </div>
   </label>
 
-  <ul class="menu-primary" aria-label="Primary site navigation" id="primary-navigation">
-    {nav.primary.map((link) => (
-      <li>
-        <NavLink
-          url={link.permalink}
-          title={link.title}
-          icon={link.icon}
-        />
-      </li>
-    ))}
+  <ul
+    class="menu-primary"
+    aria-label="Primary site navigation"
+    id="primary-navigation"
+  >
+    {
+      nav.primary.map((link) => (
+        <li>
+          <NavLink url={link.permalink} title={link.title} icon={link.icon} />
+        </li>
+      ))
+    }
   </ul>
-</menu>
\ No newline at end of file
+</menu>
diff --git a/src/components/nav/NavLink.astro b/src/components/nav/NavLink.astro
index abd142c..2e7972f 100644
--- a/src/components/nav/NavLink.astro
+++ b/src/components/nav/NavLink.astro
@@ -1,24 +1,26 @@
 ---
-import IconMapper from '@components/IconMapper.astro';
+import IconMapper from "@components/IconMapper.astro";
 
 const { url, title, icon } = Astro.props;
-const isHttp = url.startsWith('http');
+const isHttp = url.startsWith("http");
 const isActive = Astro.url.pathname === url;
 ---
 
-{isActive ? (
-  <span class={`active icon ${icon?.toLowerCase()}`} aria-current="page">
-    <IconMapper icon={icon} />
-    <span>{title}</span>
-  </span>
-) : (
-  <a
-    class={`icon ${icon}`}
-    href={url}
-    rel={isHttp ? 'me' : undefined}
-    aria-label={title}
-  >
-    <IconMapper icon={icon} />
-    <span>{title}</span>
-  </a>
-)}
\ No newline at end of file
+{
+  isActive ? (
+    <span class={`active icon ${icon?.toLowerCase()}`} aria-current="page">
+      <IconMapper icon={icon} />
+      <span>{title}</span>
+    </span>
+  ) : (
+    <a
+      class={`icon ${icon}`}
+      href={url}
+      rel={isHttp ? "me" : undefined}
+      aria-label={title}
+    >
+      <IconMapper icon={icon} />
+      <span>{title}</span>
+    </a>
+  )
+}
diff --git a/src/components/utils/ToggleContent.astro b/src/components/utils/ToggleContent.astro
new file mode 100644
index 0000000..429d7ff
--- /dev/null
+++ b/src/components/utils/ToggleContent.astro
@@ -0,0 +1,10 @@
+---
+import { md } from "@utils/helpers/general.js";
+
+const { content } = Astro.props;
+---
+
+<div data-toggle-content class="text-toggle-hidden">
+  <div set:html={md(content)} />
+</div>
+<button data-toggle-button>Show more</button>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d8966fd..540d88d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -3,7 +3,7 @@ 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 { fetchGlobalData } from "@utils/data/global/index.js";
 
 const {
   schema = "page",
@@ -61,7 +61,11 @@ const isProduction = import.meta.env.MODE === "production";
       )
     }
     <noscript>
-      <style>.client-side {display:none}</style>
+      <style>
+        .client-side {
+          display: none;
+        }
+      </style>
     </noscript>
   </head>
   <body>
@@ -74,5 +78,6 @@ const isProduction = import.meta.env.MODE === "production";
       </main>
       <Footer updated={updated} />
     </div>
+
   </body>
 </html>
diff --git a/src/pages/.well-known/webfinger.js b/src/pages/.well-known/webfinger.js
index cddfeea..07a88fb 100644
--- a/src/pages/.well-known/webfinger.js
+++ b/src/pages/.well-known/webfinger.js
@@ -1,4 +1,4 @@
-import { fetchGlobals } from "@utils/data/globals";
+import { fetchGlobals } from "@utils/data/globals.js";
 
 export async function GET() {
   try {
diff --git a/src/pages/[permalink].astro b/src/pages/[permalink].astro
index 2479542..d56cf66 100644
--- a/src/pages/[permalink].astro
+++ b/src/pages/[permalink].astro
@@ -1,8 +1,8 @@
 ---
-import Layout from '@layouts/Layout.astro';
-import BlockRenderer from '@components/blocks/BlockRenderer.astro';
-import { fetchPages } from '@utils/data/pages';
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import Layout from "@layouts/Layout.astro";
+import BlockRenderer from "@components/blocks/BlockRenderer.astro";
+import { fetchPages } from "@utils/data/pages.js";
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 export const prerender = true;
 
@@ -26,7 +26,5 @@ const currentUrl = Astro.url.pathname;
   updated={page.updated}
   currentUrl={currentUrl}
 >
-  {page.blocks.map((block) => (
-    <BlockRenderer block={block} />
-  ))}
+  {page.blocks.map((block) => <BlockRenderer block={block} />)}
 </Layout>
diff --git a/src/pages/blogroll.astro b/src/pages/blogroll.astro
index cb659e7..cc5f498 100644
--- a/src/pages/blogroll.astro
+++ b/src/pages/blogroll.astro
@@ -1,21 +1,28 @@
 ---
-import Layout from '@layouts/Layout.astro';
-import { IconRss, IconJson, IconMailPlus, IconBrandMastodon } from "@tabler/icons-react";
-import { fetchBlogroll } from '@utils/data/blogroll.js';
+import Layout from "@layouts/Layout.astro";
+import {
+  IconRss,
+  IconJson,
+  IconMailPlus,
+  IconBrandMastodon,
+} from "@tabler/icons-react";
+import { fetchBlogroll } from "@utils/data/blogroll.js";
 
 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.";
+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={currentUrl}>
   <h2 class="page-title">{title}</h2>
   <p>
-    You can <a href="/blogroll.opml" class="plausible-event-name=Blogroll+OPML+download">download an OPML file</a> containing all of these feeds and import them into your RSS reader.
+    You can <a
+      href="/blogroll.opml"
+      class="plausible-event-name=Blogroll+OPML+download"
+      >download an OPML file</a
+    > containing all of these feeds and import them into your RSS reader.
   </p>
   <table>
     <thead>
@@ -26,39 +33,60 @@ const description = "These are awesome blogs that I enjoy and you may enjoy too.
       </tr>
     </thead>
     <tbody>
-      {blogroll.map((blog) => (
-        <tr>
-          <td>{blog.name}</td>
-          <td>
-            <a href={blog.url}>{blog.url.replace("https://", "")}</a>
-          </td>
-          <td class="blog-roll-icons">
-            {blog.rss_feed && (
-              <a class="rss" href={blog.rss_feed} aria-label={`RSS feed for ${blog.name}`}>
-                <IconRss size={16} />
-              </a>
-            )}
-            {blog.json_feed && (
-              <a class="json" href={blog.json_feed} aria-label={`JSON feed for ${blog.name}`}>
-                <IconJson size={16} />
-              </a>
-            )}
-            {blog.newsletter && (
-              <a class="mail-plus" href={blog.newsletter} aria-label={`Subscribe to ${blog.name}'s newsletter`}>
-                <IconMailPlus size={16} />
-              </a>
-            )}
-            {blog.mastodon && (
-              <a class="brand-mastodon" href={blog.mastodon} aria-label={`Follow ${blog.name} on Mastodon`}>
-                <IconBrandMastodon size={16} />
-              </a>
-            )}
-          </td>
-        </tr>
-      ))}
+      {
+        blogroll.map((blog) => (
+          <tr>
+            <td>{blog.name}</td>
+            <td>
+              <a href={blog.url}>{blog.url.replace("https://", "")}</a>
+            </td>
+            <td class="blog-roll-icons">
+              {blog.rss_feed && (
+                <a
+                  class="rss"
+                  href={blog.rss_feed}
+                  aria-label={`RSS feed for ${blog.name}`}
+                >
+                  <IconRss size={16} />
+                </a>
+              )}
+              {blog.json_feed && (
+                <a
+                  class="json"
+                  href={blog.json_feed}
+                  aria-label={`JSON feed for ${blog.name}`}
+                >
+                  <IconJson size={16} />
+                </a>
+              )}
+              {blog.newsletter && (
+                <a
+                  class="mail-plus"
+                  href={blog.newsletter}
+                  aria-label={`Subscribe to ${blog.name}'s newsletter`}
+                >
+                  <IconMailPlus size={16} />
+                </a>
+              )}
+              {blog.mastodon && (
+                <a
+                  class="brand-mastodon"
+                  href={blog.mastodon}
+                  aria-label={`Follow ${blog.name} on Mastodon`}
+                >
+                  <IconBrandMastodon size={16} />
+                </a>
+              )}
+            </td>
+          </tr>
+        ))
+      }
     </tbody>
   </table>
   <p>
-    Head on over to <a href="https://blogroll.org">blogroll.org</a> to find more blogs to follow or search for feeds using <a href="https://feedle.world">feedle</a>.
+    Head on over to <a href="https://blogroll.org">blogroll.org</a> to find more
+    blogs to follow or search for feeds using <a href="https://feedle.world"
+      >feedle</a
+    >.
   </p>
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/pages/blogroll.opml.js b/src/pages/blogroll.opml.js
index bd623cb..d2ffd28 100644
--- a/src/pages/blogroll.opml.js
+++ b/src/pages/blogroll.opml.js
@@ -1,5 +1,5 @@
-import { fetchBlogroll } from "@utils/data/blogroll";
-import { fetchGlobals } from "@utils/data/globals";
+import { fetchBlogroll } from "@utils/data/blogroll.js";
+import { fetchGlobals } from "@utils/data/global/index.js";
 
 export async function GET() {
   try {
diff --git a/src/pages/books/[isbn].astro b/src/pages/books/[isbn].astro
index 7d6e566..3fb3af8 100644
--- a/src/pages/books/[isbn].astro
+++ b/src/pages/books/[isbn].astro
@@ -5,7 +5,7 @@ import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
 import ProgressBar from "@components/media/ProgressBar.astro";
 import { IconArrowLeft, IconHeart, IconNeedle } from "@tabler/icons-react";
 import { fetchBookByUrl } from "@utils/data/dynamic/bookByUrl.js";
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 const { isbn } = Astro.params;
 
diff --git a/src/pages/books/index.astro b/src/pages/books/index.astro
index 2d78809..fc996a8 100644
--- a/src/pages/books/index.astro
+++ b/src/pages/books/index.astro
@@ -3,7 +3,7 @@ import Layout from "@layouts/Layout.astro";
 import Rss from "@components/blocks/banners/Rss.astro";
 import ProgressBar from "@components/media/ProgressBar.astro";
 import { fetchBooks } from "@utils/data/books.js";
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import { fetchGlobalData } from "@utils/data/global/index.js";
 import { md, htmlTruncate } from "@utils/helpers/general.js";
 
 const books = await fetchBooks();
@@ -30,7 +30,6 @@ const bookYearLinks = (years) =>
 ---
 
 <Layout
-  globals={globals}
   pageTitle={title}
   description={description}
   updated={updated}
@@ -43,7 +42,7 @@ const bookYearLinks = (years) =>
       >{currentBookCount} books</strong
     > this year.
   </p>
-  <p set:html={bookYearLinks(books.years)}></p>
+  <p set:html={bookYearLinks(books.years)} />
   <Rss
     url="/feeds/books"
     text="Subscribe to my books feed or follow along on this page"
diff --git a/src/pages/books/years/[year].astro b/src/pages/books/years/[year].astro
index 54b2321..536f8bc 100644
--- a/src/pages/books/years/[year].astro
+++ b/src/pages/books/years/[year].astro
@@ -2,8 +2,12 @@
 import Layout from "@layouts/Layout.astro";
 import Grid from "@components/media/Grid.astro";
 import { IconArrowLeft } from "@tabler/icons-react";
-import { filterBooksByStatus, findFavoriteBooks, mediaLinks } from "@utils/helpers/media.js";
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import {
+  filterBooksByStatus,
+  findFavoriteBooks,
+  mediaLinks,
+} from "@utils/helpers/media.js";
+import { fetchGlobalData } from "@utils/data/global/index.js";
 import { fetchBooks } from "@utils/data/books.js";
 import { DateTime } from "luxon";
 
@@ -26,21 +30,30 @@ const description = isCurrentYear
 const intro = isCurrentYear
   ? `
     I've finished <strong class="highlight-text">${bookData.length} books</strong> this year.
-    ${favoriteBooks ? ` Among my favorites are ${favoriteBooks}.` : ''}
+    ${favoriteBooks ? ` Among my favorites are ${favoriteBooks}.` : ""}
   `
   : `
     I finished <strong class="highlight-text">${bookData.length} books</strong> in 
     <strong class="highlight-text">${year}</strong>.
-    ${favoriteBooks ? ` Among my favorites were ${favoriteBooks}.` : ''}
+    ${favoriteBooks ? ` Among my favorites were ${favoriteBooks}.` : ""}
   `;
 ---
 
-<Layout globals={globals} pageTitle={pageTitle} description={description} schema="books-year">
+<Layout
+  pageTitle={pageTitle}
+  description={description}
+  schema="books-year"
+>
   <a href="/books" class="back-link">
     <IconArrowLeft size={18} /> Back to books
   </a>
   <h2 class="page-title">{year} / Books</h2>
-  <div set:html={intro}></div>
+  <div set:html={intro} />
   <hr />
-  <Grid globals={globals} data={bookData} shape="vertical" count={200} loading="eager" />
+  <Grid
+    data={bookData}
+    shape="vertical"
+    count={200}
+    loading="eager"
+  />
 </Layout>
diff --git a/src/pages/feeds/all.json.js b/src/pages/feeds/all.json.js
index 3c02bc7..d58e020 100644
--- a/src/pages/feeds/all.json.js
+++ b/src/pages/feeds/all.json.js
@@ -1,8 +1,8 @@
-import { generateJsonFeed } from '@utils/generateJsonFeed';
-import { fetchGlobals } from '@utils/data/globals';
-import { fetchActivity } from '@utils/data/activity';
-import fs from 'fs/promises';
-import path from 'path';
+import { generateJsonFeed } from "@utils/generateJsonFeed.js";
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchActivity } from "@utils/data/activity.js";
+import fs from "fs/promises";
+import path from "path";
 
 export async function getStaticPaths() {
   const globals = await fetchGlobals();
@@ -15,7 +15,7 @@ export async function getStaticPaths() {
     data: activity,
   });
 
-  const filePath = path.resolve('public/feeds/all.json');
+  const filePath = path.resolve("public/feeds/all.json");
   await fs.mkdir(path.dirname(filePath), { recursive: true });
   await fs.writeFile(filePath, feed);
 
diff --git a/src/pages/feeds/all.xml.js b/src/pages/feeds/all.xml.js
index bc37160..3718870 100644
--- a/src/pages/feeds/all.xml.js
+++ b/src/pages/feeds/all.xml.js
@@ -1,6 +1,6 @@
 import { generateRssFeed } from "@utils/generateRssFeed";
-import { fetchGlobals } from "@utils/data/globals";
-import { fetchActivity } from "@utils/data/activity";
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchActivity } from "@utils/data/activity.js";
 import fs from "fs/promises";
 import path from "path";
 
diff --git a/src/pages/feeds/books.json.js b/src/pages/feeds/books.json.js
index 6d6838d..b411f51 100644
--- a/src/pages/feeds/books.json.js
+++ b/src/pages/feeds/books.json.js
@@ -1,6 +1,6 @@
-import { generateJsonFeed } from "@utils/generateJsonFeed";
-import { fetchGlobals } from "@utils/data/globals";
-import { fetchBooks } from "@utils/data/books";
+import { generateJsonFeed } from "@utils/generateJsonFeed.js";
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchBooks } from "@utils/data/books.js";
 import fs from "fs/promises";
 import path from "path";
 
diff --git a/src/pages/feeds/books.xml.js b/src/pages/feeds/books.xml.js
index 955feed..df6f09a 100644
--- a/src/pages/feeds/books.xml.js
+++ b/src/pages/feeds/books.xml.js
@@ -1,6 +1,6 @@
 import { generateRssFeed } from "@utils/generateRssFeed";
-import { fetchGlobals } from "@utils/data/globals";
-import { fetchBooks } from "@utils/data/books";
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchBooks } from "@utils/data/books.js";
 import fs from "fs/promises";
 import path from "path";
 
diff --git a/src/pages/feeds/links.json.js b/src/pages/feeds/links.json.js
index a84243e..f168bed 100644
--- a/src/pages/feeds/links.json.js
+++ b/src/pages/feeds/links.json.js
@@ -1,6 +1,6 @@
-import { generateJsonFeed } from "@utils/generateJsonFeed";
-import { fetchGlobals } from "@utils/data/globals";
-import { fetchLinks } from "@utils/data/links";
+import { generateJsonFeed } from "@utils/generateJsonFeed.js";
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchLinks } from "@utils/data/links.js";
 import fs from "fs/promises";
 import path from "path";
 
diff --git a/src/pages/feeds/links.xml.js b/src/pages/feeds/links.xml.js
index 57913a5..be4c692 100644
--- a/src/pages/feeds/links.xml.js
+++ b/src/pages/feeds/links.xml.js
@@ -1,5 +1,5 @@
 import { generateRssFeed } from "@utils/generateRssFeed";
-import { fetchGlobals } from "@utils/data/globals";
+import { fetchGlobals } from "@utils/data/globals.js";
 import { fetchLinks } from "@utils/data/links";
 import fs from "fs/promises";
 import path from "path";
diff --git a/src/pages/feeds/movies.json.js b/src/pages/feeds/movies.json.js
index bebd3ee..942572b 100644
--- a/src/pages/feeds/movies.json.js
+++ b/src/pages/feeds/movies.json.js
@@ -1,5 +1,5 @@
-import { generateJsonFeed } from '@utils/generateJsonFeed';
-import { fetchGlobals } from '@utils/data/globals';
+import { generateJsonFeed } from '@utils/generateJsonFeed.js';
+import { fetchGlobals } from '@utils/data/globals.js';
 import { fetchMovies } from '@utils/data/movies';
 import fs from 'fs/promises';
 import path from 'path';
diff --git a/src/pages/feeds/movies.xml.js b/src/pages/feeds/movies.xml.js
index 688365a..0d62670 100644
--- a/src/pages/feeds/movies.xml.js
+++ b/src/pages/feeds/movies.xml.js
@@ -1,6 +1,6 @@
 import { generateRssFeed } from "@utils/generateRssFeed";
-import { fetchGlobals } from "@utils/data/globals";
-import { fetchMovies } from "@utils/data/movies";
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchMovies } from "@utils/data/movies.js";
 import fs from "fs/promises";
 import path from "path";
 
diff --git a/src/pages/feeds/posts.json.js b/src/pages/feeds/posts.json.js
index 50d9424..96a9690 100644
--- a/src/pages/feeds/posts.json.js
+++ b/src/pages/feeds/posts.json.js
@@ -1,6 +1,6 @@
-import { generateJsonFeed } from "@utils/generateJsonFeed";
-import { fetchGlobals } from "@utils/data/globals";
-import { fetchAllPosts } from "@utils/data/posts";
+import { generateJsonFeed } from "@utils/generateJsonFeed.js";
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchAllPosts } from "@utils/data/posts.js";
 import fs from "fs/promises";
 import path from "path";
 
diff --git a/src/pages/feeds/posts.xml.js b/src/pages/feeds/posts.xml.js
index 84ac3c1..728db6f 100644
--- a/src/pages/feeds/posts.xml.js
+++ b/src/pages/feeds/posts.xml.js
@@ -1,6 +1,6 @@
 import { generateRssFeed } from "@utils/generateRssFeed";
-import { fetchGlobals } from "@utils/data/globals";
-import { fetchAllPosts } from "@utils/data/posts";
+import { fetchGlobals } from "@utils/data/globals.js";
+import { fetchAllPosts } from "@utils/data/posts.js";
 import fs from "fs/promises";
 import path from "path";
 
diff --git a/src/pages/humans.txt.js b/src/pages/humans.txt.js
index abe30cf..c9b18a3 100644
--- a/src/pages/humans.txt.js
+++ b/src/pages/humans.txt.js
@@ -1,4 +1,4 @@
-import { fetchGlobals } from '@utils/data/globals';
+import { fetchGlobals } from '@utils/data/globals.js';
 
 export async function GET() {
   try {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d21e416..7c6c915 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,18 +1,19 @@
 ---
-import Layout from '@layouts/Layout.astro';
-import Intro from '@components/home/Intro.astro';
-import RecentActivity from '@components/home/RecentActivity.astro';
-import RecentPosts from '@components/home/RecentPosts.astro';
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import Layout from "@layouts/Layout.astro";
+import Intro from "@components/home/Intro.astro";
+import RecentActivity from "@components/home/RecentActivity.astro";
+import RecentPosts from "@components/home/RecentPosts.astro";
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 const { globals } = await fetchGlobalData(Astro);
-const schema = 'blog';
+const schema = "blog";
 const pageTitle = globals.site_name;
-const description = 'This is a blog post description';
+const description = "This is a blog post description";
 const ogImage = globals.cdn_url + globals.avatar;
-const fullUrl = globals.url + '/blog/my-post';
+const fullUrl = globals.url + "/blog/my-post";
 const themeColor = globals.theme_color;
 ---
+
 <Layout
   pageTitle={pageTitle}
   description={description}
@@ -24,4 +25,4 @@ const themeColor = globals.theme_color;
   <Intro intro={globals.intro} />
   <RecentActivity />
   <RecentPosts />
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/pages/links.astro b/src/pages/links.astro
index 38fcb52..bcb157a 100644
--- a/src/pages/links.astro
+++ b/src/pages/links.astro
@@ -3,16 +3,20 @@ import Layout from "@layouts/Layout.astro";
 import Paginator from "@components/nav/Paginator.astro";
 import RssBanner from "@components/blocks/banners/Rss.astro";
 import { fetchLinks } from "@utils/data/links.js";
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import { fetchGlobalData } from "@utils/data/global/index.js";
 
 const { globals } = await fetchGlobalData(Astro);
 const links = await fetchLinks();
 const title = "Links";
-const description = "These are links I've liked or otherwise found interesting. They're all added manually, after having been read and, I suppose, properly considered.";
+const description =
+  "These are links I've liked or otherwise found interesting. They're all added manually, after having been read and, I suppose, properly considered.";
 const pageSize = 30;
 const currentPage = parseInt(Astro.url.searchParams.get("page") || "1", 10);
 const totalPages = Math.ceil(links.length / pageSize);
-const paginatedLinks = links.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+const paginatedLinks = links.slice(
+  (currentPage - 1) * pageSize,
+  currentPage * pageSize
+);
 
 const pagination = {
   currentPage,
@@ -29,37 +33,40 @@ const pagination = {
 ---
 
 <Layout
-  globals={globals}
   pageTitle={title}
   description={description}
   currentUrl={Astro.url.pathname}
 >
-  {currentPage === 1 && (
-    <>
-      <h2 class="page-title">{title}</h2>
-      <p>{description}</p>
-      <RssBanner
-        url="/feeds/links"
-        text="Subscribe to my links feed or follow along on this page"
-      />
-      <hr />
-    </>
-  )}
+  {
+    currentPage === 1 && (
+      <>
+        <h2 class="page-title">{title}</h2>
+        <p>{description}</p>
+        <RssBanner
+          url="/feeds/links"
+          text="Subscribe to my links feed or follow along on this page"
+        />
+        <hr />
+      </>
+    )
+  }
 
   <div class="link-grid">
-    {paginatedLinks.map((link) => (
-      <div class="link-box">
-        <a href={link.link} title={link.title}>
-          <strong>{link.title}</strong>
-        </a>
-        {link.author && (
-          <>
-            {" via "}
-            <a href={link.author.url}>{link.author.name}</a>
-          </>
-        )}
-      </div>
-    ))}
+    {
+      paginatedLinks.map((link) => (
+        <div class="link-box">
+          <a href={link.link} title={link.title}>
+            <strong>{link.title}</strong>
+          </a>
+          {link.author && (
+            <>
+              {" via "}
+              <a href={link.author.url}>{link.author.name}</a>
+            </>
+          )}
+        </div>
+      ))
+    }
   </div>
 
   <Paginator pagination={pagination} />
diff --git a/src/pages/music/artists/[slug].astro b/src/pages/music/artists/[slug].astro
new file mode 100644
index 0000000..857fdd5
--- /dev/null
+++ b/src/pages/music/artists/[slug].astro
@@ -0,0 +1,133 @@
+---
+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 { fetchGlobalData } from "@utils/data/global/index.js";
+import { fetchArtistByUrl } from "@utils/data/dynamic/artistByUrl.js";
+
+const { globals } = await fetchGlobalData(Astro);
+const artist = await fetchArtistByUrl(Astro.url.pathname);
+
+if (!artist) return Astro.redirect("/404", 404);
+
+const pageTitle = `${artist.name} / Music`;
+const description = artist.description || `Learn more about ${artist.name}`;
+const alt = `${artist.name} / ${artist.country}`;
+const playLabel = artist.total_plays === 1 ? "play" : "plays";
+---
+
+<Layout pageTitle={pageTitle} description={description} schema="artist">
+  <a href="/music" class="back-link">
+    <IconArrowLeft size={18} /> Back to music
+  </a>
+  <article class="artist-focus">
+    <div class="artist-display">
+      <img
+        srcset={`
+          ${globals.cdn_url}${artist.image}?class=w200&type=webp 200w,
+          ${globals.cdn_url}${artist.image}?class=w600&type=webp 400w,
+          ${globals.cdn_url}${artist.image}?class=w800&type=webp 800w
+        `}
+        sizes="(max-width: 450px) 200px,
+          (max-width: 850px) 400px,
+          800px"
+        src={`${globals.cdn_url}${artist.image}?class=w200&type=webp`}
+        alt={alt}
+        loading="eager"
+        decoding="async"
+        width="200"
+        height="200"
+      />
+      <div class="media-meta">
+        <span class="title"><strong>{artist.name}</strong></span>
+        <span class="sub-meta country">
+          <IconMapPin size={18} /> {artist.country}
+        </span>
+        {artist.favorite && (
+          <span class="sub-meta favorite">
+            <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.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}`}>
+            {artist.genre.name}
+          </a>
+        </span>
+      </div>
+    </div>
+
+    <AssociatedMedia
+      artists={artist.related_artists}
+      books={artist.books}
+      genres={artist.genres}
+      movies={artist.movies}
+      posts={artist.posts}
+      shows={artist.shows}
+    />
+
+    {artist.description && (
+      <>
+        <h2>Overview</h2>
+        <ToggleContent content={artist.description} />
+      </>
+    )}
+
+    {artist.concerts && (
+      <>
+        <p id="concerts" class="concerts">
+          <IconDeviceSpeaker size={18} /> I've seen this artist live!
+        </p>
+        <ul>
+          {artist.concerts.map((concert) => {
+            const venue = 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 (
+              <li>
+                On <strong class="highlight-text">{concert.date.toLocaleString(DateTime.DATE_MED)}</strong>
+                {venue && <> at {venue}</>}
+                {concert.notes && (
+                  <span> — {concert.notes}</span>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </>
+    )}
+
+    {artist.albums && (
+      <>
+        <table>
+          <tr>
+            <th>Album</th>
+            <th>Plays</th>
+            <th>Year</th>
+          </tr>
+          {artist.albums.map((album) => (
+            <tr>
+              <td>{album.name}</td>
+              <td>{album.total_plays}</td>
+              <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>
diff --git a/src/pages/music/releases.ics.js b/src/pages/music/releases.ics.js
index 3b2e2b0..f640a84 100644
--- a/src/pages/music/releases.ics.js
+++ b/src/pages/music/releases.ics.js
@@ -1,23 +1,24 @@
-import { albumReleasesCalendar } from '@utils/albumReleasesCalendar';
-import { fetchAlbumReleases } from '@utils/data/albumReleases';
+import { albumReleasesCalendar } from "@utils/albumReleasesCalendar.js";
+import { fetchAlbumReleases } from "@utils/data/albumReleases.js";
 
 export async function GET() {
   try {
     const { all: albumReleases } = await fetchAlbumReleases();
     const icsContent = await albumReleasesCalendar(albumReleases);
 
-    if (!icsContent) return new Response('Error generating ICS file', { status: 500 });
+    if (!icsContent)
+      return new Response("Error generating ICS file", { status: 500 });
 
     return new Response(icsContent, {
       status: 200,
       headers: {
-        'Content-Type': 'text/calendar',
-        'Content-Disposition': 'attachment; filename="releases.ics"',
+        "Content-Type": "text/calendar",
+        "Content-Disposition": 'attachment; filename="releases.ics"',
       },
     });
   } catch (error) {
-    console.error('Error generating album releases ICS file:', error);
-    return new Response('Error generating album releases ICS file', {
+    console.error("Error generating album releases ICS file:", error);
+    return new Response("Error generating album releases ICS file", {
       status: 500,
     });
   }
diff --git a/src/pages/posts/[...page].astro b/src/pages/posts/[...page].astro
index 28343fa..6632c72 100644
--- a/src/pages/posts/[...page].astro
+++ b/src/pages/posts/[...page].astro
@@ -1,12 +1,12 @@
 ---
-import { getCollection } from 'astro:content';
-import { IconStar } from '@tabler/icons-react';
+import { getCollection } from "astro:content";
+import { IconStar } from "@tabler/icons-react";
 import { fetchAllPosts } from "@data/posts.js";
-import { fetchGlobalData } from '@utils/data/global/index.js';
+import { fetchGlobalData } from "@utils/data/global/index.js";
 import Layout from "@layouts/Layout.astro";
-import Paginator from '@components/nav/Paginator.astro';
-import { md } from '@utils/helpers/general.js';
-import { DateTime } from 'luxon';
+import Paginator from "@components/nav/Paginator.astro";
+import { md } from "@utils/helpers/general.js";
+import { DateTime } from "luxon";
 
 const posts = await fetchAllPosts();
 const { page } = Astro.props;
@@ -35,25 +35,23 @@ const pagination = {
 };
 ---
 
-<Layout
-  globals={globals}
-  pageTitle="All posts"
-  currentUrl={currentUrl}
->
-      {paginatedPosts.map((post) => (
-        <article>
-          <div class="post-meta">
-            {post.featured && <IconStar size={16} />}
-            <time datetime={post.date}>
-              {DateTime.fromISO(post.date).toLocaleString(DateTime.DATE_FULL)}
-            </time>
-          </div>
-          <h3>
-            <a href={post.url}>{post.title}</a>
-          </h3>
-          <p set:html={md(post.description)}></p>
-        </article>
-      ))}
+<Layout pageTitle="All posts" currentUrl={currentUrl}>
+  {
+    paginatedPosts.map((post) => (
+      <article>
+        <div class="post-meta">
+          {post.featured && <IconStar size={16} />}
+          <time datetime={post.date}>
+            {DateTime.fromISO(post.date).toLocaleString(DateTime.DATE_FULL)}
+          </time>
+        </div>
+        <h3>
+          <a href={post.url}>{post.title}</a>
+        </h3>
+        <p set:html={md(post.description)} />
+      </article>
+    ))
+  }
 
-      <Paginator pagination={pagination} />
-    </Layout>
\ No newline at end of file
+  <Paginator pagination={pagination} />
+</Layout>
diff --git a/src/pages/posts/[year]/[title].astro b/src/pages/posts/[year]/[title].astro
index 6fc69cf..65b5174 100644
--- a/src/pages/posts/[year]/[title].astro
+++ b/src/pages/posts/[year]/[title].astro
@@ -3,16 +3,16 @@ import { IconStar } from "@tabler/icons-react";
 import { fetchAllPosts } from "@data/posts.js";
 import { fetchAnalyticsData } from "@data/analytics.js";
 import { fetchLinks } from "@data/links.js";
-import { fetchGlobalData } from '@utils/data/global/index.js';
-import { md } from '@utils/helpers/general.js';
-import { getPopularPosts } from '@utils/getPopularPosts.js';
+import { fetchGlobalData } from "@utils/data/global/index.js";
+import { md } from "@utils/helpers/general.js";
+import { getPopularPosts } from "@utils/getPopularPosts.js";
 
 const analytics = await fetchAnalyticsData();
 const links = await fetchLinks();
 const posts = await fetchAllPosts();
 const popularPosts = getPopularPosts(posts, analytics);
 
-import AddonLinks from '@components/blocks/links/AddonLinks.astro';
+import AddonLinks from "@components/blocks/links/AddonLinks.astro";
 import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
 import BlockRenderer from "@components/blocks/BlockRenderer.astro";
 import Coffee from "@components/blocks/banners/Coffee.astro";
diff --git a/src/utils/data/dynamic/artistByUrl.js b/src/utils/data/dynamic/artistByUrl.js
new file mode 100644
index 0000000..b8c24d9
--- /dev/null
+++ b/src/utils/data/dynamic/artistByUrl.js
@@ -0,0 +1,25 @@
+import { createClient } from "@supabase/supabase-js";
+
+const SUPABASE_URL = import.meta.env.SUPABASE_URL;
+const SUPABASE_KEY = import.meta.env.SUPABASE_KEY;
+const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
+
+const artistCache = {};
+
+export async function fetchArtistByUrl(url) {
+  if (import.meta.env.MODE === "development" && artistCache[url]) return artistCache[url];
+
+  const { data: artist, error } = await supabase
+    .from("optimized_artists")
+    .select("*")
+    .eq("url", url)
+    .limit(1);
+
+  if (error) {
+    console.error("Error fetching artist:", error);
+    return null;
+  }
+  if (import.meta.env.MODE === "development") artistCache[url] = artist[0];
+
+  return artist[0];
+}
diff --git a/src/utils/data/dynamic/bookByUrl.js b/src/utils/data/dynamic/bookByUrl.js
index 985a058..1a289b1 100644
--- a/src/utils/data/dynamic/bookByUrl.js
+++ b/src/utils/data/dynamic/bookByUrl.js
@@ -3,11 +3,10 @@ import { createClient } from "@supabase/supabase-js";
 const SUPABASE_URL = import.meta.env.SUPABASE_URL;
 const SUPABASE_KEY = import.meta.env.SUPABASE_KEY;
 const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
-
 const bookCache = {};
 
 export async function fetchBookByUrl(url) {
-  if (bookCache[url]) return bookCache[url];
+  if (import.meta.env.MODE === "development" && bookCache[url]) return bookCache[url];
 
   const { data: book, error } = await supabase
     .from("optimized_books")
@@ -15,12 +14,11 @@ export async function fetchBookByUrl(url) {
     .eq("url", url)
     .limit(1);
 
-  if (error || !book) {
+  if (error || !book || book.length === 0) {
     console.error(`Error fetching book with URL ${url}:`, error);
     return null;
   }
-
-  bookCache[url] = book[0];
+  if (import.meta.env.MODE === "development") bookCache[url] = book[0];
 
   return book[0];
 }