chore: meta, books, blogroll, links

package-lock.json

@@ -13,15 +13,16 @@
         "@tabler/icons-react": "^3.19.0",
         "astro": "^4.16.13",
         "luxon": "^3.5.0",
+        "markdown-it": "^14.1.0",
+        "markdown-it-anchor": "^9.2.0",
+        "markdown-it-footnote": "^4.0.0",
+        "markdown-it-prism": "^2.3.0",
+        "truncate-html": "1.1.2",
         "youtube-video-element": "^1.1.6"
       },
       "devDependencies": {
         "@supabase/supabase-js": "^2.45.4",
-        "ics": "^3.8.1",
+        "ics": "^3.8.1"
-        "markdown-it": "^14.1.0",
-        "markdown-it-anchor": "^9.2.0",
-        "markdown-it-footnote": "^4.0.0",
-        "markdown-it-prism": "^2.3.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1955,7 +1956,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
       "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -1963,7 +1963,6 @@
       "version": "14.1.2",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
       "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -1984,7 +1983,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -2354,6 +2352,12 @@
       "integrity": "sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g==",
       "license": "MIT"
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/boxen": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-8.0.1.tgz",
@@ -2514,6 +2518,44 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
+      "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "htmlparser2": "^8.0.1",
+        "parse5": "^7.0.0",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
@@ -2675,6 +2717,34 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2811,6 +2881,61 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "license": "MIT"
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dset": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.4.tgz",
@@ -3401,6 +3526,25 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@@ -3653,7 +3797,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
       "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "uc.micro": "^2.0.0"
@@ -3801,7 +3944,6 @@
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
       "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1",
@@ -3819,7 +3961,6 @@
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.2.0.tgz",
       "integrity": "sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==",
-      "dev": true,
       "license": "Unlicense",
       "peerDependencies": {
         "@types/markdown-it": "*",
@@ -3830,14 +3971,12 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",
       "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/markdown-it-prism": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/markdown-it-prism/-/markdown-it-prism-2.3.0.tgz",
       "integrity": "sha512-ePtHY80gZyeje4bn3R3SL0jpd1C9HFaYffJW2Ma0YD+tspqa2v9TuVwUyFwboFu4jnFNcO8oPQROgbcYJbmBvw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "prismjs": "1.29.0"
@@ -4096,7 +4235,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/merge2": {
@@ -4813,6 +4951,18 @@
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "license": "MIT"
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/ohash": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-1.1.4.tgz",
@@ -4977,6 +5127,19 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5143,7 +5306,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
       "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5980,6 +6142,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/truncate-html": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/truncate-html/-/truncate-html-1.1.2.tgz",
+      "integrity": "sha512-BiLzO594/Quf0wu3jHnVxHA4X5tl4Gunhqe2mlGTa5ElwHJGw7M/N5JdBvU8OPtR+MaEIvmyUdNxnoEi3YI5Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio": "1.0.0-rc.12"
+      }
+    },
     "node_modules/tsconfck": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.4.tgz",
@@ -6036,7 +6207,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
       "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/ufo": {

package.json

@@ -17,14 +17,15 @@
     "@tabler/icons-react": "^3.19.0",
     "astro": "^4.16.13",
     "luxon": "^3.5.0",
+    "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0",
+    "markdown-it-footnote": "^4.0.0",
+    "markdown-it-prism": "^2.3.0",
+    "truncate-html": "1.1.2",
     "youtube-video-element": "^1.1.6"
   },
   "devDependencies": {
     "@supabase/supabase-js": "^2.45.4",
-    "ics": "^3.8.1",
+    "ics": "^3.8.1"
-    "markdown-it": "^14.1.0",
-    "markdown-it-anchor": "^9.2.0",
-    "markdown-it-footnote": "^4.0.0",
-    "markdown-it-prism": "^2.3.0"
   }
 }

src/components/Metadata.astro

@@ -1,11 +1,14 @@
 ---
+import { escapeHtml } from "@utils/helpers.js";
+
 const {
-  schema,
+  schema = "page",
-  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;
+    pageTitle = titleOverride || pageTitle;
-    pageDescription = page?.description || pageDescription;
+    pageDescription = descriptionOverride || pageDescription;
     break;
   default:
     break;
 }
 
-if (title) pageTitle = title;
+if (titleOverride) pageTitle = titleOverride;
-if (description) pageDescription = description;
+if (descriptionOverride) pageDescription = descriptionOverride;
+if (ogImageOverride) ogImage = ogImageOverride;
+
 if (pageTitle !== globals.site_name && schema !== "blog") pageTitle = `${pageTitle} / ${globals.site_name}`;
 
-const escapedPageDescription =
+const escapedPageDescription = escapeHtml(pageDescription);
-  pageDescription?.replace(
-    /["'<>&]/g,
-    (c) =>
-      ({
-        '"': "&quot;",
-        "'": "&#39;",
-        "<": "&lt;",
-        ">": "&gt;",
-        "&": "&amp;",
-      })[c]
-  ) || "";
 ---
 
 <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`}
 />

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"
+    <Metadata
-      content={description || globals?.site_description}
+      schema={schema}
-    />
+      globals={globals}
-    <meta property="og:title" content={pageTitle || globals?.site_name} />
+      pageTitle={pageTitle}
-    <meta
+      description={description}
-      property="og:description"
+      ogImage={ogImage}
-      content={description || globals?.site_description}
+      fullUrl={fullUrl}
-    />
+      {...otherProps}
-    <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`}
     />
+
     <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} />

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>

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 });
+  }
+}

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>

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>

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;
-};
+}

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)
+  );