From c25f95949bf0e8b1aa253d7deec8b7b6e6c088cd Mon Sep 17 00:00:00 2001 From: june Date: Tue, 12 Aug 2025 23:46:11 +1200 Subject: [PATCH 01/17] basic hyperlinks --- src/pages/index.astro | 4 +++- src/pages/recipe/[slug].astro | 9 +++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 src/pages/recipe/[slug].astro diff --git a/src/pages/index.astro b/src/pages/index.astro index 906caf3..dfe985d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -13,7 +13,9 @@ const recipies = await client.collection("recipes").getFullList()
{ recipies.map(r => ( - + + + )) }
diff --git a/src/pages/recipe/[slug].astro b/src/pages/recipe/[slug].astro new file mode 100644 index 0000000..c37584b --- /dev/null +++ b/src/pages/recipe/[slug].astro @@ -0,0 +1,9 @@ +--- +import client from "@/data/pocketbase"; +const { slug } = Astro.params; + +const re = await client.collection("recipes").getOne(slug ?? "0"); + +--- + +{re.name} \ No newline at end of file -- 2.47.2 From eae36b8da5d5c48937b75c442fa2b3505777b4ea Mon Sep 17 00:00:00 2001 From: june Date: Tue, 12 Aug 2025 23:59:53 +1200 Subject: [PATCH 02/17] layout in detailview --- src/layouts/base.astro | 4 +++- src/pages/index.astro | 20 +++++++++----------- src/pages/recipe/[slug].astro | 5 ++++- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/layouts/base.astro b/src/layouts/base.astro index 42a0407..e1de4e5 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -10,7 +10,9 @@ import Header from "@/components/Header";
- +
+ +
diff --git a/src/pages/index.astro b/src/pages/index.astro index dfe985d..babca22 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -7,18 +7,16 @@ const recipies = await client.collection("recipes").getFullList() --- -
- + -
- { - recipies.map(r => ( - - - - )) - } -
+
+ { + recipies.map(r => ( + + + + )) + }
diff --git a/src/pages/recipe/[slug].astro b/src/pages/recipe/[slug].astro index c37584b..36682eb 100644 --- a/src/pages/recipe/[slug].astro +++ b/src/pages/recipe/[slug].astro @@ -1,9 +1,12 @@ --- import client from "@/data/pocketbase"; +import SiteLayout from "@/layouts/base"; const { slug } = Astro.params; const re = await client.collection("recipes").getOne(slug ?? "0"); --- -{re.name} \ No newline at end of file + + {re.name} + \ No newline at end of file -- 2.47.2 From 5250d8c3b333f3a65804afb60150b001a61edf0b Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 07:40:14 +1200 Subject: [PATCH 03/17] Safer handling of tags but im not done with them yet --- src/components/Card/OverviewCard.astro | 16 ++++++------- src/components/Card/TagRow.astro | 33 ++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 9 deletions(-) create mode 100644 src/components/Card/TagRow.astro diff --git a/src/components/Card/OverviewCard.astro b/src/components/Card/OverviewCard.astro index 84f2b0d..c2106b0 100644 --- a/src/components/Card/OverviewCard.astro +++ b/src/components/Card/OverviewCard.astro @@ -1,5 +1,7 @@ --- import client from "@/data/pocketbase" +import TagRow from "./TagRow.astro" + const { recipe } = Astro.props; const headerImage = await client.collection("images").getOne(recipe.images[0]) @@ -12,16 +14,12 @@ const image = await client.files.getURL(headerImage, headerImage.image) src={ image } /> -
-

{recipe.name}

-

{recipe.description}

+
+

{recipe.name}

+

{recipe.description}

