feat: url scraper to recipe

routes/recipes/[name].tsx

@@ -2,20 +2,65 @@ import { Handlers, PageProps } from "$fresh/server.ts";
 import { IngredientsList } from "@islands/IngredientsList.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import Counter from "@islands/Counter.tsx";
-import { useSignal } from "@preact/signals";
+import { Signal, useSignal } from "@preact/signals";
 import { getRecipe, Recipe } from "@lib/resource/recipes.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import PageHero from "@components/PageHero.tsx";
 import { Star } from "@components/Stars.tsx";
+import { renderMarkdown } from "@lib/documents.ts";
 
 export const handler: Handlers<{ recipe: Recipe; session: unknown } | null> = {
   async GET(_, ctx) {
-    const recipe = await getRecipe(ctx.params.name);
-    return ctx.render({ recipe, session: ctx.state.session });
+    try {
+      const recipe = await getRecipe(ctx.params.name);
+      if (!recipe) {
+        return ctx.renderNotFound();
+      }
+      return ctx.render({ recipe, session: ctx.state.session });
+    } catch (_e) {
+      return ctx.renderNotFound();
+    }
   },
 };
 
+function isValidRecipe(recipe: Recipe | null) {
+  return recipe?.ingredients?.length && recipe?.instructions?.length &&
+    recipe.name?.length;
+}
+
+function ValidRecipe({
+  recipe,
+  amount,
+  portion,
+}: { recipe: Recipe; amount: Signal<number>; portion: number }) {
+  return (
+    <>
+      <div class="flex items-center gap-8">
+        <h3 class="text-3xl my-5">Ingredients</h3>
+        {portion && <Counter count={amount} />}
+      </div>
+      <IngredientsList
+        ingredients={recipe.ingredients}
+        amount={amount}
+        portion={portion}
+      />
+      <h3 class="text-3xl my-5">Preparation</h3>
+      <ol class="list-decimal grid gap-4">
+        {recipe.instructions && (recipe.instructions.map((instruction) => {
+          return (
+            <li
+              dangerouslySetInnerHTML={{
+                __html: renderMarkdown(instruction),
+              }}
+            />
+          );
+        }))}
+      </ol>
+    </>
+  );
+}
+
 export default function Greet(
   props: PageProps<{ recipe: Recipe; session: Record<string, string> }>,
 ) {
@@ -47,7 +92,9 @@ export default function Greet(
           )}
         </PageHero.Header>
         <PageHero.Footer>
-          <PageHero.Title>{recipe.name}</PageHero.Title>
+          <PageHero.Title link={recipe.meta?.link}>
+            {recipe.name}
+          </PageHero.Title>
           <PageHero.Subline
             entries={subline}
           >
@@ -55,23 +102,23 @@ export default function Greet(
           </PageHero.Subline>
         </PageHero.Footer>
       </PageHero>
+
       <div class="px-8 text-white mt-10">
-        <div class="flex items-center gap-8">
-          <h3 class="text-3xl my-5">Ingredients</h3>
-          {portion && <Counter count={amount} />}
-        </div>
-        <IngredientsList
-          ingredients={recipe.ingredients}
-          amount={amount}
-          portion={portion}
-        />
-        <h3 class="text-3xl my-5">Preparation</h3>
-        <pre
-          class="whitespace-break-spaces"
-          dangerouslySetInnerHTML={{ __html: recipe.preparation || "" }}
-        >
-          {recipe.preparation}
-        </pre>
+        {isValidRecipe(recipe)
+          ? (
+            <ValidRecipe
+              recipe={recipe}
+              amount={amount}
+              portion={portion || 1}
+            />
+          )
+          : (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: renderMarkdown(recipe?.markdown || ""),
+              }}
+            />
+          )}
       </div>
     </MainLayout>
   );