Compare commits
1 Commits
main
...
08ae9ee79e
| Author | SHA1 | Date | |
|---|---|---|---|
08ae9ee79e
|
@@ -1,27 +0,0 @@
|
|||||||
# Node modules
|
|
||||||
node_modules
|
|
||||||
|
|
||||||
# Build output
|
|
||||||
build
|
|
||||||
dist
|
|
||||||
.svelte-kit
|
|
||||||
|
|
||||||
# Logs
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
|
|
||||||
# Environment files
|
|
||||||
.env
|
|
||||||
.env.*
|
|
||||||
|
|
||||||
# OS generated files
|
|
||||||
.DS_Store
|
|
||||||
Thumbs.db
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode
|
|
||||||
.idea
|
|
||||||
*.swp
|
|
||||||
*.swo
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
PB_ADMIN_EMAIL=admin@example.com
|
|
||||||
PB_ADMIN_PASSWORD=secret-password
|
|
||||||
PUBLIC_URL=http://your.domain.tld/
|
|
||||||
PB_DATA_DIR=/pb/pb_data
|
|
||||||
7
.gitignore
vendored
7
.gitignore
vendored
@@ -5,11 +5,9 @@ node_modules
|
|||||||
.vercel
|
.vercel
|
||||||
.netlify
|
.netlify
|
||||||
.wrangler
|
.wrangler
|
||||||
/.astro
|
/.svelte-kit
|
||||||
/dist
|
|
||||||
/build
|
/build
|
||||||
/data
|
|
||||||
/api/pb_data
|
|
||||||
# OS
|
# OS
|
||||||
.DS_Store
|
.DS_Store
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
@@ -19,7 +17,6 @@ Thumbs.db
|
|||||||
.env.*
|
.env.*
|
||||||
!.env.example
|
!.env.example
|
||||||
!.env.test
|
!.env.test
|
||||||
Makefile
|
|
||||||
|
|
||||||
# Vite
|
# Vite
|
||||||
vite.config.js.timestamp-*
|
vite.config.js.timestamp-*
|
||||||
|
|||||||
9
.prettierignore
Normal file
9
.prettierignore
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
# Package Managers
|
||||||
|
package-lock.json
|
||||||
|
pnpm-lock.yaml
|
||||||
|
yarn.lock
|
||||||
|
bun.lock
|
||||||
|
bun.lockb
|
||||||
|
|
||||||
|
# Miscellaneous
|
||||||
|
/static/
|
||||||
19
.prettierrc
Normal file
19
.prettierrc
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"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"
|
||||||
|
}
|
||||||
13
Dockerfile
13
Dockerfile
@@ -1,13 +0,0 @@
|
|||||||
FROM node:24-alpine
|
|
||||||
WORKDIR /app
|
|
||||||
COPY package*.json ./
|
|
||||||
RUN npm i
|
|
||||||
COPY . .
|
|
||||||
ENV PUBLIC_PB_URL=http://pb:8080
|
|
||||||
ENV PUBLIC_URL=http://localhost:4321
|
|
||||||
|
|
||||||
RUN npm run build
|
|
||||||
|
|
||||||
EXPOSE 4321
|
|
||||||
# CMD ["npm", "run", "dev", "--", "--host"]
|
|
||||||
CMD [ "npm", "run", "preview", "--", "--host" ]
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
FROM alpine:latest
|
|
||||||
|
|
||||||
ARG PB_VERSION=0.29.2
|
|
||||||
|
|
||||||
WORKDIR /pb
|
|
||||||
|
|
||||||
RUN apk add --no-cache \
|
|
||||||
unzip \
|
|
||||||
curl \
|
|
||||||
ca-certificates \
|
|
||||||
bash
|
|
||||||
|
|
||||||
# download and unzip PocketBase
|
|
||||||
ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
|
|
||||||
RUN unzip /tmp/pb.zip -d /pb/
|
|
||||||
|
|
||||||
# copy entrypoint
|
|
||||||
COPY docker-entrypoint.sh /usr/local/bin/
|
|
||||||
RUN chmod +x /usr/local/bin/docker-entrypoint.sh
|
|
||||||
|
|
||||||
VOLUME [ "/pb/pb_data", "/pb/pb_migrations", "/pb/pb_hooks" ]
|
|
||||||
|
|
||||||
EXPOSE 8080
|
|
||||||
|
|
||||||
ENTRYPOINT ["docker-entrypoint.sh"]
|
|
||||||
CMD ["serve", "--http=0.0.0.0:8080"]
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
set -e
|
|
||||||
|
|
||||||
# Required env-vars
|
|
||||||
: "${PB_ADMIN_EMAIL:?need PB_ADMIN_EMAIL}"
|
|
||||||
: "${PB_ADMIN_PASSWORD:?need PB_ADMIN_PASSWORD}"
|
|
||||||
: "${PB_DATA_DIR:?need PB_DATA_DIR}"
|
|
||||||
|
|
||||||
# ensure data dir exists (for embedded SQLite + migrations + files)
|
|
||||||
# mkdir -p "${PB_DATA_DIR}"
|
|
||||||
# export POCKETBASE_DATA_DIR="${PB_DATA_DIR}"
|
|
||||||
|
|
||||||
# if there are no users yet, create the superuser
|
|
||||||
# we check the sqlite file for any existing record in the users table
|
|
||||||
/pb/pocketbase superuser create "${PB_ADMIN_EMAIL}" "${PB_ADMIN_PASSWORD}"
|
|
||||||
if [ ! -f "${PB_DATA_DIR}/pb_data.db" ] \
|
|
||||||
! sqlite3 "${PB_DATA_DIR}/data.db" \
|
|
||||||
"SELECT id FROM _superusers WHERE email='${PB_ADMIN_EMAIL}' LIMIT 1;" \
|
|
||||||
| grep -q .; then
|
|
||||||
|
|
||||||
echo ">>> Creating PocketBase superuser: ${PB_ADMIN_EMAIL}"
|
|
||||||
/pb/pocketbase superuser create "${PB_ADMIN_EMAIL}" "${PB_ADMIN_PASSWORD}"
|
|
||||||
else
|
|
||||||
echo ">>> Superuser ${PB_ADMIN_EMAIL} already exists, skipping creation."
|
|
||||||
fi
|
|
||||||
|
|
||||||
# exec the real pocketbase binary with any passed arguments
|
|
||||||
exec /pb/pocketbase "$@"
|
|
||||||
@@ -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);
|
|
||||||
})
|
|
||||||
@@ -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);
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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);
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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);
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -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)
|
|
||||||
})
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
// @ts-check
|
|
||||||
import { defineConfig } from 'astro/config';
|
|
||||||
|
|
||||||
import node from '@astrojs/node';
|
|
||||||
|
|
||||||
import tailwindcss from '@tailwindcss/vite';
|
|
||||||
|
|
||||||
import { loadEnv } from "vite";
|
|
||||||
|
|
||||||
// https://astro.build/config
|
|
||||||
export default defineConfig({
|
|
||||||
output: 'server',
|
|
||||||
|
|
||||||
adapter: node({
|
|
||||||
mode: 'standalone'
|
|
||||||
}),
|
|
||||||
|
|
||||||
vite: {
|
|
||||||
plugins: [tailwindcss()],
|
|
||||||
server: {
|
|
||||||
cors: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
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"
|
|
||||||
4497
package-lock.json
generated
4497
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@@ -1,18 +1,32 @@
|
|||||||
{
|
{
|
||||||
"name": "astro-pb",
|
"name": "recipie",
|
||||||
"type": "module",
|
"private": true,
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "docker compose up pb -d; astro dev --host",
|
"dev": "vite dev",
|
||||||
"build": "astro build",
|
"build": "vite build",
|
||||||
"preview": "astro preview",
|
"preview": "vite preview",
|
||||||
"astro": "astro"
|
"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 ."
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"devDependencies": {
|
||||||
"@astrojs/node": "^9.4.0",
|
"@sveltejs/adapter-node": "^5.2.12",
|
||||||
"@tailwindcss/vite": "^4.1.11",
|
"@sveltejs/kit": "^2.22.0",
|
||||||
"astro": "^5.12.9",
|
"@sveltejs/vite-plugin-svelte": "^6.0.0",
|
||||||
"pocketbase": "^0.26.2",
|
"@tailwindcss/forms": "^0.5.9",
|
||||||
"tailwindcss": "^4.1.11"
|
"@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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 749 B |
3
src/app.css
Normal file
3
src/app.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
|
@plugin '@tailwindcss/forms';
|
||||||
|
@plugin '@tailwindcss/typography';
|
||||||
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
// 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 {};
|
||||||
11
src/app.html
Normal file
11
src/app.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!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>
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
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>
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
---
|
|
||||||
import client from "@/data/pocketbase"
|
|
||||||
import TagRow from "./TagRow.astro"
|
|
||||||
|
|
||||||
const { recipe } = Astro.props;
|
|
||||||
|
|
||||||
const image = (await client.getRecipeImages(recipe.id))[0]
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="relative z-0 flex h-50">
|
|
||||||
<img
|
|
||||||
class="w-full h-full object-cover rounded-xl"
|
|
||||||
src={ image }
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
|
|
||||||
<p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
|
|
||||||
<!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
|
|
||||||
|
|
||||||
<div id="tag-row" class="">
|
|
||||||
<TagRow tags={recipe.expand.tags}/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a id="link" href={`/recipe/${recipe.id}`} class="absolute inset-0 z-0">
|
|
||||||
<span class="block w-full h-full hover:bg-black/10 transition-colors">
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
---
|
|
||||||
const { tags } = Astro.props
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="">
|
|
||||||
{
|
|
||||||
(tags ?? []).map(tag => (
|
|
||||||
<a
|
|
||||||
href={`/tags/${tag.name}`}
|
|
||||||
class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30"
|
|
||||||
>
|
|
||||||
{tag.name}
|
|
||||||
</a>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
---
|
|
||||||
import client from "@/data/pocketbase";
|
|
||||||
const { class: className, recipe } = Astro.props
|
|
||||||
const links = await client.getRecipeImages(recipe as string)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<script>
|
|
||||||
let pos = 0;
|
|
||||||
const dataElement = document.getElementById('carousel-data');
|
|
||||||
const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
|
|
||||||
const cap = links.length - 1;
|
|
||||||
const img = document.getElementById('carousel-img') as HTMLImageElement;
|
|
||||||
|
|
||||||
if (cap == 0) {
|
|
||||||
const b0 = document.getElementById('dec-button')
|
|
||||||
const b1 = document.getElementById('inc-button')
|
|
||||||
|
|
||||||
b0!.hidden = true
|
|
||||||
b1!.hidden = true
|
|
||||||
}
|
|
||||||
|
|
||||||
function inc() {
|
|
||||||
pos = pos === cap ? 0 : pos + 1;
|
|
||||||
if (img) img.src = links[pos];
|
|
||||||
}
|
|
||||||
|
|
||||||
function dec() {
|
|
||||||
pos = pos === 0 ? cap : pos - 1;
|
|
||||||
if (img) img.src = links[pos];
|
|
||||||
}
|
|
||||||
|
|
||||||
// make functions globally accessible
|
|
||||||
(window as any).inc = inc;
|
|
||||||
(window as any).dec = dec;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class={className}>
|
|
||||||
<!-- Hidden element to pass server data to client -->
|
|
||||||
<div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
|
|
||||||
|
|
||||||
<div class="relative flex items-center w-full h-60">
|
|
||||||
<button id="dec-button" class="absolute left-2" onclick="dec()"><</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()">></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,40 +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;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatTimeMin(minutes) {
|
|
||||||
if (minutes === 0) return null
|
|
||||||
const h = Math.floor(minutes / 60);
|
|
||||||
const m = minutes % 60;
|
|
||||||
let result = "";
|
|
||||||
if (h > 0) result += `${h}h`;
|
|
||||||
if (m > 0) result += `${m}m`;
|
|
||||||
if (result === "") result = "0m";
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
const workTime = formatTimeMin(re.worktime)
|
|
||||||
const waitTime = formatTimeMin(re.waittime)
|
|
||||||
---
|
|
||||||
|
|
||||||
<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
|
|
||||||
<div class="flex pt-1 items-center">
|
|
||||||
{re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
|
|
||||||
{workTime && (<p class="border-r px-2">{workTime} Work</p>)}
|
|
||||||
{waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
|
|
||||||
{re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
|
|
||||||
</div>
|
|
||||||
<TagRow tags={re.expand.tags}/>
|
|
||||||
@@ -1,68 +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} {ing.unit} {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>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
---
|
|
||||||
import client from "@/data/pocketbase";
|
|
||||||
|
|
||||||
const { ingredients, class: className } = Astro.props;
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class={className}>
|
|
||||||
{ingredients.map(i => (
|
|
||||||
<div class="text-sm">
|
|
||||||
<p>• {i.quantity} {i.unit || " "} {i.name}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
---
|
|
||||||
import { record } from "astro:schema"
|
|
||||||
import client from "@/data/pocketbase"
|
|
||||||
import StepIngredientSideView from "./StepIngredientSideView.astro"
|
|
||||||
|
|
||||||
const { steps, class: className } = Astro.props
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class={className}>
|
|
||||||
<p class="text-[22pt] font-bold md:hidden">Steps</p>
|
|
||||||
{ steps.map(s => (
|
|
||||||
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
|
|
||||||
<p class="text-bold text-[10pt]">Step {s.index + 1}</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col md:flex-row md:items-stretch">
|
|
||||||
<p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
|
|
||||||
{s.ingredients && s.ingredients.length > 0 && (
|
|
||||||
<div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
|
|
||||||
<StepIngredientSideView class="text-left" ingredients={s.expand.ingredients} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)) }
|
|
||||||
</div>
|
|
||||||
@@ -1,15 +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 class="hover:underline underline-offset-4" href="/recipe/new">new</a>
|
|
||||||
<a class="hover:underline underline-offset-4" href="/recipe/import">add</a>
|
|
||||||
<!-- <a class="hover:underline underline-offset-4" href="/tags">tags</a> -->
|
|
||||||
<a class="hover:underline underline-offset-4" >search</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
import Pocketbase, { type RecordListOptions } from "pocketbase"
|
|
||||||
import {
|
|
||||||
type Recipe,
|
|
||||||
type Ingredient,
|
|
||||||
type Step,
|
|
||||||
type Tag,
|
|
||||||
Collection
|
|
||||||
} from './schema'
|
|
||||||
|
|
||||||
class APIClient {
|
|
||||||
pb: Pocketbase
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.pb = new Pocketbase("http://localhost:4321")
|
|
||||||
this.pb.autoCancellation(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) {
|
|
||||||
return await this.pb.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
|
|
||||||
}
|
|
||||||
|
|
||||||
async getAllRecipes() {
|
|
||||||
return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' })
|
|
||||||
}
|
|
||||||
|
|
||||||
async getRecipe(id: string) {
|
|
||||||
return await this.pb.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' })
|
|
||||||
}
|
|
||||||
|
|
||||||
// IMAGE
|
|
||||||
async getImageURL(imgID: string, relative: boolean = true) {
|
|
||||||
const record = await this.pb.collection(Collection.IMAGES).getOne(imgID)
|
|
||||||
const res = this.pb.files.getURL(record, record.image)
|
|
||||||
return relative ? res.substring(21) : res
|
|
||||||
}
|
|
||||||
|
|
||||||
async getRecipeImages(recipeID: string) {
|
|
||||||
const re = await this.getRecipe(recipeID)
|
|
||||||
const imgIDs = re.images ?? []
|
|
||||||
|
|
||||||
const urls = Promise.all(
|
|
||||||
imgIDs.map(img => this.getImageURL(img))
|
|
||||||
)
|
|
||||||
return urls
|
|
||||||
}
|
|
||||||
|
|
||||||
async getAllTags() {
|
|
||||||
return await this.pb.collection<Tag>(Collection.TAGS).getFullList()
|
|
||||||
}
|
|
||||||
|
|
||||||
async getTag(name: string) {
|
|
||||||
return await this.pb.collection<Tag>(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` })
|
|
||||||
}
|
|
||||||
|
|
||||||
async getRecipesOfTag(tagName: string) {
|
|
||||||
// get the tag id first
|
|
||||||
const tagResult = await this.getTag(tagName)
|
|
||||||
if (tagResult.items.length === 0) {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
const tag = tagResult.items[0]
|
|
||||||
|
|
||||||
return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({
|
|
||||||
filter: `tags ~ '${tag.id}'`,
|
|
||||||
expand: 'ingredients,tags,steps,images,steps.ingredients'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
const client = new APIClient()
|
|
||||||
export default client;
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
// Base PB type
|
|
||||||
export interface BaseRecord {
|
|
||||||
id: string,
|
|
||||||
created: string,
|
|
||||||
updated: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Ingredient extends BaseRecord {
|
|
||||||
quantity: string,
|
|
||||||
unit: string,
|
|
||||||
name: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Step extends BaseRecord {
|
|
||||||
index: number,
|
|
||||||
instruction: string,
|
|
||||||
ingredients?: Ingredient[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Tag extends BaseRecord {
|
|
||||||
name: string
|
|
||||||
}
|
|
||||||
|
|
||||||
// not sure Image is the best type cos it might be quite heavy to get all the fields every time but
|
|
||||||
// it is here in case it is (a good idea)
|
|
||||||
export interface Image extends BaseRecord {
|
|
||||||
id: string
|
|
||||||
filename: string
|
|
||||||
url?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Recipe extends BaseRecord {
|
|
||||||
name: string,
|
|
||||||
description?: string,
|
|
||||||
servings?: number,
|
|
||||||
images?: string[], // image IDs
|
|
||||||
ingredients: string[]
|
|
||||||
steps: string[],
|
|
||||||
tags?: string[]
|
|
||||||
|
|
||||||
expand: {
|
|
||||||
images?: Image[], // image IDs,
|
|
||||||
ingredients: Ingredient[]
|
|
||||||
steps: Step[],
|
|
||||||
tags?: Tag[]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Collection = {
|
|
||||||
RECIPES: 'recipes',
|
|
||||||
STEPS: 'steps',
|
|
||||||
INGREDIENTS: 'ingredients',
|
|
||||||
TAGS: 'tags',
|
|
||||||
IMAGES: 'images'
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
---
|
|
||||||
import BaseHead from "../components/BaseHead.astro";
|
|
||||||
import Header from "@/components/Header";
|
|
||||||
---
|
|
||||||
|
|
||||||
<html lang=en>
|
|
||||||
<head>
|
|
||||||
<BaseHead title="Recipie" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main id="main" class="flex-1">
|
|
||||||
<Header/>
|
|
||||||
<div class="px-3 mb-5 md:px-5 pt-2">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
1
src/lib/assets/favicon.svg
Normal file
1
src/lib/assets/favicon.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
// place files you want to import through the `$lib` alias in this folder.
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
import Base from "@/layouts/base";
|
|
||||||
---
|
|
||||||
|
|
||||||
<Base>
|
|
||||||
<div class="flex items-center justify-center text-3xl font-bold">
|
|
||||||
🥧 404 🥧
|
|
||||||
</div>
|
|
||||||
</Base>
|
|
||||||
@@ -1,19 +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 + requestUrl.search, proxyUrl);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ALL: APIRoute = async ({ request }) => {
|
|
||||||
const proxyUrl = getProxyUrl(request);
|
|
||||||
const response = await fetch(proxyUrl.href, request);
|
|
||||||
return new Response(response.body, {
|
|
||||||
status: response.status,
|
|
||||||
statusText: response.statusText,
|
|
||||||
headers: response.headers
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
import PageLayout from "@/layouts/base"
|
|
||||||
import client from "@/data/pocketbase"
|
|
||||||
import OverviewCard from "@/components/Card/OverviewCard"
|
|
||||||
|
|
||||||
const recipes = await client.getAllRecipes()
|
|
||||||
---
|
|
||||||
|
|
||||||
<PageLayout>
|
|
||||||
<!-- <p class="pb-2">What would you like today?</p> -->
|
|
||||||
|
|
||||||
<div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
|
||||||
{
|
|
||||||
recipes.map(r => (
|
|
||||||
<OverviewCard recipe={r} />
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</PageLayout>
|
|
||||||
@@ -1,34 +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.getRecipe(recipeid as string)
|
|
||||||
---
|
|
||||||
|
|
||||||
<SiteLayout>
|
|
||||||
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
|
|
||||||
<div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
|
|
||||||
<ImageCarousel class="w-full" recipe={recipeid} />
|
|
||||||
<p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
|
|
||||||
|
|
||||||
<!-- Details -->
|
|
||||||
<InfoView re={re} />
|
|
||||||
|
|
||||||
<p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
|
|
||||||
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients ?? []} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex mt-4 md:flex-2/3 w-full flex-col">
|
|
||||||
<!-- Steps -->
|
|
||||||
<StepView class="md:ml-3" steps={re.expand.steps ?? []} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</SiteLayout>
|
|
||||||
@@ -1,140 +0,0 @@
|
|||||||
---
|
|
||||||
import SiteLayout from "@/layouts/base";
|
|
||||||
|
|
||||||
const { recipeid } = Astro.params;
|
|
||||||
|
|
||||||
// Actually post the recipe with the stored variables
|
|
||||||
async function submitRecipe() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
---
|
|
||||||
<script src="@/script/newRecipe.ts"/>
|
|
||||||
|
|
||||||
<SiteLayout>
|
|
||||||
<div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
|
|
||||||
<div class="flex md:flex-1/3 flex-col sticky">
|
|
||||||
|
|
||||||
<div class="flex mb-2 items-center">
|
|
||||||
<p class="text-[28pt] mr-auto">New Recipe</p>
|
|
||||||
<button
|
|
||||||
id="btn-save"
|
|
||||||
class="px-1 w-15 h-9 bg-white/10 active:bg-white/20 transition-colors rounded-lg"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative">
|
|
||||||
<input
|
|
||||||
id="photo"
|
|
||||||
type="file"
|
|
||||||
accept="image/png,image/jpeg"
|
|
||||||
class="w-full bg-white/10 rounded-lg h-50
|
|
||||||
file:mr-4 file:py-2 file:px-4
|
|
||||||
file:rounded-lg file:border-0 file:hidden
|
|
||||||
before:content-['camera'] before:w-full before:h-full before:flex
|
|
||||||
before:items-center before:justify-center before:absolute
|
|
||||||
relative cursor-pointer
|
|
||||||
[&::-webkit-file-upload-button]:hidden"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Details -->
|
|
||||||
<textarea
|
|
||||||
id="rec-name"
|
|
||||||
rows="1"
|
|
||||||
placeholder="Name"
|
|
||||||
class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
|
|
||||||
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
|
||||||
/>
|
|
||||||
<textarea
|
|
||||||
id="rec-desc"
|
|
||||||
rows="3"
|
|
||||||
placeholder="Description"
|
|
||||||
class="text-sm italic leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden p-2"
|
|
||||||
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
|
||||||
/>
|
|
||||||
<!-- if it works :3 -->
|
|
||||||
|
|
||||||
<!-- Smaller details -->
|
|
||||||
<div class="flex mt-2 h-9 space-x-2">
|
|
||||||
<input
|
|
||||||
id="rec-servings"
|
|
||||||
type="number"
|
|
||||||
class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
|
|
||||||
placeholder="Servings"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
id="rec-worktime"
|
|
||||||
type="text"
|
|
||||||
class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
|
|
||||||
placeholder="Work Time"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
id="rec-waittime"
|
|
||||||
type="text"
|
|
||||||
class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
|
|
||||||
placeholder="Wait Time"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
id="rec-rating"
|
|
||||||
type="number"
|
|
||||||
class="bg-white/10 px-2 rounded-lg w-23 overflow-hidden"
|
|
||||||
placeholder="Rating"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-row align-middle items-center">
|
|
||||||
<p class="mt-4 text-[22pt] font-bold">Ingredients</p>
|
|
||||||
<button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
|
|
||||||
</div>
|
|
||||||
<table class={`table-fixed text-left bg-[#2a2b2c] rounded-lg w-full`}>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="px-4 py-2 w-18">Qty</th>
|
|
||||||
<th class="px-4 py-2 w-20">Unit</th>
|
|
||||||
<th class="px-4 py-2">Ingredient</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
|
|
||||||
<tr id="ingredient-input" class="">
|
|
||||||
<td class="px-2 py-1">
|
|
||||||
<input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
|
|
||||||
</td>
|
|
||||||
<td class="px-2 py-1">
|
|
||||||
<input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
|
|
||||||
</td>
|
|
||||||
<td class="px-2 py-1">
|
|
||||||
<!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
|
|
||||||
<input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex mt-4 md:mt-16 md:flex-2/3 w-full flex-col md:ml-3">
|
|
||||||
<!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
|
|
||||||
|
|
||||||
<!-- Steps -->
|
|
||||||
<p class="text-[22pt] font-bold md:hidden">Steps</p>
|
|
||||||
|
|
||||||
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
|
|
||||||
<!-- <p class="text-bold text-[10pt]">Step</p> -->
|
|
||||||
<textarea
|
|
||||||
id="new-instruction"
|
|
||||||
class="block bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
|
|
||||||
placeholder="New Step"
|
|
||||||
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
|
|
||||||
|
|
||||||
<ul id="step-list"></ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</SiteLayout>
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
import SiteLayout from "@/layouts/base";
|
|
||||||
import client from "@/data/pocketbase";
|
|
||||||
import OverviewCard from "@/components/Card/OverviewCard";
|
|
||||||
|
|
||||||
const { name } = Astro.params
|
|
||||||
const recipes = await client.getRecipesOfTag(name) // todo redir to 404 if not found
|
|
||||||
---
|
|
||||||
|
|
||||||
<SiteLayout>
|
|
||||||
<p class="text-xl pb-2">
|
|
||||||
{recipes.length} { recipes.length == 1 ? "Recipe" : "Recipes" } with: <code class="bg-white/10 p-1 text-sm rounded-lg" >{name}</code>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="grid md:gap-2 gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
|
|
||||||
{
|
|
||||||
recipes.map(r => (
|
|
||||||
<OverviewCard recipe={r} />
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</SiteLayout>
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
---
|
|
||||||
import client from "@/data/pocketbase";
|
|
||||||
import SiteLayout from "@/layouts/base";
|
|
||||||
|
|
||||||
const tags = await client.getAllTags()
|
|
||||||
|
|
||||||
const countsPerTag = await Promise.all(
|
|
||||||
tags.map(async t => (await client.getRecipesOfTag(t.name)).length)
|
|
||||||
)
|
|
||||||
---
|
|
||||||
|
|
||||||
<SiteLayout>
|
|
||||||
<p class="title pb-2">
|
|
||||||
{tags.length} Tags
|
|
||||||
</p>
|
|
||||||
{
|
|
||||||
(tags ?? []).map((t, i) => (
|
|
||||||
// <p>{t.name} -> {countsPerTag[i]} {countsPerTag[i] == 1 ? "Recipe" : "Recipes" } </p>
|
|
||||||
<a class="hover:underline" href={`/tags/${t.name}`}>
|
|
||||||
{t.name} ({countsPerTag[i]})
|
|
||||||
</a><br/>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</SiteLayout>
|
|
||||||
12
src/routes/+layout.svelte
Normal file
12
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<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?.()}
|
||||||
2
src/routes/+page.svelte
Normal file
2
src/routes/+page.svelte
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
<h1>Welcome to SvelteKit</h1>
|
||||||
|
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||||
@@ -1,227 +0,0 @@
|
|||||||
import client from "@/data/pocketbase"
|
|
||||||
|
|
||||||
let ingredientFields: HTMLInputElement[] = []
|
|
||||||
let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
|
|
||||||
let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
|
|
||||||
|
|
||||||
let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
|
|
||||||
let stepAddButton: HTMLButtonElement = document.querySelector('#add-step-btn')!
|
|
||||||
let stepList: HTMLUListElement = document.querySelector('#step-list')!
|
|
||||||
let currentStepIndex = 0
|
|
||||||
|
|
||||||
// - VARS
|
|
||||||
let ingredients: {quantity: string, unit: string, name: string}[] = []
|
|
||||||
let steps: {
|
|
||||||
index: number,
|
|
||||||
instruction: string,
|
|
||||||
ingredients: string[], // IDs of ingredient fields
|
|
||||||
}[] = []
|
|
||||||
|
|
||||||
const formFields = () => {
|
|
||||||
return {
|
|
||||||
name: (document.querySelector("#rec-name") as HTMLTextAreaElement).value ?? "",
|
|
||||||
description: (document.querySelector("#rec-desc") as HTMLTextAreaElement).value ?? "",
|
|
||||||
servings: (document.querySelector("#rec-servings") as HTMLInputElement).value ?? "",
|
|
||||||
worktime: (document.querySelector("#rec-worktime") as HTMLInputElement).value ?? "",
|
|
||||||
waittime: (document.querySelector("#rec-waittime") as HTMLInputElement).value ?? "",
|
|
||||||
rating: (document.querySelector("#rec-rating") as HTMLInputElement).value ?? "",
|
|
||||||
ings: ingredients,
|
|
||||||
stepList: steps
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// - INIT
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
|
|
||||||
ingredientFields.push(
|
|
||||||
document.querySelector('#ing-qty')!,
|
|
||||||
document.querySelector('#ing-unit')!,
|
|
||||||
document.querySelector('#ing-name')!
|
|
||||||
)
|
|
||||||
|
|
||||||
stepInput.addEventListener('input', showAddStepButton)
|
|
||||||
document.querySelector('#btn-save')?.addEventListener('click', addRecipe)
|
|
||||||
|
|
||||||
// show plus button once the user types in the text fields
|
|
||||||
ingredientFields.forEach(f => {
|
|
||||||
f.addEventListener('input', showAddIngredientButton)
|
|
||||||
f.addEventListener('keydown', showAddIngredientButton)
|
|
||||||
})
|
|
||||||
// onclick for add button
|
|
||||||
document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
|
|
||||||
|
|
||||||
// Enter key navigation for ingredient fields
|
|
||||||
ingredientFields[0].addEventListener('keydown', e => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
ingredientFields[1].focus() // Move from qty to unit
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
ingredientFields[1].addEventListener('keydown', e => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
ingredientFields[2].focus() // Move from unit to name
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// for pressing enter to add ingredient (on the last field)
|
|
||||||
ingredientFields[2].addEventListener('keydown', e => {if (e.key === 'Enter') addIngredient()} )
|
|
||||||
|
|
||||||
// Initial check for button state
|
|
||||||
showAddIngredientButton()
|
|
||||||
showAddStepButton()
|
|
||||||
|
|
||||||
// Steps
|
|
||||||
stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep() } )
|
|
||||||
stepAddButton.addEventListener('click', addStep)
|
|
||||||
});
|
|
||||||
|
|
||||||
// - ADD
|
|
||||||
async function addRecipe() {
|
|
||||||
const comps = formFields()
|
|
||||||
console.log(comps.ings)
|
|
||||||
|
|
||||||
const ingredientIDs = await Promise.all(
|
|
||||||
comps.ings.map(async it => (await client.pb.collection('ingredients').create(it)).id) // get the id of the returned record
|
|
||||||
)
|
|
||||||
|
|
||||||
const stepIDs = await Promise.all(
|
|
||||||
comps.stepList.map(async it => (await client.pb.collection('steps').create(it)).id)
|
|
||||||
)
|
|
||||||
|
|
||||||
const recipe = await client.pb.collection('recipes').create({
|
|
||||||
name: comps.name,
|
|
||||||
description: comps.description,
|
|
||||||
servings: comps.servings,
|
|
||||||
worktime: comps.worktime,
|
|
||||||
waittime: comps.waittime,
|
|
||||||
rating: comps.rating,
|
|
||||||
ingredients: ingredientIDs,
|
|
||||||
steps: stepIDs
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(recipe)
|
|
||||||
}
|
|
||||||
|
|
||||||
function addIngredient() {
|
|
||||||
const ing = {
|
|
||||||
quantity: ingredientFields[0].value,
|
|
||||||
unit: ingredientFields[1].value,
|
|
||||||
name: ingredientFields[2].value
|
|
||||||
}
|
|
||||||
|
|
||||||
ingredients.push(ing)
|
|
||||||
|
|
||||||
const newRow = document.createElement('tr')
|
|
||||||
newRow.innerHTML = `
|
|
||||||
<td class="px-4 py-2 border-t border-white/10">${ing.quantity}</td>
|
|
||||||
<td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
|
|
||||||
<td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
|
|
||||||
`
|
|
||||||
|
|
||||||
// Add row to table and clear fields
|
|
||||||
ingredientTable.appendChild(newRow)
|
|
||||||
ingredientFields.forEach(f => f.value = '')
|
|
||||||
ingredientAddButton.disabled = true // Hide Add Ingredient button
|
|
||||||
// move cursor to Qty field again
|
|
||||||
ingredientFields[0].focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
function addStep() {
|
|
||||||
const step = {
|
|
||||||
index: currentStepIndex++,
|
|
||||||
instruction: stepInput.value,
|
|
||||||
ingredients: []
|
|
||||||
}
|
|
||||||
|
|
||||||
steps.push(step)
|
|
||||||
renderSteps()
|
|
||||||
stepInput.value = ''
|
|
||||||
stepAddButton.disabled = true
|
|
||||||
stepInput.focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderSteps() {
|
|
||||||
// clear the step list
|
|
||||||
stepList.innerHTML = ''
|
|
||||||
|
|
||||||
// re-render all steps in their current order
|
|
||||||
steps.forEach((step, displayIndex) => {
|
|
||||||
const newStep = document.createElement('div')
|
|
||||||
// times like this i regret using astro
|
|
||||||
newStep.innerHTML = `
|
|
||||||
<div class="flex justify-between items-start ">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<p class="text-bold text-[10pt]">Step ${displayIndex + 1}</p>
|
|
||||||
<div class="flex flex-col md:flex-row md:items-stretch">
|
|
||||||
<p class="w-full md:flex-2/3 pr-1 text-left">${step.instruction}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<button id="move-up-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === 0 ? 'disabled' : ''}>↑</button>
|
|
||||||
|
|
||||||
<button id="move-down-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === steps.length - 1 ? 'disabled' : ''}>↓</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
newStep.id = `step-${step.index}`
|
|
||||||
newStep.className = "bg-[#2a2b2c] rounded-lg mb-2 p-3"
|
|
||||||
stepList.appendChild(newStep)
|
|
||||||
})
|
|
||||||
|
|
||||||
// event listeners to reorder buttons
|
|
||||||
document.querySelectorAll('#move-up-btn').forEach(btn => {
|
|
||||||
btn.addEventListener('click', (e) => {
|
|
||||||
const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
|
|
||||||
moveStep(stepIndex, -1)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
document.querySelectorAll('#move-down-btn').forEach(btn => {
|
|
||||||
btn.addEventListener('click', (e) => {
|
|
||||||
const stepIndex = parseInt((e.target as HTMLButtonElement).dataset.stepIndex!)
|
|
||||||
moveStep(stepIndex, 1)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// - UTILS
|
|
||||||
function showAddIngredientButton() {
|
|
||||||
const hasQty = ingredientFields[0].value.trim().length > 0
|
|
||||||
const hasName = ingredientFields[2].value.trim().length > 0
|
|
||||||
|
|
||||||
if (hasQty && hasName) {
|
|
||||||
ingredientAddButton.disabled = false
|
|
||||||
} else {
|
|
||||||
ingredientAddButton.disabled = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showAddStepButton() {
|
|
||||||
if (stepInput.value.trim().length > 0) {
|
|
||||||
stepAddButton.disabled = false
|
|
||||||
} else {
|
|
||||||
stepAddButton.disabled = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// shift: the direction to move. should be +1 to move down or -1 to move up the list
|
|
||||||
function moveStep(stepIndex: number, shift: number) {
|
|
||||||
// Find the step in the array
|
|
||||||
const currentStepArrayIndex = steps.findIndex(step => step.index === stepIndex)
|
|
||||||
|
|
||||||
if (currentStepArrayIndex === -1) return // step not found
|
|
||||||
|
|
||||||
const newIndex = currentStepArrayIndex + shift
|
|
||||||
|
|
||||||
// check bounds
|
|
||||||
if (newIndex < 0 || newIndex >= steps.length) return
|
|
||||||
|
|
||||||
// swap the steps in the array
|
|
||||||
const temp = steps[currentStepArrayIndex]
|
|
||||||
steps[currentStepArrayIndex] = steps[newIndex]
|
|
||||||
steps[newIndex] = temp
|
|
||||||
|
|
||||||
// re-render the steps
|
|
||||||
renderSteps()
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
@import "tailwindcss";
|
|
||||||
|
|
||||||
html {
|
|
||||||
@apply bg-[#1d1f21];
|
|
||||||
/* @apply bg-[#fafafa]; */
|
|
||||||
@apply text-white;
|
|
||||||
/* @apply font-; */
|
|
||||||
@apply font-sans;
|
|
||||||
/* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
@apply text-2xl;
|
|
||||||
}
|
|
||||||
3
static/robots.txt
Normal file
3
static/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# allow crawling everything by default
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
12
svelte.config.js
Normal file
12
svelte.config.js
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
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;
|
||||||
@@ -1,16 +1,19 @@
|
|||||||
{
|
{
|
||||||
"extends": "astro/tsconfigs/strict",
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
"include": [".astro/types.d.ts", "**/*"],
|
|
||||||
"exclude": ["dist"],
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": ".",
|
"allowJs": true,
|
||||||
"paths": {
|
"checkJs": true,
|
||||||
"@/components/*": ["src/components/*.astro"],
|
"esModuleInterop": true,
|
||||||
"@/layouts/*": ["src/layouts/*.astro"],
|
"forceConsistentCasingInFileNames": true,
|
||||||
"@/script/*": ["src/script/*"],
|
"resolveJsonModule": true,
|
||||||
"@/utils": ["src/utils/index.ts"],
|
"skipLibCheck": true,
|
||||||
"@/data/*": ["src/data/*"],
|
"sourceMap": true,
|
||||||
"@/site-config": ["src/site.config.ts"]
|
"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
|
||||||
}
|
}
|
||||||
|
|||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [tailwindcss(), sveltekit()]
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user