fix(blog): parse blog tree to use absolute image paths

Author: EightBitByte

package.json

@@ -34,7 +34,9 @@
     "react-dom": "19.2.3",
     "rehype-slug": "^6.0.0",
     "rehype-unwrap-images": "^1.0.0",
+    "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-html": "^16.0.1",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "vaul": "^1.1.2",
@@ -57,6 +59,7 @@
     "tailwindcss": "^4",
     "tw-animate-css": "^1.3.4",
     "typescript": "^5",
+    "unist-util-visit": "^5.1.0",
     "wrangler": "^4.58.0"
   },
   "pnpm": {

pnpm-lock.yaml

@@ -1,54 +1,82 @@
 import { Feed } from "feed";
+import { remark } from "remark";
+import html from "remark-html";
+import remarkGfm from "remark-gfm";
+import { visit } from "unist-util-visit";
 import { posts } from "@/utils/posts";
 
 export const dynamic = "force-static";
 
-export async function GET() {
-  const allPosts = posts.getPosts();
-  const latestPost = allPosts[0];
-  const siteUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://jacobmoy.com";
-  const author = {
-    name: "Jacob Moy",
-    email: "me@jacobmoy.com",
-    link: siteUrl,
+function remarkAbsoluteImages(options: { siteUrl: string }) {
+  return (tree: any) => {
+    visit(tree, "image", (node: any) => {
+      if (node.url.startsWith("/")) {
+        node.url = `${options.siteUrl}${node.url}`;
+      }
+    });
   };
+}
 
-  const feed = new Feed({
-    title: "Jacob Moy | Blog",
-    description: "Jacob Moy's personal blog about software development, technology, and life.",
-    id: siteUrl,
-    link: siteUrl,
-    language: "en",
-    image: `${siteUrl}/favicon.ico`,
-    favicon: `${siteUrl}/favicon.ico`,
-    copyright: `All rights reserved ${new Date().getFullYear()}, Jacob Moy`,
-    updated: latestPost ? new Date(latestPost.date) : new Date(),
-    generator: "Feed for Node.js",
-    feedLinks: {
-      rss2: `${siteUrl}/blog/rss`,
-    },
-    author: author,
-  });
+export async function GET() {
+  try {
+    const allPosts = posts.getPosts();
+    const latestPost = allPosts[0];
+    const siteUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://jacobmoy.com";
+    const author = {
+      name: "Jacob Moy",
+      email: "me@jacobmoy.com",
+      link: siteUrl,
+    };
 
-  allPosts.forEach((post) => {
-    const url = `${siteUrl}/blog/posts/${post.slug}`;
-    feed.addItem({
-      title: post.title,
-      id: url,
-      link: url,
-      description: post.description,
-      content: post.content,
-      author: [author],
-      contributor: [author],
-      date: new Date(post.date),
-      image: post.image ? `${siteUrl}${post.image}` : undefined,
+    const feed = new Feed({
+      title: "Jacob Moy | Blog",
+      description: "Jacob Moy's personal blog about software development, technology, and life.",
+      id: siteUrl,
+      link: siteUrl,
+      language: "en",
+      image: `${siteUrl}/favicon.ico`,
+      favicon: `${siteUrl}/favicon.ico`,
+      copyright: `All rights reserved ${new Date().getFullYear()}, Jacob Moy`,
+      updated: latestPost ? new Date(latestPost.date) : new Date(),
+      generator: "Feed for Node.js",
+      feedLinks: {
+        rss2: `${siteUrl}/blog/rss`,
+      },
+      author: author,
     });
-  });
 
-  return new Response(feed.rss2(), {
-    headers: {
-      "Content-Type": "application/xml",
-      "Cache-Control": "s-maxage=3600, stale-while-revalidate",
-    },
-  });
+    for (const post of allPosts) {
+      const url = `${siteUrl}/blog/posts/${post.slug}`;
+      const processedContent = await remark()
+        .use(remarkGfm)
+        .use(remarkAbsoluteImages, { siteUrl })
+        .use(html)
+        .process(post.content);
+      const contentHtml = processedContent.toString();
+
+      feed.addItem({
+        title: post.title,
+        id: url,
+        link: url,
+        description: post.description,
+        content: contentHtml,
+        author: [author],
+        contributor: [author],
+        date: new Date(post.date),
+        image: post.image ? `${siteUrl}${post.image}` : undefined,
+      });
+    }
+
+    return new Response(feed.rss2(), {
+      headers: {
+        "Content-Type": "application/xml",
+        "Cache-Control": "s-maxage=3600, stale-while-revalidate",
+      },
+    });
+  } catch (e: any) {
+    console.error(e);
+    return new Response(`Error generating RSS feed: ${e.message}\n${e.stack}`, {
+      status: 500,
+    });
+  }
 }