40 lines
1.1 KiB
Plaintext
40 lines
1.1 KiB
Plaintext
---
|
|
import CalendarIcon from '@/icons/CalendarIcon.astro';
|
|
import { getImageUrl } from '@/lib/images';
|
|
import { markdownToHtml } from '@/lib/markdown';
|
|
import { Image } from 'astro:assets';
|
|
|
|
interface Props {
|
|
blog: BlogPost;
|
|
}
|
|
|
|
const { blog } = Astro.props;
|
|
---
|
|
|
|
<div
|
|
id={`blog-${blog.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-[67%] w-full">
|
|
<div class="flex flex-col gap-3">
|
|
<h1 class="font-semibold text-5xl">{blog.title}</h1>
|
|
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
|
|
<CalendarIcon width={20} height={20} />
|
|
<div>{blog.date}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Image
|
|
src={getImageUrl(blog.searchEngine.thumbnail.url)}
|
|
width="1200"
|
|
height="630"
|
|
alt={blog.title}
|
|
class="rounded-2xl shadow-md object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div set:html={markdownToHtml(blog.content)}></div>
|
|
</div>
|
|
</div>
|