db changes

dark theme + format changes
hide buttons if only one image
2025-08-13 11:11:54 +12:00 · 2025-08-13 11:11:31 +12:00 · 2025-08-13 10:15:35 +12:00 · 2025-08-13 09:41:17 +12:00 · 2025-08-13 08:32:43 +12:00 · 2025-08-13 07:57:18 +12:00
23 changed files with 38 additions and 714 deletions
--- a/4
+++ b/4
@@ -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 [ "npm", "run", "preview", "--", "--host" ]
+# CMD [ "node", "dist/sever/entry.mjs"]
--- a/api/pb_migrations/1755041844_created_ingredients.js
+++ b/api/pb_migrations/1755041844_created_ingredients.js
@@ -1,97 +0,0 @@
 /// <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);
 })
--- a/api/pb_migrations/1755041886_updated_recipes.js
+++ b/api/pb_migrations/1755041886_updated_recipes.js
@@ -1,28 +0,0 @@
 /// <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)
 })
--- a/api/pb_migrations/1755042306_updated_ingredients.js
+++ b/api/pb_migrations/1755042306_updated_ingredients.js
@@ -1,28 +0,0 @@
 /// <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)
 })
--- a/api/pb_migrations/1755045585_updated_steps.js
+++ b/api/pb_migrations/1755045585_updated_steps.js
@@ -1,28 +0,0 @@
 /// <reference path="../pb_data/types.d.ts" />
 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)
 })
--- a/api/pb_migrations/1755056714_updated_recipes.js
+++ b/api/pb_migrations/1755056714_updated_recipes.js
@@ -1,44 +0,0 @@
 /// <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)
 })
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -19,5 +19,16 @@ 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'),
        },
      }
    }
  }
 });
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,6 +2,7 @@ services:
  web:
    build: .
    env_file: .env
    network_mode: host
    ports:
      - "4321:4321"
--- a/src/components/Card/OverviewCard.astro
+++ b/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.getRelativeURL(headerImage, headerImage.image)
+const image = await client.files.getURL(headerImage, headerImage.image)
 ---
 <div class="relative z-0 flex h-50">
--- a/src/components/Detail/ImageCarousel.astro
+++ b/src/components/Detail/ImageCarousel.astro
@@ -1,10 +1,10 @@
 ---
 import client from "@/data/pocketbase";
-const { class: className, recipe } = Astro.props
+const { recipe } = Astro.props
 async function getLink(img: string) {
    const record = await client.collection("images").getOne(img)
-    const link = await client.files.getRelativeURL(record, record.image)
+    const link = await client.files.getURL(record, record.image)
    return link
 }
@@ -26,8 +26,8 @@ const links = await Promise.all(
        const b0 = document.getElementById('dec-button')
        const b1 = document.getElementById('inc-button')
-        b0!.hidden = true
+        b0.hidden = true
-        b1!.hidden = true
+        b1.hidden = true
    }
    function inc() { 
@@ -45,14 +45,14 @@ const links = await Promise.all(
    (window as any).dec = dec;
 </script>
-<div class={className}>
+<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 h-60">
+    <div class="relative flex items-center w-70 h-60">
-        <button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
+        <button id="dec-button" class="absolute left-2" onclick="dec()">PREV</button>
-        <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={links[0]} />
+        <img id="carousel-img" class="w-full h-full object-contain" src={links[0]} />
        <!-- <div class="w-70 h-60 bg-green-600" /> -->
-        <button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button>
+        <button id="inc-button" class="absolute right-2" onclick="inc()">NEXT</button>
    </div>
 </div>
--- a/src/components/Detail/InfoView.astro
+++ b/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}/>
--- a/src/components/Detail/IngredientTableView.astro
+++ b/src/components/Detail/IngredientTableView.astro
@@ -1,68 +0,0 @@
 ---
 // const { ingredients } = Astro.props
 const { class: className, ingredients } = Astro.props
 const tableView = true
 ---
 {!tableView && (
    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
    {
        ingredients.map(ing => (
            <div class="text-white/70">
                <p>• {ing.quantity}&nbsp;{ing.unit}&nbsp;{ing.name}</p>
            </div>
        ))
    }
    </div>
 )}
 {tableView && (
    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
        <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>
            </tr>
        </thead>
        <tbody>
            {
            ingredients.map((ing, index) => (
                <>
                    <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
                        <td class="px-4 py-2">{ing.quantity}</td>
                        <td class="px-4 py-2">{ing.unit}</td>
                        <td class="px-4 py-2">{ing.name}</td>
                    </tr>
                </>
            ))
            }
        </tbody>
    </table>
 )}
 <style>
    .ingredient-row.completed {
        /* background-color: rgba(0, 0, 0, 0.4) !important; */
        opacity: 0.6;
    }
    .ingredient-row.completed td {
        text-decoration: line-through;
        color: rgba(255, 255, 255, 0.5);
    }
 </style>
 <script>
    document.addEventListener('DOMContentLoaded', function() {
        const rows = document.querySelectorAll('.ingredient-row');
        rows.forEach(row => {
            row.addEventListener('click', function() {
                this.classList.toggle('completed');
            });
        });
    });
 </script>
--- a/src/components/Detail/StepIngredientSideView.astro
+++ b/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 class="text-sm">
            <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
        </div>
    ))}
 </div>
