feat: initial refactor to use marka as backend

islands/IngredientsList.tsx

@@ -2,6 +2,7 @@ import { Signal } from "@preact/signals";
 import type { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
 import { FunctionalComponent } from "preact";
 import { unitsOfMeasure } from "@lib/parseIngredient.ts";
+import { renderMarkdown } from "@lib/documents.ts";
 
 function formatAmount(num: number) {
   if (num === 0) return "";
@@ -62,39 +63,19 @@ export const IngredientsList: FunctionalComponent<
 > = (
   { ingredients, amount, portion },
 ) => {
-  return (
-    <table class="w-full border-collapse table-auto">
-      <tbody>
-        {ingredients.map((item, index) => {
-          if ("items" in item) {
-            // Render IngredientGroup
-            const { name, items: groupIngredients } = item as IngredientGroup;
-
+    return (
+      <table class="w-full border-collapse table-auto">
+        <tbody>
+          {ingredients.filter((s) => !!s?.length).map((item) => {
             return (
-              <>
-                <tr key={index}>
-                  <td colSpan={3} class="pr-4 py-2 font-italic">{name}</td>
-                </tr>
-                {groupIngredients.map((item, index) => {
-                  // Render Ingredient
-                  return (
-                    <Ingredient
-                      key={index}
-                      ingredient={item}
-                      amount={amount}
-                      portion={portion}
-                    />
-                  );
-                })}
-              </>
+              <div dangerouslySetInnerHTML={{ __html: renderMarkdown(item) }}>
+              </div>
             );
-          } else {
-            return (
-              <Ingredient ingredient={item} amount={amount} portion={portion} />
-            );
-          }
-        })}
-      </tbody>
-    </table>
-  );
-};
+            // return (
+            //   <Ingredient ingredient={item} amount={amount} portion={portion} />
+            // );
+          })}
+        </tbody>
+      </table>
+    );
+  };