feat: show rating

components/Button.tsx

@@ -6,7 +6,7 @@ export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
     <button
       {...props}
       disabled={!IS_BROWSER || props.disabled}
-      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+      class="px-2 py-1 border-gray-500 border-2 "
     />
   );
 }

components/IngredientsList.tsx

@@ -1,71 +0,0 @@
-import type {
-  Ingredient,
-  IngredientGroup,
-  Ingredients,
-} from "../lib/recipes.ts";
-import { FunctionalComponent } from "preact";
-
-type IngredientsProps = {
-  ingredients: Ingredients;
-};
-
-const IngredientList = ({ ingredients }: { ingredients: Ingredient[] }) => {
-  return (
-    <>
-      {ingredients.map((item, index) => {
-        // Render Ingredient
-        const { type, amount, unit } = item as Ingredient;
-        return (
-          <tr key={index}>
-            <td class="pr-4 py-2">
-              {amount + (typeof unit !== "undefined" ? unit : "")}
-            </td>
-            <td class="px-4 py-2">{type}</td>
-          </tr>
-        );
-      })}
-    </>
-  );
-};
-
-const IngredientTable: FunctionalComponent<{ ingredients: Ingredients }> = (
-  { ingredients },
-) => {
-  return (
-    <table class="w-full border-collapse table-auto">
-      <tbody>
-        {ingredients.map((item, index) => {
-          if ("name" in item) {
-            // Render IngredientGroup
-            const { name, ingredients: groupIngredients } =
-              item as IngredientGroup;
-
-            return (
-              <>
-                <tr key={index}>
-                  <td colSpan={3} class="pr-4 py-2 font-italic">{name}</td>
-                </tr>
-                <IngredientList ingredients={groupIngredients} />
-              </>
-            );
-          } else {
-            // Render Ingredient
-            const { type, amount, unit } = item as Ingredient;
-            return (
-              <tr key={index}>
-                <td class="pr-4 py-2">
-                  {(amount ? amount : "") +
-                    (unit ? (" " + unit) : "")}
-                </td>
-                <td class="px-4 py-2">{type}</td>
-              </tr>
-            );
-          }
-        })}
-      </tbody>
-    </table>
-  );
-};
-export const IngredientsList = ({ ingredients }: IngredientsProps) => {
-  return <IngredientTable ingredients={ingredients} />;
-};

components/RecipeHero.tsx

@@ -1,5 +1,7 @@
 import { Recipe } from "@lib/recipes.ts";
 
+import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
+import { Star } from "@components/Stars.tsx";
 export function RecipeHero({ recipe }: { recipe: Recipe }) {
   const { meta: { image = "Recipes/images/placeholder.jpg" } = {} } = recipe;
 
@@ -15,22 +17,38 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
         class="object-cover w-full h-full"
       />
 
-      <div class="absolute top-4 left-4 pt-4">
+      <div class="absolute top-8 left-8 ">
         <a
-          class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg"
+          class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg block"
           href="/recipes"
         >
           Back
         </a>
       </div>
 
-      <div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 noisy-gradient">
+      {recipe.meta?.link &&
+        (
+          <div class="absolute top-8 right-8 ">
+            <a
+              href={recipe.meta.link}
+              target="__blank"
+              class="p-2 ml-4 bg-gray-300 text-gray-800 rounded-lg flex"
+              name="Link to Original recipe"
+            >
+              <IconExternalLink />
+            </a>
+          </div>
+        )}
+
+      <div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 noisy-gradient flex gap-4 items-center pt-12">
         <h2
-          class="relative text-4xl font-bold mt-4 z-10"
+          class="relative text-4xl font-bold z-10"
           style={{ color: "#1F1F1F" }}
         >
           {recipe.name}
         </h2>
+
+        {recipe.meta?.rating && <Star rating={recipe.meta.rating} />}
       </div>
     </div>
   );

components/Stars.tsx

@@ -0,0 +1,20 @@
+import IconStar from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star.tsx";
+import IconStarFilled from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star-filled.tsx";
+
+export const Star = (
+  { max = 5, rating = 3 }: { max?: number; rating: number },
+) => {
+  return (
+    <div
+      class="flex gap-2 px-4 py-2 rounded-2xl bg-gray-200 z-10"
+      style={{ color: "#1F1F1F" }}
+    >
+      {Array.from({ length: max }).map((_, i) => {
+        if (rating >= i) {
+          return <IconStarFilled class="w-4 h-4" />;
+        }
+        return <IconStar class="w-4 h-4" />;
+      })}
+    </div>
+  );
+};

fresh.gen.ts

@@ -12,6 +12,7 @@ import * as $6 from "./routes/index.tsx";
 import * as $7 from "./routes/recipes/[name].tsx";
 import * as $8 from "./routes/recipes/index.tsx";
 import * as $$0 from "./islands/Counter.tsx";
