Compare commits
4 Commits
PIE-9
...
4451c95bf7
| Author | SHA1 | Date | |
|---|---|---|---|
4451c95bf7
|
|||
|
5250d8c3b3
|
|||
|
eae36b8da5
|
|||
|
c25f95949b
|
@@ -9,5 +9,5 @@ ENV PUBLIC_URL=http://localhost:4321
|
||||
RUN npm run build
|
||||
|
||||
EXPOSE 4321
|
||||
# CMD ["npm", "run", "dev", "--", "--host"]
|
||||
CMD [ "npm", "run", "preview", "--", "--host" ]
|
||||
CMD ["npm", "run", "dev", "--", "--host"]
|
||||
# CMD [ "node", "dist/sever/entry.mjs"]
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
# Multi-stage build combining both services
|
||||
|
||||
# Stage 1: Build the Node.js/Astro application
|
||||
FROM node:24-alpine AS app-builder
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm i
|
||||
COPY . .
|
||||
ENV PUBLIC_PB_URL=http://localhost:8080
|
||||
ENV PUBLIC_URL=http://localhost:4321
|
||||
RUN npm run build
|
||||
|
||||
ARG PB_VERSION=0.29.2
|
||||
|
||||
WORKDIR /pb
|
||||
|
||||
RUN apk add --no-cache \
|
||||
unzip \
|
||||
curl \
|
||||
ca-certificates \
|
||||
bash \
|
||||
nodejs \
|
||||
npm
|
||||
|
||||
# Download and unzip PocketBase
|
||||
ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
|
||||
RUN unzip /tmp/pb.zip -d /pb/
|
||||
|
||||
# Copy PocketBase entrypoint
|
||||
COPY api/docker-entrypoint.sh /usr/local/bin/
|
||||
RUN chmod +x /usr/local/bin/docker-entrypoint.sh
|
||||
|
||||
# # Set environment variables (keeping them as they are)
|
||||
# ENV PUBLIC_PB_URL=http://pb:8080
|
||||
# ENV PUBLIC_URL=http://localhost:4321
|
||||
|
||||
VOLUME [ "/pb/pb_data", "/pb/pb_migrations", "/pb/pb_hooks" ]
|
||||
# VOLUME [ "/pb/pb_data" ]
|
||||
|
||||
EXPOSE 8080 4321
|
||||
|
||||
# Create a startup script that runs both services
|
||||
RUN echo '#!/bin/bash' > /usr/local/bin/start-services.sh && \
|
||||
echo 'cd /pb && docker-entrypoint.sh serve --http=0.0.0.0:8080 &' >> /usr/local/bin/start-services.sh && \
|
||||
echo 'cd /app && npm run preview -- --host &' >> /usr/local/bin/start-services.sh && \
|
||||
echo 'wait' >> /usr/local/bin/start-services.sh && \
|
||||
chmod +x /usr/local/bin/start-services.sh
|
||||
|
||||
ENTRYPOINT ["start-services.sh"]
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
@@ -19,5 +19,16 @@ export default defineConfig({
|
||||
|
||||
vite: {
|
||||
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'),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,30 +1,17 @@
|
||||
# services:
|
||||
# web:
|
||||
# build: .
|
||||
# env_file: .env
|
||||
# ports:
|
||||
# - "4321:4321"
|
||||
|
||||
# pb:
|
||||
# build: api
|
||||
# env_file: .env
|
||||
# volumes:
|
||||
# - ./api/pb_data:/pb/pb_data
|
||||
# - ./api/pb_migrations:/pb/pb_migrations
|
||||
# - ./api/pb_hooks:/pb/pb_hooks
|
||||
# ports:
|
||||
# - "8080:8080"
|
||||
|
||||
services:
|
||||
recipie:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile.combined
|
||||
web:
|
||||
build: .
|
||||
env_file: .env
|
||||
network_mode: host
|
||||
ports:
|
||||
- "4321:4321"
|
||||
- "8080:8080" # optional, for manual pocketbase access
|
||||
|
||||
pb:
|
||||
build: api
|
||||
env_file: .env
|
||||
volumes:
|
||||
- ./api/pb_data:/pb/pb_data
|
||||
- ./api/pb_migrations:/pb/pb_migrations
|
||||
- ./api/pb_hooks:/pb/pb_hooks
|
||||
ports:
|
||||
- "8080:8080"
|
||||
@@ -5,18 +5,18 @@ import TagRow from "./TagRow.astro"
|
||||
const { recipe } = Astro.props;
|
||||
|
||||
const headerImage = await client.collection("images").getOne(recipe.images[0])
|
||||
const image = await client.files.getRelativeURL(headerImage, headerImage.image)
|
||||
const image = await client.files.getURL(headerImage, headerImage.image)
|
||||
---
|
||||
|
||||
<div class="relative z-0 flex h-50">
|
||||
<div class="relative z-0 flex h-60">
|
||||
<img
|
||||
class="w-full h-full object-cover rounded-xl"
|
||||
src={ image }
|
||||
/>
|
||||
|
||||
<div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
|
||||
<p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
|
||||
<!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
|
||||
<div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
|
||||
<p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
|
||||
<p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p>
|
||||
|
||||
<div id="tag-row" class="">
|
||||
<TagRow tagIds={recipe.tags}/>
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
import client from "@/data/pocketbase";
|
||||
const { class: className, recipe } = Astro.props
|
||||
|
||||
async function getLink(img: string) {
|
||||
const record = await client.collection("images").getOne(img)
|
||||
const link = await client.files.getRelativeURL(record, record.image)
|
||||
return link
|
||||
}
|
||||
|
||||
// Use Promise.all to wait for all async operations to complete
|
||||
const links = await Promise.all(
|
||||
recipe.images.map((img: string) => getLink(img))
|
||||
)
|
||||
|
||||
---
|
||||
|
||||
<script>
|
||||
let pos = 0;
|
||||
const dataElement = document.getElementById('carousel-data');
|
||||
const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
|
||||
const cap = links.length - 1;
|
||||
const img = document.getElementById('carousel-img') as HTMLImageElement;
|
||||
|
||||
if (cap == 0) {
|
||||
const b0 = document.getElementById('dec-button')
|
||||
const b1 = document.getElementById('inc-button')
|
||||
|
||||
b0!.hidden = true
|
||||
b1!.hidden = true
|
||||
}
|
||||
|
||||
function inc() {
|
||||
pos = pos === cap ? 0 : pos + 1;
|
||||
if (img) img.src = links[pos];
|
||||
}
|
||||
|
||||
function dec() {
|
||||
pos = pos === 0 ? cap : pos - 1;
|
||||
if (img) img.src = links[pos];
|
||||
}
|
||||
|
||||
// make functions globally accessible
|
||||
(window as any).inc = inc;
|
||||
(window as any).dec = dec;
|
||||
</script>
|
||||
|
||||
<div class={className}>
|
||||
<!-- Hidden element to pass server data to client -->
|
||||
<div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
|
||||
|
||||
<div class="relative flex items-center w-full h-60">
|
||||
<button id="dec-button" class="absolute left-2" onclick="dec()"><</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,29 +0,0 @@
|
||||
---
|
||||
import TagRow from "../Card/TagRow.astro";
|
||||
|
||||
|
||||
const { re } = Astro.props
|
||||
|
||||
function formatTime(seconds) {
|
||||
if (seconds === 0) return null
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
let result = "";
|
||||
if (h > 0) result += `${h}h`;
|
||||
if (m > 0) result += `${m}m`;
|
||||
if (result === "") result = "0m";
|
||||
return result;
|
||||
}
|
||||
|
||||
const workTime = formatTime(re.worktime)
|
||||
const waitTime = formatTime(re.waittime)
|
||||
---
|
||||
|
||||
<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
|
||||
<div class="flex pt-1 items-center">
|
||||
{re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
|
||||
{workTime && (<p class="border-r px-2">{workTime} Work</p>)}
|
||||
{waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
|
||||
{re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
|
||||
</div>
|
||||
<TagRow tagIds={re.tags}/>
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
// const { ingredients } = Astro.props
|
||||
|
||||
const { class: className, ingredients } = Astro.props
|
||||
const tableView = true
|
||||
---
|
||||
|
||||
{!tableView && (
|
||||
<div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
|
||||
{
|
||||
ingredients.map(ing => (
|
||||
<div class="text-white/70">
|
||||
<p>• {ing.quantity} {ing.unit} {ing.name}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tableView && (
|
||||
<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-2">Quantity</th>
|
||||
<th class="px-4 py-2">Unit</th>
|
||||
<th class="px-4 py-2">Ingredient</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
ingredients.map(ing => (
|
||||
<>
|
||||
<tr class="border-t border-gray-600">
|
||||
<td class="px-4 py-2">{ing.quantity}</td>
|
||||
<td class="px-4 py-2">{ing.unit}</td>
|
||||
<td class="px-4 py-2">{ing.name}</td>
|
||||
</tr>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
import client from "@/data/pocketbase";
|
||||
|
||||
const { ingredients, class: className } = Astro.props;
|
||||
|
||||
const ings = await Promise.all(
|
||||
ingredients.map(async i => await client.collection("ingredients").getOne(i))
|
||||
)
|
||||
---
|
||||
|
||||
<div class={className}>
|
||||
{ings.map(i => (
|
||||
<div>
|
||||
<p>• {i.quantity} {i.unit || " "} {i.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
import { record } from "astro:schema"
|
||||
import client from "@/data/pocketbase"
|
||||
import StepIngredientSideView from "./StepIngredientSideView.astro"
|
||||
|
||||
const { steps } = Astro.props
|
||||
---
|
||||
|
||||
<div class="md:ml-5 mt-2 md:mt-0">
|
||||
<p class="text-[22pt] font-bold md:hidden">Steps</p>
|
||||
{ steps.map(s => (
|
||||
<div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
|
||||
<p class="text-bold text-[10pt]">Step {s.index + 1}</p>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-stretch">
|
||||
<p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
|
||||
{s.ingredients && s.ingredients.length > 0 && (
|
||||
<div class="w-full md:w-auto md:flex-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
|
||||
<StepIngredientSideView class="text-left" ingredients={s.ingredients} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
@@ -1,14 +1,13 @@
|
||||
|
||||
<div class="flex w-full items-center bg-[#2a2b2c] text-white p-5">
|
||||
<div class="flex w-full items-center bg-yellow-100 p-5">
|
||||
<a class="flex" href="/">
|
||||
<p class="text-3xl">Recipie</p>
|
||||
<!-- <p class=" text-3xl text-amber-500">pie</p> -->
|
||||
<p class=" text-3xl">Reci</p>
|
||||
<p class=" text-3xl text-amber-500">pie</p>
|
||||
🥧
|
||||
</a>
|
||||
|
||||
<div class="ml-auto space-x-5">
|
||||
<a>new</a>
|
||||
<a>tags</a>
|
||||
<a>search</a>
|
||||
<div class="flex ml-10 space-x-5">
|
||||
<!-- <span>new</span>
|
||||
<span>sf</span> -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,12 +1,5 @@
|
||||
import Pocketbase from "pocketbase"
|
||||
|
||||
const client = new Pocketbase("http://localhost:4321")
|
||||
const client = new Pocketbase(import.meta.env.PUBLIC_URL)
|
||||
client.autoCancellation(false)
|
||||
|
||||
// Return a relative url for file instead of full path including localhost, which breaks external access
|
||||
client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
|
||||
const res = client.files.getURL(record, filename)
|
||||
return res.substring(21)
|
||||
}
|
||||
|
||||
export default client;
|
||||
@@ -10,7 +10,7 @@ import Header from "@/components/Header";
|
||||
<body>
|
||||
<main id="main" class="flex-1">
|
||||
<Header/>
|
||||
<div class="px-3 md:px-5 pt-2">
|
||||
<div class="px-5 pt-2">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import type { APIRoute } from "astro";
|
||||
|
||||
// THANK YOU https://stackoverflow.com/a/77297521 !!!!!!!
|
||||
|
||||
const getProxyUrl = (request: Request) => {
|
||||
const proxyUrl = new URL(import.meta.env.PUBLIC_PB_URL);
|
||||
const requestUrl = new URL(request.url);
|
||||
|
||||
return new URL(requestUrl.pathname, proxyUrl);
|
||||
};
|
||||
|
||||
export const ALL: APIRoute = async ({ request }) => {
|
||||
const proxyUrl = getProxyUrl(request);
|
||||
const response = await fetch(proxyUrl.href, request);
|
||||
return new Response(response.body);
|
||||
};
|
||||
@@ -9,7 +9,7 @@ const recipies = await client.collection("recipes").getFullList()
|
||||
<PageLayout>
|
||||
<!-- <p class="pb-2">What would you like today?</p> -->
|
||||
|
||||
<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
|
||||
<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
||||
{
|
||||
recipies.map(r => (
|
||||
<OverviewCard recipe={r} />
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
import client from "@/data/pocketbase";
|
||||
import SiteLayout from "@/layouts/base";
|
||||
import ImageCarousel from "@/components/Detail/ImageCarousel";
|
||||
import IngredientTableView from "@/components/Detail/IngredientTableView";
|
||||
import StepView from "@/components/Detail/StepView";
|
||||
import InfoView from "@/components/Detail/InfoView";
|
||||
|
||||
const { recipeid } = Astro.params;
|
||||
|
||||
const re = await client.collection("recipes").getOne(recipeid ?? "0");
|
||||
|
||||
const stepIds = re.steps
|
||||
|
||||
let steps = await Promise.all(
|
||||
stepIds.map(async s =>
|
||||
await client.collection("steps").getOne(s)
|
||||
)
|
||||
)
|
||||
|
||||
steps = steps.sort((a, b) => a.index - b.index);
|
||||
|
||||
const ingredients = await Promise.all(
|
||||
re.ingredients.map(async s =>
|
||||
await client.collection("ingredients").getOne(s)
|
||||
)
|
||||
)
|
||||
---
|
||||
|
||||
<SiteLayout>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="flex flex-col mt-2 md:mt-4 sticky">
|
||||
<ImageCarousel class="w-full" recipe={re} />
|
||||
<p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
|
||||
|
||||
<!-- Details -->
|
||||
<InfoView re={re} />
|
||||
|
||||
<p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
|
||||
<IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients} />
|
||||
</div>
|
||||
|
||||
<div class="flex w-full flex-col">
|
||||
<p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
|
||||
|
||||
<!-- Steps -->
|
||||
<StepView steps={steps} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</SiteLayout>
|
||||
12
src/pages/recipe/[slug].astro
Normal file
12
src/pages/recipe/[slug].astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import client from "@/data/pocketbase";
|
||||
import SiteLayout from "@/layouts/base";
|
||||
const { slug } = Astro.params;
|
||||
|
||||
const re = await client.collection("recipes").getOne(slug ?? "0");
|
||||
|
||||
---
|
||||
|
||||
<SiteLayout>
|
||||
{re.name}
|
||||
</SiteLayout>
|
||||
@@ -1,10 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
html {
|
||||
@apply bg-[#1d1f21];
|
||||
/* @apply bg-[#fafafa]; */
|
||||
@apply text-white;
|
||||
/* @apply font-; */
|
||||
@apply font-sans;
|
||||
/* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
|
||||
/* @apply bg-[#1d1f21]; */
|
||||
@apply bg-[#fafafa];
|
||||
@apply font-stretch-condensed;
|
||||
}
|
||||
Reference in New Issue
Block a user