[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>

.dockerignore

@@ -0,0 +1,27 @@
+# Node modules
+node_modules
+
+# Build output
+build
+dist
+.svelte-kit
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Environment files
+.env
+.env.*
+
+# OS generated files
+.DS_Store
+Thumbs.db
+
+# Editor directories and files
+.vscode
+.idea
+*.swp
+*.swo

.env.example

@@ -0,0 +1,4 @@
+PB_ADMIN_EMAIL=admin@example.com
+PB_ADMIN_PASSWORD=secret-password
+PUBLIC_URL=http://your.domain.tld/
+PB_DATA_DIR=/pb/pb_data

.gitignore

@@ -1,2 +1,26 @@
-*.DS_Store
 node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.astro
+/dist
+/build
+/data
+/api/pb_data
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+Makefile
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:24-alpine
+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" ]

api/Dockerfile

@@ -0,0 +1,26 @@
+FROM alpine:latest
+
+ARG PB_VERSION=0.29.2
+
+WORKDIR /pb
+
+RUN apk add --no-cache \
+    unzip \
+    curl \
+    ca-certificates \
+    bash
+
+# download and unzip PocketBase
+ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
+RUN unzip /tmp/pb.zip -d /pb/
+
+# copy entrypoint
+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"]
+CMD ["serve", "--http=0.0.0.0:8080"]

api/docker-entrypoint.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+set -e
+
+# Required env-vars
+: "${PB_ADMIN_EMAIL:?need PB_ADMIN_EMAIL}"
+: "${PB_ADMIN_PASSWORD:?need PB_ADMIN_PASSWORD}"
+: "${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}"
+
+# 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;" \
+       | grep -q .; then
+
+  echo ">>> Creating PocketBase superuser: ${PB_ADMIN_EMAIL}"
+  /pb/pocketbase superuser create "${PB_ADMIN_EMAIL}" "${PB_ADMIN_PASSWORD}"
+else
+  echo ">>> Superuser ${PB_ADMIN_EMAIL} already exists, skipping creation."
+fi
+
+# exec the real pocketbase binary with any passed arguments
+exec /pb/pocketbase "$@"

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);
+})

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);
+})

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)
+})

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)
+})

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)
+})

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);
+})

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)
+})

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)
+})

api/pb_migrations/1755039357_updated_steps.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4284789913")
+
+  // remove field
+  collection.fields.removeById("relation3666391351")
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4284789913")
+
+  // add field
+  collection.fields.addAt(3, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_842702175",
+    "hidden": false,
+    "id": "relation3666391351",
+    "maxSelect": 1,
+    "minSelect": 0,
+    "name": "recipe",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+})

api/pb_migrations/1755041844_created_ingredients.js

@@ -0,0 +1,97 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "number2683508278",
+        "max": null,
+        "min": null,
+        "name": "quantity",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3703245907",
+        "max": 0,
+        "min": 0,
+        "name": "unit",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_3146854971",
+    "indexes": [],
+    "listRule": null,
+    "name": "ingredients",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971");
+
+  return app.delete(collection);
+})

api/pb_migrations/1755041886_updated_recipes.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // add field
+  collection.fields.addAt(8, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3146854971",
+    "hidden": false,
+    "id": "relation1264587087",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "ingredients",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // remove field
+  collection.fields.removeById("relation1264587087")
+
+  return app.save(collection)
+})

api/pb_migrations/1755042306_updated_ingredients.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": "",
+    "listRule": "",
+    "updateRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null,
+    "listRule": null,
+    "updateRule": null,
+    "viewRule": null
+  }, collection)
+
+  return app.save(collection)
+})

api/pb_migrations/1755045585_updated_steps.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4284789913")
+
+  // add field
+  collection.fields.addAt(3, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3146854971",
+    "hidden": false,
+    "id": "relation1264587087",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "ingredients",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4284789913")
+
+  // remove field
+  collection.fields.removeById("relation1264587087")
+
+  return app.save(collection)
+})

api/pb_migrations/1755056714_updated_recipes.js

@@ -0,0 +1,44 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // add field
+  collection.fields.addAt(9, new Field({
+    "hidden": false,
+    "id": "number1485952547",
+    "max": null,
+    "min": null,
+    "name": "worktime",
+    "onlyInt": true,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  // add field
+  collection.fields.addAt(10, new Field({
+    "hidden": false,
+    "id": "number2198822773",
+    "max": null,
+    "min": null,
+    "name": "waittime",
+    "onlyInt": true,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // remove field
+  collection.fields.removeById("number1485952547")
+
+  // remove field
+  collection.fields.removeById("number2198822773")
+
+  return app.save(collection)
+})

astro.config.mjs

@@ -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
+    }
+  }
+});

docker-compose.yml

@@ -0,0 +1,16 @@
+services:
+  web:
+    build: .
+    env_file: .env
+    ports:
+      - "4321:4321"
+
+  pb:
+    build: api
+    env_file: .env
+    volumes:
+      - ./api/pb_data:/pb/pb_data
+      - ./api/pb_migrations:/pb/pb_migrations
+      - ./api/pb_hooks:/pb/pb_hooks
+    ports:
+      - "8080:8080"

package.json

@@ -0,0 +1,18 @@
+{
+  "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"
+  }
+}

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>

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>

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>

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>

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>

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}/>

src/components/Detail/IngredientTableView.astro

@@ -0,0 +1,68 @@
+---
+// const { ingredients } = Astro.props
+
+const { class: className, ingredients } = Astro.props
+const tableView = true
+---
+
+{!tableView && (
+    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
+    {
+        ingredients.map(ing => (
+            <div class="text-white/70">
+                <p>• {ing.quantity}&nbsp;{ing.unit}&nbsp;{ing.name}</p>
+            </div>
+        ))
+    }
+
+    </div>
+)}
+
+{tableView && (
+    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
+        <thead>
+            <tr>
+                <th class="px-4 py-2">Quantity</th>
+                <th class="px-4 py-2">Unit</th>
+                <th class="px-4 py-2">Ingredient</th>
+            </tr>
+        </thead>
+        <tbody>
+            {
+            ingredients.map((ing, index) => (
+                <>
+                    <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
+                        <td class="px-4 py-2">{ing.quantity}</td>
+                        <td class="px-4 py-2">{ing.unit}</td>
+                        <td class="px-4 py-2">{ing.name}</td>
+                    </tr>
+                </>
+            ))
+            }
+        </tbody>
+    </table>
+)}
+
+<style>
+    .ingredient-row.completed {
+        /* background-color: rgba(0, 0, 0, 0.4) !important; */
+        opacity: 0.6;
+    }
+    
+    .ingredient-row.completed td {
+        text-decoration: line-through;
+        color: rgba(255, 255, 255, 0.5);
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const rows = document.querySelectorAll('.ingredient-row');
+        
+        rows.forEach(row => {
+            row.addEventListener('click', function() {
+                this.classList.toggle('completed');
+            });
+        });
+    });
+</script>

src/components/Detail/StepIngredientSideView.astro

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

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>

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>

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;

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'
+}

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>

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>

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
+  });
+};

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>

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>

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>

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>

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>

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()
+}

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;
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "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"]
+		}
+  }
+}