Fix some capitalisation issues, change rating display

Dockerfile.combined

@@ -1,50 +0,0 @@
-# Multi-stage build combining both services
-
-# Stage 1: Build the Node.js/Astro application
-FROM node:24-alpine AS app-builder
-WORKDIR /app
-COPY package*.json ./
-RUN npm i
-COPY . .
-ENV PUBLIC_PB_URL=http://localhost:8080
-ENV PUBLIC_URL=http://localhost:4321
-RUN npm run build
-
-ARG PB_VERSION=0.29.2
-
-WORKDIR /pb
-
-RUN apk add --no-cache \
-    unzip \
-    curl \
-    ca-certificates \
-    bash \
-    nodejs \
-    npm
-
-# Download and unzip PocketBase
-ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
-RUN unzip /tmp/pb.zip -d /pb/
-
-# Copy PocketBase entrypoint
-COPY api/docker-entrypoint.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh
-
-# # Set environment variables (keeping them as they are)
-# ENV PUBLIC_PB_URL=http://pb:8080
-# ENV PUBLIC_URL=http://localhost:4321
-
-VOLUME [ "/pb/pb_data", "/pb/pb_migrations", "/pb/pb_hooks" ]
-# VOLUME [ "/pb/pb_data" ]
-
-EXPOSE 8080 4321
-
-# Create a startup script that runs both services
-RUN echo '#!/bin/bash' > /usr/local/bin/start-services.sh && \
-    echo 'cd /pb && docker-entrypoint.sh serve --http=0.0.0.0:8080 &' >> /usr/local/bin/start-services.sh && \
-    echo 'cd /app && npm run preview -- --host &' >> /usr/local/bin/start-services.sh && \
-    echo 'wait' >> /usr/local/bin/start-services.sh && \
-    chmod +x /usr/local/bin/start-services.sh
-
-ENTRYPOINT ["start-services.sh"]
-

docker-compose.yml

@@ -1,30 +1,16 @@
-# services:
-#   web:
-#     build: .
-#     env_file: .env
-#     ports:
-#       - "4321:4321"
-
-#   pb:
-#     build: api
-#     env_file: .env
-#     volumes:
-#       - ./api/pb_data:/pb/pb_data
-#       - ./api/pb_migrations:/pb/pb_migrations
-#       - ./api/pb_hooks:/pb/pb_hooks
-#     ports:
-#       - "8080:8080"
-
 services:
-  recipie:
+  web:
-    build: 
+    build: .
-      context: .
-      dockerfile: Dockerfile.combined
     env_file: .env
     ports:
       - "4321:4321"
-      - "8080:8080" # optional, for manual pocketbase access
+
+  pb:
+    build: api
+    env_file: .env
     volumes:
       - ./api/pb_data:/pb/pb_data
       - ./api/pb_migrations:/pb/pb_migrations
       - ./api/pb_hooks:/pb/pb_hooks
+    ports:
+      - "8080:8080"

src/components/Detail/InfoView.astro

@@ -1,29 +0,0 @@
----
-import TagRow from "../Card/TagRow.astro";
-
-
-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)
----
-
-<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
-<div class="flex pt-1 items-center">
-    {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
-    {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
-    {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
-    {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
-</div>
-<TagRow tagIds={re.tags}/>

src/components/Detail/IngredientTableView.astro

@@ -2,29 +2,28 @@
 // const { ingredients } = Astro.props
 
 const { class: className, ingredients } = Astro.props
-const tableView = true
 ---
 
-{!tableView && (
+<!-- <div class=`bg-[#2a2b2c] rounded-lg grid grid-cols-3 text-center ${className}`>
-    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
+    <span class="font-bold">Quantity</span>
+    <span class="font-bold">Unit</span>
+    <span class="font-bold">Food</span>
     {
         ingredients.map(ing => (
-            <div class="text-white/70">
+            <span>{ing.quantity}</span>
-                <p>• {ing.quantity}&nbsp;{ing.unit}&nbsp;{ing.name}</p>
+            <span>{ing.unit}</span>
-            </div>
+            <span>{ing.name}</span>
         ))
     }
 
-    </div>
+</div> -->
-)}
 
-{tableView && (
+<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
-    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
     <thead>
         <tr>
             <th class="px-4 py-2">Quantity</th>
             <th class="px-4 py-2">Unit</th>
-                <th class="px-4 py-2">Ingredient</th>
+            <th class="px-4 py-2">Food</th>
         </tr>
     </thead>
     <tbody>
@@ -40,5 +39,4 @@ const tableView = true
         ))
         }
     </tbody>
-    </table>
+</table>
-)}

src/components/Detail/StepIngredientSideView.astro

@@ -1,17 +0,0 @@
----
-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))
-)
----
-
-<div class={className}>
-    {ings.map(i => (
-        <div>
-            <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
-        </div>
-    ))}
-</div>

src/components/Detail/StepView.astro

@@ -1,25 +0,0 @@
----
-import { record } from "astro:schema"
-import client from "@/data/pocketbase"
-import StepIngredientSideView from "./StepIngredientSideView.astro"
-
-const { steps } = Astro.props
----
-
-<div class="md:ml-5 mt-2 md:mt-0">
-    <p class="text-[22pt] font-bold md:hidden">Steps</p>
-    { steps.map(s => (
-        <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
-            <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
-            
-            <div class="flex flex-col md:flex-row md:items-stretch">
-                <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
-                {s.ingredients && s.ingredients.length > 0 && (
-                    <div class="w-full md:w-auto md:flex-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
-                        <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
-                    </div>
-                )}
-            </div>
-        </div>
-    )) }
-</div>

src/pages/recipe/[recipeid].astro

@@ -3,8 +3,6 @@ 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;
 
@@ -25,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)
 ---
 
 <SiteLayout>
@@ -34,7 +46,13 @@ const ingredients = await Promise.all(
             <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
 
             <!-- Details -->
-            <InfoView re={re} />
+            <p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
+            <div class="flex pt-1 items-center">
+                {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
+                {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
+                {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
+                {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
+            </div>
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
             <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
@@ -44,7 +62,17 @@ const ingredients = await Promise.all(
             <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
 
             <!-- Steps -->
-            <StepView steps={steps} />
+            <div class="md:ml-5 mt-2 md:mt-0">
+                <p class="text-[22pt] font-bold md:hidden">Steps</p>
+                { steps.map(s => (
+                    <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
+                        <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
+                        <p>{s.instruction}</p>
+                    </div>
+                )) }
+            </div>
+
+            
         </div>
 
     </div>