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

Compare commits

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

No commits in common. "4451c95bf763319cb08c23f0a3cd927475a595dc" and "c25f95949bf0e8b1aa253d7deec8b7b6e6c088cd" have entirely different histories.
4451c95bf7 ... c25f95949b

5 changed files with 22 additions and 60 deletions
Show Stats Expand all files Collapse all files

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

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

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

@ -1,33 +0,0 @@
---
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,9 +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"> <slot />
<slot />
</div>
</main> </main>
</body> </body>
</html> </html>

18
src/pages/index.astro
View File

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

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

@ -1,12 +1,9 @@
--- ---
import client from "@/data/pocketbase"; import client from "@/data/pocketbase";
import SiteLayout from "@/layouts/base";
const { slug } = Astro.params; const { slug } = Astro.params;
const re = await client.collection("recipes").getOne(slug ?? "0"); const re = await client.collection("recipes").getOne(slug ?? "0");
--- ---
<SiteLayout> {re.name}
{re.name}
</SiteLayout>