[PIE-29 ] New recipe form submission (#15 )

Basic form submission of recipe. Not everything is handled yet: images, tags, and step-associated-ingredients are not handled, as they do not have an interface in the recipe form yet. Co-authored-by: June <self@breadone.net> Co-committed-by: June <self@breadone.net>
[PIE-30 ] Complete fields in /recipe/new (#14 )
2025-08-22 16:43:40 +12:00 · 2025-08-18 17:48:14 +12:00 · 2025-08-16 23:17:31 +12:00 · 2025-08-16 13:17:10 +12:00 · 2025-08-15 16:12:02 +12:00 · 2025-08-13 23:55:11 +12:00
61 changed files with 7391 additions and 3267 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
 PB_ADMIN_EMAIL=admin@example.com
 PB_ADMIN_PASSWORD=secret-password
-PUBLIC_PB_URL=http://pb:8080
+PUBLIC_URL=http://your.domain.tld/
 PB_DATA_DIR=/pb/pb_data
--- a/.gitignore
+++ b/.gitignore
@@ -5,10 +5,11 @@ node_modules
 .vercel
 .netlify
 .wrangler
-/.svelte-kit
+/.astro
+/dist
 /build
 /data
-
+/api/pb_data
 # OS
 .DS_Store
 Thumbs.db
--- a/.npmrc
+++ b/.npmrc
@@ -1 +0,0 @@
-engine-strict=true
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,9 +0,0 @@
-# Package Managers
-package-lock.json
-pnpm-lock.yaml
-yarn.lock
-bun.lock
-bun.lockb
-
-# Miscellaneous
-/static/
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,19 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": [
-		"prettier-plugin-svelte",
-		"prettier-plugin-tailwindcss"
-	],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	],
-	"tailwindStylesheet": "./src/app.css"
-}
--- a/6
+++ b/6
@@ -4,8 +4,10 @@ COPY package*.json ./
 RUN npm i
 COPY . .
 ENV PUBLIC_PB_URL=http://pb:8080
+ENV PUBLIC_URL=http://localhost:4321

 RUN npm run build

-EXPOSE 4173
-CMD ["npm", "run", "preview", "--", "--host"]
+EXPOSE 4321
+# CMD ["npm", "run", "dev", "--", "--host"]
+CMD [ "npm", "run", "preview", "--", "--host" ]
--- a/api/docker-entrypoint.sh
+++ b/api/docker-entrypoint.sh
@@ -12,6 +12,7 @@ set -e

 # if there are no users yet, create the superuser
 # we check the sqlite file for any existing record in the users table
+/pb/pocketbase superuser create "${PB_ADMIN_EMAIL}" "${PB_ADMIN_PASSWORD}"
 if [ ! -f "${PB_DATA_DIR}/pb_data.db" ] \
      ! sqlite3 "${PB_DATA_DIR}/data.db" \
       "SELECT id FROM _superusers WHERE email='${PB_ADMIN_EMAIL}' LIMIT 1;" \
