feat: add R2 image handling and utility functions for image URLs

src/components/blog/PostItem.astro

@@ -2,6 +2,7 @@
 import Tags from "@/components/ui/Tags.astro";
 import Categories from "@/components/ui/Categories.astro";
 import { type CollectionEntry, render } from "astro:content";
+import { toR2Url } from "@/utils/r2";
 
 export interface Props {
   post: CollectionEntry<"blog">;
@@ -9,6 +10,7 @@ export interface Props {
 
 const { post } = Astro.props;
 const { remarkPluginFrontmatter } = await render(post);
+const coverImage = toR2Url(post.data.image);
 
 const readingTime = remarkPluginFrontmatter?.minutesRead
   ? `${Math.ceil(remarkPluginFrontmatter.minutesRead)} phút đọc`
@@ -20,9 +22,9 @@ const readingTime = remarkPluginFrontmatter?.minutesRead
 >
   <div class="relative h-48 w-full overflow-hidden">
     {
-      post.data.image && (
+      coverImage && (
         <img
-          src={post.data.image}
+          src={coverImage}
           alt={post.data.title}
           class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
         />

src/config/r2.mjs

@@ -0,0 +1 @@
+export const R2_BASE = 'https://media.balodeplao.com';

src/pages/[...slug].astro

@@ -3,6 +3,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 import Schema from "@/components/seo/Schema.astro";
 import Tags from "@/components/ui/Tags.astro";
 import Categories from "@/components/ui/Categories.astro";
+import { toR2Url } from "@/utils/r2";
 
 import { getCollection, render } from "astro:content";
 
@@ -18,6 +19,7 @@ const { post } = Astro.props;
 const { Content, remarkPluginFrontmatter } = await render(post);
 const { title, description, pubDate, author, image, categories, tags } =
   post.data;
+const coverImage = toR2Url(image);
 
 const formattedDate = pubDate.toLocaleDateString("vi-VN", {
   year: "numeric",
@@ -32,7 +34,7 @@ const readingTime = remarkPluginFrontmatter?.minutesRead
 const metadata = {
   title: title,
   description: description,
-  ogImage: image,
+  ogImage: coverImage,
 };
 ---
 
@@ -70,9 +72,13 @@ const metadata = {
       </div>
 
       {
-        image && (
+        coverImage && (
           <div class="reveal relative mb-8 h-96 w-full overflow-hidden rounded-xl shadow-lg">
-            <img src={image} alt={title} class="h-full w-full object-cover" />
+            <img
+              src={coverImage}
+              alt={title}
+              class="h-full w-full object-cover"
+            />
           </div>
         )
       }

src/plugins/remark-r2-images.mjs

@@ -0,0 +1,19 @@
+import { visit } from 'unist-util-visit';
+import { R2_BASE } from '../config/r2.mjs';
+
+export function remarkR2Images() {
+  return (tree) => {
+    visit(tree, 'image', (node) => {
+      if (node.url.startsWith('/images/')) {
+        node.url = `${R2_BASE}${node.url}`;
+      }
+    });
+
+    visit(tree, 'html', (node) => {
+      node.value = node.value.replace(
+        /src="(\/images\/[^"]+)"/g,
+        `src="${R2_BASE}$1"`
+      );
+    });
+  };
+}

src/utils/r2.ts

@@ -0,0 +1,7 @@
+import { R2_BASE } from "@/config/r2.mjs";
+
+export function toR2Url(path?: string): string | undefined {
+  if (!path) return undefined;
+  if (path.startsWith("http")) return path;
+  return `${R2_BASE}${path}`;
+}