[PIE-1 ] add api docker files

[PIE-1 ] Add docker files
[PIE-1 ] Add initial svelte project
2025-08-11 20:13:00 +12:00 · 2025-08-11 18:16:59 +12:00 · 2025-08-11 18:01:36 +12:00
55 changed files with 2796 additions and 7174 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,4 +0,0 @@
-PB_ADMIN_EMAIL=admin@example.com
-PB_ADMIN_PASSWORD=secret-password
-PUBLIC_URL=http://your.domain.tld/
-PB_DATA_DIR=/pb/pb_data
--- a/.gitignore
+++ b/.gitignore
@@ -5,11 +5,9 @@ node_modules
 .vercel
 .netlify
 .wrangler
-/.astro
-/dist
+/.svelte-kit
 /build
-/data
-/api/pb_data
+
 # OS
 .DS_Store
 Thumbs.db
@@ -19,7 +17,6 @@ Thumbs.db
 .env.*
 !.env.example
 !.env.test
-Makefile

 # Vite
 vite.config.js.timestamp-*
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,19 @@
+{
+	"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/8
+++ b/8
@@ -3,11 +3,7 @@ WORKDIR /app
 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 4321
-# CMD ["npm", "run", "dev", "--", "--host"]
-CMD [ "npm", "run", "preview", "--", "--host" ]
+EXPOSE 4173
+CMD ["npm", "run", "preview", "--", "--host"]
--- a/api/Dockerfile
+++ b/api/Dockerfile
@@ -1,6 +1,7 @@
 FROM alpine:latest

 ARG PB_VERSION=0.29.2
+ENV PB_DATA_DIR=/pb_data

 WORKDIR /pb

@@ -18,8 +19,6 @@ RUN unzip /tmp/pb.zip -d /pb/
 COPY docker-entrypoint.sh /usr/local/bin/
 RUN chmod +x /usr/local/bin/docker-entrypoint.sh

-VOLUME [ "/pb/pb_data", "/pb/pb_migrations", "/pb/pb_hooks" ]
-
 EXPOSE 8080

 ENTRYPOINT ["docker-entrypoint.sh"]
--- a/api/docker-entrypoint.sh
+++ b/api/docker-entrypoint.sh
@@ -7,15 +7,14 @@ set -e
 : "${PB_DATA_DIR:?need PB_DATA_DIR}"

 # ensure data dir exists (for embedded SQLite + migrations + files)
-# mkdir -p "${PB_DATA_DIR}"
-# export POCKETBASE_DATA_DIR="${PB_DATA_DIR}"
+mkdir -p "${PB_DATA_DIR}"
+export POCKETBASE_DATA_DIR="${PB_DATA_DIR}"

 # 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;" \
+if [ ! -f "${PB_DATA_DIR}/pb_data.db" ] || ! \
+     sqlite3 "${PB_DATA_DIR}/pb_data.db" \
+       "SELECT id FROM users WHERE email='${PB_ADMIN_EMAIL}' LIMIT 1;" \
       | grep -q .; then

  echo ">>> Creating PocketBase superuser: ${PB_ADMIN_EMAIL}"
--- a/api/pb_migrations/1754995770_created_images.js
+++ b/api/pb_migrations/1754995770_created_images.js
@@ -1,71 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = new Collection({
-    "createRule": null,
-    "deleteRule": null,
-    "fields": [
-      {
-        "autogeneratePattern": "[a-z0-9]{15}",
-        "hidden": false,
-        "id": "text3208210256",
-        "max": 15,
-        "min": 15,
-        "name": "id",
-        "pattern": "^[a-z0-9]+$",
-        "presentable": false,
-        "primaryKey": true,
-        "required": true,
-        "system": true,
-        "type": "text"
-      },
-      {
-        "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
@@ -1,122 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = new Collection({
-    "createRule": null,
-    "deleteRule": null,
-    "fields": [
-      {
-        "autogeneratePattern": "[a-z0-9]{15}",
-        "hidden": false,
-        "id": "text3208210256",
-        "max": 15,
-        "min": 15,
-        "name": "id",
-        "pattern": "^[a-z0-9]+$",
-        "presentable": false,
-        "primaryKey": true,
-        "required": true,
-        "system": true,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text1579384326",
-        "max": 0,
-        "min": 0,
-        "name": "name",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "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
@@ -1,28 +0,0 @@
-/// <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
@@ -1,28 +0,0 @@
-/// <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
@@ -1,40 +0,0 @@
-/// <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
@@ -1,71 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = new Collection({
-    "createRule": null,
-    "deleteRule": null,
-    "fields": [
-      {
-        "autogeneratePattern": "[a-z0-9]{15}",
-        "hidden": false,
-        "id": "text3208210256",
-        "max": 15,
-        "min": 15,
-        "name": "id",
-        "pattern": "^[a-z0-9]+$",
-        "presentable": false,
-        "primaryKey": true,
-        "required": true,
-        "system": true,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text1579384326",
-        "max": 0,
-        "min": 0,
-        "name": "name",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "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
@@ -1,28 +0,0 @@
-/// <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
@@ -1,28 +0,0 @@
-/// <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
@@ -1,28 +0,0 @@
-/// <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
@@ -1,97 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = new Collection({
-    "createRule": null,
-    "deleteRule": null,
-    "fields": [
-      {
-        "autogeneratePattern": "[a-z0-9]{15}",
-        "hidden": false,
-        "id": "text3208210256",
-        "max": 15,
-        "min": 15,
-        "name": "id",
-        "pattern": "^[a-z0-9]+$",
-        "presentable": false,
-        "primaryKey": true,
-        "required": true,
-        "system": true,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text1579384326",
-        "max": 0,
-        "min": 0,
-        "name": "name",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "number2683508278",
-        "max": null,
-        "min": null,
-        "name": "quantity",
-        "onlyInt": false,
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "number"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text3703245907",
-        "max": 0,
-        "min": 0,
-        "name": "unit",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "autodate2990389176",
-        "name": "created",
-        "onCreate": true,
-        "onUpdate": false,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      },
-      {
-        "hidden": false,
-        "id": "autodate3332085495",
-        "name": "updated",
-        "onCreate": true,
-        "onUpdate": true,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      }
-    ],
-    "id": "pbc_3146854971",
-    "indexes": [],
-    "listRule": null,
-    "name": "ingredients",
-    "system": false,
-    "type": "base",
-    "updateRule": null,
-    "viewRule": null
-  });
-
-  return app.save(collection);
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3146854971");
-
-  return app.delete(collection);
-})
--- a/api/pb_migrations/1755041886_updated_recipes.js
+++ b/api/pb_migrations/1755041886_updated_recipes.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // add field
-  collection.fields.addAt(8, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_3146854971",
-    "hidden": false,
-    "id": "relation1264587087",
-    "maxSelect": 999,
-    "minSelect": 0,
-    "name": "ingredients",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // remove field
-  collection.fields.removeById("relation1264587087")
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1755042306_updated_ingredients.js
+++ b/api/pb_migrations/1755042306_updated_ingredients.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3146854971")
-
-  // update collection data
-  unmarshal({
-    "createRule": "",
-    "deleteRule": "",
-    "listRule": "",
-    "updateRule": "",
-    "viewRule": ""
-  }, collection)
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3146854971")
-
-  // update collection data
-  unmarshal({
-    "createRule": null,
-    "deleteRule": null,
-    "listRule": null,
-    "updateRule": null,
-    "viewRule": null
-  }, collection)
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1755045585_updated_steps.js
+++ b/api/pb_migrations/1755045585_updated_steps.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4284789913")
-
-  // add field
-  collection.fields.addAt(3, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_3146854971",
-    "hidden": false,
-    "id": "relation1264587087",
-    "maxSelect": 999,
-    "minSelect": 0,
-    "name": "ingredients",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4284789913")
-
-  // remove field
-  collection.fields.removeById("relation1264587087")
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1755056714_updated_recipes.js
+++ b/api/pb_migrations/1755056714_updated_recipes.js
@@ -1,44 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // add field
-  collection.fields.addAt(9, new Field({
-    "hidden": false,
-    "id": "number1485952547",
-    "max": null,
-    "min": null,
-    "name": "worktime",
-    "onlyInt": true,
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "number"
-  }))
-
-  // add field
-  collection.fields.addAt(10, new Field({
-    "hidden": false,
-    "id": "number2198822773",
-    "max": null,
-    "min": null,
-    "name": "waittime",
-    "onlyInt": true,
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "number"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // remove field
-  collection.fields.removeById("number1485952547")
-
-  // remove field
-  collection.fields.removeById("number2198822773")
-
-  return app.save(collection)
-})
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,23 +0,0 @@
-// @ts-check
-import { defineConfig } from 'astro/config';
-
-import node from '@astrojs/node';
-
-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',
-
-  adapter: node({
-      mode: 'standalone'
-  }),
-
-  vite: {
-    plugins: [tailwindcss()],
-  }
-});
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,14 +3,12 @@ services:
    build: .
    env_file: .env
    ports:
-      - "4321:4321"
+      - "4173:4173"

  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
+      - ./data:/pb_data
    ports:
      - "8080:8080"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,18 +1,35 @@
 {
-  "name": "astro-pb",
-  "type": "module",
+	"name": "recipie",
+	"private": true,
 	"version": "0.0.1",
+	"type": "module",
 	"scripts": {
-    "dev": "docker compose up pb -d; astro dev --host",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
+		"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": {
-    "@astrojs/node": "^9.4.0",
-    "@tailwindcss/vite": "^4.1.11",
-    "astro": "^5.12.9",
-    "pocketbase": "^0.26.2",
-    "tailwindcss": "^4.1.11"
+		"pocketbase": "^0.26.2"
 	}
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,9 +0,0 @@
-<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
@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// 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
@@ -0,0 +1,11 @@
+<!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
@@ -1,9 +0,0 @@
---
-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
@@ -1,31 +0,0 @@
---
-import client from "@/data/pocketbase"
-import TagRow from "./TagRow.astro"
-
-const { recipe } = Astro.props;
-
-const headerImage = await client.collection("images").getOne(recipe.images[0])
-const image = await client.files.getRelativeURL(headerImage, headerImage.image)
---
-
-<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 tagIds={recipe.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
@@ -1,33 +0,0 @@
---
-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 => (
-            <a 
-                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}
-            </a>
-        ))
-    }
-</div>
--- a/src/components/Detail/ImageCarousel.astro
+++ b/src/components/Detail/ImageCarousel.astro
@@ -1,58 +0,0 @@
---
-import client from "@/data/pocketbase";
-const { class: className, recipe } = Astro.props
-
-async function getLink(img: string) {
-    const record = await client.collection("images").getOne(img)
-    const link = await client.files.getRelativeURL(record, record.image)
-    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))
-)
-
---
-
-<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
@@ -1,29 +0,0 @@
---
-import TagRow from "../Card/TagRow.astro";
-
-
-const { re } = Astro.props
-
-function formatTime(seconds) {
-    if (seconds === 0) return null
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    let result = "";
-    if (h > 0) result += `${h}h`;
-    if (m > 0) result += `${m}m`;
-    if (result === "") result = "0m";
-    return result;
-}
-
-const workTime = formatTime(re.worktime)
-const waitTime = formatTime(re.waittime)
---
-
-<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
-<div class="flex pt-1 items-center">
-    {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
-    {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
-    {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
-    {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
-</div>
-<TagRow tagIds={re.tags}/>
--- a/src/components/Detail/IngredientTableView.astro
+++ b/src/components/Detail/IngredientTableView.astro
@@ -1,68 +0,0 @@
---
-// const { ingredients } = Astro.props
-
-const { class: className, ingredients } = Astro.props
-const tableView = true
---
-
-{!tableView && (
-    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
-    {
-        ingredients.map(ing => (
-            <div class="text-white/70">
-                <p>• {ing.quantity}&nbsp;{ing.unit}&nbsp;{ing.name}</p>
-            </div>
-        ))
-    }
-
-    </div>
-)}
-
-{tableView && (
-    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
-        <thead>
-            <tr>
-                <th class="px-4 py-2">Quantity</th>
-                <th class="px-4 py-2">Unit</th>
-                <th class="px-4 py-2">Ingredient</th>
-            </tr>
-        </thead>
-        <tbody>
-            {
-            ingredients.map((ing, index) => (
-                <>
-                    <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
-                        <td class="px-4 py-2">{ing.quantity}</td>
-                        <td class="px-4 py-2">{ing.unit}</td>
-                        <td class="px-4 py-2">{ing.name}</td>
-                    </tr>
-                </>
-            ))
-            }
-        </tbody>
-    </table>
-)}
-
-<style>
-    .ingredient-row.completed {
-        /* background-color: rgba(0, 0, 0, 0.4) !important; */
-        opacity: 0.6;
-    }
-    
-    .ingredient-row.completed td {
-        text-decoration: line-through;
-        color: rgba(255, 255, 255, 0.5);
-    }
-</style>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const rows = document.querySelectorAll('.ingredient-row');
-        
-        rows.forEach(row => {
-            row.addEventListener('click', function() {
-                this.classList.toggle('completed');
-            });
-        });
-    });
-</script>
--- a/src/components/Detail/StepIngredientSideView.astro
+++ b/src/components/Detail/StepIngredientSideView.astro
@@ -1,17 +0,0 @@
---
-import client from "@/data/pocketbase";
-
-const { ingredients, class: className } = Astro.props;
-
-const ings = await Promise.all(
-    ingredients.map(async i => await client.collection("ingredients").getOne(i))
-)
---
-
-<div class={className}>
-    {ings.map(i => (
-        <div class="text-sm">
-            <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
-        </div>
-    ))}
-</div>
--- a/src/components/Detail/StepView.astro
+++ b/src/components/Detail/StepView.astro
@@ -1,25 +0,0 @@
---
-import { record } from "astro:schema"
-import client from "@/data/pocketbase"
-import StepIngredientSideView from "./StepIngredientSideView.astro"
-
-const { steps, class: className } = Astro.props
---
-
-<div class={className}>
-    <p class="text-[22pt] font-bold md:hidden">Steps</p>
-    { steps.map(s => (
-        <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
-            <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
-            
-            <div class="flex flex-col md:flex-row md:items-stretch">
-                <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
-                {s.ingredients && s.ingredients.length > 0 && (
-                    <div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
-                        <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
-                    </div>
-                )}
-            </div>
-        </div>
-    )) }
-</div>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,14 +0,0 @@
-
-<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 " >tags</a>
-        <a class="hover:underline underline-offset-4 " >search</a>
-    </div>
-</div>
--- a/src/data/pocketbase.ts
+++ b/src/data/pocketbase.ts
@@ -1,12 +0,0 @@
-import Pocketbase from "pocketbase"
-
-const client = new Pocketbase("http://localhost:4321")
-client.autoCancellation(false)
-
-// Return a relative url for file instead of full path including localhost, which breaks external access
-client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
-    const res = client.files.getURL(record, filename)
-    return res.substring(21)
-}
-
-export default client;
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -1,18 +0,0 @@
---
-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 md:px-5 pt-2">
-				<slot />
-			</div>
-		</main>
-	</body>
-</html>
--- a/src/lib/assets/favicon.svg
+++ b/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+<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
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/src/pages/api/[...proxy].ts
+++ b/src/pages/api/[...proxy].ts
@@ -1,16 +0,0 @@
-import type { APIRoute } from "astro";
-
-// THANK YOU https://stackoverflow.com/a/77297521 !!!!!!!
-
-const getProxyUrl = (request: Request) => {
-  const proxyUrl = new URL(import.meta.env.PUBLIC_PB_URL);
-  const requestUrl = new URL(request.url);
-
-  return new URL(requestUrl.pathname, proxyUrl);
-};
-
-export const ALL: APIRoute = async ({ request }) => {
-  const proxyUrl = getProxyUrl(request);
-  const response = await fetch(proxyUrl.href, request);
-  return new Response(response.body);
-};
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,20 +0,0 @@
---
-import PageLayout from "@/layouts/base"
-import client from "@/data/pocketbase"
-import OverviewCard from "@/components/Card/OverviewCard"
-
-const recipies = await client.collection("recipes").getFullList()
---
-
-<PageLayout>	
-	<!-- <p class="pb-2">What would you like today?</p> -->
-
-	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
-		{
-			recipies.map(r => (
-				<OverviewCard recipe={r} />
-			))
-		}
-	</div>
-
-</PageLayout>
--- a/src/pages/recipe/[recipeid].astro
+++ b/src/pages/recipe/[recipeid].astro
@@ -1,49 +0,0 @@
---
-import client from "@/data/pocketbase";
-import SiteLayout from "@/layouts/base";
-import ImageCarousel from "@/components/Detail/ImageCarousel";
-import IngredientTableView from "@/components/Detail/IngredientTableView";
-import StepView from "@/components/Detail/StepView";
-import InfoView from "@/components/Detail/InfoView";
-
-const { recipeid } = Astro.params;
-
-const re = await client.collection("recipes").getOne(recipeid ?? "0");
-
-const stepIds = re.steps
-
-let steps = await Promise.all(
-    stepIds.map(async s =>
-        await client.collection("steps").getOne(s)
-    )
-)
-
-steps = steps.sort((a, b) => a.index - b.index);
-
-const ingredients = await Promise.all(
-    re.ingredients.map(async s =>
-        await client.collection("ingredients").getOne(s)
-    )
-)
---
-
-<SiteLayout>
-    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
-        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
-            <ImageCarousel class="w-full" recipe={re} />
-            <p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
-
-            <!-- Details -->
-            <InfoView re={re} />
-
-            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
-        </div>
-        
-        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
-            <!-- Steps -->
-            <StepView class="md:ml-3" steps={steps} />
-        </div>
-
-    </div>
-</SiteLayout>
--- a/src/pages/recipe/new.astro
+++ b/src/pages/recipe/new.astro
@@ -1,94 +0,0 @@
---
-import SiteLayout from "@/layouts/base";
-
-const { recipeid } = Astro.params;
-
-// Actually post the recipe with the stored variables
-async function submitRecipe() {
-    
-}
-
---
-<script src="@/script/newRecipe.ts"/>
-
-<SiteLayout>
-    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
-        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
-            <div class="relative">
-                <input 
-                    id="photo" 
-                    type="file" 
-                    accept="image/png,image/jpeg" 
-                    class="w-full bg-white/10 rounded-lg h-50
-                           file:mr-4 file:py-2 file:px-4 
-                           file:rounded-lg file:border-0 file:hidden
-                           before:content-['camera'] before:w-full before:h-full before:flex 
-                           before:items-center before:justify-center before:absolute
-                           relative cursor-pointer
-                           [&::-webkit-file-upload-button]:hidden"
-                >
-            </div>
-            <textarea
-                id="rec-name"
-                rows="1"
-                placeholder="Name"
-                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
-                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
-            />
-                <!-- if it works :3  -->
-
-            <!-- Details -->
-            <!-- <InfoView re={re} /> -->
-
-            <div class="flex flex-row align-middle items-center">
-                <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
-                <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
-            </div>
-            <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
-                <thead>
-                    <tr>
-                        <th class="px-4 py-2 w-18">Qty</th>
-                        <th class="px-4 py-2 w-20">Unit</th>
-                        <th class="px-4 py-2">Ingredient</th>
-                    </tr>
-                </thead>
-                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
-                    <tr id="ingredient-input" class="">
-                        <td class="px-2 py-1">
-                            <input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
-                        </td>
-                        <td class="px-2 py-1">
-                            <input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
-                        </td>
-                        <td class="px-2 py-1">
-                            <!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
-                             <input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        
-        <div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
-            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
-
-            <!-- Steps -->
-            <p class="text-[22pt] font-bold md:hidden">Steps</p>
- 
-            <div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
-                <!-- <p class="text-bold text-[10pt]">Step</p> -->
-                <textarea
-                        id="new-instruction"
-                        class="block bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
-                        placeholder="New Step"
-                        oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
-                    />
-            </div>
-
-            <button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
-
-            <ul id="step-list"></ul>
-        </div>
-
-    </div>
-</SiteLayout>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,12 @@
+<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
@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
--- a/src/script/newRecipe.ts
+++ b/src/script/newRecipe.ts
@@ -1,185 +0,0 @@
-let ingredientFields: HTMLInputElement[] = []
-let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
-let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
-
-let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
-let stepAddButton: HTMLButtonElement = document.querySelector('#add-step-btn')!
-let stepList: HTMLUListElement = document.querySelector('#step-list')!
-let currentStepIndex = 0
-
-// - VARS
-let ingredients: {qty: string, unit: string, name: string}[] = []
-let steps: {
-    index: number,
-    instruction: string,
-    ingredients: string[], // IDs of ingredient fields
-}[] = []
-
-// - INIT
-document.addEventListener('DOMContentLoaded', function() {
-    
-    ingredientFields.push(
-        document.querySelector('#ing-qty')!,
-        document.querySelector('#ing-unit')!,
-        document.querySelector('#ing-name')!
-    )
-
-    stepInput.addEventListener('input', showAddStepButton)
-    
-    // show plus button once the user types in the text fields
-    ingredientFields.forEach(f => {
-        f.addEventListener('input', showAddIngredientButton)
-        f.addEventListener('keydown', showAddIngredientButton)
-    })
-    // onclick for add button
-    document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
-
-    // Enter key navigation for ingredient fields
-    ingredientFields[0].addEventListener('keydown', e => {
-        if (e.key === 'Enter') {
-            ingredientFields[1].focus() // Move from qty to unit
-        }
-    })
-    
-    ingredientFields[1].addEventListener('keydown', e => {
-        if (e.key === 'Enter') {
-            ingredientFields[2].focus() // Move from unit to name
-        }
-    })
-    
-    // for pressing enter to add ingredient (on the last field)
-    ingredientFields[2].addEventListener('keydown', e => {if (e.key === 'Enter') addIngredient()} )
-    
-    // Initial check for button state
-    showAddIngredientButton()
-    showAddStepButton()
-
-    // Steps
-    stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
-    stepAddButton.addEventListener('click', addStep)
-});
-
-// - ADD
-function addIngredient() {
-    const ing = {
-        qty: ingredientFields[0].value,
-        unit: ingredientFields[1].value,
-        name: ingredientFields[2].value
-    }
-
-    ingredients.push(ing)
-    
-    const newRow = document.createElement('tr')
-    newRow.innerHTML = `
-        <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
-        <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
-        <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
-    `
-    
-    // Add row to table and clear fields
-    ingredientTable.appendChild(newRow)
-    ingredientFields.forEach(f => f.value = '')
-    ingredientAddButton.disabled = true // Hide Add Ingredient button
-    // move cursor to Qty field again
-    ingredientFields[0].focus()
-}
-
-function addStep() {
-    const step = {
-        index: currentStepIndex++,
-        instruction: stepInput.value,
-        ingredients: []
-    }
-
-    steps.push(step)
-    renderSteps()
-    stepInput.value = ''
-    stepAddButton.disabled = true
-    stepInput.focus()
-}
-
-function renderSteps() {
-    // clear the step list
-    stepList.innerHTML = ''
-    
-    // re-render all steps in their current order
-    steps.forEach((step, displayIndex) => {
-        const newStep = document.createElement('div')
-        // times like this i regret using astro
-        newStep.innerHTML = `
-            <div class="flex justify-between items-start ">
-                <div class="flex flex-col">
-                    <p class="text-bold text-[10pt]">Step ${displayIndex + 1}</p>
-                    <div class="flex flex-col md:flex-row md:items-stretch">
-                        <p class="w-full md:flex-2/3 pr-1 text-left">${step.instruction}</p>
-                    </div>
-                </div>
-
-                <div class="flex flex-col gap-1">
-                    <button id="move-up-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === 0 ? 'disabled' : ''}>↑</button>
-                    
-                    <button id="move-down-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === steps.length - 1 ? 'disabled' : ''}>↓</button>
-                </div>
-            </div>
-        `
-        newStep.id = `step-${step.index}`
-        newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
-        stepList.appendChild(newStep)
-    })
-    
-    // event listeners to reorder buttons
-    document.querySelectorAll('#move-up-btn').forEach(btn => {
-        btn.addEventListener('click', (e) => {
-            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
-            moveStep(stepIndex, -1)
-        })
-    })
-    
-    document.querySelectorAll('#move-down-btn').forEach(btn => {
-        btn.addEventListener('click', (e) => {
-            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
-            moveStep(stepIndex, 1)
-        })
-    })
-}
-
-// - UTILS
-function showAddIngredientButton() {
-    const hasQty = ingredientFields[0].value.trim().length > 0
-    const hasName = ingredientFields[2].value.trim().length > 0
-    
-    if (hasQty && hasName) {
-        ingredientAddButton.disabled = false
-    } else {
-        ingredientAddButton.disabled = true
-    }
-}
-
-function showAddStepButton() {
-    if (stepInput.value.trim().length > 0) {
-        stepAddButton.disabled = false
-    } else {
-        stepAddButton.disabled = true
-    }
-}
-
-// shift: the direction to move. should be +1 to move down or -1 to move up the list
-function moveStep(stepIndex: number, shift: number) {
-    // Find the step in the array
-    const currentStepArrayIndex = steps.findIndex(step => step.index === stepIndex)
-    
-    if (currentStepArrayIndex === -1) return // step not found
-    
-    const newIndex = currentStepArrayIndex + shift
-    
-    // check bounds
-    if (newIndex < 0 || newIndex >= steps.length) return
-    
-    // swap the steps in the array
-    const temp = steps[currentStepArrayIndex]
-    steps[currentStepArrayIndex] = steps[newIndex]
-    steps[newIndex] = temp
-    
-    // re-render the steps
-    renderSteps()
-}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,10 +0,0 @@
-@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; */
-}
--- a/static/robots.txt
+++ b/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -0,0 +1,12 @@
+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,16 +1,19 @@
 {
-  "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"],
+	"extends": "./.svelte-kit/tsconfig.json",
 	"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"]
-		}
+		"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
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+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	0c692a62e8	[PIE-1 ] add api docker files	2025-08-11 20:13:00 +12:00
june	5b0a6561b0	[PIE-1 ] Add docker files	2025-08-11 18:16:59 +12:00
june	08ae9ee79e	[PIE-1 ] Add initial svelte project	2025-08-11 18:01:36 +12:00
				`@@ -0,0 +1 @@`
				<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>
				`@@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.