--- a/api/pb_migrations/1754995770_created_images.js
+++ b/api/pb_migrations/1754995770_created_images.js
@@ -0,0 +1,71 @@
+/// <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"
+      },
+      {
+        "hidden": false,
+        "id": "file3309110367",
+        "maxSelect": 1,
+        "maxSize": 0,
+        "mimeTypes": [],
+        "name": "image",
+        "presentable": false,
+        "protected": false,
+        "required": false,
+        "system": false,
+        "thumbs": [],
+        "type": "file"
+      },
+      {
+        "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_3607937828",
+    "indexes": [],
+    "listRule": null,
+    "name": "images",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3607937828");
+
+  return app.delete(collection);
+})
--- a/api/pb_migrations/1754995772_created_recipes.js
+++ b/api/pb_migrations/1754995772_created_recipes.js
@@ -0,0 +1,122 @@
+/// <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"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1843675174",
+        "max": 0,
+        "min": 0,
+        "name": "description",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "number1239158968",
+        "max": null,
+        "min": null,
+        "name": "servings",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "number3632866850",
+        "max": null,
+        "min": null,
+        "name": "rating",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3607937828",
+        "hidden": false,
+        "id": "relation3760176746",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "images",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "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_842702175",
+    "indexes": [],
+    "listRule": null,
+    "name": "recipes",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175");
+
+  return app.delete(collection);
+})
--- a/api/pb_migrations/1754995890_updated_recipes.js
+++ b/api/pb_migrations/1754995890_updated_recipes.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": "",
+    "listRule": "",
+    "updateRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null,
+    "listRule": null,
+    "updateRule": null,
+    "viewRule": null
+  }, collection)
+
+  return app.save(collection)
+})
--- a/api/pb_migrations/1754995898_updated_images.js
+++ b/api/pb_migrations/1754995898_updated_images.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3607937828")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": "",
+    "listRule": "",
+    "updateRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3607937828")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null,
+    "listRule": null,
+    "updateRule": null,
+    "viewRule": null
+  }, collection)
+
+  return app.save(collection)
+})
--- a/api/pb_migrations/1754996268_updated_recipes.js
+++ b/api/pb_migrations/1754996268_updated_recipes.js
@@ -0,0 +1,40 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // update field
+  collection.fields.addAt(5, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3607937828",
+    "hidden": false,
+    "id": "relation3760176746",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "images",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // update field
+  collection.fields.addAt(5, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3607937828",
+    "hidden": false,
+    "id": "relation3760176746",
+    "maxSelect": 1,
+    "minSelect": 0,
+    "name": "images",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+})
--- a/api/pb_migrations/1754996900_created_tags.js
+++ b/api/pb_migrations/1754996900_created_tags.js
@@ -0,0 +1,71 @@
+/// <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": "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_1219621782",
+    "indexes": [],
+    "listRule": null,
+    "name": "tags",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1219621782");
+
+  return app.delete(collection);
+})
--- a/api/pb_migrations/1754996921_updated_recipes.js
+++ b/api/pb_migrations/1754996921_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(6, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_1219621782",
+    "hidden": false,
+    "id": "relation1874629670",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "tags",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // remove field
+  collection.fields.removeById("relation1874629670")
+
+  return app.save(collection)
+})
--- a/api/pb_migrations/1754997089_updated_tags.js
+++ b/api/pb_migrations/1754997089_updated_tags.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1219621782")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": "",
+    "listRule": "",
+    "updateRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1219621782")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null,
+    "listRule": null,
+    "updateRule": null,
+    "viewRule": null
+  }, collection)
+
+  return app.save(collection)
+})
--- a/api/pb_migrations/1755039357_updated_steps.js
+++ b/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)
+})
--- a/api/pb_migrations/1755041844_created_ingredients.js
+++ b/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);
+})
--- a/api/pb_migrations/1755041886_updated_recipes.js
+++ b/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)
+})
--- a/api/pb_migrations/1755042306_updated_ingredients.js
+++ b/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)
+})
--- a/api/pb_migrations/1755045585_updated_steps.js
+++ b/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)
+})
--- a/api/pb_migrations/1755056714_updated_recipes.js
+++ b/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)
+})
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -0,0 +1,24 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import node from '@astrojs/node';
+
+import tailwindcss from '@tailwindcss/vite';
+
+import { loadEnv } from "vite";
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+
+  adapter: node({
+      mode: 'standalone'
+  }),
+
+  vite: {
+    plugins: [tailwindcss()],
+    server: {
+      cors: false
+    }
+  }
+});
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,14 +3,14 @@ services:
    build: .
    env_file: .env
    ports:
-      - "4173:4173"
+      - "4321:4321"

  pb:
    build: api
    env_file: .env
    volumes:
