improve ingredient naming

briansunter · Mar 30, 2024 · 457efdd · 457efdd
1 parent e3f7c58
commit 457efdd
Showing 1 changed file with 5 additions and 7 deletions.
diff --git a/site/src/pages/recipes/[...recipe].astro b/site/src/pages/recipes/[...recipe].astro
@@ -25,25 +25,23 @@ const { ingredients, metadata, steps } = entry.data;
 <div class="container mx-auto p-4 max-w-3xl">
     <h1 class="text-3xl font-bold text-center my-6">{metadata.title}</h1>
 
-    <!-- Ingredients Section -->
     <section class="mb-8">
         <h2 class="text-2xl font-semibold mb-4">Ingredients</h2>
         <ul class="list-disc pl-5">
             {ingredients.map(({ name, quantity, units }) => (
                 <li class="mb-2">
-                    {quantity} {units} {name}
+                    {quantity !== 1 && units ? `${quantity} ${units}` : units ? `1 ${units}` : ""} {name}
                 </li>
             ))}
         </ul>
     </section>
-
     {entry.data.cookwares.length > 0 && (
         <section class="mb-8">
             <h2 class="text-2xl font-semibold mb-4">Cookware</h2>
             <ul class="list-disc pl-5">
-                {entry.data.cookwares.map(({ name, quantity }) => (
+                {entry.data.cookwares.map(({ name }) => (
                     <li class="mb-2">
-                        {quantity} {name}
+                        {name}
                     </li>
                 ))}
             </ul>
@@ -61,8 +59,8 @@ const { ingredients, metadata, steps } = entry.data;
                             return <span>{stepItem.value}</span>;
                         } else if (stepItem.type === "ingredient") {
                             return (
-                                <span class="inline-block bg-gray-100 text-gray-800 rounded px-1 py-1 mt-2 mr-1">{stepItem.quantity} {stepItem.units} {stepItem.name}</span>
-                            );
+                                <span class="inline-block bg-gray-100 text-gray-800 rounded px-1 py-1 mt-2 mr-1">{(stepItem.quantity !== 1 && stepItem.units ? `${stepItem.quantity} ${stepItem.units}` : stepItem.units ? `1 ${stepItem.units}` : "")} {stepItem.name}</span>
+                                )
                         } else if (stepItem.type === "timer") {
                             return (
                                 <span class="inline-block bg-yellow-100 text-gray-800 rounded px-1 py-1 mt-2 mr-1">{stepItem.quantity} {stepItem.units}</span>