api/pb_migrations/1755045585_updated_steps.js

@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4284789913")
-
-  // add field
-  collection.fields.addAt(3, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_3146854971",
-    "hidden": false,
-    "id": "relation1264587087",
-    "maxSelect": 999,
-    "minSelect": 0,
-    "name": "ingredients",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4284789913")
-
-  // remove field
-  collection.fields.removeById("relation1264587087")
-
-  return app.save(collection)
-})

src/components/Detail/ImageCarousel.astro

@@ -1,6 +1,6 @@
 ---
 import client from "@/data/pocketbase";
-const { class: className, recipe } = Astro.props
+const { recipe } = Astro.props
 
 async function getLink(img: string) {
     const record = await client.collection("images").getOne(img)
@@ -26,8 +26,8 @@ const links = await Promise.all(
         const b0 = document.getElementById('dec-button')
         const b1 = document.getElementById('inc-button')
 
-        b0!.hidden = true
-        b1!.hidden = true
+        b0.hidden = true
+        b1.hidden = true
     }
     
     function inc() { 
@@ -45,7 +45,7 @@ const links = await Promise.all(
     (window as any).dec = dec;
 </script>
 
-<div class={className}>
+<div>
     <!-- Hidden element to pass server data to client -->
     <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
     

src/components/Detail/IngredientTableView.astro

@@ -1,42 +0,0 @@
----
-// const { ingredients } = Astro.props
-
-const { class: className, ingredients } = Astro.props
----
-
-<!-- <div class=`bg-[#2a2b2c] rounded-lg grid grid-cols-3 text-center ${className}`>
-    <span class="font-bold">Quantity</span>
-    <span class="font-bold">Unit</span>
-    <span class="font-bold">Food</span>
-    {
-        ingredients.map(ing => (
-            <span>{ing.quantity}</span>
-            <span>{ing.unit}</span>
-            <span>{ing.name}</span>
-        ))
-    }
-
-</div> -->
-
-<table class={`table-auto bg-[#2a2b2c] rounded-lg ${className} w-full`}>
-    <thead>
-        <tr>
-            <th class="text-center px-4 py-2">Quantity</th>
-            <th class="text-center px-4 py-2">Unit</th>
-            <th class="text-center px-4 py-2">Food</th>
-        </tr>
-    </thead>
-    <tbody>
-        {
-        ingredients.map(ing => (
-            <>
-                <tr class="border-t border-gray-600">
-                    <td class="text-left px-4 py-2">{ing.quantity}</td>
-                    <td class="text-left px-4 py-2">{ing.unit}</td>
-                    <td class="text-left px-4 py-2">{ing.name}</td>
-                </tr>
-            </>
-        ))
-        }
-    </tbody>
-</table>

src/components/Header.astro

@@ -1,5 +1,5 @@
 
-<div class="flex w-full items-center bg-[#2a2b2c] text-white p-5">
+<div class="flex w-full items-center bg-yellow-200 text-black p-5">
     <a class="flex" href="/">
         <p class="text-3xl">Recipie</p>
         <!-- <p class=" text-3xl text-amber-500">pie</p> -->

src/pages/recipe/[recipeid].astro

@@ -2,7 +2,6 @@
 import client from "@/data/pocketbase";
 import SiteLayout from "@/layouts/base";
 import ImageCarousel from "@/components/Detail/ImageCarousel";
-import IngredientTableView from "@/components/Detail/IngredientTableView";
 
 const { recipeid } = Astro.params;
 
@@ -10,14 +9,12 @@ const re = await client.collection("recipes").getOne(recipeid ?? "0");
 
 const stepIds = re.steps
 
-let steps = await Promise.all(
+const steps = await Promise.all(
     stepIds.map(async s =>
         await client.collection("steps").getOne(s)
     )
 )
 
-steps = steps.sort((a, b) => a.index - b.index);
-
 const ingredients = await Promise.all(
     re.ingredients.map(async s =>
         await client.collection("ingredients").getOne(s)
@@ -26,27 +23,26 @@ const ingredients = await Promise.all(
 ---
 
 <SiteLayout>
-    <div class="flex flex-col md:flex-row">
-        <div class="flex flex-col ">
-            <ImageCarousel class="w-full" recipe={re} />
-            <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
-            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
-        </div>
-        
     <div class="flex flex-col">
-            <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
-
-            <div class="md:ml-5 mt-2 md:mt-0">
-                <p class="text-[22pt] font-bold">Steps</p>
-                { steps.map(s => (
-                    <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
-                        <p>Step {s.index + 1}</p>
-                        <p>{s.instruction}</p>
-                    </div>
-                )) }
+        <div class="flex flex-col md:flex-row">
+            <ImageCarousel recipe={re} />
+            <!-- Title -->
+            <p class=" text-[28pt] font-bold md:pl-5">{re.name}</p>
         </div>
 
+        <!-- Ingredients -->
+        <div class="bg-[#2a2b2c] rounded-lg md:w-80 md:mt-4 grid grid-cols-3 px-4 text-center">
+            <span class="font-bold">Quantity</span>
+            <span class="font-bold">Unit</span>
+            <span class="font-bold">Food</span>
+
+            {
+                ingredients.map(ing => (
+                    <span>{ing.quantity}</span>
+                    <span>{ing.unit}</span>
+                    <span>{ing.name}</span>
+                ))
+            }
 
         </div>
 

src/styles/global.css

@@ -4,7 +4,5 @@ html {
     @apply bg-[#1d1f21];
     /* @apply bg-[#fafafa]; */
     @apply text-white;
-    /* @apply font-; */
-    @apply font-sans;
-    /* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
+    @apply font-stretch-condensed;
 }