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 }

src/helpers/memorium.ts

@@ -1,10 +1,10 @@
 export async function listResource(id: string): Promise<any[]> {
   try {
     const response = await fetch(
-      `http://localhost:8080/resources?name=${id}`,
+      `http://localhost:8080/${id}`,
     );
     return await response.json();
   } catch (error) {
-    return []
+    return [];
   }
 }

src/pages/resources/Recipes/[recipeName].astro

@@ -6,37 +6,33 @@ import * as memorium from "@helpers/memorium";
 
 const path = useTranslatedPath(Astro.url);
 
-const collection = "resources/recipes";
+const collection = "resources/Recipes";
 
 export async function getStaticPaths() {
+  const recipes = await memorium.listResource("Recipes");
 
-    const recipes = await memorium.listResource("Recipes/*");
+  const paths = recipes.content.filter(res =>res.content).map((recipe: any) => {
+    return {
+      params: {
+        recipeName: recipe.name.replace(/\.md$/, ""),
+      },
+    };
+  });
 
-    const paths = recipes.map((recipe: any) => {
-      return {
-        params: {
-          recipeName: recipe.identifier
-            .replace("Recipes/", "")
-            .replace(/\.md$/, ""),
-        },
-      };
-    });
-
-    return paths;
+  return paths;
 }
 
-
-const recipes = await memorium.listResource(
+const recipeResponse = await memorium.listResource(
   //@ts-ignore
   `Recipes/${Astro.params.recipeName}.md`,
 );
-if (recipes.length === 0) {
+if (!recipeResponse?.content) {
   return new Response(null, {
     status: 404,
     statusText: "Not found",
   });
 }
-const recipe = recipes[0];
+const recipe = recipeResponse.content;
 ---
 
 <Layout title="Max Richter">
@@ -58,14 +54,20 @@ const recipe = recipes[0];
   <h1>{recipe.name}</h1>
 
   <h3>Ingredients</h3>
+  <ul>
+    {
+      recipe.recipeIngredient?.map((ingredient: any) => (
+        <li>{markdownToText(ingredient??"")}</li>
+      ))
+    }
+  </ul>
+
+  <h3>Instructions</h3>
   <ol>
     {
       recipe.recipeIngredient?.map((ingredient: any) => (
-        <li>{markdownToText(ingredient)}</li>
+        <li>{markdownToText(ingredient??"")}</li>
       ))
     }
   </ol>
-
-  <h3>Instructions</h3>
-  <p>{recipe.recipeInstructions}</p>
 </Layout>

src/pages/resources/Recipes/index.astro

@@ -0,0 +1,24 @@
+---
+import Layout from "@layouts/Layout.astro";
+import HeroCard from "@components/HeroCard.astro";
+import * as memorium from "@helpers/memorium";
+
+const recipes = await memorium.listResource("Recipes");
+---
+
+<Layout title="Max Richter">
+  {
+    recipes.content.filter(res => res.content).map((recipe: any) => (
+      <HeroCard
+        post={{
+          collection: "resources/Recipes",
+          id: recipe.name.replace(/\.md$/, ""),
+          data: {
+            cover: recipe.content?.image ? `http://localhost:8080/${recipe.content.image}` : undefined,
+            title: recipe.name.replace(/\.md$/, ""),
+          },
+        }}
+      />
+    ))
+  }
+</Layout>

src/pages/resources/index.astro

@@ -15,7 +15,7 @@ const wiki = {
 };
 
 const articles = {
-  id: "articles",
+  id: "Articles",
   collection,
   body: "Articles saved",
   data: {
@@ -25,7 +25,7 @@ const articles = {
 };
 
 const recipes = {
-  id: "recipes",
+  id: "Recipes",
   collection,
   body: "Recipes",
   data: {
@@ -35,7 +35,7 @@ const recipes = {
 };
 
 const movies = {
-  id: "movies",
+  id: "Movies",
   collection,
   body: "Movies",
   data: {
@@ -45,7 +45,7 @@ const movies = {
 };
 
 const series = {
-  id: "series",
+  id: "Series",
   collection,
   body: "Series",
   data: {

src/pages/resources/recipes/index.astro

@@ -1,23 +0,0 @@
----
-import Layout from "@layouts/Layout.astro";
-import HeroCard from "@components/HeroCard.astro";
-import * as memorium from "@helpers/memorium";
-
-const recipes = await memorium.listResource("Recipes/*");
----
-
-<Layout title="Max Richter">
-  {
-    recipes.map((recipe: any) => (
-      <HeroCard
-        post={{
-          collection: "resources/recipes",
-          id: recipe.identifier.replace("Recipes/", "").replace(/\.md$/, ""),
-          data: {
-            title: recipe.name,
-          },
-        }}
-      />
-    ))
-  }
-</Layout>