61 lines
1.5 KiB
Plaintext
61 lines
1.5 KiB
Plaintext
|
---
|
||
|
|
import markdownToText from "@helpers/markdownToText";
|
||
|
|
import { Card } from "./card";
|
||
|
|
import { useTranslatedPath } from "@i18n/utils";
|
||
|
|
import Image from "@components/Image.astro";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
post: {
|
||
|
|
data: {
|
||
|
|
title: string;
|
||
|
|
icon?: string;
|
||
|
|
headerImg?: string;
|
||
|
|
};
|
||
|
|
collection: string;
|
||
|
|
slug: string;
|
||
|
|
body: string;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const {
|
||
|
|
data: { title, headerImg, icon },
|
||
|
|
collection,
|
||
|
|
body,
|
||
|
|
slug,
|
||
|
|
} = Astro.props.post;
|
||
|
|
|
||
|
|
const translatePath = useTranslatedPath(Astro);
|
||
|
|
|
||
|
|
const imagePath = `../content/${collection}/${slug.split("/")[0]}/${headerImg}`;
|
||
|
|
|
||
|
|
const image = headerImg && (await import(imagePath)).default;
|
||
|
|
|
||
|
|
const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
|
||
|
|
---
|
||
|
|
|
||
|
|
<Card
|
||
|
|
classes={`grid gradient border-1 border-neutral overflow-hidden ${image ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
|
||
|
|
>
|
||
|
|
<Card.Content classes="px-8 py-7 order-last sm:order-first">
|
||
|
|
<Card.Title classes="text-4xl flex items-center gap-2">
|
||
|
|
{icon && <img src={icon} class="h-6" />}
|
||
|
|
{title}
|
||
|
|
</Card.Title>
|
||
|
|
<Card.Description>
|
||
|
|
{markdownToText(body).slice(0, 200)}
|
||
|
|
</Card.Description>
|
||
|
|
<Card.ReadMoreButton link={link} />
|
||
|
|
</Card.Content>
|
||
|
|
{
|
||
|
|
image?.format && (
|
||
|
|
<a href={link}>
|
||
|
|
<Image
|
||
|
|
src={image}
|
||
|
|
alt={"cover for " + title}
|
||
|
|
class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
|
||
|
|
/>
|
||
|
|
</a>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Card>
|