padding change

Each row in the table can be clicked/tapped to be crossed off to complete
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 [ "node", "dist/sever/entry.mjs"]
+# CMD ["npm", "run", "dev", "--", "--host"]
+CMD [ "npm", "run", "preview", "--", "--host" ]

api/pb_migrations/1755039357_updated_steps.js

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

api/pb_migrations/1755041844_created_ingredients.js

@@ -0,0 +1,97 @@
+/// <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);
+})

api/pb_migrations/1755041886_updated_recipes.js

@@ -0,0 +1,28 @@
+/// <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)
+})

api/pb_migrations/1755042306_updated_ingredients.js

@@ -0,0 +1,28 @@
+/// <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)
+})

api/pb_migrations/1755045585_updated_steps.js

@@ -0,0 +1,28 @@
+/// <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)
+})

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

@@ -2,7 +2,6 @@ services:
   web:
     build: .
     env_file: .env
-    network_mode: host
     ports:
       - "4321:4321"
 

src/components/Card/OverviewCard.astro

@@ -5,18 +5,18 @@ 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-60">
+<div class="relative z-0 flex h-50">
     <img
         class="w-full h-full object-cover rounded-xl"
         src={ image }
     />
 
-    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
-        <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
-        <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p>
+    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
+        <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
+        <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
 
         <div id="tag-row" class="">
             <TagRow tagIds={recipe.tags}/>

src/components/Detail/ImageCarousel.astro

@@ -1,10 +1,10 @@
 ---
 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)
-    const link = await client.files.getURL(record, record.image)
+    const link = await client.files.getRelativeURL(record, record.image)
     return link
 }
 
@@ -22,6 +22,14 @@ const links = await Promise.all(
     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;
         if (img) img.src = links[pos];
@@ -37,11 +45,14 @@ const links = await Promise.all(
     (window as any).dec = dec;
 </script>
 
-<div>
+<div class={className}>
     <!-- Hidden element to pass server data to client -->
     <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
     
-    <img id="carousel-img" src={links[0]} />
-    <button onclick="inc()">NEXT</button>
-    <button onclick="dec()">PREV</button>
+    <div class="relative flex items-center w-full h-60">
+        <button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
+        <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()">&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

@@ -0,0 +1,68 @@
+---
+// 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>

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 class="text-sm">
+            <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, 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>

src/components/Header.astro

@@ -1,13 +1,14 @@
 
-<div class="flex w-full items-center bg-yellow-100 p-5">
+<div class="flex w-full items-center bg-[#2a2b2c] text-white p-5">
     <a class="flex" href="/">
         <p class="text-3xl">Recipie</p>
         <!-- <p class=" text-3xl text-amber-500">pie</p> -->
         🥧
     </a>
 
-    <div class="flex ml-10 space-x-5">
-        <!-- <span>new</span>
-        <span>sf</span> -->
+    <div class="ml-auto space-x-5">
+        <a class="hover:underline underline-offset-4 "  href="/recipe/new">new</a>
+        <a class="hover:underline underline-offset-4 " >tags</a>
+        <a class="hover:underline underline-offset-4 " >search</a>
     </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/layouts/base.astro

@@ -10,7 +10,7 @@ import Header from "@/components/Header";
 	<body>
 		<main id="main" class="flex-1">
 			<Header/>
-			<div class="px-5 pt-2">
+			<div class="px-3 md:px-5 pt-2">
 				<slot />
 			</div>
 		</main>

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/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 gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
 		{
 			recipies.map(r => (
 				<OverviewCard recipe={r} />

src/pages/recipe/[recipeid].astro

@@ -0,0 +1,49 @@
+---
+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;
+
+const re = await client.collection("recipes").getOne(recipeid ?? "0");
+
+const stepIds = re.steps
+
+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)
+    )
+)
+---
+
+<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">
+            <ImageCarousel class="w-full" recipe={re} />
+            <p class="text-[28pt] font-bold leading-11 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 mt-4 md:flex-2/3 w-full flex-col">
+            <!-- Steps -->
+            <StepView class="md:ml-3" steps={steps} />
+        </div>
+
+    </div>
+</SiteLayout>

src/pages/recipe/[slug].astro

@@ -1,16 +0,0 @@
----
-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");
-
----
-
-<SiteLayout>
-    <div class="flex">
-        <ImageCarousel recipe={re} />
-    </div>
-</SiteLayout>

src/pages/recipe/new.astro

@@ -0,0 +1,94 @@
+---
+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>

src/script/newRecipe.ts

@@ -0,0 +1,185 @@
+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()
+}

src/styles/global.css

@@ -1,7 +1,10 @@
 @import "tailwindcss";
 
 html {
-    /* @apply bg-[#1d1f21]; */
-    @apply bg-[#fafafa];
-    @apply font-stretch-condensed;
+    @apply bg-[#1d1f21];
+    /* @apply bg-[#fafafa]; */
+    @apply text-white;
+    /* @apply font-; */
+    @apply font-sans;
+    /* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
 }

tsconfig.json

@@ -7,6 +7,7 @@
     "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"]