padding change

Each row in the table can be clicked/tapped to be crossed off to complete
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

.env.example

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

.gitignore

@@ -5,10 +5,11 @@ node_modules
 .vercel
 .netlify
 .wrangler
-/.svelte-kit
+/.astro
+/dist
 /build
 /data
-
+/api/pb_data
 # OS
 .DS_Store
 Thumbs.db

.npmrc

@@ -1 +0,0 @@
-engine-strict=true

.prettierignore

@@ -1,9 +0,0 @@
-# Package Managers
-package-lock.json
-pnpm-lock.yaml
-yarn.lock
-bun.lock
-bun.lockb
-
-# Miscellaneous
-/static/

.prettierrc

@@ -1,19 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": [
-		"prettier-plugin-svelte",
-		"prettier-plugin-tailwindcss"
-	],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	],
-	"tailwindStylesheet": "./src/app.css"
-}

Dockerfile

@@ -4,8 +4,10 @@ COPY package*.json ./
 RUN npm i
 COPY . .
 ENV PUBLIC_PB_URL=http://pb:8080
+ENV PUBLIC_URL=http://localhost:4321
 
 RUN npm run build
 
-EXPOSE 4173
-CMD ["npm", "run", "preview", "--", "--host"]
+EXPOSE 4321
+# CMD ["npm", "run", "dev", "--", "--host"]
+CMD [ "npm", "run", "preview", "--", "--host" ]

api/docker-entrypoint.sh

@@ -12,6 +12,7 @@ set -e
 
 # if there are no users yet, create the superuser
 # we check the sqlite file for any existing record in the users table
+/pb/pocketbase superuser create "${PB_ADMIN_EMAIL}" "${PB_ADMIN_PASSWORD}"
 if [ ! -f "${PB_DATA_DIR}/pb_data.db" ] \
       ! sqlite3 "${PB_DATA_DIR}/data.db" \
        "SELECT id FROM _superusers WHERE email='${PB_ADMIN_EMAIL}' LIMIT 1;" \

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,23 @@
+// @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()],
+  }
+});

docker-compose.yml

@@ -3,14 +3,14 @@ services:
     build: .
     env_file: .env
     ports:
-      - "4173:4173"
+      - "4321:4321"
 
   pb:
     build: api
     env_file: .env
     volumes:
-      - ./data/data:/pb/pb_data
-      - ./data/migrations:/pb/pb_migrations
-      - ./data/hooks:/pb/pb_hooks
+      - ./api/pb_data:/pb/pb_data
+      - ./api/pb_migrations:/pb/pb_migrations
+      - ./api/pb_hooks:/pb/pb_hooks
     ports:
       - "8080:8080"

package.json

@@ -1,35 +1,18 @@
 {
-	"name": "recipie",
-	"private": true,
-	"version": "0.0.1",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/forms": "^0.5.9",
-		"@tailwindcss/typography": "^0.5.15",
-		"@tailwindcss/vite": "^4.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^7.0.4"
-	},
-	"dependencies": {
-		"pocketbase": "^0.26.2"
-	}
+  "name": "astro-pb",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "docker compose up pb -d; astro dev --host",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/node": "^9.4.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "astro": "^5.12.9",
+    "pocketbase": "^0.26.2",
+    "tailwindcss": "^4.1.11"
+  }
 }

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/app.css

@@ -1,3 +0,0 @@
-@import 'tailwindcss';
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';

src/app.d.ts

@@ -1,13 +0,0 @@
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
-}
-
-export {};

src/app.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>

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,31 @@
+---
+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>

src/components/Card/TagRow.astro

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

src/components/Detail/ImageCarousel.astro

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

src/components/Detail/InfoView.astro

