[PIE-6] Add first (non-final) (temporary-ish) stylings (#5)

this was a doozy.
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

@@ -9,7 +9,7 @@ node_modules
 /dist
 /build
 /data
-
+/api/pb_data
 # OS
 .DS_Store
 Thumbs.db

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"]

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

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

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
+      - ./api/pb_data:/pb/pb_data
-      - ./data/migrations:/pb/pb_migrations
+      - ./api/pb_migrations:/pb/pb_migrations
-      - ./data/hooks:/pb/pb_hooks
+      - ./api/pb_hooks:/pb/pb_hooks
     ports:
       - "8080:8080"

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"

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)
+---
+
+<div class="relative z-0 flex h-60">
+    <img
+        class="w-full h-full object-cover rounded-xl"
+        src={ image }
+    />
+
+    <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>
+        <p class="text-white text-[10pt]"> {recipe.description} </p>
+
+        <div class="flex flex-row">
+            {recipe.tags.map(async tag => (
+                <p class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md">{ 
+                    (await client.collection("tags").getOne(tag)).name
+                }</p>
+            ))}
+        </div>
+    </div>
+</div>

src/components/Header.astro

@@ -0,0 +1,13 @@
+
+<div class="flex w-full items-center bg-yellow-100 p-5">
+    <a class="flex" href="/">
+        <p class=" text-3xl">Reci</p>
+        <p class=" text-3xl text-amber-500">pie</p>
+        🥧
+    </a>
+
+    <div class="flex ml-10 space-x-5">
+        <!-- <span>new</span>
+        <span>sf</span> -->
+    </div>
+</div>

src/data/pocketbase.ts

@@ -1,4 +1,5 @@
 import Pocketbase from "pocketbase"
 
-export const client = new Pocketbase(import.meta.env.PUBLIC_PB_URL)
+const client = new Pocketbase(import.meta.env.PUBLIC_URL)
-// export const client = new Pocketbase("http://localhost:8080")
+client.autoCancellation(false)
+export default client;

src/layouts/base.astro

@@ -1,5 +1,6 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
+import Header from "@/components/Header";
 ---
 
 <html lang=en>
@@ -8,6 +9,7 @@ import BaseHead from "../components/BaseHead.astro";
 	</head>
 	<body>
 		<main id="main" class="flex-1">
+			<Header/>
 			<slot />
 		</main>
 	</body>

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()
 ---
 
 <PageLayout>	
-	<p class="text-3xl font-medium">Recipie</p>
+	<div id="content" class="p-5 pt-2">
+		<!-- <p class="pb-2">What would you like today?</p> -->
+
+		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+			{
+				recipies.map(r => (
+					<OverviewCard recipe={r} />
+				))
+			}
+		</div>
+	</div>
 
-	{
-		reccies.map(rec => (
-			<p>{rec.name}</p>
-		))
-	}
 </PageLayout>

src/styles/global.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 html {
-    @apply bg-[#fefefe];
+    /* @apply bg-[#1d1f21]; */
-    @apply p-5;
+    @apply bg-[#fafafa];
+    @apply font-stretch-condensed;
 }