Add some basic styling

Add proxy for easy external api access (DOCKER BROKEN!!)
2025-08-12 17:57:13 +12:00 · 2025-08-12 17:57:01 +12:00
36 changed files with 39 additions and 1083 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
 PB_ADMIN_EMAIL=admin@example.com
 PB_ADMIN_PASSWORD=secret-password
-PUBLIC_URL=http://your.domain.tld/
+PUBLIC_PB_URL=http://pb:8080
 PB_DATA_DIR=/pb/pb_data
--- a/.gitignore
+++ b/.gitignore
@@ -9,7 +9,7 @@ node_modules
 /dist
 /build
 /data
-/api/pb_data
+
 # OS
 .DS_Store
 Thumbs.db
--- a/4
+++ b/4
@@ -4,10 +4,8 @@ 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" ]
+CMD ["npm", "run", "preview", "--", "--host"]
--- a/Dockerfile.combined
+++ b/Dockerfile.combined
@@ -1,50 +0,0 @@
-# Multi-stage build combining both services
-
-# Stage 1: Build the Node.js/Astro application
-FROM node:24-alpine AS app-builder
-WORKDIR /app
-COPY package*.json ./
-RUN npm i
-COPY . .
-ENV PUBLIC_PB_URL=http://localhost:8080
-ENV PUBLIC_URL=http://localhost:4321
-RUN npm run build
-
-ARG PB_VERSION=0.29.2
-
-WORKDIR /pb
-
-RUN apk add --no-cache \
-    unzip \
-    curl \
-    ca-certificates \
-    bash \
-    nodejs \
-    npm
-
-# Download and unzip PocketBase
-ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
-RUN unzip /tmp/pb.zip -d /pb/
-
-# Copy PocketBase entrypoint
-COPY api/docker-entrypoint.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh
-
-# # Set environment variables (keeping them as they are)
-# ENV PUBLIC_PB_URL=http://pb:8080
-# ENV PUBLIC_URL=http://localhost:4321
-
-VOLUME [ "/pb/pb_data", "/pb/pb_migrations", "/pb/pb_hooks" ]
-# VOLUME [ "/pb/pb_data" ]
-
-EXPOSE 8080 4321
-
-# Create a startup script that runs both services
-RUN echo '#!/bin/bash' > /usr/local/bin/start-services.sh && \
-    echo 'cd /pb && docker-entrypoint.sh serve --http=0.0.0.0:8080 &' >> /usr/local/bin/start-services.sh && \
-    echo 'cd /app && npm run preview -- --host &' >> /usr/local/bin/start-services.sh && \
-    echo 'wait' >> /usr/local/bin/start-services.sh && \
-    chmod +x /usr/local/bin/start-services.sh
-
-ENTRYPOINT ["start-services.sh"]
-
--- a/api/docker-entrypoint.sh
+++ b/api/docker-entrypoint.sh
@@ -12,7 +12,6 @@ set -e

 # if there are no users yet, create the superuser
 # we check the sqlite file for any existing record in the users table
-/pb/pocketbase superuser create "${PB_ADMIN_EMAIL}" "${PB_ADMIN_PASSWORD}"
 if [ ! -f "${PB_DATA_DIR}/pb_data.db" ] \
      ! sqlite3 "${PB_DATA_DIR}/data.db" \
       "SELECT id FROM _superusers WHERE email='${PB_ADMIN_EMAIL}' LIMIT 1;" \