-
- {recipe.tags.map(async tag => ( -

{ - (await client.collection("tags").getOne(tag)).name - }

- ))} +
+
\ No newline at end of file diff --git a/src/components/Card/TagRow.astro b/src/components/Card/TagRow.astro new file mode 100644 index 0000000..86b071c --- /dev/null +++ b/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 + } + })) + : [] +--- + +
+ { + tags.map(tag => ( + // no hover:bg-white/30 :( + + {tag.name} + + )) + } +
-- 2.47.2 From 4451c95bf763319cb08c23f0a3cd927475a595dc Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 07:57:18 +1200 Subject: [PATCH 04/17] ok enough work on the cards i should do the actual ticket work now (but it is working real well) --- src/components/Card/OverviewCard.astro | 8 +++++++- src/components/Card/TagRow.astro | 8 ++++---- src/pages/index.astro | 4 +--- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/Card/OverviewCard.astro b/src/components/Card/OverviewCard.astro index c2106b0..4f6cb94 100644 --- a/src/components/Card/OverviewCard.astro +++ b/src/components/Card/OverviewCard.astro @@ -14,7 +14,7 @@ const image = await client.files.getURL(headerImage, headerImage.image) src={ image } /> -
+

{recipe.name}

{recipe.description}

@@ -22,4 +22,10 @@ const image = await client.files.getURL(headerImage, headerImage.image)
+ + + + + +
\ No newline at end of file diff --git a/src/components/Card/TagRow.astro b/src/components/Card/TagRow.astro index 86b071c..af56aec 100644 --- a/src/components/Card/TagRow.astro +++ b/src/components/Card/TagRow.astro @@ -22,12 +22,12 @@ const tags = tagIds && tagIds.length > 0
{ tags.map(tag => ( - // no hover:bg-white/30 :( - {tag.name} - + )) }
diff --git a/src/pages/index.astro b/src/pages/index.astro index babca22..5492b5f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -12,9 +12,7 @@ const recipies = await client.collection("recipes").getFullList()
{ recipies.map(r => ( - - - + )) }
-- 2.47.2 From 66567b9b688e35958d36f6fc40b2f1e6b24874be Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 08:32:43 +1200 Subject: [PATCH 05/17] decent nice carousel working --- src/components/Detail/ImageCarousel.astro | 47 +++++++++++++++++++++++ src/components/Header.astro | 4 +- src/pages/recipe/[slug].astro | 6 ++- 3 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 src/components/Detail/ImageCarousel.astro diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro new file mode 100644 index 0000000..08a68d8 --- /dev/null +++ b/src/components/Detail/ImageCarousel.astro @@ -0,0 +1,47 @@ +--- +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)) +) + +--- + + + +
+ + + + + + +
\ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index c582951..2bb3951 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,8 +1,8 @@
-

Reci

-

pie

+

Recipie

+ 🥧 diff --git a/src/pages/recipe/[slug].astro b/src/pages/recipe/[slug].astro index 36682eb..ec3f634 100644 --- a/src/pages/recipe/[slug].astro +++ b/src/pages/recipe/[slug].astro @@ -1,6 +1,8 @@ --- import client from "@/data/pocketbase"; import SiteLayout from "@/layouts/base"; +import ImageCarousel from "@/components/Detail/ImageCarousel"; + const { slug } = Astro.params; const re = await client.collection("recipes").getOne(slug ?? "0"); @@ -8,5 +10,7 @@ const re = await client.collection("recipes").getOne(slug ?? "0"); --- - {re.name} +
+ +
\ No newline at end of file -- 2.47.2 From e3dad8bee43b6849bbde80cd1571dc089c3c92e9 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 09:41:17 +1200 Subject: [PATCH 06/17] rename page for ease --- src/pages/recipe/{[slug].astro => [recipeid].astro} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename src/pages/recipe/{[slug].astro => [recipeid].astro} (70%) diff --git a/src/pages/recipe/[slug].astro b/src/pages/recipe/[recipeid].astro similarity index 70% rename from src/pages/recipe/[slug].astro rename to src/pages/recipe/[recipeid].astro index ec3f634..0acb44a 100644 --- a/src/pages/recipe/[slug].astro +++ b/src/pages/recipe/[recipeid].astro @@ -3,9 +3,9 @@ import client from "@/data/pocketbase"; import SiteLayout from "@/layouts/base"; import ImageCarousel from "@/components/Detail/ImageCarousel"; -const { slug } = Astro.params; +const { recipeid } = Astro.params; -const re = await client.collection("recipes").getOne(slug ?? "0"); +const re = await client.collection("recipes").getOne(recipeid ?? "0"); --- -- 2.47.2 From 013077d87f90ec31d55ddd292d49b84cda9e02a6 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 10:15:35 +1200 Subject: [PATCH 07/17] hide buttons if only one image basic step parsing --- src/components/Detail/ImageCarousel.astro | 17 ++++++++++++++--- src/pages/recipe/[recipeid].astro | 14 ++++++++++++++ 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro index 08a68d8..e7f09d2 100644 --- a/src/components/Detail/ImageCarousel.astro +++ b/src/components/Detail/ImageCarousel.astro @@ -21,6 +21,14 @@ const links = await Promise.all( 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; @@ -41,7 +49,10 @@ const links = await Promise.all( - - - +
+ + + + +
\ No newline at end of file diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro index 0acb44a..4b0c6fc 100644 --- a/src/pages/recipe/[recipeid].astro +++ b/src/pages/recipe/[recipeid].astro @@ -7,10 +7,24 @@ 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) + ) +) + ---
+ +
+

{re.name}

+ + {steps.map(a => (

{a.instruction}

))} +
\ No newline at end of file -- 2.47.2 From 4f08b122e6785338664bdd8de3464091f870290f Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 11:11:31 +1200 Subject: [PATCH 08/17] dark theme + format changes --- src/components/Card/OverviewCard.astro | 8 ++++---- src/components/Header.astro | 11 ++++++----- src/layouts/base.astro | 2 +- src/pages/index.astro | 2 +- src/styles/global.css | 5 +++-- 5 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/Card/OverviewCard.astro b/src/components/Card/OverviewCard.astro index 4f6cb94..23618ee 100644 --- a/src/components/Card/OverviewCard.astro +++ b/src/components/Card/OverviewCard.astro @@ -8,15 +8,15 @@ const headerImage = await client.collection("images").getOne(recipe.images[0]) const image = await client.files.getURL(headerImage, headerImage.image) --- -
+
-
-

{recipe.name}

-

{recipe.description}

+
+

{recipe.name}

+
diff --git a/src/components/Header.astro b/src/components/Header.astro index 2bb3951..86374dc 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,13 +1,14 @@ -
+
-

Recipie

+

Recipie

🥧 -
- +
+ new + tags + search
\ No newline at end of file diff --git a/src/layouts/base.astro b/src/layouts/base.astro index e1de4e5..f738f0a 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -10,7 +10,7 @@ import Header from "@/components/Header";
-
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index 5492b5f..1ad33ec 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -9,7 +9,7 @@ const recipies = await client.collection("recipes").getFullList() -
+
{ recipies.map(r => ( diff --git a/src/styles/global.css b/src/styles/global.css index bebe217..281ef03 100644 --- a/src/styles/global.css +++ b/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; } \ No newline at end of file -- 2.47.2 From 557750607616bba9610f23467327b69f4bed27d8 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 11:11:54 +1200 Subject: [PATCH 09/17] db changes --- api/pb_migrations/1755039357_updated_steps.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 api/pb_migrations/1755039357_updated_steps.js diff --git a/api/pb_migrations/1755039357_updated_steps.js b/api/pb_migrations/1755039357_updated_steps.js new file mode 100644 index 0000000..33096e5 --- /dev/null +++ b/api/pb_migrations/1755039357_updated_steps.js @@ -0,0 +1,28 @@ +/// +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) +}) -- 2.47.2 From ca378d2e60bd7d8ad3c4eda07ebabf4d04da2f99 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 11:19:22 +1200 Subject: [PATCH 10/17] tiny change --- src/pages/index.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 1ad33ec..bf1ef86 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -9,7 +9,7 @@ const recipies = await client.collection("recipes").getFullList() -
+
{ recipies.map(r => ( -- 2.47.2 From adfea2e9e31f7242b5745378a404d372a904bd54 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 11:48:50 +1200 Subject: [PATCH 11/17] Add ingredients view and some formatting --- .../1755041844_created_ingredients.js | 97 +++++++++++++++++++ .../1755041886_updated_recipes.js | 28 ++++++ .../1755042306_updated_ingredients.js | 28 ++++++ src/components/Detail/ImageCarousel.astro | 4 +- src/pages/recipe/[recipeid].astro | 34 +++++-- 5 files changed, 182 insertions(+), 9 deletions(-) create mode 100644 api/pb_migrations/1755041844_created_ingredients.js create mode 100644 api/pb_migrations/1755041886_updated_recipes.js create mode 100644 api/pb_migrations/1755042306_updated_ingredients.js diff --git a/api/pb_migrations/1755041844_created_ingredients.js b/api/pb_migrations/1755041844_created_ingredients.js new file mode 100644 index 0000000..cd01b49 --- /dev/null +++ b/api/pb_migrations/1755041844_created_ingredients.js @@ -0,0 +1,97 @@ +/// +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); +}) diff --git a/api/pb_migrations/1755041886_updated_recipes.js b/api/pb_migrations/1755041886_updated_recipes.js new file mode 100644 index 0000000..bd0603b --- /dev/null +++ b/api/pb_migrations/1755041886_updated_recipes.js @@ -0,0 +1,28 @@ +/// +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) +}) diff --git a/api/pb_migrations/1755042306_updated_ingredients.js b/api/pb_migrations/1755042306_updated_ingredients.js new file mode 100644 index 0000000..547ebf9 --- /dev/null +++ b/api/pb_migrations/1755042306_updated_ingredients.js @@ -0,0 +1,28 @@ +/// +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) +}) diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro index e7f09d2..4f23d3c 100644 --- a/src/components/Detail/ImageCarousel.astro +++ b/src/components/Detail/ImageCarousel.astro @@ -49,9 +49,9 @@ const links = await Promise.all( -
+
- +
diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro index 4b0c6fc..0158bd1 100644 --- a/src/pages/recipe/[recipeid].astro +++ b/src/pages/recipe/[recipeid].astro @@ -15,16 +15,36 @@ const steps = await Promise.all( ) ) +const ingredients = await Promise.all( + re.ingredients.map(async s => + await client.collection("ingredients").getOne(s) + ) +) --- -
- - -
-

{re.name}

- - {steps.map(a => (

{a.instruction}

))} +
+
+ + +

{re.name}

+ + +
+ Quantity + Unit + Food + + { + ingredients.map(ing => ( + {ing.quantity} + {ing.unit} + {ing.name} + )) + } + +
+
\ No newline at end of file -- 2.47.2 From c42c868d636f54e51a38bab1f649f1d4504e1a06 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 13:47:49 +1200 Subject: [PATCH 12/17] updated theme --- src/components/Header.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 86374dc..5ffff2c 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,5 +1,5 @@ -
+

Recipie

-- 2.47.2 From 93d9a5f493b28a08b8bcf4237c50fa10e01e4a74 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 13:48:55 +1200 Subject: [PATCH 13/17] db: add ingredients to steps --- api/pb_migrations/1755045585_updated_steps.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 api/pb_migrations/1755045585_updated_steps.js diff --git a/api/pb_migrations/1755045585_updated_steps.js b/api/pb_migrations/1755045585_updated_steps.js new file mode 100644 index 0000000..df7c5b5 --- /dev/null +++ b/api/pb_migrations/1755045585_updated_steps.js @@ -0,0 +1,28 @@ +/// +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) +}) -- 2.47.2 From d54b841148289e094d075a34659763f8ed00f248 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 13:49:15 +1200 Subject: [PATCH 14/17] Add ingredient table to recipe view --- src/components/Detail/ImageCarousel.astro | 8 ++-- .../Detail/IngredientTableView.astro | 42 +++++++++++++++++++ src/pages/recipe/[recipeid].astro | 42 ++++++++++--------- src/styles/global.css | 4 +- 4 files changed, 72 insertions(+), 24 deletions(-) create mode 100644 src/components/Detail/IngredientTableView.astro diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro index 4f23d3c..8800a17 100644 --- a/src/components/Detail/ImageCarousel.astro +++ b/src/components/Detail/ImageCarousel.astro @@ -1,6 +1,6 @@ --- import client from "@/data/pocketbase"; -const { recipe } = Astro.props +const { class: className, 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; -
+
diff --git a/src/components/Detail/IngredientTableView.astro b/src/components/Detail/IngredientTableView.astro new file mode 100644 index 0000000..8d6951c --- /dev/null +++ b/src/components/Detail/IngredientTableView.astro @@ -0,0 +1,42 @@ +--- +// const { ingredients } = Astro.props + +const { class: className, ingredients } = Astro.props +--- + + + + + + + + + + + + + { + ingredients.map(ing => ( + <> + + + + + + + )) + } + +
QuantityUnitFood
{ing.quantity}{ing.unit}{ing.name}
\ No newline at end of file diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro index 0158bd1..0cae90b 100644 --- a/src/pages/recipe/[recipeid].astro +++ b/src/pages/recipe/[recipeid].astro @@ -2,6 +2,7 @@ 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; @@ -9,12 +10,14 @@ const re = await client.collection("recipes").getOne(recipeid ?? "0"); const stepIds = re.steps -const steps = await Promise.all( +let 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) @@ -23,27 +26,28 @@ const ingredients = await Promise.all( --- -
-
- - -

{re.name}

+
+
+ +

{re.name}

+

Ingredients

+
+ +
+ - -
- Quantity - Unit - Food - - { - ingredients.map(ing => ( - {ing.quantity} - {ing.unit} - {ing.name} - )) - } +
+

Steps

+ { steps.map(s => ( +
+

Step {s.index + 1}

+

{s.instruction}

+
+ )) } +
+
diff --git a/src/styles/global.css b/src/styles/global.css index 281ef03..12ec143 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -4,5 +4,7 @@ html { @apply bg-[#1d1f21]; /* @apply bg-[#fafafa]; */ @apply text-white; - @apply font-stretch-condensed; + /* @apply font-; */ + @apply font-sans; + /* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */ } \ No newline at end of file -- 2.47.2 From 93e3fc6db5b788a48dc6499502c9666caa0ad8c4 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 15:32:29 +1200 Subject: [PATCH 15/17] Table formatting --- src/components/Detail/IngredientTableView.astro | 14 +++++++------- src/pages/recipe/[recipeid].astro | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Detail/IngredientTableView.astro b/src/components/Detail/IngredientTableView.astro index 8d6951c..1f38027 100644 --- a/src/components/Detail/IngredientTableView.astro +++ b/src/components/Detail/IngredientTableView.astro @@ -18,12 +18,12 @@ const { class: className, ingredients } = Astro.props
--> - +
- - - + + + @@ -31,9 +31,9 @@ const { class: className, ingredients } = Astro.props ingredients.map(ing => ( <> - - - + + + )) diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro index 0cae90b..75662ef 100644 --- a/src/pages/recipe/[recipeid].astro +++ b/src/pages/recipe/[recipeid].astro @@ -41,7 +41,7 @@ const ingredients = await Promise.all(

Steps

{ steps.map(s => (
-

Step {s.index + 1}

+

Step {s.index + 1}

{s.instruction}

)) } -- 2.47.2 From 57d5bbe7a33321935301d8fbece0b810594cdb42 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 15:34:12 +1200 Subject: [PATCH 16/17] image width format fix --- src/components/Detail/ImageCarousel.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro index 8800a17..7df4b49 100644 --- a/src/components/Detail/ImageCarousel.astro +++ b/src/components/Detail/ImageCarousel.astro @@ -49,9 +49,9 @@ const links = await Promise.all( -
+
- +
-- 2.47.2 From c456ab17a5a712a11b4430d19ca584650d654d67 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 16:05:03 +1200 Subject: [PATCH 17/17] Add details like description and short info --- .../1755056714_updated_recipes.js | 44 +++++++++++++++++++ src/components/Detail/ImageCarousel.astro | 4 +- src/pages/recipe/[recipeid].astro | 27 +++++++++++- 3 files changed, 72 insertions(+), 3 deletions(-) create mode 100644 api/pb_migrations/1755056714_updated_recipes.js diff --git a/api/pb_migrations/1755056714_updated_recipes.js b/api/pb_migrations/1755056714_updated_recipes.js new file mode 100644 index 0000000..e829e0d --- /dev/null +++ b/api/pb_migrations/1755056714_updated_recipes.js @@ -0,0 +1,44 @@ +/// +migrate((app) => { + const collection = app.findCollectionByNameOrId("pbc_842702175") + + // add field + collection.fields.addAt(9, new Field({ + "hidden": false, + "id": "number1485952547", + "max": null, + "min": null, + "name": "worktime", + "onlyInt": true, + "presentable": false, + "required": false, + "system": false, + "type": "number" + })) + + // add field + collection.fields.addAt(10, new Field({ + "hidden": false, + "id": "number2198822773", + "max": null, + "min": null, + "name": "waittime", + "onlyInt": true, + "presentable": false, + "required": false, + "system": false, + "type": "number" + })) + + return app.save(collection) +}, (app) => { + const collection = app.findCollectionByNameOrId("pbc_842702175") + + // remove field + collection.fields.removeById("number1485952547") + + // remove field + collection.fields.removeById("number2198822773") + + return app.save(collection) +}) diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro index 7df4b49..ece401e 100644 --- a/src/components/Detail/ImageCarousel.astro +++ b/src/components/Detail/ImageCarousel.astro @@ -50,9 +50,9 @@ const links = await Promise.all(
- + - +
\ No newline at end of file diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro index 75662ef..7e3df49 100644 --- a/src/pages/recipe/[recipeid].astro +++ b/src/pages/recipe/[recipeid].astro @@ -23,6 +23,20 @@ const ingredients = await Promise.all( await client.collection("ingredients").getOne(s) ) ) + +function formatTime(seconds) { + if (seconds === 0) return null + const h = Math.floor(seconds / 3600); + const m = Math.floor((seconds % 3600) / 60); + let result = ""; + if (h > 0) result += `${h}h`; + if (m > 0) result += `${m}m`; + if (result === "") result = "0m"; + return result; +} + +const workTime = formatTime(re.worktime) +const waitTime = formatTime(re.waittime) --- @@ -30,6 +44,16 @@ const ingredients = await Promise.all(

{re.name}

+ + +

{re.description}

+
+ {re.servings !== 0 && (

Serves: {re.servings}

)} + {workTime && (

{workTime} work

)} + {waitTime && (

{waitTime} wait

)} + {re.rating !== 0 && (

{re.rating}⭐️

)} +
+

Ingredients

@@ -37,8 +61,9 @@ const ingredients = await Promise.all(
+
-

Steps

+

Steps

{ steps.map(s => (

Step {s.index + 1}

-- 2.47.2
QuantityUnitFoodQuantityUnitFood
{ing.quantity}{ing.unit}{ing.name}{ing.quantity}{ing.unit}{ing.name}