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

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