--- a/api/pb_migrations/1754995770_created_images.js
+++ b/api/pb_migrations/1754995770_created_images.js
@@ -1,71 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = new Collection({
-    "createRule": null,
-    "deleteRule": null,
-    "fields": [
-      {
-        "autogeneratePattern": "[a-z0-9]{15}",
-        "hidden": false,
-        "id": "text3208210256",
-        "max": 15,
-        "min": 15,
-        "name": "id",
-        "pattern": "^[a-z0-9]+$",
-        "presentable": false,
-        "primaryKey": true,
-        "required": true,
-        "system": true,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "file3309110367",
-        "maxSelect": 1,
-        "maxSize": 0,
-        "mimeTypes": [],
-        "name": "image",
-        "presentable": false,
-        "protected": false,
-        "required": false,
-        "system": false,
-        "thumbs": [],
-        "type": "file"
-      },
-      {
-        "hidden": false,
-        "id": "autodate2990389176",
-        "name": "created",
-        "onCreate": true,
-        "onUpdate": false,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      },
-      {
-        "hidden": false,
-        "id": "autodate3332085495",
-        "name": "updated",
-        "onCreate": true,
-        "onUpdate": true,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      }
-    ],
-    "id": "pbc_3607937828",
-    "indexes": [],
-    "listRule": null,
-    "name": "images",
-    "system": false,
-    "type": "base",
-    "updateRule": null,
-    "viewRule": null
-  });
-
-  return app.save(collection);
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3607937828");
-
-  return app.delete(collection);
-})
--- a/api/pb_migrations/1754995772_created_recipes.js
+++ b/api/pb_migrations/1754995772_created_recipes.js
@@ -1,122 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = new Collection({
-    "createRule": null,
-    "deleteRule": null,
-    "fields": [
-      {
-        "autogeneratePattern": "[a-z0-9]{15}",
-        "hidden": false,
-        "id": "text3208210256",
-        "max": 15,
-        "min": 15,
-        "name": "id",
-        "pattern": "^[a-z0-9]+$",
-        "presentable": false,
-        "primaryKey": true,
-        "required": true,
-        "system": true,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text1579384326",
-        "max": 0,
-        "min": 0,
-        "name": "name",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text1843675174",
-        "max": 0,
-        "min": 0,
-        "name": "description",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "number1239158968",
-        "max": null,
-        "min": null,
-        "name": "servings",
-        "onlyInt": false,
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "number"
-      },
-      {
-        "hidden": false,
-        "id": "number3632866850",
-        "max": null,
-        "min": null,
-        "name": "rating",
-        "onlyInt": false,
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "number"
-      },
-      {
-        "cascadeDelete": false,
-        "collectionId": "pbc_3607937828",
-        "hidden": false,
-        "id": "relation3760176746",
-        "maxSelect": 1,
-        "minSelect": 0,
-        "name": "images",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "relation"
-      },
-      {
-        "hidden": false,
-        "id": "autodate2990389176",
-        "name": "created",
-        "onCreate": true,
-        "onUpdate": false,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      },
-      {
-        "hidden": false,
-        "id": "autodate3332085495",
-        "name": "updated",
-        "onCreate": true,
-        "onUpdate": true,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      }
-    ],
-    "id": "pbc_842702175",
-    "indexes": [],
-    "listRule": null,
-    "name": "recipes",
-    "system": false,
-    "type": "base",
-    "updateRule": null,
-    "viewRule": null
-  });
-
-  return app.save(collection);
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175");
-
-  return app.delete(collection);
-})
--- a/api/pb_migrations/1754995890_updated_recipes.js
+++ b/api/pb_migrations/1754995890_updated_recipes.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // update collection data
-  unmarshal({
-    "createRule": "",
-    "deleteRule": "",
-    "listRule": "",
-    "updateRule": "",
-    "viewRule": ""
-  }, collection)
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // update collection data
-  unmarshal({
-    "createRule": null,
-    "deleteRule": null,
-    "listRule": null,
-    "updateRule": null,
-    "viewRule": null
-  }, collection)
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1754995898_updated_images.js
+++ b/api/pb_migrations/1754995898_updated_images.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3607937828")
-
-  // update collection data
-  unmarshal({
-    "createRule": "",
-    "deleteRule": "",
-    "listRule": "",
-    "updateRule": "",
-    "viewRule": ""
-  }, collection)
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3607937828")
-
-  // update collection data
-  unmarshal({
-    "createRule": null,
-    "deleteRule": null,
-    "listRule": null,
-    "updateRule": null,
-    "viewRule": null
-  }, collection)
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1754996268_updated_recipes.js
+++ b/api/pb_migrations/1754996268_updated_recipes.js
@@ -1,40 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // update field
-  collection.fields.addAt(5, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_3607937828",
-    "hidden": false,
-    "id": "relation3760176746",
-    "maxSelect": 999,
-    "minSelect": 0,
-    "name": "images",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // update field
-  collection.fields.addAt(5, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_3607937828",
-    "hidden": false,
-    "id": "relation3760176746",
-    "maxSelect": 1,
-    "minSelect": 0,
-    "name": "images",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1754996900_created_tags.js
+++ b/api/pb_migrations/1754996900_created_tags.js
@@ -1,71 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = new Collection({
-    "createRule": null,
-    "deleteRule": null,
-    "fields": [
-      {
-        "autogeneratePattern": "[a-z0-9]{15}",
-        "hidden": false,
-        "id": "text3208210256",
-        "max": 15,
-        "min": 15,
-        "name": "id",
-        "pattern": "^[a-z0-9]+$",
-        "presentable": false,
-        "primaryKey": true,
-        "required": true,
-        "system": true,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text1579384326",
-        "max": 0,
-        "min": 0,
-        "name": "name",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "autodate2990389176",
-        "name": "created",
-        "onCreate": true,
-        "onUpdate": false,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      },
-      {
-        "hidden": false,
-        "id": "autodate3332085495",
-        "name": "updated",
-        "onCreate": true,
-        "onUpdate": true,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      }
-    ],
-    "id": "pbc_1219621782",
-    "indexes": [],
-    "listRule": null,
-    "name": "tags",
-    "system": false,
-    "type": "base",
-    "updateRule": null,
-    "viewRule": null
-  });
-
-  return app.save(collection);
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_1219621782");
-
-  return app.delete(collection);
-})
--- a/api/pb_migrations/1754996921_updated_recipes.js
+++ b/api/pb_migrations/1754996921_updated_recipes.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // add field
-  collection.fields.addAt(6, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_1219621782",
-    "hidden": false,
-    "id": "relation1874629670",
-    "maxSelect": 999,
-    "minSelect": 0,
-    "name": "tags",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // remove field
-  collection.fields.removeById("relation1874629670")
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1754997089_updated_tags.js
+++ b/api/pb_migrations/1754997089_updated_tags.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_1219621782")
-
-  // update collection data
-  unmarshal({
-    "createRule": "",
-    "deleteRule": "",
-    "listRule": "",
-    "updateRule": "",
-    "viewRule": ""
-  }, collection)
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_1219621782")
-
-  // update collection data
-  unmarshal({
-    "createRule": null,
-    "deleteRule": null,
-    "listRule": null,
-    "updateRule": null,
-    "viewRule": null
-  }, collection)
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1755039357_updated_steps.js
+++ b/api/pb_migrations/1755039357_updated_steps.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4284789913")
-
-  // remove field
-  collection.fields.removeById("relation3666391351")
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4284789913")
-
-  // add field
-  collection.fields.addAt(3, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_842702175",
-    "hidden": false,
-    "id": "relation3666391351",
-    "maxSelect": 1,
-    "minSelect": 0,
-    "name": "recipe",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1755041844_created_ingredients.js
+++ b/api/pb_migrations/1755041844_created_ingredients.js
@@ -1,97 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = new Collection({
-    "createRule": null,
-    "deleteRule": null,
-    "fields": [
-      {
-        "autogeneratePattern": "[a-z0-9]{15}",
-        "hidden": false,
-        "id": "text3208210256",
-        "max": 15,
-        "min": 15,
-        "name": "id",
-        "pattern": "^[a-z0-9]+$",
-        "presentable": false,
-        "primaryKey": true,
-        "required": true,
-        "system": true,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text1579384326",
-        "max": 0,
-        "min": 0,
-        "name": "name",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "number2683508278",
-        "max": null,
-        "min": null,
-        "name": "quantity",
-        "onlyInt": false,
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "number"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "text3703245907",
-        "max": 0,
-        "min": 0,
-        "name": "unit",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "autodate2990389176",
-        "name": "created",
-        "onCreate": true,
-        "onUpdate": false,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      },
-      {
-        "hidden": false,
-        "id": "autodate3332085495",
-        "name": "updated",
-        "onCreate": true,
-        "onUpdate": true,
-        "presentable": false,
-        "system": false,
-        "type": "autodate"
-      }
-    ],
-    "id": "pbc_3146854971",
-    "indexes": [],
-    "listRule": null,
-    "name": "ingredients",
-    "system": false,
-    "type": "base",
-    "updateRule": null,
-    "viewRule": null
-  });
-
-  return app.save(collection);
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3146854971");
-
-  return app.delete(collection);
-})
--- a/api/pb_migrations/1755041886_updated_recipes.js
+++ b/api/pb_migrations/1755041886_updated_recipes.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // add field
-  collection.fields.addAt(8, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_3146854971",
-    "hidden": false,
-    "id": "relation1264587087",
-    "maxSelect": 999,
-    "minSelect": 0,
-    "name": "ingredients",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // remove field
-  collection.fields.removeById("relation1264587087")
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1755042306_updated_ingredients.js
+++ b/api/pb_migrations/1755042306_updated_ingredients.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3146854971")
-
-  // update collection data
-  unmarshal({
-    "createRule": "",
-    "deleteRule": "",
-    "listRule": "",
-    "updateRule": "",
-    "viewRule": ""
-  }, collection)
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_3146854971")
-
-  // update collection data
-  unmarshal({
-    "createRule": null,
-    "deleteRule": null,
-    "listRule": null,
-    "updateRule": null,
-    "viewRule": null
-  }, collection)
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1755045585_updated_steps.js
+++ b/api/pb_migrations/1755045585_updated_steps.js
@@ -1,28 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4284789913")
-
-  // add field
-  collection.fields.addAt(3, new Field({
-    "cascadeDelete": false,
-    "collectionId": "pbc_3146854971",
-    "hidden": false,
-    "id": "relation1264587087",
-    "maxSelect": 999,
-    "minSelect": 0,
-    "name": "ingredients",
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "relation"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4284789913")
-
-  // remove field
-  collection.fields.removeById("relation1264587087")
-
-  return app.save(collection)
-})
--- a/api/pb_migrations/1755056714_updated_recipes.js
+++ b/api/pb_migrations/1755056714_updated_recipes.js
@@ -1,44 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // add field
-  collection.fields.addAt(9, new Field({
-    "hidden": false,
-    "id": "number1485952547",
-    "max": null,
-    "min": null,
-    "name": "worktime",
-    "onlyInt": true,
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "number"
-  }))
-
-  // add field
-  collection.fields.addAt(10, new Field({
-    "hidden": false,
-    "id": "number2198822773",
-    "max": null,
-    "min": null,
-    "name": "waittime",
-    "onlyInt": true,
-    "presentable": false,
-    "required": false,
-    "system": false,
-    "type": "number"
-  }))
-
-  return app.save(collection)
-}, (app) => {
-  const collection = app.findCollectionByNameOrId("pbc_842702175")
-
-  // remove field
-  collection.fields.removeById("number1485952547")
-
-  // remove field
-  collection.fields.removeById("number2198822773")
-
-  return app.save(collection)
-})
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,10 +5,6 @@ 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',
@@ -19,5 +15,14 @@ export default defineConfig({

  vite: {
    plugins: [tailwindcss()],
+    server: {
+      proxy: {
+        '/api': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '/api'),
+        },
+      }
+    }
  }
 });
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,30 +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"
-
 services:
