phobos/src/pages/characters/[slug].astro
2024-07-20 10:25:53 +02:00

73 lines
1.6 KiB
Text

---
// import type { GetStaticPaths } from "astro";
import Gallery from "../../layouts/Gallery.astro";
import Image from "../../components/Image.astro";
import pb from "../../lib/pb";
export async function getStaticPaths() {
const paths = await pb
.collection("characters")
.getFullList({
sort: "-created",
})
.then((r) => r);
// console.log(paths);
return paths.map(({ slug }) => {
return {
params: { slug },
};
});
}
const { slug } = Astro.params;
const imageCollection = await pb.collection("images").getFullList({
sort: "-created",
filter: `(character.slug~"${slug}")`,
});
const characterDetails = await pb
.collection("characters")
.getFirstListItem(`(slug~"${slug}")`);
// console.log(characterDetails);
const images = imageCollection.map((record) => {
const url = pb.files.getUrl(record, record.file);
return {
url: url,
desc: record.description,
nsfw: record.nsfw,
};
});
export const prerender = true;
---
<Gallery>
<div class="flex flex-col">
<div class="pb-4">
<h1 class="text-2xl text-center p-8">
<a href={`/characters`}>
{characterDetails.name}
</a>
</h1>
{
characterDetails.description && (
<Fragment
class="text-xl p-8"
set:html={characterDetails.description}
/>
)
}
</div>
<div class="gap-4 columns-2 md:columns-4 self-center">
{
images.map((image) => (
<Image nsfw={image.nsfw} src={image.url} alt={image.desc} />
))
}
</div>
</div>
</Gallery>
<!-- <style>
</style> -->