feat: initial refactor to use marka as backend

routes/recipes/[name].tsx

@@ -3,7 +3,7 @@ import { IngredientsList } from "@islands/IngredientsList.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import Counter from "@islands/Counter.tsx";
 import { Signal, useSignal } from "@preact/signals";
-import { getRecipe, Recipe } from "@lib/resource/recipes.ts";
+import { Recipe } from "@lib/recipeSchema.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import PageHero from "@components/PageHero.tsx";
@@ -11,11 +11,12 @@ import { Star } from "@components/Stars.tsx";
 import { renderMarkdown } from "@lib/documents.ts";
 import { isValidRecipe } from "@lib/recipeSchema.ts";
 import { MetaTags } from "@components/MetaTags.tsx";
+import { fetchResource } from "@lib/resources.ts";
 
 export const handler: Handlers<{ recipe: Recipe; session: unknown } | null> = {
   async GET(_, ctx) {
     try {
-      const recipe = await getRecipe(ctx.params.name);
+      const recipe = await fetchResource(`recipes/${ctx.params.name}.md`);
       if (!recipe) {
         return ctx.renderNotFound();
       }
@@ -38,22 +39,24 @@ function ValidRecipe({
         {portion && <Counter count={amount} />}
       </div>
       <IngredientsList
-        ingredients={recipe.ingredients}
+        ingredients={recipe.content.recipeIngredient}
         amount={amount}
         portion={portion}
       />
       <h3 class="text-3xl my-5">Preparation</h3>
       <div class="pl-2">
         <ol class="list-decimal grid gap-4">
-          {recipe.instructions && (recipe.instructions.map((instruction) => {
-            return (
-              <li
-                dangerouslySetInnerHTML={{
-                  __html: renderMarkdown(instruction),
-                }}
-              />
-            );
-          }))}
+          {recipe.content.recipeInstructions &&
+            (recipe.content.recipeInstructions.filter((inst) => !!inst?.length)
+              .map((instruction) => {
+                return (
+                  <li
+                    dangerouslySetInnerHTML={{
+                      __html: renderMarkdown(instruction),
+                    }}
+                  />
+                );
+              }))}
         </ol>
       </div>
     </>
@@ -65,35 +68,38 @@ export default function Page(
 ) {
   const { recipe, session } = props.data;
 
-  const portion = recipe.meta?.portion;
+  const portion = recipe.recipeYield;
   const amount = useSignal(portion || 1);
 
   const subline = [
-    recipe?.meta?.time && `Duration ${recipe.meta.time}`,
+    recipe?.content?.prepTime && `Duration ${recipe?.content?.prepTime}`,
   ].filter(Boolean) as string[];
 
   return (
     <MainLayout
       url={props.url}
-      title={`Recipes > ${recipe.name}`}
+      title={`Recipes > ${recipe.content?.name}`}
       context={recipe}
     >
       <RedirectSearchHandler />
       <KMenu type="main" context={recipe} />
       <MetaTags resource={recipe} />
 
-      <PageHero image={recipe.meta?.image} thumbnail={recipe.meta?.thumbnail}>
+      <PageHero
+        image={recipe.content?.image}
+        thumbnail={recipe.content?.thumbnail}
+      >
         <PageHero.Header>
           <PageHero.BackLink href="/recipes" />
           {session && (
             <PageHero.EditLink
-              href={`https://notes.max-richter.dev/Recipes/${recipe.id}`}
+              href={`https://notes.max-richter.dev/resources/recipes/${recipe.name}`}
             />
           )}
         </PageHero.Header>
         <PageHero.Footer>
-          <PageHero.Title link={recipe.meta?.link}>
-            {recipe.name}
+          <PageHero.Title link={recipe.content?.link}>
+            {recipe.content.name}
           </PageHero.Title>
           <PageHero.Subline
             entries={subline}
@@ -113,12 +119,9 @@ export default function Page(
             />
           )
           : (
-            <div
-              class="whitespace-break-spaces markdown-body"
-              dangerouslySetInnerHTML={{
-                __html: renderMarkdown(recipe?.markdown || ""),
-              }}
-            />
+            <div class="whitespace-break-spaces markdown-body">
+              {JSON.stringify(recipe)}
+            </div>
           )}
       </div>
     </MainLayout>

routes/recipes/index.tsx

@@ -1,19 +1,20 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
-import { getAllRecipes, Recipe } from "@lib/resource/recipes.ts";
+import { Recipe } from "@lib/recipeSchema.ts";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
-import { parseResourceUrl, searchResource } from "@lib/search.ts";
 import { GenericResource } from "@lib/types.ts";
 import { ResourceCard } from "@components/Card.tsx";
+import { fetchResource } from "@lib/resources.ts";
+import { parseResourceUrl, searchResource } from "@lib/search.ts";
 
 export const handler: Handlers<
   { recipes: Recipe[] | null; searchResults?: GenericResource[] }
 > = {
   async GET(req, ctx) {
-    const recipes = await getAllRecipes();
+    const { content: recipes } = await fetchResource("recipes");
     const searchParams = parseResourceUrl(req.url);
     const searchResults = searchParams &&
       await searchResource({ ...searchParams, types: ["recipe"] });
@@ -48,8 +49,8 @@ export default function Greet(
         <h3 class="text-2xl text-white font-light">🍽️ Recipes</h3>
       </header>
       <Grid>
-        {recipes?.map((doc) => {
-          return <ResourceCard sublink="recipes" res={doc} />;
+        {recipes?.filter((s) => !!s?.content?.name).map((doc) => {
+          return <ResourceCard sublink="recipes" key={doc.name} res={doc} />;
         })}
       </Grid>
     </MainLayout>