-  recipie:
-    build: 
-      context: .
-      dockerfile: Dockerfile.combined
+  web:
+    build: .
    env_file: .env
    ports:
      - "4321:4321"
-      - "8080:8080" # optional, for manual pocketbase access
+
+  pb:
+    build: api
+    env_file: .env
    volumes:
-      - ./api/pb_data:/pb/pb_data
-      - ./api/pb_migrations:/pb/pb_migrations
-      - ./api/pb_hooks:/pb/pb_hooks
+      - ./data/data:/pb/pb_data
+      - ./data/migrations:/pb/pb_migrations
+      - ./data/hooks:/pb/pb_hooks
+    ports:
+      - "8080:8080"
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
  "type": "module",
  "version": "0.0.1",
  "scripts": {
-    "dev": "docker compose up pb -d; astro dev --host",
+    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
--- a/src/components/Card/OverviewCard.astro
+++ b/src/components/Card/OverviewCard.astro
@@ -1,31 +1,18 @@
 ---
 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)
+const image = await client.files.getURL(headerImage, headerImage.image)
 ---

-<div class="relative z-0 flex h-50">
+<div class="relative z-0 flex h-60">
    <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 class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
+        <p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
    </div>
-
-    <a id="link" href={`/recipe/${recipe.id}`} class="absolute inset-0 z-0">
-        <span class="block w-full h-full hover:bg-black/10 transition-colors">
-        </span>
-    </a>
-    
 </div>
