one line fixed it :3 but also i don't want to remove the other two cos they're useful

Option interface not implemented, will be in a future settings page. But anyway idk i like the table view more
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

Dockerfile

@@ -9,5 +9,5 @@ ENV PUBLIC_URL=http://localhost:4321
 RUN npm run build
 
 EXPOSE 4321
-CMD ["npm", "run", "dev", "--", "--host"]
+# CMD ["npm", "run", "dev", "--", "--host"]
-# CMD [ "node", "dist/sever/entry.mjs"]
+CMD [ "npm", "run", "preview", "--", "--host" ]

Dockerfile.combined

@@ -0,0 +1,50 @@
+# 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"]
+

api/pb_migrations/1755056714_updated_recipes.js

@@ -0,0 +1,44 @@
+/// <reference path="../pb_data/types.d.ts" />
+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)
+})

astro.config.mjs

@@ -19,16 +19,5 @@ export default defineConfig({
 
   vite: {
     plugins: [tailwindcss()],
-    server: {
-      proxy: {
-        // The idea is to proxy the Pocketbase connection to the current domain so the user doesn't have to open two ports
-        // Currently works in dev (npm run dev -- --host) with the correct PUBLIC_URL var set but not through docker
-        '/api': {
-          target: PUBLIC_PB_URL,
-          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, '/api'),
-        },
-      }
-    }
   }
 });

docker-compose.yml

@@ -1,17 +1,30 @@
+# 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:
-  web:
+  recipie:
-    build: .
+    build: 
+      context: .
+      dockerfile: Dockerfile.combined
     env_file: .env
-    network_mode: host
     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/Card/OverviewCard.astro

@@ -5,7 +5,7 @@ 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)
+const image = await client.files.getRelativeURL(headerImage, headerImage.image)
 ---
 
 <div class="relative z-0 flex h-50">

src/components/Detail/ImageCarousel.astro

@@ -4,7 +4,7 @@ const { class: className, 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)
+    const link = await client.files.getRelativeURL(record, record.image)
     return link
 }
 
@@ -49,10 +49,10 @@ const links = await Promise.all(
     <!-- 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">
+    <div class="relative flex items-center w-full h-60">
-        <button id="dec-button" class="absolute left-2" onclick="dec()">PREV</button>
+        <button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
-        <img id="carousel-img" class="w-full h-full object-cover" src={links[0]} />
+        <img id="carousel-img" class="rounded-lg 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>
+        <button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button>
     </div>
 </div>

src/components/Detail/InfoView.astro

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

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

src/components/Detail/StepView.astro

@@ -0,0 +1,25 @@
+---
+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/data/pocketbase.ts

@@ -1,5 +1,12 @@
 import Pocketbase from "pocketbase"
 
-const client = new Pocketbase(import.meta.env.PUBLIC_URL)
+const client = new Pocketbase("http://localhost:4321")
 client.autoCancellation(false)
+
+// Return a relative url for file instead of full path including localhost, which breaks external access
+client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
+    const res = client.files.getURL(record, filename)
+    return res.substring(21)
+}
+
 export default client;

src/pages/api/[...proxy].ts

@@ -0,0 +1,16 @@
+import type { APIRoute } from "astro";
+
+// THANK YOU https://stackoverflow.com/a/77297521 !!!!!!!
+
+const getProxyUrl = (request: Request) => {
+  const proxyUrl = new URL(import.meta.env.PUBLIC_PB_URL);
+  const requestUrl = new URL(request.url);
+
+  return new URL(requestUrl.pathname, proxyUrl);
+};
+
+export const ALL: APIRoute = async ({ request }) => {
+  const proxyUrl = getProxyUrl(request);
+  const response = await fetch(proxyUrl.href, request);
+  return new Response(response.body);
+};

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;
 
@@ -27,27 +29,22 @@ const ingredients = await Promise.all(
 
 <SiteLayout>
     <div class="flex flex-col md:flex-row">
-        <div class="flex flex-col ">
+        <div class="flex flex-col mt-2 md:mt-4 sticky">
             <ImageCarousel class="w-full" recipe={re} />
             <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
+
+            <!-- Details -->
+            <InfoView re={re} />
+
             <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">
+        <div class="flex w-full 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">
+            <!-- Steps -->
-                <p class="text-[22pt] font-bold">Steps</p>
+            <StepView steps={steps} />
-                { 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>
-
-            
         </div>
 
     </div>