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

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"]
+

astro.config.mjs

@@ -7,6 +7,8 @@ import tailwindcss from '@tailwindcss/vite';
 
 import { loadEnv } from "vite";
 
+const { PUBLIC_PB_URL } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
+
 // https://astro.build/config
 export default defineConfig({
   output: 'server',
@@ -17,8 +19,5 @@ export default defineConfig({
 
   vite: {
     plugins: [tailwindcss()],
-    server: {
-      cors: false
-    }
   }
 });

docker-compose.yml

@@ -1,16 +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:
-    build: .
+  recipie:
+    build: 
+      context: .
+      dockerfile: Dockerfile.combined
     env_file: .env
     ports:
       - "4321:4321"
-
-  pb:
-    build: api
-    env_file: .env
+      - "8080:8080" # optional, for manual pocketbase access
     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

@@ -4,7 +4,8 @@ import TagRow from "./TagRow.astro"
 
 const { recipe } = Astro.props;
 
-const image = (await client.getRecipeImages(recipe.id))[0]
+const headerImage = await client.collection("images").getOne(recipe.images[0])
+const image = await client.files.getRelativeURL(headerImage, headerImage.image)
 ---
 
 <div class="relative z-0 flex h-50">
@@ -18,7 +19,7 @@ const image = (await client.getRecipeImages(recipe.id))[0]
         <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
 
         <div id="tag-row" class="">
-            <TagRow tags={recipe.expand.tags}/>
+            <TagRow tagIds={recipe.tags}/>
         </div>
     </div>
 

src/components/Card/TagRow.astro

@@ -1,12 +1,29 @@
 ---
-const { tags } = Astro.props
+import client from "../../data/pocketbase"
+
+interface Props {
+    tagIds: string[]
+}
+
+const { tagIds } = Astro.props
+
+const tags = tagIds && tagIds.length > 0 
+    ? await Promise.all(tagIds.map(async (tagId: string) => {
+        try {
+            const tagData = await client.collection("tags").getOne(tagId)
+            return { name: tagData.name, id: tagId }
+        } catch (error) {
+            return null
+        }
+      }))
+    : []
 ---
 
 <div class="">
     {
-        (tags ?? []).map(tag => (
+        tags.map(tag => (
             <a 
-                href={`/tags/${tag.name}`}
+                href={`/tag/${tag.id}`}
                 class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 
             >
                 {tag.name}

src/components/Detail/ImageCarousel.astro

@@ -1,7 +1,17 @@
 ---
 import client from "@/data/pocketbase";
 const { class: className, recipe } = Astro.props
-const links = await client.getRecipeImages(recipe as string)
+
+async function getLink(img: string) {
+    const record = await client.collection("images").getOne(img)
+    const link = await client.files.getRelativeURL(record, record.image)
+    return link
+}
+
+// Use Promise.all to wait for all async operations to complete
+const links = await Promise.all(
+    recipe.images.map((img: string) => getLink(img))
+)
 
 ---
 

src/components/Detail/InfoView.astro

@@ -15,19 +15,8 @@ function formatTime(seconds) {
     return result;
 }
 
-function formatTimeMin(minutes) {
-    if (minutes === 0) return null
-    const h = Math.floor(minutes / 60);
-    const m = minutes % 60;
-    let result = "";
-    if (h > 0) result += `${h}h`;
-    if (m > 0) result += `${m}m`;
-    if (result === "") result = "0m";
-    return result;
-}
-
-const workTime = formatTimeMin(re.worktime)
-const waitTime = formatTimeMin(re.waittime)
+const workTime = formatTime(re.worktime)
+const waitTime = formatTime(re.waittime)
 ---
 
 <p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
@@ -37,4 +26,4 @@ const waitTime = formatTimeMin(re.waittime)
     {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 tags={re.expand.tags}/>
+<TagRow tagIds={re.tags}/>

src/components/Detail/IngredientTableView.astro

@@ -19,7 +19,7 @@ const tableView = true
 )}
 
 {tableView && (
-    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
+    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
         <thead>
             <tr>
                 <th class="px-4 py-2">Quantity</th>
@@ -29,9 +29,9 @@ const tableView = true
         </thead>
         <tbody>
             {
-            ingredients.map((ing, index) => (
+            ingredients.map(ing => (
                 <>
-                    <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
+                    <tr class="border-t border-gray-600">
                         <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>
@@ -42,27 +42,3 @@ const tableView = true
         </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

@@ -3,11 +3,14 @@ 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}>
-    {ingredients.map(i => (
-        <div class="text-sm">
+    {ings.map(i => (
+        <div>
             <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
         </div>
     ))}

src/components/Detail/StepView.astro

@@ -3,10 +3,10 @@ import { record } from "astro:schema"
 import client from "@/data/pocketbase"
 import StepIngredientSideView from "./StepIngredientSideView.astro"
 
-const { steps, class: className } = Astro.props
+const { steps } = Astro.props
 ---
 
-<div class={className}>
+<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">
@@ -15,8 +15,8 @@ const { steps, class: className } = Astro.props
             <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.expand.ingredients} />
+                    <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>

src/components/Header.astro

@@ -7,9 +7,8 @@
     </a>
 
     <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" href="/recipe/import">add</a>
-        <!-- <a class="hover:underline underline-offset-4" href="/tags">tags</a> -->
-        <a class="hover:underline underline-offset-4" >search</a>
+        <a>new</a>
+        <a>tags</a>
+        <a>search</a>
     </div>
 </div>

src/data/pocketbase.ts

@@ -1,71 +1,12 @@
-import Pocketbase, { type RecordListOptions } from "pocketbase"
-import {
-    type Recipe,
-    type Ingredient,
-    type Step,
-    type Tag,
-    Collection
-} from './schema'
+import Pocketbase from "pocketbase"
 
-class APIClient {
-    pb: Pocketbase
-
-    constructor() {
-        this.pb = new Pocketbase("http://localhost:4321")
-        this.pb.autoCancellation(false)
-    }
-
-    async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) {
-        return await this.pb.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
-    }
-
-    async getAllRecipes() {
-        return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' })
-    }
-
-    async getRecipe(id: string) {
-        return await this.pb.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' })
-    }
-
-    // IMAGE
-    async getImageURL(imgID: string, relative: boolean = true) {
-        const record = await this.pb.collection(Collection.IMAGES).getOne(imgID)
-        const res = this.pb.files.getURL(record, record.image)
-        return relative ? res.substring(21) : res
-    }
-
-    async getRecipeImages(recipeID: string) {
-        const re = await this.getRecipe(recipeID)
-        const imgIDs = re.images ?? []
-
-        const urls = Promise.all(
-            imgIDs.map(img => this.getImageURL(img))
-        )
-        return urls
-    }
-
-    async getAllTags() {
-        return await this.pb.collection<Tag>(Collection.TAGS).getFullList()
-    }
-
-    async getTag(name: string) {
-        return await this.pb.collection<Tag>(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` })
-    }
-
-    async getRecipesOfTag(tagName: string) {
-        // get the tag id first
-        const tagResult = await this.getTag(tagName)
-        if (tagResult.items.length === 0) {
-            return []
-        }
-        const tag = tagResult.items[0]
-
-        return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({ 
-            filter: `tags ~ '${tag.id}'`,
-            expand: 'ingredients,tags,steps,images,steps.ingredients' 
-        })
-    }
+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)
 }
-const client = new APIClient()
+
 export default client;

src/data/schema.ts

@@ -1,55 +0,0 @@
-// Base PB type
-export interface BaseRecord {
-    id: string,
-    created: string,
-    updated: string
-}
-
-export interface Ingredient extends BaseRecord {
-    quantity: string,
-    unit: string,
-    name: string
-}
-
-export interface Step extends BaseRecord {
-    index: number,
-    instruction: string,
-    ingredients?: Ingredient[]
-}
-
-export interface Tag extends BaseRecord {
-    name: string
-}
-
-// not sure Image is the best type cos it might be quite heavy to get all the fields every time but
-// it is here in case it is (a good idea)
-export interface Image extends BaseRecord {
-    id: string
-    filename: string
-    url?: string
-}
-
-export interface Recipe extends BaseRecord {
-    name: string,
-    description?: string,
-    servings?: number,
-    images?: string[], // image IDs
-    ingredients: string[]
-    steps: string[],
-    tags?: string[]
-
-    expand: {
-        images?: Image[], // image IDs,
-        ingredients: Ingredient[]
-        steps: Step[],
-        tags?: Tag[]
-    }
-}
-
-export const Collection = {
-    RECIPES: 'recipes',
-    STEPS: 'steps',
-    INGREDIENTS: 'ingredients',
-    TAGS: 'tags',
-    IMAGES: 'images'
-}

src/layouts/base.astro

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

src/pages/404.astro

@@ -1,9 +0,0 @@
----
-import Base from "@/layouts/base";
----
-
-<Base>
-    <div class="flex items-center justify-center text-3xl font-bold">
-        🥧 404 🥧
-    </div>
-</Base>

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

@@ -5,15 +5,12 @@ import type { APIRoute } from "astro";
 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 + requestUrl.search, proxyUrl);
+
+  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, {
-    status: response.status,
-    statusText: response.statusText,
-    headers: response.headers
-  });
+  return new Response(response.body);
 };

src/pages/index.astro

@@ -3,15 +3,15 @@ import PageLayout from "@/layouts/base"
 import client from "@/data/pocketbase"
 import OverviewCard from "@/components/Card/OverviewCard"
 
-const recipes = await client.getAllRecipes()
+const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>	
 	<!-- <p class="pb-2">What would you like today?</p> -->
 
-	<div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
+	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
 		{
-			recipes.map(r => (
+			recipies.map(r => (
 				<OverviewCard recipe={r} />
 			))
 		}

src/pages/recipe/[recipeid].astro

@@ -1,6 +1,5 @@
 ---
 import client from "@/data/pocketbase";
-
 import SiteLayout from "@/layouts/base";
 import ImageCarousel from "@/components/Detail/ImageCarousel";
 import IngredientTableView from "@/components/Detail/IngredientTableView";
@@ -9,25 +8,43 @@ import InfoView from "@/components/Detail/InfoView";
 
 const { recipeid } = Astro.params;
 
-const re = await client.getRecipe(recipeid as string)
+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={recipeid} />
-            <p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
+    <div class="flex flex-col md:flex-row">
+        <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={re.expand.ingredients ?? []}  />
+            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
         </div>
         
-        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
+        <div class="flex w-full flex-col">
+            <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
+
             <!-- Steps -->
-            <StepView class="md:ml-3" steps={re.expand.steps ?? []} />
+            <StepView steps={steps} />
         </div>
 
     </div>

src/pages/recipe/new.astro

@@ -1,140 +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 sticky">
-
-            <div class="flex mb-2 items-center">
-                <p class="text-[28pt] mr-auto">New Recipe</p>
-                <button
-                    id="btn-save"
-                    class="px-1 w-15 h-9 bg-white/10 active:bg-white/20 transition-colors rounded-lg"
-                >
-                    Save
-                </button>
-            </div>
-
-            <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>
-
-            <!-- Details -->
-            <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'"
-            />
-            <textarea
-                id="rec-desc"
-                rows="3"
-                placeholder="Description"
-                class="text-sm italic leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden p-2"
-                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
-            />
-                <!-- if it works :3  -->
-
-            <!-- Smaller details -->
-            <div class="flex mt-2 h-9 space-x-2">
-                <input
-                    id="rec-servings"
-                    type="number"
-                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
-                    placeholder="Servings"
-                />
-                <input
-                    id="rec-worktime"
-                    type="text"
-                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
-                    placeholder="Work Time"
-                />
-                <input
-                    id="rec-waittime"
-                    type="text"
-                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
-                    placeholder="Wait Time"
-                />
-                <input
-                    id="rec-rating"
-                    type="number"
-                    class="bg-white/10 px-2 rounded-lg w-23 overflow-hidden"
-                    placeholder="Rating"
-                />
-            </div>
-
-
-            <div class="flex flex-row align-middle items-center">
-                <p class="mt-4 text-[22pt] font-bold">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:mt-16 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/pages/tags/[name].astro

@@ -1,22 +0,0 @@
----
-import SiteLayout from "@/layouts/base";
-import client from "@/data/pocketbase";
-import OverviewCard from "@/components/Card/OverviewCard";
-
-const { name } = Astro.params
-const recipes = await client.getRecipesOfTag(name) // todo redir to 404 if not found
----
-
-<SiteLayout>
-    <p class="text-xl pb-2">
-        {recipes.length} { recipes.length == 1 ? "Recipe" : "Recipes" } with: <code class="bg-white/10 p-1 text-sm rounded-lg" >{name}</code>
-    </p>
-
-    <div class="grid md:gap-2 gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
-		{
-			recipes.map(r => (
-				<OverviewCard recipe={r} />
-			))
-		}
-	</div>
-</SiteLayout>

src/pages/tags/index.astro

@@ -1,24 +0,0 @@
----
-import client from "@/data/pocketbase";
-import SiteLayout from "@/layouts/base";
-
-const tags = await client.getAllTags()
-
-const countsPerTag = await Promise.all(
-    tags.map(async t => (await client.getRecipesOfTag(t.name)).length)
-)
----
-
-<SiteLayout>
-    <p class="title pb-2">
-        {tags.length} Tags
-    </p>
-    {
-        (tags ?? []).map((t, i) => (
-            // <p>{t.name} -&gt; {countsPerTag[i]} {countsPerTag[i] == 1 ? "Recipe" : "Recipes" } </p>
-            <a class="hover:underline" href={`/tags/${t.name}`}>
-                {t.name} ({countsPerTag[i]})
-            </a><br/>
-        ))
-    }
-</SiteLayout>

src/script/newRecipe.ts

@@ -1,227 +0,0 @@
-import client from "@/data/pocketbase"
-
-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: {quantity: string, unit: string, name: string}[] = []
-let steps: {
-    index: number,
-    instruction: string,
-    ingredients: string[], // IDs of ingredient fields
-}[] = []
-
-const formFields = () => {
-    return {
-        name: (document.querySelector("#rec-name") as HTMLTextAreaElement).value ?? "",
-        description: (document.querySelector("#rec-desc") as HTMLTextAreaElement).value ?? "",
-        servings: (document.querySelector("#rec-servings") as HTMLInputElement).value ?? "",
-        worktime: (document.querySelector("#rec-worktime") as HTMLInputElement).value ?? "",
-        waittime: (document.querySelector("#rec-waittime") as HTMLInputElement).value ?? "",
-        rating: (document.querySelector("#rec-rating") as HTMLInputElement).value ?? "",
-        ings: ingredients,
-        stepList: steps
-    }
-}
-
-// - INIT
-document.addEventListener('DOMContentLoaded', function() {
-    
-    ingredientFields.push(
-        document.querySelector('#ing-qty')!,
-        document.querySelector('#ing-unit')!,
-        document.querySelector('#ing-name')!
-    )
-
-    stepInput.addEventListener('input', showAddStepButton)
-    document.querySelector('#btn-save')?.addEventListener('click', addRecipe)
-    
-    // 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
-async function addRecipe() {
-    const comps = formFields()
-    console.log(comps.ings)
-    
-    const ingredientIDs = await Promise.all(
-        comps.ings.map(async it => (await client.pb.collection('ingredients').create(it)).id) // get the id of the returned record
-    )
-
-    const stepIDs = await Promise.all(
-        comps.stepList.map(async it => (await client.pb.collection('steps').create(it)).id)
-    )
-
-    const recipe = await client.pb.collection('recipes').create({
-        name: comps.name,
-        description: comps.description,
-        servings: comps.servings,
-        worktime: comps.worktime,
-        waittime: comps.waittime,
-        rating: comps.rating,
-        ingredients: ingredientIDs,
-        steps: stepIDs
-    })
-
-    console.log(recipe)
-}
-
-function addIngredient() {
-    const ing = {
-        quantity: 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.quantity}</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

@@ -8,7 +8,3 @@ html {
     @apply font-sans;
     /* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
 }
-
-.title {
-    @apply text-2xl;
-}

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"]