+import * as $$1 from "./islands/IngredientsList.tsx";
 
 const manifest = {
   routes: {
@@ -27,6 +28,7 @@ const manifest = {
   },
   islands: {
     "./islands/Counter.tsx": $$0,
+    "./islands/IngredientsList.tsx": $$1,
   },
   baseUrl: import.meta.url,
 };

islands/Counter.tsx

@@ -1,5 +1,5 @@
 import type { Signal } from "@preact/signals";
-import { Button } from "../components/Button.tsx";
+import { Button } from "@components/Button.tsx";
 
 interface CounterProps {
   count: Signal<number>;
@@ -7,10 +7,10 @@ interface CounterProps {
 
 export default function Counter(props: CounterProps) {
   return (
-    <div class="flex gap-8 py-6">
-      <Button onClick={() => props.count.value -= 1}>-1</Button>
+    <div class="flex gap-2 items-center">
+      <Button onClick={() => props.count.value -= 1}>-</Button>
       <p class="text-3xl">{props.count}</p>
-      <Button onClick={() => props.count.value += 1}>+1</Button>
+      <Button onClick={() => props.count.value += 1}>+</Button>
     </div>
   );
 }

islands/IngredientsList.tsx

@@ -0,0 +1,78 @@
+import { Signal } from "@preact/signals";
+import type {
+  Ingredient,
+  IngredientGroup,
+  Ingredients,
+} from "../lib/recipes.ts";
+import { FunctionalComponent } from "preact";
+
+type IngredientsProps = {
+  ingredients: Ingredients;
+};
+
+const Ingredient = (
+  { ingredient, amount, key = "", portion = 1 }: {
+    ingredient: Ingredient;
+    amount: Signal<number>;
+    key?: string | number;
+    portion?: number;
+  },
+) => {
+  const { type, amount: _amount, unit } = ingredient;
+
+  const finalAmount = (typeof _amount === "number" && amount)
+    ? (_amount / portion) * (amount?.value || 1)
+    : "";
+
+  return (
+    <tr key={key}>
+      <td class="pr-4 py-2">
+        {finalAmount + (typeof unit === "string" ? unit : "")}
+      </td>
+      <td class="px-4 py-2">{type}</td>
+    </tr>
+  );
+};
+
+export const IngredientsList: FunctionalComponent<
+  { ingredients: Ingredients; amount: Signal<number>; portion?: number }
+> = (
+  { ingredients, amount, portion },
+) => {
+  return (
+    <table class="w-full border-collapse table-auto">
+      <tbody>
+        {ingredients.map((item, index) => {
+          if ("name" in item) {
+            // Render IngredientGroup
+            const { name, ingredients: groupIngredients } =
+              item as IngredientGroup;
+
+            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}
+                    />
+                  );
+                })}
+              </>
+            );
+          } else {
+            return (
+              <Ingredient ingredient={item} amount={amount} portion={portion} />
+            );
+          }
+        })}
+      </tbody>
+    </table>
+  );
+};

lib/documents.ts

@@ -1,6 +1,9 @@
 import { unified } from "npm:unified";
 import remarkParse from "npm:remark-parse";
 import remarkFrontmatter from "https://esm.sh/remark-frontmatter@4";
+import remarkRehype from "https://esm.sh/remark-rehype";
+import rehypeSanitize from "https://esm.sh/rehype-sanitize";
+import rehypeStringify from "https://esm.sh/rehype-stringify";
 import { parse } from "https://deno.land/std@0.194.0/yaml/mod.ts";
 import * as cache from "@lib/cache/documents.ts";
 
@@ -53,6 +56,17 @@ export function parseDocument(doc: string) {
     .parse(doc);
 }
 
+export function renderMarkdown(doc: string) {
+  const out = unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeSanitize)
+    .use(rehypeStringify)
+    .processSync(doc);
+
+  return String(out);
+}
+
 export type ParsedDocument = ReturnType<typeof parseDocument>;
 export type DocumentChild = ParsedDocument["children"][number];
 

lib/recipes.ts

@@ -4,6 +4,7 @@ import {
   getTextOfRange,
   parseDocument,
   parseFrontmatter,
+  renderMarkdown,
 } from "@lib/documents.ts";
 
 import { parseIngredient } from "npm:parse-ingredient";
@@ -163,8 +164,8 @@ export function parseRecipe(original: string, id: string): Recipe {
     id,
     meta,
     name,
-    description,
+    description: description ? renderMarkdown(description) : "",
     ingredients,
-    preparation,
+    preparation: preparation ? renderMarkdown(preparation) : "",
   };
 }

routes/api/images/index.ts

@@ -10,6 +10,7 @@ import * as cache from "@lib/cache/image.ts";
 await initializeImageMagick();
 
 async function getRemoteImage(image: string) {
+  console.log("[api/image] fetching", { image });
   const sourceRes = await fetch(image);
   if (!sourceRes.ok) {
     return "Error retrieving image from URL.";
@@ -131,8 +132,6 @@ export const handler = async (
     mediaType: remoteImage.mediaType,
   });
 
-  console.log("[api/image] stored image in cache");
-
   return new Response(modifiedImage, {
     headers: {
       "Content-Type": remoteImage.mediaType,

routes/recipes/[name].tsx

@@ -1,9 +1,11 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
-import { IngredientsList } from "@components/IngredientsList.tsx";
+import { IngredientsList } from "@islands/IngredientsList.tsx";
 import { RecipeHero } from "@components/RecipeHero.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { Recipe } from "@lib/recipes.ts";
 import { getRecipe } from "../api/recipes/[name].ts";
+import Counter from "@islands/Counter.tsx";
+import { useSignal } from "@preact/signals";
 
 export const handler: Handlers<Recipe | null> = {
   async GET(_, ctx) {
@@ -13,13 +15,31 @@ export const handler: Handlers<Recipe | null> = {
 };
 
 export default function Greet(props: PageProps<Recipe>) {
+  const recipe = props.data;
+
+  const portion = recipe.meta?.portion;
+  const amount = useSignal(portion || 1);
+
   return (
     <MainLayout>
-      <RecipeHero recipe={props.data} />
+      <RecipeHero recipe={recipe} />
       <div class="px-8 text-white mt-10">
-        <h3 class="text-3xl my-5">Ingredients</h3>
-        <IngredientsList ingredients={props.data.ingredients} />
+        <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>
       </div>
     </MainLayout>
   );

static/global.css

@@ -2,6 +2,9 @@ body {
   background: #1F1F1F;
   padding: 0px 20px;
 }
+pre {
+  font-family:Work Sans;
+}
 
 .noisy-gradient::after {
   content: "";