chore: meta, books, blogroll, links

2024-11-17 08:09:32 -08:00 · 2024-11-17 08:09:32 -08:00 · 45b6e113b5
commit 45b6e113b5
parent 8a3ece9530
10 changed files with 530 additions and 86 deletions
--- a/src/components/Metadata.astro
+++ b/src/components/Metadata.astro
@ -1,11 +1,14 @@
 ---
+import { escapeHtml } from "@utils/helpers.js";
+
 const {
-  schema,
-  page,
+  schema = "page",
  globals,
+  pageTitle: titleOverride,
+  description: descriptionOverride,
+  ogImage: ogImageOverride,
+  fullUrl,
  post,
-  title,
-  description,
  artist,
  movie,
  movies,
@ -17,7 +20,6 @@ const {
  year,
 } = Astro.props;

-const fullUrl = `${globals.url}${page.url}`;
 let pageTitle = globals.site_name;
 let pageDescription = globals.site_description;
 let ogImage = `${globals.cdn_url}${globals.avatar}`;
@ -31,13 +33,13 @@ switch (schema) {
  case "music":
  case "music-index":
  case "music-period":
-    pageTitle = schema === "music" ? `Music / ${page.title}` : "Music";
+    pageTitle = schema === "music" ? `Music / ${titleOverride}` : "Music";
    if (schema === "music") {
-      ogImage = `${globals.cdn_url}${page?.image}`;
+      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}${page?.image}`;
+      ogImage = `${globals.cdn_url}${post?.image}`;
    }
    break;
  case "artist":
@ -93,29 +95,20 @@ switch (schema) {
    ogImage = `${globals.cdn_url}${overviewMovie?.backdrop}`;
    break;
  case "page":
-    pageTitle = page?.title || pageTitle;
-    pageDescription = page?.description || pageDescription;
+    pageTitle = titleOverride || pageTitle;
+    pageDescription = descriptionOverride || pageDescription;
    break;
  default:
    break;
 }

-if (title) pageTitle = title;
-if (description) pageDescription = description;
+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 =
-  pageDescription?.replace(
-    /["'<>&]/g,
-    (c) =>
-      ({
-        '"': "&quot;",
-        "'": "&#39;",
-        "<": "&lt;",
-        ">": "&gt;",
-        "&": "&amp;",
-      })[c]
-  ) || "";
+const escapedPageDescription = escapeHtml(pageDescription);
 ---

 <meta charset="utf-8" />
@ -126,7 +119,7 @@ const escapedPageDescription =
 <meta property="og:title" content={pageTitle} />
 <meta name="description" content={escapedPageDescription} />
 <meta property="og:description" content={escapedPageDescription} />
-<meta property="og:type" content="article" />
+<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} />
@ -151,5 +144,5 @@ const escapedPageDescription =
  type="application/atom+xml"
  rel="alternate"
  title={`Posts / ${globals.site_name}`}
-  href="https://coryd.dev/feeds/posts"
+  href={`${globals.url}/feeds/posts`}
 />
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -2,12 +2,22 @@
 import "@styles/index.css";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
+import Metadata from "@components/Metadata.astro";
 import { fetchNavigation } from "@utils/data/nav.js";

 const currentUrl = Astro.url.pathname;
 const nav = await fetchNavigation();
-const { globals, pageTitle, description, ogImage, fullUrl, schema } =
-  Astro.props;
+
+const {
+  globals,
+  schema = "page",
+  pageTitle,
+  description,
+  ogImage,
+  fullUrl,
+  ...otherProps
+} = Astro.props;
+
 const isProduction = import.meta.env.MODE === "production";
 ---

@ -17,7 +27,7 @@ const isProduction = import.meta.env.MODE === "production";
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
-    <title>{globals.site_name}</title>
+    <title>{pageTitle || globals.site_name}</title>
    <link
      rel="preload"
      href="/fonts/ml.woff2"
@ -32,25 +42,17 @@ const isProduction = import.meta.env.MODE === "production";
      type="font/woff2"
      crossorigin="anonymous"
    />
-    <meta
-      name="description"
-      content={description || globals?.site_description}
-    />
-    <meta property="og:title" content={pageTitle || globals?.site_name} />
-    <meta
-      property="og:description"
-      content={description || globals?.site_description}
-    />
-    <meta property="og:type" content={schema || "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} />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href={`${globals?.cdn_url}${globals?.avatar_transparent}?class=w200`}
+
+    <Metadata
+      schema={schema}
+      globals={globals}
+      pageTitle={pageTitle}
+      description={description}
+      ogImage={ogImage}
+      fullUrl={fullUrl}
+      {...otherProps}
    />
+
    <script defer src="/scripts/index.js"></script>
    {
      isProduction && (
@ -68,21 +70,6 @@ const isProduction = import.meta.env.MODE === "production";
    </noscript>
  </head>
  <body>
-    <script>
-      (() => {
-        const currentTheme = sessionStorage.getItem("theme");
-        const metaColorScheme = document.querySelector(
-          'meta[name="color-scheme"]'
-        );
-        const prefersDarkScheme = window.matchMedia(
-          "(prefers-color-scheme: dark)"
-        ).matches;
-        const themeToSet =
-          currentTheme || (prefersDarkScheme ? "dark" : "light");
-        if (!currentTheme) sessionStorage.setItem("theme", themeToSet);
-        metaColorScheme?.setAttribute("content", themeToSet);
-      })();
-    </script>
    <div class="main-wrapper">
      <main>
        <Header nav={nav} siteName={globals?.site_name} url={currentUrl} />
--- a/src/pages/blogroll.astro
+++ b/src/pages/blogroll.astro
@ -0,0 +1,69 @@
+---
+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}
+>
+  <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.
+  </p>
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Link</th>
+        <th>Subscribe</th>
+      </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>
+      ))}
+    </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>.
+  </p>
+</Layout>
--- a/src/pages/blogroll.opml.js
+++ b/src/pages/blogroll.opml.js
@ -0,0 +1,44 @@
+import { fetchBlogroll } from "@utils/data/blogroll";
+import { fetchGlobals } from "@utils/data/globals";
+
+export async function GET() {
+  try {
+    const blogroll = await fetchBlogroll();
+    const globals = await fetchGlobals();
+    const dateCreated = new Date().toUTCString();
+
+    const opmlContent = `
+<?xml version="1.0" encoding="UTF-8"?>
+<opml version="1.0">
+  <head>
+    <title>OPML for all feeds in ${globals.site_name}'s blogroll</title>
+    <dateCreated>${dateCreated}</dateCreated>
+  </head>
+  <body>
+    ${blogroll
+      .map(
+        (blog) => `
+      <outline
+        text="${blog.name}"
+        title="${blog.name}"
+        type="rss"
+        xmlUrl="${blog.rss_feed}"
+        htmlUrl="${blog.url}"
+      />`
+      )
+      .join("\n")}
+  </body>
+</opml>
+`.trim();
+
+    return new Response(opmlContent, {
+      status: 200,
+      headers: {
+        "Content-Type": "application/xml",
+      },
+    });
+  } catch (error) {
+    console.error("Error generating blogroll OPML:", error);
+    return new Response("Error generating blogroll OPML", { status: 500 });
+  }
+}
--- a/src/pages/books/index.astro
+++ b/src/pages/books/index.astro
@ -0,0 +1,90 @@
+---
+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 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")
+  .reverse();
+const currentBookCount = books.currentYear.length;
+const bookYearLinks = (years) =>
+  years
+    .sort((a, b) => b.value - a.value)
+    .map(
+      (year, index) =>
+        `<a href="/books/years/${year.value}">${year.value}</a>${
+          index < years.length - 1 ? " / " : ""
+        }`
+    )
+    .join("");
+---
+
+<Layout
+  globals={globals}
+  pageTitle={title}
+  description={description}
+  updated={updated}
+  currentUrl={Astro.url.pathname}
+  schema={schema}
+>
+  <h2 class="page-title">{title}</h2>
+  <p>
+    {description} I've finished <strong class="highlight-text"
+      >{currentBookCount} books</strong
+    > this year.
+  </p>
+  <p set:html={bookYearLinks(books.years)}></p>
+  <Rss
+    url="/feeds/books"
+    text="Subscribe to my books feed or follow along on this page"
+  />
+  <hr />
+  {
+    bookData.map((book) => (
+      <article class="book-entry" key={book.url}>
+        <a href={book.url}>
+          <img
+            srcSet={`
+            ${globals.cdn_url}${book.image}?class=verticalsm&type=webp 200w,
+            ${globals.cdn_url}${book.image}?class=verticalmd&type=webp 400w
+          `}
+            sizes="(max-width: 450px) 200px, 400px"
+            src={`${globals.cdn_url}${book.image}?class=verticalsm&type=webp`}
+            alt={`${book.title} by ${book.authors}`}
+            loading="lazy"
+            decoding="async"
+            width="200"
+            height="307"
+          />
+        </a>
+        <div class="media-meta">
+          <a href={book.url}>
+            <span class="title">
+              <strong>{book.title}</strong>
+            </span>
+          </a>
+          {book.author && <span class="sub-meta">By {book.author}</span>}
+          {book.progress && <ProgressBar percentage={`${book.progress}%`} />}
+          {book.description && (
+            <div
+              class="description"
+              set:html={htmlTruncate(md(book.description))}
+            />
+          )}
+        </div>
+      </article>
+    ))
+  }
+</Layout>
--- a/src/pages/links.astro
+++ b/src/pages/links.astro
@ -0,0 +1,69 @@
+---
+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 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.";
+
+// Pagination Settings
+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 pagination = {
+  currentPage,
+  totalPages,
+  hasPrevious: currentPage > 1,
+  hasNext: currentPage < totalPages,
+  previousPage: currentPage > 1 ? `/links?page=${currentPage - 1}` : null,
+  nextPage: currentPage < totalPages ? `/links?page=${currentPage + 1}` : null,
+  pages: Array.from({ length: totalPages }, (_, index) => ({
+    number: index + 1,
+    href: `/links?page=${index + 1}`,
+  })),
+};
+---
+
+<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 />
+    </>
+  )}
+
+  <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>
+    ))}
+  </div>
+
+  <Paginator pagination={pagination} />
+</Layout>
--- a/src/utils/data/books.js
+++ b/src/utils/data/books.js
@ -40,8 +40,9 @@ export async function fetchBooks() {
  const sortedByYear = Object.values(years).filter((year) => year.value > 2017);
  const currentYear = new Date().getFullYear();
  const booksForCurrentYear =
-    sortedByYear.find((yearGroup) => yearGroup.value === currentYear)?.data ||
-    [];
+    sortedByYear
+      .find((yearGroup) => yearGroup.value === currentYear)
+      ?.data.filter((book) => book["status"] === "finished") || [];

  const result = {
    all: books,
@ -53,4 +54,4 @@ export async function fetchBooks() {
  if (import.meta.env.MODE === "development") cachedBooks = result;

  return result;
-};
+}
--- a/src/utils/helpers.js
+++ b/src/utils/helpers.js
@ -2,6 +2,7 @@ import markdownIt from "markdown-it";
 import markdownItAnchor from "markdown-it-anchor";
 import markdownItFootnote from "markdown-it-footnote";
 import markdownItPrism from "markdown-it-prism";
+import truncateHtml from "truncate-html";

 const markdown = markdownIt({ html: true, linkify: true });
 markdown.use(markdownItAnchor, {
@ -43,3 +44,22 @@ export const parseCountryField = (countryField) => {
 };

 export const md = (string) => markdown.render(string);
+
+export const htmlTruncate = (content, limit = 50) =>
+  truncateHtml(content, limit, {
+    byWords: true,
+    ellipsis: "...",
+  });
+
+export const escapeHtml = (str) =>
+  str.replace(
+    /["'&<>]/g,
+    (char) =>
+      ({
+        '"': "&quot;",
+        "'": "&#39;",
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+      }[char] || char)
+  );