--- a/src/components/Detail/StepView.astro
+++ b/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, class: className } = Astro.props
 ---
 <div class={className}>
    <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-2/5 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>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,5 +1,5 @@
-<div class="flex w-full items-center bg-[#2a2b2c] text-white p-5">
+<div class="flex w-full items-center bg-yellow-200 text-black p-5">
    <a class="flex" href="/">
        <p class="text-3xl">Recipie</p>
        <!-- <p class=" text-3xl text-amber-500">pie</p> -->
@@ -7,8 +7,8 @@
    </a>
    <div class="ml-auto space-x-5">
-        <a class="hover:underline underline-offset-4 "  href="/recipe/new">new</a>
+        <a>new</a>
-        <a class="hover:underline underline-offset-4 " >tags</a>
+        <a>tags</a>
-        <a class="hover:underline underline-offset-4 " >search</a>
+        <a>search</a>
    </div>
 </div>
--- a/src/data/pocketbase.ts
+++ b/src/data/pocketbase.ts
@@ -1,12 +1,5 @@
 import Pocketbase from "pocketbase"
-const client = new Pocketbase("http://localhost:4321")
+const client = new Pocketbase(import.meta.env.PUBLIC_URL)
 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;
--- a/src/pages/api/[...proxy].ts
+++ b/src/pages/api/[...proxy].ts
@@ -1,16 +0,0 @@
 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);
 };
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,7 +9,7 @@ const recipies = await client.collection("recipes").getFullList()
 <PageLayout>	
 	<!-- <p class="pb-2">What would you like today?</p> -->
