From c1910a71c66a94b93fa25377916223edb7497563 Mon Sep 17 00:00:00 2001 From: june Date: Tue, 12 Aug 2025 23:39:33 +1200 Subject: [PATCH] [PIE-6] Add first (non-final) (temporary-ish) stylings (#5) this was a doozy. Co-authored-by: june Co-committed-by: june --- .env.example | 2 +- .gitignore | 2 +- Dockerfile | 4 +- api/docker-entrypoint.sh | 1 + .../1754995770_created_images.js | 71 ++++++++++ .../1754995772_created_recipes.js | 122 ++++++++++++++++++ .../1754995890_updated_recipes.js | 28 ++++ .../1754995898_updated_images.js | 28 ++++ .../1754996268_updated_recipes.js | 40 ++++++ api/pb_migrations/1754996900_created_tags.js | 71 ++++++++++ .../1754996921_updated_recipes.js | 28 ++++ api/pb_migrations/1754997089_updated_tags.js | 28 ++++ astro.config.mjs | 17 ++- docker-compose.yml | 7 +- package.json | 2 +- src/components/Card/OverviewCard.astro | 27 ++++ src/components/Header.astro | 13 ++ src/data/pocketbase.ts | 5 +- src/layouts/base.astro | 2 + src/pages/index.astro | 26 ++-- src/styles/global.css | 5 +- 21 files changed, 507 insertions(+), 22 deletions(-) create mode 100644 api/pb_migrations/1754995770_created_images.js create mode 100644 api/pb_migrations/1754995772_created_recipes.js create mode 100644 api/pb_migrations/1754995890_updated_recipes.js create mode 100644 api/pb_migrations/1754995898_updated_images.js create mode 100644 api/pb_migrations/1754996268_updated_recipes.js create mode 100644 api/pb_migrations/1754996900_created_tags.js create mode 100644 api/pb_migrations/1754996921_updated_recipes.js create mode 100644 api/pb_migrations/1754997089_updated_tags.js create mode 100644 src/components/Card/OverviewCard.astro create mode 100644 src/components/Header.astro diff --git a/.env.example b/.env.example index a30a595..6a7ab76 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,4 @@ PB_ADMIN_EMAIL=admin@example.com PB_ADMIN_PASSWORD=secret-password -PUBLIC_PB_URL=http://pb:8080 +PUBLIC_URL=http://your.domain.tld/ PB_DATA_DIR=/pb/pb_data \ No newline at end of file diff --git a/.gitignore b/.gitignore index 8d5314c..df98fe6 100644 --- a/.gitignore +++ b/.gitignore @@ -9,7 +9,7 @@ node_modules /dist /build /data - +/api/pb_data # OS .DS_Store Thumbs.db diff --git a/Dockerfile b/Dockerfile index cc5c2e7..bc92931 100644 --- a/Dockerfile +++ b/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 4321 -CMD ["npm", "run", "preview", "--", "--host"] +CMD ["npm", "run", "dev", "--", "--host"] +# CMD [ "node", "dist/sever/entry.mjs"] diff --git a/api/docker-entrypoint.sh b/api/docker-entrypoint.sh index d12a826..53334c0 100644 --- a/api/docker-entrypoint.sh +++ b/api/docker-entrypoint.sh @@ -12,6 +12,7 @@ set -e # if there are no users yet, create the superuser # we check the sqlite file for any existing record in the users table +/pb/pocketbase superuser create "${PB_ADMIN_EMAIL}" "${PB_ADMIN_PASSWORD}" if [ ! -f "${PB_DATA_DIR}/pb_data.db" ] \ ! sqlite3 "${PB_DATA_DIR}/data.db" \ "SELECT id FROM _superusers WHERE email='${PB_ADMIN_EMAIL}' LIMIT 1;" \ diff --git a/api/pb_migrations/1754995770_created_images.js b/api/pb_migrations/1754995770_created_images.js new file mode 100644 index 0000000..b073c9a --- /dev/null +++ b/api/pb_migrations/1754995770_created_images.js @@ -0,0 +1,71 @@ +/// +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); +}) diff --git a/api/pb_migrations/1754995772_created_recipes.js b/api/pb_migrations/1754995772_created_recipes.js new file mode 100644 index 0000000..0900784 --- /dev/null +++ b/api/pb_migrations/1754995772_created_recipes.js @@ -0,0 +1,122 @@ +/// +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); +}) diff --git a/api/pb_migrations/1754995890_updated_recipes.js b/api/pb_migrations/1754995890_updated_recipes.js new file mode 100644 index 0000000..70643c7 --- /dev/null +++ b/api/pb_migrations/1754995890_updated_recipes.js @@ -0,0 +1,28 @@ +/// +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) +}) diff --git a/api/pb_migrations/1754995898_updated_images.js b/api/pb_migrations/1754995898_updated_images.js new file mode 100644 index 0000000..f08c83d --- /dev/null +++ b/api/pb_migrations/1754995898_updated_images.js @@ -0,0 +1,28 @@ +/// +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) +}) diff --git a/api/pb_migrations/1754996268_updated_recipes.js b/api/pb_migrations/1754996268_updated_recipes.js new file mode 100644 index 0000000..d98cda1 --- /dev/null +++ b/api/pb_migrations/1754996268_updated_recipes.js @@ -0,0 +1,40 @@ +/// +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) +}) diff --git a/api/pb_migrations/1754996900_created_tags.js b/api/pb_migrations/1754996900_created_tags.js new file mode 100644 index 0000000..a94197e --- /dev/null +++ b/api/pb_migrations/1754996900_created_tags.js @@ -0,0 +1,71 @@ +/// +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); +}) diff --git a/api/pb_migrations/1754996921_updated_recipes.js b/api/pb_migrations/1754996921_updated_recipes.js new file mode 100644 index 0000000..e66c6ef --- /dev/null +++ b/api/pb_migrations/1754996921_updated_recipes.js @@ -0,0 +1,28 @@ +/// +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) +}) diff --git a/api/pb_migrations/1754997089_updated_tags.js b/api/pb_migrations/1754997089_updated_tags.js new file mode 100644 index 0000000..17fd1ad --- /dev/null +++ b/api/pb_migrations/1754997089_updated_tags.js @@ -0,0 +1,28 @@ +/// +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) +}) diff --git a/astro.config.mjs b/astro.config.mjs index 6d3c92c..60f2bfa 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -5,6 +5,10 @@ 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', @@ -14,6 +18,17 @@ export default defineConfig({ }), vite: { - plugins: [tailwindcss()] + plugins: [tailwindcss()], + server: { + proxy: { + // The idea is to proxy the Pocketbase connection to the current domain so the user doesn't have to open two ports + // Currently works in dev (npm run dev -- --host) with the correct PUBLIC_URL var set but not through docker + '/api': { + target: PUBLIC_PB_URL, + changeOrigin: true, + rewrite: (path) => path.replace(/^\/api/, '/api'), + }, + } + } } }); \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 45e6b62..a3d4d3b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,6 +2,7 @@ services: web: build: . env_file: .env + network_mode: host ports: - "4321:4321" @@ -9,8 +10,8 @@ services: 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" \ No newline at end of file diff --git a/package.json b/package.json index 7c2304a..773c395 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "type": "module", "version": "0.0.1", "scripts": { - "dev": "astro dev", + "dev": "docker compose up pb -d; astro dev --host", "build": "astro build", "preview": "astro preview", "astro": "astro" diff --git a/src/components/Card/OverviewCard.astro b/src/components/Card/OverviewCard.astro new file mode 100644 index 0000000..84f2b0d --- /dev/null +++ b/src/components/Card/OverviewCard.astro @@ -0,0 +1,27 @@ +--- +import client from "@/data/pocketbase" +const { recipe } = Astro.props; + +const headerImage = await client.collection("images").getOne(recipe.images[0]) +const image = await client.files.getURL(headerImage, headerImage.image) +--- + +
+ + +
+

{recipe.name}

+

{recipe.description}

+ +
+ {recipe.tags.map(async tag => ( +

{ + (await client.collection("tags").getOne(tag)).name + }

+ ))} +
+
+
\ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro new file mode 100644 index 0000000..c582951 --- /dev/null +++ b/src/components/Header.astro @@ -0,0 +1,13 @@ + +
+ +

Reci

+

pie

+ 🥧 + + +
+ +
+
\ No newline at end of file diff --git a/src/data/pocketbase.ts b/src/data/pocketbase.ts index 10a2a1b..0b05826 100644 --- a/src/data/pocketbase.ts +++ b/src/data/pocketbase.ts @@ -1,4 +1,5 @@ import Pocketbase from "pocketbase" -export const client = new Pocketbase(import.meta.env.PUBLIC_PB_URL) -// export const client = new Pocketbase("http://localhost:8080") \ No newline at end of file +const client = new Pocketbase(import.meta.env.PUBLIC_URL) +client.autoCancellation(false) +export default client; \ No newline at end of file diff --git a/src/layouts/base.astro b/src/layouts/base.astro index 8ab02cb..42a0407 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -1,5 +1,6 @@ --- import BaseHead from "../components/BaseHead.astro"; +import Header from "@/components/Header"; --- @@ -8,6 +9,7 @@ import BaseHead from "../components/BaseHead.astro";
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index dcdb6d2..906caf3 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,16 +1,22 @@ --- import PageLayout from "@/layouts/base" -import { client } from "@/data/pocketbase" +import client from "@/data/pocketbase" +import OverviewCard from "@/components/Card/OverviewCard" -const reccies = await client.collection("recipes").getFullList() +const recipies = await client.collection("recipes").getFullList() --- - -

Recipie

- - { - reccies.map(rec => ( -

{rec.name}

- )) - } + +
+ + +
+ { + recipies.map(r => ( + + )) + } +
+
+ diff --git a/src/styles/global.css b/src/styles/global.css index 3330e7e..bebe217 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,6 +1,7 @@ @import "tailwindcss"; html { - @apply bg-[#fefefe]; - @apply p-5; + /* @apply bg-[#1d1f21]; */ + @apply bg-[#fafafa]; + @apply font-stretch-condensed; } \ No newline at end of file