breadone/Recipie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: breadone:66567b9b688e35958d36f6fc40b2f1e6b24874be
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9
...
compare: breadone:557750607616bba9610f23467327b69f4bed27d8
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9

4 Commits
66567b9b68 ... 5577506076

Author SHA1 Message Date
june
5577506076
db changes 2025-08-13 11:11:54 +12:00
june
4f08b122e6
dark theme + format changes 2025-08-13 11:11:31 +12:00
june
013077d87f
hide buttons if only one image 
basic step parsing
 2025-08-13 10:15:35 +12:00
june
e3dad8bee4
rename page for ease 2025-08-13 09:41:17 +12:00
9 changed files with 87 additions and 32 deletions
Show Stats Expand all files Collapse all files

28
api/pb_migrations/1755039357_updated_steps.js Normal file
View File

@ -0,0 +1,28 @@
/// <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)
})

8
src/components/Card/OverviewCard.astro
View File

@ -8,15 +8,15 @@ const headerImage = await client.collection("images").getOne(recipe.images[0])
const image = await client.files.getURL(headerImage, headerImage.image) const image = await client.files.getURL(headerImage, headerImage.image)
--- ---
<div class="relative z-0 flex h-60"> <div class="relative z-0 flex h-50">
<img <img
class="w-full h-full object-cover rounded-xl" class="w-full h-full object-cover rounded-xl"
src={ image } src={ image }
/> />
<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"> <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" >{recipe.name}</p> <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> <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
<div id="tag-row" class=""> <div id="tag-row" class="">
<TagRow tagIds={recipe.tags}/> <TagRow tagIds={recipe.tags}/>

17
src/components/Detail/ImageCarousel.astro
View File

@ -22,6 +22,14 @@ const links = await Promise.all(
const cap = links.length - 1; const cap = links.length - 1;
const img = document.getElementById('carousel-img') as HTMLImageElement; 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() { function inc() {
pos = pos === cap ? 0 : pos + 1; pos = pos === cap ? 0 : pos + 1;
if (img) img.src = links[pos]; if (img) img.src = links[pos];
@ -41,7 +49,10 @@ const links = await Promise.all(
<!-- Hidden element to pass server data to client --> <!-- Hidden element to pass server data to client -->
<div class="hidden" id="carousel-data">{JSON.stringify(links)}</div> <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
<img id="carousel-img" src={links[0]} /> <div class="relative flex items-center w-70 h-60">
<button onclick="inc()">NEXT</button> <button id="dec-button" class="absolute left-2" onclick="dec()">PREV</button>
<button onclick="dec()">PREV</button> <img id="carousel-img" class="w-full h-full object-contain" src={links[0]} />
<!-- <div class="w-70 h-60 bg-green-600" /> -->
<button id="inc-button" class="absolute right-2" onclick="inc()">NEXT</button>
</div>
</div> </div>

9
src/components/Header.astro
View File

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

2
src/layouts/base.astro
View File

@ -10,7 +10,7 @@ import Header from "@/components/Header";
<body> <body>
<main id="main" class="flex-1"> <main id="main" class="flex-1">
<Header/> <Header/>
<div class="px-5 pt-2"> <div class="px-3 md:px-5 pt-2">
<slot /> <slot />
</div> </div>
</main> </main>

2
src/pages/index.astro
View File

@ -9,7 +9,7 @@ const recipies = await client.collection("recipes").getFullList()
<PageLayout> <PageLayout>
<!-- <p class="pb-2">What would you like today?</p> --> <!-- <p class="pb-2">What would you like today?</p> -->
<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4"> <div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4">
{ {
recipies.map(r => ( recipies.map(r => (
<OverviewCard recipe={r} /> <OverviewCard recipe={r} />

30
src/pages/recipe/[recipeid].astro Normal file
View File

@ -0,0 +1,30 @@
---
import client from "@/data/pocketbase";
import SiteLayout from "@/layouts/base";
import ImageCarousel from "@/components/Detail/ImageCarousel";
const { recipeid } = Astro.params;
const re = await client.collection("recipes").getOne(recipeid ?? "0");
const stepIds = re.steps
const steps = await Promise.all(
stepIds.map(async s =>
await client.collection("steps").getOne(s)
)
)
---
<SiteLayout>
<div class="flex">
<ImageCarousel recipe={re} />
<div class="flex flex-col pl-4">
<p class=" text-[28pt] font-bold">{re.name}</p>
{steps.map(a => (<p>{a.instruction}</p>))}
</div>
</div>
</SiteLayout>

16
src/pages/recipe/[slug].astro
View File

@ -1,16 +0,0 @@
---
import client from "@/data/pocketbase";
import SiteLayout from "@/layouts/base";
import ImageCarousel from "@/components/Detail/ImageCarousel";
const { slug } = Astro.params;
const re = await client.collection("recipes").getOne(slug ?? "0");
---
<SiteLayout>
<div class="flex">
<ImageCarousel recipe={re} />
</div>
</SiteLayout>

5
src/styles/global.css
View File

@ -1,7 +1,8 @@
@import "tailwindcss"; @import "tailwindcss";
html { html {
/* @apply bg-[#1d1f21]; */ @apply bg-[#1d1f21];
@apply bg-[#fafafa]; /* @apply bg-[#fafafa]; */
@apply text-white;
@apply font-stretch-condensed; @apply font-stretch-condensed;
} }