43 lines
1.4 KiB
Plaintext
43 lines
1.4 KiB
Plaintext
---
|
|
import CalendarIcon from '@/icons/CalendarIcon.astro';
|
|
import { getImageUrl } from '@/lib/images';
|
|
import { markdownToHtml } from '@/lib/markdown';
|
|
import { getTypographyClasses } from '@/styles/markdownClasses';
|
|
import { Image } from 'astro:assets';
|
|
|
|
interface Props {
|
|
project: ProjectPost;
|
|
}
|
|
|
|
const { project } = Astro.props;
|
|
---
|
|
|
|
<div
|
|
id={`project-${project.id}`}
|
|
class="flex flex-row justify-center items-center"
|
|
>
|
|
<div class="flex lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[50%]">
|
|
<div class="flex flex-col gap-3">
|
|
<h1 class="font-semibold text-5xl">{project.title}</h1>
|
|
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
|
|
<CalendarIcon width={20} height={20} />
|
|
<div>{project.date}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="aspect-1200/630 w-full max-w-full overflow-hidden">
|
|
<div class="w-full h-full rounded-2xl shadow-md object-cover">
|
|
<Image
|
|
src={getImageUrl(project.searchEngine.thumbnail.url)}
|
|
width="1200"
|
|
height="630"
|
|
alt={project.title}
|
|
class="rounded-2xl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div set:html={markdownToHtml(project.content)} class={`${getTypographyClasses()} min-w-full`}></div>
|
|
</div>
|
|
</div>
|