Add ingredients view and some formatting

basic step parsing

api/pb_migrations/1755039357_updated_steps.js

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

api/pb_migrations/1755041844_created_ingredients.js

@@ -0,0 +1,97 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "number2683508278",
+        "max": null,
+        "min": null,
+        "name": "quantity",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3703245907",
+        "max": 0,
+        "min": 0,
+        "name": "unit",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_3146854971",
+    "indexes": [],
+    "listRule": null,
+    "name": "ingredients",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971");
+
+  return app.delete(collection);
+})

api/pb_migrations/1755041886_updated_recipes.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // add field
+  collection.fields.addAt(8, 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_842702175")
+
+  // remove field
+  collection.fields.removeById("relation1264587087")
+
+  return app.save(collection)
+})

api/pb_migrations/1755042306_updated_ingredients.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": "",
+    "listRule": "",
+    "updateRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null,
+    "listRule": null,
+    "updateRule": null,
+    "viewRule": null
+  }, collection)
+
+  return app.save(collection)
+})

src/components/Card/OverviewCard.astro

@@ -1,27 +1,31 @@
 ---
 import client from "@/data/pocketbase"
+import TagRow from "./TagRow.astro"
+
 const { recipe } = Astro.props;
 
 const headerImage = await client.collection("images").getOne(recipe.images[0])
 const image = await client.files.getURL(headerImage, headerImage.image)
 ---
 
-<div class="relative z-0 flex h-60">
+<div class="relative z-0 flex h-50">
     <img
         class="w-full h-full object-cover rounded-xl"
         src={ image }
     />
 
-    <div class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
-        <p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
-        <p class="text-white text-[10pt]"> {recipe.description} </p>
+    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
+        <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
+        <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
 
-        <div class="flex flex-row">
-            {recipe.tags.map(async tag => (
-                <p class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md">{ 
-                    (await client.collection("tags").getOne(tag)).name
-                }</p>
-            ))}
+        <div id="tag-row" class="">
+            <TagRow tagIds={recipe.tags}/>
         </div>
     </div>
+
+    <a id="link" href={`/recipe/${recipe.id}`} class="absolute inset-0 z-0">
+        <span class="block w-full h-full hover:bg-black/10 transition-colors">
+        </span>
+    </a>
+    
 </div>

src/components/Card/TagRow.astro

@@ -0,0 +1,33 @@
+---
+import client from "../../data/pocketbase"
+
+interface Props {
+    tagIds: string[]
+}
+
+const { tagIds } = Astro.props
+
+const tags = tagIds && tagIds.length > 0 
+    ? await Promise.all(tagIds.map(async (tagId: string) => {
+        try {
+            const tagData = await client.collection("tags").getOne(tagId)
+            return { name: tagData.name, id: tagId }
+        } catch (error) {
+            return null
+        }
+      }))
+    : []
+---
+
+<div class="">
+    {
+        tags.map(tag => (
+            <a 
+                href={`/tag/${tag.id}`}
+                class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 
+            >
+                {tag.name}
+            </a>
+        ))
+    }
+</div>

src/components/Detail/ImageCarousel.astro

@@ -0,0 +1,58 @@
+---
+import client from "@/data/pocketbase";
+const { recipe } = Astro.props
+
+async function getLink(img: string) {
+    const record = await client.collection("images").getOne(img)
+    const link = await client.files.getURL(record, record.image)
+    return link
+}
+
+// Use Promise.all to wait for all async operations to complete
+const links = await Promise.all(
+    recipe.images.map((img: string) => getLink(img))
+)
+
+---
+
+<script>
+    let pos = 0;
+    const dataElement = document.getElementById('carousel-data');
+    const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
+    const cap = links.length - 1;
+    const img = document.getElementById('carousel-img') as HTMLImageElement;
+
+    if (cap == 0) {
+        const b0 = document.getElementById('dec-button')
+        const b1 = document.getElementById('inc-button')
+
+        b0.hidden = true
+        b1.hidden = true
+    }
+    
+    function inc() { 
+        pos = pos === cap ? 0 : pos + 1;
+        if (img) img.src = links[pos];
+    }
+    
+    function dec() { 
+        pos = pos === 0 ? cap : pos - 1;
+        if (img) img.src = links[pos];
+    }
+    
+    // make functions globally accessible
+    (window as any).inc = inc;
+    (window as any).dec = dec;
+</script>
+
+<div>
+    <!-- Hidden element to pass server data to client -->
+    <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
+    
+    <div class="relative flex items-center w-full md:w-80 h-60">
+        <button id="dec-button" class="absolute left-2" onclick="dec()">PREV</button>
+        <img id="carousel-img" class="w-full h-full object-cover" src={links[0]} />
+        <!-- <div class="w-70 h-60 bg-green-600" /> -->
+        <button id="inc-button" class="absolute right-2" onclick="inc()">NEXT</button>
+    </div>
+</div>

src/components/Header.astro

@@ -1,13 +1,14 @@
 
-<div class="flex w-full items-center bg-yellow-100 p-5">
+<div class="flex w-full items-center bg-yellow-200 text-black p-5">
     <a class="flex" href="/">
-        <p class=" text-3xl">Reci</p>
-        <p class=" text-3xl text-amber-500">pie</p>
+        <p class="text-3xl">Recipie</p>
+        <!-- <p class=" text-3xl text-amber-500">pie</p> -->
         🥧
     </a>
 
-    <div class="flex ml-10 space-x-5">
-        <!-- <span>new</span>
-        <span>sf</span> -->
+    <div class="ml-auto space-x-5">
+        <a>new</a>
+        <a>tags</a>
+        <a>search</a>
     </div>
 </div>

src/layouts/base.astro

@@ -10,7 +10,9 @@ import Header from "@/components/Header";
 	<body>
 		<main id="main" class="flex-1">
 			<Header/>
+			<div class="px-3 md:px-5 pt-2">
 				<slot />
+			</div>
 		</main>
 	</body>
 </html>

src/pages/index.astro

@@ -7,16 +7,14 @@ const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>	
-	<div id="content" class="p-5 pt-2">
 	<!-- <p class="pb-2">What would you like today?</p> -->
 
-		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
 		{
 			recipies.map(r => (
 				<OverviewCard recipe={r} />
 			))
 		}
 	</div>
-	</div>
 
 </PageLayout>

src/pages/recipe/[recipeid].astro

@@ -0,0 +1,50 @@
+---
+import client from "@/data/pocketbase";
+import SiteLayout from "@/layouts/base";
+import ImageCarousel from "@/components/Detail/ImageCarousel";
+
+const { recipeid } = Astro.params;
+
+const re = await client.collection("recipes").getOne(recipeid ?? "0");
+
+const stepIds = re.steps
+
+const steps = await Promise.all(
+    stepIds.map(async s =>
+        await client.collection("steps").getOne(s)
+    )
+)
+
+const ingredients = await Promise.all(
+    re.ingredients.map(async s =>
+        await client.collection("ingredients").getOne(s)
+    )
+)
+---
+
+<SiteLayout>
+    <div class="flex flex-col">
+        <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>
+
+    </div>
+</SiteLayout>

src/styles/global.css

@@ -1,7 +1,8 @@
 @import "tailwindcss";
 
 html {
-    /* @apply bg-[#1d1f21]; */
-    @apply bg-[#fafafa];
+    @apply bg-[#1d1f21];
+    /* @apply bg-[#fafafa]; */
+    @apply text-white;
     @apply font-stretch-condensed;
 }