chore: meta, books, blogroll, links

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>