feat: load data from marka

src/components/HeroCard.astro

@@ -32,12 +32,12 @@ const link = translatePath(`/${collection}/${id.split("/")[0]}`);
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
     <Card.Title classes="text-4xl flex items-center gap-2">
       {
-      icon && 
-        (
-          icon?.length > 5
-            ? <img class="h-6 w-6" src={icon}  />
-            : <span class="p-r-4 text-md">{icon}</span>
-        )
+        icon &&
+          (icon?.length > 5 ? (
+            <img class="h-6 w-6" src={icon} />
+          ) : (
+            <span class="p-r-4 text-md">{icon}</span>
+          ))
       }
       {title}
     </Card.Title>

src/components/Image.astro

@@ -13,6 +13,19 @@ interface Props {
   maxWidth?: number;
 }
 
+async function checkImage(src:string){
+  try {
+    const res = await fetch(src);
+    if (res.ok) {
+      return src
+    }
+    return undefined
+  }catch(err){
+    console.log({src});
+    return undefined
+  }
+}
+
 const {
   src: image,
   loader = true,
@@ -24,6 +37,8 @@ const {
 
 let thumbhash = hash && image.fsPath ? await generateThumbHash(image) : "";
 
+const imageSrc = await checkImage(image);
+
 let exif = await getExifData(image);
 
 const sizes = [
@@ -45,11 +60,13 @@ const sizes = [
 ].filter((size) => !maxWidth || size.width <= maxWidth);
 ---
 
+{imageSrc?
 <AstroImage
-  src={image}
+  src={imageSrc}
   alt={alt}
   data-thumbhash={thumbhash}
   data-exif={JSON.stringify(exif)}
+  inferSize={true}
   pictureAttributes={{
     class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
   }}
@@ -60,3 +77,4 @@ const sizes = [
     .join(", ")}>
   <slot />
 </AstroImage>
+:undefined }