@@ -0,0 +1,29 @@
+---
+import TagRow from "../Card/TagRow.astro";
+
+
+const { re } = Astro.props
+
+function formatTime(seconds) {
+    if (seconds === 0) return null
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    let result = "";
+    if (h > 0) result += `${h}h`;
+    if (m > 0) result += `${m}m`;
+    if (result === "") result = "0m";
+    return result;
+}
+
+const workTime = formatTime(re.worktime)
+const waitTime = formatTime(re.waittime)
+---
+
+<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
+<div class="flex pt-1 items-center">
+    {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
+    {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
+    {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
+    {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
+</div>
+<TagRow tagIds={re.tags}/>

src/components/Detail/IngredientTableView.astro

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

src/components/Detail/StepIngredientSideView.astro

@@ -0,0 +1,17 @@
+---
+import client from "@/data/pocketbase";
+
+const { ingredients, class: className } = Astro.props;
+
+const ings = await Promise.all(
+    ingredients.map(async i => await client.collection("ingredients").getOne(i))
+)
+---
+
+<div class={className}>
+    {ings.map(i => (
+        <div class="text-sm">
+            <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
+        </div>
+    ))}
+</div>

src/components/Detail/StepView.astro

@@ -0,0 +1,25 @@
+---
+import { record } from "astro:schema"
+import client from "@/data/pocketbase"
+import StepIngredientSideView from "./StepIngredientSideView.astro"
+
+const { steps, class: className } = Astro.props
+---
+
+<div class={className}>
+    <p class="text-[22pt] font-bold md:hidden">Steps</p>
+    { steps.map(s => (
+        <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
+            <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
+            
+            <div class="flex flex-col md:flex-row md:items-stretch">
+                <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
+                {s.ingredients && s.ingredients.length > 0 && (
+                    <div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
+                        <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
+                    </div>
+                )}
+            </div>
+        </div>
+    )) }
+</div>

src/components/Header.astro

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

src/data/pocketbase.ts

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

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 md:px-5 pt-2">
+				<slot />
+			</div>
+		</main>
+	</body>
+</html>

src/lib/assets/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/lib/pocketbase/index.ts

@@ -1,284 +0,0 @@
-// Adapted from https://github.com/spinspire/pocketbase-sveltekit-starter
-
-import PocketBase, { type AuthProviderInfo, RecordService } from "pocketbase";
-import type {
-  AuthModel,
-  ListResult,
-  RecordListOptions,
-  RecordModel,
-  UnsubscribeFunc,
-} from "pocketbase";
-import { readable, type Readable, type Subscriber } from "svelte/store";
-import { browser } from "$app/environment";
-import { PUBLIC_PB_URL } from "$env/static/public";
-import { base } from "$app/paths";
-import { invalidateAll } from "$app/navigation";
-import type { TypedPocketBase } from "./pocketbase-types"; // npx pocketbase-typegen --url http://localhost:8080 --email admin@example.com --password 'secret-password'
-// import {
-//   startAuthentication,
-//   startRegistration,
-// } from "@simplewebauthn/browser";
-// import { alerts } from "$lib/components/Alerts.svelte";
-
-export const client = new PocketBase(PUBLIC_PB_URL) as TypedPocketBase;
-
-export const authModel = readable<AuthModel | null>(
-  null,
-  function (set, update) {
-    client.authStore.onChange((token, model) => {
-      update((oldval) => {
-        if (
-          (oldval?.isValid && !model?.isValid) ||
-          (!oldval?.isValid && model?.isValid)
-        ) {
-          // if the auth changed, invalidate all page load data
-          invalidateAll();
-        }
-        return model;
-      });
-    }, true);
-  }
-);
-
-export async function login(
-  email: string,
-  password: string,
-  register = false,
-  rest: { [key: string]: any } = {}
-) {
-  if (register) {
-    const user = { ...rest, email, password, confirmPassword: password };
-    await client.collection("users").create({ ...user, metadata: {} });
-  }
-  await client.collection("users").authWithPassword(email, password);
-}
-
-// export async function webauthnRegister(
-//   usernameOrEmail: string
-// ): Promise<void | Error> {
-//   try {
-//     const resp = await fetch(
-//       `/api/webauthn/registration-options?usernameOrEmail=${usernameOrEmail}`
-//     );
-//     if (!resp.ok) {
-//       const text = await resp.text();
-//       throw new Error(text);
-//     }
-//     const { publicKey: optionsJSON } = await resp.json();
-//     let attResp = await startRegistration({ optionsJSON });
-//     const res = await fetch(`/api/webauthn/register`, {
-//       method: "POST",
-//       headers: {
-//         "Content-Type": "application/json",
-//       },
-//       body: JSON.stringify({ ...attResp, usernameOrEmail }),
-//     });
-//     if (!res.ok) throw new Error("Failed to register");
-//     alerts.success("Passkey registered successfully.");
-//   } catch (e) {
-//     if (e instanceof Error) {
-//       if (e.name === "NotAllowedError") {
-//         alerts.error("Registration denied or timed out.");
-//       }
-//       console.error(e);
-//     }
-//   }
-// }
-
-// export async function webauthnLogin(usernameOrEmail: string) {
-//   try {
-//     const resp = await fetch(
-//       `/api/webauthn/login-options?usernameOrEmail=${usernameOrEmail}`
-//     );
-//     if (!resp.ok) {
-//       const text = await resp.text();
-//       throw new Error(text);
-//     }
-//     const { publicKey: optionsJSON } = await resp.json();
-//     let asseResp = await startAuthentication({ optionsJSON });
-//     const res = await fetch(`/api/webauthn/login`, {
-//       method: "POST",
-//       headers: {
-//         "Content-Type": "application/json",
-//       },
-//       body: JSON.stringify({ ...asseResp, usernameOrEmail }),
-//     });
-//     const authResponse = await res.json();
-//     if (!res.ok) throw new Error("Failed to login");
-//     client.authStore.save(authResponse.token, authResponse.record);
-//   } catch (e) {
-//     if (e instanceof Error) {
-//       if (e.name === "NotAllowedError") {
-//         alerts.error("Registration denied or timed out.");
-//       } else {
-//         alerts.error(e.message);
-//       }
-//       console.error(e);
-//     }
-//   }
-// }
-
-export function logout() {
-  client.authStore.clear();
-}
-
-/*
- * Save (create/update) a record (a plain object). Automatically converts to
- * FormData if needed.
- */
-export async function save<T>(collection: string, record: any, create = false) {
-  // convert obj to FormData in case one of the fields is instanceof FileList
-  const data = object2formdata(record);
-  if (record.id && !create) {
-    // "create" flag overrides update
-    return await client.collection(collection).update<T>(record.id, data);
-  } else {
-    return await client.collection(collection).create<T>(data);
-  }
-}
-
-// convert obj to FormData in case one of the fields is instanceof FileList
-function object2formdata(obj: {}) {
-  // check if any field's value is an instanceof FileList
-  if (
-    !Object.values(obj).some(
-      (val) => val instanceof FileList || val instanceof File
-    )
-  ) {
-    // if not, just return the original object
-    return obj;
-  }
-  // otherwise, build FormData (multipart/form-data) from obj
-  const fd = new FormData();
-  for (const [key, val] of Object.entries(obj)) {
-    if (val instanceof FileList) {
-      for (const file of val) {
-        fd.append(key, file);
-      }
-    } else if (val instanceof File) {
-      // handle File before "object" so that it doesn't get serialized as JSON
-      fd.append(key, val);
-    } else if (Array.isArray(val)) {
-      // for some reason, multipart/form-data wants arrays to be comma-separated strings
-      fd.append(key, val.join(","));
-    } else if (typeof val === "object") {
-      fd.append(key, JSON.stringify(val));
-    } else {
-      fd.append(key, val as any);
-    }
-  }
-  return fd;
-}
-
-export interface PageStore<T = any> extends Readable<ListResult<T>> {
-  setPage(newpage: number): Promise<void>;
-  next(): Promise<void>;
-  prev(): Promise<void>;
-}
-
-export async function watch<T extends RecordModel>(
-  idOrName: string,
-  queryParams = {} as RecordListOptions,
-  page = 1,
-  perPage = 20,
-  realtime = browser
-): Promise<PageStore<T>> {
-  const collection = client.collection(idOrName);
-  let result = await collection.getList<T>(page, perPage, queryParams);
-  let set: Subscriber<ListResult<T>>;
-  let unsubRealtime: UnsubscribeFunc | undefined;
-  // fetch first page
-  const store = readable<ListResult<T>>(result, (_set) => {
-    set = _set;
-    // watch for changes (only if you're in the browser)
-    if (realtime)
-      collection
-        .subscribe<T>(
-          "*",
-          ({ action, record }) => {
-            (async function (action: string) {
-              // see https://github.com/pocketbase/pocketbase/discussions/505
-              switch (action) {
-                // ISSUE: no subscribe event when a record is modified and no longer fits the "filter"
-                // @see https://github.com/pocketbase/pocketbase/issues/4717
-                case "update":
-                case "create":
-                  // record = await expand(queryParams.expand, record);
-                  const index = result.items.findIndex(
-                    (r) => r.id === record.id
-                  );
-                  // replace existing if found, otherwise append
-                  if (index >= 0) {
-                    result.items[index] = record;
-                    return result.items;
-                  } else {
-                    return [...result.items, record];
-                  }
-                case "delete":
-                  return result.items.filter((item) => item.id !== record.id);
-              }
-              return result.items;
-            })(action).then((items) => set((result = { ...result, items })));
-          },
-          queryParams
-        )
-        // remember for later
-        .then((unsub) => (unsubRealtime = unsub));
-  });
-  async function setPage(newpage: number) {
-    const { page, totalPages, perPage } = result;
-    if (page > 0 && page <= totalPages) {
-      set((result = await collection.getList(newpage, perPage, queryParams)));
-    }
-  }
-  return {
-    ...store,
-    subscribe(run, invalidate) {
-      const unsubStore = store.subscribe(run, invalidate);
-      return async () => {
-        unsubStore();
-        // ISSUE: Technically, we should AWAIT here, but that will slow down navigation UX.
-        if (unsubRealtime) /* await */ unsubRealtime();
-      };
-    },
-    setPage,
-    async next() {
-      setPage(result.page + 1);
-    },
-    async prev() {
-      setPage(result.page - 1);
-    },
-  };
-}
-
-// export async function providerLogin(
-//   provider: AuthProviderInfo,
-//   authCollection: RecordService
-// ) {
-//   const authResponse = await authCollection.authWithOAuth2({
-//     provider: provider.name,
-//     createData: {
-//       // emailVisibility: true,
-//     },
-//   });
-//   // update user "record" if "meta" has info it doesn't have
-//   const { meta, record } = authResponse;
-//   let changes = {} as { [key: string]: any };
-//   if (!record.name && meta?.name) {
-//     changes.name = meta.name;
-//   }
-//   if (!record.avatar && meta?.avatarUrl) {
-//     const response = await fetch(meta.avatarUrl);
-//     if (response.ok) {
-//       const type = response.headers.get("content-type") ?? "image/jpeg";
-//       changes.avatar = new File([await response.blob()], "avatar", { type });
-//     }
-//   }
-//   if (Object.keys(changes).length) {
-//     authResponse.record = await save(authCollection.collectionIdOrName, {
-//       ...record,
-//       ...changes,
-//     });
-//   }
-//   return authResponse;
-// }

src/lib/pocketbase/pocketbase-types.ts

@@ -1,158 +0,0 @@
-/**
-* This file was @generated using pocketbase-typegen
-*/
-
-import type PocketBase from 'pocketbase'
-import type { RecordService } from 'pocketbase'
-
-export enum Collections {
-	Authorigins = "_authOrigins",
-	Externalauths = "_externalAuths",
-	Mfas = "_mfas",
-	Otps = "_otps",
-	Superusers = "_superusers",
-	Recipes = "recipes",
-	Users = "users",
-}
-
-// Alias types for improved usability
-export type IsoDateString = string
-export type RecordIdString = string
-export type HTMLString = string
-
-type ExpandType<T> = unknown extends T
-	? T extends unknown
-		? { expand?: unknown }
-		: { expand: T }
-	: { expand: T }
-
-// System fields
-export type BaseSystemFields<T = unknown> = {
-	id: RecordIdString
-	collectionId: string
-	collectionName: Collections
-} & ExpandType<T>
-
-export type AuthSystemFields<T = unknown> = {
-	email: string
-	emailVisibility: boolean
-	username: string
-	verified: boolean
-} & BaseSystemFields<T>
-
-// Record types for each collection
-
-export type AuthoriginsRecord = {
-	collectionRef: string
-	created?: IsoDateString
-	fingerprint: string
-	id: string
-	recordRef: string
-	updated?: IsoDateString
-}
-
-export type ExternalauthsRecord = {
-	collectionRef: string
-	created?: IsoDateString
-	id: string
-	provider: string
-	providerId: string
-	recordRef: string
-	updated?: IsoDateString
-}
-
-export type MfasRecord = {
-	collectionRef: string
-	created?: IsoDateString
-	id: string
-	method: string
-	recordRef: string
-	updated?: IsoDateString
-}
-
-export type OtpsRecord = {
-	collectionRef: string
-	created?: IsoDateString
-	id: string
-	password: string
-	recordRef: string
-	sentTo?: string
-	updated?: IsoDateString
-}
-
-export type SuperusersRecord = {
-	created?: IsoDateString
-	email: string
-	emailVisibility?: boolean
-	id: string
-	password: string
-	tokenKey: string
-	updated?: IsoDateString
-	verified?: boolean
-}
-
-export type RecipesRecord = {
-	created?: IsoDateString
-	desc?: string
-	id: string
-	name?: string
-	servings?: number
-	updated?: IsoDateString
-}
-
-export type UsersRecord = {
-	avatar?: string
-	created?: IsoDateString
-	email: string
-	emailVisibility?: boolean
-	id: string
-	name?: string
-	password: string
-	tokenKey: string
-	updated?: IsoDateString
-	verified?: boolean
-}
-
-// Response types include system fields and match responses from the PocketBase API
-export type AuthoriginsResponse<Texpand = unknown> = Required<AuthoriginsRecord> & BaseSystemFields<Texpand>
-export type ExternalauthsResponse<Texpand = unknown> = Required<ExternalauthsRecord> & BaseSystemFields<Texpand>
-export type MfasResponse<Texpand = unknown> = Required<MfasRecord> & BaseSystemFields<Texpand>
-export type OtpsResponse<Texpand = unknown> = Required<OtpsRecord> & BaseSystemFields<Texpand>
-export type SuperusersResponse<Texpand = unknown> = Required<SuperusersRecord> & AuthSystemFields<Texpand>
-export type RecipesResponse<Texpand = unknown> = Required<RecipesRecord> & BaseSystemFields<Texpand>
-export type UsersResponse<Texpand = unknown> = Required<UsersRecord> & AuthSystemFields<Texpand>
-
-// Types containing all Records and Responses, useful for creating typing helper functions
-
-export type CollectionRecords = {
-	_authOrigins: AuthoriginsRecord
-	_externalAuths: ExternalauthsRecord
-	_mfas: MfasRecord
-	_otps: OtpsRecord
-	_superusers: SuperusersRecord
-	recipes: RecipesRecord
-	users: UsersRecord
-}
-
-export type CollectionResponses = {
-	_authOrigins: AuthoriginsResponse
-	_externalAuths: ExternalauthsResponse
-	_mfas: MfasResponse
-	_otps: OtpsResponse
-	_superusers: SuperusersResponse
-	recipes: RecipesResponse
-	users: UsersResponse
-}
-
-// Type for usage with type asserted PocketBase instance
-// https://github.com/pocketbase/js-sdk#specify-typescript-definitions
-
-export type TypedPocketBase = PocketBase & {
-	collection(idOrName: '_authOrigins'): RecordService<AuthoriginsResponse>
-	collection(idOrName: '_externalAuths'): RecordService<ExternalauthsResponse>
-	collection(idOrName: '_mfas'): RecordService<MfasResponse>
-	collection(idOrName: '_otps'): RecordService<OtpsResponse>
-	collection(idOrName: '_superusers'): RecordService<SuperusersResponse>
-	collection(idOrName: 'recipes'): RecordService<RecipesResponse>
-	collection(idOrName: 'users'): RecordService<UsersResponse>
-}

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

@@ -0,0 +1,16 @@
+import type { APIRoute } from "astro";
+
+// THANK YOU https://stackoverflow.com/a/77297521 !!!!!!!
+
+const getProxyUrl = (request: Request) => {
+  const proxyUrl = new URL(import.meta.env.PUBLIC_PB_URL);
+  const requestUrl = new URL(request.url);
+
+  return new URL(requestUrl.pathname, proxyUrl);
+};
+
+export const ALL: APIRoute = async ({ request }) => {
+  const proxyUrl = getProxyUrl(request);
+  const response = await fetch(proxyUrl.href, request);
+  return new Response(response.body);
+};

src/pages/index.astro

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

src/pages/recipe/[recipeid].astro

@@ -0,0 +1,49 @@
+---
+import client from "@/data/pocketbase";
+import SiteLayout from "@/layouts/base";
+import ImageCarousel from "@/components/Detail/ImageCarousel";
+import IngredientTableView from "@/components/Detail/IngredientTableView";
+import StepView from "@/components/Detail/StepView";
+import InfoView from "@/components/Detail/InfoView";
+
+const { recipeid } = Astro.params;
+
+const re = await client.collection("recipes").getOne(recipeid ?? "0");
+
+const stepIds = re.steps
+
+let steps = await Promise.all(
+    stepIds.map(async s =>
+        await client.collection("steps").getOne(s)
+    )
+)
+
+steps = steps.sort((a, b) => a.index - b.index);
+
+const ingredients = await Promise.all(
+    re.ingredients.map(async s =>
+        await client.collection("ingredients").getOne(s)
+    )
+)
+---
+
+<SiteLayout>
+    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
+            <ImageCarousel class="w-full" recipe={re} />
+            <p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
+
+            <!-- Details -->
+            <InfoView re={re} />
+
+            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
+            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
+        </div>
+        
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
+            <!-- Steps -->
+            <StepView class="md:ml-3" steps={steps} />
+        </div>
+
+    </div>
+</SiteLayout>

src/pages/recipe/new.astro

@@ -0,0 +1,94 @@
+---
+import SiteLayout from "@/layouts/base";
+
+const { recipeid } = Astro.params;
+
+// Actually post the recipe with the stored variables
+async function submitRecipe() {
+    
+}
+
+---
+<script src="@/script/newRecipe.ts"/>
+
+<SiteLayout>
+    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
+            <div class="relative">
+                <input 
+                    id="photo" 
+                    type="file" 
+                    accept="image/png,image/jpeg" 
+                    class="w-full bg-white/10 rounded-lg h-50
+                           file:mr-4 file:py-2 file:px-4 
+                           file:rounded-lg file:border-0 file:hidden
+                           before:content-['camera'] before:w-full before:h-full before:flex 
+                           before:items-center before:justify-center before:absolute
+                           relative cursor-pointer
+                           [&::-webkit-file-upload-button]:hidden"
+                >
+            </div>
+            <textarea
+                id="rec-name"
+                rows="1"
+                placeholder="Name"
+                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
+                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
+            />
+                <!-- if it works :3  -->
+
+            <!-- Details -->
+            <!-- <InfoView re={re} /> -->
+
+            <div class="flex flex-row align-middle items-center">
+                <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
+                <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
+            </div>
+            <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
+                <thead>
+                    <tr>
+                        <th class="px-4 py-2 w-18">Qty</th>
+                        <th class="px-4 py-2 w-20">Unit</th>
+                        <th class="px-4 py-2">Ingredient</th>
+                    </tr>
+                </thead>
+                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
+                    <tr id="ingredient-input" class="">
+                        <td class="px-2 py-1">
+                            <input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
+                        </td>
+                        <td class="px-2 py-1">
+                            <input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
+                        </td>
+                        <td class="px-2 py-1">
+                            <!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
+                             <input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
+            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
+
+            <!-- Steps -->
+            <p class="text-[22pt] font-bold md:hidden">Steps</p>
+ 
+            <div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
+                <!-- <p class="text-bold text-[10pt]">Step</p> -->
+                <textarea
+                        id="new-instruction"
+                        class="block bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
+                        placeholder="New Step"
+                        oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
+                    />
+            </div>
+
+            <button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
+
+            <ul id="step-list"></ul>
+        </div>
+
+    </div>
+</SiteLayout>

src/routes/+layout.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import '../app.css';
-	import favicon from '$lib/assets/favicon.svg';
-	
-	let { children } = $props();
-</script>
-
-<svelte:head>
-	<link rel="icon" href={favicon} />
-</svelte:head>
-
-{@render children?.()}

src/routes/+page.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { client } from "$lib/pocketbase";
-    const { data } = $props()
-    const recipes = $derived(data.recipes)
-
-</script>
-
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
-
-
-{#each $recipes.items as item}
-    {item.name} <br>
-    {item.desc}
-
-{/each}

src/routes/+page.ts

@@ -1,18 +0,0 @@
-import { client, watch } from "$lib/pocketbase";
-import type { RecipesResponse } from "$lib/pocketbase/pocketbase-types";
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = async ({ parent, fetch }) => {
-//   const filter = client.filter("user != ''", {});
-  const expand = "user";
-  const queryParams = {
-    // filter,
-    expand,
-    fetch,
-  };
-  const recipes = await watch<RecipesResponse<any>>("recipes", queryParams);
-
-  return {
-    recipes,
-  };
-};

src/script/newRecipe.ts

@@ -0,0 +1,185 @@
+let ingredientFields: HTMLInputElement[] = []
+let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
+let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
+
+let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
+let stepAddButton: HTMLButtonElement = document.querySelector('#add-step-btn')!
+let stepList: HTMLUListElement = document.querySelector('#step-list')!
+let currentStepIndex = 0
+
+// - VARS
+let ingredients: {qty: string, unit: string, name: string}[] = []
+let steps: {
+    index: number,
+    instruction: string,
+    ingredients: string[], // IDs of ingredient fields
+}[] = []
+
+// - INIT
+document.addEventListener('DOMContentLoaded', function() {
+    
+    ingredientFields.push(
+        document.querySelector('#ing-qty')!,
+        document.querySelector('#ing-unit')!,
+        document.querySelector('#ing-name')!
+    )
+
+    stepInput.addEventListener('input', showAddStepButton)
+    
+    // show plus button once the user types in the text fields
+    ingredientFields.forEach(f => {
+        f.addEventListener('input', showAddIngredientButton)
+        f.addEventListener('keydown', showAddIngredientButton)
+    })
+    // onclick for add button
+    document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
+
+    // Enter key navigation for ingredient fields
+    ingredientFields[0].addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+            ingredientFields[1].focus() // Move from qty to unit
+        }
+    })
+    
+    ingredientFields[1].addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+            ingredientFields[2].focus() // Move from unit to name
+        }
+    })
+    
+    // for pressing enter to add ingredient (on the last field)
+    ingredientFields[2].addEventListener('keydown', e => {if (e.key === 'Enter') addIngredient()} )
+    
+    // Initial check for button state
+    showAddIngredientButton()
+    showAddStepButton()
+
+    // Steps
+    stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
+    stepAddButton.addEventListener('click', addStep)
+});
+
+// - ADD
+function addIngredient() {
+    const ing = {
+        qty: ingredientFields[0].value,
+        unit: ingredientFields[1].value,
+        name: ingredientFields[2].value
+    }
+
+    ingredients.push(ing)
+    
+    const newRow = document.createElement('tr')
+    newRow.innerHTML = `
+        <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
+        <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
+        <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
+    `
+    
+    // Add row to table and clear fields
+    ingredientTable.appendChild(newRow)
+    ingredientFields.forEach(f => f.value = '')
+    ingredientAddButton.disabled = true // Hide Add Ingredient button
+    // move cursor to Qty field again
+    ingredientFields[0].focus()
+}
+
+function addStep() {
+    const step = {
+        index: currentStepIndex++,
+        instruction: stepInput.value,
+        ingredients: []
+    }
+
+    steps.push(step)
+    renderSteps()
+    stepInput.value = ''
+    stepAddButton.disabled = true
+    stepInput.focus()
+}
+
+function renderSteps() {
+    // clear the step list
+    stepList.innerHTML = ''
+    
+    // re-render all steps in their current order
+    steps.forEach((step, displayIndex) => {
+        const newStep = document.createElement('div')
+        // times like this i regret using astro
+        newStep.innerHTML = `
+            <div class="flex justify-between items-start ">
+                <div class="flex flex-col">
+                    <p class="text-bold text-[10pt]">Step ${displayIndex + 1}</p>
+                    <div class="flex flex-col md:flex-row md:items-stretch">
+                        <p class="w-full md:flex-2/3 pr-1 text-left">${step.instruction}</p>
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-1">
+                    <button id="move-up-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === 0 ? 'disabled' : ''}>↑</button>
+                    
+                    <button id="move-down-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === steps.length - 1 ? 'disabled' : ''}>↓</button>
+                </div>
+            </div>
+        `
+        newStep.id = `step-${step.index}`
+        newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
+        stepList.appendChild(newStep)
+    })
+    
+    // event listeners to reorder buttons
+    document.querySelectorAll('#move-up-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
+            moveStep(stepIndex, -1)
+        })
+    })
+    
+    document.querySelectorAll('#move-down-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
+            moveStep(stepIndex, 1)
+        })
+    })
+}
+
+// - UTILS
+function showAddIngredientButton() {
+    const hasQty = ingredientFields[0].value.trim().length > 0
+    const hasName = ingredientFields[2].value.trim().length > 0
+    
+    if (hasQty && hasName) {
+        ingredientAddButton.disabled = false
+    } else {
+        ingredientAddButton.disabled = true
+    }
+}
+
+function showAddStepButton() {
+    if (stepInput.value.trim().length > 0) {
+        stepAddButton.disabled = false
+    } else {
+        stepAddButton.disabled = true
+    }
+}
+
+// shift: the direction to move. should be +1 to move down or -1 to move up the list
+function moveStep(stepIndex: number, shift: number) {
+    // Find the step in the array
+    const currentStepArrayIndex = steps.findIndex(step => step.index === stepIndex)
+    
+    if (currentStepArrayIndex === -1) return // step not found
+    
+    const newIndex = currentStepArrayIndex + shift
+    
+    // check bounds
+    if (newIndex < 0 || newIndex >= steps.length) return
+    
+    // swap the steps in the array
+    const temp = steps[currentStepArrayIndex]
+    steps[currentStepArrayIndex] = steps[newIndex]
+    steps[newIndex] = temp
+    
+    // re-render the steps
+    renderSteps()
+}

src/styles/global.css

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

static/robots.txt

@@ -1,3 +0,0 @@
-# allow crawling everything by default
-User-agent: *
-Disallow:

svelte.config.js

@@ -1,12 +0,0 @@
-import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://svelte.dev/docs/kit/integrations
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-	kit: { adapter: adapter() }
-};
-
-export default config;

tsconfig.json

@@ -1,19 +1,16 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler"
-	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+			"@/components/*": ["src/components/*.astro"],
+			"@/layouts/*": ["src/layouts/*.astro"],
+			"@/script/*": ["src/script/*"],
+			"@/utils": ["src/utils/index.ts"],
+			"@/data/*": ["src/data/*"],
+			"@/site-config": ["src/site.config.ts"]
+		}
+  }
 }

vite.config.ts

@@ -1,7 +0,0 @@
-import tailwindcss from '@tailwindcss/vite';
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
-});