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

Compare commits

base: breadone:c25f95949bf0e8b1aa253d7deec8b7b6e6c088cd
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9
...
compare: breadone:4451c95bf763319cb08c23f0a3cd927475a595dc
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9

3 Commits
c25f95949b ... 4451c95bf7

Author SHA1 Message Date
june
4451c95bf7
ok enough work on the cards i should do the actual ticket work now (but it is working real well) 2025-08-13 07:57:18 +12:00
june
5250d8c3b3
Safer handling of tags but im not done with them yet 2025-08-13 07:40:14 +12:00
june
eae36b8da5
layout in detailview 2025-08-12 23:59:53 +12:00
5 changed files with 60 additions and 22 deletions
Show Stats Expand all files Collapse all files

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

@ -1,5 +1,7 @@
---
import client from "@/data/pocketbase"
import TagRow from "./TagRow.astro"
const { recipe } = Astro.props;
const headerImage = await client.collection("images").getOne(recipe.images[0])
@ -12,16 +14,18 @@ const image = await client.files.getURL(headerImage, headerImage.image)
src={ image }
/>
<div class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
<p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
<p class="text-white text-[10pt]"> {recipe.description} </p>
<div 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 class="flex flex-row">
{recipe.tags.map(async tag => (
<p class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md">{
(await client.collection("tags").getOne(tag)).name
}</p>
))}
<div id="tag-row" class="">
<TagRow tagIds={recipe.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>

33
src/components/Card/TagRow.astro Normal file
View File

@ -0,0 +1,33 @@
---
import client from "../../data/pocketbase"
interface Props {
tagIds: string[]
}
const { tagIds } = Astro.props
const tags = tagIds && tagIds.length > 0
? await Promise.all(tagIds.map(async (tagId: string) => {
try {
const tagData = await client.collection("tags").getOne(tagId)
return { name: tagData.name, id: tagId }
} catch (error) {
return null
}
}))
: []
---
<div class="">
{
tags.map(tag => (
<a
href={`/tag/${tag.id}`}
class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30"
>
{tag.name}
</a>
))
}
</div>

4
src/layouts/base.astro
View File

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

18
src/pages/index.astro
View File

@ -7,18 +7,14 @@ const recipies = await client.collection("recipes").getFullList()
---
<PageLayout>
<div id="content" class="p-5 pt-2">
<!-- <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">
{
recipies.map(r => (
<a href={`/recipe/${r.id}`}>
<OverviewCard recipe={r} />
</a>
))
}
</div>
<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{
recipies.map(r => (
<OverviewCard recipe={r} />
))
}
</div>
</PageLayout>

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

@ -1,9 +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");
---
{re.name}
<SiteLayout>
{re.name}
</SiteLayout>