From 8a5fec1712aabace181d4a467f0b21ffeb7f72ed Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 18:23:50 +1200 Subject: [PATCH 1/4] Fix some capitalisation issues, change rating display --- src/pages/recipe/[recipeid].astro | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro index 7e3df49..1dedf6d 100644 --- a/src/pages/recipe/[recipeid].astro +++ b/src/pages/recipe/[recipeid].astro @@ -41,24 +41,24 @@ const waitTime = formatTime(re.waittime)
-
+

{re.name}

{re.description}

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

Serves: {re.servings}

)} - {workTime && (

{workTime} work

)} - {waitTime && (

{waitTime} wait

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

{re.rating}⭐️

)} + {workTime && (

{workTime} Work

)} + {waitTime && (

{waitTime} Wait

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

{re.rating}

/10

)}

Ingredients

-
+
-- 2.47.2 From 3e10128a03145675e510c16ba41859b260adb490 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 18:27:20 +1200 Subject: [PATCH 2/4] Refactor StepView and InfoView --- src/components/Detail/InfoView.astro | 26 ++++++++++++++++++++ src/components/Detail/StepView.astro | 13 ++++++++++ src/pages/recipe/[recipeid].astro | 36 ++++------------------------ 3 files changed, 43 insertions(+), 32 deletions(-) create mode 100644 src/components/Detail/InfoView.astro create mode 100644 src/components/Detail/StepView.astro diff --git a/src/components/Detail/InfoView.astro b/src/components/Detail/InfoView.astro new file mode 100644 index 0000000..1a0d36f --- /dev/null +++ b/src/components/Detail/InfoView.astro @@ -0,0 +1,26 @@ +--- + +const { re } = Astro.props + +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) +--- + +

{re.description}

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

Serves: {re.servings}

)} + {workTime && (

{workTime} Work

)} + {waitTime && (

{waitTime} Wait

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

{re.rating}

/10

)} +
\ No newline at end of file diff --git a/src/components/Detail/StepView.astro b/src/components/Detail/StepView.astro new file mode 100644 index 0000000..d725388 --- /dev/null +++ b/src/components/Detail/StepView.astro @@ -0,0 +1,13 @@ +--- +const { steps } = Astro.props +--- + +
+

Steps

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

Step {s.index + 1}

+

{s.instruction}

+
+ )) } +
\ No newline at end of file diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro index 1dedf6d..052862f 100644 --- a/src/pages/recipe/[recipeid].astro +++ b/src/pages/recipe/[recipeid].astro @@ -3,6 +3,8 @@ import client from "@/data/pocketbase"; import SiteLayout from "@/layouts/base"; import ImageCarousel from "@/components/Detail/ImageCarousel"; import IngredientTableView from "@/components/Detail/IngredientTableView"; +import StepView from "@/components/Detail/StepView"; +import InfoView from "@/components/Detail/InfoView"; const { recipeid } = Astro.params; @@ -23,20 +25,6 @@ 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) --- @@ -46,13 +34,7 @@ const waitTime = formatTime(re.waittime)

{re.name}

-

{re.description}

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

Serves: {re.servings}

)} - {workTime && (

{workTime} Work

)} - {waitTime && (

{waitTime} Wait

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

{re.rating}

/10

)} -
+

Ingredients

@@ -62,17 +44,7 @@ const waitTime = formatTime(re.waittime) -
-

Steps

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

Step {s.index + 1}

-

{s.instruction}

-
- )) } -
- - +
-- 2.47.2 From 4ca32453e2377702b8633869885e9c8388764312 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 18:29:50 +1200 Subject: [PATCH 3/4] Add tags to detail view --- src/components/Detail/InfoView.astro | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Detail/InfoView.astro b/src/components/Detail/InfoView.astro index 1a0d36f..2516136 100644 --- a/src/components/Detail/InfoView.astro +++ b/src/components/Detail/InfoView.astro @@ -1,4 +1,6 @@ --- +import TagRow from "../Card/TagRow.astro"; + const { re } = Astro.props @@ -23,4 +25,5 @@ const waitTime = formatTime(re.waittime) {workTime && (

{workTime} Work

)} {waitTime && (

{waitTime} Wait

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

{re.rating}

/10

)} -
\ No newline at end of file +
+ \ No newline at end of file -- 2.47.2 From ab068ee898a98a9b2d68abb3a2c71cede02d1e19 Mon Sep 17 00:00:00 2001 From: june Date: Wed, 13 Aug 2025 19:13:21 +1200 Subject: [PATCH 4/4] Add ingredients in the side of instructions. Quite messy... --- .../Detail/StepIngredientSideView.astro | 17 +++++++++++++++++ src/components/Detail/StepView.astro | 16 ++++++++++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 src/components/Detail/StepIngredientSideView.astro diff --git a/src/components/Detail/StepIngredientSideView.astro b/src/components/Detail/StepIngredientSideView.astro new file mode 100644 index 0000000..5b6c7dd --- /dev/null +++ b/src/components/Detail/StepIngredientSideView.astro @@ -0,0 +1,17 @@ +--- +import client from "@/data/pocketbase"; + +const { ingredients, class: className } = Astro.props; + +const ings = await Promise.all( + ingredients.map(async i => await client.collection("ingredients").getOne(i)) +) +--- + +
+ {ings.map(i => ( +
+

• {i.quantity} {i.unit || " "} {i.name}

+
+ ))} +
\ No newline at end of file diff --git a/src/components/Detail/StepView.astro b/src/components/Detail/StepView.astro index d725388..a7652b6 100644 --- a/src/components/Detail/StepView.astro +++ b/src/components/Detail/StepView.astro @@ -1,13 +1,25 @@ --- +import { record } from "astro:schema" +import client from "@/data/pocketbase" +import StepIngredientSideView from "./StepIngredientSideView.astro" + const { steps } = Astro.props ---

Steps

{ steps.map(s => ( -
+

Step {s.index + 1}

-

{s.instruction}

+ +
+

{s.instruction}

+ {s.ingredients && s.ingredients.length > 0 && ( +
+ +
+ )} +
)) }
\ No newline at end of file -- 2.47.2