--- a/src/components/Card/TagRow.astro
+++ b/src/components/Card/TagRow.astro
@@ -1,33 +0,0 @@
---
-import client from "../../data/pocketbase"
-
-interface Props {
-    tagIds: string[]
-}
-
-const { tagIds } = Astro.props
-
-const tags = tagIds && tagIds.length > 0 
-    ? await Promise.all(tagIds.map(async (tagId: string) => {
-        try {
-            const tagData = await client.collection("tags").getOne(tagId)
-            return { name: tagData.name, id: tagId }
-        } catch (error) {
-            return null
-        }
-      }))
-    : []
---
-
-<div class="">
-    {
-        tags.map(tag => (
-            <a 
-                href={`/tag/${tag.id}`}
-                class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 
-            >
-                {tag.name}
-            </a>
-        ))
-    }
-</div>
--- a/src/components/Detail/ImageCarousel.astro
+++ b/src/components/Detail/ImageCarousel.astro
@@ -1,58 +0,0 @@
---
-import client from "@/data/pocketbase";
-const { class: className, recipe } = Astro.props
-
-async function getLink(img: string) {
-    const record = await client.collection("images").getOne(img)
-    const link = await client.files.getRelativeURL(record, record.image)
-    return link
-}
-
-// Use Promise.all to wait for all async operations to complete
-const links = await Promise.all(
-    recipe.images.map((img: string) => getLink(img))
-)
-
---
-
-<script>
-    let pos = 0;
-    const dataElement = document.getElementById('carousel-data');
-    const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
-    const cap = links.length - 1;
-    const img = document.getElementById('carousel-img') as HTMLImageElement;
-
-    if (cap == 0) {
-        const b0 = document.getElementById('dec-button')
-        const b1 = document.getElementById('inc-button')
-
-        b0!.hidden = true
-        b1!.hidden = true
-    }
-    
-    function inc() { 
-        pos = pos === cap ? 0 : pos + 1;
-        if (img) img.src = links[pos];
-    }
-    
-    function dec() { 
-        pos = pos === 0 ? cap : pos - 1;
-        if (img) img.src = links[pos];
-    }
-    
-    // make functions globally accessible
-    (window as any).inc = inc;
-    (window as any).dec = dec;
-</script>
-
-<div class={className}>
-    <!-- Hidden element to pass server data to client -->
-    <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
-    
-    <div class="relative flex items-center w-full h-60">
-        <button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
-        <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={links[0]} />
-        <!-- <div class="w-70 h-60 bg-green-600" /> -->
-        <button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button>
-    </div>
-</div>
--- a/src/components/Detail/InfoView.astro
+++ b/src/components/Detail/InfoView.astro
@@ -1,29 +0,0 @@
---
-import TagRow from "../Card/TagRow.astro";
-
-
-const { re } = Astro.props
-
-function formatTime(seconds) {
-    if (seconds === 0) return null
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    let result = "";
-    if (h > 0) result += `${h}h`;
-    if (m > 0) result += `${m}m`;
-    if (result === "") result = "0m";
-    return result;
-}
-
-const workTime = formatTime(re.worktime)
-const waitTime = formatTime(re.waittime)
---
-
-<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
-<div class="flex pt-1 items-center">
-    {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
-    {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
-    {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
-    {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
-</div>
-<TagRow tagIds={re.tags}/>
--- a/src/components/Detail/IngredientTableView.astro
+++ b/src/components/Detail/IngredientTableView.astro
@@ -1,44 +0,0 @@
---
-// const { ingredients } = Astro.props
-
-const { class: className, ingredients } = Astro.props
-const tableView = true
---
-
-{!tableView && (
-    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
-    {
-        ingredients.map(ing => (
-            <div class="text-white/70">
-                <p>• {ing.quantity}&nbsp;{ing.unit}&nbsp;{ing.name}</p>
-            </div>
-        ))
-    }
-
-    </div>
-)}
-
-{tableView && (
-    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
-        <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 => (
-                <>
-                    <tr class="border-t border-gray-600">
-                        <td class="px-4 py-2">{ing.quantity}</td>
-                        <td class="px-4 py-2">{ing.unit}</td>
-                        <td class="px-4 py-2">{ing.name}</td>
-                    </tr>
-                </>
-            ))
-            }
-        </tbody>
-    </table>
-)}
--- a/src/components/Detail/StepIngredientSideView.astro
+++ b/src/components/Detail/StepIngredientSideView.astro
@@ -1,17 +0,0 @@
---
-import client from "@/data/pocketbase";
-
-const { ingredients, class: className } = Astro.props;
-
-const ings = await Promise.all(
-    ingredients.map(async i => await client.collection("ingredients").getOne(i))
-)
---
-
-<div class={className}>
-    {ings.map(i => (
-        <div>
-            <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
-        </div>
-    ))}
-</div>
--- a/src/components/Detail/StepView.astro
+++ b/src/components/Detail/StepView.astro
@@ -1,25 +0,0 @@
---
-import { record } from "astro:schema"
-import client from "@/data/pocketbase"
-import StepIngredientSideView from "./StepIngredientSideView.astro"
-
-const { steps } = Astro.props
---
-
-<div class="md:ml-5 mt-2 md:mt-0">
-    <p class="text-[22pt] font-bold md:hidden">Steps</p>
-    { steps.map(s => (
-        <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
-            <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-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
-                        <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
-                    </div>
-                )}
-            </div>
-        </div>
-    )) }
-</div>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,14 +0,0 @@
-
-<div class="flex w-full items-center bg-[#2a2b2c] text-white p-5">
-    <a class="flex" href="/">
-        <p class="text-3xl">Recipie</p>
-        <!-- <p class=" text-3xl text-amber-500">pie</p> -->
-        🥧
-    </a>
-
-    <div class="ml-auto space-x-5">
-        <a>new</a>
-        <a>tags</a>
-        <a>search</a>
-    </div>
-</div>
--- a/src/data/pocketbase.ts
+++ b/src/data/pocketbase.ts
@@ -1,12 +1,5 @@
 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;