-	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
+	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4">
 		{
 			recipies.map(r => (
 				<OverviewCard recipe={r} />
--- a/src/pages/recipe/[recipeid].astro
+++ b/src/pages/recipe/[recipeid].astro
@@ -2,9 +2,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;
@@ -12,38 +9,22 @@ const re = await client.collection("recipes").getOne(recipeid ?? "0");
 const stepIds = re.steps
-let steps = await Promise.all(
+const 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)
    )
 )
 ---
 <SiteLayout>
-    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+    <div class="flex">
-        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
+        <ImageCarousel recipe={re} />
            <ImageCarousel class="w-full" recipe={re} />
            <p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
-            <!-- Details -->
+        <div class="flex flex-col pl-4">
-            <InfoView re={re} />
+            <p class=" text-[28pt] font-bold">{re.name}</p>
-            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
+            {steps.map(a => (<p>{a.instruction}</p>))}
            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
        </div>
        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
            <!-- Steps -->
            <StepView class="md:ml-3" steps={steps} />
        </div>
    </div>
 </SiteLayout>
--- a/src/pages/recipe/new.astro
+++ b/src/pages/recipe/new.astro
@@ -1,94 +0,0 @@
 ---
 import SiteLayout from "@/layouts/base";
 const { recipeid } = Astro.params;
 // Actually post the recipe with the stored variables
 async function submitRecipe() {
 }
 ---
 <script src="@/script/newRecipe.ts"/>
 <SiteLayout>
    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
            <div class="relative">
                <input 
                    id="photo" 
                    type="file" 
                    accept="image/png,image/jpeg" 
                    class="w-full bg-white/10 rounded-lg h-50
                           file:mr-4 file:py-2 file:px-4 
                           file:rounded-lg file:border-0 file:hidden
                           before:content-['camera'] before:w-full before:h-full before:flex 
                           before:items-center before:justify-center before:absolute
                           relative cursor-pointer
                           [&::-webkit-file-upload-button]:hidden"
                >
            </div>
            <textarea
                id="rec-name"
                rows="1"
                placeholder="Name"
                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
            />
                <!-- if it works :3  -->
            <!-- Details -->
            <!-- <InfoView re={re} /> -->
            <div class="flex flex-row align-middle items-center">
                <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
                <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
            </div>
            <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                <thead>
                    <tr>
                        <th class="px-4 py-2 w-18">Qty</th>
                        <th class="px-4 py-2 w-20">Unit</th>
                        <th class="px-4 py-2">Ingredient</th>
                    </tr>
                </thead>
                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
                    <tr id="ingredient-input" class="">
                        <td class="px-2 py-1">
                            <input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
                        </td>
                        <td class="px-2 py-1">
                            <input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
                        </td>
                        <td class="px-2 py-1">
                            <!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
                             <input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
            <!-- Steps -->
            <p class="text-[22pt] font-bold md:hidden">Steps</p>
            <div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
                <!-- <p class="text-bold text-[10pt]">Step</p> -->
                <textarea
                        id="new-instruction"
                        class="block bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
                        placeholder="New Step"
                        oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
                    />
            </div>
            <button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
            <ul id="step-list"></ul>
        </div>
    </div>
 </SiteLayout>
--- a/src/script/newRecipe.ts
+++ b/src/script/newRecipe.ts
@@ -1,185 +0,0 @@
 let ingredientFields: HTMLInputElement[] = []
 let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
 let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
 let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
 let stepAddButton: HTMLButtonElement = document.querySelector('#add-step-btn')!
 let stepList: HTMLUListElement = document.querySelector('#step-list')!
 let currentStepIndex = 0
 // - VARS
 let ingredients: {qty: string, unit: string, name: string}[] = []
 let steps: {
    index: number,
    instruction: string,
    ingredients: string[], // IDs of ingredient fields
 }[] = []
 // - INIT
 document.addEventListener('DOMContentLoaded', function() {
    ingredientFields.push(
        document.querySelector('#ing-qty')!,
        document.querySelector('#ing-unit')!,
        document.querySelector('#ing-name')!
    )
    stepInput.addEventListener('input', showAddStepButton)
    // show plus button once the user types in the text fields
    ingredientFields.forEach(f => {
        f.addEventListener('input', showAddIngredientButton)
        f.addEventListener('keydown', showAddIngredientButton)
    })
    // onclick for add button
    document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
    // Enter key navigation for ingredient fields
    ingredientFields[0].addEventListener('keydown', e => {
        if (e.key === 'Enter') {
            ingredientFields[1].focus() // Move from qty to unit
        }
    })
    ingredientFields[1].addEventListener('keydown', e => {
        if (e.key === 'Enter') {
            ingredientFields[2].focus() // Move from unit to name
        }
    })
    // for pressing enter to add ingredient (on the last field)
    ingredientFields[2].addEventListener('keydown', e => {if (e.key === 'Enter') addIngredient()} )
    // Initial check for button state
    showAddIngredientButton()
    showAddStepButton()
    // Steps
    stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
    stepAddButton.addEventListener('click', addStep)
 });
 // - ADD
 function addIngredient() {
    const ing = {
        qty: ingredientFields[0].value,
        unit: ingredientFields[1].value,
        name: ingredientFields[2].value
    }
    ingredients.push(ing)
    const newRow = document.createElement('tr')
    newRow.innerHTML = `
        <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
        <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
        <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
    `
    // Add row to table and clear fields
    ingredientTable.appendChild(newRow)
    ingredientFields.forEach(f => f.value = '')
    ingredientAddButton.disabled = true // Hide Add Ingredient button
    // move cursor to Qty field again
    ingredientFields[0].focus()
 }
 function addStep() {
    const step = {
        index: currentStepIndex++,
        instruction: stepInput.value,
        ingredients: []
    }
    steps.push(step)
    renderSteps()
    stepInput.value = ''
    stepAddButton.disabled = true
    stepInput.focus()
 }
 function renderSteps() {
    // clear the step list
    stepList.innerHTML = ''
    // re-render all steps in their current order
    steps.forEach((step, displayIndex) => {
        const newStep = document.createElement('div')
        // times like this i regret using astro
        newStep.innerHTML = `
            <div class="flex justify-between items-start ">
                <div class="flex flex-col">
                    <p class="text-bold text-[10pt]">Step ${displayIndex + 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">${step.instruction}</p>
                    </div>
                </div>
                <div class="flex flex-col gap-1">
                    <button id="move-up-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === 0 ? 'disabled' : ''}>↑</button>
                    <button id="move-down-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === steps.length - 1 ? 'disabled' : ''}>↓</button>
                </div>
            </div>
        `
        newStep.id = `step-${step.index}`
        newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
        stepList.appendChild(newStep)
    })
    // event listeners to reorder buttons
    document.querySelectorAll('#move-up-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
            moveStep(stepIndex, -1)
        })
    })
    document.querySelectorAll('#move-down-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
            moveStep(stepIndex, 1)
        })
    })
 }
 // - UTILS
 function showAddIngredientButton() {
    const hasQty = ingredientFields[0].value.trim().length > 0
    const hasName = ingredientFields[2].value.trim().length > 0
    if (hasQty && hasName) {
        ingredientAddButton.disabled = false
    } else {
        ingredientAddButton.disabled = true
    }
 }
 function showAddStepButton() {
    if (stepInput.value.trim().length > 0) {
        stepAddButton.disabled = false
    } else {
        stepAddButton.disabled = true
    }
 }
 // shift: the direction to move. should be +1 to move down or -1 to move up the list
 function moveStep(stepIndex: number, shift: number) {
    // Find the step in the array
    const currentStepArrayIndex = steps.findIndex(step => step.index === stepIndex)
    if (currentStepArrayIndex === -1) return // step not found
    const newIndex = currentStepArrayIndex + shift
    // check bounds
    if (newIndex < 0 || newIndex >= steps.length) return
    // swap the steps in the array
    const temp = steps[currentStepArrayIndex]
    steps[currentStepArrayIndex] = steps[newIndex]
    steps[newIndex] = temp
    // re-render the steps
    renderSteps()
 }
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,7 +4,5 @@ html {
    @apply bg-[#1d1f21];
    /* @apply bg-[#fafafa]; */
    @apply text-white;
-    /* @apply font-; */
+    @apply font-stretch-condensed;
    @apply font-sans;
    /* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,6 @@
    "paths": {
 			"@/components/*": ["src/components/*.astro"],
 			"@/layouts/*": ["src/layouts/*.astro"],
 			"@/script/*": ["src/script/*"],
 			"@/utils": ["src/utils/index.ts"],
 			"@/data/*": ["src/data/*"],
 			"@/site-config": ["src/site.config.ts"]
Author	SHA1	Message	Date
june	5577506076	db changes	2025-08-13 11:11:54 +12:00
june	4f08b122e6	dark theme + format changes	2025-08-13 11:11:31 +12:00
june	013077d87f	hide buttons if only one image basic step parsing	2025-08-13 10:15:35 +12:00
june	e3dad8bee4	rename page for ease	2025-08-13 09:41:17 +12:00
june	66567b9b68	decent nice carousel working	2025-08-13 08:32:43 +12:00
june	4451c95bf7	ok enough work on the cards i should do the actual ticket work now (but it is working real well)	2025-08-13 07:57:18 +12:00
june	5250d8c3b3	Safer handling of tags but im not done with them yet	2025-08-13 07:40:14 +12:00
june	eae36b8da5	layout in detailview	2025-08-12 23:59:53 +12:00
june	c25f95949b	basic hyperlinks	2025-08-12 23:46:11 +12:00