feat: url scraper to recipe

islands/IngredientsList.tsx

@@ -1,15 +1,15 @@
 import { Signal } from "@preact/signals";
-import type {
-  Ingredient,
-  IngredientGroup,
-  Ingredients,
-} from "../lib/recipes.ts";
+import type { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
 import { FunctionalComponent } from "preact";
 
 function numberToString(num: number) {
   return (Math.floor(num * 4) / 4).toString();
 }
 
+function stringToNumber(str: string) {
+  return parseFloat(str);
+}
+
 const Ingredient = (
   { ingredient, amount, key = "", portion = 1 }: {
     ingredient: Ingredient;
@@ -18,10 +18,12 @@ const Ingredient = (
     portion?: number;
   },
 ) => {
-  const { type, amount: _amount, unit } = ingredient;
+  const { name, quantity, unit } = ingredient;
 
-  const finalAmount = (typeof _amount === "number" && amount)
-    ? (_amount / portion) * (amount?.value || 1)
+  const parsedQuantity = stringToNumber(quantity);
+
+  const finalAmount = (typeof parsedQuantity === "number" && amount)
+    ? (parsedQuantity / portion) * (amount?.value || 1)
     : "";
 
   return (
@@ -30,13 +32,17 @@ const Ingredient = (
         {numberToString(finalAmount || 0) +
           (typeof unit === "string" ? unit : "")}
       </td>
-      <td class="px-4 py-2">{type}</td>
+      <td class="px-4 py-2">{name}</td>
     </tr>
   );
 };
 
 export const IngredientsList: FunctionalComponent<
-  { ingredients: Ingredients; amount: Signal<number>; portion?: number }
+  {
+    ingredients: (Ingredient | IngredientGroup)[];
+    amount: Signal<number>;
+    portion?: number;
+  }
 > = (
   { ingredients, amount, portion },
 ) => {
@@ -44,10 +50,9 @@ export const IngredientsList: FunctionalComponent<
     <table class="w-full border-collapse table-auto">
       <tbody>
         {ingredients.map((item, index) => {
-          if ("name" in item) {
+          if ("items" in item) {
             // Render IngredientGroup
-            const { name, ingredients: groupIngredients } =
-              item as IngredientGroup;
+            const { name, items: groupIngredients } = item as IngredientGroup;
 
             return (
               <>

islands/KMenu/commands.ts

@@ -6,6 +6,7 @@ import { getCookie } from "@lib/string.ts";
 import { addSeriesInfo } from "@islands/KMenu/commands/add_series_infos.ts";
 import { createNewSeries } from "@islands/KMenu/commands/create_series.ts";
 import { updateAllRecommendations } from "@islands/KMenu/commands/create_recommendations.ts";
+import { createNewRecipe } from "@islands/KMenu/commands/create_recipe.ts";
 
 export const menus: Record<string, Menu> = {
   main: {
@@ -74,6 +75,7 @@ export const menus: Record<string, Menu> = {
       createNewArticle,
       createNewMovie,
       createNewSeries,
+      createNewRecipe,
       addMovieInfos,
       updateAllRecommendations,
     ],

islands/KMenu/commands/create_recipe.ts

@@ -0,0 +1,46 @@
+import { MenuEntry } from "@islands/KMenu/types.ts";
+import { fetchStream, isValidUrl } from "@lib/helpers.ts";
+import { getCookie } from "@lib/string.ts";
+
+export const createNewRecipe: MenuEntry = {
+  title: "Create new recipe",
+  meta: "",
+  icon: "IconSquareRoundedPlus",
+  cb: (state) => {
+    state.menus["input_link"] = {
+      title: "Link:",
+      entries: [],
+    };
+
+    state.activeMenu.value = "input_link";
+    state.activeState.value = "input";
+
+    const unsub = state.commandInput.subscribe((value) => {
+      if (isValidUrl(value)) {
+        unsub();
+
+        state.activeState.value = "loading";
+
+        fetchStream("/api/recipes/create?url=" + value, (chunk) => {
+          if (chunk.startsWith("id:")) {
+            state.loadingText.value = "Finished";
+            setTimeout(() => {
+              globalThis.location.href = "/recipes/" +
+                chunk.replace("id:", "").trim();
+            }, 500);
+          } else {
+            state.loadingText.value = chunk;
+          }
+        });
+      }
+    });
+  },
+  visible: () => {
+    if (!getCookie("session_cookie")) return false;
+    if (
+      !globalThis?.location?.pathname?.includes("recipes") &&
+      globalThis?.location?.pathname !== "/"
+    ) return false;
+    return true;
+  },
+};