+const client = new Pocketbase(import.meta.env.PUBLIC_URL)
+export default client;
+// export const client = new Pocketbase("http://localhost:8080")
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -1,6 +1,5 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
-import Header from "@/components/Header";
 ---

 <html lang=en>
@@ -9,10 +8,7 @@ import Header from "@/components/Header";
 	</head>
 	<body>
 		<main id="main" class="flex-1">
-			<Header/>
-			<div class="px-3 md:px-5 pt-2">
-				<slot />
-			</div>
+			<slot />
 		</main>
 	</body>
 </html>
--- a/src/pages/api/[...proxy].ts
+++ b/src/pages/api/[...proxy].ts
@@ -1,16 +0,0 @@
-import type { APIRoute } from "astro";
-
-// THANK YOU https://stackoverflow.com/a/77297521 !!!!!!!
-
-const getProxyUrl = (request: Request) => {
-  const proxyUrl = new URL(import.meta.env.PUBLIC_PB_URL);
-  const requestUrl = new URL(request.url);
-
-  return new URL(requestUrl.pathname, proxyUrl);
-};
-
-export const ALL: APIRoute = async ({ request }) => {
-  const proxyUrl = getProxyUrl(request);
-  const response = await fetch(proxyUrl.href, request);
-  return new Response(response.body);
-};
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,10 +6,12 @@ import OverviewCard from "@/components/Card/OverviewCard"
 const recipies = await client.collection("recipes").getFullList()
 ---