-      - ./data/data:/pb/pb_data
-      - ./data/migrations:/pb/pb_migrations
-      - ./data/hooks:/pb/pb_hooks
+      - ./api/pb_data:/pb/pb_data
+      - ./api/pb_migrations:/pb/pb_migrations
+      - ./api/pb_hooks:/pb/pb_hooks
    ports:
      - "8080:8080"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,35 +1,18 @@
 {
-	"name": "recipie",
-	"private": true,
-	"version": "0.0.1",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/forms": "^0.5.9",
-		"@tailwindcss/typography": "^0.5.15",
-		"@tailwindcss/vite": "^4.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^7.0.4"
-	},
-	"dependencies": {
-		"pocketbase": "^0.26.2"
-	}
+  "name": "astro-pb",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "docker compose up pb -d; astro dev --host",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/node": "^9.4.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "astro": "^5.12.9",
+    "pocketbase": "^0.26.2",
+    "tailwindcss": "^4.1.11"
+  }
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +0,0 @@
-@import 'tailwindcss';
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,13 +0,0 @@
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
-}
-
-export {};
--- a/src/app.html
+++ b/src/app.html
@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -0,0 +1,9 @@
+---
+import "../styles/global.css"
+---
+
+<meta charset="utf-8" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<meta name="viewport" content="width=device-width" />
+<meta name="generator" content={Astro.generator} />
+<title>Astro</title>
--- a/src/components/Card/OverviewCard.astro
+++ b/src/components/Card/OverviewCard.astro
@@ -0,0 +1,30 @@
+---
+import client from "@/data/pocketbase"
+import TagRow from "./TagRow.astro"
+
+const { recipe } = Astro.props;
+
+const image = (await client.getRecipeImages(recipe.id))[0]
+---
+
+<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-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 tags={recipe.expand.tags}/>
+        </div>
+    </div>
+
+    <a id="link" href={`/recipe/${recipe.id}`} class="absolute inset-0 z-0">
+        <span class="block w-full h-full hover:bg-black/10 transition-colors">
+        </span>
+    </a>
+    
+</div>
--- a/src/components/Card/TagRow.astro
+++ b/src/components/Card/TagRow.astro
@@ -0,0 +1,16 @@
+---
+const { tags } = Astro.props
+---
+
+<div class="">
+    {
+        (tags ?? []).map(tag => (
+            <a 
+                href={`/tags/${tag.name}`}
+                class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 
+            >
+                {tag.name}
+            </a>
+        ))
+    }
+</div>
--- a/src/components/Detail/ImageCarousel.astro
+++ b/src/components/Detail/ImageCarousel.astro
@@ -0,0 +1,48 @@
+---
+import client from "@/data/pocketbase";
+const { class: className, recipe } = Astro.props
+const links = await client.getRecipeImages(recipe as string)
+
+---
+
+<script>
+    let pos = 0;
+    const dataElement = document.getElementById('carousel-data');
+    const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
+    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];
+    }
+    
+    function dec() { 
+        pos = pos === 0 ? cap : pos - 1;
+        if (img) img.src = links[pos];
+    }
+    
+    // make functions globally accessible
+    (window as any).inc = inc;
+    (window as any).dec = dec;
+</script>
+
+<div class={className}>
+    <!-- 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">
+        <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>
--- a/src/components/Detail/InfoView.astro
+++ b/src/components/Detail/InfoView.astro
@@ -0,0 +1,40 @@
+---
+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;
+}
+
+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)
+---
+
+<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 tags={re.expand.tags}/>
--- a/src/components/Detail/IngredientTableView.astro
+++ b/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>
--- a/src/components/Detail/StepIngredientSideView.astro
+++ b/src/components/Detail/StepIngredientSideView.astro
@@ -0,0 +1,14 @@
+---
+import client from "@/data/pocketbase";
+
+const { ingredients, class: className } = Astro.props;
+
+---
+
+<div class={className}>
+    {ingredients.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
@@ -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.expand.ingredients} />
+                    </div>
+                )}
+            </div>
+        </div>
+    )) }
+</div>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -0,0 +1,15 @@
+
+<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="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>
+    </div>
+</div>
--- a/src/data/pocketbase.ts
+++ b/src/data/pocketbase.ts
@@ -0,0 +1,71 @@
+import Pocketbase, { type RecordListOptions } from "pocketbase"
+import {
+    type Recipe,
+    type Ingredient,
+    type Step,
+    type Tag,
+    Collection
+} from './schema'
+
+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 APIClient()
+export default client;
--- a/src/data/schema.ts
+++ b/src/data/schema.ts
@@ -0,0 +1,55 @@
+// 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'
+}
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -0,0 +1,18 @@
+---
+import BaseHead from "../components/BaseHead.astro";
+import Header from "@/components/Header";
+---
+
+<html lang=en>
+	<head>
+		<BaseHead title="Recipie" />
+	</head>
+	<body>
+		<main id="main" class="flex-1">
+			<Header/>
+			<div class="px-3 mb-5 md:px-5 pt-2">
+				<slot />
+			</div>
+		</main>
+	</body>
+</html>
--- a/src/lib/assets/favicon.svg
+++ b/src/lib/assets/favicon.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
--- a/src/lib/pocketbase/index.ts
+++ b/src/lib/pocketbase/index.ts
@@ -1,284 +0,0 @@
-// Adapted from https://github.com/spinspire/pocketbase-sveltekit-starter
-
-import PocketBase, { type AuthProviderInfo, RecordService } from "pocketbase";
-import type {
-  AuthModel,
-  ListResult,
-  RecordListOptions,
-  RecordModel,
-  UnsubscribeFunc,
-} from "pocketbase";
-import { readable, type Readable, type Subscriber } from "svelte/store";
-import { browser } from "$app/environment";
-import { PUBLIC_PB_URL } from "$env/static/public";
-import { base } from "$app/paths";
-import { invalidateAll } from "$app/navigation";
-import type { TypedPocketBase } from "./pocketbase-types"; // npx pocketbase-typegen --url http://localhost:8080 --email admin@example.com --password 'secret-password'
-// import {
-//   startAuthentication,
-//   startRegistration,
-// } from "@simplewebauthn/browser";
-// import { alerts } from "$lib/components/Alerts.svelte";
-
-export const client = new PocketBase(PUBLIC_PB_URL) as TypedPocketBase;
-
-export const authModel = readable<AuthModel | null>(
-  null,
-  function (set, update) {
-    client.authStore.onChange((token, model) => {
-      update((oldval) => {
-        if (
-          (oldval?.isValid && !model?.isValid) ||
-          (!oldval?.isValid && model?.isValid)
-        ) {
-          // if the auth changed, invalidate all page load data
-          invalidateAll();
-        }
-        return model;
-      });
-    }, true);
-  }
-);
-
-export async function login(
-  email: string,
-  password: string,
-  register = false,
-  rest: { [key: string]: any } = {}
-) {
-  if (register) {
-    const user = { ...rest, email, password, confirmPassword: password };
-    await client.collection("users").create({ ...user, metadata: {} });
-  }
-  await client.collection("users").authWithPassword(email, password);
-}
-
-// export async function webauthnRegister(
-//   usernameOrEmail: string
-// ): Promise<void | Error> {
-//   try {
-//     const resp = await fetch(
-//       `/api/webauthn/registration-options?usernameOrEmail=${usernameOrEmail}`
-//     );
-//     if (!resp.ok) {
-//       const text = await resp.text();
-//       throw new Error(text);
-//     }
-//     const { publicKey: optionsJSON } = await resp.json();
-//     let attResp = await startRegistration({ optionsJSON });
-//     const res = await fetch(`/api/webauthn/register`, {
-//       method: "POST",
-//       headers: {
-//         "Content-Type": "application/json",
-//       },
-//       body: JSON.stringify({ ...attResp, usernameOrEmail }),
-//     });
-//     if (!res.ok) throw new Error("Failed to register");
-//     alerts.success("Passkey registered successfully.");
-//   } catch (e) {
-//     if (e instanceof Error) {
-//       if (e.name === "NotAllowedError") {
-//         alerts.error("Registration denied or timed out.");
-//       }
-//       console.error(e);
-//     }
-//   }
-// }
-
-// export async function webauthnLogin(usernameOrEmail: string) {
-//   try {
-//     const resp = await fetch(
-//       `/api/webauthn/login-options?usernameOrEmail=${usernameOrEmail}`
-//     );
-//     if (!resp.ok) {
-//       const text = await resp.text();
-//       throw new Error(text);
-//     }
-//     const { publicKey: optionsJSON } = await resp.json();
-//     let asseResp = await startAuthentication({ optionsJSON });
-//     const res = await fetch(`/api/webauthn/login`, {
-//       method: "POST",
-//       headers: {
-//         "Content-Type": "application/json",
-//       },
-//       body: JSON.stringify({ ...asseResp, usernameOrEmail }),
-//     });
-//     const authResponse = await res.json();
-//     if (!res.ok) throw new Error("Failed to login");
-//     client.authStore.save(authResponse.token, authResponse.record);
-//   } catch (e) {
-//     if (e instanceof Error) {
-//       if (e.name === "NotAllowedError") {
-//         alerts.error("Registration denied or timed out.");
-//       } else {
-//         alerts.error(e.message);
-//       }
-//       console.error(e);
-//     }
-//   }
-// }
-
-export function logout() {
-  client.authStore.clear();
-}
-
-/*
- * Save (create/update) a record (a plain object). Automatically converts to
- * FormData if needed.
- */
-export async function save<T>(collection: string, record: any, create = false) {
-  // convert obj to FormData in case one of the fields is instanceof FileList
-  const data = object2formdata(record);
-  if (record.id && !create) {
-    // "create" flag overrides update
-    return await client.collection(collection).update<T>(record.id, data);
-  } else {
-    return await client.collection(collection).create<T>(data);
-  }
-}
-
-// convert obj to FormData in case one of the fields is instanceof FileList
-function object2formdata(obj: {}) {
-  // check if any field's value is an instanceof FileList
-  if (
-    !Object.values(obj).some(
-      (val) => val instanceof FileList || val instanceof File
-    )
-  ) {
-    // if not, just return the original object
-    return obj;
-  }
-  // otherwise, build FormData (multipart/form-data) from obj
-  const fd = new FormData();
-  for (const [key, val] of Object.entries(obj)) {
-    if (val instanceof FileList) {
-      for (const file of val) {
-        fd.append(key, file);
-      }
-    } else if (val instanceof File) {
-      // handle File before "object" so that it doesn't get serialized as JSON
-      fd.append(key, val);
-    } else if (Array.isArray(val)) {
-      // for some reason, multipart/form-data wants arrays to be comma-separated strings
-      fd.append(key, val.join(","));
-    } else if (typeof val === "object") {
-      fd.append(key, JSON.stringify(val));
-    } else {
-      fd.append(key, val as any);
-    }
-  }
-  return fd;
-}
-
-export interface PageStore<T = any> extends Readable<ListResult<T>> {
-  setPage(newpage: number): Promise<void>;
-  next(): Promise<void>;
-  prev(): Promise<void>;
-}
-
-export async function watch<T extends RecordModel>(
-  idOrName: string,
-  queryParams = {} as RecordListOptions,
-  page = 1,
-  perPage = 20,
-  realtime = browser
-): Promise<PageStore<T>> {
-  const collection = client.collection(idOrName);
-  let result = await collection.getList<T>(page, perPage, queryParams);
-  let set: Subscriber<ListResult<T>>;
-  let unsubRealtime: UnsubscribeFunc | undefined;
-  // fetch first page
-  const store = readable<ListResult<T>>(result, (_set) => {
-    set = _set;
-    // watch for changes (only if you're in the browser)
-    if (realtime)
-      collection
-        .subscribe<T>(
-          "*",
-          ({ action, record }) => {
-            (async function (action: string) {
-              // see https://github.com/pocketbase/pocketbase/discussions/505
-              switch (action) {
-                // ISSUE: no subscribe event when a record is modified and no longer fits the "filter"
-                // @see https://github.com/pocketbase/pocketbase/issues/4717
-                case "update":
-                case "create":
-                  // record = await expand(queryParams.expand, record);
-                  const index = result.items.findIndex(
-                    (r) => r.id === record.id
-                  );
-                  // replace existing if found, otherwise append
-                  if (index >= 0) {
-                    result.items[index] = record;
-                    return result.items;
-                  } else {
-                    return [...result.items, record];
-                  }
-                case "delete":
-                  return result.items.filter((item) => item.id !== record.id);
-              }
-              return result.items;
-            })(action).then((items) => set((result = { ...result, items })));
-          },
-          queryParams
-        )
-        // remember for later
-        .then((unsub) => (unsubRealtime = unsub));
-  });
-  async function setPage(newpage: number) {
-    const { page, totalPages, perPage } = result;
-    if (page > 0 && page <= totalPages) {
-      set((result = await collection.getList(newpage, perPage, queryParams)));
-    }
-  }
-  return {
-    ...store,
-    subscribe(run, invalidate) {
-      const unsubStore = store.subscribe(run, invalidate);
-      return async () => {
-        unsubStore();
-        // ISSUE: Technically, we should AWAIT here, but that will slow down navigation UX.
-        if (unsubRealtime) /* await */ unsubRealtime();
-      };
-    },
-    setPage,
-    async next() {
-      setPage(result.page + 1);
-    },
-    async prev() {
-      setPage(result.page - 1);
-    },
-  };
-}
-
-// export async function providerLogin(
-//   provider: AuthProviderInfo,
-//   authCollection: RecordService
-// ) {
-//   const authResponse = await authCollection.authWithOAuth2({
-//     provider: provider.name,
-//     createData: {
-//       // emailVisibility: true,
-//     },
-//   });
-//   // update user "record" if "meta" has info it doesn't have
-//   const { meta, record } = authResponse;
-//   let changes = {} as { [key: string]: any };
-//   if (!record.name && meta?.name) {
-//     changes.name = meta.name;
-//   }
-//   if (!record.avatar && meta?.avatarUrl) {
-//     const response = await fetch(meta.avatarUrl);
-//     if (response.ok) {
-//       const type = response.headers.get("content-type") ?? "image/jpeg";
-//       changes.avatar = new File([await response.blob()], "avatar", { type });
-//     }
-//   }
-//   if (Object.keys(changes).length) {
-//     authResponse.record = await save(authCollection.collectionIdOrName, {
-//       ...record,
-//       ...changes,
-//     });
-//   }
-//   return authResponse;
-// }
--- a/src/lib/pocketbase/pocketbase-types.ts
+++ b/src/lib/pocketbase/pocketbase-types.ts
@@ -1,158 +0,0 @@
-/**
-* This file was @generated using pocketbase-typegen
-*/
-
-import type PocketBase from 'pocketbase'
-import type { RecordService } from 'pocketbase'
-
-export enum Collections {
-	Authorigins = "_authOrigins",
-	Externalauths = "_externalAuths",
-	Mfas = "_mfas",
-	Otps = "_otps",
-	Superusers = "_superusers",
-	Recipes = "recipes",
-	Users = "users",
-}
-
-// Alias types for improved usability
-export type IsoDateString = string
-export type RecordIdString = string
-export type HTMLString = string
-
-type ExpandType<T> = unknown extends T
-	? T extends unknown
-		? { expand?: unknown }
-		: { expand: T }
-	: { expand: T }
-
-// System fields
-export type BaseSystemFields<T = unknown> = {
-	id: RecordIdString
-	collectionId: string
-	collectionName: Collections
-} & ExpandType<T>
-
-export type AuthSystemFields<T = unknown> = {
-	email: string
-	emailVisibility: boolean
-	username: string
-	verified: boolean
-} & BaseSystemFields<T>
-
-// Record types for each collection
-
-export type AuthoriginsRecord = {
-	collectionRef: string
-	created?: IsoDateString
-	fingerprint: string
-	id: string
-	recordRef: string
-	updated?: IsoDateString
-}
-
-export type ExternalauthsRecord = {
-	collectionRef: string
-	created?: IsoDateString
-	id: string
-	provider: string
-	providerId: string
-	recordRef: string
-	updated?: IsoDateString
-}
-
-export type MfasRecord = {
-	collectionRef: string
-	created?: IsoDateString
-	id: string
-	method: string
-	recordRef: string
-	updated?: IsoDateString
-}
-
-export type OtpsRecord = {
-	collectionRef: string
-	created?: IsoDateString
-	id: string
-	password: string
-	recordRef: string
-	sentTo?: string
-	updated?: IsoDateString
-}
-
-export type SuperusersRecord = {
-	created?: IsoDateString
-	email: string
-	emailVisibility?: boolean
-	id: string
-	password: string
-	tokenKey: string
-	updated?: IsoDateString
-	verified?: boolean
-}
-
-export type RecipesRecord = {
-	created?: IsoDateString
-	desc?: string
-	id: string
-	name?: string
-	servings?: number
-	updated?: IsoDateString
-}
-
-export type UsersRecord = {
-	avatar?: string
-	created?: IsoDateString
-	email: string
-	emailVisibility?: boolean
-	id: string
-	name?: string
-	password: string
-	tokenKey: string
-	updated?: IsoDateString
-	verified?: boolean
-}
-
-// Response types include system fields and match responses from the PocketBase API
-export type AuthoriginsResponse<Texpand = unknown> = Required<AuthoriginsRecord> & BaseSystemFields<Texpand>
-export type ExternalauthsResponse<Texpand = unknown> = Required<ExternalauthsRecord> & BaseSystemFields<Texpand>
-export type MfasResponse<Texpand = unknown> = Required<MfasRecord> & BaseSystemFields<Texpand>
-export type OtpsResponse<Texpand = unknown> = Required<OtpsRecord> & BaseSystemFields<Texpand>
-export type SuperusersResponse<Texpand = unknown> = Required<SuperusersRecord> & AuthSystemFields<Texpand>
-export type RecipesResponse<Texpand = unknown> = Required<RecipesRecord> & BaseSystemFields<Texpand>
-export type UsersResponse<Texpand = unknown> = Required<UsersRecord> & AuthSystemFields<Texpand>
-
-// Types containing all Records and Responses, useful for creating typing helper functions
-
-export type CollectionRecords = {
-	_authOrigins: AuthoriginsRecord
-	_externalAuths: ExternalauthsRecord
-	_mfas: MfasRecord
-	_otps: OtpsRecord
-	_superusers: SuperusersRecord
-	recipes: RecipesRecord
-	users: UsersRecord
-}
-
-export type CollectionResponses = {
-	_authOrigins: AuthoriginsResponse
-	_externalAuths: ExternalauthsResponse
-	_mfas: MfasResponse
-	_otps: OtpsResponse
-	_superusers: SuperusersResponse
-	recipes: RecipesResponse
-	users: UsersResponse
-}
-
-// Type for usage with type asserted PocketBase instance
-// https://github.com/pocketbase/js-sdk#specify-typescript-definitions
-
-export type TypedPocketBase = PocketBase & {
-	collection(idOrName: '_authOrigins'): RecordService<AuthoriginsResponse>
-	collection(idOrName: '_externalAuths'): RecordService<ExternalauthsResponse>
-	collection(idOrName: '_mfas'): RecordService<MfasResponse>
-	collection(idOrName: '_otps'): RecordService<OtpsResponse>
-	collection(idOrName: '_superusers'): RecordService<SuperusersResponse>
-	collection(idOrName: 'recipes'): RecordService<RecipesResponse>
-	collection(idOrName: 'users'): RecordService<UsersResponse>
-}
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -0,0 +1,9 @@
+---
+import Base from "@/layouts/base";
+---
+
+<Base>
+    <div class="flex items-center justify-center text-3xl font-bold">
+        🥧 404 🥧
+    </div>
+</Base>
--- a/src/pages/api/[...proxy].ts
+++ b/src/pages/api/[...proxy].ts
@@ -0,0 +1,19 @@
+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 + requestUrl.search, 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
+  });
+};
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,20 @@
+---
+import PageLayout from "@/layouts/base"
+import client from "@/data/pocketbase"
+import OverviewCard from "@/components/Card/OverviewCard"
+
+const recipes = await client.getAllRecipes()
+---
+
+<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">
+		{
+			recipes.map(r => (
+				<OverviewCard recipe={r} />
+			))
+		}
+	</div>
+
+</PageLayout>
--- a/src/pages/recipe/[recipeid].astro
+++ b/src/pages/recipe/[recipeid].astro
@@ -0,0 +1,34 @@
+---
+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.getRecipe(recipeid as string)
+---
+
+<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>
+
+            <!-- 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 ?? []}  />
+        </div>
+        
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
+            <!-- Steps -->
+            <StepView class="md:ml-3" steps={re.expand.steps ?? []} />
+        </div>
+
+    </div>
+</SiteLayout>
--- a/src/pages/recipe/new.astro
+++ b/src/pages/recipe/new.astro
@@ -0,0 +1,140 @@
+---
+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>
--- a/src/pages/tags/[name].astro
+++ b/src/pages/tags/[name].astro
@@ -0,0 +1,22 @@
+---
+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>
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
@@ -0,0 +1,24 @@
+---
+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>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import '../app.css';
-	import favicon from '$lib/assets/favicon.svg';
-	
-	let { children } = $props();
-</script>
-
-<svelte:head>
-	<link rel="icon" href={favicon} />
-</svelte:head>
-
-{@render children?.()}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { client } from "$lib/pocketbase";
-    const { data } = $props()
-    const recipes = $derived(data.recipes)
-
-</script>
-
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
-
-
-{#each $recipes.items as item}
-    {item.name} <br>
-    {item.desc}
-
-{/each}
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,18 +0,0 @@
-import { client, watch } from "$lib/pocketbase";
-import type { RecipesResponse } from "$lib/pocketbase/pocketbase-types";
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = async ({ parent, fetch }) => {
-//   const filter = client.filter("user != ''", {});
-  const expand = "user";
-  const queryParams = {
-    // filter,
-    expand,
-    fetch,
-  };
-  const recipes = await watch<RecipesResponse<any>>("recipes", queryParams);
-
-  return {
-    recipes,
-  };
-};
--- a/src/script/newRecipe.ts
+++ b/src/script/newRecipe.ts
@@ -0,0 +1,227 @@
+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()
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,14 @@
+@import "tailwindcss";
+
+html {
+    @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; */
+}
+
+.title {
+    @apply text-2xl;
+}
--- a/static/robots.txt
+++ b/static/robots.txt
@@ -1,3 +0,0 @@
-# allow crawling everything by default
-User-agent: *
-Disallow:
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,12 +0,0 @@
-import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://svelte.dev/docs/kit/integrations
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-	kit: { adapter: adapter() }
-};
-
-export default config;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,19 +1,16 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler"
-	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "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"]
+		}
+  }
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +0,0 @@
-import tailwindcss from '@tailwindcss/vite';
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
-});
Author	SHA1	Message	Date
June	e9965c38ff	[PIE-29 ] New recipe form submission (#15 ) Basic form submission of recipe. Not everything is handled yet: images, tags, and step-associated-ingredients are not handled, as they do not have an interface in the recipe form yet. Co-authored-by: June <self@breadone.net> Co-committed-by: June <self@breadone.net>	2025-08-22 16:43:40 +12:00
june	b1d95ea785	[PIE-30 ] Complete fields in /recipe/new (#14 ) Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-18 17:48:14 +12:00
june	bf5d2f24c2	[PIE-16 ] Basic tag page implementation (#13 ) Adds `/tags/[name]` and associated API routes and such. `/tags/` has an extremely barebones layout atm so it's not publicly visible Reviewed-on: #13 Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-16 23:17:31 +12:00
june	6145f14df0	[PIE-28 ] Switch to type-safe API (#12) Custom API client to handle a lot of the more type safe queries Reviewed-on: #12 Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-16 13:17:10 +12:00
june	0b1334d508	[PIE-13 ] New recipe page (!11 ) Add `/recipe/new` path with form to add new recipe Mostly designed but not fully: steps and ingredients are inputtable with final styling but it cannot be submitted yet, and other crucial components like description, rating, etc are not yet implemented. Many design changes too cos i couldnt help myself More additions will certainly be required but this PR is huge so I will split it out into more Reviewed-on: #11 Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-15 16:12:02 +12:00
june	26cab10c14	[PIE-22 ] Add checklist for ingredients (!10 ) 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>	2025-08-13 23:55:11 +12:00
june	db6df2053a	[PIE-11 ] Add option to change from table to list view (!9 ) Option interface not implemented, will be in a future settings page. But anyway idk i like the table view more Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-13 19:46:34 +12:00
june	c12a4ab1aa	[PIE-17 ] Design refinements and improvements (!8 ) Add ingredients to each step in detailview, add tags, and some refactoring and smaller improvements Reviewed-on: #8 Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-13 19:24:09 +12:00
june	3c0e9dc0dd	[PIE-14 ] More robust API proxy (!7 ) Finally! Using an Astro API Route to handle all the queries which works like a dream. Also created a custom function to get the relative path for image files, fixing any external access issues. Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-13 17:54:45 +12:00
june	b8de3e82e9	[PIE-8 ] Add recipe detail view And Other Major Changes (!6 ) - Adds /recipe/:id page - (Almost!) fully designed and functional recipe view - Has steps, images, ingredients, peripheral info (work/wait time, rating, description, servings) - New colour scheme! Much more monotone but in a nice way (imo) - New font, not condensed - Several more smaller design changes Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-13 16:54:05 +12:00
june	c1910a71c6	[PIE-6 ] Add first (non-final) (temporary-ish) stylings (#5) this was a doozy. Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-12 23:39:33 +12:00
june	5c099f5b49	[PIE-5 ] Switch to AstroJS (!4 ) Co-authored-by: june <self@breadone.net> Co-committed-by: june <self@breadone.net>	2025-08-12 16:22:40 +12:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
				`@@ -1 +0,0 @@`
				// place files you want to import through the `$lib` alias in this folder.