chore: middleware

src/pages/[permalink].astro

@@ -1,7 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
 import BlockRenderer from '@components/blocks/BlockRenderer.astro';
-import { fetchGlobals } from '@utils/data/globals.js';
 import { fetchPages } from '@utils/data/pages';
 
 export const prerender = true;
@@ -14,8 +13,8 @@ export async function getStaticPaths() {
   }));
 }
 
-const globals = await fetchGlobals();
 const { page } = Astro.props;
+const { globals } = Astro.locals;
 const currentUrl = Astro.url.pathname;
 ---
 

src/pages/blogroll.astro

@@ -1,19 +1,14 @@
 ---
 import Layout from '@layouts/Layout.astro';
 import { IconRss, IconJson, IconMailPlus, IconBrandMastodon } from "@tabler/icons-react";
-import { fetchGlobals } from '@utils/data/globals.js';
 import { fetchBlogroll } from '@utils/data/blogroll.js';
 
 const blogroll = await fetchBlogroll();
-const globals = await fetchGlobals();
-
 const currentUrl = Astro.url.pathname;
-
 const title = "Blogroll";
 const description = "These are awesome blogs that I enjoy and you may enjoy too.";
 ---
 <Layout
-  globals={globals}
   pageTitle={title}
   description={description}
   currentUrl={currentUrl}

src/pages/books/[isbn].astro

@@ -0,0 +1,108 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Warning from "@components/blocks/banners/Warning.astro";
+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/bookByUrl.js";
+
+const { isbn } = Astro.params;
+
+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 description = book.description || `Details about the book ${book.title}`;
+const { globals } = Astro.locals;
+---
+
+<Layout pageTitle={pageTitle} description={description} schema="book">
+  <a class="back-link" href="/books" title="Go back to the books index page">
+    <IconArrowLeft size={18} /> Back to books
+  </a>
+  <article class="book-focus">
+    <div class="book-display">
+      <img
+        srcset={`
+          ${globals.cdn_url}${book.image}?class=verticalsm&type=webp 200w,
+          ${globals.cdn_url}${book.image}?class=verticalmd&type=webp 400w,
+          ${globals.cdn_url}${book.image}?class=verticalbase&type=webp 800w
+        `}
+        sizes="(max-width: 450px) 203px,
+          (max-width: 850px) 406px,
+          (max-width: 1000px) 812px,
+          812px"
+        src={`${globals.cdn_url}${book.image}?class=verticalsm&type=webp`}
+        alt={alt}
+        loading="lazy"
+        decoding="async"
+        width="200"
+        height="307"
+      />
+      <div class="media-meta">
+        <span class="title"><strong>{book.title}</strong></span>
+        {book.rating && <span>{book.rating}</span>}
+        {book.author && <span class="sub-meta">By {book.author}</span>}
+        {
+          book.favorite && (
+            <span class="sub-meta favorite">
+              <IconHeart size={18} /> This is one of my favorite books!
+            </span>
+          )
+        }
+        {
+          book.tattoo && (
+            <span class="sub-meta tattoo">
+              <IconNeedle size={18} /> I have a tattoo inspired by this book!
+            </span>
+          )
+        }
+        {
+          book.status === "finished" && (
+            <span class="sub-meta">
+              Finished on:{" "}
+              <strong class="highlight-text">
+                {new Date(book.date_finished).toLocaleDateString("en-US", {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric",
+                })}
+              </strong>
+            </span>
+          )
+        }
+        {
+          book.status === "started" && (
+            <ProgressBar percentage={`${book.progress}%`} />
+          )
+        }
+      </div>
+    </div>
+    {
+      book.review && (
+        <>
+          <Warning text="There are probably spoilers after this banner — this is a warning about them." />
+          <h2>My thoughts</h2>
+          <div set:html={book.review} />
+        </>
+      )
+    }
+    <AssociatedMedia
+      artists={book.artists}
+      books={book.related_books}
+      genres={book.genres}
+      movies={book.movies}
+      posts={book.posts}
+      shows={book.shows}
+    />
+    {
+      book.description && (
+        <>
+          <h2>Overview</h2>
+          <div set:html={book.description} />
+        </>
+      )
+    }
+  </article>
+</Layout>

src/pages/books/index.astro

@@ -2,18 +2,15 @@
 import Layout from "@layouts/Layout.astro";
 import Rss from "@components/blocks/banners/Rss.astro";
 import ProgressBar from "@components/media/ProgressBar.astro";
-import { fetchGlobals } from "@utils/data/globals.js";
 import { fetchBooks } from "@utils/data/books.js";
 import { md, htmlTruncate } from "@utils/helpers.js";
 
-const globals = await fetchGlobals();
 const books = await fetchBooks();
-
+const { globals } = Astro.locals;
 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")

src/pages/index.astro

@@ -1,11 +1,10 @@
 ---
-import { fetchGlobals } from '@utils/data/globals';
 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';
 
-const globals = await fetchGlobals();
+const { globals } = Astro.locals;
 const schema = 'blog';
 const pageTitle = globals.site_name;
 const description = 'This is a blog post description';

src/pages/links.astro

@@ -2,10 +2,9 @@
 import Layout from "@layouts/Layout.astro";
 import Paginator from "@components/nav/Paginator.astro";
 import RssBanner from "@components/blocks/banners/Rss.astro";
-import { fetchGlobals } from "@utils/data/globals.js";
 import { fetchLinks } from "@utils/data/links.js";
 
-const globals = await fetchGlobals();
+const { globals } = Astro.locals;
 const links = await fetchLinks();
 
 const title = "Links";

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

@@ -1,16 +1,15 @@
 ---
 import { getCollection } from 'astro:content';
 import { IconStar } from '@tabler/icons-react';
-import { fetchGlobals } from "@data/globals.js";
 import { fetchAllPosts } from "@data/posts.js";
 import Layout from "@layouts/Layout.astro";
 import Paginator from '@components/nav/Paginator.astro';
 import { md } from '@utils/helpers.js';
 import { DateTime } from 'luxon';
 
-const globals = await fetchGlobals();
 const posts = await fetchAllPosts();
 const { page } = Astro.props;
+const { globals } = Astro.locals;
 const currentUrl = Astro.url.pathname;
 
 const currentPage = Astro.params.page ? parseInt(Astro.params.page, 10) : 1;

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

@@ -1,11 +1,8 @@
 ---
 import { IconStar } from "@tabler/icons-react";
-
 import { fetchAllPosts } from "@data/posts.js";
 import { fetchAnalyticsData } from "@data/analytics.js";
-import { fetchGlobals } from "@data/globals.js";
 import { fetchLinks } from "@data/links.js";
-
 import { md } from '@utils/helpers.js';
 import { getPopularPosts } from '@utils/getPopularPosts.js';
 
@@ -41,14 +38,13 @@ export async function getStaticPaths() {
 }
 
 const { post } = Astro.props;
+const { globals } = Astro.locals;
 const { year, title } = Astro.params;
-const globals = await fetchGlobals();
 const currentUrl = Astro.url.pathname;
 const htmlContent = md(post.content);
 ---
 
 <Layout
-  globals={globals}
   pageTitle={post.title}
   description={post.description}
   ogImage={post.open_graph_image}