-<PageLayout>	
-	<!-- <p class="pb-2">What would you like today?</p> -->
+<PageLayout>
+	<p class="text-3xl font-medium">Recipie</p>
+	
+	What would you like today?

-	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
+	<div class="grid md:gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
 		{
 			recipies.map(r => (
 				<OverviewCard recipe={r} />
--- a/src/pages/recipe/[recipeid].astro
+++ b/src/pages/recipe/[recipeid].astro
@@ -1,51 +0,0 @@
---
-import client from "@/data/pocketbase";
-import SiteLayout from "@/layouts/base";
-import ImageCarousel from "@/components/Detail/ImageCarousel";
-import IngredientTableView from "@/components/Detail/IngredientTableView";
-import StepView from "@/components/Detail/StepView";
-import InfoView from "@/components/Detail/InfoView";
-
-const { recipeid } = Astro.params;
-
-const re = await client.collection("recipes").getOne(recipeid ?? "0");
-
-const stepIds = re.steps
-
-let steps = await Promise.all(
-    stepIds.map(async s =>
-        await client.collection("steps").getOne(s)
-    )
-)
-
-steps = steps.sort((a, b) => a.index - b.index);
-
-const ingredients = await Promise.all(
-    re.ingredients.map(async s =>
-        await client.collection("ingredients").getOne(s)
-    )
-)
---
-
-<SiteLayout>
-    <div class="flex flex-col md:flex-row">
-        <div class="flex flex-col mt-2 md:mt-4 sticky">
-            <ImageCarousel class="w-full" recipe={re} />
-            <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
-
-            <!-- Details -->
-            <InfoView re={re} />
-
-            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
-        </div>
-        
-        <div class="flex w-full flex-col">
-            <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
-
-            <!-- Steps -->
-            <StepView steps={steps} />
-        </div>
-
-    </div>
-</SiteLayout>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,10 +1,6 @@
@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; */
+    @apply bg-white;
+    @apply p-5;
 }
Author	SHA1	Message	Date
june	7dfd583c7c	Add some basic styling	2025-08-12 17:57:13 +12:00
june	f51b811b55	Add proxy for easy external api access (DOCKER BROKEN!!)	2025-08-12 17:57:01 +12:00