Make URL in cover prop absolute when needed

src/components/misc/ImageWrapper.astro

@@ -9,20 +9,15 @@ interface Props {
 }
 
 import path from "path";
-import { url } from "../../utils/url-utils";
+import { url, urlIsLocal, urlIsPublic } from "../../utils/url-utils";
 
 const { id, src: img, alt, position = "center", basePath = "/" } = Astro.props;
 const className = Astro.props.class;
 
 const src = typeof img === "string" ? img : img.src;
 
-const isLocal = !(
+const isLocal = urlIsLocal(src);
-  src.startsWith("/") ||
+const isPublic = urlIsPublic(src);
-  src.startsWith("http") ||
-  src.startsWith("https") ||
-  src.startsWith("data:")
-);
-// const isPublic = src.startsWith("/");
 
 // TODO temporary workaround for images dynamic import
 // https://github.com/withastro/astro/issues/3373
@@ -43,6 +38,6 @@ const imageStyle = `object-position: ${position}`;
 <div id="image-wrapper" class:list={[className, 'overflow-hidden relative']}>
     <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
     {isLocal && <img src={optimizedImg!.src} alt={alt || ""} class={imageClass} style={imageStyle}/>}
-    {!isLocal && <img src={url(src)} alt={alt || ""} class={imageClass} style={imageStyle}/>}
+    {!isLocal && <img src={isPublic ? url(src) : src} alt={alt || ""} class={imageClass} style={imageStyle}/>}
 </div>
 

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

@@ -7,13 +7,14 @@ import Markdown from "@components/misc/Markdown.astro";
 import I18nKey from "@i18n/i18nKey";
 import { i18n } from "@i18n/translation";
 import MainGridLayout from "@layouts/MainGridLayout.astro";
-import { getDir, getPostUrlBySlug } from "@utils/url-utils";
+import { getDir, getPostUrlBySlug, urlIsPublic } from "@utils/url-utils";
 import { Icon } from "astro-icon/components";
 import { licenseConfig } from "src/config";
 import PostMetadata from "../../components/PostMeta.astro";
 import ImageWrapper from "../../components/misc/ImageWrapper.astro";
 import { profileConfig } from "../../config";
 import { formatDateToYYYYMMDD } from "../../utils/date-utils";
+import { url } from "../../utils/url-utils";
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection("posts", ({ data }) => {
@@ -46,7 +47,6 @@ const jsonLd = {
 };
 
 let coverImageUrl: string | undefined;
-
 if (entry.data.image) {
   coverImageUrl = await getImage({
     src: entry.data.image,
@@ -54,10 +54,8 @@ if (entry.data.image) {
     height: 630,
   }).then(img => img.src);
 }
-
-console.log(coverImageUrl);
 ---
-<MainGridLayout banner={coverImageUrl} cover={coverImageUrl} title={entry.data.title} description={entry.data.description}>
+<MainGridLayout banner={coverImageUrl} cover={(coverImageUrl && urlIsPublic(coverImageUrl)) ? url(coverImageUrl) : coverImageUrl} title={entry.data.title} description={entry.data.description}>
     <script slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
         <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",

src/utils/url-utils.ts

@@ -35,3 +35,16 @@ export function getDir(path: string): string {
 export function url(path: string) {
   return joinUrl("", import.meta.env.BASE_URL, path);
 }
+
+export function urlIsLocal(path: string): boolean {
+  return !(
+    path.startsWith("/") ||
+    path.startsWith("http") ||
+    path.startsWith("https") ||
+    path.startsWith("data:")
+  );
+}
+
+export function urlIsPublic(path: string): boolean {
+  return path.startsWith("/");
+}